/* Base */
:root{
  --bg:#0b1220;
  --card: rgba(255,255,255,0.06);
  --card-2: rgba(255,255,255,0.04);
  --text:#e6eefc;
  --muted:#9fb0cc;
  --brand-a:#67e8f9; /* cyan-300 */
  --brand-b:#f0abfc; /* fuchsia-300 */
  --brand-c:#86efac; /* emerald-300 */
  --ring: rgba(103,232,249,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size:40px}
@media(min-width:640px){h1{font-size:56px}}
h2{font-size:32px}
h3{font-size:20px}
p{margin:0 0 10px}
a{color:inherit;text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.875rem 1.1rem;border-radius:14px;
  font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:.2s ease;
}
.btn-primary{
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c));
  color:#0b1220; box-shadow:0 10px 24px rgba(103,232,249,.25);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--card-2);border-color:rgba(255,255,255,.14);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.w-full{width:100%}

/* Fancy background blobs */
.bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.blob{position:absolute;filter:blur(64px);opacity:.55;transform:scale(1);}
.blob-a{width:640px;height:640px;left:-10%;top:-10%;
  background:radial-gradient(40% 40% at 50% 50%, rgba(103,232,249,.35), transparent 70%),
             radial-gradient(40% 40% at 70% 30%, rgba(240,171,252,.35), transparent 70%);}
.blob-b{width:720px;height:720px;right:-12%;bottom:-18%;
  background:radial-gradient(40% 40% at 50% 50%, rgba(134,239,172,.25), transparent 70%),
             radial-gradient(40% 40% at 40% 60%, rgba(250,204,21,.20), transparent 70%);}

/* Header */
.site-header{
  position:sticky;top:0;backdrop-filter:blur(14px);
  background:rgba(8,12,24,.5);border-bottom:1px solid rgba(255,255,255,.08);z-index:50
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.logo{width:36px;height:36px;display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:12px}
.menu{display:none;gap:22px;color:var(--muted)}
.menu a:hover{color:#fff}
@media(min-width:768px){.menu{display:flex}}

/* Hero */
.hero{padding:72px 0 24px}
.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-text p{color:var(--muted);font-size:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.hero-meta{display:flex;gap:24px;color:var(--muted);font-size:14px;margin-top:8px}
.gradient{background:linear-gradient(90deg,var(--brand-a),var(--brand-b),var(--brand-c));-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-card{position:relative}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feature{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px}
.feature-icon{font-size:22px}
.feature h3{margin:6px 0 4px}

/* Cards & Sections */
.cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px}
@media(min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards.three blockquote p{margin-bottom:8px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:20px}
.muted{color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px}
@media(min-width:768px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{display:flex;gap:12px;background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:16px}
.step-num{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--card-2);color:#fff;font-weight:600}

.pricing{display:grid;gap:16px}
@media(min-width:1024px){.pricing{grid-template-columns:2fr 1fr}}
.price-main .price-line{display:flex;align-items:flex-end;gap:10px}
.price{font-size:44px;font-weight:700}
.per{color:var(--muted);margin-bottom:6px}

.faq details{background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600}

/* Contact */
.contact-grid{display:grid;gap:16px}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form input,.form textarea{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;color:#fff;padding:12px 14px;outline:none;
}
.form input:focus,.form textarea:focus{box-shadow:0 0 0 4px var(--ring);border-color:transparent}
.form-note{font-size:12px;color:var(--muted)}
.status{margin-top:10px;font-size:14px}
.status.ok{color:#86efac}
.status.err{color:#fca5a5}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.10);padding:28px 0;margin-top:32px;color:var(--muted)}
.footer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer a{color:var(--muted)}
.footer a:hover{color:#fff}

/* Floating call */
.floating-call{
  position:fixed;right:18px;bottom:18px;padding:10px 14px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  color:#0b1220;font-weight:700;display:flex;align-items:center;gap:8px;
  box-shadow:0 14px 40px rgba(103,232,249,.25);z-index:60
}
.floating-call:hover{transform:translateY(-1px)}