/* ═══════════════════════════════════════════════════════════════
   PLANO ABERTO — Design System
   ─────────────────────────────────────────────────────────────
   Análises independentes de ferramentas de vídeo com IA.
   Dark premium editorial. Built on Darwin DS tokens, self-contained
   so the site deploys anywhere (Vercel / domínio próprio) sem deps.

   Aesthetic: Editorial/Magazine in a near-black palette.
   Display: Fraunces (serif, optical sizing). Body: Inter. Meta: JetBrains Mono.
   One brand accent: champagne gold = rating / award / "Escolha do Editor".
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root {
    /* Backgrounds — never pure black */
    --bg:           #08090a;
    --bg-2:         #0e0f11;
    --bg-3:         #141518;
    --bg-elevated:  #131417;

    /* Text — 4 tiers, never pure white */
    --tx:           #f4f4f2;
    --tx-2:         #a4a4ac;
    --tx-3:         #6c6c76;
    --tx-4:         #46464e;

    /* Borders — always rgba */
    --bd:           rgba(255,255,255,0.07);
    --bd-2:         rgba(255,255,255,0.10);
    --bd-3:         rgba(255,255,255,0.14);

    /* Accent — champagne gold (rating / award language) */
    --gold:         #e2b35c;
    --gold-bright:  #f1c878;
    --gold-deep:    #c1923f;
    --gold-subtle:  rgba(226,179,92,0.10);
    --gold-glow:    rgba(226,179,92,0.18);
    --gold-line:    rgba(226,179,92,0.28);

    /* Semantic (information only — NOT a second brand accent) */
    --pro:          #4ec88f;
    --con:          #ef7a76;
    --pro-bg:       rgba(78,200,143,0.09);
    --con-bg:       rgba(239,122,118,0.09);
    --warn:         #e7b549;

    /* Type */
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', 'SF Mono', monospace;

    --t-display: clamp(2.6rem, 1.4rem + 5.2vw, 4.6rem);
    --t-h1:      clamp(2.1rem, 1.4rem + 3.0vw, 3.3rem);
    --t-h2:      clamp(1.55rem, 1.1rem + 1.7vw, 2.1rem);
    --t-h3:      clamp(1.2rem, 1.0rem + 0.7vw, 1.45rem);
    --t-lead:    clamp(1.075rem, 1.0rem + 0.45vw, 1.3rem);
    --t-body:    1.0625rem;     /* 17px — comfortable reading */
    --t-sm:      0.9375rem;     /* 15px */
    --t-xs:      0.8125rem;     /* 13px */
    --t-mono:    0.6875rem;

    /* Spacing — 8px grid */
    --s2:2px; --s4:4px; --s8:8px; --s12:12px; --s16:16px;
    --s20:20px; --s24:24px; --s32:32px; --s40:40px;
    --s48:48px; --s64:64px; --s80:80px; --s96:96px; --s128:128px;

    /* Motion */
    --ease: cubic-bezier(0.16,1,0.3,1);
    --ease-q: cubic-bezier(0.25,0.46,0.45,0.94);
    --fast:0.16s; --norm:0.34s; --slow:0.6s;

    /* Radius — editorial: restrained, never pill-everything */
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:9999px;

    /* Layout */
    --w-prose: 700px;     /* article reading column */
    --w-wide:  1120px;    /* landing / grids */
    --w-mid:   880px;

    /* Light & depth */
    --inset:    inset 0 1px 0 0 rgba(255,255,255,0.05);
    --inset-md: inset 0 1px 0 0 rgba(255,255,255,0.08);
    --sh-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.16);
    --sh-md: 0 6px 18px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.22);
    --sh-lg: 0 16px 44px rgba(0,0,0,0.46), 0 5px 14px rgba(0,0,0,0.30);
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--tx);
    line-height: 1.6;
    font-size: var(--t-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "ss01","cv05";
}

a { color: inherit; text-decoration: none; }
img, svg, video { display:block; max-width:100%; }
button, input { font:inherit; color:inherit; }
b, strong { font-weight:600; color:var(--tx); }
::selection { background: var(--gold-subtle); color: var(--gold-bright); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.16); }

/* Ambient grid — masked, subtle, NOT decorative orbs */
.bg-grid {
    position:fixed; inset:0; z-index:-3; pointer-events:none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 96px);
    -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 25%, transparent 75%);
}
.bg-glow {
    position:fixed; top:-30vh; left:50%; transform:translateX(-50%);
    width:1100px; height:700px; z-index:-2; pointer-events:none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--gold-subtle) 0%, transparent 70%);
    opacity:0.5;
}

/* ── 3. LAYOUT ────────────────────────────────────────────────── */
.wrap   { width:100%; max-width:var(--w-wide); margin:0 auto; padding:0 var(--s24); }
.wrap--mid   { max-width:var(--w-mid); }
.wrap--prose { max-width:var(--w-prose); }

.section { padding: var(--s80) 0; }
.section--tight { padding: var(--s48) 0; }

.eyebrow {
    display:inline-flex; align-items:center; gap:var(--s8);
    font-family:var(--mono); font-size:var(--t-mono); font-weight:500;
    text-transform:uppercase; letter-spacing:0.18em; color:var(--gold);
}
.eyebrow::before { content:''; width:18px; height:1px; background:var(--gold); opacity:0.55; }
.eyebrow--plain { color:var(--tx-3); }
.eyebrow--plain::before { background:var(--tx-3); }

/* ── 4. NAVBAR ────────────────────────────────────────────────── */
.nav {
    position:sticky; top:0; z-index:40; height:60px;
    background: rgba(8,9,10,0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom:1px solid var(--bd);
}
.nav__in { height:100%; max-width:var(--w-wide); margin:0 auto; padding:0 var(--s24);
    display:flex; align-items:center; justify-content:space-between; gap:var(--s24); }
.brand { display:flex; align-items:center; gap:var(--s12); flex-shrink:0; }
.brand__mark { width:26px; height:26px; color:var(--gold); flex-shrink:0; }
.brand__name { font-family:var(--display); font-weight:600; font-size:1.12rem;
    letter-spacing:-0.01em; color:var(--tx); font-optical-sizing:auto; }
.nav__links { display:flex; align-items:center; gap:var(--s4); }
.nav__link { padding:8px var(--s12); border-radius:var(--r-sm); font-size:var(--t-sm);
    color:var(--tx-2); font-weight:450; transition:color var(--fast) ease, background var(--fast) ease; }
.nav__link:hover { color:var(--tx); background:rgba(255,255,255,0.04); }
.nav__link.is-active { color:var(--gold); }
.nav__toggle { display:none; width:40px; height:40px; align-items:center; justify-content:center;
    border:1px solid var(--bd-2); border-radius:var(--r-sm); background:transparent; cursor:pointer; color:var(--tx); }
.nav__toggle svg { width:18px; height:18px; }

/* ── 5. TYPOGRAPHY ────────────────────────────────────────────── */
.display { font-family:var(--display); font-weight:600; font-optical-sizing:auto;
    font-size:var(--t-display); line-height:1.02; letter-spacing:-0.02em; color:var(--tx);
    text-wrap:balance; }
.h1 { font-family:var(--display); font-weight:600; font-optical-sizing:auto; font-size:var(--t-h1);
    line-height:1.08; letter-spacing:-0.018em; color:var(--tx); text-wrap:balance; }
.h2 { font-family:var(--display); font-weight:600; font-optical-sizing:auto; font-size:var(--t-h2);
    line-height:1.14; letter-spacing:-0.012em; color:var(--tx); text-wrap:balance; }
.h3 { font-family:var(--sans); font-weight:650; font-size:var(--t-h3); line-height:1.3;
    letter-spacing:-0.01em; color:var(--tx); }
.kicker { font-family:var(--mono); font-size:var(--t-mono); font-weight:600; text-transform:uppercase;
    letter-spacing:0.14em; color:var(--tx-3); display:flex; align-items:center; gap:var(--s12); }
.kicker .n { color:var(--gold); }
.kicker::after { content:''; flex:1; height:1px; background:var(--bd); }

.lead { font-size:var(--t-lead); line-height:1.55; color:var(--tx-2); text-wrap:pretty; }
.lead b { color:var(--tx); font-weight:600; }

/* Article prose */
.prose { color:var(--tx-2); font-size:var(--t-body); line-height:1.78; }
.prose > * + * { margin-top:var(--s24); }
.prose p { max-width:68ch; }
.prose b, .prose strong { color:var(--tx); font-weight:600; }
.prose a:not(.btn) { color:var(--gold); border-bottom:1px solid var(--gold-line);
    transition:border-color var(--fast) ease; }
.prose a:not(.btn):hover { border-color:var(--gold); }
.prose h2 { font-family:var(--display); font-weight:600; font-optical-sizing:auto;
    font-size:var(--t-h2); line-height:1.16; letter-spacing:-0.012em; color:var(--tx);
    margin-top:var(--s64); margin-bottom:var(--s8); scroll-margin-top:84px; }
.prose h3 { font-size:var(--t-h3); font-weight:650; color:var(--tx); margin-top:var(--s40);
    margin-bottom:var(--s4); scroll-margin-top:84px; }
.prose ul, .prose ol { padding-left:var(--s24); max-width:66ch; }
.prose li { margin-top:var(--s8); padding-left:var(--s4); }
.prose li::marker { color:var(--gold); }
.prose hr { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--bd-2),transparent);
    margin:var(--s48) 0; }
.prose .lead--first::first-letter {
    font-family:var(--display); font-weight:600; float:left; font-size:3.4em; line-height:0.78;
    padding:6px 10px 0 0; color:var(--gold);
}

/* ── 6. BUTTONS ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s8);
    padding:11px 20px; font-size:var(--t-sm); font-weight:550; letter-spacing:-0.01em;
    border:1px solid var(--bd-2); border-radius:var(--r-sm); background:var(--bg-2); color:var(--tx);
    cursor:pointer; white-space:nowrap; user-select:none;
    transition:background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease); }
.btn:hover { border-color:var(--bd-3); background:var(--bg-3); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(0.985); }
.btn svg { width:16px; height:16px; }
.btn--gold { background:var(--gold); border-color:var(--gold); color:#231a08; font-weight:600; }
.btn--gold:hover { background:var(--gold-bright); border-color:var(--gold-bright);
    box-shadow:0 4px 18px var(--gold-glow); color:#231a08; }
.btn--ghost { background:transparent; border-color:var(--bd-2); }
.btn--ghost:hover { background:rgba(255,255,255,0.04); }
.btn--lg { padding:14px 26px; font-size:var(--t-body); }
.btn--sm { padding:8px 15px; font-size:var(--t-xs); }
.btn--block { width:100%; }

/* Affiliate CTA — the styled outbound link */
.cta-tool {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s16);
    width:100%; padding:14px 18px; border-radius:var(--r-md);
    background:linear-gradient(180deg, rgba(226,179,92,0.14), rgba(226,179,92,0.06));
    border:1px solid var(--gold-line); color:var(--tx); font-weight:550; font-size:var(--t-sm);
    transition:border-color var(--fast) ease, transform var(--fast) var(--ease), box-shadow var(--norm) ease; }
.cta-tool:hover { border-color:var(--gold); transform:translateY(-1px); box-shadow:0 6px 22px var(--gold-glow); }
.cta-tool__r { display:inline-flex; align-items:center; gap:var(--s8); color:var(--gold); font-weight:600; }
.cta-tool__r svg { width:15px; height:15px; }
.cta-tool__sub { font-size:var(--t-xs); color:var(--tx-3); font-weight:400; }

/* ── 7. AFFILIATE DISCLOSURE ──────────────────────────────────── */
.disclosure {
    display:flex; align-items:flex-start; gap:var(--s12); padding:12px var(--s16);
    border:1px solid var(--bd); border-radius:var(--r-md); background:var(--bg-2);
    font-size:var(--t-xs); color:var(--tx-3); line-height:1.55; }
.disclosure svg { width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--tx-3); }
.disclosure a { color:var(--tx-2); border-bottom:1px solid var(--bd-2); }
.disclosure a:hover { color:var(--gold); }
.disclosure b { color:var(--tx-2); }

/* ── 8. RATING / STARS ────────────────────────────────────────── */
.stars { display:inline-flex; align-items:center; gap:2px; }
.stars svg { width:15px; height:15px; }
.stars .s-on { color:var(--gold); }
.stars .s-off { color:var(--tx-4); }
.score { display:inline-flex; align-items:baseline; gap:3px; font-variant-numeric:tabular-nums; }
.score__n { font-family:var(--display); font-weight:600; font-size:1.5rem; line-height:1; color:var(--gold); }
.score__d { font-size:var(--t-xs); color:var(--tx-3); }
.scorebox { display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:var(--s16) var(--s20); border:1px solid var(--gold-line); border-radius:var(--r-md);
    background:var(--gold-subtle); min-width:96px; }
.scorebox__n { font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:0.9;
    color:var(--gold); font-variant-numeric:tabular-nums; }
.scorebox__l { font-family:var(--mono); font-size:0.6rem; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--tx-3); }

/* ── 9. BADGES / CHIPS ────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
    font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
    padding:4px 10px; border-radius:var(--r-full); white-space:nowrap; }
.badge--gold { background:var(--gold-subtle); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-line); }
.badge--pick { background:var(--gold); color:#231a08; }
.badge--neu  { background:rgba(255,255,255,0.05); color:var(--tx-3); }
.badge--pro  { background:var(--pro-bg); color:var(--pro); }
.badge--con  { background:var(--con-bg); color:var(--con); }
.badge__dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:var(--t-xs); font-weight:500;
    padding:4px 11px; border-radius:var(--r-full); background:rgba(255,255,255,0.04);
    color:var(--tx-2); border:1px solid var(--bd); }
.chip svg { width:13px; height:13px; color:var(--tx-3); }

/* ── 10. TOOL RANKING CARD ────────────────────────────────────── */
.rankcard {
    position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--s20);
    padding:var(--s24); border:1px solid var(--bd); border-radius:var(--r-lg);
    background:var(--bg-2); box-shadow:var(--inset);
    transition:border-color var(--norm) ease, transform var(--norm) var(--ease); }
.rankcard:hover { border-color:var(--bd-3); transform:translateY(-2px); }
.rankcard--top { border-color:var(--gold-line); background:linear-gradient(180deg, rgba(226,179,92,0.05), var(--bg-2)); }
.rankcard__rank { font-family:var(--display); font-weight:600; font-size:2.2rem; line-height:1;
    color:var(--tx-3); width:48px; text-align:center; font-variant-numeric:tabular-nums; }
.rankcard--top .rankcard__rank { color:var(--gold); }
.rankcard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s16);
    flex-wrap:wrap; margin-bottom:var(--s8); }
.rankcard__name { font-family:var(--display); font-size:1.4rem; font-weight:600; color:var(--tx);
    font-optical-sizing:auto; }
.rankcard__for { font-family:var(--mono); font-size:var(--t-mono); text-transform:uppercase;
    letter-spacing:0.08em; color:var(--gold); margin-top:3px; }
.rankcard__desc { font-size:var(--t-sm); color:var(--tx-2); line-height:1.6; margin-bottom:var(--s16); }
.rankcard__meta { display:flex; flex-wrap:wrap; gap:var(--s8) var(--s16); align-items:center;
    margin-bottom:var(--s16); font-size:var(--t-xs); color:var(--tx-3); }
.rankcard__meta b { color:var(--tx); }

/* ── 11. PROS / CONS ──────────────────────────────────────────── */
.pc { display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); }
.pc__col { border:1px solid var(--bd); border-radius:var(--r-md); overflow:hidden; }
.pc__h { display:flex; align-items:center; gap:var(--s8); padding:10px var(--s16);
    font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.pc__h svg { width:15px; height:15px; }
.pc--pro .pc__h { background:var(--pro-bg); color:var(--pro); }
.pc--con .pc__h { background:var(--con-bg); color:var(--con); }
.pc__col ul { list-style:none; padding:var(--s12) var(--s16); }
.pc__col li { position:relative; padding:7px 0 7px var(--s20); font-size:var(--t-sm);
    color:var(--tx-2); line-height:1.5; border-bottom:1px solid var(--bd); }
.pc__col li:last-child { border-bottom:none; }
.pc__col li::before { position:absolute; left:0; top:7px; font-family:var(--mono); font-weight:700; }
.pc--pro li::before { content:'+'; color:var(--pro); }
.pc--con li::before { content:'–'; color:var(--con); }

/* ── 12. COMPARISON TABLE ─────────────────────────────────────── */
.tablewrap { overflow-x:auto; border:1px solid var(--bd); border-radius:var(--r-lg); background:var(--bg-2);
    -webkit-overflow-scrolling:touch; }
table.cmp { width:100%; border-collapse:collapse; font-size:var(--t-sm); min-width:560px; }
table.cmp th { text-align:left; padding:var(--s12) var(--s16); font-family:var(--mono);
    font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--tx-3); border-bottom:1px solid var(--bd-2); white-space:nowrap; background:rgba(255,255,255,0.012); }
table.cmp td { padding:var(--s12) var(--s16); color:var(--tx-2); border-bottom:1px solid var(--bd);
    vertical-align:top; }
table.cmp tr:last-child td { border-bottom:none; }
table.cmp tr:hover td { background:rgba(255,255,255,0.018); }
table.cmp td b, table.cmp th.lead-col { color:var(--tx); }
table.cmp .num { font-variant-numeric:tabular-nums; white-space:nowrap; }
table.cmp .win { color:var(--gold); font-weight:600; }
.cmp-note { display:block; font-size:0.7rem; color:var(--tx-4); margin-top:2px; }

/* ── 13. VERDICT / TL;DR ──────────────────────────────────────── */
.verdict { position:relative; border:1px solid var(--gold-line); border-radius:var(--r-lg);
    padding:var(--s32); background:linear-gradient(180deg, rgba(226,179,92,0.06), var(--bg-2));
    box-shadow:var(--inset); }
.verdict__tag { display:inline-flex; align-items:center; gap:var(--s8); font-family:var(--mono);
    font-size:var(--t-mono); font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
    color:var(--gold); margin-bottom:var(--s16); }
.verdict__tag svg { width:14px; height:14px; }
.verdict p { font-size:var(--t-lead); line-height:1.55; color:var(--tx); font-weight:450; }
.verdict p b { color:var(--gold); font-weight:600; }
.verdict p + p { margin-top:var(--s12); }

/* ── 14. CALLOUT ──────────────────────────────────────────────── */
.callout { border:1px solid var(--bd); border-left:2px solid var(--gold); border-radius:var(--r-md);
    background:var(--bg-2); padding:var(--s16) var(--s20); }
.callout--warn { border-left-color:var(--warn); }
.callout__h { display:flex; align-items:center; gap:var(--s8); font-size:var(--t-sm); font-weight:600;
    color:var(--tx); margin-bottom:6px; }
.callout__h svg { width:16px; height:16px; flex-shrink:0; color:var(--gold); }
.callout--warn .callout__h svg { color:var(--warn); }
.callout p { font-size:var(--t-sm); color:var(--tx-2); line-height:1.6; }

/* Pull-quote — editorial */
.pquote { font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,1.1rem+1.4vw,1.9rem);
    line-height:1.3; letter-spacing:-0.01em; color:var(--tx); border-left:2px solid var(--gold);
    padding-left:var(--s24); margin:var(--s40) 0; max-width:32ch; }

/* ── 15. METHODOLOGY / META STRIP ─────────────────────────────── */
.artmeta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s8) var(--s16);
    font-size:var(--t-xs); color:var(--tx-3); font-family:var(--mono); }
.artmeta .dot { width:3px; height:3px; border-radius:50%; background:var(--tx-4); }
.artmeta b { color:var(--tx-2); font-weight:500; }
.author { display:inline-flex; align-items:center; gap:var(--s8); }
.author__av { width:24px; height:24px; border-radius:var(--r-full); background:var(--bg-3);
    border:1px solid var(--bd-2); display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-size:0.7rem; color:var(--gold); }

/* ── 16. CARDS / LINKS GRID ───────────────────────────────────── */
.cardgrid { display:grid; gap:var(--s16); }
.cardgrid--2 { grid-template-columns:repeat(2,1fr); }
.cardgrid--3 { grid-template-columns:repeat(3,1fr); }
.lcard { display:flex; flex-direction:column; gap:var(--s12); padding:var(--s24);
    border:1px solid var(--bd); border-radius:var(--r-lg); background:var(--bg-2);
    box-shadow:var(--inset); transition:border-color var(--norm) ease, transform var(--norm) var(--ease); }
.lcard:hover { border-color:var(--bd-3); transform:translateY(-2px); }
.lcard__tag { font-family:var(--mono); font-size:var(--t-mono); text-transform:uppercase;
    letter-spacing:0.1em; color:var(--gold); }
.lcard__t { font-family:var(--display); font-size:1.22rem; font-weight:600; line-height:1.18;
    color:var(--tx); letter-spacing:-0.01em; }
.lcard__d { font-size:var(--t-sm); color:var(--tx-2); line-height:1.55; flex:1; }
.lcard__more { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:600;
    color:var(--gold); margin-top:var(--s4); }
.lcard__more svg { width:14px; height:14px; transition:transform var(--fast) var(--ease); }
.lcard:hover .lcard__more svg { transform:translateX(3px); }

/* ── 17. NEWSLETTER ───────────────────────────────────────────── */
.signup { display:flex; gap:var(--s8); max-width:440px; }
.signup input { flex:1; padding:12px var(--s16); background:rgba(255,255,255,0.03);
    border:1px solid var(--bd-2); border-radius:var(--r-sm); color:var(--tx); font-size:var(--t-sm);
    outline:none; transition:border-color var(--fast) ease, box-shadow var(--fast) ease; }
.signup input::placeholder { color:var(--tx-4); }
.signup input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-subtle); }

/* ── 18. FOOTER ───────────────────────────────────────────────── */
.foot { border-top:1px solid var(--bd); padding:var(--s64) 0 var(--s48); margin-top:var(--s96); }
.foot__top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s48); margin-bottom:var(--s48); }
.foot__brand .brand { margin-bottom:var(--s16); }
.foot__tag { font-size:var(--t-sm); color:var(--tx-3); line-height:1.6; max-width:38ch; }
.foot__col h4 { font-family:var(--mono); font-size:var(--t-mono); text-transform:uppercase;
    letter-spacing:0.1em; color:var(--tx-3); margin-bottom:var(--s16); font-weight:600; }
.foot__col a { display:block; font-size:var(--t-sm); color:var(--tx-2); padding:5px 0;
    transition:color var(--fast) ease; }
.foot__col a:hover { color:var(--gold); }
.foot__bot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s16);
    padding-top:var(--s24); border-top:1px solid var(--bd); font-size:var(--t-xs); color:var(--tx-4); }
.foot__bot a { color:var(--tx-3); }
.foot__bot a:hover { color:var(--gold); }
.foot__disc { max-width:62ch; line-height:1.6; }

/* ── 19. MOTION ───────────────────────────────────────────────── */
/* SEO-safe: content is visible by default. Reveal only arms when JS
   is present (html.js set by an inline head script), so no-JS / crawlers
   always see the content, and there is no flash-of-hidden. */
.js [data-reveal] { opacity:0; transform:translateY(20px);
    transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js [data-reveal].in { opacity:1; transform:none; }

/* ── 20. RESPONSIVE (mobile-first refinements) ────────────────── */
@media (max-width:980px) {
    .foot__top { grid-template-columns:1fr 1fr; gap:var(--s32); }
    .foot__brand { grid-column:1 / -1; }
    .cardgrid--3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px) {
    .nav__links { position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:stretch;
        gap:0; background:rgba(8,9,10,0.96); backdrop-filter:blur(18px); border-bottom:1px solid var(--bd);
        padding:var(--s8) var(--s16) var(--s16); transform:translateY(-8px); opacity:0; pointer-events:none;
        transition:opacity var(--fast) ease, transform var(--fast) var(--ease); }
    .nav__links.is-open { opacity:1; transform:none; pointer-events:auto; }
    .nav__link { padding:13px var(--s12); border-bottom:1px solid var(--bd); border-radius:0; }
    .nav__link:last-child { border-bottom:none; }
    .nav__toggle { display:flex; }
    .section { padding:var(--s64) 0; }
    .pc, .cardgrid--2, .cardgrid--3, .foot__top { grid-template-columns:1fr; }
    .rankcard { grid-template-columns:1fr; gap:var(--s12); }
    .rankcard__rank { width:auto; text-align:left; font-size:1.6rem; }
    .signup { flex-direction:column; }
    .pquote { padding-left:var(--s16); }
}
@media (max-width:480px) {
    .wrap { padding:0 var(--s16); }
}

/* ── 21. REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important;
        scroll-behavior:auto !important; }
    [data-reveal] { opacity:1; transform:none; }
}