:root{
  --cg-primary: #0F62FE;
  --cg-accent: #22C55E;
  --cg-ink: #0B1220;
  --cg-muted: #5B6472;
  --cg-bg: #0A0F1E;
  --cg-card: #111833;
  --cg-gradient: radial-gradient(80% 80% at 10% 10%, rgba(34,197,94,0.25) 0%, rgba(15,98,254,0.15) 40%, rgba(0,0,0,0) 70%);
}
html { scroll-behavior: smooth; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color: #E6EAF2; background: var(--cg-bg); }
img { max-width: 100%; height: auto; }
a { color: #A6C8FF; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1200px, 92vw); margin: 0 auto; }
.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}
.p-0{padding:0}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.grid{display:grid}.grid-3{grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 18px;}
.card{background:var(--cg-card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(5,10,20,.25)}
.badge{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; background:rgba(166,200,255,.08); border:1px solid rgba(166,200,255,.2); padding:.35rem .6rem; border-radius:999px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:linear-gradient(135deg,var(--cg-primary),#4F46E5); color:white; border-radius:12px; padding:.8rem 1.1rem; border:none; cursor:pointer; font-weight:600}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.12); color:#E6EAF2}
.btn:focus{outline:2px solid rgba(79,70,229,.6); outline-offset:2px}
.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero::before{content:""; position:absolute; inset:-20% -10% auto -10%; height:140%; background:var(--cg-gradient); filter: blur(40px); z-index:0}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:64px 0}
.hero h1{font-size:clamp(32px,5vw,56px); line-height:1.05; margin:0 0 14px}
.hero p{font-size:clamp(16px,2.2vw,20px); color:#C7CCDA}
.hero-illus{display:flex; align-items:end; justify-content:center}
.kpis{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px}
.kpis .kpi{background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25); border-radius:14px; padding:14px; font-size:14px}
.section { padding: 56px 0; }
.section h2{font-size:clamp(26px,3vw,36px); margin:0 0 6px}
.section p.lead{color:#C7CCDA; margin-top:0}
.brand-card h3{margin:.2rem 0 .4rem}
.brand-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.faq details{background:var(--cg-card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px}
.faq summary{cursor:pointer; font-weight:600}
.footer{margin-top:48px; padding:24px 0; border-top:1px solid rgba(255,255,255,.08); color:#A8AFBF; font-size:14px}
.footer small{display:block; opacity:.8}
.nav{display:flex; gap:16px; align-items:center}
.site-logo{display:flex; align-items:center; gap:10px}
.site-logo img{height:36px}
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(10,15,30,.66); border-bottom:1px solid rgba(255,255,255,.06)}
.header .container{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.notice{background:#13213A; border:1px solid rgba(166,200,255,.2); padding:10px 14px; border-radius:10px; font-size:14px}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; padding:36px 0}
  .hero-illus{order:-1}
  .kpis{grid-template-columns:1fr; gap:10px}
}