:root{
  --bg:#06070d;
  --s1:#0a0b14;
  --s2:#0f1120;
  --s3:#15182b;
  --b1:rgba(120,140,255,.1);
  --b2:rgba(120,140,255,.2);
  --t1:#eef0ff;
  --t2:#99a1ca;
  --t3:#5f6788;
  --gold:#f7c948;
  --cyan:#00e5ff;
  --green:#00e8a2;
  --font:'Manrope',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(ellipse 1000px 600px at 0% -10%, rgba(155,111,255,.12) 0%, transparent 55%),
    radial-gradient(ellipse 800px 500px at 100% 0%, rgba(0,229,255,.08) 0%, transparent 55%),
    linear-gradient(180deg,#06070d 0%,#090b12 55%,#06070d 100%);
  color:var(--t1);
  font-family:var(--font);
  line-height:1.65;
}

a{color:inherit}
.shell{max-width:1160px;margin:0 auto;padding:0 28px}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(24px);
  background:rgba(6,7,13,.88);
  border-bottom:1px solid var(--b1);
}
.topbar .shell{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:72px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
}
.brand-mark{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:linear-gradient(135deg,var(--gold),#e08800);
  box-shadow:0 0 18px rgba(247,201,72,.3);
  font-size:0;
  position:relative;
  overflow:hidden;
}
.brand-mark::before{
  content:'';
  width:13px;
  height:13px;
  border-radius:4px;
  background:rgba(6,7,13,.88);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-mark::after{
  content:'';
  position:absolute;
  width:10px;
  height:2px;
  border-radius:999px;
  background:rgba(247,201,72,.96);
  transform:translate(3px,-2px) rotate(-45deg);
}
.brand em{font-style:normal;color:var(--gold)}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-left:auto;
}
.nav a{
  text-decoration:none;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid var(--b1);
  color:var(--t2);
  font-size:13px;
  letter-spacing:.01em;
}
.nav a:hover{border-color:var(--b2);color:var(--t1)}
.hero{padding:68px 0 30px}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 18px;
  color:var(--t3);
  font-size:12px;
  font-weight:700;
}
.breadcrumbs a{
  text-decoration:none;
  color:var(--t2);
}
.breadcrumbs a:hover{color:var(--t1)}
.breadcrumbs span{color:var(--t3)}
.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(247,201,72,.07);
  border:1px solid rgba(247,201,72,.18);
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1{
  margin:20px 0 16px;
  font-size:clamp(40px,6vw,72px);
  line-height:.94;
  letter-spacing:-.05em;
}
.lede{
  max-width:780px;
  font-size:18px;
  color:var(--t2);
  line-height:1.82;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:28px;
  margin-top:34px;
}
.panel,.card,.faq-item,.note{
  background:linear-gradient(180deg,rgba(15,17,32,.95),rgba(9,11,18,.96));
  border:1px solid var(--b1);
  border-radius:28px;
}
.panel{padding:28px}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.stat{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(120,140,255,.08);
}
.stat strong{display:block;font-size:24px;color:var(--gold)}
.stat span{display:block;margin-top:4px;color:var(--t2);font-size:14px}
.section{padding:24px 0}
.section h2{
  margin:0 0 14px;
  font-size:32px;
  line-height:1.04;
  letter-spacing:-.035em;
}
.section p,.section li{color:var(--t2);font-size:16px}
.section ul{padding-left:20px}
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card{padding:24px}
.card h3{margin:0 0 10px;font-size:21px}
.card p{margin:0 0 16px;color:var(--t2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chip{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--b1);
  color:var(--t2);
  font-size:12px;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#ffb224);
  color:#14120b;
}
.btn-secondary{
  border:1px solid var(--b2);
  color:var(--t1);
  background:rgba(255,255,255,.03);
}
.faq-list{display:grid;gap:14px}
.faq-item{padding:20px 22px}
.faq-item h3{margin:0 0 8px;font-size:18px}
.faq-item p{margin:0;color:var(--t2)}
.note{
  padding:20px 22px;
  color:var(--t2);
  border-color:rgba(247,201,72,.18);
  background:rgba(247,201,72,.06);
}
.footer{
  padding:42px 0 62px;
  margin-top:24px;
  border-top:1px solid var(--b1);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:end;
}
.footer h2{margin:0 0 8px;font-size:18px}
.footer p{margin:0;color:var(--t2)}

@media (max-width: 900px){
  .hero-grid,.cards,.footer-grid{grid-template-columns:1fr}
}

/* Card variants */
.card-green{border-color:rgba(0,232,162,.25);background:linear-gradient(180deg,rgba(0,232,162,.08),rgba(9,11,18,.96))}
.card-green h3{color:var(--green)}
.card-red{border-color:rgba(255,61,122,.25);background:linear-gradient(180deg,rgba(255,61,122,.08),rgba(9,11,18,.96))}
.card-red h3{color:#ff3d7a}

/* Table */
.table-wrap{overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--b1)}
th{background:rgba(255,255,255,.03);color:var(--t1);font-weight:700}
td{color:var(--t2)}
tr:hover td{background:rgba(255,255,255,.02)}

/* FAQ details */
details.faq-item{cursor:pointer}
details.faq-item summary{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:700;
  color:var(--t1);
  list-style:none;
}
details.faq-item summary::before{
  content:'+';
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:var(--gold);
  font-size:20px;
  font-weight:400;
  flex-shrink:0;
}
details.faq-item[open] summary::before{content:'−'}
details.faq-item p{margin:14px 0 0 40px}
details.faq-item summary::-webkit-details-marker{display:none}

/* Ordered list styling */
.section ol{padding-left:24px;counter-reset:step}
.section ol li{counter-increment:step;margin-bottom:12px;color:var(--t2)}
.section ol li::marker{content:counter(step) ". ";color:var(--gold);font-weight:700}

@media (max-width: 640px){
  .shell{padding:0 18px}
  .topbar .shell{align-items:flex-start;padding-top:12px;padding-bottom:12px}
  .nav{margin-left:0}
  .hero{padding-top:34px}
  .lede{font-size:17px}
  .section h2{font-size:26px}
  .cards{grid-template-columns:1fr}
}