/* ---------- TRY ROAS — design tokens ---------- */
:root {
  --ink: #0A0A0A;
  --ash: #131313;
  --char: #1B1B1B;
  --line: rgba(237, 237, 237, 0.10);
  --line-2: rgba(237, 237, 237, 0.18);
  --bone: #EDEDED;
  --mist: #8A8A8A;
  --dim: #5A5A5A;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --gut: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  /* scroll-behavior smooth set in animations section, with reduced-motion fallback */
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* overflow-x lives on body only — putting it on html alongside
   scroll-behavior breaks smooth-scroll on Safari/Chromium. */
body { font-feature-settings: "ss01", "ss02", "cv11"; overflow-x: hidden; }
::selection { background: var(--bone); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* layout */
.shell { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gut); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-12 { gap: 48px; }

/* type utilities */
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); font-weight: 400; }
.mono-bone { color: var(--bone); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow .tick { width: 18px; height: 1px; background: var(--mist); display: inline-block; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bone); display: inline-block; }
.dot.live { background: #E83A2F; box-shadow: 0 0 0 0 rgba(232,58,47,.6); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,58,47,.6); }
  100% { box-shadow: 0 0 0 10px rgba(232,58,47,0); }
}

/* Reusable display headline (Geist semibold, big) */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
}
.display.hairline { font-weight: 400; }
.display.semi { font-weight: 600; }

/* ---------- Global custom cursor ---------- */
/* Hide the OS cursor across the WHOLE page once the JS attaches the
   `has-custom-cursor` class. The `.hero { cursor: none }` rule below stays
   as a fallback for the moment between first paint and JS hydration so the
   hero never flashes a native arrow. Buttons/links opt back in. */
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none !important; }
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor [role="button"] { cursor: none !important; }
.global-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 28px;
  margin-left: -1px; margin-top: -1px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .15s ease;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.55))
          drop-shadow(0 0 14px rgba(255,255,255,0.28))
          drop-shadow(0 0 28px rgba(255,255,255,0.12));
  will-change: transform, opacity;
}
.global-cursor svg { display: block; }
.global-cursor.is-down { transform-origin: 0 0; }
/* On touch devices, never show — even if JS attaches the class somehow */
@media (hover: none) {
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }
  .global-cursor { display: none; }
}

/* Hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,0.045), transparent 60%),
    var(--ink);
}
.hero::before {
  /* Subtle grid lines behind the stars — sits below the radial wash,
     above the page bg. The mask fades the grid out at the edges so it
     doesn't look like a hard-edged sheet of paper. */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 600px) {
  .hero::before { background-size: 48px 48px; }
}
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

/* Star field — split into TWO canvases:
   .star-field-bg sits BEHIND the carousel + content (z-index: 1)
   .star-field-fg sits ON TOP so the cursor + lines paint over tiles
   (z-index: 20). Both are pointer-events:none. */
.star-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.star-field-bg { z-index: 1; }
.star-field-fg { z-index: 20; }
/* Hide the OS cursor only inside the hero, since the canvas paints its own
   glowing replacement. Buttons opt back in to a normal pointer. */
.hero { cursor: none; }
.hero a, .hero button { cursor: pointer; }
@media (hover: none) {
  /* Touch devices — keep the native tap experience, don't replace cursor */
  .hero { cursor: auto; }
}

/* Header */
.topnav {
  position: fixed;
  top: 24px; left: 0; right: 0;
  z-index: 50;
  display: flex; justify-content: center;
  padding: 0 var(--gut);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.topnav.is-hidden { transform: translate3d(0, -140%, 0); }
.nav-pill {
  display: inline-flex; align-items: center;
  gap: 32px;
  padding: 10px 12px 10px 26px;
  background: rgba(14, 14, 14, 0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
.foot-brand-img {
  height: 110px;
  width: auto;
  display: block;
}
.brand-mark .glyph {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 4px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: -0.03em;
}
.navlinks { display: flex; gap: 26px; }
.navlinks a {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: rgba(237,237,237,0.7);
  transition: color .25s ease;
}
.navlinks a:hover { color: var(--bone); }
.nav-cta {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  background: var(--bone); color: var(--ink);
  border: 0;
  padding: 10px 18px; border-radius: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: #FFFFFF; transform: translateY(-1px); }

/* Hamburger button — hidden on desktop, visible on mobile */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  align-items: center; justify-content: center;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  transition: background .2s ease;
}
.nav-burger:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 760px) {
  .navlinks { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-burger { display: inline-flex; }
  /* On mobile the header becomes a full-width solid rectangle pinned to
     the top of the screen — no floating pill, no rounded corners. */
  .topnav { top: 0; padding: 0; }
  .nav-pill {
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 16px;
    gap: 0;
    justify-content: space-between;
  }
  .nav-pill .brand-mark { font-size: 16px; }
}

/* Mobile menu — appears as a sheet at the top of the screen, content
   below remains visible (matches the reference where stars + headline
   show under the menu rather than being covered). */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 88px 24px 28px;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
@media (max-width: 760px) {
  .mobile-menu { display: block; }
}
.mobile-menu.is-open { transform: translateY(0); pointer-events: auto; }
.mobile-menu-links {
  display: flex; flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}
.mobile-menu-links a {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.01em;
  padding: 4px 0;
}
.mobile-menu-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--bone); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  padding: 16px 24px;
  border-radius: 14px;
  text-decoration: none;
}

/* Hero content */
.hero-inner {
  position: relative; z-index: 3;
  padding-top: clamp(120px, 13vh, 160px);
  padding-bottom: 8px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mist);
}
.hero-eyebrow .tick { width: 28px; height: 1px; background: var(--mist); display: inline-block; }

.hero-title {
  margin: 18px auto 0;
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: -0.04em; line-height: 0.95;
  font-size: clamp(36px, 6.2vw, 88px);
  max-width: 17ch;
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.12),
    0 0 60px rgba(255, 255, 255, 0.08);
}
.hero-title .em {
  font-style: italic; font-weight: 700; color: var(--bone);
  background: linear-gradient(180deg, #FFFFFF, #B4B4B4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Italic letters slant past their own bounding box. With
     -webkit-background-clip: text, the right edge of a slanted glyph (the
     "o" in "Into" was sitting at the very end of its span) gets clipped
     by the background-paint rect. Pad the span so the slant has room. */
  padding-right: 0.08em;
}
.hero-title .em-light {
  font-weight: 400;
  padding-right: 0.06em;
}
.brk-mobile { display: none; }
@media (max-width: 600px) {
  .brk-mobile { display: inline; }
}
.hero-sub {
  margin: 6px auto 0;
  max-width: 52ch;
  color: rgba(237,237,237,0.62);
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.5;
}
.hero-cta-row {
  margin: 32px auto 0;
  display: inline-flex; align-items: center; gap: 18px;
}
@media (max-width: 600px) {
  .hero-inner { padding-top: clamp(140px, 17vh, 180px); }
  .hero-title { font-size: clamp(28px, 8vw, 40px); line-height: 1.08; max-width: 20ch; }
  .hero-title .em { white-space: normal; }
  .hero-sub { margin-top: 10px; }
  .hero-cta-row {
    margin-top: 26px;
    display: inline-flex;
    gap: 8px;
    width: auto;
    justify-content: center;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-secondary {
    flex: 0 0 auto;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 13px 22px;
    border-radius: 14px;
  }
  .hero-cta-row .btn-secondary {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.08);
  }
  /* Drop the arrow on mobile — reference is title-case label only */
  .hero-cta-row .btn-primary span[aria-hidden] { display: none; }
}
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bone); color: var(--ink);
  padding: 16px 28px; border-radius: 16px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 19px;
  padding: 3px;
  background: conic-gradient(from var(--hb-angle, 0deg),
    transparent 0deg,
    rgba(190, 255, 110, 0) 40deg,
    rgba(190, 255, 110, 1) 95deg,
    rgba(230, 255, 160, 1) 130deg,
    rgba(190, 255, 110, 1) 165deg,
    rgba(190, 255, 110, 0) 220deg,
    transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-secondary:hover::before {
  opacity: 1;
  animation: hb-spin 2s linear infinite;
}
@property --hb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes hb-spin {
  to { --hb-angle: 360deg; }
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.04);
  background: #FFFFFF;
  box-shadow: 0 16px 40px -8px rgba(190, 255, 110, 0.55), 0 0 0 1px rgba(190, 255, 110, 0.18);
}
.btn-secondary {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1a1a;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px 28px; border-radius: 16px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s ease, border-color .2s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  transform: translateY(-3px) scale(1.04);
  background: #232323;
  border-color: rgba(190, 255, 110, 0.4);
  box-shadow: 0 16px 40px -8px rgba(190, 255, 110, 0.45), 0 0 0 1px rgba(190, 255, 110, 0.15);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mist);
  padding: 14px 4px;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--bone); }
.btn-ghost .chev { transition: transform .25s ease; }
.btn-ghost:hover .chev { transform: translateX(3px); }

/* Hero status bar */
.hero-status {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 18px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
}
.hero-status .scroll-arrow { width: 24px; height: 1px; background: var(--dim); display: inline-block; }

/* ---------- Inward concave carousel ---------- */
.stage {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(540px, 68vh, 760px);
  perspective: 1100px;
  perspective-origin: 50% 55%;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.stage .tile { pointer-events: auto; }
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, transparent, #0A0A0A);
  pointer-events: none;
  z-index: 5;
}

/* The signature green vertical light beam behind the center of the arc */
.green-beam {
  position: absolute;
  left: 50%; top: 8%;
  width: 0; height: 84%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.green-beam .beam-core {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(170, 255, 90, 0.0) 4%,
    rgba(190, 255, 110, 0.95) 22%,
    rgba(220, 255, 150, 1) 50%,
    rgba(190, 255, 110, 0.95) 78%,
    rgba(170, 255, 90, 0.0) 96%,
    transparent 100%);
  box-shadow:
    0 0 12px rgba(190, 255, 110, 0.9),
    0 0 28px rgba(170, 255, 90, 0.55),
    0 0 60px rgba(160, 255, 80, 0.35);
  border-radius: 2px;
  animation: beamPulse 4.2s ease-in-out infinite;
}
.green-beam .beam-halo {
  position: absolute;
  left: 50%; top: 10%; bottom: 10%;
  width: 320px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 90% at 50% 50%,
    rgba(160, 255, 80, 0.28),
    rgba(160, 255, 80, 0.08) 35%,
    transparent 70%);
  filter: blur(20px);
}
.green-beam .beam-floor {
  position: absolute;
  left: 50%; bottom: -40px;
  width: 480px; height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 60% 50% at 50% 100%,
    rgba(160, 255, 80, 0.5),
    rgba(160, 255, 80, 0.15) 35%,
    transparent 70%);
  filter: blur(30px);
  opacity: 0.7;
}
@keyframes beamPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: 0.85; transform: translateX(-50%) scaleY(0.985); }
}

.track {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 3;
}
@media (max-width: 600px) {
  .track { top: 50%; }
  .stage {
    position: relative;
    left: auto; right: auto; bottom: auto;
    height: 360px;
    margin-top: 40px;
    perspective: 800px;
  }
  .tile {
    width: 140px; height: 200px;
    /* On mobile the carousel is frozen — kill the opacity/transform
       transition so re-renders snap into place without a slow-mo fade. */
    transition: none !important;
  }
  .tile .frame { border-radius: 14px; }
  .hero { height: auto; min-height: 100svh; padding-bottom: 16px; }
  .hero-status { display: none; }
  .green-beam { height: 70%; top: 14%; }
  .green-beam .beam-halo { width: 180px; }
  .green-beam .beam-floor { width: 280px; height: 140px; }
}
.tile {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 580px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity .4s ease;
  will-change: transform, opacity;
}
.tile .frame {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 50px 120px -40px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  background: #0E0E0E;
  isolation: isolate;
}
.tile image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.tile .tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  background: transparent;
}
/* VideoSlot reused inside .perf-media — make it fill the card edge-to-edge
   so uploaded MP4s aren't shown at their intrinsic size. */
.perf-media .video-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.perf-media .tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile .video-slot {
  position: absolute; inset: 0;
  z-index: 1;
  cursor: pointer;
}
.tile .video-slot.is-drag {
  outline: 2px dashed rgba(190, 255, 110, 0.7);
  outline-offset: -8px;
}
.tile .video-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  pointer-events: none;
  z-index: 8;
  transition: opacity .2s ease;
}
.tile .video-slot:hover .video-empty { opacity: 0.85; }
.tile .video-empty-plus {
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: 30px; font-weight: 300; line-height: 1;
  color: #fff;
}
.tile .video-empty-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tile .video-tools {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; gap: 6px;
  z-index: 9;
}
.tile .video-tools button {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.tile .video-tools button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(190, 255, 110, 0.5);
}
.tile .tone-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}
.tile .halftone {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,0.7) 0.6px, transparent 1.2px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}
.tile .vignette {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.05) 35%, rgba(0,0,0,0) 65%);
}
.tile .sheen {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.08) 48%,
    rgba(255,255,255,0.0) 60%);
  opacity: 0.6;
}

/* Default placeholder texture inside an empty image-slot, so the tile
   reads as imagery even before the user drops a file. */
.tile image-slot::part(empty-bg),
.tile image-slot {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.025) 0 2px,
      transparent 2px 8px),
    var(--tile-bg, linear-gradient(165deg, #2a2a2a 0%, #141414 60%, #080808 100%));
}

/* Per-tile tones — different gradients + tint */
.tile.tone-halftone { --tile-bg: linear-gradient(165deg, #3a3a3a, #1a1a1a 60%, #0a0a0a); }
.tile.tone-halftone .halftone   { opacity: 0.55; }
.tile.tone-halftone .tone-overlay { background: linear-gradient(180deg, #d0d0d0, #2a2a2a); opacity: 0.75; mix-blend-mode: saturation; }

.tile.tone-mono     { --tile-bg: linear-gradient(170deg, #1c1c1c, #0a0a0a 60%, #050505); }
.tile.tone-mono .tone-overlay { background: linear-gradient(180deg, #ffffff, #0a0a0a); opacity: 0.6; mix-blend-mode: saturation; }
.tile.tone-mono .halftone   { opacity: 0.28; }

.tile.tone-dim      { --tile-bg: linear-gradient(170deg, #1a1d22, #0d1014 60%, #050608); }
.tile.tone-dim .tone-overlay { background: linear-gradient(160deg, #4a5a6e, #14181f); opacity: 0.35; mix-blend-mode: color; }

.tile.tone-warm     { --tile-bg: linear-gradient(160deg, #3a1c10 0%, #c84418 35%, #5a1a08 75%, #1a0805); }
.tile.tone-warm .tone-overlay { background: linear-gradient(160deg, #ff6a2a, #1a0805); opacity: 0.5; mix-blend-mode: color; }

.tile.tone-cool     { --tile-bg: linear-gradient(175deg, #20262c, #0e1116 60%, #050608); }
.tile.tone-cool .tone-overlay { background: linear-gradient(165deg, #d7e8ff, #1a2230); opacity: 0.4; mix-blend-mode: color; }

.tile.tone-vivid    { --tile-bg: linear-gradient(155deg, #ff2eb2 0%, #b026d6 45%, #3a1240 80%, #15061a); }
.tile.tone-vivid .tone-overlay { background: linear-gradient(155deg, #ff3ec2, #2a0a2a); opacity: 0.55; mix-blend-mode: color; }

/* ---------- Sections shared ---------- */
section { position: relative; }
.section {
  position: relative;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(20px, 2vw, 32px);
  padding-inline: var(--gut);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 6vw, 80px); flex-wrap: wrap; }
.section-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-eyebrow .tick { width: 28px; height: 1px; background: var(--mist); }
.section-title {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: -0.035em; line-height: 0.95;
  font-size: clamp(40px, 6.5vw, 96px);
  max-width: 18ch;
}
.section-title em { font-style: italic; font-weight: 400; color: rgba(237,237,237,0.7); }

/* ---------- Scale callout (red check + pill badge + huge stat) ---------- */
.scale-section {
  position: relative;
  background: var(--ink);
  padding: clamp(80px, 14vw, 180px) var(--gut) clamp(40px, 6vw, 80px);
  margin-top: -160px;
}
@media (max-width: 600px) {
  .scale-section { padding-top: 40px; margin-top: 0; position: relative; z-index: 5; }
}
.scale-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.scale-check {
  width: clamp(72px, 8vw, 110px);
  height: auto;
  margin-bottom: -6px;
  filter: drop-shadow(0 0 18px rgba(255, 59, 34, 0.35));
}
.scale-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: 0;
}
.scale-headline {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.92;
  font-size: clamp(28px, 4.6vw, 62px);
  color: var(--bone);
  text-transform: uppercase;
  max-width: 18ch;
}
.scale-headline .scale-prefix {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-right: 0.28em;
  color: var(--bone);
  -webkit-text-stroke: -0.5px currentColor;
          text-stroke: -0.5px currentColor;
  paint-order: stroke fill;
}
.scale-headline .scale-emph {
  /* eurostile-extended (Adobe Fonts kit aqp8wqx) — wide geometric display.
     Falls back through Michroma → system sans if the kit is unavailable. */
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 75px;
  letter-spacing: -0.07em;
  vertical-align: 0.04em;
}
.scale-headline .scale-emph + .scale-emph,
.scale-headline .scale-emph { /* kept for older selector compatibility */ }
@media (max-width: 600px) {
  .scale-section { padding-block: 70px 32px; }
  .scale-headline { font-size: clamp(28px, 9vw, 52px); max-width: 14ch; }
  .scale-headline .scale-emph { font-size: 38px; }
}
/* ---------- Ad-type tabs (Tabbed Switcher) ---------- */
.section-head-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: center;
}
.section-head-center .section-title { text-align: center; margin: 0 auto; }
.section-head-center .scale-pill { margin: 0; }

/* "Ads that print / REVENUE." — matches the "How do we serve / BRANDS?"
   typographic system: regular line 1, eurostile-extended display line 2. */
.perf-title {
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.92;
  max-width: none;
  margin: 0 auto;
}
.perf-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
}
.perf-title .line-2 {
  display: block;
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
@media (max-width: 600px) {
  .perf-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .perf-title .line-2 { font-size: 38px; }
}
.adtype-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 0 auto clamp(18px, 2.4vw, 32px);
  padding: 6px;
  background: #0e0e0e;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.adtype-tab {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  color: rgba(237,237,237,0.7);
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.adtype-tab:hover { color: var(--bone); }
.adtype-tab.is-active {
  background: var(--bone);
  color: var(--ink);
}
.adtype-tab .adtype-count {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  opacity: 0.65;
}
.adtype-tab.is-active .adtype-count { background: rgba(0,0,0,0.12); opacity: 0.85; }
.adtype-tab:not(.is-active) .adtype-count { background: rgba(255,255,255,0.06); }
@media (max-width: 600px) {
  .adtype-tabs {
    border-radius: 18px;
    padding: 4px;
    gap: 4px;
    width: 100%;
  }
  .adtype-tab {
    flex: 1 1 auto;
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 14px;
    justify-content: center;
  }
  .adtype-tab .adtype-count { display: none; }
}
.clients {
  position: relative;
  z-index: 6;
  background: var(--ink);
  padding: 0 var(--gut) clamp(20px, 2vw, 32px);
}
.clients-rail {
  position: relative;
  border: 1px solid #FFFFFF;
  border-radius: 28px;
  /* Equal top & bottom padding so cards sit symmetrically inside the rail.
     The pill sits above the rail (top: -16px) — it doesn't push the cards
     down because it's absolute-positioned. Earlier we had padding-top: 56px
     to "make room" for the pill, but the pill is outside the box, so all
     that did was create an asymmetric gap. Keeping both at 18px lines the
     top whitespace up with the bottom one. */
  padding: 18px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,0.035), transparent 60%),
    transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 0.5px rgba(255,255,255,0.05);
}
.clients-pill {
  position: absolute;
  top: -16px; left: 0;
  z-index: 3;
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  background: #EDEDED;
  color: #0A0A0A;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.clients-pill-q {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #1A1A1A;
  color: #EDEDED;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.clients-pill-q:hover { background: #2A2A2A; }
.clients-marquee {
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  /* Soft fade at left + right edges so cards dissolve in/out smoothly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.clients-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
  /* Promote each card into its own composite layer so the marquee transform
     is a pure GPU translate — no per-card paint on every frame. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cli-card {
  flex: 0 0 230px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px;
  background: transparent;
  border: 0.7px solid #FFFFFF;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35);
}
.cli-name {
  display: flex; align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.cli-media {
  position: relative;
  width: 100%;
  /* 3:4 portrait — matches vertical ad creative ratio (Reels / TikTok / Shorts) */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(165deg, #2a2a2a 0%, #141414 60%, #0a0a0a 100%);
}
.cli-media image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.cli-media .video-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.cli-media video,
.cli-media .video-slot video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cli-foot {
  display: flex; flex-direction: column; gap: 12px;
}
.cli-arrow { display: none; }
.cli-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
}
.cli-stat { display: contents; }
.cli-stat-v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.cli-stat-l {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(237,237,237,0.55);
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 600px) {
  .clients { padding: 0 16px clamp(40px, 8vw, 80px); }
  .clients-rail { padding: 14px; border-radius: 22px; }
  /* Pill: match desktop look (same size + bold), just nudge up slightly so
     it sits visually centered on the border on mobile (where line-height
     rendering rounds it down a touch). */
  .clients-pill { top: -20px; }
  .clients-pill-q { width: 20px; height: 20px; font-size: 10px; }
  .cli-card { flex: 0 0 180px; padding: 12px; gap: 12px; }
  .cli-name { font-size: 16px; }
  .cli-stat-v { font-size: 13px; }
  .cli-stat-l { font-size: 11px; }
}

/* ---------- Services v2 (How do we serve CREATORS?) ---------- */
.services-v2 {
  position: relative;
  background: var(--ink);
  padding: clamp(24px, 3vw, 44px) var(--gut) clamp(20px, 2vw, 32px);
  color: var(--bone);
}
@media (max-width: 600px) {
  .services-v2 { padding: 20px 24px 16px; }
  .services-v2-pillwrap { margin-bottom: 18px; }
  .services-v2-title { margin: 0 auto 4px; }
}
.services-v2-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.services-v2-pillwrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.services-v2-pill {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: #141414;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.services-v2-title {
  margin: 0 auto 56px;
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.92;
  max-width: none;
}
.services-v2-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
  margin-bottom: 0;
}

/* ── Title cinematic reveal ──────────────────────────────
   Each direct-child span of `.title-reveal` is a mask
   (overflow hidden) and its `.title-inner` slides up from
   below + blur softens out + opacity fades in. Successive
   lines stagger via :nth-of-type for a cinematic cascade. */
.title-reveal > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* keep descenders / italic slant visible */
}
.title-reveal .title-inner {
  display: inline-block;
  transform: translateY(115%) skewY(4deg);
  opacity: 0;
  filter: blur(10px);
  transition:
    transform 1.05s cubic-bezier(.16,.84,.28,1),
    opacity .9s ease,
    filter .9s ease;
  will-change: transform, opacity, filter;
}
.title-reveal.in .title-inner {
  transform: translateY(0) skewY(0);
  opacity: 1;
  filter: blur(0);
}
.title-reveal.in > span:nth-of-type(2) .title-inner {
  transition-delay: .18s;
}
.title-reveal.in > span:nth-of-type(3) .title-inner {
  transition-delay: .34s;
}
@media (prefers-reduced-motion: reduce) {
  .title-reveal .title-inner { transition: none; transform: none; opacity: 1; filter: none; }
}

.services-v2-title .line-2 {
  display: block;
  /* eurostile-extended (Adobe Fonts kit aqp8wqx) — same family as the
     "SPEND OPTIMIZED" scale headline so the typographic voice matches. */
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
@media (max-width: 600px) {
  .services-v2-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .services-v2-title .line-2 { font-size: 38px; }
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 56px;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .pillars { gap: 12px; }
  .pillar { padding: 22px 18px 20px; gap: 14px; }
  .pillar-icon { width: 60px; height: 60px; }
  .pillar-icon svg { width: 26px; height: 26px; }
  .pillar-title { font-size: 15px; }
  .pillar-desc { font-size: 12px; line-height: 1.35; margin-top: -6px; }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; gap: 12px; max-width: 100%; width: 100%; padding: 0; }
  .pillar { aspect-ratio: auto; padding: 24px 22px 22px; gap: 14px; min-width: 0; max-width: 100%; }
  .pillar-icon { width: 60px; height: 60px; }
  .pillar-icon svg { width: 26px; height: 26px; }
  .pillar-title { font-size: 16px; }
  .pillar-desc { font-size: 13px; line-height: 1.35; margin-top: -6px; }
}
.pillar {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 22px 24px 22px;
  background: #0C0C0C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}
.pillar-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--bone);
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.pillar-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  color: rgba(237,237,237,0.6);
  max-width: 30ch;
  font-weight: 400;
  margin-top: -8px;
}
.compare {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,255,255,0.03), transparent 60%),
    #0C0C0C;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 36px clamp(20px, 3vw, 44px);
}
.compare-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.compare-head {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  align-items: start;
}
.compare-col-label {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.compare-col { text-align: left; }
.compare-col-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.compare-col-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(237,237,237,0.55);
  max-width: 30ch;
  margin: 0 auto;
}
.compare-rows { display: flex; flex-direction: column; }
.compare-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row-label {
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(237,237,237,0.85);
  letter-spacing: -0.005em;
}
.compare-cell {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
}
/* Text-comparison variant — left-aligned, smaller, two-tone (trad muted,
   AI bright). Used when each cell holds a feature description rather than
   a check/cross icon. */
.compare-cell.compare-text {
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  padding-right: 12px;
}
.compare-cell.compare-text.trad { color: rgba(237, 237, 237, 0.5); }
.compare-cell.compare-text.ai   { color: var(--bone); font-weight: 500; }
.compare-cell .check { color: var(--bone); font-weight: 600; }
.compare-cell .cross { color: rgba(237,237,237,0.25); font-weight: 400; }
@media (max-width: 700px) {
  /* Keep the desktop 3-column layout on mobile too — just compress fonts
     and tighten gaps so each row reads as a clean symmetrical comparison
     without overflowing the viewport. */
  .compare { padding: 22px 16px; border-radius: 18px; }
  .compare-grid {
    gap: 10px;
    grid-template-columns: 0.9fr 1fr 1fr;
  }
  .compare-col-label { font-size: 12px; }
  .compare-col-title { font-size: 12px; }
  .compare-row-label { font-size: 12px; }
  .compare-cell.compare-text { font-size: 11.5px; line-height: 1.4; padding-right: 4px; }
  .compare-row { padding: 14px 0; }
  .compare-head { padding: 14px 0 12px; }
}

.marquee {
  overflow: hidden;
  padding-block: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-row {
  display: flex; width: max-content; will-change: transform;
  font-family: var(--font-sans); font-weight: 400; font-style: italic;
  font-size: clamp(40px, 8vw, 96px); letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee-row span.item { display: inline-flex; align-items: center; gap: 32px; padding-inline: 32px; }
.marquee-row .dotmark { width: 8px; height: 8px; border-radius: 999px; background: var(--bone); display: inline-block; }

/* Services list */
.services { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.svc-row {
  display: grid; grid-template-columns: 56px 1.6fr 1.2fr 160px;
  gap: 24px; align-items: start;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
  transition: background .25s ease;
}
.svc-row:first-child { border-top: 0; }
.svc-row:hover { background: rgba(255,255,255,0.015); }
.svc-row .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); padding-top: 14px; }
.svc-row .t {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(36px, 5.5vw, 72px); line-height: 0.96;
  display: flex; align-items: baseline; gap: 14px;
}
.svc-row .t .arrow { font-size: 0.5em; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.svc-row:hover .t .arrow { opacity: 1; transform: translateX(0); }
.svc-row .d { color: rgba(237,237,237,0.6); font-size: 15px; line-height: 1.5; max-width: 38ch; padding-top: 22px; }
.svc-row .m { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); padding-top: 22px; text-align: right; }
@media (max-width: 800px) {
  .svc-row { grid-template-columns: 40px 1fr; }
  .svc-row .d, .svc-row .m { grid-column: 2 / -1; padding-top: 14px; text-align: left; }
}

/* Performance / case studies */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
@media (max-width: 900px) { .perf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  /* Mobile: convert grid to a horizontally-swipeable rail with snap, like
     Instagram posts. One card visible at a time; flick to advance. */
  .perf-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    /* Negative inline margin so the rail bleeds out of the section gutter
       and the first card sits flush with the screen edge. */
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut);
    /* Reserve space so the last card's snap-end works correctly. */
    scroll-padding-inline: var(--gut);
  }
  .perf-grid::-webkit-scrollbar { display: none; }
  .perf-grid > .perf-card {
    flex: 0 0 calc(100% - var(--gut) * 2);
    scroll-snap-align: start;
  }
}

/* Page dots — mobile only, mirrors which card is in view */
.perf-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
@media (max-width: 600px) {
  .perf-dots { display: flex; }
}
.perf-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.perf-dot.is-active {
  width: 22px;
  background: var(--bone);
}

.perf-card {
  border-radius: 16px;
  background: var(--ash);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  transition: border-color .3s ease, transform .35s ease;
}
.perf-card:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }

.perf-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
}
.perf-media .poster {
  position: absolute; inset: 0;
  background: var(--bg);
}
.perf-media .scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.1), transparent 60%);
  mix-blend-mode: screen;
}
.perf-media .badge {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.perf-media .platform {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone);
}
.perf-media .wave-mini {
  position: absolute; bottom: 12px; right: 12px;
  display: flex; align-items: flex-end; gap: 2px; height: 14px;
}
.perf-media .wave-mini span { width: 2px; background: var(--bone); opacity: 0.85; animation: wave 1.2s ease-in-out infinite; border-radius: 1px; }

.perf-body { padding: 18px 18px 22px; }
.perf-body .brand {
  font-family: var(--font-sans); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--bone);
  display: flex; align-items: center; justify-content: space-between;
}
.perf-body .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); margin-top: 6px; }
.perf-stats { margin-top: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.perf-stats .cell { border-top: 1px solid var(--line); padding-top: 10px; }
.perf-stats .label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); }
.perf-stats .value {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.03em;
  font-size: 30px; margin-top: 6px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.perf-stats .delta { font-family: var(--font-mono); font-size: 10px; color: #6BD088; letter-spacing: 0.16em; margin-top: 4px; }

/* Process */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 32px);
  position: relative;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-grid .step { padding-top: 28px; border-top: 1px solid var(--line-2); }
.process-grid .step .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--mist); text-transform: uppercase; margin-bottom: 28px; }
.process-grid .step .t { font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -0.03em; line-height: 0.98; margin-bottom: 14px; }
.process-grid .step .d { color: rgba(237,237,237,0.6); font-size: 14.5px; line-height: 1.5; max-width: 30ch; }

/* Stats strip */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
@media (max-width: 760px) { .strip { grid-template-columns: 1fr 1fr; } }
.strip .cell {
  padding: 28px var(--gut);
  border-right: 1px solid var(--line);
}
.strip .cell:last-child { border-right: 0; }
.strip .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; }
.strip .num {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.035em;
  font-size: clamp(40px, 5vw, 64px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.strip .sub { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,237,237,0.45); }

/* CTA */
.cta {
  text-align: center;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(60px, 9vw, 140px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,0.05), transparent 65%),
    var(--ink);
  position: relative;
}
/* "Contact" CTA card — dark rounded container, two-line heading, paragraph,
   light pill button. Matches the typographic system used elsewhere
   (line-1 regular + line-2 eurostile-extended). */
.cta-card {
  margin: 20px auto 0;
  max-width: 1100px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.cta-title {
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.cta-title .line-1 {
  display: block;
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 62px);
}
.cta-title .line-2 {
  display: block;
  font-family: "eurostile-extended", "Michroma", var(--font-sans), sans-serif;
  font-weight: 900;
  font-size: 75px;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}
.cta-sub {
  margin: 0;
  max-width: 50ch;
  color: rgba(237, 237, 237, 0.6);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}
.cta-btn:hover { background: #ffffff; transform: translateY(-1px); }
.cta-btn span[aria-hidden] {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cta-btn:hover span[aria-hidden] {
  transform: translate(2px, -2px);
}
.cta-or {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(237,237,237,0.55);
}
.cta-mail {
  color: var(--bone);
  border-bottom: 1px solid rgba(237,237,237,0.3);
  transition: color .2s ease, border-color .2s ease;
}
.cta-mail:hover {
  color: #FFFFFF;
  border-bottom-color: rgba(237,237,237,0.8);
}
@media (max-width: 600px) {
  .cta-card { padding: 36px 22px; gap: 16px; border-radius: 20px; }
  .cta-title .line-1 { font-size: clamp(28px, 9vw, 52px); }
  .cta-title .line-2 { font-size: 38px; }
  .cta-sub { font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Site-wide micro-interactions
   ──────────────────────────────────────────────────────────────────────
   Tasteful hover/press feedback layered on top of the existing styles.
   No new visuals — just smooth transitions and subtle motion so the page
   feels alive. Everything respects prefers-reduced-motion below. */

html { scroll-behavior: smooth; }

/* Buttons: press-down feedback + glow lift on hover */
.btn-primary, .btn-secondary, .cta-btn, .foot-cta, .nav-cta,
.adtype-tab, .perf-dot, .nav-burger {
  transform: translateZ(0);
  will-change: transform;
}
.btn-primary, .btn-secondary, .cta-btn, .foot-cta, .nav-cta {
  transition:
    transform .25s cubic-bezier(.2,.7,.2,1),
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.btn-primary:hover, .cta-btn:hover, .foot-cta:hover, .nav-cta:hover {
  box-shadow: 0 12px 32px -8px rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.btn-primary:active, .btn-secondary:active, .cta-btn:active,
.foot-cta:active, .nav-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: .08s;
}
.btn-secondary:hover { transform: translateY(-2px); }
/* The "↗" arrow inside primary CTAs nudges up-right on hover. */
.btn-primary span[aria-hidden],
.nav-cta span[aria-hidden] {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover span[aria-hidden],
.nav-cta:hover span[aria-hidden] {
  transform: translate(3px, -3px);
}

/* Ad-type tabs — macOS-dock magnify: the tab under the cursor scales up,
   immediate neighbours swell a touch (via the :has() sibling rule below). */
.adtype-tab { transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: center bottom; }
.adtype-tab:not(.is-active):hover {
  transform: scale(1.18) translateY(-2px);
}
/* Neighbour swell — when a tab is hovered, the tab right next to it
   nudges slightly (CSS only, no JS). Uses :has() so it doesn't depend on
   DOM ordering rules. Graceful degrade on older browsers. */
.adtype-tab:hover + .adtype-tab { transform: scale(1.07); }
.adtype-tabs:has(.adtype-tab + .adtype-tab:hover) .adtype-tab:has(+ .adtype-tab:hover) {
  transform: scale(1.07);
}
.adtype-tab:active { transform: scale(0.97); }

/* Nav links — subtle underline grow + soft magnify popup on hover */
.navlinks a {
  position: relative;
  padding-bottom: 2px;
  display: inline-block;
  transform-origin: center bottom;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    color .25s ease,
    text-shadow .35s ease;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.navlinks a:hover {
  transform: scale(1.15);
  text-shadow: 0 0 24px rgba(255,255,255,0.35);
  color: var(--bone);
}
.navlinks a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Pillar service cards — lift + border glow on hover */
.pillar {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
  will-change: transform;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.pillar:hover .pillar-icon {
  transform: scale(1.06) rotate(-2deg);
}
.pillar-icon {
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}

/* Perf cards — already lifting, add scale on inner video */
.perf-card { will-change: transform; }
.perf-card .tile-video,
.perf-card .video-slot {
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.perf-card:hover .tile-video { transform: scale(1.04); }

/* Page dots — pulse on the active dot */
.perf-dot { transition: width .25s ease, background .25s ease, transform .15s ease; }
.perf-dot:active { transform: scale(0.85); }

/* Footer columns — link arrow hint */
.foot-col a {
  position: relative;
  display: inline-block;
  transition: color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.foot-col a:hover { transform: translateX(3px); }

/* CTA card — soft inner glow on hover */
.cta-card {
  transition:
    border-color .4s ease,
    box-shadow .4s ease,
    transform .4s cubic-bezier(.2,.7,.2,1);
}
.cta-card:hover {
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 24px 60px -20px rgba(255,255,255,0.08);
}

/* Hero title + sub: fade-and-rise on first paint */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-title { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-cta-row { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .15s both; }

/* Scale-section red check: draw-in on first paint */
@keyframes checkDraw {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.scale-check { animation: checkDraw .8s cubic-bezier(.2,.7,.2,1) .2s both; }
.scale-pill,
.scale-headline { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .4s both; }

/* Logo (header) — magnify pop on hover, like nav links */
.brand-mark, .foot-brand {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}
.brand-mark:hover, .foot-brand:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.35));
}
.brand-mark:active, .foot-brand:active { transform: scale(0.97); }

/* Respect users who opted out of motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-cta-row, .scale-check, .scale-pill, .scale-headline {
    animation: none;
  }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}
.footer {
  border-top: 1px solid var(--line);
  padding-top: 0;
  background: var(--ink);
}
.foot-shell {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 60px;
  padding: 80px var(--gut) 60px;
  align-items: start;
}
.foot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; }
.foot-brand { display: inline-flex; align-items: baseline; gap: 8px; }
.foot-brand-mark {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bone);
  text-transform: uppercase;
}
.foot-brand-sub {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(237,237,237,0.6);
  text-transform: uppercase;
}
.foot-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  margin: 6px 0 0;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.foot-copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(237,237,237,0.6);
  max-width: 44ch;
}
.foot-cta {
  margin-top: 8px;
  display: inline-flex; align-items: center;
  padding: 14px 24px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}
.foot-cta:hover { background: #fff; transform: translateY(-1px); }

.foot-right {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
}
.foot-col { display: flex; flex-direction: column; gap: 14px; }
.foot-col-head {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.foot-col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(237,237,237,0.6);
  line-height: 1.6;
  transition: color .2s ease;
}
.foot-col a:hover { color: var(--bone); }
.foot-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: rgba(237,237,237,0.7);
}
.foot-social:hover { color: var(--bone); }

.foot-legal {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gut);
  border-top: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 12px; color: var(--dim);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 760px) {
  .foot-shell { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 40px; }
  .foot-right { grid-template-columns: 0.6fr 1fr; gap: 32px; }
  .foot-left { align-items: flex-start; text-align: left; gap: 18px; max-width: 100%; }
  .foot-brand-img { height: 72px; }
  .foot-headline { font-size: 20px; margin-top: 8px; }
  .foot-copy { font-size: 14px; }
  .foot-cta { margin-top: 4px; }
}

/* Reveal anim */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ── Pillars: card lift-in + icon bounce-pop ─────────────
   Different from .title-reveal (which uses translateY+skew
   on inline text). Here whole cards rise + scale, while the
   icon inside each card pops with a slight overshoot for a
   tactile/wow feel. Stagger left → right matches the
   visual reading direction so the eye is led across. */
.pillars-reveal { transform: none; opacity: 1; }
.pillars-reveal .pillar {
  opacity: 0;
  transform: translateY(34px) scale(.94);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
  will-change: transform, opacity;
}
.pillars-reveal.in .pillar {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pillars-reveal.in .pillar:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s; }
.pillars-reveal.in .pillar:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.pillars-reveal.in .pillar:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }

/* Icon pops with an overshoot curve, slightly after the
   card finishes settling. The rotate adds a playful turn. */
.pillars-reveal .pillar-icon {
  opacity: 0;
  transform: scale(.4) rotate(-14deg);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.34, 1.6, .54, 1); /* overshoot */
}
.pillars-reveal.in .pillar-icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.pillars-reveal.in .pillar:nth-child(1) .pillar-icon { transition-delay: .26s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-icon { transition-delay: .38s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-icon { transition-delay: .50s; }

/* Title + desc gently rise into place after the icon lands */
.pillars-reveal .pillar-title,
.pillars-reveal .pillar-desc {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1);
}
.pillars-reveal.in .pillar-title,
.pillars-reveal.in .pillar-desc {
  opacity: 1;
  transform: translateY(0);
}
.pillars-reveal.in .pillar:nth-child(1) .pillar-title { transition-delay: .42s; }
.pillars-reveal.in .pillar:nth-child(1) .pillar-desc  { transition-delay: .50s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-title { transition-delay: .54s; }
.pillars-reveal.in .pillar:nth-child(2) .pillar-desc  { transition-delay: .62s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-title { transition-delay: .66s; }
.pillars-reveal.in .pillar:nth-child(3) .pillar-desc  { transition-delay: .74s; }

/* Hover lift — works in concert with the entrance animation */
.pillar { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease; }
.pillars-reveal.in .pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
.pillars-reveal.in .pillar:hover .pillar-icon {
  transform: scale(1.06) rotate(0);
  transition: transform .3s cubic-bezier(.34, 1.6, .54, 1);
}

@media (prefers-reduced-motion: reduce) {
  .pillars-reveal .pillar,
  .pillars-reveal .pillar-icon,
  .pillars-reveal .pillar-title,
  .pillars-reveal .pillar-desc { transition: none; opacity: 1; transform: none; }
}

/* ── Comparison-table staggered reveal ──────────────────
   The wrapper itself fades in (default .reveal). Inside,
   the header + each row rises from below + sharpens, each
   ~70ms after the previous one. AI column gets a soft
   horizontal sheen sweep on settle for that "premium"
   feel. */
.compare-reveal { transform: none; }
.compare-reveal .compare-head,
.compare-reveal .compare-row {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;
}
.compare-reveal.in .compare-head,
.compare-reveal.in .compare-row {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.compare-reveal.in .compare-head { transition-delay: .04s; }
.compare-reveal.in .compare-row:nth-child(1)  { transition-delay: .12s; }
.compare-reveal.in .compare-row:nth-child(2)  { transition-delay: .18s; }
.compare-reveal.in .compare-row:nth-child(3)  { transition-delay: .24s; }
.compare-reveal.in .compare-row:nth-child(4)  { transition-delay: .30s; }
.compare-reveal.in .compare-row:nth-child(5)  { transition-delay: .36s; }
.compare-reveal.in .compare-row:nth-child(6)  { transition-delay: .42s; }
.compare-reveal.in .compare-row:nth-child(7)  { transition-delay: .48s; }
.compare-reveal.in .compare-row:nth-child(8)  { transition-delay: .54s; }
.compare-reveal.in .compare-row:nth-child(9)  { transition-delay: .60s; }
.compare-reveal.in .compare-row:nth-child(10) { transition-delay: .66s; }

/* Soft sheen sweep across the AI column once the table settles */
.compare-reveal .compare-cell.ai {
  position: relative;
  overflow: hidden;
}
.compare-reveal .compare-cell.ai::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.compare-reveal.in .compare-cell.ai::after {
  animation: aiSheen 1.8s cubic-bezier(.2,.7,.2,1) .9s 1 forwards;
}
@keyframes aiSheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .compare-reveal .compare-head,
  .compare-reveal .compare-row { transition: none; opacity: 1; transform: none; filter: none; }
  .compare-reveal.in .compare-cell.ai::after { animation: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}