/* ============================================================================
   marketing-theme.css — the dark "House Always Ships" theme for ALL public
   marketing pages (showcase + cluster + blog). Scoped to `body.mkt` so it
   re-skins ONLY marketing surfaces; admin/dashboard/docs (no .mkt class) are
   untouched. Loaded LAST, after pages.css. Two layers:
     1) token override under body.mkt  → recolors every var()-driven rule
     2) component restyle under body.mkt → the genuinely-new-design look
        (Anton headlines, acid eyebrows, lime-border dark cards, marquee, …)
   Palette + type lifted from the landing export (#060606 / #C9F31D / Anton +
   Chakra Petch).
   ============================================================================ */

/* ── 1) TOKEN OVERRIDE ─────────────────────────────────────────────────── */
body.mkt {
  --canvas:        #060606;
  --canvas-deep:   #0a0a0a;
  --canvas-paper:  #111111;

  --ink:           #e8e8e8;
  --ink-soft:      #cfcfcf;
  --ink-mute:      #9a9a9a;
  --ink-line:      rgba(255, 255, 255, 0.10);
  --ink-glass:     rgba(255, 255, 255, 0.04);

  --lime:          #C9F31D;
  --lime-glow:     #E4FF66;
  --lime-deep:     #C9F31D;
  --lime-shadow:   rgba(201, 243, 29, 0.45);

  /* The new design has no violet — collapse it onto the acid system so any
     lime→violet gradients become lime→white instead of clashing. */
  --violet:        #f0f0f0;
  --violet-deep:   #8a8a8a;
  --violet-soft:   #C9F31D;
  --violet-glow:   rgba(201, 243, 29, 0.30);

  --surface-dark:        #0c0c0c;
  --surface-dark-raised: #161616;
  --surface-dark-hi:     #1e1e1e;

  --grain-opacity: 0;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.5);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.55), 0 0 30px rgba(201,243,29,0.06);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.7);

  --font-display: 'Anton', 'Bebas Neue', system-ui, sans-serif;
  --font-sans:    'Chakra Petch', system-ui, sans-serif;
  --font-mono:    'Chakra Petch', ui-monospace, monospace;

  background: #060606;
  color: #e8e8e8;
}

/* Kill the light-on-dark grain texture + selection */
body.mkt .grain-overlay { display: none !important; }
body.mkt ::selection { background: #C9F31D; color: #0c1000; }

/* ── 2) NAV (existing .top-nav markup, PNG brand) ──────────────────────── */
body.mkt .top-nav {
  background: rgba(6, 6, 6, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.mkt .brand-mark { display: inline-flex; align-items: center; }
body.mkt .brand-mark img { height: 30px; display: block; }
body.mkt .nav-link {
  color: #999; text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'Chakra Petch', sans-serif; font-size: 0.8rem; font-weight: 500;
  transition: color 0.3s ease;
}
body.mkt .nav-link:hover, body.mkt .nav-link.is-current { color: #C9F31D; }
body.mkt .signin-link {
  color: #cfcfcf; text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'Chakra Petch', sans-serif; font-size: 0.8rem; transition: color 0.3s ease;
}
body.mkt .signin-link:hover { color: #C9F31D; }

/* ── 3) BUTTONS ────────────────────────────────────────────────────────── */
body.mkt .btn-primary {
  background: linear-gradient(160deg, #e3ff62 0%, #C9F31D 50%, #a3cc05 100%);
  color: #0c1000; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  border: none; border-radius: 10px;
  box-shadow: 0 0 26px rgba(201,243,29,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
body.mkt .btn-primary:hover {
  background: linear-gradient(160deg, #e9ff7a 0%, #d4ff2e 50%, #b0db10 100%);
  box-shadow: 0 0 44px rgba(201,243,29,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  transform: translateY(-2px);
}
body.mkt .btn-bracket, body.mkt .btn-ghost {
  background: rgba(255, 255, 255, 0.03); color: #e8e8e8;
  border: 1px solid #3a3a3a; border-radius: 10px;
}
body.mkt .btn-bracket:hover, body.mkt .btn-ghost:hover { border-color: #C9F31D; color: #C9F31D; }

/* ── 4) HEADLINES — Anton, uppercase, chrome-white ─────────────────────── */
body.mkt .pg-hero h1,
body.mkt .pg-section-head h2,
body.mkt .pg-cta h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #f2f2f2;
  line-height: 1.02;
}
body.mkt .pg-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 18ch;
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(0,0,0,0.6); }
body.mkt .pg-hero h1 .brk { color: #C9F31D; -webkit-text-stroke: 0; }
body.mkt .pg-hero h1 .hl {
  background: linear-gradient(180deg, #ffffff, #aeb3b8 55%, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.mkt .pg-section-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
body.mkt .pg-hero-eyebrow,
body.mkt .pg-section-head .pg-eyebrow,
body.mkt .pg-eyebrow {
  font-family: 'Chakra Petch', sans-serif; color: #C9F31D;
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem;
}
body.mkt .pg-hero-eyebrow b { color: #C9F31D; }

/* ── 5) CARDS — dark with lime border + corner brackets (already wired) ── */
body.mkt .pg-card {
  background: linear-gradient(160deg, #161616 0%, #0d0d0d 100%);
  border: 1px solid #2a2a2a; border-radius: 18px;
}
body.mkt .pg-card:hover {
  border-color: rgba(201,243,29,0.5);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 30px rgba(201,243,29,0.08);
}
body.mkt .pg-card .pc-glyph { font-family: 'Anton', sans-serif; color: #C9F31D; }
body.mkt .pg-card h3 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: #f0f0f0; }
body.mkt .pg-card p { color: #9a9a9a; }

/* pills */
body.mkt .pg-pill { color: #9a9a9a; font-family: 'Chakra Petch', sans-serif; }
body.mkt .pg-pill::before { color: #C9F31D; }

/* ── 6) FAQ ────────────────────────────────────────────────────────────── */
body.mkt .pg-faq-item { border-bottom: 1px solid rgba(255,255,255,0.10); }
body.mkt .pg-faq-q { color: #e8e8e8; font-family: 'Chakra Petch', sans-serif; font-weight: 600; }
body.mkt .pg-faq-q::after { font-family: 'Anton', sans-serif; color: #C9F31D; }
body.mkt .pg-faq-a p { color: #9a9a9a; }

/* ── 7) CTA closer — dark panel, acid edge + glow ──────────────────────── */
body.mkt .pg-cta {
  background: radial-gradient(120% 140% at 50% 0%, #14160c 0%, #0a0a0a 60%);
  border: 1px solid rgba(201,243,29,0.30);
  box-shadow: 0 0 60px rgba(201,243,29,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
}
body.mkt .pg-cta h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
body.mkt .pg-cta p { color: #a8a8a8; }

/* ── 8) Terminal + reel surfaces ───────────────────────────────────────── */
body.mkt .pg-terminal { background: #0c0c0c; border: 1px solid #1f1f1f; color: #e8eaf0; }
body.mkt .pg-terminal .tl-val { color: #C9F31D; }
body.mkt .pg-terminal .tl-key { color: #C9F31D; opacity: 0.8; }
body.mkt .pg-reel { background: #0c0c0c; border: 1px solid #1f1f1f; }
body.mkt .pg-reel-marker { background: #C9F31D; box-shadow: 0 0 16px rgba(201,243,29,0.5); }
body.mkt .pg-reel-modes span { color: #9a9a9a; border: 1px solid rgba(255,255,255,0.10); }

/* breadcrumbs + body links */
body.mkt .pg-breadcrumbs a, body.mkt .pg-breadcrumbs li { color: #777 !important; }
body.mkt a.bp-readmore, body.mkt .blog-article a { color: #C9F31D; }

/* lead text */
body.mkt .pg-lead, body.mkt .pg-hero-sub { color: #cfcfcf; }

/* ── 9) FOOTER (rich sitemap footer markup from generators) ────────────── */
body.mkt .mkt-footer { background: #050505; border-top: 1px solid #1a1a1a; padding: 64px 40px 40px; }
body.mkt .mkt-footer-inner { max-width: 1360px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
body.mkt .mkt-footer img { height: 30px; display: block; }
body.mkt .mkt-foot-col-title { font-family: 'Anton', sans-serif; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; color: #C9F31D; margin-bottom: 12px; }
body.mkt .mkt-foot-link { display: block; color: #8a8a8a; text-decoration: none;
  font-size: 13px; line-height: 2.1; transition: color 0.25s ease; }
body.mkt .mkt-foot-link:hover { color: #C9F31D; }
body.mkt .mkt-footer-bar { max-width: 1360px; margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid #161616; display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #555; }
body.mkt .mkt-footer-bar .acc { color: #C9F31D; }

/* ── 10) Acid marquee strip (optional component for section breaks) ─────── */
body.mkt .mkt-marquee { position: relative; background: linear-gradient(90deg,#d8ff45,#C9F31D,#b6e007);
  padding: 14px 0; overflow: hidden; box-shadow: 0 0 60px rgba(201,243,29,0.3); }
body.mkt .mkt-marquee-track { display: flex; width: max-content; animation: sbMarquee 20s linear infinite;
  font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: 2px; text-transform: uppercase;
  color: #0c1000; white-space: nowrap; }
body.mkt .mkt-marquee-track > span { padding-right: 40px; transform: skewX(-8deg); }
@keyframes sbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.mkt .mkt-marquee-track { animation: none; } }

/* ── responsive footer ─────────────────────────────────────────────────── */
@media (max-width: 880px) { body.mkt .mkt-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { body.mkt .mkt-footer-inner { grid-template-columns: 1fr; } }