:root{
  --bg:#0a0714;
  --bg2:#150d24;
  --card:#171022;
  --card2:#21152e;
  --text:#fff7ea;
  --muted:#cab8a1;
  --dim:#998a7c;
  --orange:#ff7a1a;
  --orange2:#ffb000;
  --gold:#ffd166;
  --red:#ff4d4d;
  --green:#20d080;
  --purple:#7c3aed;
  --line:rgba(255,183,77,.18);
  --shadow:0 18px 40px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(255,122,26,.22), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.18), transparent 32%),
    linear-gradient(180deg,var(--bg),#090611 55%,#06040b);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  padding-bottom:88px;
}
a{color:inherit}
img{max-width:100%;display:block}
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
  background:rgba(10,7,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.2px}
.nav-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang-pill,.nav-dl{
  font-size:12px;border:1px solid rgba(255,183,77,.35);border-radius:999px;
  padding:8px 10px;background:rgba(255,122,26,.1);text-decoration:none;color:#ffe8c2
}
.nav-dl{background:linear-gradient(135deg,#ff7a1a,#ffb000);color:#211000;font-weight:900;border:0}
.hero{position:relative;overflow:hidden;min-height:660px;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.82)),
    url('../assets/hero.jpg') center/cover no-repeat;
  opacity:.9;
}
.hero-bg:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,122,26,.18),transparent 34%),
    linear-gradient(90deg,rgba(10,7,20,.94),rgba(10,7,20,.4),rgba(10,7,20,.94));
}
.hero-inner{position:relative;z-index:1;width:min(960px,100%);padding:48px 18px 40px;margin:0 auto;text-align:center}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid rgba(255,209,102,.3);
  background:rgba(255,122,26,.16);border-radius:999px;color:#ffe0a1;
  font-size:12px;font-weight:800;letter-spacing:.35px
}
.dot{width:8px;height:8px;border-radius:999px;background:#35ff9c;box-shadow:0 0 0 6px rgba(53,255,156,.14)}
h1{font-size:clamp(34px,9vw,72px);line-height:1.03;margin:18px 0 14px;text-shadow:0 8px 22px rgba(0,0,0,.55)}
.gold{color:var(--gold)}
.hero-sub{font-size:16px;line-height:1.6;color:#f7dcc1;margin:0 auto 22px;max-width:680px}
.hero-cta{display:flex;justify-content:center;margin:18px 0}
.btn-dl,.promo-big-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 24px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff6a00,#ffb000 55%,#ffe08a);
  color:#2a1200;font-weight:950;text-decoration:none;
  box-shadow:0 14px 34px rgba(255,122,26,.38), inset 0 1px 0 rgba(255,255,255,.38);
  transform:translateZ(0);
  animation:pulse 1.7s infinite;
}
.btn-dl svg,.float-cta svg{width:22px;height:22px;fill:currentColor}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.hero-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:620px;margin:28px auto 0}
.hero-info-item{
  border:1px solid rgba(255,183,77,.18);border-radius:18px;
  background:rgba(255,255,255,.06);padding:14px 8px;box-shadow:var(--shadow)
}
.hero-info-item .val{font-size:20px;font-weight:1000;color:#fff}
.hero-info-item .lbl{font-size:12px;color:var(--muted);margin-top:4px}
.bd-divider{height:12px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.25),transparent)}
.promo-panel,.cat-section,.highlights,.compare,.cta-banner,.install-section,.app-info,.faq-section{
  width:min(1040px,100% - 24px);margin:18px auto;border:1px solid var(--line);
  border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:var(--shadow);overflow:hidden
}
.cat-section,.highlights,.compare,.cta-banner,.install-section,.app-info,.faq-section{
  content-visibility:auto;
  contain-intrinsic-size:auto 600px;
}
.promo-panel{padding:18px}
.promo-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.promo-head img{width:58px;height:58px;border-radius:17px;object-fit:cover}
.promo-head h2{margin:0;font-size:26px}
.promo-head p{margin:4px 0 0;color:var(--muted)}
.promo-list{display:grid;gap:10px}
.promo-item{display:flex;gap:11px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:13px}
.promo-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ff7a1a,#ffbd59);font-size:20px}
.promo-item h3{margin:0 0 3px;font-size:15px}
.promo-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.promo-big-btn{width:100%;margin-top:14px}
.promo-features{width:min(1040px,100% - 24px);margin:0 auto 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.promo-feature{padding:14px 8px;text-align:center;background:linear-gradient(180deg,rgba(255,122,26,.2),rgba(255,255,255,.05));border:1px solid var(--line);border-radius:18px}
.promo-feature b{display:block;font-size:20px;color:var(--gold)}
.promo-feature span{font-size:12px;color:var(--muted)}
.cat-section{padding:14px 0 18px}
.cat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;margin-bottom:8px}
.cat-header h2{margin:0;font-size:20px;line-height:1.25}
.emoji{filter:drop-shadow(0 3px 8px rgba(255,122,26,.6))}
.see-all{font-size:12px;color:var(--gold);white-space:nowrap}
.cat-sub{padding:0 16px;margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.45}
.cat-scroll{
  display:flex;gap:12px;overflow-x:auto;padding:0 16px 2px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch
}
.cat-scroll::-webkit-scrollbar{display:none}
.content-card{flex:0 0 142px;scroll-snap-align:start;cursor:pointer}
.thumb{position:relative;border-radius:18px;overflow:hidden;background:#201629;aspect-ratio:2/3;border:1px solid rgba(255,255,255,.08)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.25s}
.content-card:hover img{transform:scale(1.06)}
.badge,.badge2{
  position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#ff4d4d,#ff7a1a);border-radius:999px;
  color:#fff;font-size:10px;font-weight:1000;padding:4px 7px;box-shadow:0 8px 18px rgba(0,0,0,.35)
}
.badge2{left:auto;right:8px;background:rgba(0,0,0,.65);color:#fff2c2}
.title{font-weight:900;font-size:13px;margin:8px 2px 3px;line-height:1.25}
.meta{font-size:11px;color:var(--muted);line-height:1.35;margin:0 2px}
.wide-card{flex:0 0 270px;scroll-snap-align:start;cursor:pointer}
.wide-thumb{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#201629;border:1px solid rgba(255,255,255,.08)}
.wide-thumb img{width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:auto 0 0;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.86))}
.overlay .badge{position:static;display:inline-block;margin-bottom:6px}
.overlay h3{margin:0;font-size:17px}
.overlay p{margin:4px 0 0;color:#f0d3b0;font-size:12px}
.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:999px;background:#34ff97;margin-right:5px}
.highlights{padding:18px}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hl-card{padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);border-radius:18px}
.hl-card .icon{font-size:25px}
.hl-card h3{margin:8px 0 4px;font-size:15px}
.hl-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.compare{padding:18px}
.compare h2,.cta-banner h2,.install-section h2,.faq-section h2{margin:0 0 14px;text-align:center}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px;background:rgba(0,0,0,.22)}
.compare-table th,.compare-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.compare-table th{background:linear-gradient(135deg,rgba(255,122,26,.35),rgba(255,176,0,.18));text-align:left}
.check{color:#7effbc;font-weight:900}.cross{color:#ff9f9f}
.cta-banner{padding:24px 18px;text-align:center;background:linear-gradient(135deg,rgba(255,122,26,.24),rgba(124,58,237,.16))}
.cta-banner p{color:var(--muted);line-height:1.55}
.install-section{padding:18px}
.step-cards{display:grid;gap:12px}
.step-card{display:flex;gap:12px;text-decoration:none;color:inherit;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
.snum{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff7a1a,#ffbd59);color:#241000;font-weight:1000}
.step-card h3{margin:0 0 4px}.step-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.app-info{padding:4px 0}
.app-info table{width:100%;border-collapse:collapse}
.app-info td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.app-info td:first-child{color:var(--muted)}
.faq-section{padding:18px}
.faq-item{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;margin:10px 0}
.faq-q{font-weight:900}.faq-a{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.45}
.footer{text-align:center;color:rgba(255,247,234,.55);font-size:12px;padding:26px 14px}
.footer a{color:rgba(255,209,102,.65);text-decoration:none}
.float-cta{
  position:fixed;z-index:50;left:10px;right:10px;bottom:10px;
  border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(12,8,19,.9);
  backdrop-filter:blur(14px);padding:8px;box-shadow:0 -12px 38px rgba(0,0,0,.45)
}
.float-cta a{height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:1000;background:linear-gradient(135deg,#ff6a00,#ffb000);color:#261000}
.float-cta .sub{text-align:center;font-size:11px;color:var(--muted);padding-top:5px}
@media (max-width:700px){
  .hero{min-height:610px}
  .nav-logo span{font-size:15px}
  .nav-dl{display:none}
  .hero-inner{padding-top:34px}
  .hero-info,.promo-features{grid-template-columns:repeat(2,1fr)}
  .hl-grid{grid-template-columns:1fr}
  .content-card{flex-basis:136px}
  .wide-card{flex-basis:260px}
}