/* ════════════════════════════════════════════════════════════════════════
   redesign-theme-foundation (2026-05-28) — Electric Jungle 2.0 theme.

   ONE source of truth for tokens, type, components, and motion. Extracted
   verbatim from index-redesign.html (Plants, gone electric.) and extended
   to cover the wider component list named in the redesign brief
   (.bento/.tile, .eyebrow, .sec/.sec-head, .reveal, .slab-*, footer,
   badge-strip). Every extension stays inside the established visual
   language: dark page background (--hero-bg), frosted nav, bordered
   tile panels with rounded-28px corners + 3px black border, Memphis-y
   floating dots/chips, pink/cyan/yellow/green neon, Fredoka One display +
   Nunito body, subtle rise animations gated on prefers-reduced-motion.

   Pages include this file as the FIRST stylesheet; page-specific tweaks
   live in a small <style> block on the page itself, NEVER edited here.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens (verbatim from index-redesign.html) ──────────────────────── */
:root {
  /* Brand palette */
  --pink:    #ff2d78;
  --cyan:    #00c8ff;
  --yellow:  #ffe600;
  --green:   #00e676;
  --purple:  #b44fff;       /* carried forward from prior brand; unused in preview but reserved for badges */
  --black:   #111;
  --hero-bg: #0c0c0c;       /* page background */
  --cream:   #fef8e8;       /* panel interior */
  --white:   #ffffff;

  /* Surface variants — slab backgrounds */
  --slab-dark:  #0c0c0c;    /* same as hero-bg; deepest section */
  --slab-mid:   #141416;    /* slightly lifted slab for alternation */
  --slab-light: #1c1c20;    /* lifted slab for content sections */
  --slab-cream: #fef8e8;    /* light slab to invert against dark page */

  /* Text on dark surfaces */
  --t-strong:    #ffffff;
  --t-muted:     rgba(255, 255, 255, 0.55);
  --t-dim:       rgba(255, 255, 255, 0.32);
  --t-divider:   rgba(255, 255, 255, 0.08);
  --t-border:    rgba(255, 255, 255, 0.18);

  /* Text on cream/light surfaces */
  --t-on-light-strong: #111;
  --t-on-light-muted:  rgba(17, 17, 17, 0.62);

  /* Type */
  --font-display: 'Fredoka One', cursive;
  --font-body:    'Nunito', sans-serif;

  /* Geometry */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --border-w:  3px;

  /* Motion */
  --ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Base ────────────────────────────────────────────────────────────── */
/* min-height (not height) — `height: 100%` clamps body's box to the
   viewport height, which constrains `position: sticky` descendants to
   that 1-viewport range. On long pages the sticky .ej-header looks fine
   until you scroll past one viewport, then it scrolls away because its
   containing block (body) has scrolled out of view. min-height lets body
   grow with its content so the sticky range = the whole document. */
html, body { min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--hero-bg);
  color: var(--t-strong);
  -webkit-font-smoothing: antialiased;
  /* overflow-x:clip (not hidden) — `hidden` creates a scroll container on
     <body> which breaks `position:sticky` on descendants (notably the
     shared .ej-header, which goes un-pinned on mobile shop/etc.). `clip`
     prevents horizontal scroll the same way visually without making body
     a scroll container. Safari 16+, all evergreen browsers; safe in 2026. */
  overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

/* ── Type ────────────────────────────────────────────────────────────── */
.head {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.9;
  font-size: clamp(2.9rem, 15vw, 6.5rem);
}
.head span { display: block; }
.head .l1 { color: var(--t-strong); }
.head .l2 { color: transparent; -webkit-text-stroke: 2px var(--cyan); }
.head .l3 { color: var(--pink); }

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow i,
.kicker i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}
/* Eyebrow color variants used to mark different section types. */
.eyebrow.eyebrow-pink   { color: var(--pink);   }
.eyebrow.eyebrow-pink i { background: var(--pink); }
.eyebrow.eyebrow-cyan   { color: var(--cyan);   }
.eyebrow.eyebrow-cyan i { background: var(--cyan); }
.eyebrow.eyebrow-yellow   { color: var(--yellow);   }
.eyebrow.eyebrow-yellow i { background: var(--yellow); }

.sub {
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: var(--t-muted);
  line-height: 1.55;
  max-width: 380px;
}

/* ── Sticky frosted nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(12, 12, 12, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--t-divider);
}
.logo {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--yellow);
  letter-spacing: 0.4px;
  text-decoration: none;
}
.logo .bolt { color: var(--pink); font-size: 1.25rem; line-height: 1; }
.nav-links { display: none; align-items: center; gap: 26px; }
.nav-links a {
  color: var(--t-muted);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--yellow); }
.nav-desk-cta { display: none; }
.menu-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--t-border);
  border-radius: 12px;
  color: var(--t-strong);
  cursor: pointer;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--t-strong); position: relative; }
.menu-btn span::before,
.menu-btn span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--t-strong); }
.menu-btn span::before { top: -6px; }
.menu-btn span::after  { top: 6px;  }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 34px 22px 120px;
  max-width: 1180px;
  margin: 0 auto;
}
.kicker {
  /* Hero entrance — staggered rise. Other kickers/eyebrows are static. */
  opacity: 0; transform: translateY(14px);
  animation: ej-rise 0.7s 0.05s var(--ease-rise) forwards;
}
.hero .head { margin-top: 16px; }
.hero .head span {
  opacity: 0; transform: translateY(20px);
  animation: ej-rise 0.8s var(--ease-rise) forwards;
}
.hero .head .l1 { animation-delay: 0.12s; }
.hero .head .l2 { animation-delay: 0.20s; }
.hero .head .l3 { animation-delay: 0.28s; }
.hero .sub {
  margin-top: 20px;
  max-width: 340px;
  opacity: 0; transform: translateY(16px);
  animation: ej-rise 0.8s 0.36s var(--ease-rise) forwards;
}

/* ── Cream tile / panel ──────────────────────────────────────────────── */
.panel {
  position: relative;
  margin-top: 34px;
  background: var(--cream);
  border: var(--border-w) solid var(--black);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 0.82;
  max-width: 460px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 0; transform: translateY(24px) scale(0.98);
  animation: ej-rise 0.9s 0.44s var(--ease-rise) forwards;
}
.dots {
  position: absolute; top: 18px; right: 20px;
  display: grid; grid-template-columns: repeat(3, 8px);
  gap: 6px;
}
.dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink);
  border: 1.5px solid var(--black);
}
.chip {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.82rem;
  border: 2.5px solid var(--black);
  border-radius: 11px;
  padding: 6px 13px;
  box-shadow: 3px 3px 0 var(--black);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Primary pink CTA — matches hero/dock .cta. */
.btn,
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  background: var(--pink);
  color: #fff;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  border-radius: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:active,
.cta:active { transform: translateY(2px); }
.btn:disabled,
.cta:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Ghost — outlined white-on-dark. */
.btn-ghost,
.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px;
  background: transparent;
  border: 1.5px solid var(--t-border);
  color: var(--t-strong);
  border-radius: 15px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, border-color 0.15s, color 0.15s;
}
.btn-ghost:hover,
.ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-ghost:active,
.ghost:active { transform: translateY(2px); }

/* Color variants */
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-cyan   { background: var(--cyan);   color: var(--black); }
.btn-green  { background: var(--green);  color: var(--black); }

/* Sizes */
.btn-sm { height: 40px; padding: 0 16px; font-size: 0.88rem; border-radius: 12px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 1.18rem; }
.btn-full { width: 100%; }

/* Square icon button (used in mobile dock; reusable anywhere) */
.icon-btn {
  width: 50px; height: 50px; flex-shrink: 0; cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--t-border);
  border-radius: 15px;
  color: var(--yellow);
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.08s;
}
.icon-btn:active { transform: translateY(2px); }

/* Desktop pink CTA in nav (right side) */
.nav-desk-cta {
  align-items: center; gap: 7px; cursor: pointer;
  background: var(--pink); color: #fff;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 11px 20px;
  border-radius: 13px;
  transition: transform 0.08s;
}
.nav-desk-cta:active { transform: translateY(2px); }

/* ── Mobile bottom dock ─────────────────────────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 12, 12, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--t-divider);
}
.dock .cta {
  flex: 1; height: 50px;
}

/* ── Section primitives (.sec / .sec-head / .slab-*) ────────────────── */
.sec {
  position: relative;
  padding: 64px 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.sec-head {
  margin-bottom: 28px;
  max-width: 720px;
}
.sec-head .head {
  font-size: clamp(2rem, 7vw, 3.6rem);
  margin-top: 8px;
}
.sec-head .sub { margin-top: 14px; max-width: 580px; }

.slab          { padding: 0; }
.slab-inner    { max-width: 1180px; margin: 0 auto; padding: 64px 22px; }
.slab-dark     { background: var(--slab-dark);  color: var(--t-strong); }
.slab-mid      { background: var(--slab-mid);   color: var(--t-strong); }
.slab-light    { background: var(--slab-light); color: var(--t-strong); }
.slab-cream    { background: var(--slab-cream); color: var(--t-on-light-strong); }
.slab-cream .sub,
.slab-cream .nav-links a { color: var(--t-on-light-muted); }
.slab-pink     { background: var(--pink); color: var(--t-strong); }
.slab-yellow   { background: var(--yellow); color: var(--black); }

/* ── Bento grid + tiles ─────────────────────────────────────────────── */
/* Multi-column tile layout used on marketing pages. Mobile = single column,
   desktop = up to 3 columns. Each child is a .tile or .panel-like card. */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .tile-wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .bento .tile-wide  { grid-column: span 2; }
  .bento .tile-tall  { grid-row: span 2; }
}

/* .tile — interior content card. Same border/shadow vocabulary as .panel
   but quieter (smaller radius, no aspect-ratio constraint). Two paint
   variants for contrast: cream (warm) + dark (low-contrast surface). */
.tile {
  position: relative;
  background: var(--cream);
  color: var(--t-on-light-strong);
  border: var(--border-w) solid var(--black);
  border-radius: var(--radius-md);
  padding: 22px 22px 26px;
  overflow: hidden;
}
.tile-dark {
  background: var(--slab-mid);
  color: var(--t-strong);
  border-color: var(--black);
}
.tile-dark .sub { color: var(--t-muted); }
.tile-yellow { background: var(--yellow); color: var(--black); border-color: var(--black); }
.tile-pink   { background: var(--pink);   color: #fff;          border-color: var(--black); }
.tile-cyan   { background: var(--cyan);   color: var(--black);  border-color: var(--black); }
.tile-green  { background: var(--green);  color: var(--black);  border-color: var(--black); }

.tile-eyebrow {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t-on-light-muted);
  margin-bottom: 8px;
}
.tile-dark .tile-eyebrow { color: var(--t-muted); }

.tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 1.85rem);
  line-height: 1.05;
  margin-bottom: 10px;
}

.tile-body {
  font-weight: 700;
  line-height: 1.55;
  color: var(--t-on-light-muted);
}
.tile-dark .tile-body,
.tile-pink .tile-body { color: rgba(255, 255, 255, 0.85); }

/* ── Static badge strip (replaces marquee/ticker) ────────────────────── */
/* Evenly-spaced trust badges. Wraps to multiple rows on narrow viewports
   so nothing gets clipped at 360px. Honors the no-motion rule. */
.badge-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px 22px;
  border-top: 1px solid var(--t-divider);
  border-bottom: 1px solid var(--t-divider);
  background: var(--slab-mid);
}
@media (min-width: 640px) { .badge-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .badge-strip { grid-template-columns: repeat(6, 1fr); } }
.badge-strip .badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--t-muted);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}
.badge-strip .badge i {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-strip .badge.b-pink i   { background: var(--pink); }
.badge-strip .badge.b-cyan i   { background: var(--cyan); }
.badge-strip .badge.b-yellow i { background: var(--yellow); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ej-foot {
  background: var(--slab-dark);
  color: var(--t-muted);
  padding: 40px 22px calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--t-divider);
  text-align: center;
}
.ej-foot .logo { display: inline-flex; margin-bottom: 14px; }
.ej-foot a { color: var(--t-strong); text-decoration: none; font-weight: 800; }
.ej-foot a:hover { color: var(--yellow); }
.ej-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px;
  font-size: 0.78rem;
  margin-bottom: 14px;
}
.ej-foot-fine {
  font-size: 0.72rem;
  color: var(--t-dim);
  letter-spacing: 0.3px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Reveal-on-scroll ───────────────────────────────────────────────── */
/* JS adds .is-visible when the element enters the viewport. We start
   from a "below + dim" state and rise into place. The base rule is
   gated on a `data-ej-reveal-ready` attribute on <html> that ej-reveal.js
   sets at boot — without JS the element stays visible (graceful default). */
html[data-ej-reveal-ready] .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-rise), transform 0.7s var(--ease-rise);
}
html[data-ej-reveal-ready] .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Motion gating ───────────────────────────────────────────────────── */
@keyframes ej-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* All entrance animations resolved to their settled state instantly. */
  .kicker,
  .head span,
  .hero .sub,
  .panel,
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Desktop breakpoint ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .nav { padding: 18px 40px; }
  .logo { font-size: 1.35rem; }
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .nav-desk-cta { display: inline-flex; }
  .hero {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 48px;
    padding: 70px 40px 90px;
    min-height: 78vh;
  }
  .hero .sub { margin-bottom: 36px; max-width: 380px; }
  .hero-cta-row {
    display: flex; gap: 14px;
    opacity: 0; transform: translateY(16px);
    animation: ej-rise 0.8s 0.5s var(--ease-rise) forwards;
  }
  .panel { margin-top: 0; max-width: none; width: 100%; }
  .dock { display: none; }
  .sec { padding: 96px 40px; }
  .slab-inner { padding: 96px 40px; }
}
@media (max-width: 767px) {
  .hero-cta-row { display: none; }
}
.hero-cta-row .cta,
.hero-cta-row .ghost { height: 54px; padding: 0 28px; flex: initial; }

/* ── Utility ─────────────────────────────────────────────────────────── */
.txt-pink   { color: var(--pink);   }
.txt-cyan   { color: var(--cyan);   }
.txt-yellow { color: var(--yellow); }
.txt-green  { color: var(--green);  }
.center     { text-align: center; }
.hide-mob   { display: none; }
@media (min-width: 768px) { .hide-mob { display: initial; } .hide-desk { display: none !important; } }
