/* ═══════════════════════════════════════════════════════════════
   RTXFury Method — shared.css · Apple × NVIDIA design system
   All motion CSS-driven. JS toggles classes/values only.
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050506; --bg-panel:#0D0D12; --bg-elevated:#15151B;
  --border:rgba(255,255,255,.08); --border-hi:rgba(255,255,255,.16);
  --green:#76B900; --green-bright:#8AC919; --green-dim:rgba(118,185,0,.09);
  --text:#F5F5F7; --text-2:#9E9EA6; --text-3:#686870;
  --amber:#E8A33D; --red:#E5484D; --cyan:#38BDF8; --blurple:#5865F2;
  --r:14px; --r2:18px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.16,1,.3,1);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Bahnschrift","DIN Alternate","Arial Narrow","Roboto Condensed",system-ui,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --nav-h:52px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;width:100%;min-width:0}
button{font-family:inherit;cursor:pointer;border:0;outline:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input{font-family:inherit}
::selection{background:rgba(118,185,0,.3);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#232329;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes pageEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes barGrow{from{width:0}to{width:var(--w,100%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Layout ───────────────────────────────────────────────────── */
.page{position:relative;z-index:2;animation:pageEnter .6s var(--ease) both;padding-top:calc(var(--nav-h) + 46px);width:100%;min-height:100vh}
.container{width:100%;max-width:1000px;margin:0 auto;padding:0 clamp(14px,3vw,22px)}
.mono{font-family:var(--font-mono)}
.section{padding:38px 0 6px;width:100%}
.section-kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:700;display:flex;align-items:center;gap:9px}
.section-kicker::before{content:"";width:22px;height:1px;background:var(--green);display:inline-block}
.section-title{font-family:var(--font-display);font-size:clamp(21.5px,2.6vw,27px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:8px}
.section-sub{color:var(--text-2);font-size:15px;margin-top:7px;max-width:600px;line-height:1.8}

/* Scroll reveal — only hidden when JS is active */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ── Nav — centered glass pill ────────────────────────────────── */
nav.top-nav,.top-nav{position:fixed;top:16px;left:0;right:0;margin-left:auto;margin-right:auto;z-index:100;width:max-content;max-width:calc(100% - 24px);height:var(--nav-h);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 8px 0 16px;border:1px solid var(--border);border-radius:16px;background:rgba(12,12,15,.72);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 12px 36px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset;animation:fadeSlideUp .5s var(--ease) .05s both}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;letter-spacing:.1em;font-size:15.5px;text-transform:uppercase;white-space:nowrap}
.nav-logo-glyph{width:20px;height:20px;border-radius:6px;object-fit:cover;transition:transform .3s var(--ease-spring)}
.nav-logo:hover .nav-logo-glyph{transform:rotate(-10deg) scale(1.06)}
.nav-links{display:flex;align-items:center;gap:2px;margin:0 8px;flex-shrink:0}
.nav-link{position:relative;font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--text-2);padding:8px 13px;border-radius:9px;transition:color .22s var(--ease),background .22s var(--ease)}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--green)}
.nav-link.active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--green);border-radius:2px}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.usage-pill{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:6px 12px;background:rgba(255,255,255,.03);white-space:nowrap}

/* ── Telegram announcement strip, directly under the nav ───────────
   Lives inside .page (see each page's markup), so it sits in the gap the fixed
   nav already reserves on desktop and at the top of the content on mobile.
   Yellow, with a gift emoji instead of the Telegram glyph. Text is near-black
   rather than white because white on yellow is unreadable (~1.4:1); this is
   ~11:1. The strip is only semi-bold (600) so the two <b> phrases stand out. */
.tg-strip{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - 32px);margin:0 auto 6px;padding:11px 22px;border-radius:99px;background:linear-gradient(90deg,#FFE24B,#FFC400);color:#1A1300;font-size:15px;font-weight:600;letter-spacing:.01em;text-align:center;text-decoration:none;box-shadow:0 10px 30px -10px rgba(255,196,0,.65);transition:transform .18s var(--ease),box-shadow .3s var(--ease),filter .2s var(--ease)}
.tg-strip:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 10px 28px -10px rgba(255,196,0,.85)}
.tg-strip svg{width:18px;height:18px;flex:0 0 auto}
.tg-strip-ico{font-size:1.15em;line-height:1;flex:0 0 auto}
.tg-strip b{font-weight:800}
@media(max-width:700px){.tg-strip{font-size:13px;padding:9px 16px;gap:8px;margin-bottom:4px;line-height:1.3}.tg-strip svg{width:16px;height:16px}}

/* Discord giveaway strip. The element carries .tg-strip as well, so it inherits
   the whole pill and only the colours are overridden - these rules must stay
   AFTER the .tg-strip ones so they win. */
.dc-strip{background:linear-gradient(90deg,#7B8CF5,#5865F2);color:#fff;box-shadow:0 10px 30px -10px rgba(88,101,242,.7)}
.dc-strip:hover{box-shadow:0 10px 28px -10px rgba(88,101,242,.9)}
/* The deadline is what people actually scan for, so it is called out.
   .tg-strip sets text-decoration:none on the anchor; an inline child
   can still ask for its own underline. */
.dc-strip .gw-ends{font-weight:800;text-decoration:underline;text-underline-offset:2px}
.usage-pill b{color:var(--green);font-weight:600}
.nav-ver{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);border:1px solid var(--border);border-radius:99px;padding:4px 10px;white-space:nowrap}
.nav-user{display:none;align-items:center;gap:8px;border:1px solid rgba(118,185,0,.3);background:var(--green-dim);border-radius:99px;padding:5px 6px 5px 13px}
.nav-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.nav-user-name{font-size:12.5px;font-weight:600;color:var(--text);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-tier{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;color:#050506;background:var(--green);border-radius:99px;padding:3px 8px;text-transform:uppercase}
.btn-login,.btn-discord{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--blurple);color:#fff;padding:10px 18px;border-radius:9px;min-height:42px;transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .3s var(--ease)}
.btn-login:hover,.btn-discord:hover{background:#4752C4;box-shadow:0 6px 22px rgba(88,101,242,.35)}
.btn-login:active,.btn-discord:active{transform:scale(.97)}
.btn-login.dev{background:none;border:1px solid var(--border-hi);color:var(--green)}
.btn-login.dev:hover{background:var(--green-dim);box-shadow:none}
.btn-discord{font-size:14.5px;padding:13px 22px}
.dl-logo{width:17px;height:17px;flex-shrink:0}
.btn-ghost{display:none;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:8px 10px;border-radius:8px;transition:color .2s var(--ease),background .2s var(--ease)}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ── Telegram sign-in button ──────────────────────────────────────
   Sized to match .btn-discord exactly (same font, padding, radius and
   min-height) so the two line up whether they sit side by side in the hero or
   stacked full-width in the sign-in prompt. Telegram's own login blue. */
.btn-tg{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#54a9eb;color:#fff;padding:13px 22px;border-radius:9px;min-height:42px;border:0;cursor:pointer;transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .3s var(--ease)}
.btn-tg:hover{background:#3f96dc;box-shadow:0 6px 22px rgba(84,169,235,.35)}
.btn-tg:active{transform:scale(.97)}
/* Hero: Discord + Telegram side by side. flex:1 1 0 on both buttons makes them
   EXACTLY the same width whatever their labels are, and align-items:stretch
   makes them the same height. (Was two auto-width buttons, so "Login with
   Telegram" came out wider than "Login with Discord".) */
.login-choices{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
.login-choices .btn{flex:1 1 0;min-width:215px;justify-content:center;text-align:center}
/* The Discord/Telegram glyphs read too small at the shared 17px, but .dl-logo is
   used by the nav pill and the tier CTA too, so this is scoped to the sign-in
   buttons rather than changed globally. 21px - bigger, not shouty. */
.login-choices .dl-logo,.login-modal-card .dl-logo{width:21px;height:21px}

/* ── Sign-in prompt shown when a signed-out visitor tries to upload ──
   Both methods offered, instead of dropping them into Discord OAuth. */
.login-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72)}
.login-modal.show{display:flex}
.login-modal-card{position:relative;width:100%;max-width:370px;background:var(--bg-panel);border:1px solid var(--border-hi);border-radius:var(--r2);padding:26px 22px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.65);animation:fadeSlideUp .28s var(--ease) both}
.login-modal-title{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0}
.login-modal-sub{font-size:13px;color:var(--text-3);margin:8px 0 16px}
.login-modal-card .btn{display:flex;justify-content:center;width:100%;margin-top:10px}
.login-modal-x{position:absolute;top:6px;right:12px;background:none;border:0;color:var(--text-3);font-size:24px;line-height:1;cursor:pointer;padding:4px}
.login-modal-x:hover{color:var(--text)}

/* ── Hero ─────────────────────────────────────────────────────── */
.page-hero{text-align:center;padding:22px 0 10px;width:100%;max-width:1000px;margin-left:auto;margin-right:auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green);border:1px solid rgba(118,185,0,.3);background:var(--green-dim);border-radius:99px;padding:7px 16px;animation:fadeSlideUp .5s var(--ease) both}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 2.4s ease-in-out infinite}
.page-hero h1{font-family:var(--font-display);font-size:clamp(31.5px,5vw,49.5px);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.23;margin-top:16px;animation:fadeSlideUp .5s var(--ease) .1s both}
.page-hero h1 span{color:var(--green)}
.hero-sub{color:var(--text-2);font-size:16.5px;line-height:1.8;margin-top:10px;animation:fadeSlideUp .5s var(--ease) .18s both}
.welcome-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;max-width:560px;width:100%;flex-wrap:wrap;animation:fadeSlideUp .5s var(--ease) .26s both}
.welcome-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;max-width:100%;min-width:0;font-size:13.5px;color:var(--text-2);border:1px solid var(--border);background:var(--bg-panel);border-radius:99px;padding:7px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .22s var(--ease)}
.welcome-chip b{color:var(--text);font-weight:600}
.welcome-chip svg{width:13px;height:13px;color:var(--green)}

/* ── Cards & KPI ──────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:24px}
.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r2);padding:20px;position:relative;transition:transform .28s var(--ease-spring),border-color .25s var(--ease),background .25s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--border-hi);background:var(--bg-elevated)}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between}
.kpi-icon{width:34px;height:34px;border-radius:10px;background:var(--green-dim);border:1px solid rgba(118,185,0,.28);display:grid;place-items:center;color:var(--green);flex-shrink:0;transition:transform .25s var(--ease-spring),background .25s var(--ease)}
.kpi-icon svg{width:16px;height:16px}
.card:hover .kpi-icon{transform:rotate(-8deg) scale(1.08);background:rgba(118,185,0,.18)}
.kpi-label{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.kpi-value{font-family:var(--font-mono);font-size:clamp(27px,3vw,34.5px);font-weight:700;margin-top:10px;letter-spacing:-.02em;transition:color .25s var(--ease)}
.card:hover .kpi-value{color:var(--green-bright)}
.kpi-foot{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--text-3);margin-top:7px}
.engine-status{display:flex;align-items:center;gap:9px;margin-top:12px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulseDot 2.4s ease-in-out infinite;flex-shrink:0}
.status-dot.off{background:var(--red)}
.status-text{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--green);letter-spacing:.07em}
.engine-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.engine-meta span{font-family:var(--font-mono);font-size:12px;color:var(--text-2);border:1px solid var(--border);border-radius:6px;padding:5px 9px}
.term-line{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);margin-top:14px;display:flex;align-items:center;gap:8px}
.term-line .caret{width:7px;height:12px;background:var(--green);animation:blink 1.2s steps(1) infinite;flex-shrink:0}
.demo-note{display:none;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(232,163,61,.35);background:rgba(232,163,61,.08);border-radius:9px;padding:9px 13px}
.demo-note i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulseDot 2.4s ease-in-out infinite}



/* ── Tier banner ──────────────────────────────────────────────── */
.tier-banner{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:1px solid rgba(118,185,0,.26);border-left:3px solid var(--green);background:linear-gradient(120deg,rgba(118,185,0,.07),transparent 55%);border-radius:var(--r2);padding:17px 20px}
.tier-banner-left{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.tier-banner-label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.tier-banner-name{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green);margin-top:2px}
.tier-banner-specs{display:flex;gap:7px;flex-wrap:wrap}
.tier-banner-specs span{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);border:1px solid var(--border);background:var(--bg-panel);border-radius:6px;padding:5px 9px}
.patch-bar{width:220px}
.patch-bar .pb-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;color:var(--text-3);text-transform:uppercase;margin-bottom:6px}
.patch-bar .pb-track{height:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.patch-bar .pb-fill{height:100%;width:0;background:var(--green);border-radius:99px;animation:barGrow 1.2s var(--ease) .6s both}
.patch-bar.unlimited .pb-fill{--w:100%}

/* ── Tier grid ────────────────────────────────────────────────── */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px;margin-top:28px;width:100%;align-items:stretch}
.tier-card{
  --tier-accent:var(--text-3); --tier-glow:rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),var(--bg-panel);
  border:1px solid var(--border);border-radius:20px;
  padding:30px 24px 28px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;min-height:348px;isolation:isolate;
  transition:transform .3s var(--ease-spring),border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.tier-card::before{ /* accent glow wash */
  content:"";position:absolute;inset:-40% -30% auto;height:75%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%,var(--tier-glow),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);
}
.tier-card::after{ /* shine sweep */
  content:"";position:absolute;top:0;left:-85%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.09) 48%,transparent 52%);
  transform:skewX(-18deg);transition:left .65s var(--ease);
}
.tier-card:hover{transform:translateY(-6px);border-color:var(--tier-accent);box-shadow:0 22px 44px -18px var(--tier-glow),0 0 0 1px var(--tier-accent) inset}
.tier-card:hover::before{opacity:1}
.tier-card:hover::after{left:135%}
.tier-card[data-tier="member"]{--tier-accent:var(--text-2);--tier-glow:rgba(158,158,166,.14)}
.tier-card[data-tier="booster"]{--tier-accent:var(--cyan);--tier-glow:rgba(56,189,248,.22)}
.tier-card[data-tier="donor"]{--tier-accent:var(--green);--tier-glow:rgba(118,185,0,.30)}
.tier-card .tier-key{display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--text-3);margin-bottom:6px}
.tier-card .tier-name{font-family:var(--font-display);font-size:clamp(29px,3.4vw,38px);font-weight:800;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:var(--tier-accent)}
.tier-card .tier-sub{font-size:15px;line-height:1.65;color:var(--text-3);margin-top:4px}
.tier-card .tier-cap{font-family:var(--font-mono);font-size:clamp(29px,3vw,38px);font-weight:700;letter-spacing:-.03em;margin-top:14px;line-height:1;
  background:linear-gradient(180deg,#fff 20%,var(--tier-accent) 120%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tier-card .tier-cap small{font-size:15px;color:var(--text-3);font-weight:600;letter-spacing:.02em;-webkit-text-fill-color:var(--text-3)}
.tier-card .tier-feats{display:flex;flex-direction:column;gap:9px;flex:1 1 auto;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.tier-card .feat{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--text-3);line-height:1.55}
.tier-card .feat .f-ic{width:15px;height:15px;flex:none;color:var(--tier-accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.tier-card .feat b{color:var(--text);font-weight:700}
.tier-card .feat.no{opacity:.45;text-decoration:line-through}
.tier-card .feat.no .f-ic{color:var(--text-3)}
.tier-card .feat .f-ic circle,.tier-card .feat .f-ic rect{fill:none}
.tier-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding:12px 16px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--font-display);font-size:15.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:all .2s var(--ease);cursor:pointer}
.tier-btn:hover{background:rgba(255,255,255,.12);border-color:var(--tier-accent);color:var(--tier-accent);transform:translateY(-1px)}
.tier-card[data-tier="donor"] .tier-btn{background:var(--green);border-color:var(--green);color:#050506}
.tier-card[data-tier="donor"] .tier-btn:hover{background:#8ae600;color:#050506;border-color:#8ae600}
.tier-card .tier-specs div{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:13px;color:var(--text-2);padding:9px 0 7px;border-bottom:1px dashed rgba(255,255,255,.05)}
.tier-card .tier-specs div:last-child{border-bottom:0}
.tier-card .tier-specs div b{color:var(--text);font-weight:600;background:linear-gradient(90deg,#fff,var(--tier-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tier-card.featured{border-color:rgba(118,185,0,.5);border-top:2px solid var(--green);background:linear-gradient(180deg,rgba(118,185,0,.10),rgba(118,185,0,.02) 45%,var(--bg-panel) 80%);box-shadow:0 0 0 1px rgba(118,185,0,.22),0 18px 46px -20px rgba(118,185,0,.45)}
.tier-card.featured:hover{box-shadow:0 26px 60px -22px rgba(118,185,0,.55),0 0 0 1px rgba(118,185,0,.4) inset}
.tier-card.mine{border-color:rgba(118,185,0,.6);box-shadow:0 0 0 1px rgba(118,185,0,.4),0 14px 40px -18px rgba(118,185,0,.5)}
.rec-chip{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#050506;background:linear-gradient(135deg,var(--green-bright),var(--green));border-radius:99px;padding:4px 11px;box-shadow:0 4px 14px -4px rgba(118,185,0,.7);animation:chipGlow 2.4s ease-in-out infinite}
@keyframes chipGlow{0%,100%{box-shadow:0 4px 14px -4px rgba(118,185,0,.7)}50%{box-shadow:0 4px 22px -2px rgba(118,185,0,1)}}
.tier-note{font-size:13.5px;color:var(--text-3);text-align:center;margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.75}
.tier-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(135deg,#6C7BFF,#5865F2 55%,#4B54E8);color:#fff;padding:15px 34px;border-radius:12px;min-height:50px;cursor:pointer;line-height:1;white-space:nowrap;position:relative;overflow:hidden;transition:transform .18s var(--ease),box-shadow .3s var(--ease)}
.tier-cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.tier-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(88,101,242,.55)}
.tier-cta:hover::after{left:130%}
.tier-cta svg{width:17px;height:17px;flex:0 0 auto}
/* Discord + Telegram side by side on the tiers page. flex:1 1 0 with the same
   min/max on both keeps them identical in size, and the max-width means the
   lone Discord CTA stays roughly its old width once signed in and the Telegram
   button is hidden. Wraps to stacked on a narrow phone. */
.tier-cta-row{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
.tier-cta-row > *{flex:1 1 0;min-width:220px;max-width:270px;margin-top:18px}
.tier-cta-tg{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#54a9eb;color:#fff;padding:15px 24px;border-radius:12px;min-height:50px;cursor:pointer;line-height:1;white-space:nowrap;border:0;transition:transform .18s var(--ease),box-shadow .3s var(--ease)}
.tier-cta-tg:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(84,169,235,.55)}
.tier-cta-tg svg{width:17px;height:17px;flex:0 0 auto}
.tier-cta.active{background:rgba(118,185,0,.1);border:1px solid rgba(118,185,0,.4);color:var(--green);cursor:default;box-shadow:none}
.compare-table{width:100%;border-collapse:collapse;font-size:15px}
.compare-table th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
.compare-table th.center,.compare-table td.center{text-align:center}
.compare-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text-2)}
.compare-table td b{color:var(--text)}
.compare-table tr:last-child td{border-bottom:0}
.compare-table .yes{color:var(--green);font-weight:700}
.compare-table .no{color:var(--red);font-weight:700}
.compare-table th.tier-th{font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.compare-table tr.compare-cta td{border-bottom:0;padding:16px 14px 6px}
.compare-table .compare-cta .tier-btn{font-size:13.5px;padding:10px 12px}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg-panel);width:100%}

/* ── Compare slider — "See the difference" ────────────────────── */
.cmp-hero{text-align:center;margin-bottom:22px}
.cmp-hero h2{font-family:var(--font-display);font-size:clamp(21.5px,3vw,31.5px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.cmp-hero p{color:var(--text-2);font-size:15px;line-height:1.75;margin-top:8px}
.cmp-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 0 4px;width:100%}

.phone-frame{position:relative;z-index:1;width:min(100%,360px);margin:0 auto;padding:10px 10px 14px;background:linear-gradient(180deg,#17171D,#101014);border:1px solid var(--border-hi);border-radius:30px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.phone-frame::after{content:"";display:block;width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);margin:10px auto 0}
.cmp{position:relative;width:auto;max-width:100%;height:min(72vh,560px);aspect-ratio:9/16;margin:0 auto;border:1px solid var(--border-hi);border-radius:var(--r2);overflow:hidden;background:#0A0A0D;cursor:ew-resize;touch-action:none;--pos:50%;user-select:none}
.cmp-layer{position:absolute;inset:0;overflow:hidden}
.cmp-layer .scene{position:absolute;inset:0}
.cmp-b{background:#101016;z-index:1}
.cmp-a{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.scene{background:radial-gradient(circle at 22% 30%,rgba(118,185,0,.14),transparent 42%),radial-gradient(circle at 74% 66%,rgba(56,189,248,.1),transparent 46%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 1.5px,transparent 2px) 0 0/18px 18px,repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 22px),linear-gradient(160deg,#15151C,#0B0B0F 60%,#101016)}
.scene::after{content:none}
.cmp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#0A0A0D}
.cmp-video.on{display:block}
.cmp-a .cmp-video{filter:none}
.cmp-b .cmp-video{filter:none}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;z-index:3;box-shadow:0 0 10px rgba(255,255,255,.35);transition:box-shadow .3s var(--ease)}
.cmp.dragging .cmp-line{box-shadow:0 0 16px rgba(255,255,255,.6)}
.cmp-hand{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);z-index:4;width:38px;height:38px;border-radius:50%;background:#fff;color:#050506;display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.18);transition:transform .22s var(--ease-spring)}
.cmp-hand:hover,.cmp.dragging .cmp-hand{transform:translate(-50%,-50%) scale(1.08)}
.cmp-hand:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.cmp-hand svg{width:12px;height:12px}
.cmp-tag{position:absolute;top:11px;z-index:5;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:3px 6px;white-space:nowrap;animation:fadeSlideUp .4s var(--ease) .4s both;background:rgba(0,0,0,.55)}
.cmp-tag.a{left:8px;color:#fff;border:1px solid rgba(255,255,255,.14)}
.cmp-tag.b{right:8px;color:var(--green-bright);border:1px solid rgba(118,185,0,.35)}
.cmp-caption{text-align:center;font-size:13.5px;color:var(--text-3);margin-top:16px}
.compare-wrap{margin-top:24px}

/* ── Patcher UI ───────────────────────────────────────────────── */
.patcher-card{margin-top:24px;background:linear-gradient(170deg,#121218,#0B0B0F);border:1px solid var(--border);border-radius:var(--r2);padding:26px;position:relative;width:100%}
.drop-zone{border:1.5px dashed var(--border-hi);border-radius:var(--r2);padding:60px 24px;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease)}
.drop-zone:hover,.drop-zone.drag{border-color:var(--green);background:var(--green-dim)}
.drop-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:12px;background:var(--green-dim);border:1px solid rgba(118,185,0,.3);display:grid;place-items:center;color:var(--green)}
.drop-icon svg{width:24px;height:24px}
.drop-title{font-size:18px;font-weight:600}
.drop-sub{font-size:15px;line-height:1.75;color:var(--text-3);margin-top:6px}
.limit-bar{display:flex;align-items:center;gap:12px;margin-top:18px}
.limit-bar-track{flex:1;height:5px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.limit-bar-fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .4s var(--ease)}
.limit-text{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);white-space:nowrap}
.scan-view{display:none;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.scan-view.show{display:grid}
.sv-item{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.sv-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.sv-val{font-family:var(--font-mono);font-size:17px;font-weight:700;margin-top:6px;color:var(--text)}
.action-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:stretch;justify-content:center}
.btn{font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:14px 24px;min-height:46px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap;transition:background .2s var(--ease),transform .12s var(--ease),opacity .2s var(--ease),border-color .2s var(--ease)}
.btn svg{width:15px;height:15px}
.btn-run{background:var(--green);color:#050506}
.btn-run:hover{background:var(--green-bright)}
.btn-run:disabled{opacity:.35;cursor:not-allowed}
.action-row{align-items:center!important}
.action-row .chk-opt{min-height:52px;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
.action-row .btn{min-height:52px}
.btn-dl{background:var(--green);border:1px solid var(--green);color:#050506}
.btn-dl:hover{background:var(--green-bright);border-color:var(--green-bright);color:#050506;box-shadow:0 0 18px -4px rgba(118,185,0,.55)}
.btn-dl:disabled{opacity:.35;cursor:not-allowed}
.btn-dl.pulse{animation:dlpulse 1.1s ease 3}
@keyframes dlpulse{0%,100%{box-shadow:0 0 0 0 rgba(118,185,0,0)}50%{box-shadow:0 0 0 8px rgba(118,185,0,.25)}}
.btn-clear{background:none;color:var(--text-3);border:1px solid var(--border)}
.btn-clear:hover{color:var(--text);border-color:var(--border-hi)}
.btn-again{background:var(--bg-elevated);border:1px solid var(--border-hi);color:var(--text)}
.btn-again:hover{border-color:var(--green);color:var(--green)}
.usage-row{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.usage-avatar{width:30px;height:30px;border-radius:50%;background:var(--green-dim);border:1px solid rgba(118,185,0,.3);display:grid;place-items:center;color:var(--green);font-family:var(--font-mono);font-size:13.5px;font-weight:700;overflow:hidden}
.usage-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.usage-label{font-size:14.5px;line-height:1.65;color:var(--text-2)}
.usage-label b{color:var(--text);font-weight:600}
.patch-login{text-align:center;padding:46px 20px;border:1.5px dashed var(--border-hi);border-radius:var(--r2)}
.patch-login .lock{width:46px;height:46px;margin:0 auto 13px;border-radius:13px;background:var(--green-dim);border:1px solid rgba(118,185,0,.3);display:grid;place-items:center;color:var(--green)}
.patch-login .lock svg{width:20px;height:20px}
.patch-login h3{font-size:17px;font-weight:600}
.patch-login p{font-size:15px;line-height:1.75;color:var(--text-3);margin-top:6px;max-width:380px;margin-left:auto;margin-right:auto}
.proc-progress{padding:34px 20px;text-align:center}
.proc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.proc-pct{font-family:var(--font-mono);font-size:clamp(38px,6vw,47px);font-weight:700;color:var(--green);letter-spacing:-.02em}
.proc-stage{font-size:14.5px;color:var(--text-2);margin-top:9px}
.proc-status{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:10px}
.progress-track{height:7px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .3s var(--ease)}

/* ── TikTok Analyzer (tt-*) ──────────────────────────────────── */
.tt-engine-label{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.tt-engine-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulseDot 2.4s ease-in-out infinite}
.tt-engine-name{font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.tt-engine-ver{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);border:1px solid var(--border);border-radius:99px;padding:2px 8px}
.tt-input-row{display:flex;gap:10px;align-items:stretch;width:100%}
.tt-input-wrap{flex:1;min-width:0}
.tt-input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--border-hi);border-radius:11px;color:var(--text);font-size:15px;padding:13px 15px;transition:border-color .2s var(--ease)}
.tt-input::placeholder{color:var(--text-3)}
.tt-input:focus{outline:none;border-color:var(--green)}
.btn-tt-analyze{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:11px;background:var(--green);color:#050506;font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;min-height:46px;width:150px;flex:0 0 auto;transition:background .2s var(--ease),transform .12s var(--ease);white-space:nowrap}
.btn-tt-analyze:hover{background:var(--green-bright)}
.btn-tt-analyze:disabled{opacity:.55;cursor:not-allowed}
.tt-loading{display:none;padding:40px;text-align:center}
.tt-loading.show{display:block}
.tt-spinner{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.08);border-top-color:var(--green);animation:spin .7s linear infinite;margin:0 auto 12px}
.tt-loading-text{font-size:15px;color:var(--text-3)}
.tt-error{display:none;padding:13px;border-radius:11px;background:rgba(229,72,77,.07);border:1px solid rgba(229,72,77,.18);font-size:15px;color:var(--red);margin-top:14px}
.tt-error.show{display:block;animation:fadeSlideUp .3s var(--ease)}
.tt-result{display:none;animation:fadeSlideUp .46s var(--ease)}
.tt-result.show{display:block;margin-top:20px;width:100%}
.tt-profile-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:14px 16px;border-radius:var(--r2);background:var(--bg-panel);border:1px solid var(--border);transition:border-color .22s var(--ease)}
.tt-profile-row:hover{border-color:var(--border-hi)}
.tt-thumb{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--border-hi);background:var(--bg-elevated);flex-shrink:0}
.tt-author-info{flex:1;min-width:0}
.tt-author-name{font-size:17px;font-weight:700;color:var(--text)}
.tt-author-handle{font-size:13.5px;color:var(--text-3);margin-top:2px}
.tt-verified{font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--green-dim);border:1px solid rgba(118,185,0,.3);padding:2px 8px;border-radius:99px;display:inline-flex;align-items:center;gap:4px}
.tt-account-badge{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.tt-account-badge.public{background:var(--green-dim);color:var(--green);border:1px solid rgba(118,185,0,.25)}
.tt-account-badge.private{background:rgba(229,72,77,.07);color:var(--red);border:1px solid rgba(229,72,77,.18)}
.tt-meta-row{display:flex;gap:16px;margin-bottom:16px;font-size:13.5px;color:var(--text-3);flex-wrap:wrap}
.tt-meta-item{display:flex;align-items:center;gap:5px}
.tt-title-box{padding:12px 14px;border-radius:var(--r);background:var(--bg-panel);border:1px solid var(--border);margin-bottom:16px}
.tt-title-text{font-size:15px;color:var(--text-2);line-height:1.7}
.tt-hashtags{font-size:13.5px;color:var(--green);margin-top:6px;font-weight:600}
.tt-categories{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.tt-cat-chip{font-size:11.5px;font-weight:700;color:#0b0f14;background:var(--accent, #4ade80);padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.tt-tech-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tt-tech{padding:10px 12px;border-radius:var(--r);background:var(--bg-panel);border:1px solid var(--border);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.tt-tech:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.tt-tech-lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);font-weight:700}
.tt-tech-val{font-size:14.5px;color:var(--text);margin-top:5px}
.tt-video-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:var(--r2);font-size:15px;font-weight:700;color:#050506;background:var(--green);width:100%;margin-top:16px;transition:background .2s var(--ease),transform .2s var(--ease)}
.tt-video-btn:hover{background:var(--green-bright);transform:translateY(-2px)}
.tt-video-btn svg{width:14px;height:14px}
.an-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.an-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulseDot 2.4s ease-in-out infinite}
.an-note.live{color:var(--green)}
.an-note.live::before{background:var(--green)}

/* ── Admin ────────────────────────────────────────────────────── */
.admin-box{max-width:420px;margin:40px auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r2);padding:26px;text-align:center;width:100%;box-sizing:border-box}
.admin-box h2{font-family:var(--font-display);font-size:20.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.admin-box p{font-size:13.5px;color:var(--text-3);margin-bottom:18px}
.admin-error{font-family:var(--font-mono);font-size:12.5px;color:var(--red);margin-top:10px;min-height:14px}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap;width:100%}
.admin-toolbar .count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r2);background:var(--bg-panel);margin-top:14px;width:100%}
.admin-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.admin-table th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;padding:13px 15px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:12px 15px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.admin-table .dim{color:var(--text-3);font-size:12px}
.admin-table select{background:var(--bg);border:1px solid var(--border-hi);border-radius:7px;color:var(--text);font-family:var(--font-mono);font-size:13.5px;padding:6px 9px;cursor:pointer}
.admin-table select:focus{outline:none;border-color:var(--green)}
.btn-xs{padding:7px 11px;font-size:12px;border-radius:7px}
.input-field{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--border-hi);border-radius:10px;color:var(--text);font-size:15px;padding:12px 15px;transition:border-color .2s var(--ease);min-width:0;max-width:100%;box-sizing:border-box}
.input-field::placeholder{color:var(--text-3)}
.input-field:focus{outline:none;border-color:var(--green)}
.input-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:stretch}

/* ── Bottom nav (mobile) ──────────────────────────────────────── */
.bottom-nav{display:none;position:fixed;top:auto;right:0;bottom:0;left:0;width:100%;max-width:none;height:72px;margin:0;padding:6px 8px env(safe-area-inset-bottom);border:0;border-top:1px solid var(--border);border-radius:0;z-index:100;background:rgba(10,10,13,.92);backdrop-filter:blur(20px) saturate(1.4);justify-content:space-around;align-items:center;gap:2px;transform:none;animation:none}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9.5px;letter-spacing:.01em;text-transform:uppercase;color:var(--text-3);padding:8px 1px;min-height:56px;flex:1;min-width:0;border-radius:10px;transition:color .2s var(--ease)}
.bn-item svg{width:21px;height:21px;flex:none}
.bn-item span{max-width:100%;text-align:center;line-height:1.15}
.bn-item.active{color:var(--green)}
.bn-item.active svg{color:var(--green)}
.bn-item:hover{color:var(--text)}

/* ── Footer ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);margin-top:60px;padding:26px 0 34px;text-align:center}
.footer-logo{font-family:var(--font-display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:15.5px;display:flex;align-items:center;justify-content:center;gap:8px}
.footer-glyph{width:14px;height:14px;border-radius:4px;object-fit:cover;vertical-align:-1px}
.footer-sub{font-size:12.5px;color:var(--text-3);margin-top:8px}

/* ── Footer (base rules, must come BEFORE media queries) ──────── */
.site-footer{border-top:1px solid var(--border);padding:40px 0 24px;margin-top:20px;text-align:left}
.footer-cols{display:grid;max-width:1100px;margin:0 auto;align-items:start}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.footer-brand-logo{width:38px;height:38px;border-radius:9px;object-fit:cover;margin-bottom:5px}
.footer-brand-name{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.1em;color:var(--text)}
.footer-brand p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.65}
/* Flatten the Community+Socials wrapper so all 5 sections are direct, equal-width grid columns */
.footer-cols-2{display:contents}
.footer-col h4{color:var(--text-3);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.footer-col a{display:block;color:var(--text-2);font-size:15px;padding:4px 0;text-decoration:none;overflow-wrap:break-word}
.footer-col a:hover{color:var(--green)}
.footer-brand,.footer-col{min-width:0;overflow-wrap:break-word}
.footer-bottom{border-top:1px solid var(--border);margin-top:28px;padding-top:16px;text-align:center;color:var(--text-3);font-size:13.5px}
/* SEO keyword section: hidden from visitors but kept in HTML source for search engines */
.footer-seo{border-top:1px solid var(--border);margin:28px auto 0;padding:20px 20px 0;max-width:1100px;display:none!important}
.footer-seo h4{color:var(--text-3);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.footer-seo-tags{display:flex;flex-wrap:wrap;gap:8px}
.footer-seo-tags a{color:var(--text-2);font-size:13px;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:999px;padding:4px 12px;transition:color .15s ease,border-color .15s ease}
.footer-seo-tags a:hover{color:var(--green);border-color:var(--green)}
.footer-engine{color:var(--green)}

/* ── Responsive ───────────────────────────────────────────────── */
@media(min-width:1200px){.container{max-width:1120px}}
@media(max-width:900px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .tier-grid{grid-template-columns:1fr}
  .an-grid{grid-template-columns:repeat(2,1fr)}
  .scan-view{grid-template-columns:repeat(2,1fr)}
  .page-hero h1{font-size:34px}
}
/* Footer: true desktops — all 5 sections in one row */
@media(min-width:1101px){
  .footer-cols{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px;padding:0 20px}
}
/* Footer: tablets, phones & phone-landscape — 2 columns, Community/Socials on top row */
@media(max-width:1100px){
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:0 20px}
  .footer-brand{grid-column:1/-1}
  /* Order: Brand → [Community | Socials] → [Product | Guides] */
  .footer-cols > .footer-brand{order:1}
  .footer-cols-2 > .footer-col:nth-child(1){order:2}
  .footer-cols-2 > .footer-col:nth-child(2){order:3}
  .footer-cols > .footer-col:nth-child(2){order:4}
  .footer-cols > .footer-col:nth-child(3){order:5}
}
@media(max-width:700px){
  nav.top-nav,.top-nav{display:none}
  .bottom-nav{display:flex}
  body{padding-bottom:60px}
  .page{padding-top:22px}
  .page-hero{padding-top:12px}
  main.container{padding-left:16px;padding-right:16px}
  .patcher-card{padding:18px}
  .tt-input-row{flex-direction:column}
  .btn-tt-analyze{width:100%}
  .admin-toolbar{align-items:stretch}
  .admin-toolbar>div{width:100%}
  .admin-toolbar .btn{flex:1;justify-content:center}
  /* Footer stays 2 columns on phones too; just tighten spacing */
  .footer-cols{gap:28px;padding:0 24px}
  .footer-col h4{margin-bottom:10px}
  /* Phones: the pair used to wrap and then stretch to the full content width,
     which read as two wide bars. Fixed width instead, centred, still stacked so
     the labels fit without shrinking the text. */
  .login-choices{flex-direction:column;align-items:stretch;gap:9px;width:280px;max-width:100%;margin:0 auto}
  .login-choices .btn{flex:0 0 auto;min-width:0}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .page-hero h1{font-size:28.5px}
  .tier-banner{padding:15px}
  .patch-bar{width:100%}
  .cmp-tag{font-size:9px;padding:3px 5px;top:10px}
  .cmp-tag.a{left:6px}.cmp-tag.b{right:6px}
  .usage-pill{display:none}
  .heat-grid{grid-template-columns:repeat(4,1fr)}
  .tt-tech-row{grid-template-columns:repeat(2,1fr)}
  .tt-profile-row{gap:11px;padding:12px}
  .tt-thumb{width:44px;height:44px}
  .tt-meta-row{gap:8px 12px;font-size:13px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .scan-view{grid-template-columns:1fr 1fr}
  .action-row{flex-direction:column}
  .action-row .btn{width:100%;justify-content:center}
  .cmp-hero h2{font-size:25px}
  .cmp-hero p{font-size:13.5px}
  .phone-frame{width:min(100%,300px);border-radius:24px;padding:7px 7px 10px}
  .proc-pct{font-size:39px}
  .page-hero{padding-top:14px}
  .tool-tab{flex:1;text-align:center;padding:10px 6px}
  .tier-cta{width:100%;justify-content:center}
  .cmp-caption{font-size:12.5px}
  .tt-engine-label{margin-bottom:13px}
  .tt-result .sv-item{padding:9px 11px}
}
@media(max-width:420px){
  .page-hero h1{font-size:29.5px}
  .patcher-card{padding:14px}
  .tt-tech-row{gap:8px}
  .tt-tech{padding:9px 10px}
  .tt-tech-val{font-size:13px}
}
@media(hover:none){
  .card:hover,.tier-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .reveal{opacity:1;transform:none}
}

/* ── Login-required modal (patcher) ───────────────────────────── */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeSlideUp .25s var(--ease)}
.modal{background:var(--bg-panel);border:1px solid var(--border-hi);border-radius:var(--r2);padding:30px 26px;max-width:380px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-lock{width:46px;height:46px;margin:0 auto 14px;border-radius:13px;background:var(--green-dim);border:1px solid rgba(118,185,0,.3);display:grid;place-items:center;color:var(--green)}
.modal-lock svg{width:20px;height:20px}
.modal h3{font-size:17.5px;font-weight:600}
.modal p{font-size:14.5px;color:var(--text-3);margin:8px 0 20px;line-height:1.75}
.modal .btn-discord{width:100%;justify-content:center}
.modal .btn-clear{width:100%;margin-top:8px}

/* FAQ */
.faq{margin-top:48px;padding-bottom:40px}
.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--bg-elevated);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:none;border:none;color:var(--text);font-size:17.5px;font-weight:600;text-align:left;cursor:pointer;letter-spacing:0;text-transform:none;line-height:1.65}
.faq-caret{color:var(--text-3);font-size:15px;transition:transform .2s}
.faq-item.open .faq-caret{transform:rotate(180deg)}
.faq-a{display:none;padding:2px 20px 22px;color:var(--text-2);font-size:17px;line-height:2}
.faq-item.open .faq-a{display:block}
.faq-support{margin-top:20px;text-align:center;color:var(--text-2);font-size:15px}
.faq-support-link{color:var(--green);font-weight:600}

.kpi-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}



/* Patcher log terminal (inside the processing view) */
.proc-log{min-height:120px;max-height:200px;overflow-y:auto;margin-top:16px;padding:12px 14px;border-radius:10px;background:#0a0a0c;border:1px solid var(--border);font-family:var(--font-mono);font-size:12.5px;line-height:2;text-align:left}
.log-line{color:#66666c;animation:logIn .22s ease both}
@keyframes logIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.log-line.hi{color:#64d2ff}.log-line.pur{color:#d1d1d6}.log-line.ok{color:#30d158}.log-line.err{color:#ff6961}.log-line.warn{color:#ffd60a}


/* ── SPA views ─────────────────────────────────────────────── */
.view{display:none}
.view.active{display:block;animation:viewFade .25s ease}
@keyframes viewFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── Login view (was login.html) ───────────────────────────── */
.login-card{max-width:380px;width:90%;margin:60px auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:34px 40px;text-align:center}
.login-card h1{font-size:23px;margin-bottom:10px;color:var(--text)}
.login-card p{font-size:16px;color:var(--text-2);margin-bottom:22px;line-height:1.65}
.login-card .btn{display:inline-block;background:#5865f2;color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:12px 26px;border-radius:10px;width:100%}
.login-card .btn:hover{background:#4752c4}
/* Sign-in choices: both buttons are our own elements sharing this one rule, so
   they are identical in length, width and height. 238x40 is the box the Telegram
   widget fallback occupies (data-size="large" iframe), kept so the fallback comes
   out the same size. Scoped to .login-choice (set by showLoginChoice in
   shared.js) so the Telegram join screen keeps its own full-width button. */
.login-card.login-choice .btn{display:inline-flex;align-items:center;justify-content:center;width:238px;height:40px;min-height:40px;padding:0;font-size:15px;letter-spacing:.04em;border-radius:10px;white-space:nowrap}
/* display:flex/inline-flex would beat the hidden attribute, so re-hide explicitly:
   these two are toggled when the stock Telegram widget fallback takes over. */
.login-card.login-choice .btn[hidden],.login-card.login-choice .login-tg-slot[hidden]{display:none}
/* Telegram's own login-button blue, taken from telegram.org's widget-frame.css
   (button.tgme_widget_login_button{background-color:#54a9eb}) so this button and
   the stock-widget fallback are the exact same blue. Discord keeps #5865f2. */
.login-card.login-choice #tg-login-go{background:#54a9eb;margin-bottom:10px}
.login-card.login-choice #tg-login-go:hover{background:#3f96dc}
.login-card.login-choice .login-tg-slot{display:flex;align-items:center;justify-content:center;height:40px;margin:0 auto 14px}
.login-card.login-choice .login-tg-slot iframe{display:block;width:238px;height:40px;border:0;overflow:hidden;background:transparent}
@media(max-width:430px){.login-card{padding:26px 18px}}

/* ── Payment badges (footer) ──────────────────────────────────── */
.footer-payments{border-top:1px solid var(--border);max-width:1100px;margin:28px auto 0;padding:22px 0 0;text-align:center}
.footer-payments h4{color:var(--text-3);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.pay-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pay-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.14),0 5px 12px rgba(0,0,0,.09);white-space:nowrap;font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.01em;color:#1a1a1a;user-select:none}
.pay-badge svg{display:block;flex:none}
.pay-badge img.pv-img{display:block;height:20px;width:auto;max-width:92px;flex:none}
.pay-badge b{font-weight:700;line-height:1}
.pv-visa{font-style:italic;font-weight:800;color:#1A1F71;font-size:14.5px;letter-spacing:.02em}
.pv-paypal{font-style:italic;font-weight:800;font-size:14px}
.pv-paypal .c1{color:#003087}
.pv-paypal .c2{color:#009CDE}
.pv-revolut{font-weight:800;font-size:13.5px;color:#0a0a0a}
@media(max-width:520px){.pay-badge{height:28px;padding:0 10px;font-size:12px;gap:5px}.pv-visa{font-size:13px}.pv-paypal{font-size:12.5px}.pay-badge img.pv-img{height:17px;max-width:80px}}

/* ── TEMP optimizer announcement (remove together with #hevc-announce markup) ── */
.site-announce{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;width:100%;max-width:1000px;margin:0 auto 16px;padding:12px 46px 12px 18px;border-radius:14px;background:#f59e0b;color:#1c1917;font-size:16px;font-weight:600;line-height:1.5;text-align:center;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.site-announce .ann-ico{font-size:18px}
.site-announce b{font-weight:800}
.site-announce .ann-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#1c1917;font-size:19px;cursor:pointer;font-weight:700;padding:6px;line-height:1;border-radius:8px}
.site-announce .ann-close:hover{background:rgba(0,0,0,.12)}
@media(min-width:1200px){.site-announce{max-width:1120px}}
@media(max-width:700px){.site-announce{font-size:14.5px;padding:11px 38px 11px 14px;border-radius:12px}}

/* Tier CTA for the tier the user already holds. Placed last so it also wins
   over the donor card's own .tier-btn colour rules. */
.tier-btn.activated,
.tier-card[data-tier] .tier-btn.activated {
  background: rgba(118, 185, 0, 0.14);
  border-color: rgba(118, 185, 0, 0.55);
  color: var(--green);
  cursor: default;
  pointer-events: none;
  transform: none;
}