:root {
  --bg:    #f5f5f7;
  --bg2:   #ebebed;
  --bg3:   #e0e0e3;
  --card:  #ffffff;
  --line:  rgba(0,0,0,0.1);
  --gold:  #8b5cf6;
  --gold2: #a78bfa;
  --gdim:  rgba(139,92,246,0.12);
  --text:  #111111;
  --mid:   #444444;
  --muted: #777777;
  --max:   960px;
  --f:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{-webkit-tap-highlight-color:transparent}

.w{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ─── NAV ─────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,0.08);box-shadow:0 1px 12px rgba(0,0,0,0.06)}
.nav-i{max-width:var(--max);margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:1rem;font-weight:800;color:#111;text-decoration:none;letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0}
.logo-badge{width:26px;height:26px;background:var(--gold);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-ul{display:flex;gap:20px;list-style:none;white-space:nowrap;flex-shrink:1}
.nav-ul a{font-size:0.82rem;font-weight:500;color:#555;text-decoration:none;letter-spacing:0.03em;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.nav-ul a:hover{color:#111}
.nav-btn{font-size:0.82rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#fff;background:var(--gold);padding:10px 18px;text-decoration:none;transition:background .2s;white-space:nowrap;flex-shrink:0}
.nav-btn:hover{background:var(--gold2)}
.nav-install{font-size:0.82rem;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--gold);background:transparent;padding:10px 16px;text-decoration:none;border:1px solid rgba(139,92,246,.35);white-space:nowrap;flex-shrink:0;transition:all .2s}
.nav-install:hover{background:rgba(139,92,246,.08);border-color:var(--gold)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:4px}

/* ─── HERO ────────────────────────────────────── */
#hero{min-height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 28px 60px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:120px;background:linear-gradient(180deg,var(--gold),transparent);opacity:.3}
#hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(139,92,246,.04) 0%,transparent 70%);pointer-events:none}
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:36px}
.hero-tag span{width:32px;height:1px;background:var(--gold);opacity:.5}
.hero-h1{font-size:clamp(2.6rem,6.5vw,5.6rem);font-weight:800;line-height:1.06;letter-spacing:-0.03em;color:#111;margin-bottom:24px;max-width:800px}
.hero-h1 mark{background:none;color:var(--gold)}
.hero-p{font-size:1.15rem;font-weight:400;color:var(--mid);max-width:500px;line-height:1.75;margin-bottom:44px}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:72px}
.btn-g{display:inline-flex;align-items:center;gap:9px;font-size:0.96rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gold);padding:16px 32px;text-decoration:none;transition:background .2s;white-space:nowrap}
.btn-g:hover{background:var(--gold2)}
.btn-o{display:inline-flex;align-items:center;gap:9px;font-size:0.96rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#444;background:transparent;padding:15px 28px;border:1px solid rgba(0,0,0,0.18);text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-o:hover{border-color:var(--gold);color:var(--gold)}
.btn-tg{display:inline-flex;align-items:center;gap:9px;font-size:0.96rem;font-weight:600;letter-spacing:.02em;color:#fff;background:#2AABEE;padding:15px 28px;border:none;text-decoration:none;transition:background .2s;white-space:nowrap}
.btn-tg:hover{background:#1d9cd8}
.btn-gh{display:inline-flex;align-items:center;gap:9px;font-size:0.96rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:transparent;padding:15px 28px;border:1px solid rgba(139,92,246,.3);text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-gh:hover{background:var(--gdim)}

/* stats strip */
.hero-stats{width:100%;max-width:var(--max);display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(0,0,0,0.1)}
.hs{padding:20px 16px;text-align:center;border-right:1px solid var(--line)}
.hs:last-child{border-right:none}
.hs-n{font-size:2.2rem;font-weight:800;color:#111;line-height:1;letter-spacing:-0.02em}
.hs-n em{font-style:normal;color:var(--gold)}
.hs-l{font-size:0.88rem;font-weight:500;color:var(--muted);margin-top:4px;letter-spacing:.04em}

/* ─── SECTION ATOMS ───────────────────────────── */

.lbl::after{content:'';display:block;width:28px;height:1px;background:var(--gold);opacity:.5}
.sh2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:#111;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.sh2 mark{background:none;color:var(--gold)}
.sdesc{font-size:1.08rem;font-weight:400;color:var(--mid);line-height:1.8;max-width:540px;margin-bottom:52px}

/* ─── FEATURES — bento grid ───────────────────── */
#features{background:var(--bg);border-bottom:1px solid var(--line)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
/* big cards span 2 cols */
.b-wide{grid-column:span 2}
.b-card{background:var(--bg2);padding:32px 28px;position:relative;overflow:hidden;transition:background .25s;display:flex;flex-direction:column}
.b-card:hover{background:var(--bg3)}
.b-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .25s}
.b-card:hover::before{opacity:1}
.b-ico{width:52px;height:52px;border:1.5px solid rgba(139,92,246,.3);background:rgba(139,92,246,.08);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0}
.b-title{font-size:1.2rem;font-weight:700;color:#111;margin-bottom:10px;line-height:1.25}
.b-text{font-size:1rem;font-weight:400;color:var(--mid);line-height:1.75}
/* accent card */
.b-accent{background:#fff;border:1px solid rgba(139,92,246,.25);border-left:3px solid var(--gold)}
.b-accent:hover{background:var(--bg3)}
.b-accent .b-title{color:#111}
/* wide card inner layout */
.b-wide-inner{display:flex;gap:40px;align-items:flex-start}
.b-wide-inner .b-ico{flex-shrink:0}
/* number label */
.b-num{font-size:1.6rem;font-weight:900;color:rgba(100,60,200,.45);line-height:1;margin-bottom:14px;letter-spacing:-.02em}

/* ─── HOW IT WORKS — vertical timeline ───────── */
#how{background:var(--bg);border-bottom:1px solid var(--line)}
.how-intro{text-align:center;max-width:600px;margin:0 auto 52px}
.how-intro .sh2{margin-bottom:12px}
.how-intro p{font-size:1.08rem;color:var(--mid);line-height:1.75}
.hw-grid{display:flex;flex-direction:column;gap:12px}
.hw{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:24px;padding:24px 28px;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.07);box-shadow:0 1px 4px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.hw:hover{box-shadow:0 4px 16px rgba(139,92,246,.1);transform:translateX(4px)}
.hw:last-child{background:#8b5cf6;border-color:#7c4de8}
.hw:last-child:hover{background:#7c4de8}
.hw-badge{width:52px;height:52px;border-radius:14px;background:rgba(139,92,246,.1);border:1.5px solid rgba(139,92,246,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hw:last-child .hw-badge{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.hw-body{flex:1;min-width:0;word-break:break-word}
.hw-num{font-size:0.8rem;font-weight:800;color:rgba(100,60,200,.5);letter-spacing:.1em;margin-bottom:3px;text-transform:uppercase}
.hw:last-child .hw-num{color:rgba(255,255,255,.65)}
.hw-title{font-size:1.05rem;font-weight:700;color:#111;margin-bottom:4px;line-height:1.3}
.hw:last-child .hw-title{color:#fff}
.hw-desc{font-size:0.94rem;font-weight:400;color:#555;line-height:1.6}
.hw:last-child .hw-desc{color:rgba(255,255,255,.85)}
.hw-time{display:inline-flex;align-items:center;gap:5px;font-size:0.9rem;font-weight:800;color:var(--gold);background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);padding:8px 16px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.hw:last-child .hw-time{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}

/* ─── PLATFORMS — marquee + grid ─────────────── */
#platforms{background:var(--bg);border-bottom:1px solid var(--line)}
.marquee-wrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:48px;position:relative}
.marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,#f5f5f7,transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(270deg,#f5f5f7,transparent)}
.marquee-track{display:flex;gap:0;animation:marquee 28s linear infinite;width:max-content}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:flex;align-items:center;gap:10px;padding:0 32px;border-right:1px solid var(--line);font-size:1rem;font-weight:500;color:var(--mid);white-space:nowrap}
.mq-item svg{flex-shrink:0;border-radius:6px}






/* ─── COMPARE — split layout ─────────────────── */
#compare{background:var(--bg2);border-bottom:1px solid var(--line)}
.cmp-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
.cmp-left .sdesc{margin-bottom:28px}
.cmp-pills{display:flex;flex-direction:column;gap:10px}
.cmp-pill{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:500;color:var(--mid)}
.cmp-pill::before{content:'';width:7px;height:7px;background:var(--gold);border-radius:50%;flex-shrink:0}
.ctbl{width:100%;border-collapse:collapse}
.ctbl th{font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:13px 18px;border-bottom:1px solid var(--line);text-align:center;color:var(--muted)}
.ctbl th:first-child{text-align:left}
.ctbl th.us{color:var(--gold);border-bottom:2px solid var(--gold)}
.ctbl td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;font-size:1rem;color:var(--mid)}
.ctbl td:first-child{text-align:left;color:#111}
.ctbl tr:last-child td{border-bottom:none}
.ctbl tr:hover td{background:rgba(255,255,255,.02)}
.ck{color:var(--gold);font-weight:700}
.cx{color:#3a3a3a}
.cp{color:#666}

/* ─── TESTIMONIALS — featured layout ─────────── */
#testi{background:var(--bg2);border-bottom:1px solid var(--line)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tc{background:#fff;border-radius:12px;padding:28px;border:1px solid rgba(0,0,0,0.07);box-shadow:0 1px 4px rgba(0,0,0,0.05);transition:box-shadow .2s,transform .2s}
.tc:hover{box-shadow:0 4px 16px rgba(139,92,246,0.12);transform:translateY(-2px)}
.tc-stars{display:flex;gap:3px;margin-bottom:14px}
.tc-star{color:#f59e0b;font-size:0.95rem}
.tc-q{font-size:1rem;font-weight:400;color:#222;line-height:1.75;margin-bottom:20px}
.tc-av{width:38px;height:38px;background:rgba(139,92,246,.1);border:2px solid rgba(139,92,246,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.88rem;font-weight:800;color:var(--gold);flex-shrink:0}
.tc-name{font-size:0.96rem;font-weight:700;color:#111}
.tc-sub{font-size:0.85rem;color:#888}
.testi-bottom{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;margin-top:32px;padding:28px 32px;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,0.07)}
.testi-rating{display:flex;align-items:center;gap:16px}
.testi-rating-num{font-size:3rem;font-weight:800;color:#111;line-height:1}
.testi-rating-stars{display:flex;flex-direction:column;gap:4px}
.testi-rating-row{display:flex;gap:3px}
.testi-rating-row span{color:#f59e0b;font-size:1.1rem}
.testi-rating-label{font-size:0.88rem;color:#888}

/* ─── INSTALL — big number steps ─────────────── */
#install{background:var(--bg2);border-bottom:1px solid var(--line)}
.inst-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.inst-steps{display:flex;flex-direction:column}
.is{display:flex;gap:0;border-bottom:1px solid var(--line)}
.is:first-child{border-top:1px solid var(--line)}
.is-n{font-size:3rem;font-weight:900;color:rgba(100,60,200,.3);line-height:1;padding:24px 24px 24px 0;flex-shrink:0;width:80px;text-align:right;transition:color .2s}
.is:hover .is-n{color:rgba(100,60,200,.6)}
.is-body{padding:24px 0}
.is-title{font-size:1.08rem;font-weight:700;color:#111;margin-bottom:6px}
.is-desc{font-size:1rem;font-weight:400;color:var(--mid);line-height:1.7}

.inst-panel{border:1px solid rgba(0,0,0,0.12);background:#ffffff;padding:32px;position:sticky;top:72px}
.inst-panel::before{content:'';display:block;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:24px;opacity:.5}
.ip-title{font-size:1.5rem;font-weight:800;color:#111;margin-bottom:8px}
.ip-sub{font-size:1rem;color:var(--muted);margin-bottom:24px;line-height:1.6}
.ip-spec{display:flex;flex-direction:column}
.isp{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:1rem}
.isp:last-child{border-bottom:none;margin-bottom:24px}
.isp-k{color:var(--muted)}
.isp-v{color:var(--text);font-weight:600}
.isp-v.g{color:var(--gold)}
.btn-dl{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gold);padding:18px;text-decoration:none;transition:background .2s;margin-bottom:12px}
.btn-dl:hover{background:var(--gold2)}
.ip-note{text-align:center;font-size:1rem;color:var(--muted)}
.ip-note a{color:var(--gold);text-decoration:none}

/* ─── PRICING — full width with accent ───────── */
#pricing{background:var(--bg);border-bottom:1px solid var(--line)}
.pr-intro{border-left:2px solid var(--gold);padding:16px 22px;background:rgba(139,92,246,0.06);margin-bottom:40px}
.pr-intro p{font-size:1.05rem;color:var(--mid);line-height:1.8}
.pr-intro strong{color:var(--text);font-weight:600}
.pr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-bottom:40px}
.pr-step{background:var(--bg2);padding:28px 26px;display:flex;gap:16px}
.pr-n{font-size:2rem;font-weight:800;color:rgba(100,60,200,.45);line-height:1;flex-shrink:0}
.pr-title{font-size:1rem;font-weight:700;color:#111;margin-bottom:6px}
.pr-desc{font-size:1rem;color:var(--mid);line-height:1.7}
.ptbl{width:100%;border-collapse:collapse;min-width:560px}
.ptbl th{font-size:0.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.ptbl td{font-size:0.94rem;font-weight:400;color:var(--mid);padding:14px 16px;border-bottom:1px solid var(--line)}
.ptbl tr:last-child td{border-bottom:none}
.ptbl tr.hl td{background:rgba(139,92,246,.05)}
.ptbl tr:hover td{background:rgba(255,255,255,.02)}
.pcost{color:var(--gold);font-weight:700}
.pr-cta{margin-top:36px;text-align:center}

/* ─── FAQ — full width accordion ─────────────── */
#faq{background:var(--bg2);border-bottom:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.faq-item:nth-child(2n){border-right:none}
.faq-item:nth-last-child(-n+2){border-bottom:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 24px;font-family:var(--f);font-size:1.08rem;font-weight:600;color:#111;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s}
.faq-q:hover{color:var(--gold)}
.faq-chev{flex-shrink:0;color:var(--muted);transition:transform .25s,color .2s}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a-in{padding:0 24px 22px;font-size:1rem;color:var(--mid);line-height:1.8}
.faq-a-in strong{color:#111;font-weight:600}

/* ─── CTA FINAL ───────────────────────────────── */
#cta{background:var(--bg);border-bottom:1px solid var(--line);padding:100px 28px;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'GTO';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18rem;font-weight:900;color:rgba(139,92,246,.025);letter-spacing:-.04em;pointer-events:none;white-space:nowrap;line-height:1}
.cta-tag{font-size:0.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
#cta h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;color:#111;letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
#cta h2 mark{background:none;color:var(--gold)}
#cta p{font-size:1rem;color:var(--mid);margin-bottom:36px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ─── FOOTER ──────────────────────────────────── */
footer{background:#e5e5e8;border-top:1px solid var(--line);padding:28px 28px}
.ft{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.ft-logo{font-size:0.96rem;font-weight:800;color:#333;text-decoration:none;letter-spacing:-.01em}
.ft-logo mark{background:none;color:var(--gold)}
.ft-links{display:flex;gap:22px;flex-wrap:wrap}
footer a{font-size:0.9rem;color:var(--muted);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--gold)}
.ft-copy{font-size:0.9rem;color:var(--muted)}

/* ─── MOBILE ──────────────────────────────────── */
@media(max-width:860px){
  nav .nav-ul,nav .nav-btn,nav .nav-install{display:none}
  .burger{display:block}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .hs:nth-child(4),.hs:nth-child(5){display:none}
  .bento{grid-template-columns:1fr 1fr}
  .b-wide{grid-column:span 2}
  .b-wide-inner{flex-direction:column;gap:20px}
  /* how-it-works: скрыть время справа на планшете, оставить иконку+текст */
  .hw{grid-template-columns:52px 1fr;gap:16px;padding:20px}
  .hw-time{display:none}
  .how-intro{max-width:100%}
  /* compare */
  .cmp-layout{grid-template-columns:1fr}
  /* testimonials */
  .testi-grid{grid-template-columns:1fr 1fr}
  .testi-bottom{grid-template-columns:1fr;text-align:center;gap:20px}
  /* install */
  .inst-layout{grid-template-columns:1fr}
  .inst-panel{position:static}
  /* pricing */
  .pr-steps{grid-template-columns:1fr}
  /* faq */
  .faq-grid{grid-template-columns:1fr}
  .faq-item{border-right:none}
  .faq-item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .faq-item:last-child{border-bottom:none}
  /* cta */
  #cta::before{font-size:8rem}
  /* marquee padding */
  .mq-item{padding:0 20px}
}
@media(max-width:600px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .hs:nth-child(4){display:flex}
  .hs:nth-child(5){display:none}
  .testi-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns a{text-align:center;justify-content:center}
  /* bento single col on phones */
  .bento{grid-template-columns:1fr}
  .b-wide{grid-column:span 1}
  /* how-it-works show timing inline */
  .hw{grid-template-columns:44px 1fr;gap:12px;padding:16px}
  /* articles */
  .articles-grid{grid-template-columns:1fr}
  /* section padding */
  .w{padding-left:16px;padding-right:16px}
  [style*="padding-top:80px"]{padding-top:52px!important;padding-bottom:52px!important}
  /* hero */
  #hero{padding:60px 16px 40px}
  .hero-h1{font-size:clamp(2rem,10vw,3rem)}
  /* cta */
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row a{text-align:center;justify-content:center}
  #cta{padding:64px 16px}
  /* footer */
  .ft{flex-direction:column;align-items:flex-start;gap:12px}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.hero-tag{animation:fadeUp .45s ease both}
.hero-h1{animation:fadeUp .5s .08s ease both}
.hero-p{animation:fadeUp .5s .16s ease both}
.hero-btns{animation:fadeUp .5s .24s ease both}
.hero-stats{animation:fadeUp .5s .32s ease both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ── VIDEO ── */
  #demo { background: var(--bg2); border-bottom: 1px solid var(--line); }
  .demo-inner { max-width: 720px; margin: 0 auto; }
  .demo-label { text-align: center; margin-bottom: 24px; }
  .video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
  }
  .video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: none;
  }
  .video-wrap.loaded iframe { display: block; }
  .video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    background: rgba(139,92,246,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    pointer-events: none;
  }
  .video-wrap:hover .video-play {
    background: var(--gold);
    transform: translate(-50%, -50%) scale(1.08);
  }
  .video-wrap.loaded .video-thumb,
  .video-wrap.loaded .video-play { display: none; }
  .demo-note { text-align: center; margin-top: 14px; font-size: 0.85rem; color: var(--muted); }


  .ip-trust{margin-top:20px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:20px}
  .ip-trust-item{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:#444;font-weight:400}
  .ip-trust-item svg{flex-shrink:0}

  /* ─── ARTICLES ─────────────────────────────────────── */
  #articles{background:var(--bg2);border-bottom:1px solid var(--line)}
  .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .art-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.07);box-shadow:0 1px 4px rgba(0,0,0,.05);transition:box-shadow .2s,transform .2s;text-decoration:none;display:flex;flex-direction:column}
  .art-card:hover{box-shadow:0 6px 20px rgba(139,92,246,.12);transform:translateY(-3px)}
  .art-img{width:100%;height:180px;object-fit:cover;display:block;background:var(--bg3)}
  .art-img-placeholder{width:100%;height:180px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .art-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
  .art-tag{display:inline-block;font-size:0.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .art-title{font-size:1.08rem;font-weight:700;color:#111;line-height:1.4;margin-bottom:10px}
  .art-desc{font-size:0.92rem;color:#555;line-height:1.65;flex:1;margin-bottom:18px}
  .art-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.82rem;color:#888}
  .art-read{color:var(--gold);font-weight:600;font-size:0.85rem}
  @media(max-width:860px){.articles-grid{grid-template-columns:1fr}}


  /* ─── MOBILE NAV ──────────────────────────────────── */
  .mobile-menu{
    display:none;
    position:fixed;
    top:60px;left:0;right:0;bottom:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(16px);
    z-index:99;
    flex-direction:column;
    padding:32px 28px;
    gap:8px;
    overflow-y:auto;
    border-top:1px solid rgba(0,0,0,.08);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    font-size:1.1rem;
    font-weight:600;
    color:#111;
    text-decoration:none;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .mobile-menu a:last-child{border-bottom:none}
  .mobile-menu a:hover{color:var(--gold)}
  .mobile-menu .mm-cta{
    margin-top:16px;
    background:var(--gold);
    color:#fff!important;
    padding:16px 20px!important;
    border-radius:8px;
    text-align:center;
    justify-content:center;
    font-size:1rem;
    border-bottom:none!important;
  }
  .mobile-menu .mm-install{
    color:var(--gold)!important;
    border:1px solid rgba(139,92,246,.3);
    padding:14px 20px!important;
    border-radius:8px;
    text-align:center;
    justify-content:center;
    font-size:1rem;
    border-bottom:1px solid rgba(139,92,246,.3)!important;
  }




#comments {
	display: none;
}

/* ========== ОСНОВНЫЕ СТИЛИ ДЛЯ МЕНЮ ЯЗЫКОВ ========== */
#primary-menu {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto; /* Прижимаем к правому краю */
}

#primary-menu > .pll-parent-menu-item {
    position: relative;
    list-style: none;
}

/* Кнопка переключателя (RU, EN и т.д.) */
#primary-menu > .pll-parent-menu-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: black;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Стрелка вниз */
#primary-menu > .pll-parent-menu-item > a:after {
    content: "▼";
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* При наведении */
#primary-menu > .pll-parent-menu-item:hover > a {
    background: rgba(255, 255, 255, 0.4);
}

/* Выпадающий список (десктоп - при наведении) */
#primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    right: 0; /* Выравниваем по правому краю */
    min-width: 100px;
    background: #d9f1fe;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 8px 0;
    margin: 5px 0 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
}

/* Показываем подменю при наведении (десктоп) */
#primary-menu > .pll-parent-menu-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Стили для пунктов выпадающего списка */
#primary-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

#primary-menu .sub-menu li a {
    display: block;
    padding: 8px 20px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#primary-menu .sub-menu li a:hover {
    background: rgba(255, 215, 225, 0.15);
    color: var(--gold, #6d8efe);
}

/* Активный язык (текущий) */
#primary-menu .sub-menu .current-lang a {
    color: var(--gold, #6d8efe);
    background: rgba(255, 215, 225, 0.1);
    position: relative;
}

#primary-menu .sub-menu .current-lang a:before {
    content: "✓";
    position: absolute;
    left: 8px;
    color: var(--gold, #6d8efe);
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ ========== */
@media (max-width: 768px) {
    #primary-menu {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
    
    #primary-menu > .pll-parent-menu-item {
        width: 100%;
    }
    
    #primary-menu > .pll-parent-menu-item > a {
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.05);
    }
    
    /* Скрываем подменю по умолчанию на мобилке */
    #primary-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
        margin-top: 5px;
        margin-bottom: 10px;
        padding: 5px 0;
        border-left: 2px solid rgba(255, 215, 0, 0.3);
        display: none; /* Скрыто по умолчанию */
    }
    
    /* Показываем подменю когда есть класс .open */
    #primary-menu > .pll-parent-menu-item.open .sub-menu {
        display: block;
    }
    
    /* Стили для пунктов в мобильной версии */
    #primary-menu .sub-menu li a {
        padding: 10px 20px 10px 30px;
        white-space: normal;
    }
    
    /* Убираем эффект при наведении на мобилке */
    #primary-menu .sub-menu li a:hover {
        padding-left: 30px;
    }
    
    /* Анимация стрелки при открытии */
    #primary-menu > .pll-parent-menu-item.open > a:after {
        transform: rotate(180deg);
    }
}

/* ========== АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    #primary-menu .sub-menu {
        right: 0;
    }
}


.entry-header {
	margin-bottom: 32px;
}


.type-post {
	padding-top: 60px;
}

.type-post h1 {
	font-size: 36px;
	margin-bottom: 16px;
}
.type-post h2 {
	font-size: 28px;
	margin: 16px 0;
	display: block;
}
.type-post h3 {
	font-size: 24px;
	margin: 16px 0;
	display: block;
}

.skip-link {
display: none;
}