/* ============================================================
   EPIK STUDIOS — Design System
   Black + magenta creative-agency system. Space Grotesk headlines,
   Inter body. One shared file across every page — no per-page
   style drift.
   ============================================================ */

:root {
  --bg: #0b0b0c;
  --bg-alt: #121213;
  --surface: #18181a;
  --surface-2: #202022;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f5f6;
  --text-dim: #a3a3a8;
  --text-faint: #6b6b70;
  --white: #ffffff;

  --accent: #bf00b2;
  --accent-bright: #e619d1;
  --accent-soft: #ff4de3;
  --accent-dim: rgba(191, 0, 178, 0.14);
  --accent-glow: rgba(191, 0, 178, 0.45);
  --accent-line: rgba(191, 0, 178, 0.35);
  /* Dark corner-glow gradient used on card surfaces instead of a flat
     gray fill — a soft magenta wash from the top-left corner, settling
     into near-black. */
  --card-grad: radial-gradient(130% 110% at 0% 0%, rgba(191,0,178,0.16), transparent 55%), #0c0c0e;
  --card-grad-hover: radial-gradient(130% 110% at 0% 0%, rgba(191,0,178,0.24), transparent 58%), #0e0e10;

  --font-head: 'General Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;

  --container: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--bg); }

/* ============ Global ambient background — one injected layer behind
   every page (see site-chrome.js injectBg()) so "plain" sections between
   heroes aren't flat black. Drifting blurred color fields + a faint dot
   grid + grain, all decorative/pointer-events:none, opacity kept low
   enough that card/text contrast is untouched. Hero-type sections paint
   their own opaque background and simply sit on top. ============ */
#site-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
/* Two independent transforms, two elements: the outer .site-bg__blob is
   moved by JS scroll-parallax (motion-fx.js), the inner __core runs the
   CSS drift keyframe — stacking both on one element would fight over the
   same `transform` property every frame. */
.site-bg__blob { position: absolute; will-change: transform; }
.site-bg__blob__core {
  position: absolute; inset: 0; border-radius: 50%; filter: blur(90px); will-change: transform;
  animation: bgDrift 26s ease-in-out infinite alternate;
}
.site-bg__blob--a { width: 46vw; height: 46vw; top: -14vw; left: -10vw; }
.site-bg__blob--b { width: 38vw; height: 38vw; top: 30vh; right: -12vw; }
.site-bg__blob--c { width: 42vw; height: 42vw; bottom: -16vw; left: 18vw; }
.site-bg__blob--a .site-bg__blob__core { background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.16; animation-duration: 30s; }
.site-bg__blob--b .site-bg__blob__core { background: radial-gradient(circle, #5b1acc 0%, transparent 70%); opacity: 0.13; animation-duration: 34s; animation-delay: -8s; }
.site-bg__blob--c .site-bg__blob__core { background: radial-gradient(circle, var(--accent-bright) 0%, transparent 70%); opacity: 0.12; animation-duration: 38s; animation-delay: -14s; }
.site-bg__grid {
  position: absolute; inset: -2px;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px; opacity: 0.35;
  mask-image: radial-gradient(120% 90% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, black 0%, transparent 75%);
}
@keyframes bgDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 5%) scale(1.08); }
  100% { transform: translate(-3%, -2%) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) { .site-bg__blob__core { animation: none; } }
@media (max-width: 700px) { .site-bg__blob__core { filter: blur(60px); } }

body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

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

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============ Grain / glow texture ============ */
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; mix-blend-mode: overlay; z-index: 1;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--fg-strong);
  box-shadow: 0 0 0 1px var(--accent-line), 0 12px 30px -10px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-line), 0 18px 40px -8px var(--accent-glow); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--fg-strong); background: var(--accent-dim); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

/* Pill CTA with a circular arrow badge — white pill + black badge for hero
   contexts sitting on photo/video, ink pill + white badge for use on dark
   surface sections. Distinct from .btn-primary/.btn-ghost, reserved for
   "cinematic hero" moments. */
.btn-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 24px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: 0;
  background: var(--white); color: #0b0b0c;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.btn-pill__badge {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #0b0b0c; color: var(--fg-strong);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.btn-pill__badge svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.btn-pill:hover { padding-left: 28px; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.5); }
.btn-pill:hover .btn-pill__badge { background: var(--accent); }
.btn-pill:hover .btn-pill__badge svg { transform: rotate(45deg); }
.btn-pill--ink { background: rgba(255,255,255,0.06); color: var(--fg-strong); border: 1px solid var(--border-strong); }
.btn-pill--ink .btn-pill__badge { background: var(--white); color: #0b0b0c; }
.btn-pill--ink:hover .btn-pill__badge { background: var(--accent); color: var(--fg-strong); }

/* ============ Nav ============ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  padding: 14px 0;
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.01em; }
.site-nav__logo span.accent { color: var(--accent-bright); }
/* ============ Brand mark — real EPIK Studios logo asset (mountain +
   wordmark), background removed to transparent. ============ */
.brand-mark__img { height: 34px; width: auto; display: block; }
.brand-mark--lg .brand-mark__img { height: 46px; }
.site-nav__links { display: flex; align-items: center; gap: 4px; }
.site-nav__item a, .site-nav__item button {
  display: flex; padding: 10px 16px; border-radius: 999px;
  font-size: 0.92rem; color: var(--text-dim);
  transition: color 0.25s ease, background 0.25s ease;
}
.site-nav__item a:hover, .site-nav__item.is-active a { color: var(--fg-strong); background: rgba(255,255,255,0.05); }
.site-nav__actions { display: flex; align-items: center; gap: 14px; }
.site-nav__login { font-size: 0.85rem; color: var(--text-faint); }
.site-nav__login:hover { color: var(--text-dim); }
.nav-burger { display: none; padding: 8px; }

.mobile-panel {
  position: fixed; inset: 0; top: 0; z-index: 99;
  background: var(--bg);
  padding: 100px 32px 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%);
  visibility: hidden; pointer-events: none;
  transition: transform 0.4s var(--ease), visibility 0.4s;
}
.mobile-panel.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; }
@media (min-width: 981px) { .mobile-panel { display: none; } }
.mobile-panel__link { padding: 16px 4px; font-family: var(--font-head); font-size: 1.4rem; border-bottom: 1px solid var(--border); }
.mobile-panel .btn { margin-top: 20px; justify-content: center; }

/* ============ Hero — cinematic crossfading video, centered ============ */
/* ============ Homepage hero — left-aligned agency layout: big headline
   top-left over a desaturated static photo (right-weighted), gradient
   dark-to-light left-to-right, supporting line + dual CTAs, small process
   tags along the bottom. No video, no centering — matches the referenced
   "Stodio"-style hero. ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px 0 44px;
  overflow: hidden;
  background: #08080a;
  text-align: left;
}
.hero__bg {
  /* Solid backdrop behind the starfield canvas — instant paint before JS
     runs, and the base tone the particles glow against. */
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #14060f 0%, #08080a 70%);
}
/* ============ Galaxy Interactive background — cursor-reactive canvas
   starfield, full-bleed behind the hero content (see starfield.js). ============ */
.hero__starfield { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,4,7,0.88) 0%, rgba(4,4,7,0.35) 45%, rgba(4,4,7,0.1) 75%),
    linear-gradient(0deg, rgba(4,4,7,0.85) 0%, rgba(4,4,7,0.15) 34%, transparent 60%);
}
/* Full-width edge padding instead of the centered .container — the whole
   point of this layout is content anchored to the actual screen edges and
   corners, not floating inside a centered max-width column. */
.hero__top, .hero__bottom-row { max-width: none !important; margin: 0 !important; width: 100%; padding-left: 56px; padding-right: 56px; }
.hero__top { position: relative; z-index: 3; }
.hero__inner { max-width: 700px; }
.hero__bottom-row { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
@media (max-width: 640px) { .hero__top, .hero__bottom-row { padding-left: 24px; padding-right: 24px; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(0.8rem, 0.4vw + 0.68rem, 1rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; margin-bottom: 20px;
  background: rgba(0,0,0,0.4); padding: 6px 12px; border-radius: 999px; width: fit-content;
}
.hero__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-bright); }
/* Preferred term mixes a fixed rem base with a vw term (rather than a bare
   vw clamp) so growth continues smoothly well past ~1600px instead of
   maxing out at typical-laptop width — the old clamp(...,5.4vw,3.8rem)
   hit its ceiling at ~1126px, so anything wider (most desktops) rendered
   an identical, non-scaling size. */
.hero__title { font-size: clamp(2.4rem, 2vw + 2.2rem, 5.6rem); letter-spacing: -0.02em; line-height: 1.05; }
.hero__lede { margin-top: 20px; max-width: 560px; font-size: clamp(1rem, 0.3vw + 0.94rem, 1.2rem); line-height: 1.55; color: rgba(245,245,246,0.68); }
.grad {
  background: linear-gradient(120deg, var(--accent-soft), var(--accent-bright) 55%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Text-roll headline reveal (see motion-fx.js initTextRoll) ============ */
.text-roll__mask { display: inline-block; overflow: hidden; vertical-align: top; }
.text-roll__word { display: inline-block; will-change: transform; }
.hero__side { max-width: 300px; text-align: left; padding-bottom: 4px; }
.hero__subtitle { font-size: clamp(0.98rem, calc(0.9rem + 0.3vw), 1.15rem); line-height: 1.5; color: rgba(245,245,246,0.75); }
.hero__cta-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: nowrap; }
.hero__cta-row .btn { padding: 12px 18px; font-size: 0.78rem; white-space: nowrap; }
.hero__tags { display: flex; gap: 32px; flex-wrap: wrap; }
.hero__tag { font-size: 0.8rem; color: var(--text-faint); font-weight: 600; }
.hero__tag span { color: var(--accent-soft); margin-right: 4px; }
.hero__scroll-cue {
  position: absolute; left: 50%; bottom: 40px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,245,246,0.5);
  animation: heroCueBob 2.4s ease-in-out infinite;
}
.hero__scroll-cue::after { content: ''; width: 1px; height: 28px; background: linear-gradient(180deg, rgba(245,245,246,0.6), transparent); }
@keyframes heroCueBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (max-width: 780px) {
  .hero__bottom-row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__side { max-width: none; }
  .hero__tags { gap: 22px; }
}
@media (max-width: 420px) {
  .hero__cta-row { flex-wrap: wrap; }
  .hero__cta-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* Magnetic tilt on hover — set on any card via JS pointermove (see initTilt) */
.tilt { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0); transition: transform 0.5s var(--ease); }
.tilt:hover { transition: transform 0.08s linear; }

/* ============ Reveal stage — scroll-scrubbed before/after hero ============
   A tall wrapper (height set via --stage-h) holding a pinned viewport-height
   stage. Two absolutely-positioned video layers crossfade in exact lockstep
   with scroll position through the wrapper (driven by JS, see
   initScrollStages in site-chrome.js) — not a timer, not an intersection
   trigger. Content itself stays fixed in place while the backdrop changes,
   same mechanic as the jahforge reference heroes. */
.reveal-stage { position: relative; height: 260vh; }
.reveal-stage__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.reveal-stage__media { position: absolute; inset: 0; z-index: 0; }
.reveal-stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8) brightness(0.7);
}
.reveal-stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: saturate(0.75) brightness(0.6) blur(2px);
}
[data-stage-after] { opacity: 0; will-change: opacity; }
.reveal-stage__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(5,5,6,0.45) 0%, rgba(5,5,6,0.86) 74%, #050506 100%),
    linear-gradient(0deg, #050506 0%, rgba(5,5,6,0.4) 32%, rgba(5,5,6,0.38) 58%, rgba(5,5,6,0.68) 100%);
}
.reveal-stage__content { position: relative; z-index: 3; max-width: 780px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.reveal-stage__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-soft); margin-bottom: 24px;
}
.reveal-stage__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 12px var(--accent-glow); }
.reveal-stage__title { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.03em; line-height: 0.98; }
.reveal-stage__sub { margin-top: 22px; font-size: 1.1rem; color: rgba(245,245,246,0.78); max-width: 540px; }
.reveal-stage__cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.reveal-stage__progress-label {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,245,246,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.reveal-stage__progress-track { width: 2px; height: 46px; background: rgba(245,245,246,0.18); position: relative; overflow: hidden; }
.reveal-stage__progress-fill { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--stage-progress, 0) * 100%); background: var(--accent-bright); }

/* ============ Sections ============ */
.section { padding: 120px 0; position: relative; }
/* Diagonal-plate treatment instead of a flat color band — a skewed
   backdrop layer behind the content, clipped by the section itself so the
   slanted edges never bleed into neighboring sections. Content sits in a
   z-indexed container so the angle never clips text. */
.section--alt { position: relative; overflow: hidden; background: var(--bg); }
.section--alt::before {
  content: ''; position: absolute; left: -6%; right: -6%; top: 4%; bottom: 4%;
  background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: skewY(-2.2deg); z-index: 0;
}
.section--alt > .container { position: relative; z-index: 1; }
.section--tight { padding: 90px 0; }

.section-heading { max-width: 640px; margin-bottom: 64px; }
.section-heading.center { margin-left: auto; margin-right: auto; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 18px;
}
.badge::before { content: ''; width: 8px; height: 8px; background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-glow); }
.section-heading h2 { font-size: clamp(1.9rem, calc(1.74rem + 1.29vw), 3.8rem); }
.section-heading p { margin-top: 16px; color: var(--text-dim); font-size: clamp(1.05rem, calc(0.97rem + 0.35vw), 1.3rem); }

/* ============ Stats bar ============ */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  overflow: hidden;
}
.stats-bar__item { padding: 34px 24px; text-align: center; border-right: 1px solid var(--border); }
.stats-bar__item:last-child { border-right: none; }
.stats-bar__num { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.7rem, calc(1.5rem + 1vw), 3rem); color: var(--fg-strong); }
.stats-bar__num .accent { color: var(--accent-soft); }
.stats-bar__label { margin-top: 6px; font-size: 0.82rem; color: var(--text-faint); letter-spacing: 0.02em; }

/* ============ Service cards ============ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  display: block; padding: 32px 28px; border-radius: var(--radius);
  background: var(--card-grad); border: 1px solid var(--border);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
  position: relative; overflow: hidden;
}
.service-card:hover { border-color: var(--accent-line); background: var(--card-grad-hover); box-shadow: 0 24px 48px -24px rgba(191,0,178,0.35); }
.service-card--feature {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(191,0,178,0.14), transparent 60%), var(--card-grad);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px;
}
.service-card--feature .service-card__icon { margin-bottom: 0; width: 64px; height: 64px; font-size: 1.6rem; }
@media (max-width: 980px) { .service-card--feature { grid-column: span 2; } }
@media (max-width: 640px) { .service-card--feature { grid-column: span 1; grid-template-columns: 1fr; } }
.service-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-soft); font-size: 1.2rem; margin-bottom: 22px;
}
.service-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.service-card p { color: var(--text-dim); font-size: 0.95rem; }
.service-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 0.85rem; font-weight: 600; color: var(--accent-soft); }
.service-card__more svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.service-card:hover .service-card__more svg { transform: translateX(4px); }

/* ============ Process timeline ============ */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__step {
  display: grid; grid-template-columns: 80px 1fr; gap: 28px;
  padding: 38px 0; border-top: 1px solid var(--border);
  position: relative;
}
.timeline__step:last-child { border-bottom: 1px solid var(--border); }
.timeline__num { font-family: var(--font-head); font-size: 2.2rem; font-weight: 400; color: var(--surface-2); -webkit-text-stroke: 1px var(--border-strong); }
.timeline__body h3 { font-size: 1.4rem; margin-bottom: 10px; }
.timeline__body p { color: var(--text-dim); max-width: 560px; }
.timeline__tag { display: inline-block; margin-top: 14px; font-size: 0.78rem; color: var(--accent-soft); font-weight: 600; }

/* ============ Guarantee banner ============ */
.guarantee {
  border-radius: var(--radius);
  padding: 64px 56px;
  background: linear-gradient(135deg, rgba(191,0,178,0.16), rgba(191,0,178,0.03) 60%), var(--surface);
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.guarantee__badge { font-family: var(--font-head); font-weight: 600; font-size: 2.6rem; color: var(--fg-strong); }
.guarantee__badge .accent { color: var(--accent-soft); }
.guarantee h3 { font-size: 1.6rem; margin-top: 6px; max-width: 440px; }
.guarantee p { color: var(--text-dim); margin-top: 12px; max-width: 440px; }

/* ============ Logo wall ============ */
.logo-wall { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.logo-wall__item {
  padding: 16px 28px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-faint); font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  background: var(--surface);
}

/* ============ Case cards ============ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case-card {
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-grad);
  overflow: hidden;
}
.case-card__media {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(128deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px),
    linear-gradient(155deg, #2b1030 0%, #190b1e 55%, #0e0810 100%);
}
.case-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.case-card__play {
  position: absolute; bottom: 14px; right: 14px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); backdrop-filter: blur(4px);
}
.case-card__play svg { width: 12px; height: 12px; }
.case-card__body { padding: 26px; }
.case-card__tag { font-size: 0.75rem; color: var(--accent-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.case-card__body h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.case-card__body p { color: var(--text-dim); font-size: 0.9rem; }
.case-card__metric { display: flex; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.case-card__metric div strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--fg-strong); }
.case-card__metric div span { font-size: 0.75rem; color: var(--text-faint); }

/* ============ Testimonials ============ */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testimonial-card { padding: 30px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-grad); }
.testimonial-card__stars { color: var(--accent-soft); margin-bottom: 16px; letter-spacing: 2px; }
.testimonial-card p { color: var(--text-dim); font-size: 0.95rem; }
.testimonial-card__who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.testimonial-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent-line); }
.testimonial-card__who strong { font-size: 0.9rem; display: block; }
.testimonial-card__who span { font-size: 0.78rem; color: var(--text-faint); }

/* ============ Value chips ============ */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 0.88rem; color: var(--text-dim);
}
.chip svg { color: var(--accent-soft); width: 16px; height: 16px; }

/* ============ Prospect funnel — one qualifying question per screen,
   auto-advances on single-select, progress bar tracks the 4 questions
   (contact step rides outside that count). Same mechanic as the Centric
   careers funnel, restyled to EPIK's dark/magenta system. ============ */
.funnel-hero {
  min-height: 100vh; display: flex; align-items: center; padding: 108px 0 60px;
  position: relative;
  background: radial-gradient(ellipse 70% 55% at 50% 20%, rgba(191,0,178,0.14), transparent 60%), var(--bg);
}
.prospect-funnel {
  position: relative; max-width: 640px; margin: 0 auto; text-align: center;
  background: rgba(24,24,28,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  padding: 52px 48px; box-shadow: 0 50px 100px -50px rgba(191,0,178,0.25);
}
.funnel-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); border: 1px solid var(--border);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.funnel-close svg { width: 15px; height: 15px; }
.funnel-close:hover { color: var(--fg-strong); border-color: var(--accent-line); background: var(--accent-dim); }
.funnel-progress { margin-bottom: 34px; }
.funnel-progress__bar { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.funnel-progress__fill { height: 100%; background: linear-gradient(90deg, var(--accent-bright), var(--accent)); transition: width 0.4s var(--ease); }
.funnel-progress__label { display: block; margin-top: 10px; font-size: 0.75rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.funnel-step { display: none; }
.funnel-step.is-active { display: block; animation: funnelStepIn 0.4s var(--ease); }
/* The final Calendly step needs real room for the embed — widen the whole
   card only while that step is showing. */
.prospect-funnel:has(.funnel-step--wide.is-active) { max-width: 760px; }
.funnel-step--wide .calendly-inline-widget { border-radius: var(--radius-sm); overflow: hidden; margin: 28px 0 20px; }
@keyframes funnelStepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.funnel-step .badge { margin-bottom: 18px; }
.funnel-step h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 14px; }
.funnel-step h2 { font-size: 1.35rem; margin-bottom: 26px; }
.funnel-step__sub { color: var(--text-dim); font-size: 1.02rem; margin-bottom: 30px; }
.funnel-options { display: flex; flex-direction: column; gap: 11px; text-align: left; }
.funnel-option {
  padding: 17px 22px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05); color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-align: left; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.funnel-option:hover { background: rgba(255,255,255,0.1); border-color: var(--accent-line); }
.funnel-option.is-selected { background: linear-gradient(135deg, rgba(230,25,209,0.85), rgba(191,0,178,0.85)); border-color: transparent; color: #fff; }
.funnel-contact-form { text-align: left; }
.funnel-contact-form .field { margin-bottom: 18px; }
.funnel-contact-form label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 7px; }
.funnel-contact-form input {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.funnel-contact-form input:focus { outline: none; border-color: var(--accent); }
.funnel-contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.funnel-done__icon {
  width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.funnel-done__icon svg { width: 26px; height: 26px; }
.funnel-back {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  font-size: 0.85rem; font-weight: 600; color: var(--text-faint); padding: 6px 10px;
  transition: color 0.25s ease;
}
.funnel-back:hover { color: var(--text-dim); }
.funnel-back[hidden] { display: none; }
.funnel-hint { margin-top: 22px; font-size: 0.85rem; color: var(--text-faint); }
.funnel-hint a { color: var(--accent-soft); font-weight: 600; }
@media (max-width: 640px) {
  .funnel-hero { min-height: 100dvh; padding: 110px 18px 40px; align-items: center; }
  .prospect-funnel { width: 100%; padding: 36px 24px; }
}

/* ============ Offer stack — "typical X" vs EPIK comparison table,
   used on every service page to make the real value visible instead of
   just claimed. The EPIK column is visually raised and tinted so the eye
   lands there first. ============ */
.stack-compare { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.stack-compare__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.stack-compare__row:not(:last-child) { border-bottom: 1px solid var(--border); }
.stack-compare__row--head .stack-compare__cell { padding-top: 22px; padding-bottom: 22px; background: var(--bg-alt); }
.stack-compare__cell { padding: 18px 22px; font-size: 0.9rem; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.stack-compare__cell--label { font-weight: 600; color: var(--fg-strong); }
.stack-compare__cell--them { color: var(--text-faint); }
.stack-compare__cell--us {
  color: var(--fg-strong); font-weight: 600;
  background: var(--accent-dim); border-left: 1px solid var(--accent-line);
}
.stack-compare__head-them, .stack-compare__head-us {
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
}
.stack-compare__head-us { color: var(--accent-soft); }
.stack-compare__row--head .stack-compare__cell--us { background: var(--accent-dim); border-left: 1px solid var(--accent-line); }
.stack-compare__icon { width: 16px; height: 16px; flex-shrink: 0; }
.stack-compare__cell--them .stack-compare__icon { color: var(--text-faint); }
.stack-compare__cell--us .stack-compare__icon { color: var(--accent-soft); }
@media (max-width: 720px) {
  .stack-compare__row { grid-template-columns: 1fr; }
  .stack-compare__cell { padding: 14px 18px; }
  .stack-compare__cell--label {
    padding-top: 18px; padding-bottom: 10px;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .stack-compare__cell--them { border-bottom: 1px solid var(--border); }
  .stack-compare__cell--us { border-left: none; border-top: none; }
  .stack-compare__row--head { display: none; }
  .stack-compare__cell::before { content: attr(data-col); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-right: 8px; }
  .stack-compare__cell--label::before { content: none; }
}

/* ============ Client Portal — split section, transparent floating
   phone-mockup cluster on the right (no boxed background behind it,
   the phones sit directly on the page background). ============ */
.portal-section { overflow: hidden; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.portal-copy h2 { margin-top: 16px; font-size: clamp(2rem, calc(1.8rem + 1vw), 3.4rem); }
.portal-copy p { margin-top: 18px; color: var(--text-dim); font-size: clamp(1.05rem, calc(0.98rem + 0.3vw), 1.25rem); max-width: 460px; }
.portal-list { margin: 26px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.portal-list li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--text-dim); }
.portal-list .icon { width: 16px; height: 16px; color: var(--accent-soft); flex-shrink: 0; }

.portal-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.portal-visual__img { width: 100%; max-width: 520px; height: auto; display: block; filter: drop-shadow(0 40px 70px rgba(0,0,0,0.55)); }
@media (max-width: 900px) {
  .portal-grid { grid-template-columns: 1fr; gap: 50px; }
  .portal-copy { text-align: center; }
  .portal-list, .portal-list li { align-items: center; justify-content: center; }
  .portal-copy p { margin-left: auto; margin-right: auto; }
  .portal-visual__img { max-width: 420px; }
}

/* ============ Feature pill grid — bold, text-only bento tiles for a
   flat "everything included" list (no photo, no price, just the fact).
   Flex-wrap lets tiles size to their own content, echoing the uneven
   bento layout of the source brief without needing grid-span math. ============ */
.feature-pill-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.feature-pill {
  flex: 1 1 190px; max-width: 320px;
  padding: 22px 24px; border-radius: var(--radius-sm);
  background: var(--card-grad); border: 1px solid var(--border);
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--fg-strong);
  line-height: 1.3;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
}
.feature-pill:hover { border-color: var(--accent-line); background: var(--surface-2); }
@media (max-width: 640px) { .feature-pill { flex-basis: 100%; max-width: none; } }

/* ============ About / founder ============ */
.founder-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.founder-block__photo {
  aspect-ratio: 4/5; border-radius: var(--radius);
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(128deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px),
    linear-gradient(165deg, #2b1030 0%, #190b1e 55%, #0e0810 100%);
  border: 1px solid var(--border);
  display: flex; align-items: flex-end; padding: 24px;
}
.founder-block__photo::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.founder-block__initial {
  position: relative; z-index: 1;
  font-family: var(--font-head); font-weight: 600; font-size: 3.4rem;
  color: rgba(255,255,255,0.16);
}
.founder-block blockquote { font-size: 1.35rem; font-family: var(--font-body); font-weight: 500; line-height: 1.5; color: var(--fg-strong); }
.founder-block cite { display: block; margin-top: 20px; font-style: normal; font-size: 0.9rem; color: var(--text-faint); }

/* ============ Two co-founders, side by side ============ */
.founders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.founder-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-grad); transition: border-color 0.4s var(--ease); }
.founder-card:hover { border-color: var(--accent-line); }
.founder-card__photo {
  width: 100%; aspect-ratio: 5/4; border-radius: var(--radius-sm);
  position: relative; overflow: hidden; margin-bottom: 22px;
  background:
    repeating-linear-gradient(128deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px),
    linear-gradient(165deg, #2b1030 0%, #190b1e 55%, #0e0810 100%);
  border: 1px solid var(--border);
  display: flex; align-items: flex-end; padding: 20px;
}
.founder-card__photo .founder-block__initial { font-size: 2.6rem; }
.founder-card h3 { font-size: 1.3rem; }
.founder-card__role { display: block; margin-top: 4px; margin-bottom: 16px; font-size: 0.82rem; font-weight: 600; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.founder-card p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 700px) { .founders-grid { grid-template-columns: 1fr; } }

/* ============ Contact ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-methods { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.contact-method { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-grad); }
.contact-method__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-dim); border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; color: var(--accent-soft); flex-shrink: 0; }
.contact-method strong { display: block; margin-bottom: 4px; }
.contact-method span { color: var(--text-dim); font-size: 0.9rem; }

.form-card { padding: 36px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-grad); }
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row label { font-size: 0.85rem; color: var(--text-dim); }
.form-row input, .form-row select, .form-row textarea {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row textarea { resize: vertical; min-height: 110px; }
.form-note { margin-top: 14px; font-size: 0.8rem; color: var(--text-faint); }

.booking-placeholder {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 50px 30px; text-align: center; color: var(--text-faint);
}
.booking-placeholder svg { width: 30px; height: 30px; color: var(--accent-soft); margin-bottom: 14px; }
.booking-placeholder h4 { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 8px; }

/* ============ Portfolio carousel — real WDBS work, browser-chrome cards,
   fanned deck with a focused center card (jahforge.net-style) ============ */
/* ============ Coverflow carousel — cards fan out in real 3D perspective
   (Apple-coverflow style): active card flat and centered, the rest recede
   at an angle with distance-based scale/depth/opacity, all positioned and
   transformed by JS (see initPortfolioCarousels in site-chrome.js) rather
   than CSS classes, since every card needs its own computed offset. ============ */
.portfolio-carousel { position: relative; padding: 40px 0 20px; }
.portfolio-track {
  position: relative; min-height: 480px;
  perspective: 1600px;
}
.portfolio-card {
  position: absolute; top: 0; left: 50%; width: 560px; margin-left: -280px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease);
  transform-style: preserve-3d;
}
@media (max-width: 640px) {
  .portfolio-card { width: 320px; margin-left: -160px; }
  .portfolio-track { min-height: 340px; }
}
.portfolio-card__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #16161a; border-bottom: 1px solid var(--border);
}
.portfolio-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.portfolio-card__url {
  margin-left: 8px; font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-body);
  background: var(--bg); border-radius: 999px; padding: 4px 12px; flex-grow: 1;
}
.portfolio-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portfolio-card__label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
}
.portfolio-card__label h3 { font-size: 1rem; }
.portfolio-card__label span { font-size: 0.82rem; font-weight: 700; color: var(--accent-soft); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.portfolio-card__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-soft); }

.carousel-arrow {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 10;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg-strong);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.carousel-arrow:hover { background: var(--accent-dim); border-color: var(--accent-line); }
.carousel-arrow--prev { left: 6%; }
.carousel-arrow--next { right: 6%; }
.carousel-arrow svg { width: 20px; height: 20px; }
@media (max-width: 980px) {
  .portfolio-card { width: 82vw; margin: 0 -30px; }
  .carousel-arrow { display: none; }
}

.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.carousel-dots__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background 0.3s ease, transform 0.3s ease; }
.carousel-dots__dot.is-active { background: var(--accent-bright); transform: scale(1.3); }

/* ============ Trust badge row ============ */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.trust-row__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; border-right: 1px solid var(--border); text-align: center; }
.trust-row__item:last-child { border-right: none; }
.trust-row__item svg { color: var(--accent-soft); width: 22px; height: 22px; }
.trust-row__item span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 780px) { .trust-row { grid-template-columns: repeat(2, 1fr); } .trust-row__item:nth-child(2) { border-right: none; } .trust-row__item { border-bottom: 1px solid var(--border); } }

/* ============ Numbered list (clean, no cards — matches jahforge reference) ============ */
.numbered-list { display: flex; flex-direction: column; }
.numbered-list__row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center;
  padding: 24px 12px; margin: 0 -12px; border-top: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.numbered-list__row:last-child { border-bottom: 1px solid var(--border); }
a.numbered-list__row:hover { background: var(--surface); padding-left: 24px; }
a.numbered-list__row:hover .numbered-list__num { transform: scale(1.08) rotate(-4deg); }
/* Colorful gradient badge instead of a flat number — carries either a
   plain digit or an <svg class="icon"> dropped in by a page for a more
   "fun"/visual list. Each row gets a slightly different hue via nth-child
   so a long list doesn't read as one flat repeating color. */
.numbered-list__num {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--fg-strong);
  background: linear-gradient(150deg, var(--accent-bright), var(--accent));
  box-shadow: 0 10px 24px -10px var(--accent-glow);
  transition: transform 0.4s var(--ease);
}
.numbered-list__num svg { width: 22px; height: 22px; }
.numbered-list__row:nth-child(3n+2) .numbered-list__num { background: linear-gradient(150deg, #ff8a3d, #d94f04); box-shadow: 0 10px 24px -10px rgba(217,79,4,0.45); }
.numbered-list__row:nth-child(3n) .numbered-list__num { background: linear-gradient(150deg, #4dc7ff, #0b6fb8); box-shadow: 0 10px 24px -10px rgba(11,111,184,0.45); }
.numbered-list__body h3 { font-size: 1.25rem; margin-bottom: 8px; }
.numbered-list__body p { color: var(--text-dim); font-size: 0.95rem; max-width: 540px; }
.numbered-list__meta { font-size: 0.95rem; font-weight: 700; color: var(--fg-strong); white-space: nowrap; text-align: right; font-family: var(--font-body); }
.numbered-list__meta span { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; }
@media (max-width: 640px) {
  .numbered-list__row { grid-template-columns: 44px 1fr; }
  .numbered-list__num { width: 44px; height: 44px; }
  .numbered-list__meta { grid-column: 2; text-align: left; margin-top: 4px; }
}

/* ============ Service showcase — the main services.html offer grid.
   Big tilting tiles with a ghost index number and a per-card accent glow,
   deliberately not a flat list or a generic 3-across SaaS card. ============ */
.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.showcase-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: block; padding: 40px 34px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.showcase-card:hover { border-color: var(--accent-line); }
/* Background photo relating to the offer — dim and slightly zoomed out by
   default, brightens and expands toward the viewer on hover so the card
   feels like it's opening up rather than just lighting up. */
.showcase-card__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0.22; transform: scale(1.06);
  filter: saturate(0.85);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), filter 0.6s var(--ease);
}
.showcase-card:hover .showcase-card__bg { opacity: 0.42; transform: scale(1.16); filter: saturate(1.05); }
.showcase-card__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.12) 100%);
  transition: background 0.5s var(--ease);
}
.showcase-card:hover .showcase-card__scrim { background: linear-gradient(100deg, rgba(0,0,0,0.55) 10%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.05) 100%); }
.showcase-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 100% at 15% 0%, rgba(191,0,178,0.22), transparent 60%);
  transition: opacity 0.5s var(--ease);
}
.showcase-card:hover::before { opacity: 1; }
.showcase-card__num {
  position: absolute; right: 18px; top: -10px; z-index: -1;
  font-family: var(--font-head); font-weight: 600; font-size: 7.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--border-strong);
  transition: -webkit-text-stroke-color 0.4s var(--ease);
}
.showcase-card:hover .showcase-card__num { -webkit-text-stroke-color: var(--accent-line); }
.showcase-card__icon {
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 26px;
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center; color: var(--accent-soft); font-size: 1.3rem;
}
.showcase-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.showcase-card p { color: var(--text-dim); font-size: 0.95rem; max-width: 380px; margin-bottom: 26px; }
.showcase-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.showcase-card__price { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--fg-strong); }
.showcase-card__price span { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.showcase-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--accent-soft); white-space: nowrap; }
.showcase-card__more svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.showcase-card:hover .showcase-card__more svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card__num { font-size: 6rem; }
}

/* Full-width "new offer" variant — spans both columns, gets a ribbon badge
   and a two-column internal layout so a freshly-added service reads as an
   announcement, not just another tile crammed into an odd last row. */
.showcase-card--featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  background: linear-gradient(120deg, rgba(191,0,178,0.14), transparent 55%), var(--surface);
  border-color: var(--accent-line);
}
.showcase-card--featured:hover { background: linear-gradient(120deg, rgba(191,0,178,0.2), transparent 55%), var(--surface-2); }
.showcase-card--featured .showcase-card__icon { margin-bottom: 0; }
.showcase-card--featured .showcase-card__num { top: auto; bottom: -20px; right: 24px; font-size: 6.5rem; }
.showcase-card--featured .showcase-card__ribbon {
  position: absolute; top: 20px; right: -34px; z-index: 1;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: var(--fg-strong);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 40px; transform: rotate(45deg); box-shadow: 0 6px 16px -4px var(--accent-glow);
}
.showcase-card--featured p { margin-bottom: 0; max-width: 460px; }
.showcase-card--featured .showcase-card__footer { flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 900px) {
  .showcase-card--featured { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .showcase-card--featured .showcase-card__footer { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 10px; }
}

/* ============ Growth System panel — "how it works" as a live animated
   diagram: browser-chrome shell, 4 nodes on a glowing connector rail with
   traveling sparks, each node pulsing "active" in a continuous relay, a
   caption strip beneath crossfading in sync with whichever node is lit.
   Everything runs on one shared 8s CSS loop — no JS required, and it
   collapses to a static readable list under reduced-motion. ============ */
.gs-panel {
  max-width: 980px; margin: 0 auto; border-radius: 20px; overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #d901cb, #8b5cf6, #22d3ee) border-box;
  box-shadow: 0 50px 100px -40px rgba(191,0,178,0.3);
}
.gs-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.gs-chrome__dots { display: flex; align-items: center; gap: 6px; }
.gs-chrome__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.gs-chrome__label { margin-left: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.gs-chrome__live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; }
.gs-chrome__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-glow); animation: gsLiveBlink 1.6s ease-in-out infinite; }
@keyframes gsLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.gs-stage { position: relative; padding: 56px 40px 36px; }
.gs-stage__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.5;
  mask-image: radial-gradient(70% 70% at 50% 30%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, black 0%, transparent 80%);
}

.gs-nodes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; }
.gs-rail { position: absolute; top: 43px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0; }
.gs-rail::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #d901cb, #ff5cf0, #8b5cf6, #22d3ee);
  opacity: 0.35;
}

/* Full 6-step variant (process.html) — same mechanics, more nodes,
   smaller orbs so 6 fit the same panel width without crowding. */
.gs-nodes--6 { grid-template-columns: repeat(6, 1fr); gap: 4px; }
.gs-nodes--6 .gs-rail { left: 8.3%; right: 8.3%; }
.gs-nodes--6 .gs-rail::before { background: linear-gradient(90deg, #d901cb, #ff5cf0, #c026d3, #8b5cf6, #3b82f6, #22d3ee); }
.gs-nodes--6 .gs-orb { width: 60px; height: 60px; }
.gs-nodes--6 .gs-orb .icon { width: 20px; height: 20px; }
.gs-nodes--6 .gs-title { font-size: 0.92rem; margin-top: 14px; }
.gs-nodes--6 .gs-body { font-size: 0.76rem; max-width: 15ch; margin-top: 6px; }
.gs-nodes--6 .gs-step { font-size: 0.6rem; padding: 2px 6px; }
@media (max-width: 900px) {
  .gs-nodes--6 { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .gs-nodes--6 .gs-rail { display: none; }
}
@media (max-width: 520px) {
  .gs-nodes--6 { grid-template-columns: repeat(2, 1fr); }
}
.gs-rail-flow {
  position: absolute; top: 0; left: -20%; width: 20%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  animation: gsFlow 3.2s linear infinite;
}
@keyframes gsFlow { from { left: -20%; } to { left: 100%; } }
.gs-spark { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: gsSpark 5.4s linear infinite; opacity: 0; }
@keyframes gsSpark { 0% { left: 0%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.gs-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gs-orb {
  position: relative; width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1.5px solid var(--border-strong);
  color: var(--text-dim);
  transition: color 0.4s ease;
}
.gs-orb__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--c, var(--accent));
  opacity: 0.18; transform: scale(0.9);
}
.gs-node.is-active .gs-orb { border-color: var(--c, var(--accent)); color: var(--c, var(--accent)); box-shadow: 0 0 26px -4px var(--g, var(--accent-glow)); }
.gs-node.is-active .gs-orb__ring { opacity: 1; transform: scale(1); box-shadow: 0 0 20px -2px var(--g, var(--accent-glow)); }
.gs-orb .icon { width: 28px; height: 28px; }
.gs-step {
  position: absolute; bottom: -8px; right: -8px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  background: var(--bg); border: 1.5px solid var(--border-strong); color: var(--text-faint);
  border-radius: 999px; padding: 3px 8px; line-height: 1;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.gs-node.is-active .gs-step { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); color: #fff; }
.gs-title { margin-top: 20px; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--fg-strong); }
.gs-body { margin-top: 8px; font-size: 0.88rem; color: var(--text-faint); line-height: 1.45; max-width: 22ch; }

/* All 4 nodes run the SAME keyframe/duration; staggered animation-delay is
   what makes only one look "active" at a time as the loop repeats. */
.gs-node { animation: gsNodeCycle 8s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes gsNodeCycle {
  0%, 100% { }
}
/* JS toggles .is-active on schedule (see initGrowthSystemPanel) instead of
   relying on keyframe class-swapping, which CSS alone can't do — the
   animation above just reserves the timing var for future tuning. */

.gs-caps { position: relative; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); min-height: 3.2em; }
.gs-cap {
  position: absolute; inset: 26px 0 0 0; opacity: 0; transition: opacity 0.6s ease;
  font-size: 0.92rem; color: var(--text-dim); line-height: 1.55;
}
.gs-cap.is-active { opacity: 1; }
.gs-cap-tag {
  display: inline-block; margin-right: 10px; font-family: var(--font-head); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--accent-soft));
  border: 1px solid var(--c, var(--accent-line)); border-radius: 999px; padding: 4px 11px;
}
@media (max-width: 720px) {
  .gs-nodes { grid-template-columns: 1fr; row-gap: 32px; }
  .gs-rail { display: none; }
  .gs-body { max-width: 26ch; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-rail-flow, .gs-spark, .gs-chrome__live-dot { animation: none; }
}

/* ============ Package cards — photo-forward tier cards (title + one-line
   description + a real property photo filling most of the card, white
   pill CTA overlaid at the bottom of the image) instead of a bullet-list
   pricing box. Matches the REV Productions packages reference. ============ */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.package-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; border-radius: var(--radius); border: 1px solid var(--border);
  padding: 30px 28px 28px;
  background-size: cover; background-position: center;
  transition: border-color 0.4s var(--ease);
}
.package-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.05) 100%);
}
.package-card:hover { border-color: var(--accent-line); }
.package-card--featured { border-color: var(--accent-line); box-shadow: 0 30px 60px -30px rgba(191,0,178,0.35); }
.package-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.package-card__head h3 { font-size: 1.85rem; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-strong); }
.package-card__price { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--accent-soft); white-space: nowrap; padding-top: 4px; }
.package-card__badge {
  display: inline-block; position: absolute; top: 22px; left: 28px; z-index: 1;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  border-radius: 999px; padding: 4px 12px;
}
.package-card p { color: rgba(245,245,246,0.82); font-size: 0.92rem; line-height: 1.5; margin-bottom: 22px; }
.package-card .btn-pill {
  width: 100%; justify-content: space-between; padding-left: 20px;
  background: rgba(255,255,255,0.12); color: var(--fg-strong);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.package-card .btn-pill .btn-pill__badge { background: rgba(0,0,0,0.35); color: var(--fg-strong); }
.package-card .btn-pill:hover { background: rgba(255,255,255,0.2); }
.package-card .btn-pill:hover .btn-pill__badge { background: var(--accent); }
@media (max-width: 900px) { .package-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ============ Reveal cards — browser-chrome cards (like the Real Work
   portfolio cards) whose media area is a "before" photo with an "after"
   photo hidden underneath, unmasked only in a circle that follows the
   viewer's cursor/finger — literally erase-to-reveal. JS (motion-fx.js
   initSpotlightReveal) drives --mx/--my per card on pointermove. ============ */
.reveal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.reveal-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.reveal-card:hover { border-color: var(--accent-line); }
.reveal-card__chrome {
  display: flex; align-items: center; gap: 6px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.reveal-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.reveal-card__label {
  margin-left: 10px; font-size: 0.75rem; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reveal-card__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden; touch-action: none;
  --mx: 50%; --my: 30%;
}
.reveal-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-card__img--before { filter: grayscale(0.55) brightness(0.62) saturate(0.9); }
.reveal-card__img--after {
  -webkit-mask-image: radial-gradient(circle 100px at var(--mx) var(--my), black 60%, transparent 100%);
  mask-image: radial-gradient(circle 100px at var(--mx) var(--my), black 60%, transparent 100%);
}
/* Left-to-right wipe variant — hard vertical divider instead of a
   circular spotlight, with a visible handle line at the split. Same
   --mx custom property, driven by the same pointermove JS. */
.reveal-card__media--wipe .reveal-card__img--after {
  -webkit-mask-image: linear-gradient(90deg, black 0%, black var(--mx), transparent var(--mx));
  mask-image: linear-gradient(90deg, black 0%, black var(--mx), transparent var(--mx));
}
.reveal-card__media--wipe::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--mx); z-index: 2;
  width: 2px; margin-left: -1px; background: var(--white);
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
  pointer-events: none;
}
.reveal-card__hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--fg-strong);
  background: rgba(10,10,11,0.6); backdrop-filter: blur(6px);
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.reveal-card__hint svg { width: 13px; height: 13px; }
.reveal-card__media.is-touched .reveal-card__hint { opacity: 0; }
.reveal-card__body { padding: 24px 26px 26px; }
.reveal-card__body h3 { font-size: 1.1rem; margin-bottom: 6px; }
.reveal-card__body p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 16px; }
.reveal-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reveal-card__price { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--fg-strong); }
.reveal-card__price span { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.reveal-card__more { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--accent-soft); white-space: nowrap; }
.reveal-card__more svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.reveal-card:hover .reveal-card__more svg { transform: translateX(3px); }
@media (max-width: 980px) { .reveal-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reveal-cards { grid-template-columns: 1fr; } }

/* ============ Bento "What's Included" grid — photo cards stacked next
   to and on top of each other, each a real background image with a
   bottom scrim, title, description and price — not an icon-in-a-box
   list. First card spans the full width as a lead tile. ============ */
.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 18px; }
.media-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 300px; border-radius: var(--radius);
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.media-card:hover { border-color: var(--accent-line); }
.media-card:hover .media-card__img { transform: scale(1.06); }
.media-card__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.6s var(--ease); filter: saturate(0.95) brightness(0.92);
}
.media-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,6,7,0.94) 0%, rgba(6,6,7,0.55) 45%, rgba(6,6,7,0.05) 75%);
}
.media-card__body { position: relative; z-index: 1; padding: 26px 26px 24px; width: 100%; }
.media-card h3 { font-size: 1.15rem; color: var(--fg-strong); margin-bottom: 6px; }
.media-card p { color: rgba(245,245,246,0.82); font-size: 0.88rem; max-width: 360px; margin-bottom: 12px; }
.media-card__price {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-soft);
}
.media-card--lead { grid-column: 1 / -1; min-height: 260px; }
.media-card--lead h3 { font-size: 1.6rem; }
.media-card--lead p { font-size: 0.98rem; max-width: 480px; }
@media (max-width: 780px) {
  .bento-grid { grid-template-columns: 1fr; }
  .media-card--lead { grid-column: 1; }
}

/* ============ Marquee ticker ============ */
.marquee { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); overflow: hidden; padding: 22px 0; }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marqueeScroll 32s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; }
.marquee__item::after { content: '\2726'; color: var(--accent-line); margin-left: 48px; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Pricing tiers — oversized price as the hero element,
   ghost-number watermark for depth, featured tier physically elevated
   (not just tinted) so the three cards read as a skyline, not a template
   row. Cards carry .tilt in the HTML for mouse-tracked 3D hover. ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: end; }
.pricing-card {
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 40px 30px 34px; display: flex; flex-direction: column;
  position: relative; isolation: isolate;
}
/* Translucent glass CTA — matches the listing-package cards' .btn-pill
   treatment instead of a solid-fill button, for a cleaner, lighter look. */
.pricing-card .btn {
  width: 100%; justify-content: center;
  background: rgba(255,255,255,0.1); color: var(--fg-strong);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.pricing-card .btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.pricing-card .btn-primary { background: rgba(191,0,178,0.22); border-color: var(--accent-line); }
.pricing-card .btn-primary:hover { background: rgba(191,0,178,0.34); }
/* Ghost index number sits fully inside the card's own box (no negative
   inset) — earlier this bled past the edge and had to be clipped with
   overflow:hidden, which was also clipping the "Most Booked" badge above.
   Nothing needs to bleed now, so nothing needs to be clipped. */
.pricing-card::after {
  content: attr(data-index); position: absolute; right: 14px; top: -0.1em; z-index: -1;
  font-family: var(--font-head); font-weight: 600; font-size: 7rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--border-strong);
  pointer-events: none;
}
/* Colored top accent bar on the two non-featured tiers — the featured
   card already reads as premium via its glow/elevation, so the outer two
   get a shot of color instead of sitting totally flat next to it. */
.pricing-card:not(.pricing-card--featured)::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, #ff8a3d, #d94f04);
}
.pricing-card:nth-child(3):not(.pricing-card--featured)::before { background: linear-gradient(90deg, #4dc7ff, #0b6fb8); }
.pricing-card--featured {
  border-color: var(--accent-line);
  background: linear-gradient(160deg, rgba(191,0,178,0.18), transparent 65%), rgba(255,255,255,0.035);
  position: relative; transform: translateY(-18px);
  box-shadow: 0 30px 60px -24px rgba(191,0,178,0.35), 0 0 0 1px var(--accent-line);
}
.pricing-card--featured::before {
  content: 'Most Booked'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 999px; box-shadow: 0 8px 20px -6px var(--accent-glow);
}
.pricing-card__tier { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 6px; }
.pricing-card__price { font-family: var(--font-head); font-weight: 600; font-size: 3.4rem; color: var(--fg-strong); letter-spacing: -0.02em; line-height: 1.05; }
.pricing-card--featured .pricing-card__price { font-size: 3.8rem; }
.pricing-card__price span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-faint); text-transform: none; }
.pricing-card ul { margin: 26px 0 28px; display: flex; flex-direction: column; gap: 13px; flex-grow: 1; }
.pricing-card li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9rem; color: var(--text-dim); }
.pricing-card li svg { color: var(--accent-soft); width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; }
@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }
}

/* ============ Offer rows (Services page) ============ */
.offer-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 28px; align-items: start;
  padding: 44px 0; border-top: 1px solid var(--border);
  scroll-margin-top: 100px;
}
.offer-row:last-child { border-bottom: 1px solid var(--border); }
.offer-row__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent-dim); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-soft); font-size: 1.4rem;
}
.offer-row__body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.offer-row__body > p { color: var(--text-dim); max-width: 560px; margin-bottom: 20px; }
.offer-row__bullets { display: flex; flex-wrap: wrap; gap: 10px; }
.offer-row__bullets li {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--text-dim);
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
}
.offer-row__bullets svg { width: 14px; height: 14px; color: var(--accent-soft); }
.offer-row__cta { align-self: center; }
@media (max-width: 780px) {
  .offer-row { grid-template-columns: 1fr; }
  .offer-row__cta { justify-self: start; }
}

.services-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .services-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid--4 { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: 28px 0; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: 1.1rem; margin-bottom: 10px; }
.faq-item p { color: var(--text-dim); max-width: 640px; }

/* ============ Page hero (inner pages) ============ */
.page-hero {
  padding: 160px 0 90px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(191,0,178,0.14), transparent 60%), var(--bg);
  text-align: center;
}

/* ============ Media hero — a single real photo, no scroll-scrub, no
   crossfade. Static, fast, and clean: image, scrim for legibility,
   headline, subhead, CTAs. Used on every service landing page. ============ */
.media-hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 140px 0 64px; background-size: cover; background-position: center;
  text-align: center;
}
.media-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.88) 78%, var(--bg) 100%);
}
.media-hero__content { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.media-hero .badge { margin-bottom: 20px; }
.media-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.02em; }
.media-hero p { margin-top: 22px; color: rgba(245,245,246,0.82); font-size: 1.1rem; max-width: 620px; margin-left: auto; margin-right: auto; }
.media-hero__cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .media-hero { min-height: 92vh; padding: 130px 0 50px; } }
.page-hero .badge { margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); max-width: 780px; margin: 0 auto; }
.page-hero p { margin-top: 20px; color: var(--text-dim); font-size: 1.1rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ============ Final CTA ============ */
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(2rem, calc(1.7rem + 1.4vw), 4rem); max-width: 700px; margin: 0 auto; }
.final-cta p { margin-top: 18px; color: var(--text-dim); font-size: clamp(1.05rem, calc(0.98rem + 0.3vw), 1.25rem); }
.final-cta .hero__cta-row { justify-content: center; margin-top: 34px; }

/* ============ Footer ============ */
.site-footer { border-top: 1px solid var(--border); padding: 70px 0 30px; background: var(--bg-alt); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { margin-top: 14px; color: var(--text-faint); font-size: 0.9rem; max-width: 280px; }
.footer-col h4 { font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-faint); font-size: 0.9rem; transition: color 0.25s ease; }
.footer-col a:hover { color: var(--accent-soft); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social__item { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
.footer-social__item:hover { border-color: var(--accent-line); color: var(--accent-soft); }
.footer-bottom { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--text-faint); font-size: 0.82rem; flex-wrap: wrap; gap: 10px; }

/* ============ Scroll reveal ============ */
[data-reveal], [data-reveal-group] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible, [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .site-nav__links { display: none; }
  .site-nav__login { display: none; }
  .nav-burger { display: flex; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__wall { height: 380px; margin-top: 20px; }
  .services-grid, .case-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__item:nth-child(2) { border-right: none; }
  .founder-block { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .guarantee { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  .site-nav__actions .btn-primary { display: none; }
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }
  .services-grid, .case-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stats-bar__item { padding: 24px 14px; border-right: none !important; border-bottom: 1px solid var(--border); }
  .timeline__step { grid-template-columns: 1fr; gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}