:root{
  --bg:#0a1222;
  --bg2:#0f1b33;
  --pri:#1d8bff;
  --acc:#39d5ff;
  --neo:#7c5cff;
  --text:#eef4ff;
  --muted:rgba(238,244,255,.72);
  --line:rgba(238,244,255,.12);
  --card:rgba(13,24,44,.78);
  --card2:rgba(255,255,255,.06);
  --shadow:0 22px 60px rgba(5,12,30,.45);
  --r:22px;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(29,139,255,.22), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(57,213,255,.18), transparent 58%),
    radial-gradient(700px 600px at 60% 110%, rgba(124,92,255,.16), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 65%, #0b1220 100%);
  font-family:"Space Grotesk","Manrope","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(transparent 96%, rgba(29,139,255,.08) 97%),
                    linear-gradient(90deg, transparent 96%, rgba(29,139,255,.08) 97%);
  background-size:44px 44px;
  opacity:.35;
  mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 65%);
  animation:gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse{
  0%,100%{opacity:.32; transform:translateY(0)}
  50%{opacity:.5; transform:translateY(-6px)}
}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(10,18,34,.75); border-bottom:1px solid var(--line)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand img{width:38px; height:38px; border-radius:12px; box-shadow:var(--shadow)}
.brand-text{min-width:0}
.brand-text strong{display:block; font-size:15px; line-height:1.1}
.brand-text span{display:block; margin-top:4px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

#navToggle{display:none}
.menu-btn{width:44px; height:40px; border-radius:14px; border:1px solid var(--line); background:var(--card); display:inline-flex; align-items:center; justify-content:center}
.menu-btn i{width:18px; height:2px; background:var(--text); position:relative; display:block}
.menu-btn i:before,.menu-btn i:after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text)}
.menu-btn i:before{top:-6px} .menu-btn i:after{top:6px}

.nav{display:none; flex-direction:column; gap:8px; padding:10px 0 14px}
.nav a{padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-size:13px; transition:all .25s ease}
.nav a.active{color:var(--text); border-color:rgba(29,139,255,.6); background:rgba(29,139,255,.16)}
#navToggle:checked ~ .nav{display:flex}

@media (min-width: 980px){
  .menu-btn{display:none}
  .nav{display:flex; flex-direction:row; padding:0; gap:12px}
  .nav a{border-color:transparent; background:transparent}
  .nav a:hover{background:var(--card2); border-color:var(--line); color:var(--text); transform:translateY(-1px)}
}

.section{padding:40px 0}
.section-title h2{margin:0 0 8px; font-size:22px}
.section-title p{margin:0; color:var(--muted)}

.hero-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 980px){.hero-grid{grid-template-columns:1.1fr .9fr; align-items:stretch}}
.hero-card{padding:22px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow)}
.hero-card{position:relative; overflow:hidden}
.hero-card:after{
  content:""; position:absolute; inset:-2px; border-radius:var(--r);
  background:linear-gradient(120deg, rgba(57,213,255,.25), rgba(29,139,255,.2), rgba(124,92,255,.18));
  opacity:.55; filter:blur(18px); z-index:-1;
}
.hero-card:before{
  content:""; position:absolute; inset:0; background:
    radial-gradient(200px 120px at 10% 10%, rgba(57,213,255,.14), transparent 60%),
    radial-gradient(220px 140px at 90% 20%, rgba(124,92,255,.12), transparent 60%);
  opacity:.7; pointer-events:none;
}
.hero-card h1{margin:12px 0 10px; font-size:32px; line-height:1.15}
.hero-card p{margin:0; color:var(--muted); line-height:1.8}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-size:12px}
.eyebrow span{width:8px; height:8px; border-radius:999px; background:var(--acc); box-shadow:0 0 0 4px rgba(57,213,255,.18)}

.hero-media{position:relative; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; background:var(--card)}
.hero-media img{height:100%; min-height:260px; object-fit:cover; transition:transform .6s ease}
.hero-media:hover img{transform:scale(1.05)}
.hero-media .glow{position:absolute; right:10%; top:10%; width:160px; height:160px; border-radius:999px; background:radial-gradient(circle, rgba(29,139,255,.45), transparent 70%); filter:blur(8px)}
.hero-media{transform-style:preserve-3d}
.hero-media .glow{animation:glowFloat 6s ease-in-out infinite}
@keyframes glowFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-radius:16px; border:1px solid var(--line); background:var(--card2); color:var(--text); font-size:13px; transition:transform .2s ease, box-shadow .2s ease}
.btn.primary{border-color:transparent; background:linear-gradient(90deg, var(--pri), var(--acc)); box-shadow:0 14px 28px rgba(29,139,255,.25)}
.btn.ghost{background:transparent}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{position:relative; overflow:hidden}
.btn.primary:after{
  content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.35), transparent 60%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn.primary:hover:after{transform:translateX(120%)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chips span{padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-size:12px}

.glossary-grid{display:grid; gap:12px}
@media (min-width: 900px){.glossary-grid{grid-template-columns:repeat(4,1fr)}}
.info-card{padding:16px; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.info-card{transition:transform .25s ease, box-shadow .25s ease}
.info-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(6,12,28,.35)}
.info-card h3{margin:0 0 8px; font-size:15px}
.info-card p{margin:0; color:var(--muted); font-size:13px; line-height:1.75}

.az-grid{display:grid; gap:12px}
@media (min-width: 980px){.az-grid{grid-template-columns:repeat(4,1fr)}}
.az-card{padding:16px; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.az-card{transition:transform .25s ease, box-shadow .25s ease}
.az-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(6,12,28,.35)}
.az-card h3{margin:0 0 8px; font-size:15px}
.az-card ul{margin:0; padding-left:16px; color:var(--muted); font-size:13px; line-height:1.7}

.panel{padding:22px; border-radius:24px; border:1px solid var(--line); background:linear-gradient(160deg, rgba(29,139,255,.18), rgba(12,24,44,.85)); box-shadow:var(--shadow)}
.panel{position:relative; overflow:hidden}
.panel:before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:320px; height:320px;
  background:radial-gradient(circle, rgba(57,213,255,.22), transparent 70%);
  filter:blur(10px); opacity:.7;
}
.panel-head h2{margin:0 0 8px}
.panel-head p{margin:0; color:var(--muted)}
.panel-body{margin-top:16px; display:grid; gap:14px}

.gallery-grid{display:grid; gap:12px}
@media (min-width: 980px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-card{border-radius:18px; border:1px solid var(--line); overflow:hidden; background:var(--card)}
.gallery-card img{width:100%; height:360px; object-fit:cover; transition:transform .6s ease}
.gallery-card:hover img{transform:scale(1.04)}

.download-cards{display:grid; gap:12px}
@media (min-width: 980px){.download-cards{grid-template-columns:repeat(3,1fr)}}
.card{padding:16px; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(6,12,28,.35)}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}

.compare-table{border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card)}
.compare-table{box-shadow:var(--shadow)}
.compare-row{position:relative}
.compare-row:hover{background:rgba(29,139,255,.08)}
.compare-row{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line)}
.compare-row.header{background:rgba(29,139,255,.12); font-weight:600}
.compare-row:last-child{border-bottom:none}

.chain-grid{display:grid; gap:12px}
@media (min-width: 980px){.chain-grid{grid-template-columns:repeat(6,1fr)}}
.chain-card{display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--card)}
.chain-card{transition:transform .2s ease, box-shadow .2s ease}
.chain-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px rgba(6,12,28,.3)}
.chain-card img{filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.chain-card img{width:26px; height:26px; object-fit:contain}
.chain-card span{font-size:13px}

.partner-grid{display:grid; gap:12px}
@media (min-width: 980px){.partner-grid{grid-template-columns:repeat(5,1fr)}}
.partner-card{display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--card)}
.partner-card{transition:transform .2s ease, box-shadow .2s ease}
.partner-card:hover{transform:translateY(-3px); box-shadow:0 16px 28px rgba(6,12,28,.3)}
.partner-card img{filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.partner-card img{width:26px; height:26px; object-fit:contain}
.partner-card span{font-size:13px}

.callout{padding:14px 16px; border-radius:16px; border:1px dashed rgba(57,213,255,.4); background:rgba(57,213,255,.08)}
.callout p{margin:8px 0 0; color:var(--muted)}

.path-grid{display:grid; gap:12px}
@media (min-width: 980px){.path-grid{grid-template-columns:repeat(5,1fr)}}
.path-step{padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--card2)}
.path-step span{display:inline-flex; padding:4px 10px; border-radius:999px; background:rgba(29,139,255,.16); font-weight:600; font-size:12px; margin-bottom:8px}
.path-step h3{margin:0 0 6px; font-size:14px}
.path-step p{margin:0; color:var(--muted); font-size:12px}

.security-grid{display:grid; gap:12px}
@media (min-width: 980px){.security-grid{grid-template-columns:repeat(3,1fr)}}

.matrix-grid{display:grid; gap:12px}
@media (min-width: 980px){.matrix-grid{grid-template-columns:repeat(4,1fr)}}
.matrix-card{padding:16px; border-radius:16px; border:1px solid var(--line); background:var(--card2)}
.matrix-card{transition:transform .2s ease, box-shadow .2s ease}
.matrix-card:hover{transform:translateY(-3px); box-shadow:0 14px 26px rgba(6,12,28,.3)}
.matrix-card h3{margin:0 0 8px; font-size:14px}
.matrix-card p{margin:0; color:var(--muted); font-size:12px}

.case-grid{display:grid; gap:12px}
@media (min-width: 980px){.case-grid{grid-template-columns:repeat(3,1fr)}}
.case-card{padding:16px; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.case-card{transition:transform .2s ease, box-shadow .2s ease}
.case-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(6,12,28,.35)}
.case-card h3{margin:0 0 8px; font-size:15px}
.case-card p{margin:0; color:var(--muted); font-size:13px; line-height:1.7}
.risk-tag{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:12px; margin-bottom:8px; border:1px solid var(--line)}
.risk-tag.high{background:rgba(255,92,92,.16); color:#ffb6b6; border-color:rgba(255,92,92,.4)}
.risk-tag.mid{background:rgba(255,197,92,.16); color:#ffe1aa; border-color:rgba(255,197,92,.4)}
.case-tip{margin-top:8px; font-size:12px; color:var(--muted)}

.about-grid{display:grid; gap:12px}
@media (min-width: 980px){.about-grid{grid-template-columns:repeat(3,1fr)}}

.metrics{display:grid; gap:12px; margin-top:16px}
@media (min-width: 980px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric-card{padding:14px; border-radius:16px; border:1px dashed rgba(57,213,255,.4); background:rgba(57,213,255,.08)}
.metric-card strong{display:block; margin-bottom:6px}
.metric-card span{color:var(--muted); font-size:12px}

.visual-grid{display:grid; gap:12px}
@media (min-width: 980px){.visual-grid{grid-template-columns:repeat(3,1fr)}}
.visual-card{padding:14px; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.visual-card{transition:transform .25s ease, box-shadow .25s ease}
.visual-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(6,12,28,.35)}
.visual-card img{width:100%; height:200px; object-fit:cover; border-radius:14px; margin-bottom:10px}

/* Subtle tilt support */
[data-tilt]{will-change:transform}
[data-parallax]{will-change:transform}
.visual-card h3{margin:0 0 6px; font-size:15px}
.visual-card p{margin:0; color:var(--muted); font-size:13px; line-height:1.7}

.source-list{display:grid; gap:10px}
.source-item{padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--card2)}
.source-item strong{display:block; margin-bottom:6px}
.source-item span{color:var(--muted); font-size:12px}

.cta-strip{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px; border-radius:16px; border:1px solid rgba(57,213,255,.4); background:rgba(57,213,255,.08)}
.cta-strip p{margin:0; color:var(--muted)}

.mini-summary{display:grid; gap:10px}
@media (min-width: 980px){.mini-summary{grid-template-columns:repeat(3,1fr)}}
.mini-summary .card{background:rgba(29,139,255,.08)}

.flow-grid{display:grid; gap:12px}
@media (min-width: 980px){.flow-grid{grid-template-columns:repeat(4,1fr)}}
.flow-step{padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--card)}
.flow-step b{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:rgba(29,139,255,.2); margin-bottom:8px}

.trust-note{padding:14px; border-radius:16px; border:1px solid rgba(57,213,255,.45); background:rgba(57,213,255,.08)}
.trust-note h3{margin:0 0 6px; font-size:14px}
.trust-note p{margin:0; color:var(--muted); font-size:12px; line-height:1.7}

.faq{display:grid; gap:10px}
.faq details{border-radius:16px; border:1px solid var(--line); background:var(--card2); padding:10px 12px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:8px 0 0; color:var(--muted)}

.footer{border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted)}
.footer-grid{display:grid; gap:14px}
.footer-logo{width:34px; height:34px; border-radius:10px}
.footer-brand{font-weight:600; margin-top:8px}
.footer-links{display:flex; flex-wrap:wrap; gap:12px}
.footer-meta{font-size:12px}

.trust-badges{display:grid; gap:12px; margin-top:10px}
.badge-card{display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--card)}
.badge-card img{width:64px; height:48px; object-fit:cover; border-radius:10px}
.badge-card strong{display:block; font-size:14px; color:var(--text)}
.badge-card span{font-size:12px; color:var(--muted)}

@media (min-width: 980px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr; align-items:center}
  .trust-badges{grid-template-columns:1fr 1fr}
}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:translateY(0)}