/* =========================================================================
   Leal Systems — "The system, live" bento + sitewide depth layer
   Grain, cursor spotlight, marquee, phone SMS demo, event log, count-ups.
   ========================================================================= */

/* ------------------------------------------------------------- film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 250; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}

/* ------------------------------------------------- hero ambient color depth
   + n8n-style dot-grid canvas on the graph side */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px),
    radial-gradient(52% 46% at 74% 36%, rgba(207,232,90,0.075) 0%, transparent 70%),
    radial-gradient(40% 42% at 88% 78%, rgba(111,224,208,0.055) 0%, transparent 70%);
  background-size: 24px 24px, auto, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 26%, #000 55%);
}

/* ------------------------------------------------------- cursor spotlight */
.step { position: relative; overflow: hidden; }
.step::before, .contrast__col::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), var(--acc-soft), transparent 70%);
  pointer-events: none;
}
.step:hover::before, .contrast__col:hover::before { opacity: 1; }
.contrast__col { overflow: hidden; }
.scard::before {
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), var(--acc-soft), transparent 70%);
}
.pcard::before {
  background: radial-gradient(460px 240px at var(--mx, 50%) var(--my, -10%), var(--acc-soft), transparent 72%);
}

/* ===================================================== THE SYSTEM, LIVE */
.live { position: relative; }
.live::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 40% at 12% 18%, rgba(207,232,90,0.05) 0%, transparent 70%),
    radial-gradient(44% 48% at 92% 82%, rgba(111,224,208,0.05) 0%, transparent 70%);
}
.live .wrap { position: relative; z-index: 1; }

.live__grid {
  display: grid; grid-template-columns: minmax(320px, 0.95fr) 1.05fr;
  gap: 18px; align-items: stretch;
}
.live__right { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .live__grid { grid-template-columns: 1fr; } }

.ltile {
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
  transition: border-color .4s, transform .4s var(--ease);
}
.ltile:hover { border-color: var(--line-strong); }
.ltile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.ltile__head h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.ltile__head .sub { font-family: var(--f-mono); font-size: 0.68rem; color: var(--fg-faint); letter-spacing: 0.06em; }

/* ------------------------------------------------------------ phone tile */
.ltile--phone {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(22px, 3.4vw, 40px);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(207,232,90,0.06), transparent 70%),
    var(--panel);
}
.phone {
  width: min(330px, 100%); border: 1px solid var(--line-strong); border-radius: 34px;
  background: #0a0b0d; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden; display: flex; flex-direction: column;
}
.phone__bar { display: flex; justify-content: center; padding: 10px 0 6px; }
.phone__notch { width: 86px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); }
.phone__head { display: flex; align-items: center; gap: 11px; padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.phone__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--acc-ink); font-weight: 700; font-size: 0.85rem; font-family: var(--f-display);
}
.phone__who { line-height: 1.2; }
.phone__who .nm { font-weight: 600; font-size: 0.92rem; }
.phone__who .st { font-family: var(--f-mono); font-size: 0.62rem; color: var(--acc); display: flex; align-items: center; gap: 5px; }
.phone__who .st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc-glow); }
.phone__msgs {
  padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 9px;
  min-height: 380px; justify-content: flex-end;
}
.msg {
  max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 0.85rem; line-height: 1.4;
  opacity: 0; transform: translateY(10px) scale(0.97);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.msg.show { opacity: 1; transform: none; }
.msg--out { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); border-bottom-left-radius: 5px; }
.msg--in  { align-self: flex-end; background: rgba(111,224,208,0.13); border: 1px solid var(--acc2-line); color: #DFF6F2; border-bottom-right-radius: 5px; }
.msg--chip {
  align-self: center; max-width: 100%; font-family: var(--f-mono); font-size: 0.64rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.msg--chip.ok { color: var(--acc); border-color: var(--acc-line); background: var(--acc-soft); }
.msg--typing { padding: 11px 14px; }
.msg--typing .d { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-faint); margin-right: 3px; animation: typeDot 1s infinite; }
.msg--typing .d:nth-child(2) { animation-delay: .15s; }
.msg--typing .d:nth-child(3) { animation-delay: .3s; margin-right: 0; }
@keyframes typeDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ------------------------------------------------------------- log tile */
.ltile--log { flex: 1; display: flex; flex-direction: column; }
.log {
  font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.5;
  padding: 16px 24px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; justify-content: flex-end;
}
.log__line { display: flex; gap: 12px; opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); white-space: nowrap; overflow: hidden; }
.log__line.show { opacity: 1; transform: none; }
.log__t { color: var(--fg-faint); flex: none; }
.log__e { color: var(--acc2); flex: none; }
.log__d { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; }
.log__line.money .log__e { color: var(--acc); }

/* ------------------------------------------------------------ stat tile */
.ltile--stat { padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.ltile--stat .big {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.04em;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem); color: var(--acc); line-height: 1;
  text-shadow: 0 0 42px var(--acc-glow);
}
.ltile--stat .lbl { font-size: 0.98rem; font-weight: 600; margin-top: 8px; }
.ltile--stat .sub { font-size: 0.85rem; color: var(--fg-faint); }

/* -------------------------------------------------------------- marquee */
.marquee { margin-top: 34px; }
.marquee__label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); text-align: center; margin-bottom: 18px; }
.marquee__mask {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 36s linear infinite; }
.marquee__mask:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.mchip {
  flex: none; font-family: var(--f-mono); font-size: 0.78rem; color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  background: rgba(255,255,255,0.015); display: flex; align-items: center; gap: 8px;
}
.mchip::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--acc); opacity: 0.7; flex: none; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.reduce-motion .marquee__track { animation: none; }

/* -------------------------------------------------- magnetic CTA support */
.btn--primary { transition: transform .18s ease-out, background .25s, box-shadow .35s, border-color .25s; }

/* -------------------------------------------------- reduced-motion final states */
.reduce-motion .msg, .reduce-motion .log__line { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .msg, .log__line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   Richness pass — gradient ink, auroras, glow hovers, about/FAQ
   ========================================================================= */

/* gradient accent ink on display headings */
.hero h1 .accent, .founder__quote .accent, .cta-band h2 .accent {
  background: linear-gradient(98deg, var(--acc) 10%, #A8E96A 45%, var(--acc2) 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 180% 100%;
  animation: inkShift 9s ease-in-out infinite alternate;
}
@keyframes inkShift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.reduce-motion .hero h1 .accent { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero h1 .accent, .founder__quote .accent, .cta-band h2 .accent { animation: none; } }

/* primary button: gradient + glow, still readable */
.btn--primary {
  background: linear-gradient(120deg, var(--acc) 0%, #BEE24E 55%, #96D94B 100%);
  box-shadow: 0 4px 24px -8px var(--acc-glow);
}
.btn--primary:hover {
  box-shadow: 0 12px 42px -10px rgba(207,232,90,0.45), 0 0 0 1px var(--acc-deep);
}

/* glow hovers on tiles */
.scard:hover, .pcard:hover, .step:hover, .ltile:hover {
  box-shadow: 0 18px 60px -24px rgba(0,0,0,0.9), 0 0 34px -14px var(--acc-glow);
}

/* aurora washes */
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 65% at 30% 100%, rgba(207,232,90,0.07), transparent 70%),
    radial-gradient(46% 60% at 78% 0%, rgba(111,224,208,0.06), transparent 70%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 70% at 82% 20%, rgba(207,232,90,0.05), transparent 70%);
}
#wwd .gridlines { opacity: 0.35; }

/* section divider shimmer above cta-band */
.cta-band { border-top: none; }
.cta-band::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-line) 30%, var(--acc2-line) 70%, transparent);
}

/* ------------------------------------------------------------- ABOUT */
.about-cols { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .about-cols { grid-template-columns: 1fr; } }
.about-story p { font-size: 1.08rem; line-height: 1.7; color: #cfd2d6; }
.about-story p + p { margin-top: 1.3em; }
.about-risk {
  border: 1px solid var(--acc-line); border-radius: var(--r); padding: 30px;
  background: linear-gradient(180deg, var(--acc-soft), transparent 55%), var(--panel);
  position: sticky; top: 92px;
}
.about-risk h3 { font-size: 1.3rem; letter-spacing: -0.02em; }

/* founder portrait + story intro grid */
.about-intro { display: grid; grid-template-columns: minmax(0, 0.72fr) 1.28fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(32px, 5vw, 56px); }
@media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; } .about-intro .about-photo { max-width: 420px; } }
.about-photo { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.about-photo img { width: 100%; height: auto; display: block; }
.about-photo figcaption { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-1); }
.about-photo .nm { font-weight: 600; }
.about-photo .rl { font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-faint); }
.about-ig svg { width: 18px; height: 18px; color: var(--acc); flex: none; }
/* pay-after-it-works band, full width under the intro (overrides the sticky
   sidebar variant above) */
.about-risk--band { position: static; display: grid; grid-template-columns: 1.5fr auto; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 40px); }
.about-risk--band .about-risk__cta { justify-self: end; }
@media (max-width: 760px) { .about-risk--band { grid-template-columns: 1fr; } .about-risk--band .about-risk__cta { justify-self: start; } }

/* ---------------------------------------------------------------- FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 4px; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; }
.faq__mark { font-family: var(--f-mono); color: var(--acc); font-size: 1.1rem; transition: transform .3s var(--ease); flex: none; }
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__item > p { padding: 0 4px 24px; color: var(--fg-dim); max-width: 64ch; line-height: 1.6; }
.faq__item summary:hover h3 { color: var(--acc); }

/* =========================================================================
   Merydian-inspired pass — bloom CTAs, section shells, ambient field,
   floating nav pill, live-call UI, step medallions
   ========================================================================= */

/* ------------------------------------------------ ambient gradient field */
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 42% at 82% -6%, rgba(207,232,90,0.055) 0%, transparent 70%),
    radial-gradient(50% 40% at -8% 30%, rgba(111,224,208,0.045) 0%, transparent 70%),
    radial-gradient(70% 55% at 50% 112%, rgba(207,232,90,0.04) 0%, transparent 70%),
    linear-gradient(180deg, #0a0c0d 0%, #08090a 30%);
}

/* ------------------------------------------------------- bloom CTA pills */
.btn { border-radius: 999px; }
.btn--primary {
  box-shadow:
    0 0 18px -4px rgba(207,232,90,0.55),
    0 0 56px -8px rgba(207,232,90,0.40),
    0 0 120px -16px rgba(207,232,90,0.30),
    0 6px 22px -8px rgba(0,0,0,0.6);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 24px -4px rgba(207,232,90,0.7),
    0 0 80px -8px rgba(207,232,90,0.5),
    0 0 160px -16px rgba(207,232,90,0.35),
    0 10px 30px -10px rgba(0,0,0,0.65);
}
.btn--ghost { backdrop-filter: blur(8px); background: rgba(255,255,255,0.03); }

/* --------------------------------------------------- floating nav pill */
.nav { padding: 10px clamp(10px, 2vw, 22px) 0; border-bottom: none !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav .wrap {
  border-radius: 999px; padding-inline: clamp(16px, 2.4vw, 26px);
  border: 1px solid transparent; transition: background .4s, border-color .4s, box-shadow .4s;
  max-width: 1180px;
}
.nav.scrolled .wrap {
  background: rgba(12,13,15,0.72);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,0.8), 0 0 40px -22px var(--acc-glow);
}

/* --------------------------------------------------- section shell cards */
.section--shell .wrap {
  position: relative; background:
    radial-gradient(90% 70% at 85% 0%, rgba(207,232,90,0.05), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(111,224,208,0.04), transparent 60%),
    linear-gradient(180deg, #0d0e11 0%, #0a0b0d 100%);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 30px;
  padding: clamp(30px, 5vw, 64px);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
  overflow: hidden;
}
.section--shell .gridlines { display: none; }
.section--shell { padding-block: clamp(28px, 4vw, 48px); }

/* the live bento + cta band get the ambient treatment too */
.live .wrap > .sec-head { position: relative; z-index: 1; }
.ltile {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.02), transparent 60%),
    linear-gradient(180deg, #0d0e11, #0a0b0d);
  border-color: rgba(255,255,255,0.08); border-radius: 22px;
}
.scard, .pcard, .step {
  background: linear-gradient(180deg, #0d0e11, #0a0b0d);
  border-color: rgba(255,255,255,0.08); border-radius: 20px;
}

/* ------------------------------------------------------- step number tags */
.step__n {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--acc);
  letter-spacing: 0.1em; margin-bottom: 22px;
}
.step__n::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--acc);
  box-shadow: 0 0 10px var(--acc-glow);
}

/* ============================================================ LIVE CALL UI
   The demo is a phone CALL handled by the AI dispatcher — call screen with
   timer + waveform + speaker-tagged transcript, not a texting thread. */
.phone { border-radius: 30px; background: linear-gradient(180deg, #0c0d10, #090a0c); }
.phone__head { padding: 14px 18px 14px; gap: 13px; }
.phone__avatar {
  width: 42px; height: 42px; font-size: 0.95rem; position: relative;
  box-shadow: 0 0 18px -2px rgba(207,232,90,0.45);
}
.phone__avatar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(207,232,90,0.35);
  animation: callRing 2.2s var(--ease) infinite;
}
@keyframes callRing { 0% { transform: scale(0.9); opacity: 0.9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.phone__who .st::before { background: #7ce38b; box-shadow: 0 0 8px rgba(124,227,139,0.8); }
.phone__timer { margin-left: auto; font-family: var(--f-mono); font-size: 0.78rem; color: var(--acc); letter-spacing: 0.06em; }

/* waveform strip under the header */
.phone__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; border-bottom: 1px solid var(--line); }
.phone__wave i {
  width: 3px; border-radius: 2px; background: var(--acc); opacity: 0.75; height: 6px;
  animation: wave 1.15s ease-in-out infinite;
}
.phone__wave i:nth-child(2n) { animation-delay: .12s; background: #A8E96A; }
.phone__wave i:nth-child(3n) { animation-delay: .24s; height: 10px; }
.phone__wave i:nth-child(4n) { animation-delay: .36s; background: var(--acc2); }
.phone__wave i:nth-child(5n) { animation-delay: .48s; height: 14px; }
@keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(2.1); } }
.reduce-motion .phone__wave i { animation: none; }
@media (prefers-reduced-motion: reduce) { .phone__wave i, .phone__avatar::after { animation: none; } }

/* transcript rows */
.phone__msgs { min-height: 350px; padding: 14px 16px 16px; gap: 11px; }
.msg--ai, .msg--caller {
  max-width: 100%; align-self: stretch; background: none; border: none; padding: 0;
  border-radius: 0; display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.85rem; line-height: 1.45; color: #d6d9dc;
}
.msg__tag {
  flex: none; font-family: var(--f-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.1em; padding: 3px 8px; border-radius: 6px; margin-top: 1px;
}
.msg--ai .msg__tag { color: var(--acc-ink); background: var(--acc); box-shadow: 0 0 12px -2px rgba(207,232,90,0.5); }
.msg--caller .msg__tag { color: #0b2724; background: var(--acc2); }
.msg--caller { color: #c9e9e4; }

/* status chips */
.msg--chip.warn { color: #f0a8a0; border-color: rgba(240,140,130,0.35); background: rgba(240,120,110,0.07); }

/* speaking indicator */
.msg--speaking { display: flex; gap: 10px; align-items: center; padding: 0; background: none; border: none; }
.msg--speaking .bars { display: inline-flex; gap: 2.5px; align-items: center; height: 14px; }
.msg--speaking .bars i { width: 2.5px; height: 6px; border-radius: 2px; background: var(--acc); animation: wave 0.9s ease-in-out infinite; }
.msg--speaking .bars i:nth-child(2) { animation-delay: .1s; }
.msg--speaking .bars i:nth-child(3) { animation-delay: .2s; height: 10px; }
.msg--speaking .bars i:nth-child(4) { animation-delay: .3s; }

/* call footer controls (decorative) */
.phone__foot { display: flex; justify-content: center; gap: 18px; padding: 12px 0 18px; border-top: 1px solid var(--line); }
.phone__foot span {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--fg-dim); font-size: 0.85rem; background: rgba(255,255,255,0.02);
}
.phone__foot .end { background: #e5484d; border-color: #e5484d; color: #fff; box-shadow: 0 0 22px -4px rgba(229,72,77,0.6); }

/* =========================================================================
   Hero v3 — the workflow gets a real stage: an n8n-style editor window
   beside the headline instead of wallpaper behind it.
   ========================================================================= */
.hero { min-height: 100svh; display: flex; align-items: center; }

/* the editor window */
.hero__panel {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  background: linear-gradient(180deg, #0d0f12, #0a0b0d);
  box-shadow:
    0 40px 110px -40px rgba(0,0,0,0.9),
    0 0 90px -40px rgba(207,232,90,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden; position: relative;
}
.hero__panel-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.hero__panel-bar .tl { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.hero__panel-bar .tl:nth-child(1) { background: #e5484d99; }
.hero__panel-bar .tl:nth-child(2) { background: #f5c45199; }
.hero__panel-bar .tl:nth-child(3) { background: #46a75899; }
.hero__panel-bar .ttl {
  margin-left: 8px; font-family: var(--f-mono); font-size: 0.68rem;
  color: var(--fg-faint); letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero__panel-bar .run {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--acc); flex: none;
}
.hero__panel-bar .run i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 8px var(--acc-glow); animation: liveDot 2.4s infinite;
}
.hero__panel-canvas {
  position: relative; height: clamp(420px, 56vh, 560px);
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.hero__panel-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* full-bleed workflow behind the hero text: soften the scrim so the
   canvas reads, keep the dot grid on the graph side */
.hero__scrim {
  background:
    radial-gradient(100% 70% at 20% 58%, rgba(8,9,10,0.88) 0%, rgba(8,9,10,0.4) 40%, rgba(8,9,10,0) 64%),
    linear-gradient(0deg, rgba(8,9,10,0.82) 0%, rgba(8,9,10,0) 26%),
    linear-gradient(180deg, rgba(8,9,10,0.75) 0%, rgba(8,9,10,0) 18%);
}

/* =========================================================================
   Hero v4 — centered gradient headline over a full-width live workflow
   ========================================================================= */
.hero__inner { max-width: 940px; margin-inline: auto; text-align: center; }
.hero__sub { margin-inline: auto; }
.hero__cta { justify-content: center; }
.hero__stats { justify-content: center; gap: clamp(30px, 5vw, 70px); }
.hero .wrap { padding-top: 120px; }

/* silver→steel gradient on the base headline; lime→teal on the accent */
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.1rem);
  background: linear-gradient(180deg, #F7F9FA 20%, #B9C0C7 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero h1 .accent {
  background: linear-gradient(98deg, var(--acc) 10%, #A8E96A 45%, var(--acc2) 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 180% 100%;
  animation: inkShift 9s ease-in-out infinite alternate;
}

/* center-focused scrim: canvas visible on the flanks, text zone protected */
.hero__scrim {
  background:
    radial-gradient(56% 60% at 50% 50%, rgba(8,9,10,0.87) 0%, rgba(8,9,10,0.55) 52%, rgba(8,9,10,0) 78%),
    linear-gradient(0deg, rgba(8,9,10,0.85) 0%, rgba(8,9,10,0) 22%),
    linear-gradient(180deg, rgba(8,9,10,0.7) 0%, rgba(8,9,10,0) 16%);
}

/* full-width dot-grid canvas + ambient color, no mask */
.hero::before {
  display: block;
  background:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px),
    radial-gradient(50% 40% at 12% 20%, rgba(207,232,90,0.05) 0%, transparent 70%),
    radial-gradient(46% 42% at 88% 80%, rgba(111,224,208,0.05) 0%, transparent 70%);
  background-size: 24px 24px, auto, auto;
  -webkit-mask-image: none; mask-image: none;
}

/* ----------------------------------------- nodes echo through the site */
.page-hero__graph {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 58%);
  opacity: 0.55; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
          mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.page-hero { position: relative; }
.page-hero .wrap { position: relative; z-index: 1; }

/* =========================================================================
   Blog cards — grid with generated workflow previews
   ========================================================================= */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}
.bcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
  background: linear-gradient(180deg, #0d0e11, #0a0b0d);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.bcard:hover {
  transform: translateY(-4px); border-color: var(--acc-line);
  box-shadow: 0 18px 60px -24px rgba(0,0,0,0.9), 0 0 34px -14px var(--acc-glow);
}
.bcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; z-index: 1;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), var(--acc-soft), transparent 70%);
  pointer-events: none;
}
.bcard:hover::before { opacity: 1; }
.bcard__media {
  height: 168px; border-bottom: 1px solid rgba(255,255,255,0.07);
  background: #0b0c0e; overflow: hidden; flex: none;
}
.bcard__viz { width: 100%; height: 100%; display: block; transition: transform .6s var(--ease); }
.bcard:hover .bcard__viz { transform: scale(1.04); }
.bcard__body { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.bcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bcard__date { font-family: var(--f-mono); font-size: 0.72rem; color: var(--fg-faint); }
.bcard h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 8px; }
.bcard p { font-size: 0.92rem; color: var(--fg-dim); line-height: 1.5; }
.bcard__foot {
  margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--fg-faint); transition: color .3s;
}
.bcard:hover .bcard__foot { color: var(--acc); }
.bcard__foot .arr { transition: transform .3s var(--ease); }
.bcard:hover .bcard__foot .arr { transform: translateX(4px); }

/* =========================================================================
   Scroll choreography — richer section transitions, no more dead space
   ========================================================================= */

/* reveals: blur-to-sharp + slight scale on cards */
.reveal { filter: blur(7px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.reveal.in { filter: blur(0); }
.scard.reveal, .pcard.reveal, .step.reveal, .ltile.reveal, .bcard.reveal, .contrast__col.reveal {
  transform: translateY(26px) scale(0.965);
}
.reveal.in { transform: none; }
.reduce-motion .reveal, .reduce-motion .reveal.in { filter: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { filter: none !important; } }

/* grid children cascade */
.cards .reveal:nth-child(2), .pillar-cards .reveal:nth-child(2), .blog-grid .reveal:nth-child(2) { transition-delay: .08s; }
.cards .reveal:nth-child(3), .pillar-cards .reveal:nth-child(3), .blog-grid .reveal:nth-child(3) { transition-delay: .16s; }
.cards .reveal:nth-child(4), .pillar-cards .reveal:nth-child(4), .blog-grid .reveal:nth-child(4) { transition-delay: .24s; }
.cards .reveal:nth-child(5), .pillar-cards .reveal:nth-child(5), .blog-grid .reveal:nth-child(5) { transition-delay: .32s; }
.cards .reveal:nth-child(6), .blog-grid .reveal:nth-child(6) { transition-delay: .40s; }

/* word-by-word heading rise (spans injected by LiveFX.enhanceHeadings) */
.sec-head h2 .w, .sec-head h1 .w, .cta-band h2 .w {
  display: inline-block; opacity: 0; transform: translateY(0.55em);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--wd, 0ms);
}
.reveal.in .w { opacity: 1; transform: none; }
.reduce-motion .w { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .sec-head h2 .w, .sec-head h1 .w, .cta-band h2 .w { opacity: 1 !important; transform: none !important; } }

/* ------------------------------------------------ wire dividers between
   sections: the page itself reads like one connected workflow */
.wired {
  position: relative; height: 104px; width: 100%; display: flex; justify-content: center;
  filter: none !important;
}
.wired__line {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--acc-line) 30%, var(--acc2-line) 70%, transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--ease-out) .1s;
}
.wired.in .wired__line { transform: scaleY(1); }
.wired__dot {
  position: absolute; left: 50%; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 12px var(--acc-glow);
  transform: translateX(-50%); opacity: 0;
}
.wired.in .wired__dot { animation: wireDrop 2.6s ease-in-out infinite; }
@keyframes wireDrop {
  0% { top: 4%; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
.wired::before, .wired::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--acc-line);
  background: #0b0c0e; opacity: 0; transition: opacity .5s .3s;
}
.wired::before { top: -3px; }
.wired::after { bottom: -3px; transition-delay: .9s; }
.wired.in::before, .wired.in::after { opacity: 1; }
.reduce-motion .wired__line { transform: scaleY(1); }
.reduce-motion .wired__dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .wired__line { transform: scaleY(1); } .wired__dot { animation: none; } }

/* section shells breathe a little tighter around the dividers */
.section--shell { padding-block: clamp(16px, 2.5vw, 30px); }

/* ---------------------------------------- steps: animated pipeline wire */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(207,232,90,0.35) 0 9px, transparent 9px 20px);
  background-size: 40px 2px;
  animation: dashFlow 1.4s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes dashFlow { to { background-position-x: 40px; } }
.step { z-index: 1; }
.reduce-motion .steps::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .steps::before { animation: none; } }

/* ------------------------------------------------ CTA band breathing glow */
.cta-band::before { animation: ctaBreathe 7s ease-in-out infinite alternate; }
@keyframes ctaBreathe {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.12); }
}
.reduce-motion .cta-band::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .cta-band::before { animation: none; } }

/* =========================================================================
   Hero headline — neon pass: bluer steel base, electric lime→mint→cyan
   accent with real glow bloom
   ========================================================================= */
.hero h1 {
  background: linear-gradient(180deg, #FFFFFF 10%, #C3D0E4 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 22px rgba(140,170,220,0.14));
}
.hero h1 .accent {
  background: linear-gradient(95deg, #E6FF66 0%, #8CFA96 32%, #53F2D3 66%, #5FC9FF 104%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: inkShift 7s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 14px rgba(120,242,205,0.5))
    drop-shadow(0 0 44px rgba(207,232,90,0.28));
}
@media (prefers-reduced-motion: reduce) { .hero h1 .accent { animation: none; } }
.reduce-motion .hero h1 .accent { animation: none; }

/* =========================================================================
   Scroll system v2 — ambient field, scanner sweeps, scrollytelling demo
   ========================================================================= */

/* retire the old line-and-dot dividers */
.wired { display: none; }

/* ambient workflow field behind the entire page */
#ambient-field {
  position: fixed; left: 0; right: 0; top: -8vh; height: 120vh;
  z-index: -1; opacity: 0.3; pointer-events: none;
  will-change: transform;
}

/* scanner sweep across a section's top edge when it enters view */
.section:not(.hero) { position: relative; }
.section.swept > .wrap { position: relative; }
.section.swept > .wrap::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(230,255,140,0.95) 45%, rgba(111,224,208,0.9) 55%, transparent 100%);
  background-size: 34% 100%; background-repeat: no-repeat;
  background-position-x: -40%;
  animation: scanSweep 1s var(--ease-out) forwards;
}
@keyframes scanSweep {
  0% { background-position-x: -40%; opacity: 1; }
  85% { opacity: 1; }
  100% { background-position-x: 145%; opacity: 0; }
}
.section.swept.section--shell > .wrap { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 80px -40px rgba(0,0,0,0.8); }
.reduce-motion .section.swept > .wrap::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .section.swept > .wrap::after { animation: none; opacity: 0; } }

/* scrollytelling: pin the demo while scroll drives the call */
@media (min-width: 900px) {
  .live__scrolly { height: 240vh; }
  .live__sticky { position: sticky; top: clamp(72px, 9vh, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .live__scrolly { height: auto !important; }
  .live__sticky { position: static !important; }
}

/* =========================================================================
   Page-hero topic emblems — crisp foreground workflows (replace the old
   faint canvases that mixed with the ambient field)
   ========================================================================= */
.page-hero__graph { display: none; }
.page-hero__emblem {
  position: absolute; right: clamp(16px, 5vw, 84px); top: 50%;
  transform: translateY(-50%);
  width: min(440px, 38%); pointer-events: none; z-index: 0;
  filter: drop-shadow(0 0 26px rgba(207,232,90,0.14)) drop-shadow(0 14px 40px rgba(0,0,0,0.5));
  opacity: 0; animation: emblemIn 0.9s var(--ease-out) 0.25s forwards;
}
.page-hero__emblem svg { width: 100%; height: auto; display: block; }
@keyframes emblemIn { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; transform: translateY(-50%); } }
@media (max-width: 1080px) { .page-hero__emblem { display: none; } }
.reduce-motion .page-hero__emblem { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-hero__emblem { animation: none; opacity: 1; } }

/* =========================================================================
   Hero headline v2 — workflow arrows between the three promise segments
   ========================================================================= */
.hero h1 .h1arrow {
  display: inline-block; vertical-align: baseline; position: relative;
  width: 1.2em; height: 0.52em; margin: 0 0.16em;
}
.hero h1 .h1arrow::before {
  content: ""; position: absolute; left: 0.1em; right: 0.3em; top: 50%; height: 0.055em;
  transform: translateY(-50%); border-radius: 1em;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  box-shadow: 0 0 14px rgba(207,232,90,0.55);
}
.hero h1 .h1arrow::after {
  content: ""; position: absolute; right: 0.12em; top: 50%;
  width: 0.24em; height: 0.24em;
  border-top: 0.055em solid var(--acc2); border-right: 0.055em solid var(--acc2);
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(111,224,208,0.7));
}

/* =========================================================================
   Hero headline v2 — vertical 3-step pipeline: segment ↓ segment ↓ segment
   Big type preserved at every width; no mid-phrase wrapping ever.
   ========================================================================= */
.hero h1 {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.1em; line-height: 1.06;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
}
.hero h1 .accent { display: inline-block; }

/* the connector becomes a vertical glowing wire with a down-chevron */
.hero h1 .h1arrow {
  display: block; position: relative;
  width: 1em; height: 0.72em; margin: 0.02em 0;
}
.hero h1 .h1arrow::before {
  content: ""; position: absolute; left: 50%; top: 0.04em; bottom: 0.26em;
  width: 2.5px; height: auto; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--acc), var(--acc2));
  border-radius: 2px; box-shadow: 0 0 14px rgba(207,232,90,0.45);
}
.hero h1 .h1arrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0.1em;
  width: 0.22em; height: 0.22em;
  border-right: 2.5px solid var(--acc2); border-bottom: 2.5px solid var(--acc2);
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 0 8px rgba(111,224,208,0.6));
  border-top: none; border-left: none;
}

/* =========================================================================
   Call-the-demo — compact glass card after the flagship "system, live" demo
   inviting the visitor to call the demo AI receptionist (example roofer).
   Container: blurred glass fill, faint lime ring, bright lime→teal segment
   orbiting the outline. Text scale/centering identical to the sec-heads.
   ========================================================================= */
@property --cd-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.calldemo { padding-block: clamp(20px, 3vw, 40px); }
.calldemo .wrap { text-align: center; }
.calldemo__inner {
  position: relative; max-width: 660px; margin-inline: auto;
  padding: clamp(30px, 4.5vw, 48px) clamp(22px, 4vw, 44px);
  border-radius: 26px;
  background: rgba(12, 14, 16, 0.42);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 0 60px -30px var(--acc-glow), 0 24px 60px -36px rgba(0,0,0,0.8);
}
/* the green line: a faint full ring + a bright segment orbiting the border */
.calldemo__inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  --cd-a: 0deg;
  background:
    conic-gradient(from var(--cd-a), transparent 0deg 284deg, var(--acc) 322deg, var(--acc2) 344deg, transparent 360deg),
    linear-gradient(var(--acc-line), var(--acc-line));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: cdOrbit 4.5s linear infinite;
}
@keyframes cdOrbit { to { --cd-a: 360deg; } }
.reduce-motion .calldemo__inner::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .calldemo__inner::before { animation: none; } }
.calldemo__inner .h-sec { margin-top: 18px; }
.calldemo__inner .lead { margin-top: 16px; }
.calldemo__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.calldemo__num { font-family: var(--f-mono); font-size: 1.14rem; letter-spacing: 0.05em; padding: 17px 34px; }
.calldemo__num svg { width: 19px; height: 19px; flex: none; }
.calldemo__fine { font-family: var(--f-mono); font-size: 0.74rem; color: var(--fg-faint); }
@media (max-width: 640px) { .calldemo__num { width: 100%; justify-content: center; } }