:root{
  --bg:#101651;
  --bg2:#262e74;
  --pri:#5a5bff;
  --acc:#34c9ff;
  --text:#f4f6ff;
  --muted:rgba(244,246,255,.72);
  --line:rgba(255,255,255,.24);
  --card:rgba(22,30,86,.9);
  --card2:rgba(255,255,255,.12);
  --shadow:0 22px 60px rgba(7,10,40,.45);
  --r:22px;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg) 0%,#2b3388 45%,#1a1550 100%);
  font-family:"Space Grotesk","Manrope","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.bg-orbs{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(600px 420px at 10% 10%, rgba(90,91,255,.35), transparent 60%),
  radial-gradient(700px 480px at 90% 20%, rgba(52,201,255,.25), transparent 60%),
  radial-gradient(700px 500px at 50% 100%, rgba(90,91,255,.25), transparent 60%);
}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(24,30,80,.95); border-bottom:1px solid rgba(255,255,255,.35)}
.nav-wrap{display:flex; align-items:center; gap:16px; padding:10px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:294px; height:auto; max-width:294px; border-radius:10px; box-shadow:var(--shadow)}
.brand strong{display:block; font-size:15px}
.brand span{display:block; font-size:12px; color:var(--muted)}
@media (max-width: 980px){
  .brand img{width:180px; max-width:180px}
}

#navToggle{display:none}
.menu-btn{margin-left:auto; width:44px; height:40px; border-radius:14px; border:1px solid var(--line); background:var(--card2); display:inline-flex; align-items:center; justify-content:center}
.menu-btn i{width:18px; height:2px; background:var(--text); position:relative}
.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; width:100%; gap:8px; flex-wrap:wrap; padding:8px; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(255,255,255,.06)}
.nav a{padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.14); font-size:12px}
.nav a:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35)}
#navToggle:checked ~ .nav{display:flex}
@media (min-width: 980px){
  .menu-btn{display:none}
  .nav{display:flex; width:auto; margin-left:auto; padding:6px; gap:6px; background:rgba(255,255,255,.1); border-radius:12px}
  .nav a{background:transparent; border-color:transparent}
  .nav a:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4)}
}

.subnav{display:none}
@media (min-width: 980px){
  .subnav{display:flex; gap:8px; margin-left:8px}
  .subnav a{padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); font-size:12px}
  .subnav a:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35)}
}

.hero{padding:14px 0}
.hero-grid{display:grid; gap:16px}
@media (min-width: 980px){.hero-grid{grid-template-columns:1.1fr .9fr; align-items:center}}
.hero-card{padding:22px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); position:relative}
.hero-card:after{content:""; position:absolute; inset:-2px; border-radius:var(--r); background:linear-gradient(120deg, rgba(52,201,255,.25), rgba(90,91,255,.2)); opacity:.6; filter:blur(18px); z-index:-1}
.hero-card h1{margin:12px 0 10px; font-size:32px}
.hero-card p{margin:0; color:var(--muted); line-height:1.8}
.hero-card{transition:transform .25s ease, box-shadow .25s ease}
.hero-card:hover{transform:translateY(-4px); box-shadow:0 26px 60px rgba(8,10,40,.55)}
.kicker{display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card2); font-size:12px}
.kicker span{width:8px; height:8px; border-radius:999px; background:var(--acc)}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card2)}
.btn.primary{background:linear-gradient(90deg, var(--pri), var(--acc)); border-color:transparent}
.btn.ghost{background:transparent}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips span{padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card2); font-size:12px}
.tag-grid{display:grid; gap:8px; margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tag-grid span{padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.32); background:var(--card2); font-size:12px; text-align:center}
.hero-media{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--card); position:relative}
.hero-media img{height:320px; width:100%; object-fit:contain; background:rgba(255,255,255,.04)}
.hero-media .glow{position:absolute; right:10%; top:10%; width:160px; height:160px; border-radius:999px; background:radial-gradient(circle, rgba(52,201,255,.4), transparent 70%)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(120deg, rgba(42,31,127,.2), rgba(0,0,0,0));}

.section{padding:14px 0}
.section + .section{border-top:1px solid rgba(255,255,255,.12)}
.section.alt{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26); border-radius:14px; padding:14px}
.section-title h2{margin:0 0 8px}
.section-title p{margin:0; color:var(--muted)}
.section-title.light{color:#fff}
.section-title.light p{color:rgba(255,255,255,.8)}

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

.card{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.42); background:var(--card); box-shadow:var(--shadow)}
.card img{border-radius:12px; margin-bottom:10px; width:100%; height:200px; object-fit:contain; background:rgba(255,255,255,.04)}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(8,10,40,.45)}

.accent{background:linear-gradient(160deg,#3c2fd6 0%,#3a3ff2 40%,#2730c0 100%)}
.feature-card{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.14)}
.feature-card{transition:transform .2s ease, box-shadow .2s ease}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 20px 44px rgba(8,10,40,.45)}
.feature-card img{width:100%; height:180px; object-fit:contain; border-radius:12px; margin-bottom:10px; background:rgba(255,255,255,.04)}

.steps{display:grid; gap:8px; grid-template-columns:1fr 1fr}
@media (min-width: 980px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.32); background:var(--card2); text-align:center; font-weight:600}
.step:hover{background:rgba(52,201,255,.14); border-color:rgba(52,201,255,.5)}
.feature-card h3{margin:0 0 6px}
.feature-card p{margin:0; color:rgba(255,255,255,.8)}

.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)}
.faq details[open]{background:rgba(52,201,255,.12); border-color:rgba(52,201,255,.45)}

.cta-strip{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px; border-radius:12px; border:1px solid rgba(52,201,255,.6); background:rgba(52,201,255,.12); margin-top:10px}

.footer{padding:18px 0; border-top:1px solid rgba(255,255,255,.35); background:rgba(10,12,34,.9)}
.footer-grid{display:grid; gap:16px; align-items:center}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-brand img{width:180px; height:auto; max-width:180px; border-radius:10px}
.footer-links{display:flex; flex-wrap:wrap; gap:12px}
.trust-badges{display:grid; gap:10px}
.badge-card{display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; border:1px solid var(--line); background:var(--card)}
.badge-card img{width:56px; height:40px; border-radius:8px; object-fit:contain}
.footer-meta{text-align:center; font-size:12px; color:var(--muted); margin-top:12px}

@media (min-width:980px){
  .footer-grid{grid-template-columns:1.1fr 1fr 1.2fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

.reveal{animation:fadeUp .6s ease forwards}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}