@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
:root{
  --bg:#080b12; --bg-soft:#0d121d; --panel:rgba(17,23,36,.72); --panel2:#111724;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.22);
  --cyan:#6de8ff; --blue:#4f7cff; --violet:#9f8cff; --lime:#c8ff5a; --ice:#bfe9ff;
  --text:#dbe3f0; --dim:#9ca8ba; --white:#f5f7fb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(79,124,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(109,232,255,.07), transparent 60%),
    radial-gradient(700px 700px at 50% 110%, rgba(159,140,255,.08), transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 32px}

/* nav */
nav.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
nav.top .mark{display:flex;align-items:center;gap:12px;text-decoration:none}
nav.top .mark img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 18px rgba(109,232,255,.35)}
nav.top .mark span{color:var(--white);font-weight:700;letter-spacing:.28em;font-size:14px}
nav.top .links a{color:var(--dim);text-decoration:none;margin-left:26px;font-size:14px;letter-spacing:.06em}
nav.top .links a:hover{color:var(--cyan)}
nav.top .links a.btn{color:var(--white)}

/* buttons */
.btn{display:inline-block;padding:14px 34px;border-radius:999px;text-decoration:none;
  font-weight:700;letter-spacing:.06em;color:#0b1400;
  background:var(--lime);
  box-shadow:0 0 24px rgba(200,255,90,.28),0 0 60px rgba(109,232,255,.12);
  border:1px solid rgba(200,255,90,.5);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(200,255,90,.42),0 0 80px rgba(109,232,255,.18)}
.btn.ghost{background:transparent;border:1px solid var(--line-strong);box-shadow:none;color:var(--ice);font-weight:600}
.btn.ghost:hover{border-color:var(--cyan);color:var(--white)}

/* hero */
header.hero{text-align:center;padding:72px 0 60px}
header.hero .logo{width:250px;height:250px;border-radius:50%;
  box-shadow:0 0 70px rgba(109,232,255,.28),0 0 160px rgba(79,124,255,.16);margin-bottom:34px}
header.hero .kicker{font-size:12px;letter-spacing:.55em;color:var(--cyan);text-transform:uppercase;font-weight:600;margin-bottom:18px}
header.hero h1{font-size:56px;font-weight:800;color:var(--white);letter-spacing:-.01em;line-height:1.08;margin-bottom:18px}
header.hero .sub{font-size:20px;color:var(--dim);max-width:640px;margin:0 auto 36px}
header.hero .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
header.hero .under{margin-top:18px;font-size:13px;color:var(--dim);letter-spacing:.04em}
.live-chip{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 20px;
  border:1px solid var(--line-strong);border-radius:999px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text);background:var(--panel)}
.live-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.live-chip strong{color:var(--lime);font-weight:700}

.hrule{height:1px;margin:20px 0;
  background:linear-gradient(90deg,transparent,rgba(109,232,255,.5),rgba(159,140,255,.5),transparent)}

/* sections */
section{padding:64px 0}
section .kicker{font-size:11px;letter-spacing:.4em;color:var(--cyan);text-transform:uppercase;font-weight:600;margin-bottom:12px}
section h2{font-size:34px;color:var(--white);font-weight:750;margin-bottom:16px;letter-spacing:-.01em}
section .lead{font-size:18px;color:var(--text);max-width:760px;margin-bottom:34px}
section .lead strong{color:var(--white)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:28px 28px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card h3{color:var(--white);font-size:18px;font-weight:700;margin-bottom:10px}
.card p{font-size:15px;color:var(--text)}
.card .num{font-family:ui-monospace,monospace;color:var(--violet);font-weight:800;font-size:13px;letter-spacing:.2em;display:block;margin-bottom:12px}

ul.checks{list-style:none;margin-top:8px}
ul.checks li{padding:8px 0 8px 32px;position:relative;font-size:16px}
ul.checks li::before{content:'';position:absolute;left:0;top:13px;width:15px;height:15px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--cyan),var(--blue));
  box-shadow:0 0 10px rgba(109,232,255,.6)}
ul.checks li strong{color:var(--white)}

/* pricing */
.price-card{max-width:560px;margin:0 auto;text-align:center;background:var(--panel);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);border-radius:26px;padding:46px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 60px rgba(109,232,255,.08)}
.price-card .tag{display:inline-block;padding:6px 16px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice);margin-bottom:22px;
  background:linear-gradient(90deg,rgba(109,232,255,.08),rgba(159,140,255,.08))}
.price-card .price{font-size:64px;color:var(--lime);font-weight:800;line-height:1;margin-bottom:6px;
  text-shadow:0 0 40px rgba(200,255,90,.35)}
.price-card .once{color:var(--dim);font-size:14px;margin-bottom:26px;letter-spacing:.08em}
.price-card ul.checks{text-align:left;max-width:400px;margin:0 auto 30px}

/* faq page */
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 28px;margin-bottom:16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.faq-item h3{color:var(--white);font-size:17px;font-weight:700;margin-bottom:10px}
.faq-item p{font-size:15px}
.faq-item code{font-family:ui-monospace,monospace;font-size:13px;background:var(--panel2);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--cyan)}

/* footer */
footer{margin-top:40px;padding:36px 0 46px;border-top:1px solid var(--line);text-align:center;color:var(--dim);font-size:13px}
footer .fbrand{letter-spacing:.4em;text-transform:uppercase;font-size:11px;color:var(--cyan);margin-bottom:10px}
footer .social{margin:12px 0}
footer .social a{color:var(--dim);text-decoration:none;margin:0 12px;font-size:13px}
footer .social a:hover{color:var(--cyan)}

/* 404 */
.lost{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lost h1{font-size:100px;color:var(--white);font-weight:800;letter-spacing:.1em;
  text-shadow:0 0 40px rgba(109,232,255,.5)}
.lost p{color:var(--dim);font-size:18px;margin:14px 0 30px}

@media (max-width:820px){
  .grid3,.grid2{grid-template-columns:1fr}
  header.hero h1{font-size:38px}
  header.hero .logo{width:180px;height:180px}
  section h2{font-size:27px}
  nav.top .links a{margin-left:16px}
  .wrap{padding:0 20px}
}