/* Trigger AI pitch page: the page Ivo scrolls through on a Loom. Same brand as the
   demo page and the site: Space Grotesk 700 for display, Geist Mono for metadata,
   #3D74FF blue, navy with a blue bloom for dark surfaces. Every screen on it is a
   marketing version of a real system (rule 97): simplified, but only what it does. */

@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --canvas: #FAFBFE;
  --surface: #FFFFFF;
  --surface-2: #F4F6FB;
  --hair: #E6EBF5;
  --hair-2: #EDF1F9;
  --ink: #12161F;
  --ink-2: #454F63;
  --mute: #7A8499;
  --blue: #3D74FF;
  --blue-ink: #1D4FD8;
  --blue-light: #7FA5FF;
  --blue-wash: #EEF3FF;
  --green: #16A34A;
  --green-wash: #E9F8EF;
  --amber: #B45309;
  --amber-wash: #FEF4E6;
  --on-dark: #AEB8CC;
  --navy:
    radial-gradient(800px 420px at 85% -10%, rgba(29,79,216,.38), rgba(11,17,32,0) 62%),
    linear-gradient(165deg, #101827 0%, #0B1120 60%, #0A1020 100%);
  --pill:
    radial-gradient(140px 80px at 82% -12%, rgba(61,116,255,.6), rgba(11,17,32,0) 72%),
    linear-gradient(160deg, #101827 0%, #0B1120 100%);
  --shadow: 0 48px 100px -56px rgba(18,32,72,.5);
  --shadow-soft: 0 16px 40px -24px rgba(18,32,72,.35);
  --sans: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --stage-ms: 5600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.blue { color: var(--blue); }
.mono { font-family: var(--mono); }

/* ------------------------------------------------------------ progress -- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-ink), var(--blue), var(--blue-light)); transform: scaleX(0); transform-origin: left; }

/* ---------------------------------------------------------------- hero -- */
.hero { position: relative; padding: 18px 0 40px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 50% -120px, rgba(61,116,255,.20), rgba(250,251,254,0) 70%),
    linear-gradient(to right, rgba(29,79,216,.06) 1px, transparent 1px),
    linear-gradient(rgba(29,79,216,.06) 1px, transparent 1px);
  background-size: auto, 88px 88px, 88px 88px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
}
.hero .wrap { position: relative; }

.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 20px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--hair); border-radius: 999px; box-shadow: var(--shadow-soft); }
.wordmark { font: 700 20px/1 var(--sans); letter-spacing: -.04em; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pill); color: #fff; font: 600 14px/1 var(--sans); transition: transform .2s var(--ease); }
.nav-cta:hover { transform: translateY(-1px); }

.lockup { display: inline-flex; align-items: center; gap: 14px; margin: 64px 0 0; }
.lock-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--shadow-soft); font: 700 28px/1 var(--sans); letter-spacing: -.04em; overflow: hidden; }
.lock-trigger { border-color: transparent; }
.lock-trigger img { width: 100%; height: 100%; }
.lock-client { color: var(--blue); }
.lock-client img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.lock-x { font: 400 22px/1 var(--sans); color: var(--mute); }

.eyebrow { display: flex; justify-content: center; align-items: center; gap: 9px; width: fit-content; margin: 26px auto 0; padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); box-shadow: var(--shadow-soft); }
.eyebrow b { color: var(--ink); font-weight: 600; }
.rec { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--blue); }
.rec::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

.h1 { margin: 22px 0 0; font: 700 clamp(42px, 6.4vw, 74px)/1.02 var(--sans); letter-spacing: -.05em; }
@media (max-width: 480px) { .h1 { font-size: clamp(30px, 9.2vw, 42px); } }
.grad {
  background: linear-gradient(100deg, var(--blue-ink) 0%, var(--blue) 35%, var(--blue-light) 55%, var(--blue) 75%, var(--blue-ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.kicker { max-width: 560px; margin: 20px auto 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }

.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 40px auto 0; text-align: left; }
.hero-card { position: relative; display: grid; gap: 4px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--shadow-soft); transition: transform .25s var(--ease), border-color .25s; overflow: hidden; }
.hero-card:hover { transform: translateY(-3px); border-color: #D3DDF2; }
.hc-num { font: 500 12px/1 var(--mono); color: var(--blue); }
.hc-title { margin-top: 8px; font: 700 22px/1.1 var(--sans); letter-spacing: -.03em; }
.hc-line { font-size: 14px; color: var(--mute); }
.hc-go { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-wash); color: var(--blue); font-size: 14px; transition: transform .25s var(--ease); }
.hero-card:hover .hc-go { transform: translateY(3px); }

/* pointer light on cards */
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(61,116,255,.10), transparent 60%); }
.spot:hover::before { opacity: 1; }

/* ------------------------------------------------------------- sections -- */
.section { padding: 88px 0; }
.sec-head { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.label { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.label.on-dark { color: var(--blue-light); }
.h2 { margin: 14px 0 0; font: 700 clamp(32px, 4.4vw, 50px)/1.05 var(--sans); letter-spacing: -.045em; }
.sub { margin: 14px 0 0; font-size: 17px; color: var(--ink-2); }

/* -------------------------------------------------------------- console -- */
.console { display: grid; grid-template-columns: 290px 1fr; gap: 0; padding: 14px; background: var(--navy); border-radius: 28px; box-shadow: var(--shadow); }
.stages { display: grid; align-content: start; gap: 4px; padding: 10px 8px 10px 4px; }
.stage { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 12px 14px 14px; border-radius: 14px; color: var(--on-dark); transition: background .25s, color .25s; overflow: hidden; }
.stage:hover { background: rgba(255,255,255,.04); }
.st-n { grid-row: span 2; font: 500 12px/22px var(--mono); color: #5E6A82; }
.st-t { font: 700 18px/22px var(--sans); letter-spacing: -.02em; color: #E7ECF6; }
.st-d { font-size: 13px; line-height: 1.4; margin-top: 2px; }
.stage i { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0; }
.stage i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transform: scaleX(0); transform-origin: left; }
.stage.is-active { background: rgba(61,116,255,.14); }
.stage.is-active .st-n { color: var(--blue-light); }
.stage.is-active .st-t { color: #fff; }
.stage.is-active i { opacity: 1; }
.stage.is-active i::after { animation: fill var(--stage-ms) linear forwards; }
.js .console:not(.in) .stage i::after { animation: none; }
.console.is-paused .stage.is-active i::after { animation-play-state: paused; }
.console.is-manual .stage.is-active i::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

.screen { position: relative; min-height: 580px; background: var(--surface); border-radius: 18px; overflow: hidden; }
.chrome { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--hair-2); background: var(--surface-2); }
.chrome > i { width: 10px; height: 10px; border-radius: 50%; background: #DCE2EE; }
.chrome-url { margin-left: 14px; padding: 4px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--hair); font: 400 12px/1 var(--mono); color: var(--mute); }

.pane { position: absolute; inset: 40px 0 0; padding: 24px 26px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; display: flex; flex-direction: column; }
.pane.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .05s, transform .45s var(--ease) .05s; }
.pane-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pane-title { margin: 0; font: 700 18px/1.2 var(--sans); letter-spacing: -.02em; }
.pane-foot { margin: auto 0 0; padding-top: 14px; font-size: 14px; color: var(--mute); }
.pill-mini { padding: 6px 10px; border-radius: 999px; background: var(--blue-wash); color: var(--blue-ink); font: 500 12px/1 var(--mono); white-space: nowrap; }

/* Everything inside a pane animates only while that pane is showing, and only
   once the console has scrolled into view. */
.js .console:not(.in) .pane *, .pane:not(.is-active) * { animation: none !important; }

/* 01 source */
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.src { position: relative; padding: 7px 12px 7px 26px; border: 1px solid var(--hair); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--ink-2); background: var(--surface); }
.src::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--blue); animation: blink 1.2s ease-in-out infinite; }
.src:nth-child(2)::before { animation-delay: .4s; }
.src:nth-child(3)::before { animation-delay: .8s; }
.src:nth-child(4)::before { animation-delay: 1.2s; }
.src.warm { border-color: rgba(61,116,255,.35); background: var(--blue-wash); color: var(--blue-ink); }
@keyframes blink { 50% { opacity: .25; } }
.counters { display: flex; gap: 22px; }
.counter { display: grid; justify-items: end; }
.counter.warm b { color: var(--blue); }
.counter b { font: 700 28px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.counter span { font: 400 12px/1.4 var(--mono); color: var(--mute); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rows li { display: grid; grid-template-columns: 36px 1.3fr 1fr 140px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--surface); animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--d) * 260ms + 300ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-14px); } }
.av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-ink); font: 600 12px/1 var(--mono); }
.av.sm { width: 32px; height: 32px; flex: none; }
.who { display: grid; line-height: 1.25; min-width: 0; }
.who b { font-size: 15px; font-weight: 600; }
.who em { font-style: normal; font-size: 13px; color: var(--mute); }
.co { font-size: 14px; color: var(--ink-2); }
.via { justify-self: start; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); font: 400 12px/1.2 var(--mono); color: var(--ink-2); white-space: nowrap; }
.via.warm { background: var(--blue-wash); color: var(--blue-ink); }
.tag { justify-self: end; padding: 5px 9px; border-radius: 999px; font: 500 11px/1 var(--mono); white-space: nowrap; animation: pop .35s var(--ease) both; animation-delay: calc(var(--d) * 260ms + 800ms); }
.tag.ok { background: var(--green-wash); color: var(--green); }
.tag.no { background: var(--amber-wash); color: var(--amber); }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }

/* 02 score */
.legend { display: flex; gap: 14px; font: 400 12px/1 var(--mono); color: var(--mute); }
.lg::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--blue); }
.lg.lo::before { background: #C5CDDC; }
.rows.scored li { grid-template-columns: 36px 1.1fr 1fr 120px 34px; }
.sig { justify-self: start; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); font: 400 12px/1.2 var(--mono); color: var(--ink-2); }
.bar { height: 8px; border-radius: 99px; background: var(--hair-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--s) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--blue-ink), var(--blue)); transform-origin: left; animation: grow .9s var(--ease) both; animation-delay: calc(var(--d) * 260ms + 500ms); }
@keyframes grow { from { transform: scaleX(0); } }
.num { font: 600 15px/1 var(--mono); text-align: right; }
.gated { animation: rowIn .5s var(--ease) both, dim .5s ease forwards !important; animation-delay: calc(var(--d) * 260ms + 300ms), 2.2s !important; }
.gated .bar i { background: #C5CDDC; }
@keyframes dim { to { opacity: .45; filter: grayscale(1); } }

/* 03 video queue */
.queue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vq { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--hair-2); border-radius: 16px; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--d) * 220ms + 200ms); }
.vq b { margin-top: 8px; font-size: 15px; font-weight: 600; }
.vq em { font-style: normal; font-size: 13px; color: var(--mute); }
.vq-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(150deg, #DCE6FF, #F4F7FF); overflow: hidden; }
.vq-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--pill); }
.vq-play::after { content: ""; position: absolute; left: 15px; top: 12px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.vq-done { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 99px; background: var(--green-wash); color: var(--green); font: 500 11px/1 var(--mono); animation: pop .35s var(--ease) both; animation-delay: calc(var(--d) * 220ms + 700ms); }
.vq-page { margin-top: 6px; font: 500 12px/1 var(--mono); color: var(--blue); }
.vq.is-next { border-color: rgba(61,116,255,.45); box-shadow: 0 0 0 4px rgba(61,116,255,.08); }
.rec-now { background: linear-gradient(150deg, #1B2540, #0B1120); }
.vq-dot { position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #EF4444; animation: blink 1s ease-in-out infinite; }
.vq-time { position: absolute; right: 10px; top: 8px; font: 500 12px/1 var(--mono); color: #fff; }
.vq.is-next .vq-page { color: var(--mute); }

/* 04 send */
.lanes { position: relative; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--hair-2); border-radius: 16px; background: var(--surface-2); }
.lane { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
.lane-name { font: 500 12px/1 var(--mono); color: var(--mute); }
.track { position: relative; height: 38px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #D3DBEA 0 6px, transparent 6px 12px); }
.node { position: absolute; left: var(--x); top: 50%; transform: translateY(-50%); padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hair); font: 600 13px/1 var(--sans); white-space: nowrap; box-shadow: var(--shadow-soft); animation: nodeOn .45s var(--ease) both; animation-delay: calc(var(--d) * 700ms + 300ms); }
@keyframes nodeOn { from { opacity: 0; transform: translateY(-50%) scale(.8); } to { opacity: 1; transform: translateY(-50%); border-color: rgba(61,116,255,.5); } }
.runner { position: absolute; top: 10px; bottom: 10px; left: 104px; width: 2px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 12px rgba(61,116,255,.6); animation: run 3.6s var(--ease) both .2s; }
@keyframes run { from { transform: translateX(0); opacity: 1; } 95% { opacity: 1; } to { transform: translateX(min(560px, 60vw)); opacity: 0; } }
.msg { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--hair-2); border-radius: 16px; animation: rowIn .5s var(--ease) both 1.4s; }
.msg p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.msg u { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* 05 replies */
.replies { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.alert { padding: 18px; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: var(--shadow); animation: slideIn .6s var(--ease) both .2s; }
@keyframes slideIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.alert-top { display: flex; justify-content: space-between; align-items: center; }
.hot { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; background: rgba(61,116,255,.22); color: #CFDDFF; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.hot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light); animation: blink 1s infinite; }
.when { font: 400 12px/1 var(--mono); color: var(--mute); }
.alert p { margin: 14px 0 0; font-size: 14px; color: var(--on-dark); }
.alert p b { color: #fff; }
.alert blockquote { margin: 10px 0 0; font: 600 19px/1.35 var(--sans); letter-spacing: -.01em; }
.alert-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.alert-acts span { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); font: 400 12px/1 var(--mono); color: var(--on-dark); }
.crm { padding: 16px; border: 1px solid var(--hair-2); border-radius: 18px; animation: slideIn .6s var(--ease) both .6s; }
.crm-head { margin: 0 0 12px; font: 500 12px/1 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.crm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crm-col { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 12px; background: var(--surface-2); min-height: 130px; }
.crm-col span { font: 600 12px/1.2 var(--sans); color: var(--ink-2); }
.crm-col i { display: block; height: 30px; border-radius: 8px; background: var(--surface); border: 1px solid var(--hair); font: 600 11px/30px var(--sans); font-style: normal; text-align: center; color: var(--ink); white-space: nowrap; overflow: hidden; }
.reminders { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--hair-2); border-radius: 18px; animation: slideIn .6s var(--ease) both 2.3s; }
.rem-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; font: 500 12px/1 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.rem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rem-list li { display: grid; grid-template-columns: 32px 130px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--d) * 220ms + 2.6s); }
.rem-list b { font-weight: 600; color: var(--ink); }
.rem-list em { font-style: normal; color: var(--mute); }
.rem-list .tag { animation-delay: calc(var(--d) * 220ms + 3.1s); }
.move-out { animation: out .5s var(--ease) forwards 1.6s; }
@keyframes out { to { opacity: 0; transform: translateX(30px); height: 0; border-width: 0; margin-top: -6px; } }
.move-in { border-color: var(--blue) !important; background: var(--blue-wash) !important; color: var(--blue-ink) !important; animation: in .55s var(--ease) both 1.9s; }
@keyframes in { from { opacity: 0; transform: translateX(-30px); } }

/* 05 nurture */
.nurture { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; }
.nt { display: grid; align-content: start; gap: 3px; padding: 14px; border: 1px solid var(--hair-2); border-radius: 14px; background: var(--surface-2); animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--d) * 450ms + 200ms); }
.nt-i { font: 500 11px/1 var(--mono); color: var(--blue); }
.nt b { margin-top: 6px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.nt em { font-style: normal; font-size: 13px; color: var(--mute); }
.hot-nt { border-color: rgba(61,116,255,.45); background: var(--blue-wash); }
.nt-arrow { position: relative; align-self: center; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, #C5CDDC 0 5px, transparent 5px 9px); }
.nt-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid #C5CDDC; border-right: 0; }
.nt-people { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.nt-people li { display: grid; grid-template-columns: 32px 1fr 1fr auto; align-items: center; gap: 12px; padding: 7px 12px 7px 8px; border: 1px solid var(--hair-2); border-radius: 12px; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--d) * 260ms + 1500ms); }
.nt-people b { font-size: 14px; font-weight: 600; }
.nt-people em { font: 400 12px/1.2 var(--mono); font-style: normal; color: var(--mute); }
.nt-people .tag { background: var(--surface-2); color: var(--ink-2); animation-delay: calc(var(--d) * 260ms + 1900ms); }
.nt-people .tag.ok { background: var(--green-wash); color: var(--green); }
.nt-people .back { border-color: rgba(22,163,74,.35); }

/* ---------------------------------------------------------- lead's view -- */
.lead-view { background: linear-gradient(180deg, var(--canvas), #F1F5FF 50%, var(--canvas)); }
.split { display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: center; }
.split-copy .h2 { max-width: 500px; }
.split-copy .sub { max-width: 460px; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 32px; font-size: 16px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D74FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.phone { position: relative; justify-self: center; display: flex; flex-direction: column; width: 360px; height: 720px; padding: 12px; border-radius: 52px; background: #0B1120; box-shadow: var(--shadow), inset 0 0 0 2px #2A3550; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; flex: none; padding: 0 26px; border-radius: 40px 40px 0 0; background: var(--canvas); font: 600 13px/1 var(--sans); }
.phone-bar i { width: 92px; height: 26px; border-radius: 20px; background: #0B1120; }
/* Battery at 80%: outline, fill and the little nub on the right. */
.pb-icons { position: relative; width: 25px; height: 12px; padding: 1.5px; border-radius: 3.5px; border: 1.2px solid rgba(18,22,31,.45); margin-right: 3px; }
.pb-icons::before { content: ""; display: block; width: 80%; height: 100%; border-radius: 1.5px; background: var(--ink); }
.pb-icons::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(18,22,31,.45); }
.phone iframe { display: block; flex: 1; width: 100%; border: 0; border-radius: 0 0 40px 40px; background: var(--canvas); }

/* ------------------------------------------------------------------ ops -- */
.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.op { position: relative; padding: 14px 14px 24px; background: var(--surface); border: 1px solid var(--hair); border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden; transition: transform .25s var(--ease); }
.op:hover { transform: translateY(-3px); }
.op h3 { margin: 22px 10px 0; font: 700 22px/1.1 var(--sans); letter-spacing: -.03em; }
.op p { margin: 8px 10px 0; font-size: 15px; color: var(--ink-2); }
.op-screen { position: relative; height: 210px; padding: 16px; border-radius: 16px; background: var(--navy); overflow: hidden; display: grid; align-items: center; }
.js .op:not(.in) .op-screen * { animation: none !important; }

/* hygiene */
.slack { padding: 14px; border-radius: 14px; background: #fff; }
.slack-top { display: flex; justify-content: space-between; align-items: center; }
.sl-badge { font: 600 12px/1 var(--mono); color: var(--blue-ink); }
.sl-title { margin: 10px 0 8px !important; font: 700 15px/1.2 var(--sans) !important; color: var(--ink) !important; }
.sl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.sl-list em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--mute); }
.sl-list b { padding: 3px 7px; border-radius: 99px; background: var(--green-wash); color: var(--green); font: 500 10px/1 var(--mono); animation: loopPop 6s var(--ease) infinite; animation-delay: calc(var(--d) * 400ms + 600ms); }
@keyframes loopPop { 0% { opacity: 0; transform: scale(.6); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* proposal */
.prop { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto; gap: 10px; align-items: center; }
.prop-src { grid-row: span 2; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.prop-src .mono { font-size: 11px; color: var(--on-dark); }
.lines { display: grid; gap: 6px; }
.lines i { height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); }
.lines i:nth-child(2) { width: 80%; }
.lines i:nth-child(3) { width: 60%; }
.prop-btn { justify-self: start; padding: 8px 12px; border-radius: 99px; background: var(--blue); color: #fff; font: 600 12px/1 var(--sans); animation: press 6s var(--ease) infinite; }
@keyframes press { 0%, 12% { transform: none; box-shadow: 0 0 0 0 rgba(61,116,255,.6); } 16% { transform: scale(.94); } 22% { transform: none; box-shadow: 0 0 0 10px rgba(61,116,255,0); } 100% { transform: none; } }
.prop-doc { display: grid; gap: 7px; padding: 12px; border-radius: 12px; background: #fff; }
.pd-h { font: 700 12px/1.2 var(--sans); color: var(--ink); }
.pd-row { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; animation: loopIn 6s var(--ease) infinite; animation-delay: calc(var(--d) * 300ms); }
.pd-row b { font: 500 10px/1 var(--mono); color: var(--mute); }
.pd-row i { height: 6px; border-radius: 4px; background: var(--blue-wash); }
@keyframes loopIn { 0%, 22% { opacity: 0; transform: translateY(6px); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* workflows */
.wf { display: grid; justify-items: center; gap: 0; }
.wf-node { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #E7ECF6; font: 600 13px/1 var(--sans); animation: glow 4s var(--ease) infinite; animation-delay: calc(var(--d) * 700ms); }
.wf-node.ai { color: #CFDDFF; }
.wf-link { position: relative; width: 2px; height: 16px; background: rgba(255,255,255,.12); overflow: hidden; }
.wf-link::after { content: ""; position: absolute; left: 0; top: -8px; width: 2px; height: 8px; background: var(--blue-light); animation: drip 4s linear infinite; }
.wf-link:nth-of-type(2)::after { animation-delay: .35s; }
.wf-link:nth-of-type(4)::after { animation-delay: 1.05s; }
.wf-link:nth-of-type(6)::after { animation-delay: 1.75s; }
@keyframes glow { 0%, 100% { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); } 8%, 22% { border-color: var(--blue); background: rgba(61,116,255,.25); } }
@keyframes drip { 0% { transform: translateY(0); } 15%, 100% { transform: translateY(26px); } }

/* kick-off */
.kick { padding: 14px; border-radius: 14px; background: #fff; }
.kick-h { display: block; margin-bottom: 10px; font: 700 13px/1.2 var(--sans); color: var(--ink); }
.kick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kick li { position: relative; padding-left: 26px; font-size: 13px; color: var(--ink-2); }
.kick li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--green-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; animation: loopPop 6s var(--ease) infinite; animation-delay: calc(var(--d) * 450ms + 300ms); }

/* finance */
.fin { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; align-items: center; }
.fin-files { display: grid; gap: 6px; }
.fin-files span { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font: 400 10.5px/1.2 var(--mono); color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: loopIn 6s var(--ease) infinite; animation-delay: calc(var(--d) * 350ms - 1200ms); }
.fin-card { display: grid; gap: 9px; padding: 12px; border-radius: 12px; background: #fff; }
.fin-row { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; }
.fin-row b { font: 500 10px/1 var(--mono); color: var(--mute); }
.fin-row i { display: block; width: var(--w); height: 7px; border-radius: 4px; background: var(--blue-light); transform-origin: left; animation: barLoop 6s var(--ease) infinite; }
.fin-row i.m { background: var(--green); }
@keyframes barLoop { 0%, 18% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* dashboard */
.dash { display: grid; gap: 12px; }
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-tiles span { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.dash-tiles em { font: 400 10px/1.2 var(--mono); font-style: normal; color: var(--on-dark); }
.dash-tiles b { font: 700 20px/1 var(--sans); color: #fff; letter-spacing: -.02em; }
.dash-tiles .flag { border-color: rgba(251,191,36,.5); }
.dash-tiles .flag b { color: #FBBF24; animation: blink 1.4s ease-in-out infinite; }
.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding: 0 2px; }
.dash-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue-light), var(--blue)); transform-origin: bottom; animation: rise 6s var(--ease) infinite; }
.dash-bars i:nth-child(2) { animation-delay: .1s; } .dash-bars i:nth-child(3) { animation-delay: .2s; } .dash-bars i:nth-child(4) { animation-delay: .3s; }
.dash-bars i:nth-child(5) { animation-delay: .4s; } .dash-bars i:nth-child(6) { animation-delay: .5s; } .dash-bars i:nth-child(7) { animation-delay: .6s; }
@keyframes rise { 0% { transform: scaleY(.15); } 25%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }

/* ---------------------------------------------------------------- close -- */
.close-sec { padding-top: 40px; }
.close-card { padding: 52px 48px 44px; border-radius: 28px; background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.close-card .h2 { color: #fff; max-width: 600px; }
.close-sub { max-width: 520px; margin: 16px 0 0; color: var(--on-dark); font-size: 17px; }
.close-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--ink); font: 700 16px/1 var(--sans); transition: transform .2s var(--ease); }
.cta:hover { transform: translateY(-2px); }
.byline { display: flex; align-items: center; gap: 12px; }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.byline span { display: grid; line-height: 1.3; }
.byline b { font-size: 15px; }
.byline em { font-style: normal; font-size: 13px; color: var(--on-dark); }

.footer { padding: 40px 0 56px; font: 400 13px/1 var(--mono); color: var(--mute); }
.footer .wrap { display: flex; justify-content: space-between; }

/* --------------------------------------------------------------- reveal -- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) var(--delay, 0ms), transform .7s var(--ease) var(--delay, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1000px) {
  .console { grid-template-columns: 1fr; }
  .stages { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 12px; }
  .stages::-webkit-scrollbar { display: none; }
  .stage { flex: none; grid-template-columns: auto; padding: 10px 14px 14px; }
  .st-n { grid-row: auto; display: none; }
  .st-d { display: none; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .ops { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .section { padding: 64px 0; }
  .wrap, .wrap-wide { padding: 0 16px; }
  .lockup { margin-top: 44px; }
  .lock-mark { width: 52px; height: 52px; border-radius: 15px; font-size: 22px; }
  .kicker { font-size: 16px; }
  .hero-cards { grid-template-columns: 1fr; }
  .console { padding: 8px; border-radius: 22px; }
  .screen { min-height: 640px; }
  .pane { padding: 18px 14px; }
  .pane-top { flex-wrap: wrap; }
  .rows li, .rows.scored li { grid-template-columns: 32px 1fr auto; }
  .rows .tag { justify-self: end; }
  .rows .co, .rows .via, .rows .sig { display: none; }
  .rows.scored .bar { display: none; }
  .av { width: 32px; height: 32px; }
  .queue { grid-template-columns: 1fr 1fr; }
  .queue .vq:nth-child(3) { display: none; }
  .lane { grid-template-columns: 1fr; gap: 4px; }
  .node { font-size: 11px; padding: 6px 8px; }
  .runner { display: none; }
  .replies { grid-template-columns: 1fr; }
  .counters { gap: 14px; }
  .counter b { font-size: 22px; }
  .nurture { grid-template-columns: 1fr; gap: 6px; }
  .nt-arrow { display: none; }
  .nt { padding: 10px 12px; }
  .nt-people li { grid-template-columns: 32px 1fr auto; }
  .nt-people em { display: none; }
  .crm-col { min-height: 120px; }
  .rem-list li { grid-template-columns: 32px 1fr auto; }
  .rem-list em { display: none; }
  .replies .crm { display: none; }
  .rem-head span:last-child { display: none; }
  .phone { width: 300px; height: 600px; border-radius: 44px; }
  .phone-bar { border-radius: 34px 34px 0 0; }
  .phone iframe { border-radius: 0 0 34px 34px; }
  .close-card { padding: 36px 22px 30px; border-radius: 22px; }
  .footer .wrap { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .stage.is-active i::after { transform: scaleX(1); }
}