/* Blue fintech palette: trustworthy blue brand, cool canvas, deep-navy footer — harmonized with the oak logo. */
:root {
  --bg: #eef4fb;
  --surface: #ffffff;
  --surface-2: #e4eefb;
  --text: #15212e;
  --muted: #56657a;
  --line: #d8e6f2;
  --brand: #1f6fd0;
  --brand-2: #0f3d6e;
  --accent: #2f7fe0;
  --footer-bg: #0b2138;
  --anchor-bg: #0b2138;
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(15,40,80,0.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden turns html/body into a scroll container, which
     silently disables every position:sticky descendant (the category strip). */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Header — pinned to the viewport with fixed positioning, and app.js keeps
   body padding-top in sync with the measured header height. The same
   measurement is published as --header-h so the sticky category strip parks
   exactly under it. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(237,243,250,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(15,40,80,0.08);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 17px; letter-spacing: 0.2px; line-height: 1.1; white-space: nowrap; }

/* Category menu: one horizontally scrollable nav, its expand button pinned
   to the nav's right edge, and the shared dropdown anchored beneath it. */
.nav-row {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { flex: 0 0 auto; color: var(--muted); font-weight: 600; font-size: 15px; }
.main-nav a:hover, .main-nav a.active { color: var(--text); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  cursor: pointer;
  flex: 0 0 auto;
}
.icon-btn:hover { border-color: var(--brand); background: var(--surface-2); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-expand { display: inline-flex; position: relative; overflow: hidden; } /* always reachable: Search/About/Contact live in the menu */
.nav-expand .hb { position: relative; display: block; width: 20px; height: 14px; }
.nav-expand .hb-bar {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), top .3s ease, opacity .2s ease;
}
.nav-expand .hb-bar:nth-child(1) { top: 0; }
.nav-expand .hb-bar:nth-child(2) { top: 6px; }
.nav-expand .hb-bar:nth-child(3) { top: 12px; }
.nav-expand[aria-expanded="true"] { border-color: var(--brand); background: var(--surface-2); color: var(--brand); }
.nav-expand[aria-expanded="true"] .hb-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-expand[aria-expanded="true"] .hb-bar:nth-child(2) { opacity: 0; }
.nav-expand[aria-expanded="true"] .hb-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }
/* Tap ripple — CSS effect fired on click (mobile-friendly) */
.nav-expand::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at center, rgba(31,111,208,.35), transparent 65%);
  opacity: 0; transform: scale(.4); pointer-events: none;
}
.nav-expand:active::after { animation: navRipple .5s ease-out; }
@keyframes navRipple { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }

/* Shared full menu: dropdown on desktop, hamburger panel on mobile. */
/* Shared full menu: dropdown on desktop, hamburger panel on mobile.
   Animated open: slides down + fades from the top-right, items stagger in. */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(280px, 80vw);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 10px;
  z-index: 80;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s linear .28s;
}
.nav-dropdown::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand);
}
.nav-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.25,1), visibility 0s;
}
.nav-dropdown.is-open a { animation: menuItemIn .34s both; }
.nav-dropdown.is-open a:nth-child(1) { animation-delay: .03s; }
.nav-dropdown.is-open a:nth-child(2) { animation-delay: .07s; }
.nav-dropdown.is-open a:nth-child(3) { animation-delay: .11s; }
.nav-dropdown.is-open a:nth-child(4) { animation-delay: .15s; }
.nav-dropdown.is-open a:nth-child(5) { animation-delay: .19s; }
@keyframes menuItemIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.nav-dropdown a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
}
.nav-dropdown a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* Current-page marker. The nav entry for the page you are on is tinted and
   ruled: an underline in the desktop bar, a left bar plus a dot in the
   dropdown panel, and a bold brand colour in the footer. */
.main-nav a.is-current, .main-nav a.is-current:hover {
  color: var(--brand);
  text-decoration: none;
}
.main-nav a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--brand);
}
.nav-dropdown a { position: relative; }
.nav-dropdown a.is-current, .nav-dropdown a.is-current:hover {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
}
.nav-dropdown a.is-current::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--brand);
}
.footer-links a.is-current, .footer-links a.is-current:hover {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}
.nav-dropdown-label {
  margin: 8px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav-dropdown-label:first-child { margin-top: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; font-size: 15px; font-weight: 700;
  font-family: inherit; line-height: 1.2; cursor: pointer; border: 1px solid transparent;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(31,111,208,0.28); }
.btn-primary:hover { background: var(--brand-2); color: #fff; text-decoration: none; }
.btn-outline { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--surface-2); color: var(--brand); text-decoration: none; }
.btn-ghost { background: var(--surface-2); color: var(--text); }
.btn-ghost:hover { background: #dbe7f5; text-decoration: none; }
.cat-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--brand); background: rgba(31,111,208,0.10); }

/* Hero */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 22px 0 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero img { width: 100%; height: 340px; object-fit: cover; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(transparent, rgba(11,33,56,0.92)); }
.hero-text h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.3px; color: #f2f6fb; }
.hero-text p { margin: 0; color: #d3e0ee; max-width: 640px; }
.hero-cta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hero-cta .btn { box-shadow: 0 6px 16px rgba(15,40,80,0.25); }

/* Feed */
.section-title { font-size: 22px; margin: 26px 0 12px; }
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 8px 0 10px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--brand); }
.card-link { color: inherit; display: block; }
.card-link:hover { text-decoration: none; }
/* Stretched link: the whole card (incl. padding) becomes the click target. */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 9px 16px;
  font: 600 14px/1 "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--brand); background: var(--surface);
  border: 1px solid var(--brand); border-radius: 999px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(31,111,208,0.10);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.back-btn:hover { background: var(--brand); color: #fff; text-decoration: none; }
.back-btn:active { transform: translateY(1px); }
.back-btn svg { width: 16px; height: 16px; }
.card-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 14px 16px 18px; }
.card-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand-2); }
.card-title { font-size: 18px; margin: 6px 0 8px; line-height: 1.3; }
.card-excerpt { margin: 0; color: var(--muted); font-size: 14.5px; }
.card-excerpt, .card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Article */
.article { max-width: 760px; margin: 22px auto 0; padding: 0 20px; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--muted); }
.article h1 { font-size: 32px; line-height: 1.2; margin: 4px 0 10px; letter-spacing: -0.4px; }
.article-meta { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.article-meta .cat-pill { color: var(--brand-2); font-weight: 700; }
.article .lead { font-size: 19px; color: #3a4659; }
.article h2 { font-size: 23px; margin: 30px 0 10px; line-height: 1.3; }
.article p { margin: 0 0 16px; }
.article img.body-img { width: 100%; border-radius: var(--radius); margin: 22px 0; border: 1px solid var(--line); }
.article ol { margin: 0 0 18px; padding-left: 22px; }
.article ol li { margin-bottom: 8px; }

.related { max-width: 760px; margin: 40px auto 0; padding: 0 20px; }
.related h3 { font-size: 20px; margin: 0 0 14px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Generic page */
.page { max-width: 820px; margin: 26px auto 0; padding: 0 20px; }
.page h1 { font-size: 32px; margin: 0 0 8px; }
.page h2 { font-size: 22px; margin: 28px 0 8px; }
.page p, .page li { color: #3a4659; }

/* Filter bar */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.filter-bar button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px;
}
.filter-bar button.active, .filter-bar button:hover { color: #fff; border-color: var(--brand); background: var(--brand); }

/* Category nav: a scrollable strip of category pills with an icon-only expand
   button on the right (mobile) that opens a full vertical list. The active option is
   highlighted and scrolled into view (app.js). */
/* Category strip: sticks under the fixed header and carries its own solid
   background so cards scrolling underneath never show through. */
.cat-nav {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  /* negative margins + matching padding make the band span the full wrap
     width, so cards scrolling underneath never peek out at the sides */
  margin: 0 -20px 6px;
  padding: 6px 20px;
  background: #f2f8ff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 14px -12px rgba(15,40,80,.45);
}
.cat-nav-track { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.cat-nav-track::-webkit-scrollbar { display: none; }
.cat-nav-track button { flex: 0 0 auto; white-space: nowrap; }
.cat-nav-toggle { display: none; }
.cat-nav-panel { display: none; }
@media (max-width: 640px) {
  .cat-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--line); color: var(--text); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
  }
  .cat-nav-toggle:hover { border-color: var(--brand); }
  .cat-nav-toggle:active { transform: translateY(1px); }
  .cat-nav-toggle svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.4,0,.2,1), color .15s ease; }
  .cat-nav.open .cat-nav-toggle { border-color: var(--brand); color: var(--brand); }
  .cat-nav.open .cat-nav-toggle svg { transform: rotate(90deg); }
  .cat-nav-panel {
    display: none; position: absolute; right: 0; top: calc(100% + 8px);
    width: min(248px, 72vw); z-index: 60; padding: 8px; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .cat-nav.open .cat-nav-panel { display: flex; animation: catPanelIn .24s cubic-bezier(.2,.8,.25,1) both; }
  .cat-nav-panel button {
    display: block; width: 100%; text-align: left; padding: 11px 12px;
    border: none; background: transparent; border-radius: 9px;
    color: var(--muted); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
    animation: catItemIn .26s both;
  }
  .cat-nav-panel button:hover { color: var(--text); background: var(--surface-2); }
  .cat-nav-panel button.active { color: var(--brand); background: rgba(31,111,208,0.10); }
  .cat-nav.open .cat-nav-panel button:nth-child(1) { animation-delay: .02s; }
  .cat-nav.open .cat-nav-panel button:nth-child(2) { animation-delay: .05s; }
  .cat-nav.open .cat-nav-panel button:nth-child(3) { animation-delay: .08s; }
  .cat-nav.open .cat-nav-panel button:nth-child(4) { animation-delay: .11s; }
  .cat-nav.open .cat-nav-panel button:nth-child(5) { animation-delay: .14s; }
  .cat-nav.open .cat-nav-panel button:nth-child(6) { animation-delay: .17s; }
}
@keyframes catPanelIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes catItemIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* Search */
.search-box { margin: 18px 0; }
.search-box input {
  width: 100%; font: inherit; font-size: 17px; padding: 14px 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
}
.search-box input:focus { outline: none; border-color: var(--accent); }
.search-count { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.no-results { color: var(--muted); padding: 20px 0; }
/* Search results: compact horizontal rows — thumbnail on the left, title on
   the right, no long excerpt. One column so every row has room for both. */
#searchResults { grid-template-columns: 1fr; gap: 12px; }
.search-card { border-radius: 12px; }
.search-card .card-link { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; }
.search-thumb { flex: 0 0 116px; aspect-ratio: 3 / 2; border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.search-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.search-info { flex: 1 1 auto; min-width: 0; }
.search-info .card-title { margin: 5px 0 0; font-size: 17px; line-height: 1.35; -webkit-line-clamp: 2; }
@media (max-width: 640px) {
  .search-card .card-link { gap: 12px; }
  .search-thumb { flex-basis: 92px; }
  .search-info .card-title { font-size: 15.5px; }
}

/* ---------- Ad slots (demo h5-play-hub configuration) ----------
   Every slot starts VISIBLE with a centered "Advertisement" label drawn by
   ::before: no background, no border, no dashed outline, no fixed width or
   height. A real platform fill moves the label above the creative; an unfilled
   verdict folds the WHOLE block with height:0 (never display:none), so a late
   signal can re-expand it. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0;
}
.ad-slot:not([data-ad-state="empty"]) { min-height: 50px; }
.ad-slot::before {
  content: "Advertisement";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--muted);
  opacity: .55;
  pointer-events: none;
}
/* The platform has concluded: drop the centered placeholder word. */
.ad-slot:has(ins[data-ad-status="filled"])::before,
.ad-slot[data-ad-state]::before { content: none; }
/* A REAL ad is connected: the word sits ABOVE the creative. */
.ad-slot[data-ad-state="filled"],
.ad-slot:has(ins[data-ad-status="filled"]) {
  flex-direction: column;
  justify-content: flex-start;
}
.ad-slot[data-ad-state="filled"]::before,
.ad-slot:has(ins[data-ad-status="filled"])::before {
  content: "Advertisement";
  position: static;
  left: auto; right: auto; top: auto;
  transform: none;
  display: block;
  width: 100%;
  margin: 0 0 6px;
  line-height: 1.4;
}
.ad-slot iframe, .ad-slot ins { display: block; width: 100%; }
.ad-slot > div,
.ad-slot > ins,
.ad-slot > iframe {
  margin-left: auto; margin-right: auto; max-width: 100%;
}
.ad-slot[data-slot^="home"] { margin-left: auto; margin-right: auto; }
.ad-slot[data-slot^="home"] iframe,
.ad-slot[data-slot^="home"] ins { width: auto; max-width: 100%; margin: 0 auto; }
.ad-slot[data-slot="home1"] { margin-top: 20px; }
/* Fold an unfilled slot: height:0 + overflow:hidden, NOT display:none. */
[data-slot][data-ad-state="empty"],
.inter-banner[data-ad-state="empty"] {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
[data-slot][data-ad-state="empty"]::before,
.inter-banner[data-ad-state="empty"]::before { content: none !important; }

/* The anchor banner reserves space below the footer. The height follows the
   ACTUAL creative (set by ads.js) and the strip is painted in the footer colour
   so it reads as part of the footer. */
body.has-inter {
  background:
    linear-gradient(var(--footer-bg), var(--footer-bg)) bottom / 100% var(--inter-pad, 62px) no-repeat,
    var(--bg);
}
.inter-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 55; margin: 0; display: block;
}
.inter-banner .ad-slot { margin: 0; border: none; background: transparent; }


/* Floating buttons */
.to-top, .to-home {
  position: fixed; right: 18px; z-index: 65;
  width: 64px; height: 64px;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0;
  cursor: pointer;
  transition: transform .12s ease;
}
.to-top.show { display: flex; }   /* revealed once the page is scrolled */
.to-top { bottom: 120px; }
.to-home { bottom: 190px; text-decoration: none; }
.to-top:hover, .to-home:hover { transform: translateY(-2px); }
.to-top:active, .to-home:active { transform: translateY(1px); }

/* Rocket back-to-top: a little rocket with a live exhaust flame */
.to-top .rocket {
  position: relative;
  display: block;
  width: 40px; height: 60px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.to-top .rocket-body { display: block; }
.to-top .flame {
  position: absolute;
  left: 50%; top: 30px;
  transform: translateX(-50%);
  width: 18px; height: 24px;
  transform-origin: top center;
  pointer-events: none;
}
.to-top .flame-outer,
.to-top .flame-inner {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  animation: flameFlicker .4s infinite alternate ease-in-out;
}
.to-top .flame-outer {
  background: radial-gradient(circle at 50% 25%, #ffd24d 0%, #ff8a00 50%, rgba(255,90,0,0) 78%);
  clip-path: polygon(50% 0%, 100% 55%, 62% 100%, 50% 84%, 38% 100%, 0 55%);
}
.to-top .flame-inner {
  inset: 18% 20% 12% 20%;
  background: radial-gradient(circle at 50% 25%, #fff6c2 0%, #ffd24d 60%, rgba(255,180,0,0) 80%);
  clip-path: polygon(50% 0%, 100% 55%, 62% 100%, 50% 84%, 38% 100%, 0 55%);
  animation-duration: .28s;
}
@keyframes flameFlicker {
  0%   { transform: scaleY(.82) scaleX(.96); opacity: .82; }
  100% { transform: scaleY(1.12) scaleX(1.04); opacity: 1; }
}

/* Launch burst on click */
.to-top.launching .rocket { animation: rocketHop .75s ease-out; }
@keyframes rocketHop {
  0%   { transform: translateY(3px); }
  30%  { transform: translateY(-11px); }
  70%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.to-top.launching .flame-outer,
.to-top.launching .flame-inner { animation: flameBoost .75s ease-out; }
@keyframes flameBoost {
  0%   { transform: scale(1); opacity: .9; }
  40%  { transform: scale(2.1); opacity: 1; }
  100% { transform: scale(1.5); opacity: .85; }
}

/* Exhaust sparks */
.to-top .spark {
  position: absolute;
  left: 50%; top: 84%;
  width: 5px; height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #ffb02e;
  box-shadow: 0 0 5px #ff8a00;
  pointer-events: none;
  animation: sparkFly .72s ease-out forwards;
}
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
  .to-top .flame-outer, .to-top .flame-inner,
  .to-top.launching .rocket,
  .to-top.launching .flame-outer, .to-top.launching .flame-inner,
  .to-top .spark { animation: none; }
}

/* Footer */
.site-footer { margin-top: 50px; background: var(--footer-bg); border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; }
.footer-brand img { width: 28px; height: 28px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.footer-links a { color: var(--muted); font-weight: 600; }
.footer-links a:hover { color: var(--text); }
.cookie-disclosure { color: var(--muted); font-size: 13.5px; max-width: 720px; margin: 0 0 10px; }
.copyright { color: var(--muted); font-size: 13px; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-inner { padding: 10px 14px; gap: 10px; }
  .brand-name { display: inline; font-size: 14px; } /* task 2: show project name on mobile */
  /* Mobile header: logo + project name + search + category expand button (chevron opens dropdown). */
  .nav-row { position: static; }
  .main-nav { display: none; }
  .nav-expand { display: inline-flex; }
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    max-height: calc(100vh - 70px);
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding: 10px 14px 18px;
    box-shadow: 0 14px 24px rgba(15,40,80,0.14);
  }
  .nav-dropdown a { padding: 11px 12px; font-size: 16px; }
  .feed-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .hero img { height: 220px; }
  .hero-text h1 { font-size: 24px; }
  .hero-cta .btn { padding: 9px 16px; font-size: 14px; }
  .article h1 { font-size: 26px; }
}

/* Light foreground on the two remaining dark surfaces. */
.site-footer { color: #cfe0f0; }
.site-footer .footer-links a,
.site-footer .cookie-disclosure,
.site-footer .copyright { color: #8fa8c2; }
.site-footer .cookie-disclosure a { color: #5aa6f0; }
.site-footer .footer-links a:hover { color: #ffffff; }