/* ============================================================
   CADENCE — V2 design system
   Built on Qwick brand: Creme natural-white, Lettuce, Charcoal, Lime
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --creme:#FFF9F3;          /* natural white canvas */
  --creme-2:#FBF3EA;        /* warmer organic tone */
  --paper:#FFFDFA;
  --charcoal:#101117;
  --ink-soft:#3A3B42;
  --muted:#737373;
  --faint:#9D9D9D;
  --line:rgba(16,17,23,0.12);
  --line-soft:rgba(16,17,23,0.07);
  --lettuce:#209F5B;
  --lettuce-deep:#177A45;
  --lettuce-soft:rgba(32,159,91,0.10);
  --lime:#67FF64;
  --tomato:#FB4F2F;
  --aqua:#5295FF;
  /* engine.html aliases */
  --ink:#0E1116;            /* dark band background */
  --accent:#209F5B;         /* lettuce accent on light pages */
  --canvas:#FFFDFA;         /* light card surface */
  --canvas-2:#FBF3EA;       /* warmer light surface */
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
/* organic grain overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
a{color:inherit}
img{max-width:100%}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px 44px;background:linear-gradient(to bottom,rgba(255,249,243,0.92),rgba(255,249,243,0));backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-0.02em;text-decoration:none;color:var(--charcoal)}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--lettuce);position:relative;display:grid;place-items:center;color:var(--creme);font-size:15px;font-weight:900}
.brand .mark::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:0 0 0 0 var(--lettuce-soft);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(32,159,91,.35)}70%{box-shadow:0 0 0 12px rgba(32,159,91,0)}100%{box-shadow:0 0 0 0 rgba(32,159,91,0)}}
/* animated soundwave mark (logo #3) */
.brand .mark .wavemark{width:16px;height:16px;display:block}
.brand .mark .wavemark line{stroke:var(--creme);transform-box:fill-box;transform-origin:center;animation:eq 1.15s ease-in-out infinite}
.brand .mark .wavemark line:nth-child(1){animation-delay:-.30s}
.brand .mark .wavemark line:nth-child(2){animation-delay:-.15s}
.brand .mark .wavemark line:nth-child(3){animation-delay:0s}
.brand .mark .wavemark line:nth-child(4){animation-delay:-.18s}
.brand .mark .wavemark line:nth-child(5){animation-delay:-.34s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.32)}}
@media(prefers-reduced-motion:reduce){.brand .mark .wavemark line{animation:none}}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500}
.nav-links a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--lettuce)}
.btn{font-family:var(--sans);font-size:15px;font-weight:600;padding:11px 22px;border-radius:100px;border:none;cursor:pointer;
  background:var(--lettuce);color:var(--creme);transition:transform .2s,background .2s;text-decoration:none;display:inline-block}
.btn:hover{transform:translateY(-1px);background:var(--lettuce-deep)}
.btn-ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--creme)}
@media(max-width:820px){.nav-links a{display:none}nav{padding:16px 20px}}

/* ---------- TYPE ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--lettuce);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:24px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--lettuce);border-radius:2px}
h1,h2,h3{font-weight:800;letter-spacing:-0.03em;line-height:1.02}
.display{font-weight:900;letter-spacing:-0.04em;line-height:0.96;font-size:clamp(44px,8vw,120px)}
.h-lg{font-weight:800;font-size:clamp(32px,5vw,72px);letter-spacing:-0.035em;line-height:1.0}
.h-md{font-weight:700;font-size:clamp(26px,3.4vw,44px);letter-spacing:-0.02em}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--muted);font-weight:400;max-width:56ch}
.accent{color:var(--lettuce)}
.mono{font-family:var(--mono)}

/* ---------- LAYOUT ---------- */
main{position:relative;z-index:2}
.wrap{max-width:1200px;margin:0 auto;width:100%;padding:0 44px}
@media(max-width:820px){.wrap{padding:0 20px}}
.pad{padding:120px 0}
section{position:relative}

/* ---------- SCROLL-SNAP STORY (stepped, not smooth) ---------- */
.story{scroll-snap-type:y proximity}
.beat{min-height:100vh;display:flex;align-items:center;scroll-snap-align:center;padding:120px 0;position:relative}
/* center spine */
.spine{position:fixed;left:50%;top:0;bottom:0;width:2px;background:var(--line-soft);z-index:1;transform:translateX(-50%)}
.spine i{position:absolute;left:50%;transform:translateX(-50%);top:0;width:10px;height:10px;border-radius:50%;background:var(--lettuce);
  box-shadow:0 0 0 6px var(--lettuce-soft);transition:top .3s linear}
@media(max-width:820px){.spine{display:none}}
/* left scroll-progress rail (sits in the margin, never over text) */
.srail{position:fixed;left:30px;top:120px;bottom:120px;width:2px;background:var(--line);border-radius:2px;z-index:30}
.srail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--lettuce);border-radius:2px;transition:height .15s linear}
.srail b{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:var(--lettuce);
  transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--lettuce-soft);transition:top .15s linear}
@media(max-width:1100px){.srail{display:none}}

/* left/right anchored beats */
.beat .col{max-width:560px}
.beat.left .wrap{display:flex;justify-content:flex-start}
.beat.right .wrap{display:flex;justify-content:flex-end;text-align:right}
.beat.right .eyebrow{flex-direction:row-reverse}
.beat.right .eyebrow::before{display:none}
.beat.right .eyebrow::after{content:"";width:24px;height:2px;background:var(--lettuce);border-radius:2px}
.beat.right .lead{margin-left:auto}
@media(max-width:820px){
  .beat.right .wrap,.beat.left .wrap{justify-content:flex-start;text-align:left}
  .beat.right .lead{margin-left:0}
  .beat.right .eyebrow{flex-direction:row}
}

/* slide-in reveals */
.fx{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.fx.from-left{transform:translateX(-46px)}
.fx.from-right{transform:translateX(46px)}
.fx.up{transform:translateY(34px)}
.fx.in{opacity:1;transform:none}
.fx.d1{transition-delay:.1s}.fx.d2{transition-delay:.2s}.fx.d3{transition-delay:.3s}.fx.d4{transition-delay:.4s}

/* ---------- CARDS / GRID ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(16,17,23,.07);border-color:var(--lettuce)}
.card .k{font-family:var(--mono);font-size:12px;color:var(--lettuce);text-transform:uppercase;letter-spacing:.04em}
.card h3{font-size:22px;font-weight:700;margin:14px 0 8px}
.card p{color:var(--muted);font-size:15px}
.card .more{display:inline-block;margin-top:16px;font-weight:600;color:var(--lettuce);text-decoration:none;font-size:15px}
.card .more::after{content:" \2192";transition:margin .2s}
.card:hover .more::after{margin-left:5px}

/* ---------- SPLIT: bring your stack vs ours ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper)}
.split>div{padding:40px}
.split .yours{background:var(--creme-2)}
.split .ours{background:linear-gradient(160deg,#0f3d27,#101117);color:var(--creme)}
.split .ours .tag{color:var(--lime)}
.split .yours .tag{color:var(--muted)}
.split .tag{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.split h3{font-size:26px;margin:12px 0 18px}
.split ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.split li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.split li .ic{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;margin-top:2px}
.split .yours li .ic{background:var(--line);color:var(--muted)}
.split .ours li .ic{background:var(--lime);color:#0f3d27;font-weight:700}
.split .ours .lead{color:rgba(255,249,243,.7)}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- TELEMETRY TERMINAL ---------- */
.term{background:var(--charcoal);border-radius:18px;padding:24px;font-family:var(--mono);font-size:13px;color:#D7DBE2;
  min-height:300px;box-shadow:0 30px 70px rgba(16,17,23,.2);overflow:hidden}
.term .bar{display:flex;gap:7px;margin-bottom:18px}
.term .bar i{width:11px;height:11px;border-radius:50%;background:#33353d}
.term .bar i:nth-child(1){background:#FB4F2F}.term .bar i:nth-child(2){background:#febc2e}.term .bar i:nth-child(3){background:var(--lime)}
.term .line{margin:7px 0;opacity:0;transform:translateY(6px);transition:all .4s;white-space:pre-wrap}
.term .line.show{opacity:1;transform:none}
.term .t{color:#6b7280}.term .ok{color:var(--lime)}.term .ac{color:#8fb8ff}
.cur{display:inline-block;width:8px;height:15px;background:var(--lime);vertical-align:middle;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- SCALE / STAT BAND ---------- */
.statband{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 24px;margin-top:8px}
@media(max-width:820px){.statband{grid-template-columns:1fr 1fr;gap:34px 18px}}
.statband .s .n{font-weight:900;letter-spacing:-.03em;font-size:clamp(32px,4.2vw,60px);line-height:1}
.statband .s .n .u{color:var(--lettuce)}
.statband .s .l{color:var(--muted);font-size:14px;margin-top:9px;max-width:230px}
/* hero 200M */
.hero-200{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:4px}
.hero-200 .big{font-weight:900;letter-spacing:-.045em;line-height:.85;font-size:clamp(82px,17vw,230px);color:var(--lettuce)}
.hero-200 .big .u{font-size:.45em;vertical-align:super}
.hero-200 .lbl{font-weight:700;font-size:clamp(22px,2.6vw,40px);color:var(--charcoal);letter-spacing:-.02em}
.statband.sub{grid-template-columns:repeat(5,1fr);gap:30px 18px;margin-top:36px;padding-top:34px;border-top:1px solid var(--line)}
.statband.sub .s .n{font-size:clamp(26px,3vw,42px)}
.statband.sub .s .l{font-size:13px}
@media(max-width:820px){.statband.sub{grid-template-columns:1fr 1fr 1fr}}

/* ---------- AGENT FLEET BANNER (8th, distinct) ---------- */
.agentbanner{margin-top:20px;border-radius:20px;padding:36px;background:linear-gradient(150deg,#0f3d27,#101117);color:var(--creme);
  display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.agentbanner .k{font-family:var(--mono);font-size:12px;color:var(--lime);text-transform:uppercase;letter-spacing:.04em}
.agentbanner h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:10px 0 10px;color:var(--creme)}
.agentbanner p{color:rgba(255,249,243,.72);font-size:16px;max-width:52ch;line-height:1.55}
.agentbanner .countchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:#0f3d27;
  background:var(--lime);padding:6px 12px;border-radius:100px;margin-top:18px;font-weight:600}
.agentbanner .countchip .pdot{width:7px;height:7px;border-radius:50%;background:#0f3d27;animation:pulse-go 1.6s infinite}
.agentbanner .live{display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:12.5px}
.agentbanner .live .l{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:10px 13px;color:#cfeede}
.agentbanner .live .l b{color:var(--lime);font-weight:500}
.agentbanner .live .l::before{content:"\2301";color:var(--lime)}
@media(max-width:820px){.agentbanner{grid-template-columns:1fr;gap:20px;padding:26px}}

/* ---------- METRICS ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media(max-width:820px){.metrics{grid-template-columns:1fr 1fr;gap:40px 20px}}
.metric .num{font-weight:900;letter-spacing:-.03em;font-size:clamp(42px,6vw,80px);line-height:1}
.metric .num .u{color:var(--lettuce);font-size:.5em;vertical-align:super;margin-left:2px}
.metric .lbl{color:var(--muted);font-size:14px;margin-top:10px;max-width:210px}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--creme-2)}
.marquee .track{display:inline-block;animation:marq 28s linear infinite;font-weight:800;font-size:clamp(26px,4vw,56px);letter-spacing:-.03em}
.marquee .track span{margin:0 24px;color:var(--faint)}
.marquee .track b{color:var(--lettuce)}

@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- AUTOPILOT (optional) ---------- */
.autopilot{position:fixed;right:24px;bottom:24px;z-index:55;display:flex;align-items:center;gap:11px;padding:9px 9px 9px 16px;
  border-radius:100px;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,17,23,.1);font-size:13px}
.autopilot .ring{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.autopilot.on .ring{background:var(--lettuce);animation:pulse-go 1.8s infinite}
@keyframes pulse-go{0%{box-shadow:0 0 0 0 rgba(32,159,91,.5)}70%{box-shadow:0 0 0 8px rgba(32,159,91,0)}100%{box-shadow:0 0 0 0 rgba(32,159,91,0)}}
.autopilot .ap-btn{font-family:var(--mono);font-size:12px;border:none;cursor:pointer;background:var(--charcoal);color:var(--creme);padding:7px 13px;border-radius:100px}
.autopilot .ap-btn:hover{background:var(--lettuce)}

/* ---------- SECTION PAGE HERO ---------- */
.subhero{padding:170px 0 90px;position:relative}
.subhero .crumbs{font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:22px}
.subhero .crumbs a{text-decoration:none;color:var(--muted)}
.subhero .crumbs a:hover{color:var(--lettuce)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:70px 0;border-top:1px solid var(--line)}
.feature-row.flip>.viz{order:-1}
@media(max-width:820px){.feature-row{grid-template-columns:1fr;gap:28px}.feature-row.flip>.viz{order:0}}
.viz{background:var(--paper);border:1px solid var(--line);border-radius:20px;min-height:300px;padding:26px;position:relative;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:100px;
  background:var(--lettuce-soft);color:var(--lettuce-deep);border:1px solid rgba(32,159,91,.2)}

/* mini UI mock bits for section viz */
.mock{display:flex;flex-direction:column;gap:10px}
.mock .row{display:flex;align-items:center;gap:10px;background:var(--creme);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;font-size:13px}
.mock .row .dot{width:9px;height:9px;border-radius:50%;background:var(--lettuce)}
.mock .row .dot.amber{background:#febc2e}.mock .row .dot.red{background:var(--tomato)}.mock .row .dot.aqua{background:var(--aqua)}
.mock .row .grow{flex:1;color:var(--ink-soft)}
.mock .row .meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bar-track{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.bar-track i{display:block;height:100%;background:var(--lettuce);border-radius:8px}

/* ---------- FOOTER ---------- */
footer{padding:80px 0 60px;border-top:1px solid var(--line);position:relative;z-index:2;background:var(--creme-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:50px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-col h4{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;text-decoration:none;color:var(--ink-soft);padding:5px 0;font-size:15px}
.foot-col a:hover{color:var(--lettuce)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--faint);font-size:13px;padding-top:24px;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fx{opacity:1;transform:none}
  html{scroll-behavior:auto}
}