:root{
  --bg:#070b14;
  --card:#0f1933;
  --text:#eef3ff;
  --muted:#b7c4e2;
  --muted2:#92a3c8;
  --accent:#5eead4;
  --accent2:#60a5fa;
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:26px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text)}
a{color:inherit; text-decoration:none}
p{margin:0 0 12px}
ul{margin:10px 0 0 18px}
li{margin:7px 0}
strong{color:var(--text)}
code{background:rgba(255,255,255,.06); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.10)}
.container{max-width:1120px;margin:0 auto;padding:30px 18px}

.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip:focus{left:18px;top:18px;width:auto;height:auto;padding:10px 12px;border-radius:999px;background:rgba(94,234,212,.15);border:1px solid rgba(94,234,212,.35);}

.header{
  background:
    radial-gradient(1100px 560px at 18% 0%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(1000px 560px at 78% 18%, rgba(94,234,212,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
  border-bottom:1px solid var(--border);
}

.nav{max-width:1120px;margin:0 auto;padding:18px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px;}
.brand img{width:34px;height:34px;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.35);}
.navlinks{display:flex; gap:14px; color:var(--muted2); font-weight:700; flex-wrap:wrap}
.navlinks a{padding:10px 12px;border-radius:999px;border:1px solid transparent;}
.navlinks a:hover{color:var(--text);border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.03);}

.hero{max-width:1120px;margin:0 auto;padding:18px 18px 56px;display:grid; grid-template-columns: 1.15fr .85fr; gap:24px; align-items:center;}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--muted);font-weight:800;width:fit-content;}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(94,234,212,.8);box-shadow:0 0 0 6px rgba(94,234,212,.14);}
.hero h1{font-size:46px; line-height:1.05; margin:14px 0 12px}
.lead{color:var(--muted); font-size:17px; line-height:1.65; margin:0 0 18px}
.muted{color:var(--muted)}
.small{color:var(--muted2); font-size:12.5px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 12px}

.btn{display:inline-flex; align-items:center; justify-content:center;padding:12px 16px; border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-weight:900;transition: transform .12s ease, background .12s ease, border-color .12s ease;}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.05)}
.btn.primary{border-color:rgba(94,234,212,.40);background:linear-gradient(135deg, rgba(94,234,212,.20), rgba(96,165,250,.16));}
.btn.ghost{border-color:rgba(96,165,250,.25);background:rgba(96,165,250,.07);}

.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.badge{padding:8px 12px; border-radius:999px;border:1px dashed rgba(255,255,255,.14);color:var(--muted2); font-weight:800; font-size:13px;}

.mock{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius2);box-shadow:var(--shadow);overflow:hidden;}
.mock-top{display:flex; align-items:center; justify-content:space-between;padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10);}
.mock-circles{display:flex; gap:6px}
.circle{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.14)}
.mock-title{font-weight:900; color:var(--muted2); font-size:13px}
.mock-body{padding:16px}
.mock-card{display:flex; gap:12px; align-items:center; padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);background:rgba(0,0,0,.18);}
.imgph{width:110px;height:78px;border-radius:16px;border:1px solid rgba(255,255,255,.12);display:flex; align-items:center; justify-content:center;color:var(--muted2); font-weight:900;background:rgba(255,255,255,.03);}
.mock-meta{font-size:13.5px; color:var(--muted); line-height:1.55}
.mock-meta span{color:var(--muted2); font-weight:800}
.mock-foot{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;}
.chip{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--muted2); font-weight:800; font-size:12.5px;}

.section{padding:28px 0}
.section h2{margin:0 0 10px; font-size:30px}
.section .sub{color:var(--muted); margin-bottom:14px; max-width:820px}

.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:14px;}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius2);padding:16px;box-shadow: 0 10px 22px rgba(0,0,0,.28);}
.card h3{margin:2px 0 8px}
.card p{color:var(--muted); line-height:1.6}
.card .mini{color:var(--muted2); font-weight:800; font-size:13px; margin-top:10px}

.steps{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;margin-top:14px;}
.step{display:flex; gap:14px; align-items:flex-start;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius2);padding:16px;}
.stepnum{width:38px; height:38px; border-radius:16px;display:flex; align-items:center; justify-content:center;background:rgba(94,234,212,.14);border:1px solid rgba(94,234,212,.24);font-weight:1000;}
.hint{color:var(--muted2); font-size:13px; margin-top:6px}

.pricing{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:14px;}
.pricecard{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius2);padding:18px;box-shadow: 0 10px 22px rgba(0,0,0,.28);position:relative;}
.price{font-size:34px; font-weight:1000; margin:6px 0 4px}
.per{font-size:14px; color:var(--muted2); font-weight:900}
.featured{outline:2px solid rgba(94,234,212,.22);box-shadow: 0 18px 40px rgba(0,0,0,.40);}
.ribbon{position:absolute; top:14px; right:14px;font-size:12px; font-weight:1000; color:#061016;background:var(--accent);padding:7px 10px; border-radius:999px;}
.value{margin-top:8px; padding:10px 12px; border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--muted);font-weight:800;}
.notice{margin-top:14px;padding:14px;border-radius:var(--radius2);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--muted);line-height:1.6;}

.policy-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.linkbtn{display:inline-flex; align-items:center; justify-content:center;padding:10px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-weight:1000;color:var(--muted);}
.linkbtn:hover{color:var(--text); background:rgba(255,255,255,.05)}

.footer{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;color:var(--muted2);}
.footrow{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.footlinks{display:flex; gap:14px; flex-wrap:wrap}
.footlinks a{padding:8px 10px;border-radius:999px;border:1px solid transparent}
.footlinks a:hover{color:var(--text); border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.03)}

.page{max-width:920px;}
.page h1{font-size:40px; margin:0 0 10px}
.hr{height:1px;background:rgba(255,255,255,.12); margin:18px 0;}
.callout{padding:14px 16px;border-radius:18px;border:1px solid rgba(96,165,250,.18);background:rgba(96,165,250,.08);color:var(--muted);line-height:1.6;}
.kv{margin:12px 0 0;display:grid; grid-template-columns: 240px 1fr; gap:10px 12px;}
.kv div{padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.kv .k{color:var(--muted2); font-weight:1000}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  .kv{grid-template-columns:1fr}
}