:root{
  --bg:#07101e;
  --bg-2:#0d1830;
  --card:rgba(14,25,47,.72);
  --card-solid:#10203c;
  --text:#e9f1ff;
  --muted:#a4b7db;
  --line:rgba(255,255,255,.11);
  --blue:#4bc0ff;
  --blue-2:#82d4ff;
  --red:#ff4a5f;
  --gold:#f9cf71;
  --shadow:0 30px 80px rgba(0,0,0,.35);
  --radius:24px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,74,95,.20), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(75,192,255,.22), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(249,207,113,.10), transparent 30%),
    linear-gradient(180deg,#07101e,#0a1430 42%,#07111f 100%);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 82%);
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(5,10,20,.58);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:78px;
}
.brand{
  display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.2px;
}
.brand-mark{
  width:46px;height:46px;border-radius:14px; flex:0 0 46px;
  background:linear-gradient(135deg,var(--red),var(--blue));
  box-shadow:0 10px 30px rgba(255,74,95,.25);
  position:relative; overflow:hidden;
}
.brand-mark::before{
  content:""; position:absolute; inset:8px; border-radius:12px;
  border:2px solid rgba(255,255,255,.9);
  clip-path:polygon(16% 18%, 84% 18%, 70% 52%, 84% 82%, 16% 82%, 30% 52%);
}
.brand span small{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:2px}
.nav{display:flex; flex-wrap:wrap; gap:8px}
.nav a{
  padding:10px 14px; border:1px solid transparent; border-radius:999px; color:var(--muted);
  transition:.18s ease;
}
.nav a:hover,.nav a.active{border-color:var(--line); color:#fff; background:rgba(255,255,255,.05)}
.hero{padding:52px 0 24px}
.hero-card{
  border:1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(255,74,95,.13), transparent 28%),
    linear-gradient(300deg, rgba(75,192,255,.16), transparent 28%),
    rgba(10,20,40,.72);
  box-shadow:var(--shadow);
  border-radius:32px; overflow:hidden; position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.28fr .72fr; gap:26px;
  padding:44px;
}
.eyebrow{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,var(--gold),#fff)}
.hero h1{
  margin:18px 0 14px; font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-1.4px;
}
.hero p.lead{
  margin:0; color:#d5e2ff; font-size:18px; line-height:1.8; max-width:68ch;
}
.hero-stats{
  display:grid; gap:14px;
}
.stat{
  padding:18px 20px; border-radius:20px; border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.stat strong{display:block; font-size:15px; margin-bottom:7px}
.stat span{display:block; color:var(--muted); line-height:1.6; font-size:14px}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:999px;
  border:1px solid var(--line); transition:.18s ease; font-weight:700;
}
.btn.primary{
  background:linear-gradient(90deg,var(--red),var(--blue));
  border-color:transparent; color:white; box-shadow:0 14px 40px rgba(75,192,255,.2);
}
.btn:hover{transform:translateY(-1px)}
.layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; padding:26px 0 52px}
.content-card,.side-card,.faq-card,.feature-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow);
}
.content-card{padding:26px}
.content-card h2{
  font-size:28px; line-height:1.16; margin:0 0 14px;
}
.content-card p{
  color:#dbe7ff; line-height:1.9; font-size:17px; margin:0 0 18px;
}
.content-card .section + .section{padding-top:8px; margin-top:8px; border-top:1px dashed rgba(255,255,255,.1)}
.sidebar{display:grid; gap:18px; align-content:start}
.side-card{padding:22px}
.side-card h3,.faq-card h2{margin:0 0 12px;font-size:20px}
.side-card p{margin:0;color:var(--muted);line-height:1.7}
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; color:var(--muted); font-size:14px
}
.breadcrumbs a{color:#d5e2ff}
.list-links{display:grid; gap:10px; margin-top:14px}
.list-links a{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  color:#f3f7ff;
}
.list-links small{display:block; color:var(--muted); line-height:1.5; margin-top:4px}
.badge-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px}
.badge{
  padding:14px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03)
}
.badge strong{display:block;font-size:14px;margin-bottom:4px}
.badge span{display:block;color:var(--muted); font-size:13px; line-height:1.5}
.feature-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px
}
.feature-card{padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03))}
.feature-card h3{margin:0 0 8px; font-size:20px}
.feature-card p{margin:0 0 14px; color:var(--muted); line-height:1.7}
.feature-card a{color:#fff; font-weight:700}
.faq-wrap{padding:6px 0 54px}
.faq-card{padding:26px}
.faq-item{padding:16px 0; border-top:1px dashed rgba(255,255,255,.11)}
.faq-item:first-of-type{border-top:0;padding-top:0}
.faq-item h3{margin:0 0 8px;font-size:18px}
.faq-item p{margin:0; color:var(--muted); line-height:1.8}
.footer{
  padding:26px 0 48px; border-top:1px solid var(--line); background:rgba(0,0,0,.14)
}
.footer-grid{display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:18px}
.footer p, .footer li{color:var(--muted); line-height:1.8}
.footer ul{list-style:none; padding:0; margin:0}
.footer h4{margin:0 0 10px; font-size:17px}
.meta-strip{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0
}
.meta-pill{
  padding:9px 12px; border-radius:999px; font-size:13px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08)
}
.hero-visual{
  min-height:100%; padding:20px;
  display:grid; gap:14px; align-content:center;
}
.visual-panel{
  min-height:118px; border-radius:24px; border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, rgba(255,74,95,.35), rgba(75,192,255,.35));
  position:relative; overflow:hidden;
}
.visual-panel::before,.visual-panel::after{
  content:""; position:absolute; border-radius:999px; filter:blur(0.4px);
}
.visual-panel::before{width:90px;height:90px; right:26px; top:14px; background:rgba(255,255,255,.18)}
.visual-panel::after{width:180px;height:180px; left:-26px; bottom:-82px; background:rgba(0,0,0,.12)}
.visual-copy{
  padding:18px 22px; border-radius:22px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04)
}
.visual-copy strong{display:block;font-size:15px;margin-bottom:8px}
.visual-copy span{color:var(--muted); line-height:1.7; font-size:14px}
.toc{display:grid; gap:10px; margin-top:12px}
.toc a{padding:11px 14px; border-radius:16px; color:#d8e6ff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
.notice{
  padding:16px 18px; border-radius:18px;
  background:linear-gradient(90deg, rgba(255,74,95,.14), rgba(75,192,255,.14));
  border:1px solid rgba(255,255,255,.08); color:#f8fbff; line-height:1.75;
}
@media (max-width: 980px){
  .hero-grid, .layout, .footer-grid, .feature-grid{grid-template-columns:1fr}
  .topbar-inner{align-items:flex-start; padding:14px 0}
}
@media (max-width: 720px){
  .hero-grid{padding:26px}
  .hero h1{font-size:clamp(30px,9vw,46px)}
  .content-card,.faq-card,.side-card{padding:20px}
  .badge-grid{grid-template-columns:1fr}
  .nav{display:none}
}