/* =========================================================
   BATTLE ALPHA — Stocks, Markets & Personal Finance
   Design tokens
   ========================================================= */
:root{
  /* Light, editorial finance surface */
  --bg:            #F5F7F9;
  --bg-raised:     #FFFFFF;
  --bg-raised-2:   #EEF2F5;
  --border:        #E1E7EC;
  --border-soft:   #EAEEF1;

  --text:          #0F1B2D;
  --text-muted:    #55636F;
  --text-faint:    #8592A0;

  --accent:        #0F7A52;   /* emerald — links, buttons, "gain" tone */
  --accent-hover:  #0C6744;
  --accent-bright: #12A26B;   /* brighter emerald — decorative use on dark surfaces */
  --accent-ink:    #FFFFFF;   /* text on accent-filled buttons */

  --navy:          #0B2545;   /* brand navy — logo, utility bar, footer */

  --alert:         #B3271F;   /* breaking / "loss" tone, AA on white */
  --alert-bg:      rgba(179,39,31,0.09);

  --cat-stocks:      #1D6FA5;
  --cat-markets:     #2C5F7A;
  --cat-crypto:      #B8720C;
  --cat-personal:    #1B7A72;
  --cat-commodities: #96631E;
  --cat-policy:      #6A4C93;

  /* Dedicated tokens for the always-dark bands (ticker + footer) */
  --dark-bg:        #0B2545;
  --dark-bg-2:      #0E2E56;
  --dark-border:    #1B3A63;
  --dark-text:      #E9EEF3;
  --dark-text-muted:#9DAFC2;

  --shadow-sm: 0 1px 2px rgba(15,27,45,0.05), 0 1px 1px rgba(15,27,45,0.04);
  --shadow-md: 0 8px 24px rgba(15,27,45,0.08), 0 2px 6px rgba(15,27,45,0.05);

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  margin:0 0 0.5em;
  color:var(--text);
}
p{ margin:0 0 1em; }

/* Respect users who've asked for less motion — also cheaper on mobile batteries */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
}

/* =========================================================
   BACKGROUND GRID TEXTURE (signature ambient device)
   ========================================================= */
.grid-texture{
  position:relative;
  background-image:
    radial-gradient(ellipse 1400px 700px at 50% 0%, rgba(11,37,69,0) 0%, var(--bg) 78%),
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:auto, 40px 40px, 40px 40px;
  background-position:center top, center top, center top;
  background-repeat:no-repeat, repeat, repeat;
}
@media (max-width:640px){
  .grid-texture{
    background-image:radial-gradient(ellipse 1400px 700px at 50% 0%, rgba(11,37,69,0) 0%, var(--bg) 78%);
    background-size:auto;
    background-position:center top;
    background-repeat:no-repeat;
  }
}

/* =========================================================
   TOP BAR / SITREP TICKER  (signature element)
   ========================================================= */
.sitrep{
  background:var(--dark-bg);
  border-bottom:1px solid var(--dark-border);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:12.5px;
}
.sitrep-inner{
  display:flex;
  align-items:center;
  height:34px;
}
.sitrep-label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  height:100%;
  background:rgba(232,131,122,0.14);
  color:#E8837A;
  border-right:1px solid var(--dark-border);
  text-transform:uppercase;
  letter-spacing:0.08em;
  white-space:nowrap;
}
.sitrep-dot{
  width:6px; height:6px; border-radius:50%;
  background:#E8837A;
  animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; }
  50%{ opacity:0.25; }
}
.sitrep-track-wrap{
  flex:1 1 auto;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.sitrep-track{
  display:inline-block;
  padding-left:100%;
  animation:ticker 38s linear infinite;
  color:var(--dark-text-muted);
}
.sitrep-track a{ color:var(--dark-text); text-decoration:none; }
.sitrep-track a:hover{ color:var(--accent-bright); text-decoration:underline; }
.sitrep-track .sep{ color:var(--accent-bright); margin:0 18px; }
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .sitrep-track{ animation:none; padding-left:16px; }
  .sitrep-dot{ animation:none; }
}
/* Scrolling marquees are a common jank/battery cost on phones — freeze it there */
@media (max-width:640px){
  .sitrep-track{ animation:none; padding-left:16px; }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#FFFFFF;
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  display:flex;
  align-items:center;
}
.logo-img{
  height:34px;
  width:auto;
  display:block;
}
@media (max-width:400px){
  .logo-img{ height:28px; }
}
.main-nav ul{ display:flex; gap:2px; }
.main-nav a{
  display:block;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  transition:color .15s, background .15s;
}
.main-nav a:hover, .main-nav a.active{
  color:var(--text);
  background:var(--bg-raised-2);
}
.main-nav a.active{ color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.btn-search{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  background:transparent;
  cursor:pointer;
}
.btn-search:hover{ color:var(--text); border-color:var(--accent); }

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--border);
  background:transparent;
  border-radius:var(--radius-sm);
  color:var(--text);
  cursor:pointer;
}

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:72px 0 0 0;
    background:var(--bg);
    padding:14px 20px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s, transform .18s;
    overflow-y:auto;
  }
  .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav a{ padding:14px 6px; border-bottom:1px solid var(--border-soft); border-radius:0; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:56px 0 48px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px;
}
.hero-lead{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-raised);
  box-shadow:var(--shadow-md);
}
.hero-lead-media{
  height:280px;
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(201,162,39,0.16), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px),
    linear-gradient(200deg,#1A2530,#0F161D);
  border-bottom:1px solid var(--border);
}
@media (max-width:640px){
  /* Repeating gradients are comparatively expensive to paint on mobile GPUs —
     drop that layer on small screens and keep the cheaper flat look. */
  .hero-lead-media{
    background:
      radial-gradient(circle at 30% 20%, rgba(201,162,39,0.16), transparent 55%),
      linear-gradient(200deg,#1A2530,#0F161D);
  }
}
.hero-lead-media svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-lead-body{ padding:26px 30px 30px; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:2px;
  border:1px solid currentColor;
}
.tag-stocks{ color:var(--cat-stocks); }
.tag-markets{ color:var(--cat-markets); }
.tag-crypto{ color:var(--cat-crypto); }
.tag-personal{ color:var(--cat-personal); }
.tag-commodities{ color:var(--cat-commodities); }
.tag-policy{ color:var(--cat-policy); }
.tag-breaking{ color:var(--alert); background:var(--alert-bg); border-color:var(--alert); }

.hero-lead-body h1{
  font-size:clamp(28px,3.4vw,40px);
  margin:14px 0 10px;
}
.hero-lead-body .dek{ color:var(--text-muted); font-size:16px; max-width:60ch; }
.byline{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-faint);
  margin-top:16px;
}

.hero-side{ display:flex; flex-direction:column; gap:0; }
.side-panel-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:14px;
}
.side-list{ display:flex; flex-direction:column; }
.side-item{
  display:flex; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--border-soft);
}
.side-item:first-child{ padding-top:0; }
.side-item-index{
  font-family:var(--font-mono);
  color:var(--accent);
  font-size:13px;
  flex:0 0 22px;
}
.side-item h4{ font-size:15px; margin:0 0 4px; }
.side-item h4 a:hover{ color:var(--accent); }
.side-item .meta{ font-size:12px; color:var(--text-faint); font-family:var(--font-mono); }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section{ padding:44px 0; border-top:1px solid var(--border-soft); }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:26px;
  flex-wrap:wrap;
  gap:10px;
}
.section-head h2{ font-size:26px; }
.section-head .view-all{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--accent);
  text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.section-head .view-all:hover{ border-color:var(--accent); }

/* =========================================================
   ARTICLE CARDS
   ========================================================= */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-raised);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover:hover){
  .card:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
}
.card-media{
  height:150px;
  background:
    radial-gradient(circle at 70% 20%, rgba(127,168,201,0.14), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 24px),
    linear-gradient(200deg,#1A2530,#0F161D);
  border-bottom:1px solid var(--border);
}
@media (max-width:640px){
  /* Same reasoning as .hero-lead-media — this pattern repeats across many
     cards per page, so the saving compounds on long mobile scroll pages. */
  .card-media{
    background:
      radial-gradient(circle at 70% 20%, rgba(127,168,201,0.14), transparent 60%),
      linear-gradient(200deg,#1A2530,#0F161D);
  }
}
.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-body h3{ font-size:18px; }
.card-body h3 a:hover{ color:var(--accent); }
.card-excerpt{ color:var(--text-muted); font-size:14px; margin:0; }
.card-meta{
  margin-top:auto;
  padding-top:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-faint);
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--border-soft);
}

@media (max-width:960px){
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .card-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   NEWSLETTER / CTA STRIP
   ========================================================= */
.cta-strip{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:34px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cta-strip h3{ font-size:22px; margin:0 0 6px; }
.cta-strip p{ margin:0; color:var(--text-muted); font-size:14px; }
.cta-form{ display:flex; gap:10px; flex-wrap:wrap; }
.input{
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:11px 14px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:14px;
  min-width:230px;
}
.input:focus{ border-color:var(--accent); }
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:1px solid var(--accent);
  cursor:pointer;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   AD SLOTS
   ========================================================= */
.ad-slot{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  background:var(--bg-raised);
  color:var(--text-faint);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
  margin:30px 0;
  text-align:center;
  padding:10px;
}

/* =========================================================
   ARTICLE PAGE
   ========================================================= */
.article-head{ padding:44px 0 28px; }
.article-head h1{ font-size:clamp(28px,4vw,44px); margin:16px 0; }
.article-meta{
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px; color:var(--text-faint);
  padding-bottom:22px;
  border-bottom:1px solid var(--border-soft);
}
.article-body{
  max-width:760px;
  font-size:17.5px;
  line-height:1.75;
  color:#2B333B;
}
.article-body h2{ font-size:24px; margin-top:1.6em; color:var(--text); }
.article-body h3{ font-size:19px; margin-top:1.4em; color:var(--text); }
.article-body p{ margin-bottom:1.3em; }
.article-body blockquote{
  margin:1.8em 0;
  padding:4px 0 4px 20px;
  border-left:3px solid var(--accent);
  color:var(--text-muted);
  font-style:italic;
}
.article-body ul, .article-body ol{ margin:0 0 1.3em 1.3em; }
.article-body li{ margin-bottom:0.5em; }
.article-body figure{ margin:1.8em 0; }
.article-body figcaption{
  font-family:var(--font-mono);
  font-size:12px; color:var(--text-faint); margin-top:8px;
}
.article-layout{ display:grid; grid-template-columns:1fr 300px; gap:40px; }
.article-sidebar{ display:flex; flex-direction:column; gap:30px; }
.sidebar-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  background:var(--bg-raised);
}
.sidebar-box h4{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:14px;
}
.tags-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.author-box{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-top:36px; background:var(--bg-raised);
}
.author-avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(160deg,#3A4C5A,#1A2530);
  flex:0 0 auto;
  border:1px solid var(--border);
}
.author-box h4{ margin:0 0 4px; font-size:15px; }
.author-box p{ margin:0; color:var(--text-muted); font-size:13.5px; }

@media (max-width:900px){
  .article-layout{ grid-template-columns:1fr; }
}

/* =========================================================
   EDUCATION / VIGNETTE QUIZ
   ========================================================= */
.quiz-question{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-raised);
  box-shadow:var(--shadow-sm);
  padding:20px 22px;
  margin-bottom:18px;
}
.quiz-question-text{
  font-weight:600;
  color:var(--text);
  font-size:16px;
  margin-bottom:14px;
}
.quiz-options{ display:flex; flex-direction:column; gap:2px; }
.quiz-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  font-size:15px;
  color:var(--text-muted);
  cursor:pointer;
  transition:background .12s;
}
.quiz-option:hover{ background:var(--bg-raised-2); }
.quiz-option input{ margin-top:3px; flex:0 0 auto; }
.quiz-option span{ line-height:1.5; }

/* State classes applied by JS after checking */
.quiz-option.is-correct{ background:rgba(15,122,82,0.08); color:var(--accent); font-weight:600; }
.quiz-option.is-incorrect{ background:var(--alert-bg); color:var(--alert); font-weight:600; }
.quiz-question fieldset[disabled] .quiz-option,
.quiz-options.is-locked .quiz-option{ cursor:default; }

.quiz-feedback{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.quiz-feedback-verdict{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.quiz-feedback-verdict.correct{ color:var(--accent); }
.quiz-feedback-verdict.incorrect{ color:var(--alert); }
.quiz-feedback-explanation{
  font-size:14.5px;
  color:var(--text-muted);
  margin:0;
}
.quiz-score-banner{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-raised-2);
  padding:16px 20px;
  margin-bottom:20px;
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--text);
}

/* =========================================================
   TEAM PROFILES (About page)
   ========================================================= */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.team-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-raised);
  box-shadow:var(--shadow-sm);
  padding:22px;
  text-align:center;
}
.team-card-photo{
  width:84px; height:84px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 14px;
  display:block;
  border:1px solid var(--border);
}
.team-card-initials{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised-2);
  font-family:var(--font-mono);
  font-size:20px;
  color:var(--text-faint);
}
.team-card h4{ font-size:16px; margin:0 0 2px; }
.team-card-role{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
  margin:0 0 12px;
}
.team-card-bio{
  font-size:14px;
  color:var(--text-muted);
  margin:0 0 12px;
  text-align:left;
}
.team-card-linkedin{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.team-card-linkedin:hover{ color:var(--accent); }

@media (max-width:820px){
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .team-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   GENERIC PAGE (about / contact / legal)
   ========================================================= */
.page-head{ padding:50px 0 30px; border-bottom:1px solid var(--border-soft); }
.page-head h1{ font-size:clamp(28px,4vw,42px); }
.page-head p{ color:var(--text-muted); max-width:65ch; }
.prose{ max-width:820px; font-size:16px; color:#2B333B; }
.prose h2{ font-size:22px; margin-top:1.8em; color:var(--text); }
.prose h3{ font-size:17px; margin-top:1.4em; }
.prose ul{ margin:0 0 1.2em 1.3em; }
.prose li{ margin-bottom:0.5em; }
.prose a{ color:var(--accent); border-bottom:1px solid rgba(15,122,82,0.3); }
.prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:14px; }
.prose th,.prose td{ text-align:left; padding:10px 12px; border:1px solid var(--border); }
.prose th{ background:var(--bg-raised); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.form-group{ margin-bottom:18px; }
.form-group label{
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint);
}
.form-group textarea, .form-group input{ width:100%; }
.form-group textarea{ min-height:140px; resize:vertical; }
.form-note{ font-size:13px; color:var(--text-faint); margin-top:8px; }

.info-list{ display:flex; flex-direction:column; gap:18px; }
.info-list .item{ display:flex; gap:14px; }
.info-list .icon{
  width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.info-list h4{ margin:0 0 3px; font-size:15px; }
.info-list p{ margin:0; color:var(--text-muted); font-size:14px; }

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   COOKIE / CONSENT BANNER
   ========================================================= */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px;
  max-width:560px;
  margin:0 auto;
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  box-shadow:var(--shadow-md);
  z-index:200;
  display:none;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ margin:0; font-size:13.5px; color:var(--text-muted); flex:1 1 260px; }
.cookie-banner .actions{ display:flex; gap:10px; }
.cookie-banner a{ color:var(--accent); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--dark-border);
  background:var(--dark-bg);
  color:var(--dark-text-muted);
  padding:50px 0 24px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:34px;
}
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand .logo-img{ height:38px; }
.footer-brand p{ color:var(--dark-text-muted); font-size:13.5px; max-width:34ch; }
.footer-col h5{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--dark-text-muted); margin-bottom:14px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:9px; }
.footer-col a{ color:var(--dark-text-muted); font-size:14px; }
.footer-col a:hover{ color:var(--accent-bright); }
.footer-bottom{
  border-top:1px solid var(--dark-border);
  padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--dark-text-muted);
}
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:32px; height:32px; border:1px solid var(--dark-border); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; color:var(--dark-text-muted);
}
.social-row a:hover{ color:var(--accent-bright); border-color:var(--accent-bright); }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}