/* ============================================================
   WORKERS — landing page styles
   Forks the design-system kit atoms and extends with the
   richer component set the brief calls for.
   ============================================================ */
@import url("colors_and_type.css");
@import url("https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css");

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* a11y: lift muted text one step (neutral-400 #6B6571 → neutral-300 #8A8392)
     so small supportive labels clear WCAG AA (~4.6:1) on dark surfaces. */
  --fg3: #8A8392;
  /* tweakable */
  --glow-mult: 1;
  /* custom glow stacks that respond to --glow-mult */
  --ws-glow: 0 0 0 1px var(--border-brand),
             0 0 24px rgba(242,34,72, calc(0.30 * var(--glow-mult))),
             0 14px 60px rgba(242,34,72, calc(0.42 * var(--glow-mult))),
             0 0 120px rgba(140,107,240, calc(0.20 * var(--glow-mult)));
  --ws-glow-soft: 0 0 0 1px var(--border-default),
             0 10px 40px rgba(140,107,240, calc(0.16 * var(--glow-mult)));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(242,34,72,0.3); color: #fff; }

.wrap { max-width: 1216px; margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; position: relative; }
.section--raised { background: var(--bg-raised); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
/* section-rhythm tweak: flat suppresses the raised fills */
body.rhythm-flat .section--raised { background: transparent; border-color: transparent; }

/* light section — Streak-style dark→light→dark transition */
.section--light { background: #F5F5F7; }
.section--light .eyebrow { color: var(--violet-700); }
.section--light .eyebrow .dot { background: var(--violet-700); box-shadow: 0 0 12px rgba(106,64,217,0.45); }
.section--light .h-section { color: #15131C; }
.section--light .p-lead { color: #55505E; }
.section--light .work-bridge { color: #15131C; font-weight: 500; }

/* "these are examples" note shown below example grids */
.examples-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 34px auto 0; max-width: 660px; text-align: center; font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; line-height: 1.55; color: var(--fg3); }
.examples-note i { font-size: 17px; color: var(--magenta-300); flex-shrink: 0; }
.section--light .examples-note { color: #6B6675; }
.section--light .examples-note i { color: var(--violet-700); }

/* dark cards on light bg, each with an alternating cursor-following INNER glow */
.work-card {
  position: relative; overflow: hidden; height: 100%; --mx: 50%; --my: 50%;
  display: flex; flex-direction: column; gap: 16px; padding: 22px 20px; border-radius: 18px;
  background: linear-gradient(155deg, #241B16 0%, #15110D 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 18px 44px rgba(18,8,28,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .25s var(--ease);
}
.work-card:hover { transform: translateY(-3px); }
.work-card.acc-magenta { border-color: rgba(242,34,72,0.28); --glow-c: rgba(242,34,72,0.42); }
.work-card.acc-violet  { border-color: rgba(140,107,240,0.30); --glow-c: rgba(140,107,240,0.42); }
.work-card-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7; transition: opacity .35s var(--ease);
  background: radial-gradient(220px circle at var(--mx) var(--my), var(--glow-c), transparent 70%);
}
.work-card:hover .work-card-glow { opacity: 1; }
.work-card > .orb, .work-card > .wc-label { position: relative; z-index: 1; }
.work-card .wc-label { font-family: var(--font-body); font-weight: 500; font-size: 14.5px; line-height: 1.45; color: #ECECF2; }

/* ---------------------------------------------------------------
   CONVERT — S2.5 "what conversion-aware means" (white section)
--------------------------------------------------------------- */
.convert-sec { padding-top: 44px; }
#work { padding-bottom: 56px; }
.convert-head { max-width: 820px; margin: 0; text-align: left; }
.convert-head .h-section { margin: 0; text-wrap: balance; }
.convert-head .p-lead { margin: 18px 0 0; max-width: 660px; }

/* staged "we rebuild the parts" transformation viz — image-driven, four beats */

/* ============================================================
   CW AUDIT ANIMATION — signals → diagnosis → roadmap → action
   ============================================================ */
.cwa-frame { position: relative; margin: 56px auto 80px; max-width: 1040px; }
.cwa-stage {
  position: relative; width: 100%; margin: 0 auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(58% 60% at 50% 46%, rgba(140,107,240,0.10), transparent 70%),
    radial-gradient(46% 50% at 50% 48%, rgba(242,34,72,0.10), transparent 72%),
    #050409;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 30px 80px -38px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* every animated node centers on its (left,top) point */
.cwa-lens, .cwa-sig, .cwa-diag, .cwa-board, .cwa-impl, .cwa-halo {
  position: absolute; transform: translate(-50%, -50%);
  will-change: transform, opacity, filter; pointer-events: none; opacity: 0;
}
.cwa-lens   { left: 50%; top: 47%; width: 48%; height: auto; z-index: 4; filter: drop-shadow(0 0 26px rgba(242,34,72,0.28)); }
.cwa-halo   { left: 50%; top: 47%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,34,72,0.30) 0%, rgba(140,107,240,0.18) 42%, transparent 70%); }
.cwa-sig    { height: auto; z-index: 4; }
.cwa-sig--red    { filter: drop-shadow(0 6px 18px rgba(242,34,72,0.30)); }
.cwa-sig--violet { filter: drop-shadow(0 6px 18px rgba(140,107,240,0.30)); }
.cwa-diag   { left: 50%; top: 56%; width: 38%; height: auto; z-index: 5;
  filter: drop-shadow(0 10px 26px rgba(242,34,72,0.34)); }

/* roadmap board + the 9 priority items overlaid on its cells */
.cwa-board  { left: 50%; top: 49%; width: 80%; z-index: 6; }
.cwa-board-bg { display: block; width: 100%; height: auto; }
.cwa-items {
  position: absolute; top: 29.8%; left: 13.9%; right: 14.6%; bottom: 30.9%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column; gap: 4.3% 3.4%;
}
.cwa-item { width: 100%; height: 100%; min-height: 0; object-fit: contain; opacity: 0; will-change: transform, opacity, filter; }

.cwa-impl   { left: 50%; top: 50%; width: 78%; height: auto; z-index: 8;
  filter: drop-shadow(0 16px 40px rgba(242,34,72,0.30)); }

/* connectors — light streaks (like the hero sweep) that sit BEHIND all the UI:
   a soft wide glow, a faint steady core, and a bright streak of light that travels
   inward toward the lens. non-scaling-stroke keeps widths crisp despite the stretch. */
.cwa-conn, .cwa-aconn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none; overflow: visible; }
.cwa-line-halo, .cwa-line, .cwa-line-pulse { stroke: currentColor; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* tone — color drives both the stroke and the drop-shadow glow */
.cwa-line--red    { color: #ff405e; }
.cwa-line--violet { color: #9b86ff; }
.cwa-line--red    .cwa-line-pulse { color: #fff2f4; }
.cwa-line--violet .cwa-line-pulse { color: #f3efff; }
/* layer 1 — soft wide glow (the beam's halo) */
.cwa-line-halo { stroke-width: 6px; opacity: 0.16; filter: drop-shadow(0 0 7px currentColor); }
/* layer 2 — faint steady core */
.cwa-line { stroke-width: 1px; opacity: 0.30; filter: drop-shadow(0 0 3px currentColor); }
/* layer 3 — a single bright streak of light travelling toward the lens */
.cwa-line-pulse { stroke-width: 2.5px; stroke-dasharray: 5 130; animation: cwaPulse 2s cubic-bezier(0.22,1,0.36,1) infinite; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 3px #fff); }
@keyframes cwaPulse { 0% { stroke-dashoffset: 135; opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cwa-line-pulse { animation: none; opacity: 0; } }
@media (max-width: 720px) { .cwa-stage { aspect-ratio: 4 / 5; } }

.rv-stage { position: relative; width: 100%; max-width: 840px; margin: 52px auto 0; aspect-ratio: 1120 / 642; border-radius: var(--radius-xl); overflow: hidden; background: #07060B; border: 1px solid rgba(140,107,240,0.22); box-shadow: 0 24px 70px -34px rgba(70,40,120,0.7), inset 0 1px 0 rgba(255,255,255,0.05); isolation: isolate; }

/* architectural blueprint texture sitting behind the rebuild animation */
.rv-frame { position: relative; margin: 60px auto 90px; max-width: 1080px; }
.rv-frame .rv-stage { margin: 0 auto; z-index: 1; }
/* purple blur radiating out from the animation screen */
.rv-bloom-purple { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 134%; height: 112%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(140,107,240,0.52) 0%, rgba(140,107,240,0.34) 32%, rgba(140,79,224,0.16) 55%, transparent 78%);
  filter: blur(64px); opacity: calc(0.95 * var(--glow-mult)); }
.rv-texture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 142%; max-width: 1320px; aspect-ratio: 1672 / 941; z-index: 0; pointer-events: none; background: url("assets/convert-texture.avif") center/contain no-repeat; opacity: 0.92; -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 30%, transparent 82%); mask-image: radial-gradient(72% 72% at 50% 50%, #000 30%, transparent 82%); }
@media (max-width: 720px) { .rv-texture { width: 158%; opacity: 0.7; } }
.rv-atmos { position: absolute; inset: 0; z-index: 0; background: url("assets/rv-atmosphere.avif") center/cover no-repeat; opacity: 1; }
.rv-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 90px 12px rgba(0,0,0,0.32); }

/* breathing corner ambience */
.rv-glow { position: absolute; z-index: 1; border-radius: 50%; filter: blur(62px); pointer-events: none; }
.rv-glow--orange { width: 360px; height: 360px; left: -92px; bottom: -118px; background: radial-gradient(circle, rgba(242,34,72,0.34), transparent 68%); animation: rv-breathe 7s ease-in-out infinite; }
.rv-glow--violet { width: 380px; height: 380px; right: -110px; bottom: -130px; background: radial-gradient(circle, rgba(140,107,240,0.32), transparent 68%); animation: rv-breathe 8.5s ease-in-out infinite reverse; }
@keyframes rv-breathe { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* the orbiting UI pieces — positioned in % so the stage scales cleanly */
.rv-card { position: absolute; left: 50%; top: 50%; width: 21%; margin: 0; transform: translate(-50%, -50%) scale(.46); opacity: 0; z-index: 6; pointer-events: none; will-change: left, top, transform, opacity; transition: left .95s var(--ease), top .95s var(--ease), transform .95s var(--ease), opacity .65s var(--ease); }
.rv-card img { display: block; width: 100%; height: auto; }
.rv-card--review   { width: 20%; }
.rv-card--needs    { width: 31%; }
.rv-card--services { width: 34%; }
.rv-card--systems  { width: 20%; }
.rv-card--work     { width: 45%; z-index: 7; }

/* phase 1 — analyze: cards fade in, clustered on the right while the site slides left */
.rv-stage[data-phase="1"] .rv-card { opacity: 1; transform: translate(-50%, -50%) scale(.84); }
.rv-stage[data-phase="1"] .rv-card--review   { left: 63%; top: 25%; }
.rv-stage[data-phase="1"] .rv-card--needs    { left: 85%; top: 24%; }
.rv-stage[data-phase="1"] .rv-card--services { left: 64%; top: 59%; }
.rv-stage[data-phase="1"] .rv-card--systems  { left: 88%; top: 57%; }
.rv-stage[data-phase="1"] .rv-card--work     { left: 73%; top: 86%; }

/* phase 2 + 3 — absorb: the UI pieces fly straight into the site (no orbit detour) */
.rv-stage[data-phase="2"] .rv-card,
.rv-stage[data-phase="3"] .rv-card,
.rv-stage[data-static] .rv-card { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3); }

/* the site itself */
.rv-site { position: absolute; left: 50%; top: 50%; width: 50%; transform: translate(-50%, -50%); z-index: 5; transition: left .95s var(--ease), transform .8s var(--ease); }
.rv-stage[data-phase="1"] .rv-site { left: 30%; }
.rv-stage[data-phase="2"] .rv-site,
.rv-stage[data-phase="3"] .rv-site { left: 50%; transform: translate(-50%, -50%) scale(1.02); }

.rv-screen { position: relative; }
.rv-screen--full { width: 100%; aspect-ratio: 1.3; }
.rv-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .85s var(--ease); }
.rv-screen .rv-after  { opacity: 0; }
.rv-screen .rv-before { opacity: 1; }
.rv-stage[data-built] .rv-screen .rv-after,
.rv-stage[data-static] .rv-screen .rv-after  { opacity: 1; }
.rv-stage[data-built] .rv-screen .rv-before,
.rv-stage[data-static] .rv-screen .rv-before { opacity: 0; }
/* delay the design swap until the glare has crested into the white flash */
.rv-stage[data-built] .rv-screen img { transition: opacity .5s var(--ease) 1.15s; }

/* one-shot glow bloom + glare sweep + full white flash as the site is rebuilt */
.rv-site-pulse { position: absolute; inset: -18% -15%; z-index: 0; border-radius: 30px; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,205,216,0.58), rgba(242,34,72,0.5) 30%, rgba(140,107,240,0.34) 56%, transparent 74%); }
.rv-stage[data-phase="2"] .rv-site-pulse { animation: rv-pulse 1.9s var(--ease) forwards; }
@keyframes rv-pulse { 0% { opacity: 0; transform: scale(.8); } 28% { opacity: 1; transform: scale(1.05); } 60% { opacity: .9; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.24); } }
.rv-site-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; }
.rv-site-shine::before { content: ""; position: absolute; top: -25%; left: -65%; width: 45%; height: 150%; transform: rotate(14deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); filter: blur(7px); }
.rv-stage[data-phase="2"] .rv-site-shine { opacity: 1; }
.rv-stage[data-phase="2"] .rv-site-shine::before { animation: rv-shine 1.15s var(--ease) .35s forwards; }
@keyframes rv-shine { 0% { left: -65%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 125%; opacity: 0; } }

/* the website blooms fully white, then resolves into the new design */
.rv-flash { position: absolute; inset: 0; z-index: 4; border-radius: 6px; pointer-events: none; opacity: 0; background: #fff; }
.rv-stage[data-phase="2"] .rv-flash { animation: rv-flash 1.75s var(--ease) .5s forwards; }
@keyframes rv-flash { 0% { opacity: 0; } 28% { opacity: 1; } 52% { opacity: 1; } 100% { opacity: 0; } }

/* phase caption */
.rv-caption { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: #F5F5F8; background: rgba(12,10,18,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 8px 16px; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.7); }
.rv-caption-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta-400); box-shadow: 0 0 10px var(--magenta-400); animation: rv-cap 1.6s ease-in-out infinite; }
@keyframes rv-cap { 0%,100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) { .rv-glow, .rv-caption-dot, .rv-site-pulse { animation: none; } }

.cv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 38px; max-width: 1080px; margin: 0 auto 0; }
.cv-feature { display: flex; flex-direction: column; gap: 15px; }
.cv-ico { width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 3px 3px 7px rgba(20,16,40,0.44), inset -2px -3px 7px rgba(255,255,255,0.5); transition: transform .42s cubic-bezier(.34,1.32,.5,1), box-shadow .42s var(--ease); }
.cv-ico i { font-size: 23px; line-height: 1; color: #fff; }
.cv-ico--magenta { background: linear-gradient(150deg, var(--magenta-300), var(--magenta-500) 60%, var(--magenta-600)); }
.cv-ico--violet { background: linear-gradient(150deg, var(--violet-300), var(--violet-500) 60%, var(--violet-600)); }
.cv-feature:hover .cv-ico { transform: scale(1.18); box-shadow: 0 14px 26px -8px rgba(20,16,40,0.34), 0 4px 10px -4px rgba(20,16,40,0.22); }
.cv-feature__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: #15131C; margin: 4px 0 0; }
.cv-feature__desc { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.55; color: #55505E; margin: 0; }

@media (max-width: 860px) {
  .cv-cards { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
}
@media (max-width: 560px) {
  .cv-cards { grid-template-columns: 1fr; }
  .rv-stage { aspect-ratio: 1 / 1; }
  .rv-caption { font-size: 12px; padding: 6px 13px; }
}

/* ---------------------------------------------------------------
   ATOMS — buttons, eyebrow, gradient text, glass
--------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  border-radius: 10px; padding: 14px 26px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  transition: transform .15s var(--ease), background .15s, box-shadow .25s, border-color .15s, color .15s;
  white-space: nowrap;
  --mx: 50%; --my: 50%;
}
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.26) 100%); pointer-events: none; }
.btn-ghost::before { display: none; }
.btn > * { position: relative; z-index: 2; }

/* PRIMARY — darker magenta base + light core that follows the cursor + bloom */
.btn-primary {
  overflow: visible;
  background: linear-gradient(100deg, #C4002D 0%, #F22248 50%, #C4002D 100%);
  color: #fff; box-shadow: 0 8px 30px rgba(242,34,72, calc(0.36 * var(--glow-mult)));
}
.btn-primary::before {
  background: radial-gradient(150px circle at var(--mx) var(--my), rgba(255,235,241,0.95) 0%, rgba(255,45,74,0.55) 26%, rgba(242,34,72,0) 64%);
  opacity: .4; transition: opacity .25s var(--ease); z-index: 1;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary::after {
  content: ""; position: absolute; left: var(--mx); top: var(--my);
  width: 210px; height: 210px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,45,74,0.55) 0%, rgba(242,34,72,0) 60%);
  filter: blur(16px); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; z-index: 0;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 48px rgba(242,34,72, calc(0.55 * var(--glow-mult))); }
.btn-primary:active { transform: scale(.98); }

/* SECONDARY — subtle light follow + brand border on hover */
.btn-secondary {
  overflow: visible;
  background: linear-gradient(100deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.10) 100%);
  color: var(--fg1); border: 1px solid var(--border-strong);
}
.btn-secondary::before {
  background: radial-gradient(130px circle at var(--mx) var(--my), rgba(255,186,140,0.24) 0%, rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .25s var(--ease); z-index: 1;
}
.btn-secondary:hover::before { opacity: 1; }
.btn-secondary:hover { border-color: var(--border-brand); }
.btn-ghost { background: transparent; color: var(--fg2); padding: 14px 8px; }
.btn-ghost:hover { color: var(--fg1); }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 9px; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.eyebrow {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-400);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-500); box-shadow: 0 0 12px rgba(140,107,240, calc(0.9 * var(--glow-mult))); }
.gradient-text {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: inherit;
}

.h-section {
  font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--fg1); margin: 16px 0 0; text-wrap: balance;
}
.p-lead {
  font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.6;
  color: var(--fg2); margin: 20px 0 0;
}

/* iOS-style frosted glass — matches the design-system card specimen */
.glass {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.035) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 10px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.2);
}
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, transparent 38%); }
.glass > * { position: relative; z-index: 1; }
.glass--featured { border-color: rgba(242,34,72,0.4); box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 36px rgba(242,34,72, calc(0.28 * var(--glow-mult))), inset 0 1px 0 rgba(255,255,255,0.24); }

/* glossy brand orbs — the iconography system */
.orb {
  position: relative; isolation: isolate; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -6px 10px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.5); }
.orb::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -2; filter: blur(7px); opacity: calc(0.6 * var(--glow-mult)); }
.orb i { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); line-height: 1; }
.orb-magenta { background: radial-gradient(circle at 50% 28%, #F399A4 0%, #F22248 48%, #C4002D 100%); }
.orb-magenta::before { background: #F22248; }
.orb-violet { background: radial-gradient(circle at 50% 28%, #D6C6FF 0%, #7B52E8 48%, #3B1A8F 100%); }
.orb-violet::before { background: #7B52E8; }
.orb-halo { background: radial-gradient(circle at 50% 28%, #F399A4 0%, #F22248 40%, #7B3BD6 100%); }
.orb-halo::before { background: #DF1441; }

/* halo decorations */
.haze-bloom { position: absolute; inset: 0; pointer-events: none; background: var(--grad-haze); opacity: calc(0.7 * var(--glow-mult)); }
.streak { height: 1px; width: 100%; background: var(--grad-light-streak); opacity: calc(0.6 * var(--glow-mult)); }
/* hero atmosphere — a sunrise cresting a dark planet's limb.
   Resting state is the fully-lit beam; on first load (before the page marks
   itself .anim-done) the beam rises from the dim lower edge into the bright
   crest, with a sun-glow climbing the limb. This keeps print / offscreen
   captures lit instead of stuck on the dark first frame. */
.hero-horizon {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/hero-light-1920.avif") 58% center / cover no-repeat;
  mix-blend-mode: screen; opacity: var(--glow-mult, 1);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 56%, #000 100%);
  mask-image: linear-gradient(to right, transparent 30%, #000 56%, #000 100%);
}
.hero-horizon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 30% at 62% 40%,
    rgba(255,196,120,0.5) 0%, rgba(255,126,48,0.22) 34%, transparent 64%);
  opacity: 0.42; transform-origin: 62% 40%;
}
html:not(.anim-done) .hero-horizon { animation: heroSunrise 2.6s cubic-bezier(.22,1,.36,1) backwards; }
html:not(.anim-done) .hero-horizon::after  { animation: heroSunGlow 2.9s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes heroSunrise {
  0%   { opacity: 0; filter: brightness(0.35) saturate(0.7);
         clip-path: polygon(58% 0%, 62% 0%, 44% 100%, 40% 100%); transform: scale(1.03); }
  45%  { opacity: calc(0.7 * var(--glow-mult)); filter: brightness(0.92) saturate(0.96); }
  100% { opacity: var(--glow-mult, 1); filter: none;
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: none; }
}
@keyframes heroSunGlow {
  0%   { opacity: 0; transform: scale(0.32); }
  55%  { opacity: 0.9; transform: scale(1.12); }
  100% { opacity: 0.42; transform: scale(1); }
}
@media (max-width: 860px) {
  .hero-horizon {
    background-position: 60% center; opacity: calc(0.8 * var(--glow-mult));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 92%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.anim-done) .hero-horizon,
  html:not(.anim-done) .hero-horizon::after { animation: none; }
  body.hero-drift .hero-reflect,
  html.anim-done body.hero-drift .hero-horizon { animation: none; }
}

/* hero sunrise video (Tweaks: Hero light → Sunrise video). The wrapper carries
   the screen blend + left-fade mask (so the flip below doesn't mirror the mask);
   the inner video is flipped (beam on the right), zoomed, and brightened. */
.hero-video-wrap {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  mix-blend-mode: screen; opacity: var(--glow-mult, 1);
  -webkit-mask-image: linear-gradient(to right, transparent 26%, #000 52%, #000 100%);
  mask-image: linear-gradient(to right, transparent 26%, #000 52%, #000 100%);
}
body.hero-vid .hero-video-wrap { display: block; }
body.hero-vid .hero-horizon { display: none; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: translateX(24%) scaleX(-1) scale(1.1); transform-origin: center;
  filter: brightness(1.16) saturate(1.08);
}
/* crisp still that crossfades in when the video reaches its stop frame */
.hero-video-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: translateX(17%) scaleX(-1) scale(1.24) rotate(-2.5deg); transform-origin: center;
  filter: brightness(1.16) saturate(1.08);
  opacity: 0; transition: opacity 1.1s ease; z-index: 1; pointer-events: none;
}
.hero-video-wrap.is-ended .hero-video-still { opacity: 1; }
/* light sweep that travels along the sunrise limb. Lives inside the wrap so it
   inherits the screen blend + left-fade mask, and carries the same flip/zoom
   transform as the video so the pulse rides exactly on the beam. */
.hero-sweep {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  overflow: visible;
  transform: translateX(24%) scaleX(-1) scale(1.1); transform-origin: center;
}
.hero-sweep .sweep { fill: none; stroke-linecap: round; }
.hero-sweep .sweep-a { animation: heroSweep 8.5s linear infinite; }
.hero-sweep .sweep-b { animation: heroSweep 8.5s linear infinite; animation-delay: -4.25s; }
@keyframes heroSweep {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1120; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sweep .sweep { animation: none; stroke-dashoffset: -470; }
}
/* purple tail off the lower edge of the beam (color/placement inspiration) */
.hero-purple {
  position: absolute; z-index: 1; pointer-events: none;
  left: 34%; right: 6%; bottom: -8%; height: 50%;
  background: radial-gradient(58% 70% at 58% 36%, rgba(150,86,255,0.55), rgba(123,64,232,0.2) 46%, transparent 72%);
  filter: blur(10px); opacity: 0.8;
  animation: heroPurpleDrift 9s ease-in-out infinite alternate;
}
@keyframes heroPurpleDrift {
  0%   { transform: translate(-2%, 2%) scale(1); opacity: 0.62; }
  100% { transform: translate(3%, -3%) scale(1.08); opacity: 0.85; }
}
@media (max-width: 860px) {
  .hero-video-wrap {
    opacity: calc(0.8 * var(--glow-mult));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 92%, transparent 100%);
  }
  .hero-video, .hero-video-still { transform: scaleX(-1) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .hero-purple { animation: none; } }

/* hero "sunrise + lingering reflection" motion (Tweaks: Hero light → Sunrise drift).
   After the sun rises, the beam drifts slightly and a soft light keeps playing
   across it — the feeling of the sun settling while light still reflects. */
.hero-reflect {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(42% 55% at 60% 44%, rgba(255,212,150,0.34), rgba(255,150,80,0.12) 42%, transparent 72%);
}
body.hero-drift .hero-reflect { animation: heroReflect 11s ease-in-out 2.6s infinite alternate both; }
html.anim-done body.hero-drift .hero-horizon { animation: heroBeamPan 17s ease-in-out infinite alternate; }
@keyframes heroReflect {
  0%   { opacity: 0.16; transform: translate(-2%, 3%) scale(0.97); }
  100% { opacity: 0.40; transform: translate(3%, -3%) scale(1.06); }
}
@keyframes heroBeamPan {
  0%   { background-position: 58% 52%; }
  100% { background-position: 55.5% 45%; }
}
/* hero trust badges (Clutch / Trustpilot) */
.hero-ratings { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.rating-badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.045); border: 1px solid var(--border-default);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rating-brand { width: auto; display: block; opacity: 0.95; }
.rating-div { width: 1px; height: 16px; background: var(--border-strong); }
.rating-stars { display: inline-flex; align-items: center; color: #FFFFFF; font-size: 14px; line-height: 1; letter-spacing: 1px; }
.rating-score { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--fg1); letter-spacing: 0.01em; }

/* sequential star fill: each star pops in 1→5, tinted while "rating", then settles to white */
.rating-anim .rstar { display: inline-block; transform-origin: center 60%;
  transition: color .45s var(--ease);
  animation: starPop .42s var(--ease) backwards; }
.rating-anim.badge-clutch .rstar     { color: #FF3B30; }  /* red as Clutch stars fill */
.rating-anim.badge-trustpilot .rstar { color: #19C57A; }  /* green as Trustpilot stars fill */
.rating-anim.is-rated .rstar         { color: #FFFFFF; }  /* all five landed → settle to white */
@keyframes starPop {
  0%   { opacity: 0; transform: scale(.2) translateY(3px); }
  55%  { opacity: 1; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}
.rating-anim .rating-score { animation: scoreReveal .4s var(--ease) backwards; }
@keyframes scoreReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.anim-done .rating-anim .rstar { animation: none !important; opacity: 1 !important; transform: none !important; color: #FFFFFF !important; }
.anim-done .rating-anim .rating-score { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rating-anim .rstar { animation: none !important; opacity: 1 !important; transform: none !important; color: #FFFFFF !important; }
  .rating-anim .rating-score { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   TOOL WALL — left label + same-direction logo marquee, gray with a
   center color window (logos colorize only as they cross the middle)
--------------------------------------------------------------- */
.tools-band { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,0.012); }
.tools-band .proof-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding-top: 30px; padding-bottom: 30px; opacity: 0; transition: opacity .8s var(--ease), transform .7s var(--ease); }
.tools-band .proof-banner.in { opacity: 1; }
/* left: one line of copy + a single row of metrics */
.proof-banner__text { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.42; color: var(--fg2); margin: 0; max-width: 34ch; }
.bn-metrics { display: flex; gap: 26px; margin-top: 22px; }
.bn-metric { min-width: 0; }
.bn-metric__num { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--fg1); display: flex; align-items: baseline; white-space: nowrap; }
.bn-metric__suffix { color: var(--violet-400); font-size: 18px; letter-spacing: -0.01em; }
.bn-metric__label { font-family: var(--font-body); font-weight: 300; font-size: 11px; line-height: 1.3; color: var(--fg3); margin-top: 7px; max-width: 15ch; }
/* right: 2 horizontal logo rows of audited Shopify brands */
.proof-rows {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.proof-row { position: relative; overflow: hidden; }
.proof-row-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.thv-left  { animation: marquee-left linear infinite; }
.thv-right { animation: marquee-right linear infinite; }
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes marquee-right { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
.proof-rows:hover .proof-row-track { animation-play-state: paused; }
.proof-tile {
  flex-shrink: 0; height: 76px; width: 168px; display: flex; align-items: center; justify-content: center;
  padding: 0 22px; background: rgba(255,255,255,0.035); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); transition: border-color .22s ease, background .22s ease;
}
.proof-tile:hover { border-color: var(--border-default); background: var(--surface-hover); }
.proof-tile img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; display: block; opacity: 0.62; }
.proof-tile:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .proof-row-track { animation: none; } }
/* tablet: stack copy/metrics above the logo rows */
@media (max-width: 980px) {
  .tools-band .proof-banner { grid-template-columns: 1fr; gap: 28px; padding-top: 26px; padding-bottom: 26px; }
  .proof-banner__text { max-width: none; }
}

/* ---------------------------------------------------------------
   STATUS PILLS — approved / pending / escalated / monitored / active
--------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill-approved  { color: #8DEFB9; background: rgba(47,211,122,0.12); border-color: rgba(47,211,122,0.30); }
.pill-approved  .pdot { background: var(--success); box-shadow: 0 0 8px rgba(47,211,122,0.7); }
.pill-pending   { color: #FFD98A; background: rgba(255,194,75,0.12); border-color: rgba(255,194,75,0.30); }
.pill-pending   .pdot { background: var(--warning); box-shadow: 0 0 8px rgba(255,194,75,0.7); }
.pill-escalated { color: #FF9DAE; background: rgba(255,84,112,0.12); border-color: rgba(255,84,112,0.32); }
.pill-escalated .pdot { background: var(--danger); box-shadow: 0 0 8px rgba(255,84,112,0.7); }
.pill-monitored { color: var(--violet-400); background: rgba(140,107,240,0.13); border-color: rgba(140,107,240,0.30); }
.pill-monitored .pdot { background: var(--violet-500); box-shadow: 0 0 8px rgba(140,107,240,0.7); }
.pill-active    { color: var(--magenta-200); background: rgba(242,34,72,0.14); border-color: var(--border-brand); }
.pill-active    .pdot { background: var(--magenta-400); box-shadow: 0 0 9px rgba(242,34,72, calc(0.9 * var(--glow-mult))); animation: breathe 2.4s var(--ease) infinite; }

/* tool connection chip */
.tool-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 500; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-default); color: var(--fg2);
  transition: border-color .15s, color .15s, background .15s;
}
.tool-chip i { font-size: 14px; color: var(--violet-400); }
.tool-chip:hover { border-color: var(--border-strong); color: var(--fg1); }

/* ---------------------------------------------------------------
   ENTRANCE / LOOPING ANIMATIONS  (transform/opacity only)
--------------------------------------------------------------- */
/* transform-only: content is ALWAYS visible even if the animation timeline is
   throttled (offscreen iframes, background tabs, screenshot/PDF capture). */
@keyframes rise { from { transform: translateY(26px); } to { transform: none; } }
.rise { animation: rise .8s var(--ease) both; }
.reveal { transform: translateY(26px); transition: transform .7s var(--ease); }
.reveal.in { transform: none; }

/* hero below-headline blocks: actually fade IN (opacity-gated) so they don't appear
   until their delay — i.e. after the headline finishes. The .anim-done + reduced-motion
   fallbacks below force them visible in throttled/capture contexts. */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-rise { animation: heroRise .7s var(--ease) both; }
.anim-done .hero-rise { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-rise { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---- page-load orchestration ---- */
.ld-word { display: inline-block; animation: wordUp .5s var(--ease) backwards; will-change: transform, opacity; }
@keyframes wordUp { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
/* consistent section-header reveal (eyebrow → headline → subtext rise, hero-style) */
.sec-head.seen .eyebrow { animation: wordUp .55s var(--ease) .02s backwards; }
.sec-head.seen .h-section { animation: wordUp .6s var(--ease) .12s backwards; }
.sec-head.seen .p-lead { animation: wordUp .6s var(--ease) .24s backwards; }
@media (prefers-reduced-motion: reduce) { .sec-head.seen .eyebrow, .sec-head.seen .h-section, .sec-head.seen .p-lead { animation: none; } }
.nav-load-logo { animation: navLogoIn .45s var(--ease) .06s backwards; }
@keyframes navLogoIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.nav-load-link { animation: navDrop .42s var(--ease) backwards; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.nav-load-cta { animation: navSlide .45s var(--ease) backwards; }
@keyframes navSlide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* fallback: once the load sequence is over (or timeline was throttled), force the
   resting/visible state so nothing stays hidden in offscreen/background/capture */
.anim-done .ld-word,
.anim-done .nav-load-logo,
.anim-done .nav-load-link,
.anim-done .nav-load-cta,
.anim-done .auto-frame { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
.anim-done .auto-stage { animation: none !important; opacity: 1 !important; }
.anim-done .hl-top    { animation: hl-pulse 6.5s ease-in-out infinite !important; clip-path: none !important; filter: none !important; }
.anim-done .hl-bottom { animation: hl-pulse 6.5s ease-in-out infinite !important; clip-path: none !important; filter: none !important; }

/* ---- card border-glow: one calm edge-sweep that arrives just after the body ---- */
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card-beam {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  pointer-events: none; opacity: 0; z-index: 6;
  background: conic-gradient(from var(--beam-angle),
    rgba(140,107,240,0) 0deg,
    rgba(140,107,240,0) 300deg,
    rgba(180,154,255,0) 308deg,
    var(--violet-300) 330deg,
    rgba(255,200,160,0.92) 344deg,
    var(--magenta-300) 352deg,
    rgba(140,107,240,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
@keyframes beamSpin   { from { --beam-angle: 0deg; } to { --beam-angle: 360deg; } }
@keyframes beamReveal { 0% { opacity: 0; } 14% { opacity: .85; } 70% { opacity: .85; } 100% { opacity: 0; } }
.seen .card-beam {
  animation: beamSpin 1.3s linear 1, beamReveal 1.5s ease forwards;
  animation-delay: calc(var(--bi, 0) * .1s + .22s);
}
.settled .card-beam { animation: none !important; opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .card-beam { animation: none !important; opacity: 0 !important; } }

/* ---- premium card "materialize on load" (Visible.vc-inspired) ----
   Cards are ALWAYS visible by default (safe in throttled/offscreen/capture contexts).
   The materialize plays only on a genuine in-viewport entry (.seen, live timeline);
   .settled (wall-clock, 1.4s after seen) force-settles to the final state so a card
   can never stay stuck on its hidden 0% frame. */
@keyframes cardMat {
  0%   { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(8px) brightness(.72); }
  100% { opacity: 1; transform: none; filter: blur(0) brightness(1); }
}
@keyframes cardMatContent { 0% { opacity: 0; } 100% { opacity: 1; } }
.seen .card-mat,
.seen.card-mat {
  animation: cardMat .72s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--bi, 0) * .1s);
  will-change: opacity, transform, filter;
}
/* internal content fades in a beat after the container */
.seen .card-mat > :not(.card-beam):not(.work-card-glow),
.seen.card-mat > :not(.card-beam):not(.work-card-glow) {
  animation: cardMatContent .44s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(var(--bi, 0) * .1s + .16s);
}
.settled .card-mat, .settled.card-mat,
.settled .card-mat > *, .settled.card-mat > * {
  animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .seen .card-mat, .seen.card-mat,
  .seen .card-mat > *, .seen.card-mat > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

@keyframes breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flow-x { 0% { transform: translateX(-2px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(var(--flow-dist, 90px)); opacity: 0; } }
@keyframes core-pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .85; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } }
@keyframes ringdrift { 0%,100% { opacity: .55; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .ld-word, .nav-load-logo, .nav-load-link, .nav-load-cta { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .auto-frame, .auto-stage, .hl-top, .hl-bottom { animation: none !important; }
  .orbit-spin, .orbit-spin-rev, .floaty, .flow-dot, .core-disc { animation: none !important; }
}

/* ---------------------------------------------------------------
   HERO ORBIT SYSTEM
--------------------------------------------------------------- */
.hero-orbit { position: relative; width: 560px; height: 560px; }
.hero-orbit__bg {
  position: absolute; inset: -120px -80px -80px -40px;
  background-image: url(assets/hero-orbit-bg.avif);
  background-size: cover; background-position: center;
  opacity: calc(0.85 * var(--glow-mult)); pointer-events: none;
  mask-image: radial-gradient(60% 60% at 52% 48%, #000 45%, transparent 82%);
  -webkit-mask-image: radial-gradient(60% 60% at 52% 48%, #000 45%, transparent 82%);
}
.orbit-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1px dashed rgba(255,45,74,0.28);
}
.orbit-ring--mid { border-color: rgba(140,107,240,0.26); border-style: dotted; }
.orbit-spin { animation: spin-slow 90s linear infinite; }
.orbit-spin-rev { animation: spin-rev 120s linear infinite; }
.orbit-tick { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta-400); box-shadow: 0 0 10px rgba(242,34,72,0.9); top: -4px; left: calc(50% - 3.5px); }
.orbit-tick--v { background: var(--violet-500); box-shadow: 0 0 10px rgba(140,107,240,0.9); }

.core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 188px; height: 188px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(circle at 50% 38%, rgba(242,34,72,0.30), rgba(106,64,217,0.16) 55%, rgba(2,3,13,0.0) 78%);
  border: 1px solid var(--border-brand);
  box-shadow: var(--ws-glow), inset 0 0 40px rgba(242,34,72,0.18);
  z-index: 5;
}
.core-disc { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FA4862 0%, #F22248 32%, #8C2BD6 70%, transparent 100%);
  filter: blur(2px); animation: core-pulse 4.5s var(--ease) infinite; z-index: -1; }
.core__label { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-100); }
.core__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; text-align: center; line-height: 1.2; }

/* orbiting node card */
.node-card {
  position: absolute; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(20,20,24,0.78); border: 1px solid var(--border-default);
  backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.node-card .nc-ic { width: 28px; height: 28px; border-radius: 8px; display:flex; align-items:center; justify-content:center; flex-shrink: 0; font-size: 15px; }
.node-card .nc-in  { background: rgba(140,107,240,0.16); color: var(--violet-400); }
.node-card .nc-out { background: rgba(242,34,72,0.16); color: var(--magenta-300); }
.node-card .nc-label { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--fg1); }
.node-card .nc-kind { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }

/* connector + flowing dot */
.connector { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(242,34,72,0) 0%, rgba(242,34,72,0.5) 50%, rgba(242,34,72,0) 100%); z-index: 2; }
.flow-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px rgba(242,34,72,1); z-index: 3; animation: flow-x 2.8s linear infinite; }

.hero-state-chip {
  position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 600; font-size: 11px; padding: 6px 11px; border-radius: 999px;
  background: rgba(20,20,24,0.85); border: 1px solid var(--border-default); backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------
   WORKER CARDS (S3)
--------------------------------------------------------------- */
.worker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.worker-card {
  position: relative; overflow: hidden; text-align: left; cursor: pointer; padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), linear-gradient(180deg, rgba(16,14,20,0.66) 0%, rgba(11,10,15,0.66) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 10px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.worker-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, transparent 38%); }
.worker-card > * { position: relative; z-index: 1; }
.worker-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.22); }
.worker-card.is-glow { border-color: rgba(242,34,72,0.4); box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 36px rgba(242,34,72, calc(0.28 * var(--glow-mult))), inset 0 1px 0 rgba(255,255,255,0.24); }
.worker-card__head { display: flex; align-items: center; gap: 14px; }
.worker-card__ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; color: #fff; background: var(--grad-halo-soft); }
.worker-card__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg1); }
.worker-card__role { font-family: var(--font-ui); font-size: 12px; color: var(--fg3); margin-top: 2px; }
.worker-card__flow { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 18px 0 0; }
.worker-detail { overflow: hidden; transition: max-height .4s var(--ease), opacity .3s var(--ease); }
.worker-meta-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 9px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.worker-meta-row i { color: var(--violet-400); font-size: 16px; }
.worker-meta-row .lbl { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); flex-shrink: 0; }
.worker-meta-row .val { flex-basis: 100%; width: 100%; font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: var(--fg1); }
.worker-card__toggle { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--magenta-300); background: none; border: none; cursor: pointer; padding: 0; }

/* mobile worker tabs (markup only renders below 720px) */
.worker-tabwrap { margin-top: 40px; }
.worker-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.worker-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); color: var(--fg2);
  font-family: var(--font-ui); font-weight: 500; font-size: 13px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
.worker-tab i { font-size: 16px; color: var(--fg3); transition: color .18s; }
.worker-tab.on { background: rgba(242,34,72,0.10); border-color: var(--border-brand); color: #fff;
  box-shadow: 0 0 16px rgba(242,34,72, calc(0.22 * var(--glow-mult))); }
.worker-tab.on i { color: var(--magenta-300); }
.worker-tab-card { animation: tabCardIn .34s var(--ease) both; }
@keyframes tabCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .worker-tab-card { animation: none; } }
.worker-detail.is-static { max-height: none !important; opacity: 1 !important; margin-top: 18px !important; }
.worker-card--cta { margin-top: 0; }
.worker-tabwrap .worker-card--cta { margin-top: 14px; }

/* ---------------------------------------------------------------
   PROCESS TIMELINE (S4)
--------------------------------------------------------------- */
.proc-rail { position: relative; }
.proc-line { position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(to bottom, var(--magenta-500), var(--violet-600)); opacity: 0.3; }
.proc-line-fill { position: absolute; left: 27px; top: 14px; width: 2px; background: var(--grad-halo); box-shadow: 0 0 12px rgba(242,34,72,0.7); transition: height 1.1s var(--ease); }
.proc-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 30px; }
.proc-step:last-child { padding-bottom: 0; }
.proc-node { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-raised); border: 1px solid var(--border-default); font-size: 22px; color: var(--fg3); position: relative; z-index: 2; transition: all .4s var(--ease); }
.proc-step.lit .proc-node { border-color: var(--border-brand); color: var(--magenta-300); box-shadow: var(--ws-glow); background: var(--bg-raised); }
.proc-step__n { font-family: var(--font-mono); font-size: 12px; color: var(--brand); letter-spacing: 0.1em; }
.proc-step__t { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg1); margin: 4px 0 0; }
.proc-step__d { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--fg2); margin: 8px 0 0; max-width: 520px; }
.proc-step__art { align-self: center; }

/* scroll-spy layout: steps on the left, sticky swapping media on the right */
.proc-layout { display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: start; margin-top: 56px; }
.proc-rail { position: relative; }
.proc-light {
  position: absolute; left: 27px; width: 72px; height: 72px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(242,34,72, calc(0.55 * var(--glow-mult))) 0%, rgba(140,107,240,0.22) 45%, transparent 72%);
  filter: blur(7px); transition: top .55s var(--ease);
}
.proc-step { transition: opacity .4s var(--ease); }
.proc-step:not(.active) { opacity: 1; }
.proc-step:not(.active) .proc-step__n,
.proc-step:not(.active) .proc-step__t,
.proc-step:not(.active) .proc-step__d { opacity: 0.42; }
.proc-step.active { opacity: 1; }
.proc-step .proc-node { transition: all .45s var(--ease); }
.proc-step.passed .proc-node { border-color: var(--border-brand); color: var(--magenta-300); }
.proc-step.active .proc-node { border-color: var(--border-brand); color: #fff; background: var(--grad-halo); box-shadow: var(--ws-glow); }
.proc-step.active .proc-step__t { color: var(--fg1); }

/* sticky media */
.proc-sticky { position: sticky; top: 110px; }
.proc-media { position: relative; width: 100%; aspect-ratio: 1 / 1; padding: 8px; }
.proc-media__stage { position: absolute; inset: 8px; border-radius: 14px; overflow: hidden; background: #08080B; }
.proc-slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease); }
.proc-slot.on { opacity: 1; z-index: 2; }
.proc-media__badge { position: absolute; top: 18px; left: 18px; z-index: 5; }

@media (max-width: 960px) {
  .proc-layout { grid-template-columns: 1fr; gap: 32px; }
  .proc-sticky { position: static; max-width: 460px; }
}

/* mobile accordion (markup only renders below 720px) */
.proc-accordion { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.proc-acc-item { border: 1px solid var(--border-subtle); border-radius: 16px; background: rgba(255,255,255,0.02); overflow: hidden; transition: border-color .2s, background .2s; }
.proc-acc-item.open { border-color: var(--border-brand); background: rgba(242,34,72,0.03); }
.proc-acc-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: none; border: none; cursor: pointer; text-align: left; }
.proc-acc-node { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--border-default); color: var(--fg2); font-size: 20px; transition: all .25s; }
.proc-acc-item.open .proc-acc-node { background: var(--grad-halo); border-color: transparent; color: #fff; box-shadow: 0 0 18px rgba(242,34,72, calc(0.4 * var(--glow-mult))); }
.proc-acc-htext { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proc-acc-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg1); }
.proc-acc-chev { font-size: 20px; color: var(--fg3); flex-shrink: 0; transition: color .2s; }
.proc-acc-item.open .proc-acc-chev { color: var(--magenta-300); }
.proc-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.proc-acc-item.open .proc-acc-body { grid-template-rows: 1fr; }
.proc-acc-inner { overflow: hidden; min-height: 0; }
.proc-acc-body .proc-step__d { margin: 0; padding: 0 16px 14px 76px; }
.proc-acc-media { margin: 0 16px 16px; border-radius: 14px; overflow: hidden; padding: 8px; }
.proc-acc-media img { width: 100%; display: block; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .proc-acc-body { transition: none; } }

/* ---------------------------------------------------------------
   PROOF / PRODUCT-PEEK (S6) — task queue, maps, etc.
--------------------------------------------------------------- */
.peek-panel { padding: 22px; border-radius: 18px; background: var(--bg-card-translucent); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); }
.peek-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.peek-title { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); display: flex; align-items: center; gap: 8px; }
.peek-title i { color: var(--violet-400); font-size: 15px; }

.queue-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid var(--border-subtle); margin-bottom: 8px; transition: border-color .3s, background .3s; }
.queue-row:last-child { margin-bottom: 0; }
.queue-row .q-ic { font-size: 16px; color: var(--fg3); }
.queue-row .q-task { font-family: var(--font-body); font-weight: 300; font-size: 13.5px; color: var(--fg1); }
.queue-row .q-sub { font-family: var(--font-ui); font-size: 11px; color: var(--fg3); margin-top: 2px; }
.queue-row.just-changed { border-color: var(--border-brand); background: rgba(242,34,72,0.05); }

/* workflow map */
.map-node { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-default); font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--fg1); }
.map-node i { font-size: 16px; }
.map-arrow { display: flex; align-items: center; justify-content: center; color: var(--fg3); font-size: 18px; }
.map-checkpoint { border-color: var(--border-brand); background: rgba(242,34,72,0.06); }

/* before / after */
.ba-col { padding: 18px; border-radius: 14px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02); }
.ba-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.ba-item { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.45; color: var(--fg2); padding: 7px 0; }
.ba-item i { font-size: 15px; margin-top: 1px; flex-shrink: 0; }

/* escalation callout */
.callout { display: flex; gap: 14px; padding: 20px 22px; border-radius: 16px; background: rgba(140,107,240,0.07); border: 1px solid rgba(140,107,240,0.26); }
.callout i { font-size: 22px; color: var(--violet-500); flex-shrink: 0; margin-top: 1px; }

/* ---- "Before we meet" (control) section ---- */
.control-sec { position: relative; overflow: hidden; }
.control-streaks { position: absolute; top: 48%; right: -10%; transform: translateY(-50%); width: 70%; height: 160%; z-index: 0; pointer-events: none; background: url("assets/how-2.avif") center/cover no-repeat; mix-blend-mode: screen; opacity: .85; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 68% 50%, #000 22%, transparent 74%); mask-image: radial-gradient(ellipse 60% 60% at 68% 50%, #000 22%, transparent 74%); }

.concept-panel { position: relative; z-index: 1; background: linear-gradient(135deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.035) 100%), rgba(11,10,15,0.56); }
.concept-list { display: flex; flex-direction: column; }
.concept-item { display: flex; gap: 15px; padding: 15px 0; border-top: 1px solid var(--border-subtle); }
.concept-item:first-child { border-top: none; padding-top: 2px; }
.concept-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(150deg, var(--violet-300), var(--violet-500) 60%, var(--violet-600)); box-shadow: 0 5px 14px -5px rgba(140,107,240,0.6), inset 0 1px 0 rgba(255,255,255,0.28); }
.concept-t { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; color: var(--fg1); }
.concept-d { font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: var(--fg2); margin: 4px 0 0; }

.control-micro { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--fg3); max-width: 490px; }
.control-micro i { color: var(--violet-400); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 860px) { .control-streaks { width: 130%; right: -34%; opacity: .5; } }

/* "Before we meet" load sequence: bg paints in right→left, then left block
   slides in (L→R), right card slides in (R→L), then its list staggers in. */
.control-sec.seen .control-streaks { animation: ctrlPaint 1.15s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes ctrlPaint { from { clip-path: inset(0 0 0 100%); opacity: .12; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.control-sec.seen .control-left { animation: ctrlInLeft .8s cubic-bezier(.22,1,.36,1) .5s backwards; }
@keyframes ctrlInLeft { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
/* the right card ignites the instant the light front reaches its right edge
   (~0.15s into the right→left paint): a brightness flare + slight scale settle,
   "lit to life" rather than sliding in. The card-beam edge-sweep (~0.22s)
   reinforces it. */
.control-sec.seen .control-right { animation: ctrlIgnite .95s cubic-bezier(.22,1,.36,1) .14s backwards; }
@keyframes ctrlIgnite {
  0%   { opacity: 0; transform: scale(.955) translateX(10px); filter: brightness(2.4) saturate(.55); }
  28%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: brightness(1) saturate(1); }
}
.control-sec.seen .control-right .peek-head { animation: ctrlItem .5s ease .5s backwards; }
.control-sec.seen .control-right .concept-item { animation: ctrlItem .5s ease backwards; }
.control-sec.seen .control-right .concept-item:nth-child(1) { animation-delay: .6s; }
.control-sec.seen .control-right .concept-item:nth-child(2) { animation-delay: .7s; }
.control-sec.seen .control-right .concept-item:nth-child(3) { animation-delay: .8s; }
.control-sec.seen .control-right .concept-item:nth-child(4) { animation-delay: .9s; }
.control-sec.seen .control-right .concept-item:nth-child(5) { animation-delay: 1.0s; }
@keyframes ctrlItem { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .control-sec.seen .control-streaks, .control-sec.seen .control-left, .control-sec.seen .control-right,
  .control-sec.seen .control-right .peek-head, .control-sec.seen .control-right .concept-item { animation: none; }
}

/* ---------------------------------------------------------------
   PROOF — REAL WORKFLOWS (S6): scannable cards + detail drawer
--------------------------------------------------------------- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: stretch; }

.proof-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 40%); }
.proof-card > * { position: relative; z-index: 1; }
.proof-card { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), linear-gradient(180deg, rgba(16,14,20,0.6), rgba(11,10,15,0.6));
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.proof-card:hover { border-color: var(--border-brand); transform: translateY(-3px) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.5), 0 0 30px rgba(242,34,72, calc(0.16 * var(--glow-mult))); }

.proof-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.proof-logo { height: 27px; width: auto; max-width: 158px; object-fit: contain; object-position: left center; display: block; }
.proof-logo--lg { height: 34px; max-width: 240px; }
.proof-co { display: inline-flex; align-items: center; gap: 12px; }
.proof-co-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg1); letter-spacing: -0.01em; }

.proof-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 17px 0 0; }
.proof-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--fg2);
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); }

.proof-headline { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.32; letter-spacing: -0.01em; color: var(--fg1); margin: 17px 0 0; text-wrap: pretty; }
.proof-summary { font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: var(--fg2); margin: 9px 0 0; }

.proof-snap { margin-top: 20px; }
.proof-snap-label { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); margin-bottom: 10px; }
.proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.proof-metric { display: flex; flex-direction: column; gap: 4px; padding: 11px 10px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); }
.pm-v { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -0.015em; }
.pm-magenta { color: var(--violet-300); }
.pm-violet { color: var(--violet-300); }
.pm-halo { background: none; -webkit-text-fill-color: var(--violet-300); color: var(--violet-300); }
.pm-l { font-family: var(--font-ui); font-size: 10px; line-height: 1.3; color: var(--fg2); }

.proof-quote { margin: 20px 0 0; font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--fg2); display: flex; gap: 8px; }
.proof-quote i { font-size: 17px; color: var(--magenta-400); opacity: 0.6; flex-shrink: 0; line-height: 1; font-style: normal; }

.proof-view { margin-top: auto; padding-top: 20px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--magenta-200); background: none; border: none; cursor: pointer; transition: gap .2s var(--ease), color .2s; }
.proof-view:hover { gap: 11px; color: var(--magenta-100); }
.proof-view i { font-size: 16px; }

/* detail drawer (desktop) / bottom sheet (mobile) */
.proof-drawer-root { position: fixed; inset: 0; z-index: 9000; }
.proof-scrim { position: absolute; inset: 0; background: rgba(6,6,9,0.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .36s var(--ease); }
.proof-drawer-root.show .proof-scrim { opacity: 1; }
.proof-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: linear-gradient(180deg, #15151B 0%, #0B0B0F 100%); border-left: 1px solid var(--border-brand);
  box-shadow: -30px 0 90px rgba(0,0,0,0.62); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .42s cubic-bezier(.22,1,.36,1); will-change: transform; }
.proof-drawer-root.show .proof-drawer { transform: none; }

.proof-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 24px 26px; border-bottom: 1px solid var(--border-subtle); }
.proof-drawer-id { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.proof-drawer-co { display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg1); letter-spacing: -0.01em; }
.proof-drawer-badges { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.proof-close { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); color: var(--fg2); font-size: 20px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.proof-close:hover { background: rgba(255,255,255,0.1); color: var(--fg1); border-color: var(--border-strong); }

.proof-drawer-body { flex: 1; overflow-y: auto; padding: 24px 26px 40px; display: flex; flex-direction: column; gap: 24px; }
.proof-drawer-headline { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg1); margin: 0; text-wrap: pretty; }
.pd-block { display: flex; flex-direction: column; gap: 10px; }
.pd-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); display: flex; align-items: center; gap: 7px; }
.pd-label i { font-size: 14px; color: var(--violet-400); }
.pd-text { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }
.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pd-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.45; color: var(--fg1); }
.pd-list li i { font-size: 16px; color: var(--success); flex-shrink: 0; margin-top: 1px; }
.pd-approval { padding: 16px 18px; border-radius: 14px; background: rgba(140,107,240,0.07); border: 1px solid rgba(140,107,240,0.26); gap: 8px; }
.pd-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.pd-quote { position: relative; margin: 0; padding: 20px 22px; border-radius: 16px; background: rgba(242,34,72,0.05); border: 1px solid var(--border-brand); }
.pd-quote > i { font-size: 22px; color: var(--magenta-400); opacity: 0.7; }
.pd-quote p { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--fg1); margin: 8px 0 14px; text-wrap: pretty; }
.pd-quote footer { display: flex; flex-direction: column; gap: 1px; }
.pd-author { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg1); }
.pd-role { font-family: var(--font-ui); font-size: 12px; color: var(--fg3); }

/* thin workflow path with connected nodes */
.wpath { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wpath-node { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); color: var(--fg2); }
.wpath-node.cp { border-color: var(--border-brand); background: rgba(242,34,72,0.08); color: var(--magenta-200); }
.wpath-node.cp i { font-size: 13px; }
.wpath-sep { color: var(--fg3); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .proof-scrim, .proof-drawer { transition: none !important; }
}
@media (max-width: 1000px) {
  .proof-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .proof-drawer { width: 100%; height: 92%; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--border-brand); border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .proof-drawer-root.show .proof-drawer { transform: none; }
  .proof-drawer-body { padding-bottom: 32px; }
}

/* ---------------------------------------------------------------
   CREDIBILITY / "BUILT BY TAURIST" (S7)
--------------------------------------------------------------- */
.cred-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cred-left { max-width: 480px; }
.why-headline { line-height: 1.12; }
.cred-why { margin-top: 30px; padding: 22px 24px; border-radius: 18px; }
.cred-why-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--fg1); }
.cred-why-body { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--fg2); margin: 10px 0 0; }
.cred-why-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-family: var(--font-ui); font-size: 12.5px; color: var(--fg3); }
.cred-why-foot i { color: var(--violet-400); font-size: 15px; flex-shrink: 0; }
.cred-why-credit { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-family: var(--font-body); font-weight: 300; font-size: 12.5px; line-height: 1.5; color: var(--fg3); }
.cred-why-credit i { color: var(--magenta-300); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.cred-right { display: flex; flex-direction: column; gap: 16px; }

/* contrast cards: "what it is not" (muted) vs "the Siteworks way" (featured) */
.why-card { position: relative; padding: 24px 24px 8px; border-radius: 18px; }
.why-card-head { padding-bottom: 4px; }
.why-eyebrow { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta-300); }
.why-eyebrow--neg { color: var(--fg3); }
.why-card-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.25; color: var(--fg1); margin: 9px 0 0; text-wrap: balance; }

.why-rows { margin-top: 6px; }
.why-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.why-row:first-child { border-top: none; }
.why-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.why-ic--neg { background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); color: var(--fg3); }
.why-ic--magenta { background: linear-gradient(150deg, var(--magenta-300), var(--magenta-500) 60%, var(--magenta-600)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(242,34,72, calc(0.26 * var(--glow-mult))); }
.why-ic--violet  { background: linear-gradient(150deg, var(--violet-300), var(--violet-500) 60%, var(--violet-600)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 12px rgba(140,107,240, calc(0.26 * var(--glow-mult))); }
.why-row-txt { min-width: 0; }
.why-row-t { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; color: var(--fg1); }
.why-row--neg .why-row-t { color: var(--fg2); text-decoration: line-through; text-decoration-color: var(--border-strong); text-decoration-thickness: 1.5px; }
.why-row-d { font-family: var(--font-body); font-weight: 300; font-size: 13px; line-height: 1.5; color: var(--fg3); margin-top: 3px; }

@media (max-width: 920px) {
  .cred-layout { grid-template-columns: 1fr; gap: 36px; }
  .cred-left { max-width: 100%; }
}

/* footer grid: brand + two link columns, stacks on small screens */
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   FAQ — COMMON QUESTIONS (S7.5)
--------------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.faq-intro { position: sticky; top: 110px; max-width: 380px; }
.faq-cta { margin-top: 30px; padding: 22px 24px; border-radius: 18px; }
.faq-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--fg1); }
.faq-cta-body { font-family: var(--font-body); font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--fg2); margin: 8px 0 18px; }
.faq-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.faq-cta-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--fg2); text-decoration: none; transition: color .15s, gap .2s; }
.faq-cta-link:hover { color: var(--magenta-200); gap: 9px; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--border-subtle); border-radius: 14px; background: rgba(255,255,255,0.02); transition: border-color .2s, background .2s; }
.faq-item.open { border-color: var(--border-brand); background: rgba(242,34,72,0.03); }
.faq-q-h { margin: 0; font: inherit; font-weight: inherit; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--fg1); transition: color .15s; }
.faq-q:hover { color: var(--magenta-100); }
.faq-ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); color: var(--fg2); font-size: 18px; transition: background .25s, color .25s, border-color .25s; }
.faq-item.open .faq-ic { background: var(--grad-halo); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(242,34,72, calc(0.32 * var(--glow-mult))); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--fg2); margin: 0; padding: 0 20px 20px; max-width: 600px; }
.faq-link { color: var(--magenta-300); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(240,90,194,0.35); transition: color .15s, border-color .15s; }
.faq-link:hover { color: var(--magenta-200); border-color: var(--magenta-200); }

@media (prefers-reduced-motion: reduce) { .faq-a-wrap { transition: none; } }
@media (max-width: 860px) {
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .faq-intro { position: static; max-width: 100%; }
}

/* ---------------------------------------------------------------
   FINAL CTA + FORM (S8)
--------------------------------------------------------------- */
.cta-form { display: flex; flex-direction: column; gap: 14px; }
.field-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg2); margin-bottom: 7px; display: block; text-align: left; }
/* design-system input pattern: icon + input on a raised surface, violet focus */
.field { display: flex; align-items: center; gap: 10px; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.field > i { color: var(--fg3); font-size: 16px; flex-shrink: 0; }
.field input { background: transparent; border: none; outline: none; width: 100%; font-family: var(--font-ui); font-size: 14px; color: var(--fg1); }
.field input::placeholder { color: var(--fg3); }
.field:focus-within { border-color: var(--violet-500); box-shadow: 0 0 0 4px rgba(140,107,240,0.22), 0 0 28px rgba(140,107,240, calc(0.45 * var(--glow-mult))); }
.field:focus-within > i { color: var(--violet-400); }
.field-textarea {
  width: 100%; font-family: var(--font-body); font-weight: 300; font-size: 14.5px; color: var(--fg1);
  background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s; resize: vertical;
}
.field-textarea::placeholder { color: var(--fg3); }
.field-textarea:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 4px rgba(140,107,240,0.22), 0 0 28px rgba(140,107,240, calc(0.45 * var(--glow-mult))); }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-default); color: var(--fg2); cursor: pointer; transition: all .15s; }
.chip-opt:hover { border-color: var(--border-strong); color: var(--fg1); }
.chip-opt.sel { background: rgba(242,34,72,0.12); border-color: var(--border-brand); color: var(--magenta-200); }

/* final-CTA circular orbit visual (under the copy) */
.cta-orbit {
  position: relative; width: 300px; height: 300px; border-radius: 50%; margin-top: 44px; overflow: hidden;
  border: 1px solid var(--border-brand);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.55);
  animation: cta-glow 6.5s var(--ease) infinite;
}
.cta-orbit__img {
  position: absolute; inset: -10%;
  background: url(assets/cta-orbit.avif) 41% 53% / cover no-repeat;
  animation: spin-slow 60s linear infinite; will-change: transform;
}
.cta-orbit__vignette { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: inset 0 0 60px rgba(8,8,11,0.65); }
@keyframes cta-glow {
  0%, 100% { box-shadow: inset 0 0 50px rgba(0,0,0,0.55), 0 0 50px rgba(242,34,72, calc(0.30 * var(--glow-mult))); }
  50%      { box-shadow: inset 0 0 50px rgba(0,0,0,0.55), 0 0 92px rgba(242,34,72, calc(0.50 * var(--glow-mult))), 0 0 130px rgba(140,107,240, calc(0.22 * var(--glow-mult))); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-orbit { animation: none; }
  .cta-orbit__img { animation: none; }
}

/* ---------------------------------------------------------------
   HERO AUTOMATION (looping 4-act sequence)
--------------------------------------------------------------- */
/* hero visual wrapper + light beam reflecting off the top & bottom edges */
.hero-visual { position: relative; display: flex; justify-content: center; }
.hl-top, .hl-bottom {
  position: absolute; left: 50%;
  width: 772px; height: 360px;
  background: url(assets/hero-beam.avif) center / 100% 100% no-repeat;
  mix-blend-mode: screen; pointer-events: none; z-index: 6;
  opacity: calc(0.95 * var(--glow-mult));
  /* fade the beam tip and the left/right box edges so nothing reads as a rectangle */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
/* burst sits 89.1% down the asset — align it exactly to the panel edge */
.hl-top    { top: 0;    transform: translate(-50%, -89.1%);
  animation: hlStrike .55s var(--ease) .45s backwards, hl-pulse 6.5s ease-in-out 1.9s infinite; }
.hl-bottom { top: 100%; transform: translate(-50%, -10.9%) scaleY(-1);
  animation: hlStrike .55s var(--ease) .9s backwards, hl-pulse 6.5s ease-in-out 1.45s infinite; }
/* lightning-strike entrance: beam descends from the tip and flashes on impact */
@keyframes hlStrike {
  0%   { opacity: .15; clip-path: inset(0 0 100% 0); filter: brightness(1.3); }
  58%  { opacity: 1;  clip-path: inset(0 0 7% 0);  filter: brightness(1.4); }
  70%  { clip-path: inset(0 0 0 0); filter: brightness(2.7); }
  100% { opacity: 1;  clip-path: inset(0 0 0 0);  filter: brightness(1); }
}
@keyframes hl-pulse {
  0%, 100% { opacity: calc(0.8 * var(--glow-mult)); }
  50%      { opacity: calc(1 * var(--glow-mult)); }
}
@media (prefers-reduced-motion: reduce) { .hl-top, .hl-bottom { animation: none; } }
/* non-clipping wrapper so the floating chips can peek past the frame edges */
.auto-frame-wrap { position: relative; width: 560px; max-width: 100%; }
.auto-frame {
  position: relative; z-index: 2; width: 560px; max-width: 100%; height: 500px;
  border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 14%, rgba(242,34,72,0.12), transparent 52%),
    radial-gradient(90% 70% at 12% 96%, rgba(140,107,240,0.10), transparent 55%),
    linear-gradient(165deg, #17171D 0%, #0E0E12 58%, #0A0A0D 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 36px 90px rgba(0,0,0,0.6), 0 0 60px rgba(242,34,72, calc(0.10 * var(--glow-mult)));
  animation: cardShellIn .45s var(--ease) .6s backwards;
}
@keyframes cardShellIn { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
.auto-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 22%); }
.auto-stage { position: absolute; inset: 0; transform: scale(0.9); transform-origin: center; animation: contentIn .55s var(--ease) .88s backwards; }
@keyframes contentIn { from { opacity: 0; } to { opacity: 1; } }
.auto-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.auto-conn { fill: none; stroke: url(#autoGrad); stroke-width: 1.4; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .9s var(--ease), opacity .5s; opacity: 0; }
.auto-conn.draw { stroke-dashoffset: 0; opacity: .7; }

.auto-card {
  position: absolute; top: 0; left: 0; width: 232px;
  display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 13px;
  background: linear-gradient(180deg, #1C1C23 0%, #131318 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  white-space: nowrap; z-index: 3;
  transition: transform .9s var(--ease), opacity .6s var(--ease), background .5s, border-color .5s, box-shadow .5s;
  will-change: transform;
}
.auto-card.is-done { border-color: rgba(47,211,122,0.30); }
.auto-card.is-hidden { opacity: 0; transform: scale(.92) !important; }
.auto-card .ac-ic {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
  background: linear-gradient(150deg, var(--ic-a, #F22248), var(--ic-b, #8C6BF0));
  box-shadow: 0 0 14px rgba(242,34,72,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.auto-card .ac-ic .ic-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.auto-card.is-done .ac-ic { background: linear-gradient(150deg, #2FD37A, #1FA85E); box-shadow: 0 0 14px rgba(47,211,122,0.34), inset 0 1px 0 rgba(255,255,255,0.28); }
.auto-card.is-done .ac-ic .ic-base { opacity: 0; }
.auto-card.is-done .ac-ic .ic-done { opacity: 1; transform: scale(1); }
.auto-card .ac-label { position: relative; flex: 1; font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: #ECECF2; }
.auto-card .ac-label .lb-done { position: absolute; left: 0; top: 0; white-space: nowrap; color: #fff; opacity: 0; transition: opacity .35s var(--ease); }
.auto-card.is-done .ac-label .lb-base { opacity: 0; }
.auto-card.is-done .ac-label .lb-done { opacity: 1; }
.auto-card .ac-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ic-a, #F22248); box-shadow: 0 0 8px var(--ic-a, #F22248); transition: background .4s, box-shadow .4s, opacity .4s; }
.auto-card.is-done .ac-dot { background: #2FD37A; box-shadow: 0 0 9px rgba(47,211,122,0.85); }
.auto-badge {
  position: absolute; top: -9px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; color: #fff;
  background: #FB3B5E; border-radius: 999px; box-shadow: 0 3px 9px rgba(251,59,94,0.5);
  transition: transform .4s var(--ease), opacity .4s var(--ease); z-index: 4;
}
.auto-badge.gone { opacity: 0; transform: scale(0); }

/* AI panel */
.ai-panel {
  position: absolute; left: 300px; top: 50%; transform: translateY(-50%); width: 252px;
  border-radius: 20px; background: #0C0C10; border: 1px solid var(--border-brand);
  box-shadow: var(--ws-glow); padding: 16px; z-index: 4;
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.ai-panel.enter { transform: translate(40px, -50%); opacity: 0; }
.ai-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.ai-panel__head .sparkle { font-size: 20px; color: #fff; }
.ai-panel__head .title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; flex: 1; }
.ai-panel__head .live { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(47,211,122,0.9); animation: breathe 2s ease-in-out infinite; }
.ai-step {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 11px; margin-top: 7px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--border-subtle);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.ai-step:first-of-type { margin-top: 0; }
.ai-step .as-ic { font-size: 18px; color: var(--fg2); width: 22px; text-align: center; transition: color .3s; }
.ai-step .as-label { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--fg2); transition: color .3s; }
.ai-step.active { background: rgba(242,34,72,0.10); border-color: var(--border-brand); box-shadow: 0 0 18px rgba(242,34,72, calc(0.28 * var(--glow-mult))); }
.ai-step.active .as-ic, .ai-step.active .as-label { color: #fff; }
.ai-step.active .as-ic { color: var(--magenta-300); }
.ai-step.passed .as-ic { color: var(--success); }

/* summary card */
.summary-card {
  position: absolute; left: 96px; top: 70px; width: 372px;
  border-radius: 22px; background: #0C0C10; border: 1px solid var(--border-brand);
  box-shadow: var(--ws-glow); padding: 24px; z-index: 6;
  opacity: 0; transform: scale(.92); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.summary-card.show { opacity: 1; transform: scale(1); }
.summary-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.summary-head .chk { width: 34px; height: 34px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; color: #08120c; font-size: 20px; box-shadow: 0 0 18px rgba(47,211,122,0.55); }
.summary-head .h { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; }
.summary-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); margin-bottom: 9px; }
.summary-row i { font-size: 17px; color: var(--fg2); }
.summary-row.approve { border-color: rgba(255,194,75,0.32); background: rgba(255,194,75,0.07); }
.summary-row.approve i { color: var(--warning); }
.summary-row .txt { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--fg1); }
.summary-tagline { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; color: #fff; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.summary-tagline .gradient-text { display: inline; }
.float-chip {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(180deg, #34343C 0%, #25252B 100%); border: 1px solid rgba(47,211,122,0.34);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5); white-space: nowrap;
  opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.float-chip i { color: var(--success); font-size: 18px; }
.float-chip .fc-label { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--fg2); }
.float-chip.show { opacity: 1; }

/* ===============================================================
   WORKER BEE CHAT
   =============================================================== */
@keyframes wbRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wbDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes wbOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wbStageIn { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes wbFabIn { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: none; } }

/* shared bits */
.wb-brandmark { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #1F1F27, #131318); border: 1px solid var(--border-brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(242,34,72, calc(0.22 * var(--glow-mult))); }
.wb-brandmark.lg { width: 52px; height: 52px; border-radius: 15px; }
.wb-brandname { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg1); letter-spacing: -0.01em; }
.wb-brandstatus { font-family: var(--font-ui); font-size: 12px; color: var(--fg3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wb-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(47,211,122,0.9); animation: breathe 2s ease-in-out infinite; }

.wb-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; align-self: flex-end;
  background: radial-gradient(120% 120% at 30% 20%, #1E1E26, #121217); border: 1px solid var(--border-brand);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }

/* feed + bubbles */
.wb-feed { display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.wb-feed.inline { flex: 1; overflow: visible; padding: 4px 2px 2px; }
.wb-feed.overlay { flex: 1; overflow-y: auto; padding: 8px 4px 12px; }
.wb-row { display: flex; gap: 10px; align-items: flex-end; animation: wbRowIn .42s cubic-bezier(.16,1,.3,1) both; }
.wb-row.bee { justify-content: flex-start; }
.wb-row.user { justify-content: flex-end; }
.wb-bubble { max-width: 80%; font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.5; }
.wb-bubble.bee { background: linear-gradient(180deg, #1A1A21 0%, #131318 100%); border: 1px solid var(--border-subtle);
  color: var(--fg1); padding: 12px 15px; border-radius: 4px 16px 16px 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.32); }
.wb-bubble-text { display: block; }
.wb-hint { display: block; margin-top: 5px; font-family: var(--font-ui); font-size: 12px; color: var(--fg3); }
.wb-bubble.user { background: linear-gradient(160deg, rgba(242,34,72,0.20), rgba(140,107,240,0.18));
  border: 1px solid var(--border-brand); color: var(--fg1); padding: 11px 13px; border-radius: 16px 4px 16px 16px;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: fit-content; margin-left: auto; }
.wb-answer-chip { font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: #fff; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 4px 11px; }
.wb-answer-note { flex-basis: 100%; text-align: right; font-family: var(--font-body); font-size: 13px; color: var(--fg2); font-style: italic; }

/* closing card */
.wb-bubble.bee.closing { border-color: rgba(47,211,122,0.34); background: linear-gradient(180deg, rgba(47,211,122,0.10), rgba(47,211,122,0.03)); max-width: 92%; }
.wb-close-chk { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--success); color: #08120c; font-size: 18px; box-shadow: 0 0 16px rgba(47,211,122,0.5); margin-bottom: 10px; }
.wb-close-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg1); }
.wb-close-body { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--fg2); margin-top: 6px; }

/* typing */
.wb-bubble.wb-typing { display: flex; gap: 5px; align-items: center; padding: 14px 15px; }
.wb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta-300); animation: wbDot 1.2s infinite; }
.wb-typing span:nth-child(2) { animation-delay: .15s; }
.wb-typing span:nth-child(3) { animation-delay: .3s; }

/* composer */
/* in the inline card, pin the composer (chips + Continue) to the bottom so the
   Continue button sits the same distance (card padding) from the bottom as the right */
.wb-feed.inline > .wb-composer { margin-top: auto; }
.wb-composer { animation: wbRowIn .42s cubic-bezier(.16,1,.3,1) both; margin-top: 2px; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-chip { font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; color: var(--fg2); cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 14px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
.wb-chip:hover { border-color: rgba(255,255,255,0.22); color: var(--fg1); }
.wb-chip.sel { background: rgba(242,34,72,0.12); border-color: var(--border-brand); color: #fff; box-shadow: 0 0 16px rgba(242,34,72, calc(0.24 * var(--glow-mult))); }
.wb-chip-chk { font-size: 14px; color: var(--magenta-300); margin-left: -2px; }
.wb-text { width: 100%; margin-top: 10px; font-family: var(--font-body); font-size: 14px; color: var(--fg1);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 11px 14px; outline: none;
  transition: border-color .18s, background .18s; }
.wb-text::placeholder { color: var(--fg3); }
.wb-text:focus { border-color: var(--border-brand); background: rgba(255,255,255,0.06); }
.wb-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.wb-err { font-family: var(--font-ui); font-size: 12.5px; color: var(--danger); display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .2s; }
.wb-err.show { opacity: 1; }
/* Continue / Resume buttons reuse the site primary CTA (.btn .btn-primary); just keep them right-aligned */
.wb-continue { margin-left: auto; }

/* inline card (in the CTA) — fixed height reserved for the Q1 stage so it never
   resizes or scrolls as messages stream in */
.wb-inline { border-radius: 20px; background: linear-gradient(180deg, #14141A 0%, #0E0E12 100%); border: 1px solid var(--border-brand);
  box-shadow: var(--ws-glow); padding: 22px; display: flex; flex-direction: column; min-height: 452px; }
.wb-inline-head { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.wb-headline { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg1); }
.wb-inline--open { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px; }
.wb-inline--open .wb-brandmark { margin-bottom: 8px; }
.wb-resume-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--fg1); }
.wb-resume-sub { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; color: var(--fg2); margin-bottom: 14px; }

/* full-screen takeover */
.wb-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; opacity: 0; pointer-events: none;
  transform: scale(.92); transform-origin: 80% 60%;
  transition: opacity .42s var(--ease), transform .46s cubic-bezier(.16,1,.3,1);
  background: radial-gradient(110% 70% at 82% 6%, rgba(242,34,72,0.13), transparent 52%),
              radial-gradient(90% 70% at 8% 96%, rgba(140,107,240,0.12), transparent 55%),
              linear-gradient(168deg, #16161C 0%, #0C0C10 60%, #08080B 100%); }
.wb-overlay.show { opacity: 1; pointer-events: auto; transform: none; }
/* hide site nav while the takeover is open so the chat fully owns the screen */
body.wb-takeover nav { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s ease; }
.wb-overlay-haze { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 0%, rgba(242,34,72,0.10), transparent 70%); }
.wb-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 30px; border-bottom: 1px solid var(--border-subtle); }
.wb-top-actions { display: flex; gap: 10px; }
.wb-icon-btn { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-subtle); color: var(--fg2); font-size: 20px; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s; }
.wb-icon-btn:hover { background: rgba(255,255,255,0.1); color: var(--fg1); border-color: rgba(255,255,255,0.2); }

.wb-stage { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 30px; gap: 40px; animation: wbStageIn .5s cubic-bezier(.16,1,.3,1) both; }

/* progress rail */
.wb-rail { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; position: relative; }
.wb-rail::before { content: ""; position: absolute; left: 18px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(180deg, var(--border-brand), var(--border-subtle)); opacity: .5; }
.wb-step { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 14px; position: relative;
  transition: background .25s, border-color .25s; border: 1px solid transparent; }
.wb-step.active { background: rgba(242,34,72,0.08); border-color: var(--border-brand); box-shadow: 0 0 22px rgba(242,34,72, calc(0.18 * var(--glow-mult))); }
.wb-step-dot { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg3); position: relative; z-index: 1;
  background: #131318; border: 1.5px solid var(--border-subtle); transition: all .25s; }
.wb-step.active .wb-step-dot { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--magenta-400), var(--violet-400, #6A40D9));
  box-shadow: 0 0 18px rgba(242,34,72, calc(0.4 * var(--glow-mult))); }
.wb-step.done .wb-step-dot { color: var(--success); border-color: rgba(47,211,122,0.45); background: rgba(47,211,122,0.10); }
.wb-step-text { display: flex; flex-direction: column; }
.wb-step-label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg2); transition: color .25s; }
.wb-step.active .wb-step-label { color: var(--fg1); }
.wb-step-sub { font-family: var(--font-ui); font-size: 12px; color: var(--fg3); margin-top: 1px; }

/* overlay main */
.wb-main { display: flex; flex-direction: column; min-height: 0; max-width: 720px; width: 100%; }
.wb-main-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }

/* FAB */
.wb-fab-wrap { position: fixed; right: 26px; bottom: 26px; z-index: 8000; display: flex; align-items: center; gap: 10px; }
.wb-fab { position: relative; width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-brand);
  background: radial-gradient(120% 120% at 30% 20%, #1E1E26, #121217);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 26px rgba(242,34,72, calc(0.34 * var(--glow-mult)));
  animation: wbFabIn .4s cubic-bezier(.16,1,.3,1) both; transition: transform .18s; }
.wb-fab:hover { transform: translateY(-2px) scale(1.04); }
.wb-fab-label { order: -1; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--fg1); white-space: nowrap;
  background: linear-gradient(180deg, #1A1A21 0%, #131318 100%); border: 1px solid var(--border-brand);
  border-radius: 14px 14px 4px 14px; padding: 9px 13px; box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 22px rgba(242,34,72, calc(0.22 * var(--glow-mult)));
  animation: wbFabIn .45s .12s cubic-bezier(.16,1,.3,1) both; }
.wb-fab-dot { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #FB3B5E; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; border: 2px solid #0C0C10; box-shadow: 0 2px 8px rgba(251,59,94,0.6); }

@media (prefers-reduced-motion: reduce) {
  .wb-row, .wb-composer, .wb-overlay.show, .wb-stage, .wb-fab { animation: none !important; }
}
@media (max-width: 860px) {
  .wb-stage { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .wb-rail { flex-direction: row; gap: 4px; overflow-x: auto; padding-top: 0; }
  .wb-rail::before { display: none; }
  .wb-step { flex-direction: column; text-align: center; gap: 8px; padding: 10px; min-width: 84px; }
  .wb-step-text { align-items: center; }
  .wb-step-sub { display: none; }
}
@media (max-width: 760px) {
  .wb-inline { display: none !important; }            /* bee lives only as the chat-widget FAB on phones */
  .wb-fab-wrap { right: 16px; bottom: 16px; }
  .wb-fab-label { font-size: 13px; }
}

/* ---------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 1080px) {
  .worker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===============================================================
   MOBILE / RESPONSIVE  (consolidated)
   =============================================================== */

/* --- tablet & below: collapse two-column layouts --- */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .nav-ghost-cta { display: none !important; }      /* keep only the primary CTA on mobile */
  .hero-grid { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
}

/* --- hero visual: scale the fixed 560px panel without forcing page width --- */
@media (max-width: 960px) {
  .hero-media { position: relative; width: 100%; overflow: visible; height: calc(540px * var(--hero-s, 0.82)); }
  .hero-media__inner { position: absolute; top: 0; left: 50%; width: 560px;
    transform: translateX(-50%) scale(var(--hero-s, 0.82)); transform-origin: top center; }
}
@media (max-width: 720px) { :root { --hero-s: 0.7; } }
@media (max-width: 560px) { :root { --hero-s: 0.62; } }
@media (max-width: 440px) { :root { --hero-s: 0.58; } }
@media (max-width: 380px) { :root { --hero-s: 0.52; } }

/* --- general section rhythm + type scale --- */
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .wrap { padding: 0 20px; }
  #top .wrap { padding-top: 28px !important; padding-bottom: 44px !important; }
  .h-section { font-size: 30px; }
  .hero-h1 { font-size: 40px !important; }
  .hero-sub { font-size: 16px !important; }
  .cta-h2 { font-size: 34px !important; }
  .p-lead { font-size: 16px; }

  /* single-column grids */
  .worker-grid { grid-template-columns: 1fr; }
  .cred-layout, .faq-layout, .proc-layout { grid-template-columns: 1fr; }

  /* recurring-workload cards: denser 2-up grid, icon + copy centered */
  .work-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .work-card { align-items: center; text-align: center; padding: 22px 14px; }
  .work-card .wc-label { text-align: center; }

  /* hero light beam: keep only the lower beam so the top one stops clashing with the copy/CTAs */
  .hl-top { display: none !important; }

  /* examples note reads better left-aligned on narrow screens */
  .examples-note { text-align: left; justify-content: flex-start; margin-left: 0; }

  /* stack hero / CTA buttons full-width for easy tapping */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }

  /* "Start with one recurring workflow" sits centered under the CTAs, with extra
     breathing room before the hero animation */
  .hero-note { justify-content: center; text-align: center; }
  .hero-media { margin-top: 16px; }

  /* proof banner: let the 4 metrics wrap to 2×2 on phones */
  .bn-metrics { flex-wrap: wrap; gap: 18px 30px; margin-top: 18px; }
  .bn-metric { flex: 0 0 calc(50% - 16px); }
  .bn-metric__num { font-size: 27px; }
  .bn-metric__suffix { font-size: 16px; }
}

/* --- phones --- */
@media (max-width: 480px) {
  .section { padding: 60px 0; }
  .h-section { font-size: 27px; }
  .hero-h1 { font-size: 34px !important; }
  .cta-h2 { font-size: 29px !important; }

  /* comfortable tap targets */
  .btn.btn-sm { min-height: 44px; }
  .btn { min-height: 46px; }

  /* nav: drop the byline early and trim the CTA so it never clips on phones */
  .nav-byline { display: none; }
  .nav-primary-cta { padding-left: 14px; padding-right: 14px; font-size: 13px; }

  /* proof cards: shrinkable column, metrics that don't force overflow */
  .proof-grid { grid-template-columns: minmax(0,1fr) !important; max-width: 100% !important; }
  .proof-card { min-width: 0; padding: 22px; }
  .proof-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* misc cards padding trim */
  .why-card, .cred-why, .faq-cta, .wb-inline { padding: 20px; }
  .why-card { padding-bottom: 6px; }
}

/* --- very small (360 and under) --- */
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  .h-section { font-size: 25px; }
  .hero-h1 { font-size: 31px !important; }
}

/* ============================================================
   HERO CONCEPT VISUAL — outdated site → premium homepage concept
   Looping, phase-driven (.hc-p0 … .hc-p5 on .hc-stage).
   ============================================================ */
.hc-stage { position: relative; width: 560px; height: 540px; }
.hc-stage img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }

/* current / outdated website */
.hc-old { width: 330px; left: 115px; top: 160px; z-index: 1;
  opacity: 0; transform: scale(0.9); transform-origin: 42% 46%; filter: none;
  border-radius: 18px;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease);
}
.hc-p1 .hc-old, .hc-p2 .hc-old, .hc-p3 .hc-old { opacity: 1; transform: scale(1); }
/* recede up + back so a dim sliver peeks above the new concept (the "before") */
.hc-p4 .hc-old, .hc-p5 .hc-old {
  opacity: 0.3; transform: translate(-90px, -184px) scale(0.6);
  filter: blur(1.5px) saturate(0.7);
}

/* connectors */
.hc-conn { inset: 0; width: 100%; height: 100%; position: absolute; z-index: 2;
  pointer-events: none; opacity: 1; }
.hc-lines path {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 5 8; stroke-dashoffset: 0;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.hc-p3 .hc-lines path { opacity: 1; animation: hcFlow 1.05s linear infinite; }
.hc-lines path:nth-child(1) { transition-delay: 0s; }
.hc-lines path:nth-child(2) { transition-delay: 0.07s; }
.hc-lines path:nth-child(3) { transition-delay: 0.14s; }
.hc-lines path:nth-child(4) { transition-delay: 0.05s; }
.hc-lines path:nth-child(5) { transition-delay: 0.12s; }
.hc-lines path:nth-child(6) { transition-delay: 0.19s; }
.hc-lines path:nth-child(7) { transition-delay: 0.24s; }
@keyframes hcFlow { to { stroke-dashoffset: -52; } }

/* strategy / input modules — transient */
.hc-mod { width: 142px; z-index: 3;
  opacity: 0; transform: translateY(10px) scale(0.86);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.38));
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}
.hc-p2 .hc-mod, .hc-p3 .hc-mod { opacity: 1; transform: none; }
.m-proof    { left: -20px; top: 90px; }
.m-reviews  { left: -24px; top: 248px; }
.m-services { left: -12px; top: 392px; }
.m-media    { left: 432px; top: 70px; }
.m-seo      { left: 438px; top: 214px; }
.m-mobready { left: 430px; top: 356px; }
.m-cta      { left: 196px; top: 450px; }

/* polished desktop homepage concept — the focus */
.hc-desk { width: 470px; left: 46px; top: 58px; z-index: 4; transform-origin: center;
  opacity: 0; transform: translateY(18px) scale(0.93);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.hc-p4 .hc-desk, .hc-p5 .hc-desk { opacity: 1; transform: none; }

/* mobile homepage concept — lands last, holds bottom-right */
.hc-mob { width: 122px; left: 392px; top: 300px; z-index: 5;
  opacity: 0; transform: translate(34px, 28px) scale(0.95);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.hc-p5 .hc-mob { opacity: 1; transform: none; animation: hcFloat 5.5s ease-in-out 0.8s infinite; }

@keyframes hcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (prefers-reduced-motion: reduce) {
  .hc-p3 .hc-lines path { animation: none; }
  .hc-p5 .hc-mob { animation: none; }
}

/* ============================================================
   HERO SCENE — "YOUR WEBSITE" store surrounded by CRO surfaces,
   connected by red + purple light streaks. Phase-driven loop
   (.hs-p0 … .hs-p4 on .hs-scene). Art is rendered on black and
   composited with `screen` blend over a black box so overlapping
   black areas drop out and only the glow/UI adds up.
   ============================================================ */
/* The device + cards only read correctly over black (their own UI is black, so a
   blend over black keeps it faithful). To kill the hard "box" rectangle we keep a
   black backing but FEATHER its edges into the page: a radial-fade ::before sits
   behind the scene, solid black across the card cluster and dissolving to nothing
   at the perimeter — so there's no visible container edge. */
.hs-box {
  position: relative; width: 100%; max-width: 740px; margin-left: auto;
  aspect-ratio: 1.43; background: transparent; isolation: isolate;
}
/* ---- Glass slab + purple light beams (premium frame) ---------------------
   Layered by DOM order inside the isolated .hs-box: haze → slab → beams → scene.
   No z-index on these so the art-on-black cards still composite (screen) against
   the slab. The wrapper does NOT clip, so beams spill past the panel edges and
   any card that overhangs the frame falls outside it (intended). */
.hs-haze {
  position: absolute; inset: -12%; pointer-events: none;
  background: radial-gradient(60% 80% at 70% 30%, rgba(140,107,240,0.30) 0%, rgba(106,64,217,0.16) 45%, rgba(14,14,16,0) 75%);
  opacity: 0; animation: hsHaze 0.6s cubic-bezier(.16,1,.3,1) 0.5s both;
}
.hs-slab {
  position: absolute; inset: -8% 0; border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 14%, rgba(140,107,240,0.12), transparent 52%),
    radial-gradient(90% 70% at 12% 96%, rgba(106,64,217,0.10), transparent 55%),
    linear-gradient(165deg, #17171D 0%, #0E0E12 58%, #0A0A0D 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 36px 90px rgba(0,0,0,0.6),
    0 0 60px rgba(140,107,240, calc(0.10 * var(--glow-mult, 1)));
  opacity: 0; animation: hsMaterialize 0.45s cubic-bezier(.16,1,.3,1) 0.6s both;
}
.hs-slab::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 22%); }

.hs-beam {
  position: absolute; left: 50%; width: 138%; height: auto;
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
  will-change: opacity, clip-path, filter;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 17%, #000 90%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 17%, #000 90%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.hs-beam-top    { top: -8%;  transform: translate(-50%, -89.1%);
  animation: hsBeamStrike 0.55s cubic-bezier(.16,1,.3,1) 0.45s both, hsBeamPulse 6.5s ease-in-out 1.9s infinite; }
.hs-beam-bottom { top: 108%; transform: translate(-50%, -10.9%) scaleY(-1);
  animation: hsBeamStrike 0.55s cubic-bezier(.16,1,.3,1) 0.9s both, hsBeamPulse 6.5s ease-in-out 1.45s infinite; }

@keyframes hsMaterialize { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
@keyframes hsHaze { from { opacity: 0; } to { opacity: calc(0.38 * var(--glow-mult, 1)); } }
@keyframes hsBeamStrike {
  0%   { opacity: .15; clip-path: inset(0 0 100% 0); filter: brightness(1.3); }
  58%  { opacity: 1;   clip-path: inset(0 0 7% 0);   filter: brightness(1.4); }
  70%  {               clip-path: inset(0 0 0 0);    filter: brightness(2.7); }
  100% { opacity: 1;   clip-path: inset(0 0 0 0);    filter: brightness(1); }
}
@keyframes hsBeamPulse {
  0%, 100% { opacity: calc(0.8 * var(--glow-mult, 1)); }
  50%      { opacity: calc(1   * var(--glow-mult, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slab { opacity: 1; animation: none; }
  .hs-haze { opacity: calc(0.38 * var(--glow-mult, 1)); animation: none; }
  .hs-beam { animation: none; opacity: calc(0.95 * var(--glow-mult, 1)); clip-path: inset(0 0 0 0); }
}

.hs-scene { position: absolute; inset: 0; }
/* every layer is now a transparent cutout with a solid black card body, so they
   composite normally (no blend) — the black background reads as black and clean
   overlaps cover instead of ghosting */
.hs-scene img {
  position: absolute; display: block; user-select: none; -webkit-user-drag: none;
  mix-blend-mode: normal; will-change: opacity, transform;
}

/* central store device — now a transparent cutout, so it composites normally
   (no blend needed; its red glow + alpha edges render directly) */
.hs-scene img.hs-tablet { mix-blend-mode: normal; }
.hs-tablet { left: 19.9%; top: 23.4%; width: 55.5%; z-index: 5;
  opacity: 0; transform: scale(0.95);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  filter: drop-shadow(0 0 30px rgba(242,34,72,0.28));
}
.hs-tablet.is-shown { opacity: 1; transform: none; }

/* surrounding surface cards — no black drop-shadow (it fights the screen blend);
   each card already carries its own red/purple glow baked into the art */
.hs-card { opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}
.hs-card.is-shown { opacity: 1; transform: none; }

/* positions derived from the reference: each value places the VISIBLE card
   (its art content, not the black padding in the PNG) onto the target layout. */
.hs-pdp       { left: 8%;     top: 0.5%;  width: 24%; }
.hs-cart      { left: 67.38%; top: -1%;    width: 31.46%; }
.hs-heatmap   { left: 2.24%;  top: 34.91%; width: 28.41%; z-index: 6; }
.hs-checkout  { left: 75.14%; top: 30.88%; width: 20.09%; z-index: 7; }
.hs-reviews   { left: 1.34%;  top: 69.5%;  width: 25.62%; }
.hs-tracking  { left: 34%;    top: 76.71%; width: 27%; }
.hs-analytics { left: 69%;    top: 69.92%; width: 27.12%; }

/* connector light streaks — appear last, then breathe. They bridge each card to
   the store; flips orient the baked-in arrowheads toward the device. */
.hs-scene img.hs-streak {
  mix-blend-mode: screen; /* glow-on-black art → screen drops the black, only the light adds */
}
.hs-streak {
  opacity: 0; transition: opacity 0.4s var(--ease);
  animation: hsBreath 2.8s ease-in-out infinite; animation-play-state: paused;
}
.hs-streak.is-shown { opacity: 0.95; animation-play-state: running; }
@keyframes hsBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* arrow positions — each connector bridges its card's device-facing edge to the
   central device. left/top/width are % of the panel; height follows the art aspect.
   (First-pass placement — nudge per-arrow to taste.) */
.hs-ar-pdp       { left: 22%;  top: 16%;  width: 23%; }
.hs-ar-cart      { left: 52%;  top: 2%;   width: 20%; }
.hs-ar-heatmap   { left: 27%;  top: 44%;  width: 16%; }
.hs-ar-checkout  { left: 59%;  top: 43%;  width: 17%; }
.hs-ar-reviews   { left: 21%;  top: 58%;  width: 21%; }
.hs-ar-tracking  { left: 34%;  top: 57%;  width: 18%; }
.hs-ar-analytics { left: 56%;  top: 52%;  width: 20%; }

/* frame removed — the scene floats on the page with no container outline */
.hs-frame { display: none; }
.hs-frame::before { content: none; }
@keyframes hsSweep {
  0% { left: -32%; opacity: 0; } 9% { opacity: 1; } 86% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-streak.is-shown { animation: none; }
  .hs-frame::before { animation: none; opacity: 0; }
}

/* hero grid: stack the scene below the copy before the columns get cramped */
@media (max-width: 960px) {
  #top.hh-hero .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hs-box { margin: 0 auto; }
}
@media (max-width: 760px) {
  #top.hh-hero .wrap { padding-bottom: 56px !important; }
  .hs-box { max-width: 460px; margin: 4px auto 0; }
}