/* ============================================================
   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,100,34, calc(0.30 * var(--glow-mult))),
             0 14px 60px rgba(242,100,34, 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,100,34,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 — Huly-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,100,34,0.28); --glow-c: rgba(242,100,34,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 */
.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.png") 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.png") 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,100,34,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,214,176,0.58), rgba(242,100,34,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, #B8480C 0%, #F26422 50%, #B8480C 100%);
  color: #fff; box-shadow: 0 8px 30px rgba(242,100,34, calc(0.36 * var(--glow-mult)));
}
.btn-primary::before {
  background: radial-gradient(150px circle at var(--mx) var(--my), rgba(255,244,237,0.95) 0%, rgba(255,150,90,0.55) 26%, rgba(242,100,34,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,140,70,0.55) 0%, rgba(242,100,34,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,100,34, 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,100,34,0.4); box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 36px rgba(242,100,34, 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%, #FFB78C 0%, #F26422 48%, #8F3700 100%); }
.orb-magenta::before { background: #F26422; }
.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%, #FFC49E 0%, #F26422 40%, #7B3BD6 100%); }
.orb-halo::before { background: #EB6D20; }

/* 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.webp") 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: 3 vertical logo columns — middle column is full-colour (dark-mode tuned) */
.proof-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-width: 0; height: 176px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.proof-col { position: relative; overflow: hidden; }
.proof-col-track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.ttv-up { animation: marquee-up linear infinite; }
.ttv-down { animation: marquee-down linear infinite; }
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.proof-cols:hover .proof-col-track { animation-play-state: paused; }
.proof-tile {
  flex-shrink: 0; height: 76px; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; 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: 26px; width: auto; height: auto; object-fit: contain; display: block; opacity: 0.5; }
.proof-tile--color img { opacity: 0.95; max-height: 28px; }
.proof-tile:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .proof-col-track { animation: none; } }
/* tablet: stack copy/metrics above the logo columns */
@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; }
  .proof-cols { height: 150px; }
}

/* ---------------------------------------------------------------
   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,100,34,0.14); border-color: var(--border-brand); }
.pill-active    .pdot { background: var(--magenta-400); box-shadow: 0 0 9px rgba(242,100,34, 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.png);
  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,126,61,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,100,34,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,100,34,0.30), rgba(106,64,217,0.16) 55%, rgba(14,14,16,0.0) 78%);
  border: 1px solid var(--border-brand);
  box-shadow: var(--ws-glow), inset 0 0 40px rgba(242,100,34,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%, #FF9A63 0%, #F26422 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,100,34,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,100,34,0) 0%, rgba(242,100,34,0.5) 50%, rgba(242,100,34,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,100,34,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,100,34,0.4); box-shadow: 0 10px 36px rgba(0,0,0,0.5), 0 0 36px rgba(242,100,34, 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; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border-subtle); }
.worker-meta-row i { color: var(--violet-400); font-size: 16px; margin-top: 1px; }
.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); width: 88px; flex-shrink: 0; }
.worker-meta-row .val { 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,100,34,0.10); border-color: var(--border-brand); color: #fff;
  box-shadow: 0 0 16px rgba(242,100,34, 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,100,34,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,100,34, 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,100,34,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,100,34, 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,100,34,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,100,34,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.png") 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,100,34, 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,100,34,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,100,34,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-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,100,34, 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,100,34,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,100,34, 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,100,34,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.png) 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,100,34, calc(0.30 * var(--glow-mult))); }
  50%      { box-shadow: inset 0 0 50px rgba(0,0,0,0.55), 0 0 92px rgba(242,100,34, 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.png) 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,100,34,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,100,34, 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, #F26422), var(--ic-b, #8C6BF0));
  box-shadow: 0 0 14px rgba(242,100,34,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, #F26422); box-shadow: 0 0 8px var(--ic-a, #F26422); 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,100,34,0.10); border-color: var(--border-brand); box-shadow: 0 0 18px rgba(242,100,34, 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,100,34, 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,100,34,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,100,34,0.12); border-color: var(--border-brand); color: #fff; box-shadow: 0 0 16px rgba(242,100,34, 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,100,34,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,100,34,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,100,34,0.08); border-color: var(--border-brand); box-shadow: 0 0 22px rgba(242,100,34, 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,100,34, 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,100,34, 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,100,34, 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; }
}