/* ============================================================
   COLE'S BRICK MISSION — Dark, polished theme
   Rich dark surfaces, vivid LEGO accents, real depth & motion.
   Icons via CSS mask (Lucide). Professional, expressive.
   ============================================================ */

:root {
  --bg:     #15151A;
  --bg-2:   #1C1C23;
  --bg-3:   #23232B;
  --panel:  #1E1E26;
  --panel-2:#26262F;
  --ink:    #F6F5F2;
  --text:   #C8C7C3;
  --muted:  #8C8C96;

  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.17);

  --red:    #FF4D47; --red-d:#E23A34;
  --yellow: #FFC93C; --yellow-d:#E0AC1E;
  --blue:   #57A2FF;
  --green:  #57CB70;
  --purple: #A77BFF;

  --shadow: 0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7);

  --radius: 16px; --radius-sm: 12px; --radius-lg: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1120px;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  --font-head: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --s-0: clamp(1rem, .96rem + .2vw, 1.12rem);
  --s-1: clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --s-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --s-3: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
  --s-4: clamp(2.4rem, 1.8rem + 2.8vw, 3.9rem);
  --s-5: clamp(2.9rem, 2rem + 4.6vw, 5.2rem);
}

*,*::before,*::after { box-sizing:border-box; } * { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} }
body { font-family:var(--font-body); font-size:var(--s-0); line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
::selection { background: var(--red); color:#fff; }

/* Icons (inline Lucide SVG, colored via currentColor) */
.ico { display:inline-block; width:1.1em; height:1.1em; vertical-align:-.18em; flex:none; }
svg.ico { stroke:currentColor; }

/* Type */
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
h1 { font-size:var(--s-5); font-weight:700; }
h2 { font-size:var(--s-3); }
h3 { font-size:var(--s-1); }
p { color:var(--text); }
.lead { font-size:var(--s-1); color:var(--muted); line-height:1.55; font-weight:400; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.eyebrow::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--red); box-shadow: 14px 0 0 -1px var(--yellow); margin-right:14px; }

/* Layout */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block: clamp(3.5rem,8vw,7rem); position:relative; }
.section--tight { padding-block: clamp(2.5rem,5vw,4rem); }
.section--2 { background:var(--bg-2); }
.section--panel { background: linear-gradient(180deg,var(--bg-2),var(--bg)); }
.stack>*+* { margin-top:1.1rem; }
.center { text-align:center; } .measure { max-width:60ch; } .mx-auto { margin-inline:auto; }

/* Buttons */
.btn { --_bg:var(--panel-2); --_fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; font-family:var(--font-head); font-weight:600; font-size:var(--s-0);
  color:var(--_fg); background:var(--_bg); border:1.5px solid var(--line-2); border-radius:999px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn--brand { --_bg:var(--red); --_fg:#fff; border-color:transparent; box-shadow: 0 8px 24px -8px rgba(255,77,71,.5); }
.btn--brand:hover { --_bg:var(--red-d); box-shadow: 0 12px 30px -8px rgba(255,77,71,.6); }
.btn--gold { --_bg:var(--yellow); --_fg:#20200e; border-color:transparent; }
.btn--ghost { --_bg:transparent; --_fg:var(--ink); }
.btn--ghost:hover { border-color:var(--ink); background:rgba(255,255,255,.04); }
.btn--on-ink { --_bg:#fff; --_fg:#18181b; border-color:transparent; }
.btn--lg { padding:1.05rem 1.9rem; font-size:var(--s-1); }
.btn .ico { font-size:1.1em; }
.btn .arw { transition:transform .2s var(--ease); }
.btn:hover .arw { transform:translateX(3px); }

/* Header */
.site-header { position:sticky; top:0; z-index:60; background:rgba(21,21,26,.72); backdrop-filter:saturate(140%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s,background .3s; }
.site-header.is-stuck { border-bottom-color:var(--line); background:rgba(21,21,26,.9); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1.3rem; padding-block:1rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:var(--ink); }
.brand__mark { width:34px; height:34px; flex:none; }
.brand em { font-style:normal; color:var(--red); }
.brand .pixlabel { display:none; }
.nav__links { display:flex; align-items:center; gap:1.7rem; list-style:none; padding:0; }
.nav__links a { font-family:var(--font-head); font-weight:500; font-size:.98rem; color:var(--text); position:relative; padding:.3rem 0; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--red); transition:width .25s var(--ease); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after { width:100%; }
.nav__links a[aria-current="page"] { color:var(--ink); }
.nav__actions { display:flex; align-items:center; gap:.7rem; }
.nav__toggle { display:none; width:44px; height:44px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--panel); place-items:center; }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after { content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:transform .3s var(--ease),opacity .2s; }
.nav__toggle span::before{position:absolute;top:-6px}.nav__toggle span::after{position:absolute;top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:880px){
  .nav__toggle{display:grid}
  .nav__links,.nav__actions .btn--ghost{display:none}
  .nav__panel{position:fixed;inset:72px var(--gutter) auto;z-index:55;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.8rem;display:grid;gap:.2rem;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
  .nav__panel.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav__panel a{padding:.8rem 1rem;border-radius:10px;font-family:var(--font-head);font-weight:500}
  .nav__panel a:hover{background:var(--panel-2)}
  .nav__panel .btn{width:100%;margin-top:.3rem}
}

/* Hero */
.hero { position:relative; padding-block: clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:-30% -10% auto auto; width:70vw; max-width:820px; aspect-ratio:1; z-index:0; background: radial-gradient(closest-side, rgba(255,77,71,.16), transparent 70%); }
.hero::after { content:""; position:absolute; inset:auto auto -30% -10%; width:60vw; max-width:680px; aspect-ratio:1; z-index:0; background: radial-gradient(closest-side, rgba(255,201,60,.12), transparent 70%); }
.hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr; text-align:center} }
.hero h1 { margin:.8rem 0 1.2rem; }
.hero h1 .hl { color:var(--red); }
.hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
@media (max-width:900px){ .hero__cta,.hero .eyebrow{justify-content:center} }

/* Big balanced stats */
.stats { display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }
@media (max-width:900px){ .stats{justify-content:center} }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1.25rem; min-width:120px; }
.stat b { display:block; font-family:var(--font-head); font-weight:700; font-size: clamp(1.9rem,3.2vw,2.6rem); line-height:1; color:var(--ink); }
.stat span { font-size:.82rem; color:var(--muted); margin-top:.3rem; display:block; }

/* Hero art */
.hero__art { position:relative; display:grid; place-items:center; min-height:300px; }
.hero__bricks { display:flex; align-items:flex-end; gap:1rem; }
.hero__bricks img { filter: drop-shadow(0 16px 22px rgba(0,0,0,.5)); }
.float { animation: float 5s var(--ease) infinite; } .float-2 { animation: float 6s var(--ease) infinite; animation-delay:-1.5s; } .float-3 { animation: float 7s var(--ease) infinite; animation-delay:-3s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-14px) rotate(3deg)} }

/* Challenge chip (cycling) with shuffle */
.chip-card { background:var(--panel); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow); padding:1.1rem 1.2rem; max-width:340px; width:100%; text-align:center; position:relative; }
.chip-card__brand { font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.chip-card__label { font-size:.78rem; color:var(--muted); margin-top:.35rem; }
.chip-card__prompt { font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--ink); margin:.4rem 0 .6rem; min-height:2.3em; display:flex; align-items:center; justify-content:center; gap:.5rem; transition:opacity .3s var(--ease); }
.chip-card__prompt .ico { color:var(--yellow); font-size:1.3em; }
.chip-card__foot { font-size:.72rem; color:var(--muted); border-top:1px dashed var(--line-2); padding-top:.55rem; }
.shuffle-btn { position:absolute; top:-14px; right:-14px; width:44px; height:44px; border-radius:50%; background:var(--yellow); color:#20200e; border:none; display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .3s var(--ease); }
.shuffle-btn:hover { transform:rotate(90deg) scale(1.08); }
.shuffle-btn .ico { font-size:1.3rem; }

/* brick bullet list */
.brick-list { list-style:none; padding:0; display:grid; gap:.85rem; }
.brick-list li { display:flex; gap:.7rem; align-items:flex-start; font-weight:500; color:var(--text); }
.brick-list li::before { content:""; flex:none; width:18px; height:14px; margin-top:5px; border-radius:3px; background:var(--red); box-shadow: 0 -4px 0 -1px var(--red), 6px -4px 0 -1px var(--red); }

/* Steps */
.steps { display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .steps{grid-template-columns:1fr} }
.step { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.step:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.step__ic { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem; background:rgba(255,255,255,.06); color:var(--red); font-size:1.5rem; }
.step__ic .ico { width:26px; height:26px; }
.step h3 { margin-bottom:.5rem; }
.step p { color:var(--muted); font-size:.98rem; }
.step__num { font-family:var(--font-head); font-weight:700; color:var(--yellow); font-size:.82rem; letter-spacing:.08em; }

/* Cards (tilt-ready) */
.cards-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .cards-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .cards-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cards-grid{grid-template-columns:1fr} }
.mcard { --a:var(--red); position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; display:grid; grid-template-rows:auto auto 1fr auto; gap:.5rem; min-height:210px; transition:transform .18s var(--ease), box-shadow .25s var(--ease), border-color .25s; overflow:hidden; transform-style:preserve-3d; }
.mcard::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--a); }
.mcard::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--a) 16%,transparent), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; }
.mcard:hover { box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--a) 55%,var(--line-2)); }
.mcard:hover::after { opacity:1; }
.mcard__top { display:flex; align-items:center; justify-content:space-between; }
.mcard__no { font-family:var(--font-head); font-weight:600; font-size:.78rem; color:var(--muted); letter-spacing:.05em; }
.mcard__ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--a); }
.mcard__ic .ico { width:20px; height:20px; }
.mcard__label { font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--a); font-weight:600; }
.mcard__prompt { font-family:var(--font-head); font-weight:600; font-size:1.12rem; line-height:1.14; color:var(--ink); }
.mcard__cta { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--a); margin-top:.2rem; }
.mcard__cta .arw { transition:transform .2s var(--ease); }
.mcard:hover .mcard__cta .arw { transform:translateX(4px); }
.mcard--ghost { display:grid; place-items:center; text-align:center; background:var(--bg-2); border-style:dashed; }

/* Category filter + grid */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.filter { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); color:var(--text); font-family:var(--font-head); font-weight:500; font-size:.88rem; transition:background .2s,color .2s,border-color .2s; }
.filter .ico { width:16px; height:16px; color:var(--muted); }
.filter:hover { border-color:var(--ink); }
.filter[aria-pressed="true"] { background:var(--red); color:#fff; border-color:transparent; }
.filter[aria-pressed="true"] .ico { color:#fff; }

.cats { display:grid; gap:1rem; grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .cats{grid-template-columns:repeat(2,1fr)} }
.cat { position:relative; display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; overflow:hidden; }
.cat:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--a,var(--red)) 50%,var(--line-2)); }
.cat__bar { position:absolute; inset:0 0 auto; height:4px; background:var(--a,var(--red)); }
.cat__ic { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--a,var(--red)); }
.cat__ic .ico { width:24px; height:24px; }
.cat__name { font-family:var(--font-head); font-weight:600; color:var(--ink); margin-top:.7rem; line-height:1.15; }
.cat__count { font-size:.82rem; color:var(--muted); margin-top:.35rem; }

/* Gallery */
.gallery { columns:3 240px; column-gap:1.1rem; }
.gallery figure { break-inside:avoid; margin:0 0 1.1rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.gallery figure img { width:100%; }
.gallery__ph { display:grid; place-items:center; aspect-ratio:4/5; background:var(--bg-3); color:var(--muted); font-size:2.4rem; }
.gallery__ph .ico { width:48px; height:48px; }

/* Empty state */
.empty { text-align:center; padding:3rem 1.2rem; border:1px dashed var(--line-2); border-radius:var(--radius-lg); background:var(--panel); }
.empty__ic { width:56px; height:56px; margin:0 auto; display:grid; place-items:center; color:var(--muted); }
.empty__ic .ico { width:44px; height:44px; }

/* Side mission / timer */
.sm-card { background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.6rem); box-shadow:var(--shadow-lg); }
.timer-wrap { text-align:center; }
.timer__label { font-family:var(--font-head); font-weight:600; color:var(--yellow); font-size:.9rem; margin-bottom:.6rem; }
.timer__display { font-family:var(--font-head); font-weight:700; font-variant-numeric:tabular-nums; font-size:clamp(3rem,12vw,5rem); line-height:1; color:var(--ink); }
.timer__display.running { color:var(--green); }
.timer__dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); margin-right:.4rem; animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Tabs */
.tabs { display:inline-flex; gap:.3rem; padding:.3rem; background:var(--panel); border:1px solid var(--line-2); border-radius:999px; }
.tab { border:0; background:transparent; padding:.55rem 1.1rem; border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--muted); }
.tab[aria-selected="true"]{ background:var(--red); color:#fff; }

/* Leaderboard */
.lb-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; margin-bottom:1.1rem; }
.lb-card__head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.lb-card__ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--yellow); }
.lb-card__ic .ico{width:22px;height:22px}
.lb-card__title { font-family:var(--font-head); font-weight:600; color:var(--ink); }
.lb-card__sub { font-size:.8rem; color:var(--muted); }
.lb-row { display:grid; grid-template-columns:44px 1fr auto auto; gap:.9rem; align-items:center; padding:.85rem 1.2rem; border-top:1px solid var(--line); }
.lb-row:first-child{border-top:0}
.lb-rank { font-family:var(--font-head); font-weight:700; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bg-3); color:var(--text); }
.lb-rank.r1{background:var(--yellow);color:#20200e}.lb-rank.r2{background:#C9CBD1;color:#23232b}.lb-rank.r3{background:#D9925A;color:#20200e}
.lb-name{font-family:var(--font-head);font-weight:600;color:var(--ink)}
.lb-time{font-family:var(--font-head);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;font-size:.76rem;font-weight:600;font-family:var(--font-head);border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);white-space:nowrap}
.badge .ico{width:14px;height:14px}
.badge.t-legendary{color:var(--yellow)}.badge.t-expert{color:var(--blue)}.badge.t-builder{color:var(--green)}.badge.t-rookie{color:var(--muted)}
@media (max-width:560px){.lb-row{grid-template-columns:34px 1fr auto}.lb-row .badge{grid-column:2/-1;justify-self:start}}

/* Achievement tiers */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:820px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.tiers{grid-template-columns:1fr}}
.tier { text-align:center; padding:1.6rem 1rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); transition:transform .25s var(--ease),border-color .25s; }
.tier:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.tier__ic{ width:52px;height:52px;margin:0 auto;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.05); }
.tier__ic .ico{width:28px;height:28px}
.tier.t-rookie .tier__ic{color:var(--muted)} .tier.t-builder .tier__ic{color:var(--green)} .tier.t-expert .tier__ic{color:var(--blue)} .tier.t-legendary .tier__ic{color:var(--yellow)}
.tier__name{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:.7rem 0 .35rem;font-size:1.05rem}
.tier p{color:var(--muted);font-size:.88rem}

/* FAQ */
.faq { display:grid; gap:.7rem; max-width:760px; margin-inline:auto; }
.faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); padding:.2rem 1.3rem; }
.faq details[open]{ border-color:var(--line-2); }
.faq summary { list-style:none; cursor:pointer; padding:1.1rem 0; font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:1.06rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:22px;height:22px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;inset:50% 2px auto;height:2px;background:var(--ink);transition:transform .25s var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq p{padding:0 0 1.1rem;color:var(--muted)}

/* CTA band */
.cta-band { border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--red),#c62f2a); color:#fff; padding:clamp(2.2rem,5vw,3.8rem); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.cta-band h2{color:#fff} .cta-band p{color:rgba(255,255,255,.9)}
.cta-band .brick-deco{position:absolute;opacity:.95;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}

/* Featured strip (replaces marquee) */
.featured { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.fmark { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; background:var(--panel); border:1px solid var(--line); font-family:var(--font-head); font-weight:500; font-size:.9rem; color:var(--text); }
.fmark .ico{ width:16px; height:16px; color:var(--yellow); }

/* very-slow, subtle marquee (if used) */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2)}
.marquee__track{display:flex;gap:2.4rem;padding:.9rem 0;white-space:nowrap;width:max-content;animation:marquee 90s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--font-head);font-weight:500;color:var(--muted);font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem}
.marquee__item .ico{width:16px;height:16px;color:var(--yellow)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Footer */
.site-footer { background:#101014; color:#8C8C96; padding-block:clamp(3rem,6vw,4.5rem) 1.8rem; border-top:1px solid var(--line); }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; }
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:var(--ink);font-family:var(--font-head);font-size:.95rem;margin-bottom:1rem}
.site-footer a{color:#8C8C96;display:block;padding:.32rem 0;font-family:var(--font-head);font-weight:400}
.site-footer a:hover{color:var(--ink)}
.footer__brand p{color:#8C8C96;max-width:34ch;margin-top:.8rem}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:2.2rem;padding-top:1.4rem;font-size:.82rem;color:#6E6E78}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="2"]{transition-delay:.09s}[data-reveal="3"]{transition-delay:.18s}[data-reveal="4"]{transition-delay:.27s}

/* Utilities */
.pill { display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--text); }
.pill .ico{width:15px;height:15px;color:var(--yellow)}
.divider{height:1px;background:var(--line);border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.sr-only:focus{position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;margin:0;padding:.7rem 1rem;clip:auto;background:#fff;color:#18181b;border-radius:10px;font-weight:600}