/* =========================================================
   LOOM — Web2App Performance Advertising
   Design tokens & shared styles
   ========================================================= */

:root{
  /* Surfaces */
  --bg:            #ffffff;
  --bg-subtle:     #f5f7fc;
  --bg-subtle-2:   #eef1f9;
  --surface:       #ffffff;
  --border:        #e2e6f0;
  --border-soft:   #ebeef5;

  /* Ink */
  --ink:           #0b1a38;
  --ink-soft:      #4c5872;
  --ink-faint:     #8791a6;

  /* Accent */
  --accent:        #2b52f5;
  --accent-deep:   #1c37bd;
  --accent-pale:   #e8edff;
  --accent-pale-2: #dbe3ff;
  --violet:        #8d7bf5;
  --violet-pale:   #eee9ff;
  --positive:      #14904a;
  --positive-pale: #e5f6ec;

  /* Type */
  --f-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --f-body: "Inter", sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  /* Rhythm */
  --container: 1160px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11,26,56,0.04), 0 1px 1px rgba(11,26,56,0.03);
  --shadow-md: 0 8px 24px rgba(11,26,56,0.08), 0 2px 6px rgba(11,26,56,0.04);
  --shadow-lg: 0 24px 64px rgba(11,26,56,0.14), 0 6px 16px rgba(11,26,56,0.06);

  --ease: cubic-bezier(.16,.8,.24,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor: pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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

@media (max-width: 640px){
  .container{ padding: 0 20px; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.eyebrow::before{
  content:"";
  width:14px; height:1px;
  background: var(--accent);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:14px; height:14px; transition: transform .25s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(3px); }

.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-outline{ background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover{ border-color: var(--ink); background: var(--bg-subtle); }

.btn-light{ background: #fff; color: var(--ink); }
.btn-light:hover{ background: var(--accent-pale); transform: translateY(-1px); }

.btn-sm{ padding: 10px 18px; font-size: 14px; }

/* ---------- nav ---------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 18px 0;
  transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(11,26,56,0.02);
}
.nav .container{ display:flex; align-items:center; justify-content: space-between; gap: 24px; }
.brand{ display:flex; align-items:center; gap: 9px; }
.brand-mark{ height: 24px; width: auto; display: block; }

.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{ font-size: 14.5px; font-weight: 500; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav-links a:hover{ color: var(--ink); }
.nav-links a.is-active{ color: var(--ink); }
.nav-links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--accent); border-radius:2px; }
.nav-right{ display:flex; align-items:center; gap:18px; }

.nav-burger{
  display:none;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  align-items:center; justify-content:center;
  flex-direction: column;
  gap: 4px;
}
.nav-burger span{ width:16px; height:1.5px; background: var(--ink); display:block; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-burger.is-open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 480;
  background: #fff;
  padding: 96px 28px 40px;
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu a{ font-family: var(--f-display); font-size: 26px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--border-soft); color: var(--ink); }
.mobile-menu .btn{ margin-top: 22px; width: 100%; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-right .btn{ display:none; }
  .nav-burger{ display:flex; }
}

/* ---------- Calendly badge overrides ----------
   Keep the persistent badge visible but never above an open
   mobile navigation overlay, and give it breathing room on
   small screens. */
.calendly-badge-widget{ z-index: 460 !important; }
@media (max-width: 640px){
  .calendly-badge-widget{ bottom: 18px !important; right: 18px !important; }
}
body.mobile-menu-open .calendly-badge-widget{ display: none !important; }

/* ---------- hero ---------- */
.hero{ padding: 168px 0 88px; position: relative; overflow: hidden; }
.hero-grid{ display:grid; grid-template-columns: minmax(0,460px) 1fr; gap: 48px; align-items:center; }
.hero-eyebrow{ margin-bottom: 20px; }
.hero h1{ font-size: 58px; font-weight: 650; letter-spacing: -0.025em; }
.hero p.lede{ margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 460px; }
.hero-ctas{ margin-top: 32px; display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
.hero-footnote{ margin-top: 20px; font-size: 13px; color: var(--ink-faint); font-family: var(--f-mono); letter-spacing: 0.01em; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 42px; }
  .hero{ padding-top: 130px; }
}
@media (max-width: 560px){
  .hero h1{ font-size: 34px; }
  .hero p.lede{ font-size: 16.5px; }
}

/* ---------- hero entrance sequence ----------
   Each element fades/rises in with a small stagger. Total
   sequence completes well under ~1.4s. Reduced-motion shows
   everything immediately via the global override above. */
@keyframes heroIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-eyebrow, .hero h1, .hero p.lede, .hero-ctas, .hero-footnote{
  opacity:0;
  animation: heroIn .6s var(--ease) forwards;
}
.hero-eyebrow{ animation-delay: .02s; }
.hero h1{ animation-delay: .10s; }
.hero p.lede{ animation-delay: .22s; }
.hero-ctas{ animation-delay: .34s; }
.hero-footnote{ animation-delay: .42s; }

.hero-visual-audience{ display: flex; justify-content: center; opacity:0; animation: heroIn .7s var(--ease) forwards; animation-delay: .30s; }

/* ---------- marquee strip ---------- */
.strip{
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  overflow: hidden;
  padding: 14px 0;
}
.strip:focus-within .strip-track,
.strip:hover .strip-track{ animation-play-state: paused; }
.strip-track{ display:flex; width: max-content; gap: 48px; animation: marquee 32s linear infinite; }
.strip span{ font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink-faint); white-space: nowrap; }
.strip span::after{ content:"•"; margin-left: 48px; color: var(--border); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 640px){ .strip-track{ animation-duration: 44s; } }

/* ---------- section basics ---------- */
/* ---------- homepage stats band ---------- */
.stats-band{ padding: 64px 0; }
.stats-bar{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  text-align: center;
}
.stat-item{
  padding: 0 48px;
  position: relative;
}
.stat-item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; right: 0;
  width: 1px;
  background: var(--border);
}
.stat-value{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.stat-label{
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 780px){
  .stats-bar{ gap: 28px 0; }
  .stat-item{ padding: 0 24px; width: 45%; }
  .stat-item:nth-child(2)::after{ display: none; }
  .stat-item:not(:last-child)::after{ display: none; }
  .stat-value{ font-size: 28px; }
}
@media (max-width: 480px){
  .stat-item{ width: 100%; padding: 0; }
}

/* ---------- homepage dark hero moon ----------
   Scoped entirely under .hero-moon so no other page's .hero is
   affected. Full-viewport-height dark hero with a tiled-gradient
   starfield, a large centered rotating moon (see initializeMoonParallax
   in main.js), a soft vignette to keep the overlaid text legible, and
   light-on-dark variants of the standard hero text/button styles. */
.hero.hero-moon{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #05070f 0%, #0a0f22 55%, #0d1530 100%);
  color: #fff;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 90px;
}
.hero-moon .starfield-dense{
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.7;
  background-image:
    radial-gradient(0.9px 0.9px at 12% 8%, rgba(255,255,255,0.55), transparent),
    radial-gradient(0.7px 0.7px at 34% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 58% 6%, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.7px 0.7px at 78% 28%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.9px 0.9px at 92% 14%, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.7px 0.7px at 6% 44%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 26% 58%, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.7px 0.7px at 48% 40%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.9px 0.9px at 66% 62%, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.7px 0.7px at 88% 48%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 16% 78%, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.7px 0.7px at 40% 88%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.9px 0.9px at 62% 94%, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.7px 0.7px at 84% 82%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.9px 0.9px at 96% 68%, rgba(255,255,255,0.45), transparent);
  background-repeat: repeat;
  background-size: 240px 220px;
}
.hero-moon .starfield{
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.9;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.1px 1.1px at 22% 62%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.7px 1.7px at 38% 12%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.1px 1.1px at 52% 78%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 66% 34%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.1px 1.1px at 80% 58%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.8px 1.8px at 91% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.1px 1.1px at 14% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 46% 46%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.1px 1.1px at 73% 90%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.6px 1.6px at 4% 40%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 60% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 96% 76%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 30% 96%, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 340px 300px;
}
/* ---------- twinkling stars ----------
   A sparse layer of individually-animated stars, on top of the two
   static gradient starfields above. Each gets its own position via
   inline style (see MOON_BG in fragments.py) and picks up timing from
   the nth-child rules below, so ~20 stars only need a handful of
   duration/delay variants to read as properly desynced rather than
   pulsing in unison. */
.hero-moon .starfield-twinkle{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.twinkle-star{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 5px 1px rgba(255,255,255,0.85);
  opacity: 0.18;
  animation: starTwinkle 6.5s ease-in-out infinite;
}
.twinkle-star.is-small{ width: 1.4px; height: 1.4px; box-shadow: 0 0 3px 1px rgba(255,255,255,0.7); }
.twinkle-star.is-big{ width: 2.6px; height: 2.6px; box-shadow: 0 0 7px 1.5px rgba(255,255,255,0.9); }

.twinkle-star:nth-child(4n){ animation-duration: 5.4s; animation-delay: 0s; }
.twinkle-star:nth-child(4n+1){ animation-duration: 7.6s; animation-delay: 1.2s; }
.twinkle-star:nth-child(4n+2){ animation-duration: 6.4s; animation-delay: 2.6s; }
.twinkle-star:nth-child(4n+3){ animation-duration: 8.8s; animation-delay: 3.8s; }
.twinkle-star:nth-child(5n){ animation-delay: 5.0s; }
.twinkle-star:nth-child(7n){ animation-delay: 1.8s; }

@keyframes starTwinkle{
  0%, 100%{ opacity: 0.15; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.7); }
}

/* ---------- Scorpius constellation, upper-left ----------
   Real star positions (converted from J2000 RA/Dec) and real relative
   magnitudes, not decorative placeholders — see fragments.py for the
   source data and citations. Sits in its own contained region so it
   reads as a distinct, recognizable group rather than blending into
   the general starfield. */
.constellation-scorpius{
  position: absolute;
  top: 6%; left: 1%;
  width: 32%; height: 46%;
  z-index: 1;
  pointer-events: none;
}
.constellation-lines{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.constellation-star{
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: constellationShimmer 9s ease-in-out infinite;
}
.constellation-star.is-antares{
  animation-duration: 8s;
}
.constellation-star:nth-of-type(8n){ animation-delay: 0s; }
.constellation-star:nth-of-type(8n+1){ animation-delay: 1.1s; }
.constellation-star:nth-of-type(8n+2){ animation-delay: 2.3s; }
.constellation-star:nth-of-type(8n+3){ animation-delay: 3.4s; }
.constellation-star:nth-of-type(8n+4){ animation-delay: 4.6s; }
.constellation-star:nth-of-type(8n+5){ animation-delay: 5.7s; }
.constellation-star:nth-of-type(8n+6){ animation-delay: 6.9s; }
.constellation-star:nth-of-type(8n+7){ animation-delay: 8.0s; }

@keyframes constellationShimmer{
  0%, 100%{ opacity: 0.32; transform: translate(-50%, -50%) scale(0.85); }
  50%{ opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
}

@media (max-width: 640px){
  .constellation-scorpius{ width: 58%; height: 40%; top: 4%; left: 1%; }
}

@media (prefers-reduced-motion: reduce){
  .constellation-star{ animation: none; opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce){
  .twinkle-star{ animation: none; opacity: 0.65; }
}

.hero-moon .vignette{
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 62% at 50% 44%, rgba(4,6,14,0.94) 0%, rgba(4,6,14,0.94) 42%, rgba(4,6,14,0.6) 66%, rgba(4,6,14,0) 88%);
}
.moon-bg{
  position: absolute;
  top: var(--moon-top, 50%);
  left: var(--moon-left, 50%);
  width: min(68vw, 760px);
  height: min(68vw, 760px);
  transform: translate(var(--moon-tx, -50%), var(--moon-ty, -46%));
  z-index: 2;
  pointer-events: none;
}
.moon-orbit{
  width: 100%;
  height: 100%;
  will-change: transform;
}
.moon-spin{
  width: 100%;
  height: 100%;
  will-change: transform;
}
.moon-bg svg{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 60px 120px rgba(0,0,0,0.5));
}
.hero-moon .container{ position: relative; z-index: 4; }
.hero-moon .hero-copy{ max-width: 720px; margin: 0 auto; text-align: center; }
.hero-moon h1{ color: #fff; }
.hero-moon p.lede{ color: rgba(255,255,255,0.8); margin-left: auto; margin-right: auto; }
.hero-moon .hero-footnote{ color: rgba(255,255,255,0.48); }
.hero-moon .hero-ctas{ justify-content: center; }
.hero-moon .btn-primary{ background: #fff; color: #0b1a38; }
.hero-moon .btn-primary:hover{ background: var(--accent-pale); box-shadow: none; }
.hero-moon .btn-outline{ border-color: rgba(255,255,255,0.32); color: #fff; }
.hero-moon .btn-outline:hover{ background: rgba(255,255,255,0.08); border-color: #fff; }

@media (max-width: 640px){
  .hero.hero-moon{ padding-top: 100px; min-height: 92vh; }
  .moon-bg{
    width: min(92vw, 640px); height: min(92vw, 640px);
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
  }
}

/* nav variant while sitting over the dark hero, before the person has
   scrolled past it (see initializeNav in main.js) */
.nav.nav-on-dark{ border-bottom-color: transparent; }
.nav.nav-on-dark .brand-mark{ filter: brightness(0) invert(1); }
.nav.nav-on-dark .nav-links a{ color: rgba(255,255,255,0.72); }
.nav.nav-on-dark .nav-links a:hover,
.nav.nav-on-dark .nav-links a.is-active{ color: #fff; }
.nav.nav-on-dark .nav-links a.is-active::after{ background: #fff; }
.nav.nav-on-dark .nav-right .btn-primary{ background: #fff; color: #0b1a38; }
.nav.nav-on-dark .nav-right .btn-primary:hover{ background: var(--accent-pale); }
.nav.nav-on-dark .nav-burger{ border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
.nav.nav-on-dark .nav-burger span{ background: #fff; }

section{ padding: 96px 0; }
.section-head{ max-width: 620px; margin-bottom: 52px; }
.section-head h2{ font-size: 38px; margin-top: 14px; }
.section-head p{ margin-top: 14px; font-size: 16.5px; color: var(--ink-soft); line-height:1.6; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

@media (max-width: 640px){
  section{ padding: 64px 0; }
  .section-head h2{ font-size: 28px; }
}

/* reveal on scroll — invisible starting state only applies once we know
   JS is running (html.js, set synchronously in <head>); without JS this
   content is simply visible and static, never permanently hidden. */
.reveal{ transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity: 0; transform: translateY(18px); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- audience / "1B+" visual ---------- */
.audience-visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  max-width: 760px;
}
.audience-bg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.audience-ring{ transform-box: fill-box; transform-origin: center; opacity: .7; }
.audience-visual.is-animating .ring-1{ animation: ripple 4.2s ease-in-out infinite; }
.audience-visual.is-animating .ring-2{ animation: ripple 3.4s ease-in-out infinite .5s; }
@keyframes ripple{
  0%,100%{ transform: scale(0.96); opacity: .55; }
  50%{ transform: scale(1.04); opacity: .85; }
}

.audience-core{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.audience-number{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 96px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.audience-sub{
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.genre-label{
  position: absolute;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.js .genre-label{ opacity: 0; }
.genre-label.is-visible{ animation: genreIn .6s var(--ease) forwards; }
.genre-label.is-floating{ animation: genreFloat 5s ease-in-out infinite; }
@keyframes genreIn{ from{ opacity:0; transform: translateY(6px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes genreFloat{ 0%,100%{ opacity:1; transform: translateY(0); } 50%{ opacity:1; transform: translateY(-6px); } }
.gl-1{ top: 20%; left: 4%; }
.gl-2{ top: 27%; right: 4%; }
.gl-3{ bottom: 14%; left: 8%; }
.gl-4{ bottom: 14%; right: 2%; }

.audience-source{ position:absolute; bottom:0; left:0; }
.source-btn{ background:#fff; cursor:pointer; border:1px solid var(--border); }
.source-panel{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  z-index: 20;
}
.source-panel[hidden]{ display:none; }
.source-panel p{ font-size: 12.5px; line-height:1.55; color: var(--ink-soft); }

@media (max-width: 640px){
  .audience-number{ font-size: clamp(40px, 14vw, 64px); }
  .audience-sub{ font-size: 13px; }
  .genre-label{ font-size: 11.5px; padding: 7px 13px; }
  .gl-1{ top: 12%; left: 0; }
  .gl-2{ top: 18%; right: 0; }
  .gl-3{ bottom: 10%; left: 2%; }
  .gl-4{ bottom: 10%; right: 0; }
}

/* ---------- flow / how it works ---------- */
.flow{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.flow-step{ position:relative; padding: 0 20px 0 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .flow-step{ opacity: 0; transform: translateY(10px); }
.flow-step.is-visible{ opacity: 1; transform: translateY(0); }

.flow-connector{
  position:absolute; top: 22px; left: 56px; right: -6px; height: 2px;
  background: repeating-linear-gradient(to right, var(--border) 0 6px, transparent 6px 12px);
  overflow: visible;
  z-index: 1;
}
.flow-connector-fill{
  position:absolute; inset:0; width:0%;
  background: linear-gradient(to right, var(--accent), var(--violet));
  border-radius: 2px;
  transition: width .7s var(--ease);
}
.flow-connector-dot{
  position:absolute; top:50%; left:0%; width:7px; height:7px; border-radius:50%;
  background: var(--accent); transform: translate(-50%,-50%);
  opacity:0; box-shadow: 0 0 6px rgba(43,82,245,.7);
  transition: left .7s var(--ease), opacity .2s var(--ease);
}
.flow-step.is-active .flow-connector-fill{ width: 100%; }
.flow-step.is-active .flow-connector-dot{ left: 100%; opacity: 1; }
.flow-step.is-idle .flow-connector-dot{ animation: connectorIdle 3.2s ease-in-out infinite; opacity: .6; }
@keyframes connectorIdle{
  0%,100%{ left: 6%; opacity:.35; }
  50%{ left: 94%; opacity:.7; }
}

.flow-num{
  width: 44px; height:44px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-size: 14px; color: var(--accent);
  margin-bottom: 20px; position: relative; z-index: 2;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.flow-num.is-pulsing{ animation: numPulse .6s var(--ease); border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-pale); }
@keyframes numPulse{ 0%{ transform: scale(1); } 45%{ transform: scale(1.12); } 100%{ transform: scale(1); } }

.flow-step h4{ font-size: 16.5px; margin-bottom: 8px; }
.flow-step p{ font-size: 14.5px; color: var(--ink-soft); line-height:1.55; }
.flow-tag{
  display:inline-block; margin-top: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-pale); padding: 5px 10px; border-radius: 999px;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.js .flow-tag{ opacity: 0; transform: translateY(4px); }
.flow-step.is-active .flow-tag{ opacity: 1; transform: translateY(0); }

@media (max-width: 900px){
  .flow{ grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .flow-connector{ display:none; }
}
@media (max-width: 560px){
  .flow{ grid-template-columns: 1fr; }
}

.flow-5{ grid-template-columns: repeat(5,1fr); }
@media (max-width: 1000px){
  .flow-5{ grid-template-columns: 1fr 1fr; gap: 36px 20px; }
}
@media (max-width: 560px){
  .flow-5{ grid-template-columns: 1fr; }
}

.flow-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 780px){
  .flow-3{ grid-template-columns: 1fr; gap: 36px 20px; }
}

/* ---------- panel pairs (advertiser/publisher route panels) ---------- */
.panel-pair{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel{
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.panel:hover{ border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.panel .eyebrow{ margin-bottom: 16px; }
.panel h3{ font-size: 24px; margin-bottom: 10px; }
.panel p.desc{ color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; }
.check-list{ list-style:none; margin: 0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size: 14.5px; color: var(--ink-soft); }
.check-list svg{ width:16px; height:16px; margin-top:2px; flex-shrink:0; color: var(--accent); }

@media (max-width: 820px){ .panel-pair{ grid-template-columns: 1fr; } }
.panel-triple{ grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px){ .panel-triple{ grid-template-columns: 1fr; } }

/* ---------- benefit grid ---------- */
.benefit-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden;
}
.benefit{ background:#fff; padding: 30px 26px; transition: background .2s var(--ease); }
.benefit:hover{ background: var(--bg-subtle); }
.benefit:hover .idx svg{ transform: translate(1px,-1px); }
.benefit .idx{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); display: inline-flex; }
.benefit .idx svg{ width: 22px; height: 22px; color: var(--accent); transition: transform .25s var(--ease); }
.benefit h4{ font-size: 17px; margin: 14px 0 8px; }
.benefit p{ font-size: 14px; color: var(--ink-soft); line-height:1.5; }

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

.benefit-grid-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 780px){ .benefit-grid-3{ grid-template-columns: 1fr; } }

/* ---------- horizontal compact benefit row (advertiser "what you get") ---------- */
.benefit-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.benefit-row .item{ padding: 4px 0; }
.benefit-row .idx{ display:inline-flex; margin-bottom:12px; }
.benefit-row .idx svg{ width:20px; height:20px; color:var(--accent); }
.benefit-row h4{ font-size:15.5px; margin-bottom:6px; }
.benefit-row p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
@media (max-width: 820px){ .benefit-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .benefit-row{ grid-template-columns: 1fr; } }

/* ---------- publisher hero visual: eCPM comparison + fallback flow ----------
   A compact, constrained card (not a full-width diagram) built around the
   core publisher USP: higher eCPM from premium mobile app-install demand. */
.publisher-hero-visual{ max-width: 560px; }

.cpm-compare{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-sm);
}
.cpm-compare-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 24px;
}
.cpm-compare-title{
  font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-soft); letter-spacing: .01em;
}

.cpm-row{
  display: grid;
  grid-template-columns: 104px 1fr 60px;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cpm-row.is-loom{ margin-bottom: 20px; }
.cpm-label{ font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.cpm-row.is-loom .cpm-label{ color: var(--ink); font-weight: 600; }

.cpm-bar{
  height: 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.cpm-bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--ink-faint);
  transition: width 1.1s var(--ease);
}
.cpm-bar-fill.is-loom-fill{
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.cpm-value{ font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }
.cpm-row.is-loom .cpm-value{ color: var(--accent); }

.cpm-uplift{
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.cpm-uplift svg{ width: 18px; height: 18px; color: var(--positive); flex-shrink: 0; }
.cpm-uplift strong{ color: var(--positive); font-weight: 700; }

.fallback-row{
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.fallback-chip{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-faint);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px;
}
.fallback-chip svg{ width: 13px; height: 13px; }
.fallback-chip.is-filled{ color: var(--positive); border-color: var(--positive-pale); background: var(--positive-pale); }
.fallback-arrow{ color: var(--ink-faint); display: flex; }
.fallback-arrow svg{ width: 14px; height: 14px; }

@media (max-width: 480px){
  .cpm-row{ grid-template-columns: 84px 1fr 54px; gap: 10px; }
  .cpm-label{ font-size: 12px; }
  .fallback-row{ gap: 8px; }
  .fallback-chip{ font-size: 11px; padding: 6px 10px; }
}

/* ---------- compact three-stage process (advertiser "how it works") ---------- */
.process-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}
.process-stage{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.js .process-stage{ opacity: 0; transform: translateY(10px); }
.process-stage.is-visible{ opacity: 1; transform: translateY(0); }
.process-stage.is-loom{ background: var(--accent-pale); border-color: var(--accent-pale-2); }
.process-stage.is-glow{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }

.process-step{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.process-stage h4{ font-size: 17px; margin-bottom: 10px; }
.process-stage p{ font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

.process-connector{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  position: relative;
}
.process-connector-line{
  width: 100%;
  height: 1px;
  background: var(--border);
}
.process-connector-signal{
  position: absolute;
  top: 50%; left: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: 0;
  box-shadow: 0 0 8px rgba(43,82,245,0.55);
}
.process-connector-signal.is-traveling{ animation: processSignal .9s var(--ease) forwards; }
.process-connector.is-idle .process-connector-signal{
  animation: processSignalIdle 3.6s ease-in-out infinite;
}
.process-connector-arrow{
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  line-height: 0;
}
.process-connector-arrow svg{ width: 9px; height: 9px; }

@keyframes processSignal{
  0%{ left: 8px; opacity: 0; }
  12%{ opacity: 1; }
  88%{ opacity: 1; }
  100%{ left: calc(100% - 8px); opacity: 0; }
}
@keyframes processSignalIdle{
  0%, 100%{ left: 8px; opacity: 0; }
  10%{ opacity: .65; }
  50%{ left: calc(100% - 8px); opacity: .65; }
  60%{ opacity: 0; }
}

/* mobile: vertical timeline with a thin line and small step-marker dots
   instead of the desktop card grid */
@media (max-width: 900px){
  .process-grid{
    grid-template-columns: 1fr;
    padding-left: 32px;
    position: relative;
  }
  .process-connector{ display: none; }
  .process-stage{
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 32px 0;
    position: relative;
  }
  .process-stage:last-child{ padding-bottom: 0; }
  .process-stage.is-loom{ background: none; }
  .process-stage.is-glow{ box-shadow: none; }
  .process-stage.is-glow::before{ box-shadow: 0 0 0 4px var(--accent-pale); }
  .process-stage::before{
    content: "";
    position: absolute;
    left: -28px; top: 4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px #fff;
    transition: box-shadow .3s var(--ease);
  }
  .process-stage:not(:last-child)::after{
    content: "";
    position: absolute;
    left: -24.5px;
    top: 16px;
    bottom: -8px;
    width: 1px;
    background: var(--border);
  }
}

/* ---------- integration steps ---------- */
.integration-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.integration-col h4{
  font-size: 14px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing:.05em; color: var(--ink-faint);
  margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft);
}
.mini-steps{ display:flex; flex-direction:column; }
.mini-step{
  display:flex; align-items:center; gap:14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .mini-step{ opacity: 0; transform: translateY(10px); }
.mini-step.is-visible{ opacity: 1; transform: translateY(0); }
.mini-step:last-child{ border-bottom:none; }
.mini-step .ico{
  width:34px; height:34px; border-radius: 9px; background: var(--bg-subtle); border: 1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--accent);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mini-step.is-active .ico{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }

/* vertical timeline variant: connecting line through the marker column,
   used for the How It Works seven-stage loop instead of a bordered box */
.mini-steps.timeline{ position: relative; }
.mini-steps.timeline .mini-step{ border-bottom: none; position: relative; align-items: flex-start; }
.mini-steps.timeline .mini-step:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 17px; top: 48px; bottom: -14px;
  width: 1px;
  background: var(--border);
}
.mini-step:hover .ico{ transform: translate(2px,-2px); }
.mini-step .ico svg{ width:16px; height:16px; }
.mini-step .t{ font-size: 14.5px; font-weight: 500; }
.mini-step .d{ font-size: 12.5px; color: var(--ink-faint); margin-top:2px; }

/* ---------- horizontal loop flow (technology "full loop") ----------
   Wide-viewport replacement for the vertical timeline: markers sit on
   a shared rail with a travelling signal that pauses at each stage,
   then loops back to the start. JS measures real marker positions so
   the rail/signal always line up exactly, regardless of column widths.
   Below 1080px this is hidden in favour of .timeline-mobile-only. */
.timeline-mobile-only{ display: block; }
@media (min-width: 1081px){ .timeline-mobile-only{ display: none; } }

.loop-flow{ display: none; }
@media (min-width: 1081px){ .loop-flow{ display: block; } }

.loop-rail{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  margin-bottom: 20px;
  padding: 0 4px;
}
.loop-line{
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--border);
  transform: translateY(-50%);
}
.loop-line-fill{
  position: absolute;
  top: 50%; left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transform: translateY(-50%);
}
.loop-signal{
  position: absolute;
  top: 50%; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px rgba(43,82,245,.55);
  transition: left .5s var(--ease);
  z-index: 3;
}
.loop-marker{
  position: relative;
  z-index: 2;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint);
  transition: border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.loop-stage.is-active .loop-marker{
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-pale);
  transform: scale(1.1);
}

.loop-stages{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.loop-stage{ text-align: center; }
.loop-stage h4{ font-size: 13.5px; margin-bottom: 6px; line-height: 1.35; }
.loop-stage p{ font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

@media (max-width: 780px){ .integration-cols{ grid-template-columns: 1fr; gap: 32px; } }

/* ---------- three-stage integration flow (publisher) ---------- */
.route-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 32px; }
.route-steps .step{ padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background:#fff; }
.route-steps .step .num{ font-family: var(--f-mono); font-size:12px; color:var(--accent); margin-bottom:10px; display:block; }
.route-steps .step h4{ font-size:16px; margin-bottom:8px; }
.route-steps .step p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
@media (max-width: 820px){ .route-steps{ grid-template-columns: 1fr; } }

/* ---------- principles strip ---------- */
.principles{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.principle{
  padding: 24px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-subtle);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.principle:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.principle svg{ width:20px; height:20px; color: var(--accent); margin-bottom:14px; }
.principle h5{ font-family: var(--f-display); font-size:15px; font-weight:600; margin-bottom:6px; }
.principle p{ font-size: 13px; color: var(--ink-soft); line-height:1.5; }
@media (max-width: 900px){ .principles{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .principles{ grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink);
  background-image: radial-gradient(700px 300px at 85% 20%, rgba(141,123,245,0.35), transparent 60%),
                     radial-gradient(600px 260px at 10% 90%, rgba(43,82,245,0.4), transparent 60%);
  border-radius: var(--radius-lg); padding: 56px 48px; color: #fff;
  display:flex; align-items:center; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
}
.cta-band h2{ color:#fff; font-size: 32px; max-width: 460px; position:relative; }
.cta-band p{ color: #b7c0e8; margin-top:10px; font-size:15px; max-width:420px; position:relative; }
.cta-band .btn{ position:relative; flex-shrink:0; }
@media (max-width: 780px){ .cta-band{ flex-direction:column; align-items:flex-start; padding: 40px 28px; } }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--border-soft); padding: 48px 0 32px; }
.footer-top{ display:flex; justify-content: space-between; align-items:flex-start; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.footer-brand p{ font-size: 13.5px; color: var(--ink-faint); margin-top:10px; max-width:220px; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h5{ font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size: 14px; color: var(--ink-soft); transition: color .2s; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{ display:flex; justify-content: space-between; align-items:center; padding-top: 24px; font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; gap: 12px; }
.footer-bottom .legal-links{ display:flex; gap:20px; }

@media (max-width: 640px){
  .footer-top{ flex-direction:column; }
  .footer-links{ gap: 32px; }
}

/* ---------- technology dashboard console ---------- */
.console{
  background: #0c1730; border-radius: var(--radius-lg); padding: 40px; color: #dfe6ff; position: relative; overflow: hidden;
}
.console::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 260px at 15% 0%, rgba(43,82,245,0.25), transparent 60%),
    radial-gradient(400px 240px at 100% 100%, rgba(141,123,245,0.18), transparent 60%);
  pointer-events:none;
}
.console.is-drifting::before{ animation: consoleDrift 14s ease-in-out infinite alternate; }
@keyframes consoleDrift{
  from{ background-position: 0% 0%, 100% 100%; }
  to{ background-position: 8% 6%, 92% 94%; }
}
.console-head{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom: 30px; flex-wrap:wrap; }
.console-head h3{ color:#fff; font-size:24px; max-width:420px; }
.console-head p{ color:#8fa0d4; font-size:14px; margin-top:8px; max-width:400px; }
.console-head .tag-pill{ color:#dfe6ff; border-color: rgba(255,255,255,0.18); }
.console-metrics{
  position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); overflow:hidden; margin-bottom: 4px;
}
.console-metric{ background: rgba(10,20,45,0.6); padding: 18px 20px; }
.console-metric .label{ font-family: var(--f-mono); font-size:11px; color:#7c8bc0; letter-spacing:.03em; text-transform:uppercase; }
.console-metric .value{ font-family: var(--f-display); font-size:22px; font-weight:600; color:#fff; margin-top:8px; }
.console-metric .delta{ font-family: var(--f-mono); font-size:12px; margin-top:4px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .console-metric .delta{ opacity:0; transform: translateY(4px); }
.console-metric .delta.is-visible{ opacity:1; transform: translateY(0); }
.delta.up{ color:#3fd67a; }
.delta.down{ color:#7fd6ff; }
.delta.is-glow{ animation: deltaGlow .9s var(--ease); }
@keyframes deltaGlow{ 0%{ text-shadow:0 0 0 rgba(63,214,122,0); } 40%{ text-shadow:0 0 10px rgba(63,214,122,.7); } 100%{ text-shadow:0 0 0 rgba(63,214,122,0); } }

.console-table{ position:relative; margin-top: 20px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); overflow:hidden; }
.console-row{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 0.7fr; gap: 8px; padding: 13px 18px; align-items:center; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06); position:relative;
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .2s var(--ease);
}
.js .console-row{ opacity: 0; transform: translateY(10px); }
.console-row.is-visible{ opacity: 1; transform: translateY(0); }
.console-row:hover{ background: rgba(255,255,255,0.035); }
.console-row:last-child{ border-bottom:none; }
.console-row.head{ font-family: var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#7c8bc0; opacity:1; transform:none; }
.console-row .game{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:500; }
.game-dot{ width:8px; height:8px; border-radius:3px; flex-shrink:0; transform-box: fill-box; transform-origin:center; }
.game-dot.is-pulsing{ animation: dotPulseOnce .8s var(--ease); }
@keyframes dotPulseOnce{ 0%{ box-shadow: 0 0 0 0 currentColor; } 60%{ box-shadow: 0 0 0 6px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.console-row .sub{ display:block; font-size:11px; color:#7c8bc0; font-weight:400; }
.spark-line{ transition: stroke-dashoffset 1s var(--ease); }
.console-row.is-visible .spark-line{ stroke-dashoffset: 0; }
.row-status{
  position:absolute; right:18px; top:50%; transform: translate(0,-50%);
  font-family: var(--f-mono); font-size: 10.5px; color:#8fa0d4; background: rgba(255,255,255,0.06);
  padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.console-row:hover .row-status{ opacity: 1; transform: translate(-2px,-50%); }

@media (max-width: 900px){
  .console-metrics{ grid-template-columns: 1fr 1fr; }
  .console-row{ grid-template-columns: 1.4fr 1fr 1fr; }
  .console-row span:nth-child(4), .console-row span:nth-child(5){ display:none; }
  .row-status{ display:none; }
}

/* light (advertiser-facing) console variant */
.console-light{
  background: #fff; color: var(--ink);
  border: 1px solid var(--border);
}
.console-light::before{ display:none; }
.console-light .light-head{ color: var(--ink); }
.console-light .light-sub{ color: var(--ink-soft); }
.console-metrics-light{
  background: var(--border-soft); border-color: var(--border-soft);
}
.console-metric.light{ background: #fff; }
.console-metric.light .label{ color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.console-metric.light .value{ color: var(--ink); }

.metric-info{
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  background: none;
  color: var(--ink-faint);
  font-family: var(--f-mono);
  font-size: 9.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: help;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.metric-info:hover, .metric-info:focus-visible{
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- pause continuous decorative loops when tab is hidden ----------
   Toggled by a visibilitychange listener in main.js. Entrance/one-shot
   animations are untouched — this only targets infinite loops. */
.motion-suspended .strip-track,
.motion-suspended .audience-visual.is-animating .ring-1,
.motion-suspended .audience-visual.is-animating .ring-2,
.motion-suspended .genre-label.is-floating,
.motion-suspended .process-connector.is-idle .process-connector-signal,
.motion-suspended .flow-step.is-idle .flow-connector-dot,
.motion-suspended .console.is-drifting::before,
.motion-suspended .twinkle-star,
.motion-suspended .constellation-star{
  animation-play-state: paused;
}

/* ---------- utility ---------- */
.small-caption{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-faint); }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; gap: 40px; } }

.tag-pill{ display:inline-flex; align-items:center; gap:6px; font-family: var(--f-mono); font-size:11.5px; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }
.dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }

/* ---------- contact page: Calendly inline widget ---------- */
.calendly-frame{
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.calendly-inline-widget{ border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; position: relative; }
.calendly-loading{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #fff;
  font-family: var(--f-mono); font-size: 13px; color: var(--ink-faint);
}
.calendly-loading a{ color: var(--accent); font-weight: 600; }
@media (max-width: 700px){
  .calendly-inline-widget{ height: 900px !important; }
}