/* ============================================================
   LeadFlux — scroll cinematic site
   Brand: Ultraviolet Flux v3.0 / 2026
   ============================================================ */

:root {
  /* Brand tokens (from LeadFlux_Brand_Tokens.css) */
  --lf-ultraviolet: #5426FF;
  --lf-electric-violet: #9B32FF;
  --lf-flux-fuchsia: #ED2FD1;
  --lf-signal-coral: #FF5B5F;
  --lf-amber-spark: #FFB21A;
  --lf-midnight: #090611;
  --lf-ink-violet: #160A23;
  --lf-cloud: #F8F5FA;
  --lf-luminous-white: #FFFFFF;
  --lf-gradient-flux: linear-gradient(105deg, #5426FF 0%, #9B32FF 27%, #ED2FD1 56%, #FF5B5F 80%, #FFB21A 100%);

  /* Derived */
  --lf-dim: rgba(248, 245, 250, 0.62);
  --lf-dimmer: rgba(248, 245, 250, 0.40);
  --lf-hairline: rgba(248, 245, 250, 0.12);
  --lf-panel: rgba(255, 255, 255, 0.028);

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--lf-midnight);
  color: var(--lf-cloud);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--lf-flux-fuchsia); color: #fff; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

a { color: inherit; text-decoration: none; }

.gradient-text {
  background: var(--lf-gradient-flux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(9,6,17,0.82), rgba(9,6,17,0));
  transition: background 0.4s ease;
}
.nav img { height: 30px; width: auto; display: block; }
.nav-links {
  display: flex;
  gap: 34px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lf-dim);
  letter-spacing: 0.01em;
}
.nav-links a { transition: color 0.25s ease; }
.nav-links a:hover { color: var(--lf-luminous-white); }
@media (max-width: 860px) { .nav-links { display: none; } }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 100px;
  background: var(--lf-gradient-flux);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
  box-shadow: 0 6px 30px -8px rgba(155, 50, 255, 0.55);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -8px rgba(237, 47, 209, 0.7); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--lf-hairline);
  box-shadow: none;
  color: var(--lf-cloud);
}
.btn-ghost:hover { border-color: rgba(248,245,250,0.4); box-shadow: none; }
.btn-lg { font-size: 17px; padding: 17px 38px; }

/* ---------- Scrub sections ---------- */
.cinematic { position: relative; background: var(--lf-midnight); }
#hero { height: 300vh; }
#converge { height: 460vh; }
#outreach { height: 480vh; }

.cinematic .sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.cinematic canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 25%, rgba(9,6,17,0.55) 78%, rgba(9,6,17,0.94) 100%),
    linear-gradient(to bottom, rgba(9,6,17,0.5) 0%, transparent 22%, transparent 68%, rgba(9,6,17,0.9) 100%);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.reveal-line {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.4vw, 5.4rem);
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 15ch;
  opacity: 0;
  will-change: opacity, transform;
  text-shadow: 0 4px 60px rgba(9,6,17,0.8);
}
.reveal-line .sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--lf-dim);
  max-width: 34ch;
  margin: 22px auto 0;
  text-shadow: none;
}

/* Final logo lockup that resolves at the end of the hero scrub */
.hero-resolve {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
  padding: 0 var(--gutter);
}
.hero-resolve img { width: min(460px, 74vw); height: auto; }
.hero-resolve p {
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  color: var(--lf-dim);
  letter-spacing: 0.01em;
  text-align: center;
}
.hero-resolve .btn { pointer-events: auto; margin-top: 8px; }

.scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--lf-dimmer);
  transition: opacity 0.5s ease;
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 7px); opacity: 1; }
}

.progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(248,245,250,0.08);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--lf-gradient-flux);
  transition: width 0.08s linear;
}

/* ---------- Generic sections ---------- */
.section { padding: clamp(90px, 13vh, 160px) 0; position: relative; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lf-dimmer);
  margin-bottom: 26px;
}
.section-tag::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--lf-gradient-flux);
  border-radius: 2px;
}
.section h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  max-width: 19ch;
  margin-bottom: 22px;
}
.section .lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--lf-dim);
  max-width: 56ch;
}

/* ---------- Services ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 58px;
}
.card {
  position: relative;
  padding: 34px 30px 32px;
  border: 1px solid var(--lf-hairline);
  border-radius: 20px;
  background: var(--lf-panel);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.35s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--lf-gradient-flux);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(248,245,250,0.22); background: rgba(255,255,255,0.05); }
.card:hover::before { opacity: 1; }
.card-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lf-dimmer);
  margin-bottom: 20px;
  display: block;
}
.card h3 { font-size: 1.32rem; margin-bottom: 12px; letter-spacing: -0.02em; }
.card p { font-size: 0.965rem; color: var(--lf-dim); line-height: 1.62; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 42px; margin-top: 62px; }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--lf-hairline); }
.step-num {
  font-family: var(--font-display);
  font-size: 3.1rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 16px;
  background: var(--lf-gradient-flux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step p { font-size: 0.96rem; color: var(--lf-dim); }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 64px;
  padding: 52px 0;
  border-top: 1px solid var(--lf-hairline);
  border-bottom: 1px solid var(--lf-hairline);
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--lf-gradient-flux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.stat span.label {
  display: block;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--lf-dim);
  letter-spacing: 0.01em;
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(100px, 16vh, 190px) 0;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 130%; height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(155,50,255,0.19) 0%, rgba(237,47,209,0.09) 34%, transparent 68%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { margin: 0 auto 22px; max-width: 17ch; font-size: clamp(2.1rem, 5.4vw, 4rem); }
.cta p { color: var(--lf-dim); max-width: 46ch; margin: 0 auto 40px; font-size: 1.06rem; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--lf-hairline);
  padding: 52px 0 60px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.footer img { height: 26px; width: auto; opacity: 0.9; }
.footer p { font-size: 0.85rem; color: var(--lf-dimmer); }
.footer-links { display: flex; gap: 26px; font-size: 0.87rem; color: var(--lf-dim); }
.footer-links a:hover { color: var(--lf-luminous-white); }

/* ---------- Scroll reveal ---------- */
.reveal {
  /* Transform-only reveal: the element stays fully opaque so it is ALWAYS
     painted. An opacity:0 card gets promoted to a GPU layer that can paint
     stale white on some drivers (fixed only by a hover repaint) — this avoids
     that class of bug entirely. If JS never runs, cards simply sit un-slid. */
  transform: translateY(22px);
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in { transform: none; }
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
}

/* ============================================================
   Added sections — outreach detail, portfolio, booking
   ============================================================ */

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: 58px;
}
.split h3 { font-size: 1.45rem; margin-bottom: 16px; letter-spacing: -0.02em; }

/* ---------- Checklist ---------- */
.ticks { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.ticks li {
  position: relative;
  padding-left: 32px;
  font-size: 1rem;
  color: var(--lf-dim);
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lf-gradient-flux);
  box-shadow: 0 0 14px rgba(155,50,255,0.75);
}
.ticks li b { color: var(--lf-cloud); font-weight: 600; }

/* ---------- Channel chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.chip {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 9px 17px;
  border-radius: 100px;
  border: 1px solid var(--lf-hairline);
  color: var(--lf-dim);
  background: var(--lf-panel);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.chip:hover { border-color: rgba(248,245,250,0.32); color: var(--lf-cloud); }

/* ---------- Portfolio ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 22px;
  margin-top: 58px;
}
.work-card {
  border: 1px solid var(--lf-hairline);
  border-radius: 20px;
  overflow: hidden;
  background: var(--lf-panel);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s ease;
}
.work-card:hover { transform: translateY(-5px); border-color: rgba(248,245,250,0.24); }
.work-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--lf-ink-violet);
}
.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.92;
  transition: transform 1.1s cubic-bezier(0.4,0,0.2,1);
}
.work-card:hover .work-tile::after { transform: scale(1.06); }
.tile-1::after { background: radial-gradient(circle at 28% 32%, #5426FF 0%, transparent 58%), radial-gradient(circle at 74% 68%, #ED2FD1 0%, transparent 56%), #160A23; }
.tile-2::after { background: radial-gradient(circle at 70% 26%, #9B32FF 0%, transparent 58%), radial-gradient(circle at 30% 76%, #FF5B5F 0%, transparent 56%), #160A23; }
.tile-3::after { background: radial-gradient(circle at 50% 24%, #ED2FD1 0%, transparent 55%), radial-gradient(circle at 26% 78%, #FFB21A 0%, transparent 52%), #160A23; }
.tile-4::after { background: radial-gradient(circle at 24% 70%, #5426FF 0%, transparent 55%), radial-gradient(circle at 78% 34%, #FFB21A 0%, transparent 55%), #160A23; }
.tile-5::after { background: radial-gradient(circle at 62% 62%, #9B32FF 0%, transparent 58%), radial-gradient(circle at 24% 26%, #ED2FD1 0%, transparent 54%), #160A23; }
.tile-6::after { background: radial-gradient(circle at 38% 66%, #FF5B5F 0%, transparent 56%), radial-gradient(circle at 72% 30%, #5426FF 0%, transparent 56%), #160A23; }
.work-badge {
  position: absolute;
  z-index: 2;
  left: 16px; top: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(9,6,17,0.62);
  border: 1px solid rgba(248,245,250,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--lf-cloud);
}
.work-body { padding: 24px 24px 26px; }
.work-body h3 { font-size: 1.12rem; margin-bottom: 8px; letter-spacing: -0.015em; }
.work-body p { font-size: 0.92rem; color: var(--lf-dim); line-height: 1.6; }
.work-note {
  margin-top: 38px;
  padding: 22px 26px;
  border: 1px dashed rgba(248,245,250,0.2);
  border-radius: 16px;
  font-size: 0.94rem;
  color: var(--lf-dimmer);
  text-align: center;
}

/* ---------- Booking ---------- */
.book {
  position: relative;
  padding: clamp(100px, 15vh, 175px) 0;
  overflow: hidden;
}
.book::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 125%; height: 175%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(84,38,255,0.22) 0%, rgba(237,47,209,0.11) 36%, transparent 70%);
  pointer-events: none;
}
.book > * { position: relative; }
.book-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
.book h2 { font-size: clamp(2.1rem, 4.9vw, 3.6rem); max-width: 16ch; margin-bottom: 20px; }
.book .lede { margin-bottom: 34px; }

.book-panel {
  border: 1px solid var(--lf-hairline);
  border-radius: 24px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 38px 34px 34px;
  text-align: center;
}
.book-panel .dur {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--lf-gradient-flux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.book-panel .dur-label {
  display: block;
  margin-top: 8px;
  font-size: 0.87rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lf-dimmer);
  margin-bottom: 28px;
}
.book-panel .btn { width: 100%; }
.book-panel .fineprint {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--lf-dimmer);
  line-height: 1.5;
}
.book-embed {
  margin-top: 26px;
  padding: 20px;
  border: 1px dashed rgba(248,245,250,0.22);
  border-radius: 14px;
  font-size: 0.82rem;
  color: var(--lf-dimmer);
  line-height: 1.5;
}
.book-embed code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--lf-cloud);
}

/* ---------- Live portfolio card (links to a real case study) ---------- */
.work-card.is-live { display: block; cursor: pointer; }
.work-card.is-live .work-tile { background: #F5F1EA; }
.work-card.is-live .work-tile::after { content: none; }
.work-card.is-live .work-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.4,0,0.2,1);
}
.work-card.is-live:hover .work-tile img { transform: scale(1.05); }
.work-cta {
  display: block;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lf-cloud);
  transition: color 0.3s ease;
}
.work-card.is-live:hover .work-cta { color: var(--lf-flux-fuchsia); }

/* ============================================================
   Simplified site — added blocks
   ============================================================ */

/* alternating band so sections separate without extra chrome */
.band { background: var(--lf-ink-violet); }

/* two-column fit / anti-fit */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 5vw, 64px);
  margin-top: 52px;
}
.col-h {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lf-hairline);
}
.col-h.good { color: var(--lf-cloud); }
.col-h.bad  { color: var(--lf-dimmer); }
.ticks-muted li { color: var(--lf-dimmer); }
.ticks-muted li::before { background: rgba(248,245,250,0.22); box-shadow: none; }

/* pricing page */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 56px;
  align-items: start;
}
.tier {
  position: relative;
  border: 1px solid var(--lf-hairline);
  border-radius: 20px;
  background: var(--lf-panel);
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tier.featured {
  border-color: rgba(155,50,255,0.55);
  background: rgba(155,50,255,0.055);
}
.tier.featured::before {
  content: "Most chosen";
  position: absolute;
  top: -11px; left: 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--lf-gradient-flux);
  color: #fff;
}
.tier-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tier-for { font-size: 0.88rem; color: var(--lf-dimmer); margin-top: -10px; }
.tier-price {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--lf-gradient-flux);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tier-price small {
  display: block;
  -webkit-text-fill-color: var(--lf-dim);
  color: var(--lf-dim);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 9px;
}
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.tier li {
  position: relative;
  padding-left: 24px;
  font-size: 0.93rem;
  color: var(--lf-dim);
  line-height: 1.55;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lf-gradient-flux);
}
.tier li b { color: var(--lf-cloud); font-weight: 600; }
.tier .btn { margin-top: auto; text-align: center; }

/* entry offers */
.entry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.entry-card {
  border: 1px dashed rgba(248,245,250,0.24);
  border-radius: 18px;
  padding: 28px 28px 26px;
}
.entry-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.entry-card .p { font-size: 1.5rem; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.03em; margin-bottom: 12px; }
.entry-card p { font-size: 0.92rem; color: var(--lf-dim); }

/* add-ons + faq */
.addons { margin-top: 50px; border-top: 1px solid var(--lf-hairline); }
.addon-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid var(--lf-hairline);
  font-size: 0.95rem;
}
.addon-row span { color: var(--lf-dim); }
.addon-row b { white-space: nowrap; font-weight: 600; }
.faq { margin-top: 56px; }
.faq details {
  border-bottom: 1px solid var(--lf-hairline);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--lf-dimmer); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: var(--lf-dim); font-size: 0.95rem; max-width: 68ch; }

.page-head { padding: clamp(140px, 20vh, 210px) 0 0; }
.note-bar {
  margin-top: 44px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--lf-panel);
  border: 1px solid var(--lf-hairline);
  font-size: 0.88rem;
  color: var(--lf-dim);
}

.narrow { max-width: 820px; }

/* ============================================================
   Intro + clutter-to-calm story section
   ============================================================ */

/* ---------- intro: establish the brand fast ---------- */
.intro{
  position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;padding:120px var(--gutter) 90px;overflow:hidden;
}
.intro-bg{
  position:absolute;inset:0;
  background-image:image-set(url("assets/intro-splash.webp") 1x);
  background-size:cover;background-position:center;
  opacity:.5;
}
.intro-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(9,6,17,.30) 0%, rgba(9,6,17,.86) 72%, #090611 100%),
    linear-gradient(to bottom, rgba(9,6,17,.9) 0%, transparent 26%, transparent 62%, #090611 100%);
}
@media (max-width:900px){
  .intro-bg{background-image:image-set(url("assets/intro-splash-sm.webp") 1x)}
}
.intro-inner{position:relative;max-width:940px}
.intro img.mark{width:min(300px,62vw);height:auto;margin:0 auto 40px;display:block}
.intro h1{
  font-size:clamp(2.2rem,5.6vw,4.2rem);letter-spacing:-.035em;line-height:1.04;
  margin-bottom:22px;
}
.intro h1 em{
  font-style:normal;
  background:var(--lf-gradient-flux);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.intro p{
  font-size:clamp(1.02rem,1.7vw,1.32rem);color:var(--lf-dim);
  max-width:56ch;margin:0 auto 38px;line-height:1.6;
}
.intro-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.intro-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lf-dimmer);white-space:nowrap;
}
.intro-cue::after{
  content:"";width:1px;height:34px;
  background:linear-gradient(to bottom,rgba(248,245,250,.42),transparent);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- story section (clutter -> calm) ---------- */
#story{height:520vh;position:relative}
#story .stage-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#eef0f4}
#vortex{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#veil{position:absolute;inset:0;background:var(--lf-midnight);opacity:0;pointer-events:none;will-change:opacity}
#stageWrap{position:absolute;inset:0;pointer-events:none}
#stage{position:absolute;transform-origin:0 0;will-change:transform}
.el{position:absolute;will-change:transform,opacity;transform-origin:center center}

#story .story-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:0 6vw}
.line{
  position:absolute;text-align:center;opacity:0;will-change:opacity,transform;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.9rem,5.4vw,4.4rem);max-width:16ch;
}
.line.dark{color:#12151f;text-shadow:0 2px 40px rgba(255,255,255,.92)}
.line.light{color:var(--lf-cloud);text-shadow:0 4px 60px rgba(9,6,17,.85)}
.line small{
  display:block;font-family:var(--font-body);font-weight:400;letter-spacing:0;
  font-size:clamp(.9rem,1.5vw,1.15rem);margin-top:18px;opacity:.72;
}
#resolve{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:24px;opacity:0;will-change:opacity,transform;padding:0 6vw;
}
#resolve img{width:min(430px,72vw)}
#resolve p{color:var(--lf-dim);font-size:clamp(1rem,1.9vw,1.3rem);text-align:center}
#resolve .btn{pointer-events:auto;margin-top:6px}
#hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:11px;
  font-weight:600;letter-spacing:.26em;color:rgba(20,24,40,.42);transition:opacity .4s;
}
#bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(20,24,40,.10)}
#bar i{display:block;height:100%;width:0;background:var(--lf-gradient-flux)}

@media (prefers-reduced-motion: reduce){
  #story{height:100svh}
  .el{opacity:1 !important}
  .intro-cue::after{animation:none}
}


/* ===== clutter styles — scoped to #stage so they never touch the rest of the site ===== */
#stage .card {background:#fff;border-radius:10px;padding:12px 14px;border:1px solid rgba(20,24,40,.07);
  box-shadow:0 12px 32px -10px rgba(20,24,40,.30),0 2px 6px rgba(20,24,40,.10)}
#stage .row {display:flex;gap:10px;align-items:flex-start}
#stage .av {width:32px;height:32px;border-radius:50%;flex:0 0 32px}
#stage .a1 {background:linear-gradient(135deg,#8fa4c8,#5f7099)}
#stage .a2 {background:linear-gradient(135deg,#c9a2b8,#96738b)}
#stage .a3 {background:linear-gradient(135deg,#9dbfae,#6d9182)}
#stage .a4 {background:linear-gradient(135deg,#c8b391,#9a8464)}
#stage .a5 {background:linear-gradient(135deg,#a3a8c4,#767a99)}
#stage .a6 {background:linear-gradient(135deg,#c3a0a0,#8f6d6d)}
#stage .nm {font-size:12.5px;font-weight:600;color:#161a25}
#stage .ttl {font-size:10.5px;color:#767d8f;margin-top:1px}
#stage .msg {font-size:12px;color:#39404f;line-height:1.42;margin-top:7px}
#stage .tm {position:absolute;top:11px;right:13px;font-size:10px;color:#9aa0af}
#stage .dot {width:7px;height:7px;border-radius:50%;background:#e8484f;display:inline-block;margin-right:5px}
#stage .chip {display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.04em;padding:3px 7px;
  border-radius:20px;margin-top:8px;text-transform:uppercase}
#stage .c-warn {background:#fdeeda;color:#9a6414}.c-bad{background:#fbe3e4;color:#a33036}
#stage .c-ok {background:#e2f0e6;color:#2f6b41}.c-neu{background:#eceef2;color:#5b6273}
#stage .sticky-n {padding:14px 15px;font-family:Caveat,cursive;font-size:19px;line-height:1.25;
  color:#4a3f1c;background:#ffe9a8;box-shadow:0 10px 24px -8px rgba(20,24,40,.34)}
#stage .sticky-n.pink {background:#ffd3dd;color:#5a2733}
#stage .sticky-n.blue {background:#cfe4ff;color:#1f3350}
#stage .sticky-n.green {background:#cdedd6;color:#22452f}
#stage .panel {background:#fff;border-radius:9px;padding:12px 13px;border:1px solid rgba(20,24,40,.08);
  box-shadow:0 13px 32px -10px rgba(20,24,40,.32)}
#stage .panel h4 {font-size:9.5px;color:#6b7284;letter-spacing:.07em;text-transform:uppercase;margin-bottom:9px}
#stage .big {font-size:23px;font-weight:700;color:#161a25;letter-spacing:-.02em}
#stage .sub {font-size:10.5px;color:#767d8f;margin-top:3px}
#stage .up {color:#2f6b41;font-weight:600}.dn{color:#a33036;font-weight:600}
#stage .kv {display:flex;justify-content:space-between;font-size:11px;color:#41485a;padding:4px 0;border-bottom:1px solid #eef1f5}
#stage .kv b {font-weight:600;color:#161a25}
#stage .bar {height:5px;background:#eceef2;border-radius:4px;margin-top:7px;overflow:hidden}
#stage .bar i {display:block;height:100%;background:#4a72d0;border-radius:4px}
#stage .spark {display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:8px}
#stage .spark i {flex:1;background:#c3ccdd;border-radius:2px 2px 0 0}
#stage .sheet {background:#fff;border-radius:8px;overflow:hidden;border:1px solid rgba(20,24,40,.08);
  box-shadow:0 13px 32px -10px rgba(20,24,40,.32)}
#stage .sheet .hd {display:flex;background:#f4f6f9;border-bottom:1px solid #e3e7ee}
#stage .sheet .hd div {font-size:9.5px;font-weight:700;color:#6b7284;padding:6px 9px;letter-spacing:.05em}
#stage .sheet .r {display:flex;border-bottom:1px solid #eef1f5}
#stage .sheet .r div {font-size:10.5px;color:#41485a;padding:5px 9px;white-space:nowrap;overflow:hidden}
#stage .w1 {width:110px}.w2{width:92px}.w3{width:78px}
#stage .tabs {background:#dde1e8;border-radius:9px 9px 0 0;padding:5px 5px 0;display:flex;gap:3px;
  box-shadow:0 13px 30px -12px rgba(20,24,40,.34)}
#stage .tab {background:#f2f4f7;border-radius:6px 6px 0 0;padding:6px 10px;font-size:10px;color:#5b6273;white-space:nowrap}
#stage .tab.on {background:#fff;color:#161a25;font-weight:600}
#stage .cal {background:#fff;border-radius:9px;padding:12px;border:1px solid rgba(20,24,40,.08);
  box-shadow:0 13px 32px -10px rgba(20,24,40,.32)}
#stage .cal h4 {font-size:9.5px;color:#6b7284;letter-spacing:.07em;margin-bottom:8px;text-transform:uppercase}
#stage .ev {font-size:10.5px;padding:4px 7px;border-radius:5px;margin-bottom:4px;color:#2b3140}
#stage .e1 {background:#e7eefc;border-left:3px solid #4a72d0}
#stage .e2 {background:#fdecec;border-left:3px solid #d5555c;text-decoration:line-through;color:#8d939f}
#stage .e3 {background:#eaf5ec;border-left:3px solid #4f9463}
#stage .toast {background:#1b2030;color:#eef0f5;border-radius:9px;padding:10px 13px;font-size:11px;
  line-height:1.38;box-shadow:0 13px 30px -10px rgba(0,0,0,.5)}
#stage .toast b {color:#fff}
#stage .badge {background:#e8484f;color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;
  padding:3px 8px;box-shadow:0 6px 14px -4px rgba(232,72,79,.6)}
#stage .ad {background:#fff;border-radius:9px;overflow:hidden;border:1px solid rgba(20,24,40,.08);
  box-shadow:0 13px 32px -10px rgba(20,24,40,.32)}
#stage .ad .im {height:74px;background:linear-gradient(120deg,#5a6ea8,#9a7fb0)}
#stage .ad .bd {padding:9px 11px}
#stage .ad .t {font-size:11px;font-weight:600;color:#161a25;line-height:1.3}
#stage .ad .s {font-size:9.5px;color:#767d8f;margin-top:4px}


/* deep-dive link inside a service card (added for the LinkedIn pillar) */
.card .card-link{
  display:inline-block;margin-top:16px;font-size:.86rem;font-weight:600;
  color:var(--lf-cloud);border-bottom:1px solid var(--lf-hairline);
  padding-bottom:2px;transition:border-color .25s ease,opacity .25s ease;
}
.card .card-link:hover{border-color:var(--lf-electric-violet);opacity:.9}

/* ============================================================
   Content pages (Work, About, Engines) — added for the full site
   ============================================================ */
.page-hero{
  position:relative;padding:clamp(140px,20vh,220px) 0 clamp(50px,8vh,90px);
  overflow:hidden;border-bottom:1px solid var(--lf-hairline);
}
.page-hero .ph-bg{
  position:absolute;inset:0;background-image:image-set(url("assets/intro-splash.webp") 1x);
  background-size:cover;background-position:center;opacity:.28;
}
.page-hero .ph-scrim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, rgba(9,6,17,.55) 0%, rgba(9,6,17,.9) 75%, #090611 100%),
             linear-gradient(to bottom, rgba(9,6,17,.85) 0%, transparent 35%, transparent 60%, #090611 100%);
}
.page-hero .wrap{position:relative}
.page-hero h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.03;
  font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch;margin-bottom:22px;
}
.page-hero h1 em{font-style:normal;background:var(--lf-gradient-flux);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lede{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--lf-dim);max-width:60ch;line-height:1.62}

.prose{max-width:66ch}
.prose p{color:var(--lf-dim);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.72;margin-bottom:22px}
.prose p strong{color:var(--lf-cloud);font-weight:600}

/* Engines: big alternating rows */
.engine-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;
  padding:clamp(48px,7vh,84px) 0;border-top:1px solid var(--lf-hairline);
}
.engine-row:first-of-type{border-top:0}
.engine-row .num{
  font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lf-dimmer);margin-bottom:16px;display:block;
}
.engine-row h2{font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;margin-bottom:16px;max-width:16ch}
.engine-row p{color:var(--lf-dim);font-size:1.02rem;line-height:1.66;margin-bottom:18px;max-width:52ch}
.engine-row .art{
  aspect-ratio:4/3;border-radius:20px;border:1px solid var(--lf-hairline);overflow:hidden;position:relative;
  background:var(--lf-ink-violet);
}
.engine-row .art::after{content:"";position:absolute;inset:0;opacity:.9}
.engine-row:nth-child(odd) .art::after{background:radial-gradient(circle at 30% 30%,#5426FF 0%,transparent 58%),radial-gradient(circle at 74% 70%,#ED2FD1 0%,transparent 56%),#160A23}
.engine-row:nth-child(even) .art::after{background:radial-gradient(circle at 70% 26%,#9B32FF 0%,transparent 58%),radial-gradient(circle at 26% 74%,#FF5B5F 0%,transparent 56%),#160A23}
.engine-row:nth-child(3n) .art::after{background:radial-gradient(circle at 50% 30%,#FFB21A 0%,transparent 55%),radial-gradient(circle at 30% 74%,#5426FF 0%,transparent 55%),#160A23}
.engine-row.flip .txt{order:2}.engine-row.flip .art{order:1}
.engine-row .art .lbl{
  position:absolute;z-index:2;left:20px;bottom:18px;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 20px rgba(9,6,17,.6);
}
@media (max-width:820px){
  .engine-row{grid-template-columns:1fr;gap:24px}
  .engine-row.flip .txt{order:1}.engine-row.flip .art{order:2}
}

/* ---------- Mobile menu (CSS-only hamburger) ---------- */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:24px;height:2px;background:var(--lf-cloud);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
@media (max-width:860px){
  .nav{flex-wrap:wrap;row-gap:0}
  .nav > a:first-child{order:1}                 /* logo — left */
  .nav-burger{display:flex;order:2;margin-left:auto}  /* burger — right */
  .nav-links{
    order:3;display:none;width:100%;flex-direction:column;gap:0;
    margin-top:14px;border-top:1px solid var(--lf-hairline);
  }
  .nav-links a{padding:15px 4px;border-bottom:1px solid var(--lf-hairline);font-size:1rem}
  .nav .btn{order:4;display:none;width:100%;text-align:center;margin-top:12px}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-toggle:checked ~ .btn{display:block}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}