﻿
: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
}
.lang-switch{cursor:pointer;margin:0 2px}
.lang-switch.active{background:rgba(255,122,26,.35);border-color:#ffb000;color:#fff;font-weight:700}
.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));
  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
}
.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}
}

/* announce bar */
.announce{padding:10px 14px;text-align:center;background:linear-gradient(135deg,rgba(255,122,26,.22),rgba(255,176,0,.12));color:#ffe0a1;font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.announce[hidden]{display:none}

/* share section */
.share-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;padding:18px}
.share-card{text-align:center}
.share-card h2{margin:0 0 8px}.share-card>p{color:var(--muted);font-size:13px;margin:0 0 14px}
.share-progress{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;margin:10px 0}
.sp-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:8px}
.sp-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.sp-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#ff7a1a,#ffb000);transition:.35s}
.sp-text{font-size:12px;color:var(--muted);margin-top:6px}
.share-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.share-btn{padding:11px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.22);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.share-btn.wa{background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.35)}.share-btn.fb{background:rgba(24,119,242,.18);border-color:rgba(24,119,242,.35)}.share-btn.tg{background:rgba(0,136,204,.18);border-color:rgba(0,136,204,.35)}.share-btn.cp{background:rgba(255,255,255,.08)}
.share-link{font-size:12px;color:var(--muted);margin-top:10px;word-break:break-all}
.share-link span:last-child{color:var(--gold)}

/* Instagram overlay */
.ig-overlay{position:fixed;inset:0;z-index:999;background:rgba(6,4,11,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.ig-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.4);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.ig-inner{width:min(400px,100%)}.ig-inner h2{font-size:22px;margin:0 0 6px;text-align:center}.ig-inner>p{color:var(--muted);font-size:13px;text-align:center;margin:0 0 14px}
.ig-step{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.ig-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ff7a1a,#ffb000);color:#241000;font-weight:1000;display:grid;place-items:center;font-size:14px}
.ig-step p{margin:4px 0;font-size:14px}
.ig-link{text-align:center;margin-top:14px}.ig-link a{color:var(--gold);font-size:14px}

/* access block */
.access-block{position:fixed;inset:0;z-index:9999;background:#06040b;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.access-block h2{font-size:24px;color:#ff4d4d}
.access-block p{color:var(--muted)}

/* maintenance mask */
.maintenance-mask{position:fixed;inset:0;z-index:9999;background:#06040b;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.maintenance-mask h2{font-size:24px;color:var(--gold)}
