:root{
  --bg:#F5F3F0;
  --bg2:#FFFFFF;
  --pri:#2563EB;
  --acc:#10B981;
  --text:#2c2c2c;
  --muted:#666666;
  --line:#E5E3E0;
  --card:#FFFFFF;
  --card2:#F9F8F7;
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --r:12px;
  --max:1200px;
  /* Section accent colors */
  --sec-accent: #2563EB;
  --acc-green: #059669;
  --acc-amber: #D97706;
  --acc-red: #DC2626;
  --acc-cyan: #0891B2;
  --acc-blue: #2563EB;
  --acc-violet: #7C3AED;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#2c2c2c;
  background:#F5F3F0;
  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 60px !important; width:100% !important; box-sizing:border-box !important}

.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; background:#F5F3F0 !important; border-bottom:1px solid #E5E3E0; box-shadow:0 2px 12px rgba(0,0,0,.05); padding:0}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex-shrink:0}
.brand-logo{display:flex; align-items:center; justify-content:center; height:56px; background:transparent; overflow:visible}
.brand-logo img{height:56px; width:auto; object-fit:contain; display:block}
@media (max-width: 768px){
  .brand-logo{height:44px}
  .brand-logo img{height:44px}
}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-text strong{display:block; font-size:16px; font-weight:700; color:#1a1a1a; letter-spacing:-0.5px}
.brand-text span{display:block; font-size:12px; color:var(--muted); font-weight:500}
@media (max-width: 980px){
  .brand-text span{display:none}
}

#navToggle{display:none}
.menu-btn{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid #E5E3E0; background:#F9F8F7; cursor:pointer; transition:all .2s}
.menu-btn:hover{background:#E5E3E0}
.menu-btn i{width:20px; height:2px; background:#2c2c2c; position:relative}
.menu-btn i:before,.menu-btn i:after{content:""; position:absolute; left:0; width:20px; height:2px; background:#2c2c2c; transition:all .3s}
.menu-btn i:before{top:-6px} .menu-btn i:after{top:6px}
#navToggle:checked ~ .menu-btn i{height:0}
#navToggle:checked ~ .menu-btn i:before{transform:rotate(45deg); top:0}
#navToggle:checked ~ .menu-btn i:after{transform:rotate(-45deg); top:0}

.nav{display:none; position:absolute; top:100%; left:0; right:0; width:100%; gap:8px; flex-direction:column; padding:16px 12px; border:none; border-radius:0; background:#FFFFFF; border-bottom:1px solid #E5E3E0; box-shadow:0 8px 24px rgba(0,0,0,.08)}
.nav-link{display:block; padding:12px 14px; border-radius:8px; color:#2c2c2c; font-size:14px; font-weight:500; transition:all .2s; text-decoration:none}
.nav-link:hover{background:#F9F8F7; color:var(--pri)}
.nav-link.nav-primary{background:var(--pri); color:#FFFFFF; margin-top:4px}
.nav-link.nav-primary:hover{background:#1d4ed8}
#navToggle:checked ~ .nav{display:flex}
@media (min-width: 980px){
  .menu-btn{display:none}
  .nav{display:flex; position:static; flex-direction:row; width:auto; margin-left:auto; padding:6px; gap:4px; background:transparent; border:none; border-bottom:none; box-shadow:none}
  .nav-link{display:inline-block; padding:8px 14px; font-size:13px; background:transparent; color:#2c2c2c}
  .nav-link:hover{background:transparent; color:var(--pri)}
  .nav-link.nav-primary{background:transparent; color:#2c2c2c; margin-top:0; margin-left:8px; padding-left:0; padding-right:0}
  .nav-link.nav-primary:hover{background:transparent; color:var(--pri)}
}

.nav-cta{display:none}
@media (min-width: 980px){
  .nav-cta{display:flex; margin-left:12px}
}
.btn-small{padding:8px 16px; font-size:13px; border-radius:8px}

.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:28px; border-radius:var(--r); border:1px solid #E5E3E0; background:#FFFFFF; box-shadow:var(--shadow); position:relative}
.hero-card:after{content:""; position:absolute; inset:-2px; border-radius:var(--r); background:linear-gradient(120deg, rgba(37,99,235,.08), rgba(5,150,105,.08)); opacity:1; filter:blur(20px); z-index:-1}
.hero-card h1{margin:12px 0 8px; font-size:32px; color:#1a1a1a}
.hero-card .hero-subtitle{margin:0 0 16px; color:var(--pri); font-size:14px; font-weight:600; letter-spacing:0.5px}
.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 12px 32px rgba(0,0,0,.12)}
.kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; border:1px solid #E5E3E0; background:#F9F8F7; font-size:12px; color:#666666}
.kicker span{width:8px; height:8px; border-radius:999px; background:var(--pri)}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn,.btn-small{display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid #E5E3E0; background:#F9F8F7; color:#2c2c2c; font-weight:500; cursor:pointer; transition:all .2s; text-decoration:none}
.btn{padding:10px 18px}
.btn-small{padding:8px 16px; font-size:13px}
.btn:hover,.btn-small:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1)}
.btn.primary,.btn-small.primary{background:var(--pri); color:#FFFFFF; border-color:var(--pri)}
.btn.primary:hover,.btn-small.primary:hover{box-shadow:0 4px 16px rgba(37,99,235,.3)}
.btn.ghost{background:transparent; border-color:var(--pri); color:var(--pri)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.chips span{padding:6px 12px; border-radius:999px; border:1px solid #E5E3E0; background:#F9F8F7; font-size:12px; color:#666666}
.tag-grid{display:grid; gap:8px; margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tag-grid span{padding:10px 12px; border-radius:8px; border:1px solid #E5E3E0; background:#F9F8F7; font-size:13px; text-align:center; color:#666666}
.hero-media{border-radius:10px; overflow:hidden; border:1px solid #E5E3E0; background:#FFFFFF; position:relative}
.hero-media img{height:320px; width:100%; object-fit:contain; background:#F9F8F7}
.hero-media .glow{position:absolute; right:10%; top:10%; width:160px; height:160px; border-radius:999px; background:radial-gradient(circle, rgba(37,99,235,.15), transparent 70%)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(120deg, rgba(37,99,235,.04), rgba(0,0,0,0));}

.section{padding:60px 0}
.section + .section{border-top:none}
.section.alt{background:#FFFFFF; border:1px solid #E5E3E0; border-radius:10px; padding:20px}
/* Section color variants */
.section.section-green{background:#FFFFFF; --sec-accent:var(--acc-green)}
.section.section-amber{background:#FFFFFF; --sec-accent:var(--acc-amber)}
.section.section-red{background:#FFFFFF; --sec-accent:var(--acc-red)}
.section.section-cyan{background:#FFFFFF; --sec-accent:var(--acc-cyan)}
.section.section-blue{background:#FFFFFF; --sec-accent:var(--acc-blue)}
.section.section-branded{background:#FFFFFF; --sec-accent:var(--pri)}
.section.section-violet{background:#FFFFFF; --sec-accent:var(--acc-violet)}
.section-bordered{border-top:3px solid var(--sec-accent);}
.section-title{margin:0 0 24px 60px !important; padding:0 !important}
.section-title h2{margin:0 0 8px 0; color:#1a1a1a; font-size:28px}
.section-title p{margin:0; color:var(--muted); font-size:14px}
.section-title.light{color:#1a1a1a}
.section-title.light p{color:var(--muted)}

.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:16px; border-radius:10px; border:1px solid #E5E3E0; background:#FFFFFF; box-shadow:var(--shadow)}
.card img{border-radius:8px; margin-bottom:12px; width:100%; height:200px; object-fit:contain; background:#F9F8F7}
.card h3{margin:0 0 8px; color:#1a1a1a; font-weight:600}
.card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.1)}

.accent{background:linear-gradient(160deg, var(--pri), var(--acc))}
.feature-card{padding:16px; border-radius:10px; border:1px solid #E5E3E0; background:#FFFFFF}
.feature-card{transition:transform .2s ease, box-shadow .2s ease}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.1)}
.feature-card img{width:100%; height:180px; object-fit:contain; border-radius:8px; margin-bottom:12px; background:#F9F8F7}

.feature-card h3{margin:0 0 8px; color:#1a1a1a; font-weight:600}
.feature-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}

.steps-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width: 768px){.steps-grid{grid-template-columns:1fr 1fr}}
@media (min-width: 980px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{padding:24px; border-radius:10px; border:1px solid #E5E3E0; background:#FFFFFF; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; position:relative}
.step-card:hover{transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.1)}
.step-number{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:8px; background:var(--pri); color:#FFFFFF; font-weight:700; font-size:20px; margin-bottom:12px}
.step-card h3{margin:0 0 8px; color:#1a1a1a; font-weight:600; font-size:16px}
.step-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}

.faq{display:grid; gap:12px; max-width:900px; margin:0 auto}
.faq details{border-radius:8px; border:1px solid #E5E3E0; background:#FFFFFF; padding:14px 16px; transition:all .2s ease}
.faq summary{cursor:pointer; font-weight:600; color:#1a1a1a; user-select:none}
.faq summary:hover{color:var(--pri)}
.faq p{margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.6}
.faq p a{color:var(--pri); text-decoration:none; font-weight:500}
.faq p a:hover{text-decoration:underline}
.faq details[open]{background:#F9F8F7; border-color:var(--pri); background:linear-gradient(135deg, #F9F8F7 0%, rgba(37,99,235,.04) 100%)}
.faq details[open] summary{color:var(--pri)}

.cta-strip{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px; border-radius:10px; border:1px solid #E5E3E0; background:linear-gradient(135deg, #F9F8F7 0%, rgba(37,99,235,.05) 100%); margin-top:20px}

.footer{padding:60px 0 0; border-top:1px solid #E5E3E0; background:#1f2937}
.footer-content{display:grid; gap:40px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); padding-bottom:40px}
.footer-section{display:flex; flex-direction:column}
.footer-brand-section{grid-column:1}
.footer-logo{width:120px; height:auto; margin-bottom:16px; border-radius:8px}
.footer-brand-section h3{margin:0 0 8px; font-size:18px; color:#FFFFFF; font-weight:700}
.footer-brand-section p{margin:0 0 16px; color:#D1D5DB; font-size:14px; line-height:1.6; max-width:280px}
.footer-section h4{margin:0 0 16px; font-size:15px; color:#FFFFFF; font-weight:600}
.footer-section ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer-section li{margin:0; color:#D1D5DB; font-size:14px}
.footer-section a{color:#D1D5DB; font-size:14px; text-decoration:none; transition:color .2s}
.footer-section a:hover{color:#FFFFFF}
.footer-social{display:flex; gap:12px; margin-top:8px}
.footer-social a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:#F9F8F7; color:var(--pri); transition:background .2s, color .2s}
.footer-social a:hover{background:var(--pri); color:#FFFFFF}
.footer-divider{grid-column:1/-1; height:1px; background:#E5E3E0; margin:20px 0}
.footer-bottom{grid-column:1/-1; padding-top:20px; border-top:1px solid #E5E3E0; text-align:center}
.footer-copyright{margin:0 0 8px; font-size:13px; color:#9CA3AF}
.footer-copyright a{color:#60A5FA; text-decoration:none}
.footer-copyright a:hover{text-decoration:underline}
.footer-disclaimer{margin:0; font-size:12px; color:#6B7280; line-height:1.6}

@media (min-width: 768px){
  .footer-content{grid-template-columns:repeat(4, 1fr)}
  .footer-brand-section{grid-column:1/2}
}
@media (min-width: 980px){
  .footer-content{padding-bottom:40px}
}

@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)}
}

/* Download cards section */
.dl-grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin:24px 0}
@media (max-width:640px){.dl-grid{grid-template-columns:1fr}}
.dl-card{display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 20px; border-radius:10px; border:2px solid var(--sec-accent); background:#FFFFFF; text-decoration:none; color:#2c2c2c; transition:transform .2s, box-shadow .2s, background .2s; position:relative}
.dl-card:hover{transform:translateY(-4px); box-shadow:0 8px 24px rgba(37,99,235,.15)}
.dl-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); display:inline-block; padding:4px 12px; background:var(--sec-accent); color:#FFFFFF; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap}
.dl-card i{font-size:40px; color:var(--sec-accent)}
.dl-card strong{font-size:16px; font-weight:600; text-align:center; color:#1a1a1a}
.dl-card span{font-size:13px; color:var(--muted); text-align:center}
.dl-card em{display:inline-block; margin-top:10px; padding:10px 18px; background:var(--sec-accent); color:#FFFFFF; border-radius:6px; font-style:normal; font-size:12px; font-weight:600}
.dl-card.dl-android{border-color:var(--acc-green)}
.dl-card.dl-android i{color:var(--acc-green)}
.dl-card.dl-android em{background:var(--acc-green)}
.dl-card.dl-android .dl-badge{background:var(--acc-green)}
.dl-card.dl-android:hover{box-shadow:0 8px 24px rgba(5,150,105,.15)}
.dl-card.dl-ios{border-color:#7C3AED}
.dl-card.dl-ios i{color:#7C3AED}
.dl-card.dl-ios em{background:#7C3AED}
.dl-card.dl-ios .dl-badge{background:#7C3AED}
.dl-card.dl-ios:hover{box-shadow:0 8px 24px rgba(124,58,237,.15)}
.dl-security{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:24px; padding:20px; border-radius:10px; background:#F9F8F7}
@media (min-width: 980px){.dl-security{grid-template-columns:repeat(4, 1fr)}}
.security-item{display:flex; gap:8px; align-items:flex-start}
.security-item i{font-size:18px; color:var(--pri); flex-shrink:0; margin-top:2px}
.security-item span{font-size:13px; color:#2c2c2c; line-height:1.4}
.security-item strong{color:#1a1a1a}
.dl-tip{text-align:center; font-size:13px; color:var(--muted); margin-top:24px; padding:16px; border-radius:8px; background:#FFFFFF; border-left:3px solid var(--pri)}

.hero-bg{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(800px 600px at 20% -10%, rgba(37,99,235,.08), transparent 50%),
  radial-gradient(800px 600px at 80% 50%, rgba(16,185,129,.06), transparent 50%),
  radial-gradient(800px 600px at 50% 100%, rgba(124,58,237,.05), transparent 50%);
}