/* ============================================================
   Quicklyster Human Handoff Desk — styles.css
   Brand: black + yellow/gold, Inter. Premium dark operations feel.
   ============================================================ */

:root {
  /* Brand */
  --black: #050505;
  --ink: #0a0a0b;
  --panel: #111113;
  --panel-2: #16161a;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --yellow: #f8d210;
  --gold: #d99a0d;
  --green: #10b981;
  --blue: #3b82f6;
  --red: #ef4444;

  /* Light surfaces for the alternating light sections */
  --cream: #faf9f5;
  --cream-2: #f2f0e9;
  --light-line: #e6e3da;

  /* Text */
  --white: #ffffff;
  --t-100: #f4f4f3;
  --t-300: #b9b9b6;
  --t-500: #86868a;
  --ink-100: #111114;
  --ink-300: #4b4b52;
  --ink-500: #6f6f78;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.82rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.075rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.4rem, 1.2rem + 4.8vw, 4.6rem);

  /* Spacing */
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; scroll-padding-top:90px; }
body {
  font-family:var(--font);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--t-100);
  background:var(--black);
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; height:auto; }
ul[role=list] { list-style:none; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
h1,h2,h3,h4 { line-height:1.08; text-wrap:balance; letter-spacing:-0.02em; font-weight:700; font-family:var(--display); }
h1 { font-weight:700; }
p { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; border-radius:6px; }
::selection { background:var(--yellow); color:#000; }

.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:var(--text-sm); line-height:1;
  padding:.85rem 1.4rem; border-radius:var(--radius-full);
  border:1px solid transparent; white-space:nowrap;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  justify-content:center;
}
.btn--sm { padding:.6rem 1.05rem; font-size:var(--text-xs); }
.btn--lg { padding:1.05rem 1.8rem; font-size:var(--text-base); }
.btn--block { display:flex; width:100%; }
.btn--primary { background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#0a0a0a; box-shadow:0 8px 24px rgba(248,210,16,.22); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(248,210,16,.34); }
.btn--ghost { background:rgba(255,255,255,.04); color:var(--t-100); border-color:var(--line-strong); }
.btn--ghost:hover { background:rgba(255,255,255,.09); border-color:var(--yellow); transform:translateY(-2px); }
.btn--dark { background:#0a0a0a; color:#fff; border-color:rgba(0,0,0,.2); }
.btn--dark:hover { transform:translateY(-2px); background:#1a1a1a; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:1.1rem;
}
.eyebrow--dark { color:var(--gold); }
.grad { background:linear-gradient(135deg,var(--yellow) 0%,var(--gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* ---------- Ticker ---------- */
.ticker { background:var(--yellow); color:#0a0a0a; overflow:hidden; border-bottom:1px solid rgba(0,0,0,.15); }
.ticker__track { display:flex; align-items:center; gap:1.2rem; white-space:nowrap; padding:.5rem 0; font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; width:max-content; animation:scroll-x 38s linear infinite; }
.ticker .dot { opacity:.5; }
@keyframes scroll-x { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Header ---------- */
.header { position:sticky; top:0; z-index:100; background:rgba(5,5,5,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease), background .3s; }
.header.scrolled { background:rgba(5,5,5,.92); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.header__inner { display:flex; align-items:center; gap:1.5rem; padding-block:.85rem; }
.brand { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand__logo { width:44px; height:28px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.brand__text { font-weight:800; font-size:var(--text-sm); letter-spacing:-.01em; line-height:1.1; }
.brand__sub { display:block; font-weight:500; font-size:.72rem; color:var(--t-500); letter-spacing:.04em; text-transform:uppercase; }
.nav { display:flex; gap:1.6rem; margin-left:auto; }
.nav a { font-size:var(--text-sm); color:var(--t-300); font-weight:500; }
.nav a:hover { color:var(--yellow); }
.header__cta { display:flex; gap:.6rem; }
.nav__toggle { display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.nav__toggle span { width:22px; height:2px; background:var(--t-100); border-radius:2px; transition:.3s var(--ease); }
.nav__toggle[aria-expanded=true] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded=true] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded=true] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav { display:flex; flex-direction:column; gap:.4rem; padding:1rem clamp(1.1rem,4vw,2.5rem) 1.6rem; border-bottom:1px solid var(--line); background:rgba(5,5,5,.97); }
.mobile-nav a:not(.btn){ padding:.7rem 0; color:var(--t-300); font-weight:500; border-bottom:1px solid var(--line); }
.mobile-nav .btn { margin-top:.5rem; }

/* ---------- Sections ---------- */
.section { padding-block:clamp(3.5rem,8vw,6.5rem); position:relative; }
.section--dark { background:linear-gradient(180deg,#0a0a0c,#0c0c0f); border-block:1px solid var(--line); }
.section__head { max-width:780px; margin-bottom:clamp(2.2rem,5vw,3.5rem); }
.section__head h2 { font-size:var(--text-2xl); }
.section__lead { margin-top:1.1rem; font-size:var(--text-lg); color:var(--t-300); font-weight:400; max-width:64ch; }
.muted-head { color:var(--t-500); }

/* ---------- Hero ---------- */
.hero { position:relative; padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); overflow:hidden; }
.hero__glow { position:absolute; top:-30%; right:-10%; width:60vw; height:60vw; max-width:780px; max-height:780px; background:radial-gradient(circle, rgba(248,210,16,.16), rgba(217,154,13,.05) 45%, transparent 70%); filter:blur(20px); pointer-events:none; z-index:0; }
.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(2rem,5vw,4rem); }
.hero__copy h1 { font-size:var(--text-hero); font-weight:900; letter-spacing:-.03em; }
.hero__sub { margin-top:1.4rem; font-size:var(--text-lg); color:var(--t-300); font-weight:400; max-width:54ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__trust { margin-top:1.8rem; font-size:var(--text-sm); color:var(--t-500); max-width:52ch; padding-left:1rem; border-left:2px solid var(--gold); }

/* Ops panel */
.hero__panel { position:relative; }
.ops { background:linear-gradient(180deg,#101013,#0b0b0e); border:1px solid var(--line-strong); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.ops__bar { display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line); }
.ops__dots { display:flex; gap:6px; }
.ops__dots i { width:11px; height:11px; border-radius:50%; display:block; }
.ops__dots i:nth-child(1){ background:#ff5f57; } .ops__dots i:nth-child(2){ background:#febc2e; } .ops__dots i:nth-child(3){ background:#28c840; }
.ops__title { font-size:var(--text-xs); font-weight:600; color:var(--t-300); font-family:var(--mono); }
.ops__live { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.12em; color:var(--green); }
.ops__body { padding:.7rem; display:flex; flex-direction:column; gap:.45rem; }
.ticketrow { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.7rem .85rem; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid var(--line); }
.ticketrow__left { display:flex; align-items:center; gap:.6rem; min-width:0; }
.ticketrow__msg { font-size:var(--text-sm); color:var(--t-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticketrow__agent { font-size:.7rem; color:var(--t-500); font-family:var(--mono); white-space:nowrap; flex-shrink:0; }
.pill { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .55rem; border-radius:6px; white-space:nowrap; flex-shrink:0; }
.pill--alert { background:rgba(239,68,68,.16); color:#ff8b8b; }
.pill--warn { background:rgba(248,210,16,.16); color:var(--yellow); }
.pill--ok { background:rgba(16,185,129,.16); color:#4ade9f; }
.ticketrow--alert { border-color:rgba(239,68,68,.25); }
.ticketrow--ok { opacity:.72; }
.ops__foot { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.ops__foot div { padding:.85rem 1rem; text-align:center; border-right:1px solid var(--line); }
.ops__foot div:last-child { border-right:none; }
.ops__foot strong { display:block; font-size:var(--text-lg); color:var(--yellow); font-weight:800; }
.ops__foot span { font-size:.66rem; color:var(--t-500); text-transform:uppercase; letter-spacing:.08em; }

/* Tool logos */
.marquee-logos { position:relative; z-index:1; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; padding-top:2rem; border-top:1px solid var(--line); }
.marquee-logos > span { font-size:var(--text-xs); color:var(--t-500); text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.marquee-logos ul { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; }
.marquee-logos li { font-size:var(--text-sm); color:var(--t-300); font-weight:600; opacity:.7; }

/* ---------- Problem ---------- */
#problem { background:var(--cream); color:var(--ink-100); }
#problem .eyebrow--dark, #problem .section__head h2 { color:var(--ink-100); }
#problem .muted-head { color:var(--ink-500); }
#problem .section__lead { color:var(--ink-300); }
.msgcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem; }
.msgcard { display:block; padding:1.1rem 1.3rem; background:#fff; border:1px solid var(--light-line); border-left:3px solid var(--red); border-radius:12px; font-size:var(--text-base); font-weight:500; color:var(--ink-100); box-shadow:0 1px 2px rgba(0,0,0,.04); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.msgcard:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); }

/* ---------- Cards grid ---------- */
.grid { display:grid; gap:1.1rem; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--5 { grid-template-columns:repeat(5,1fr); }
.card { padding:1.6rem; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--radius); transition:transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.card:hover { transform:translateY(-4px); border-color:var(--gold); background:rgba(248,210,16,.04); }
.card__icon { width:46px; height:46px; margin-bottom:1rem; display:grid; place-items:center; border-radius:13px; background:linear-gradient(135deg,rgba(248,210,16,.16),rgba(217,154,13,.08)); border:1px solid rgba(248,210,16,.22); color:var(--yellow); }
.card__icon svg { width:24px; height:24px; }
.card { position:relative; }
.card--new { border-color:rgba(248,210,16,.4); background:linear-gradient(180deg,rgba(248,210,16,.06),rgba(255,255,255,.02)); }
.card__flag { position:absolute; top:1rem; right:1rem; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0a0a0a; background:linear-gradient(135deg,var(--yellow),var(--gold)); padding:.22rem .55rem; border-radius:var(--radius-full); }
.card h3 { font-size:var(--text-lg); margin-bottom:.5rem; }
.card p { font-size:var(--text-sm); color:var(--t-300); }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; counter-reset:step; }
.step { position:relative; padding:1.7rem 1.5rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.step__num { font-family:var(--mono); font-size:var(--text-xl); font-weight:700; color:var(--gold); display:block; margin-bottom:.8rem; }
.step h3 { font-size:var(--text-lg); margin-bottom:.5rem; }
.step p { font-size:var(--text-sm); color:var(--t-300); }

/* ---------- Triggers ---------- */
.section--triggers { background:var(--cream-2); color:var(--ink-100); }
.section--triggers .eyebrow--dark, .section--triggers h2 { color:var(--ink-100); }
.section--triggers .section__lead { color:var(--ink-300); }
.triggers { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.7rem; }
.triggers li { position:relative; padding:.95rem 1.1rem .95rem 2.6rem; background:#fff; border:1px solid var(--light-line); border-radius:11px; font-size:var(--text-sm); font-weight:500; color:var(--ink-100); }
.triggers li::before { content:"→"; position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--gold); font-weight:800; }

/* ---------- Who ---------- */
.who { padding:1.5rem 1.4rem; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--radius); border-top:3px solid var(--gold); }
.who h3 { font-size:var(--text-base); margin-bottom:.5rem; color:var(--yellow); }
.who p { font-size:var(--text-sm); color:var(--t-300); }

/* ---------- Pricing ---------- */
#pricing { background:var(--cream); color:var(--ink-100); }
#pricing .eyebrow--dark, #pricing h2, #pricing h3 { color:var(--ink-100); }
#pricing .section__lead { color:var(--ink-300); }
.grid--pricing { grid-template-columns:repeat(4,1fr); align-items:stretch; }
.price { position:relative; display:flex; flex-direction:column; padding:1.8rem 1.5rem; background:#fff; border:1px solid var(--light-line); border-radius:var(--radius-lg); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.price:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.1); }
.price header { margin-bottom:1.2rem; }
.price h3 { font-size:var(--text-lg); }
.price__amt { font-size:var(--text-2xl); font-weight:900; letter-spacing:-.03em; margin-top:.4rem; color:var(--ink-100); }
.price__amt span { font-size:var(--text-base); font-weight:600; color:var(--ink-500); }
.price__amt--text { font-size:var(--text-xl); }
.price header p { font-size:var(--text-sm); color:var(--ink-500); margin-top:.6rem; }
.price ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.5rem; flex:1; }
.price li { position:relative; padding-left:1.5rem; font-size:var(--text-sm); color:var(--ink-300); }
.price li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.price li.muted { color:var(--ink-500); font-style:italic; margin-top:.3rem; padding-top:.6rem; border-top:1px dashed var(--light-line); }
.price li.muted::before { content:"+"; color:var(--gold); }
.price--feature { background:linear-gradient(180deg,#0c0c0f,#16140a); border:1.5px solid var(--gold); color:var(--t-100); box-shadow:0 22px 55px rgba(0,0,0,.18); padding-top:2.6rem; }
.price--feature h3, .price--feature .price__amt { color:var(--white); }
.price--feature .price__amt span, .price--feature header p { color:var(--t-300); }
.price--feature li { color:var(--t-300); }
.price--feature li.muted { color:var(--t-500); border-top-color:var(--line); }
.price__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#0a0a0a; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.35rem .9rem; border-radius:var(--radius-full); white-space:nowrap; }
.price--custom { background:var(--cream-2); }

/* Interaction definition */
.interaction { margin-top:2.5rem; padding:clamp(1.6rem,4vw,2.5rem); background:#0a0a0c; border:1px solid var(--line); border-radius:var(--radius-lg); color:var(--t-100); }
.interaction__head h3 { color:#fff; font-size:var(--text-xl); margin-top:.3rem; }
.interaction > p { margin-top:1rem; font-size:var(--text-base); color:var(--t-300); max-width:70ch; }
.interaction > p strong { color:var(--yellow); }
.interaction__list { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.interaction__list li { padding:.5rem .9rem; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius-full); font-size:var(--text-xs); color:var(--t-300); }

/* ---------- Proof ---------- */
.proof { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.proof__copy { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; align-items:start; }
.proof__copy h2 { grid-column:1 / -1; font-size:var(--text-2xl); }
.proof__copy > p { grid-column:1 / -1; margin-top:.4rem; color:var(--t-300); font-size:var(--text-base); max-width:60ch; }
.proof__stats { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-content:start; }
.proof__stats div strong { display:block; font-size:var(--text-xl); color:var(--yellow); font-weight:800; }
.proof__stats div span { font-size:var(--text-sm); color:var(--t-500); }
.proof__functions { display:flex; flex-direction:column; gap:.55rem; padding:1.6rem; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--radius); }
.proof__functions li { position:relative; padding-left:1.6rem; font-size:var(--text-sm); color:var(--t-300); }
.proof__functions li::before { content:"\25CF"; position:absolute; left:0; color:var(--gold); font-size:.6rem; top:.35rem; }

/* ---------- Pilot + form ---------- */
.section--pilot { background:linear-gradient(180deg,#0a0a0c,#0d0d10); border-block:1px solid var(--line); }
.pilot { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.pilot__info h2 { font-size:var(--text-2xl); }
.pilot__lead { margin-top:1rem; color:var(--t-300); }
.pilot__includes { display:flex; flex-direction:column; gap:.6rem; margin-top:1.6rem; }
.pilot__includes li { position:relative; padding-left:1.7rem; font-size:var(--text-sm); color:var(--t-100); }
.pilot__includes li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.pilot__price { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.pilot__price > div:first-child strong { font-size:var(--text-2xl); font-weight:900; color:var(--yellow); }
.pilot__price > div:first-child span { color:var(--t-500); font-weight:600; }
.pilot__setup { font-size:var(--text-sm); color:var(--t-500); }
.pilot__bookbtn { margin-top:1.6rem; }

.formwrap { background:#fff; border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.4rem); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.form h3 { color:var(--ink-100); font-size:var(--text-xl); margin-bottom:1.4rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form label, .form__full { display:flex; flex-direction:column; gap:.4rem; font-size:var(--text-sm); font-weight:600; color:var(--ink-300); }
.form__full { margin-bottom:1rem; }
.form input, .form select, .form textarea {
  font-family:var(--font); font-size:var(--text-sm); font-weight:400; color:var(--ink-100);
  padding:.75rem .9rem; border:1px solid var(--light-line); border-radius:10px; background:#fafafa;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); width:100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,154,13,.15); background:#fff; }
.form textarea { resize:vertical; }
.form .btn { margin-top:.6rem; }
.form__fine { margin-top:.9rem; font-size:var(--text-xs); color:var(--ink-500); font-weight:400; text-align:center; }

.form-success { text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem; }
.form-success__icon { width:64px; height:64px; margin:0 auto 1.3rem; border-radius:50%; background:linear-gradient(135deg,var(--green),#0e9f6e); color:#fff; display:grid; place-items:center; font-size:1.8rem; font-weight:800; }
.form-success h3 { color:var(--ink-100); font-size:var(--text-xl); margin-bottom:.7rem; }
.form-success p { color:var(--ink-300); font-size:var(--text-base); max-width:46ch; margin:0 auto 1.6rem; }

/* ---------- FAQ ---------- */
#faq { background:var(--cream); color:var(--ink-100); }
#faq .eyebrow--dark, #faq h2 { color:var(--ink-100); }
.accordion { display:flex; flex-direction:column; gap:.7rem; max-width:840px; }
.acc { background:#fff; border:1px solid var(--light-line); border-radius:12px; overflow:hidden; }
.acc summary { list-style:none; cursor:pointer; padding:1.15rem 1.4rem; font-weight:600; font-size:var(--text-base); color:var(--ink-100); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; font-size:1.4rem; font-weight:400; color:var(--gold); transition:transform .25s var(--ease); flex-shrink:0; }
.acc[open] summary::after { transform:rotate(45deg); }
.acc p { padding:0 1.4rem 1.25rem; color:var(--ink-300); font-size:var(--text-sm); max-width:68ch; }

/* ---------- Final CTA ---------- */
.finalcta { background:linear-gradient(135deg,#0a0a0c,#15140c); text-align:center; }
.finalcta__inner { max-width:680px; margin-inline:auto; }
.finalcta h2 { font-size:var(--text-2xl); }
.finalcta p { margin-top:1rem; color:var(--t-300); font-size:var(--text-lg); }
.finalcta__actions { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2rem; }

/* ---------- Footer ---------- */
.footer { background:#070708; border-top:1px solid var(--line); padding-top:clamp(2.5rem,5vw,3.5rem); }
.footer__inner { display:grid; grid-template-columns:1.3fr 1.7fr; gap:clamp(1.5rem,4vw,3rem); padding-bottom:2.5rem; }
.footer__brand p { margin-top:1rem; font-size:var(--text-sm); color:var(--t-500); max-width:38ch; }
.brand--footer { display:inline-block; }
.brand__lockup { width:auto; height:84px; max-width:200px; object-fit:contain; display:block; }
.footer__links { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer__links h4 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--t-500); margin-bottom:.9rem; }
.footer__links a { display:block; font-size:var(--text-sm); color:var(--t-300); padding:.3rem 0; }
.footer__links a:hover { color:var(--yellow); }
.footer__bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.4rem; border-top:1px solid var(--line); font-size:var(--text-xs); color:var(--t-500); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:90; display:none; gap:.6rem; padding:.7rem clamp(1rem,4vw,1.5rem); background:rgba(5,5,5,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line-strong); }
.sticky-cta .btn { flex:1; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }
.stagger > * { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > * { opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:.04s; }
.stagger.in > *:nth-child(2){ transition-delay:.09s; }
.stagger.in > *:nth-child(3){ transition-delay:.14s; }
.stagger.in > *:nth-child(4){ transition-delay:.19s; }
.stagger.in > *:nth-child(5){ transition-delay:.24s; }
.stagger.in > *:nth-child(6){ transition-delay:.29s; }
.stagger.in > *:nth-child(7){ transition-delay:.34s; }
.stagger.in > *:nth-child(8){ transition-delay:.39s; }

/* ====================================================================
   NEW COMPONENTS — animations, interactions, trust & conversion
   ==================================================================== */

/* ---- Button shine + active press ---- */
.btn--shine { position:relative; overflow:hidden; }
.btn--shine::after {
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn--shine:hover::after { animation:btnShine 1.05s var(--ease); }
@keyframes btnShine { from { left:-130%; } to { left:160%; } }
.btn:active { transform:translateY(0) scale(.97); }

/* ---- Tick marks ---- */
.tick { display:inline-grid; place-items:center; width:1.15em; height:1.15em; margin-right:.15rem;
  border-radius:50%; background:rgba(16,185,129,.15); color:var(--green); font-size:.72em; font-weight:800; }

/* ---- Hero trust row + emphasised sub ---- */
.hero__trustrow { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.4rem; margin-top:1.6rem; }
.hero__trustrow span { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-xs); color:var(--t-300); font-weight:600; }
.hero__trustrow span svg { width:15px; height:15px; color:var(--green); flex:none; }
.hero__sub strong { color:var(--t-100); font-weight:700; }

/* ---- Live ops ticket stream ---- */
.ops__livetxt { font-variant-numeric:tabular-nums; }
.ops__ticket {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.6rem .65rem;
  padding:.6rem .7rem; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025);
  opacity:0; transform:translateY(8px) scale(.985);
  animation:ticketIn .5s var(--ease) forwards;
}
@keyframes ticketIn { to { opacity:1; transform:none; } }
.ops__ticket.leaving { animation:ticketOut .45s var(--ease) forwards; }
@keyframes ticketOut { to { opacity:0; transform:translateY(-7px); margin-bottom:-2.7rem; } }
.ops__ticket .tdot { width:9px; height:9px; border-radius:50%; flex:none; }
.ops__ticket .tmsg { min-width:0; }
.ops__ticket .tmsg b { display:block; font-size:var(--text-xs); color:var(--t-100); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops__ticket .tmsg span { font-size:.66rem; color:var(--t-500); font-family:var(--mono); }
.ops__ticket .ttimer { font-size:.7rem; font-weight:700; font-family:var(--mono); color:var(--t-300); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ops__ticket[data-state="escalation"] .tdot { background:#febc2e; box-shadow:0 0 0 3px rgba(254,188,46,.16); }
.ops__ticket[data-state="human"] .tdot { background:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.16); }
.ops__ticket[data-state="churn"] .tdot { background:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.16); }
.ops__ticket[data-state="resolved"] { background:rgba(16,185,129,.06); border-color:rgba(16,185,129,.22); }
.ops__ticket[data-state="resolved"] .tdot { background:var(--green); }
.ops__ticket[data-state="resolved"] .ttimer { color:var(--green); }

/* ---- Cost stat (problem section) ---- */
.coststat { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.coststat__item { padding:1.6rem 1.4rem; background:#fff; border:1px solid var(--light-line); border-radius:var(--radius); box-shadow:0 14px 34px rgba(10,10,15,.05); }
.coststat__item strong { display:block; font-size:var(--text-2xl); font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--gold),#b87d05); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.coststat__item span { display:block; margin-top:.7rem; font-size:var(--text-sm); color:var(--ink-300); line-height:1.5; }
.coststat__note { margin-top:1.8rem; font-size:var(--text-base); color:var(--ink-100); font-weight:600; max-width:62ch; }

/* ---- Steps hover connector ---- */
.step::before { transition:background .3s var(--ease), transform .3s var(--ease); }
.step:hover::before { background:var(--yellow); transform:scale(1.12); }

/* ---- Cost vs hire comparison (in #pricing, light) ---- */
.compare { margin-top:clamp(2.4rem,5vw,3.6rem); padding:clamp(1.6rem,4vw,2.6rem); background:#fff; border:1px solid var(--light-line); border-radius:var(--radius-lg); box-shadow:0 24px 60px rgba(10,10,15,.07); }
.compare__head h3 { font-size:var(--text-xl); color:var(--ink-100); }
.compare__head p { margin-top:.5rem; font-size:var(--text-sm); color:var(--ink-300); }
.compare__tool { margin-top:1.8rem; }
.compare__slider { display:flex; flex-direction:column; gap:.7rem; font-size:var(--text-sm); color:var(--ink-300); font-weight:600; }
.compare__slider strong { color:var(--ink-100); font-weight:800; }
.compare__slider input[type="range"] {
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--fill,40%),var(--cream-2) var(--fill,40%),var(--cream-2) 100%);
  cursor:pointer; border:1px solid var(--light-line);
}
.compare__slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#0a0a0a; border:3px solid var(--yellow); box-shadow:0 3px 10px rgba(0,0,0,.25); cursor:pointer; }
.compare__slider input[type="range"]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#0a0a0a; border:3px solid var(--yellow); cursor:pointer; }
.compare__cards { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:1.2rem; margin-top:1.8rem; }
.compare__card { position:relative; padding:1.4rem; border-radius:var(--radius); border:1px solid var(--light-line); }
.compare__card h4 { font-size:var(--text-base); color:var(--ink-100); font-weight:700; }
.compare__card ul { margin-top:.9rem; display:flex; flex-direction:column; gap:.5rem; }
.compare__card li { position:relative; padding-left:1.5rem; font-size:var(--text-sm); color:var(--ink-300); }
.compare__card--bad { background:#fbf4f4; border-color:#f0dada; }
.compare__card--bad li::before { content:"✕"; position:absolute; left:0; color:var(--red); font-weight:800; font-size:.8em; top:.05em; }
.compare__card--good { background:linear-gradient(180deg,#fffdf2,#fff); border-color:var(--gold); box-shadow:0 12px 34px rgba(217,154,13,.16); }
.compare__card--good li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.compare__amt { margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--light-line); font-size:var(--text-xl); font-weight:900; color:var(--ink-100); font-variant-numeric:tabular-nums; }
.compare__amt span { display:block; font-size:var(--text-xs); font-weight:600; color:var(--ink-500); }
.compare__tag { display:inline-block; margin-bottom:.6rem; padding:.25rem .7rem; border-radius:99px; background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#0a0a0a; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.compare__vs { align-self:center; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--cream-2); color:var(--ink-300); font-weight:800; font-size:var(--text-sm); }
.compare__save { margin-top:1.6rem; text-align:center; font-size:var(--text-base); color:var(--ink-300); }
.compare__save strong { color:var(--green); font-weight:900; font-size:var(--text-lg); font-variant-numeric:tabular-nums; }
.compare__save span { font-size:var(--text-xs); color:var(--ink-500); }

/* ---- Guarantee / risk reversal ---- */
.guarantee { background:linear-gradient(180deg,#0c0c0f,#0a0a0c); border-block:1px solid var(--line); }
.guarantee__inner { display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,4vw,2.8rem); align-items:center;
  padding:clamp(1.8rem,4vw,2.8rem); background:linear-gradient(135deg,rgba(248,210,16,.07),rgba(255,255,255,.02)); border:1px solid var(--line-strong); border-radius:var(--radius-lg); }
.guarantee__badge { width:clamp(72px,10vw,104px); height:clamp(72px,10vw,104px); border-radius:24px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--yellow),var(--gold)); color:#0a0a0a; box-shadow:0 16px 40px rgba(248,210,16,.28); }
.guarantee__badge svg { width:52%; height:52%; }
.guarantee__copy h2 { font-size:var(--text-2xl); margin-top:.5rem; }
.guarantee__copy p { margin-top:1rem; color:var(--t-300); font-size:var(--text-base); max-width:62ch; }
.guarantee__points { display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; margin:1.5rem 0 1.8rem; }
.guarantee__points span { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-sm); color:var(--t-100); font-weight:600; }

/* ---- Sample weekly report ---- */
.report { background:linear-gradient(180deg,#101013,#0b0b0e); border:1px solid var(--line-strong); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.report__bar { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.1rem; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line); }
.report__title { font-size:var(--text-sm); font-weight:700; color:var(--t-100); }
.report__tag { margin-left:auto; padding:.18rem .6rem; border-radius:99px; background:rgba(248,210,16,.14); color:var(--yellow); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.report__grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.report__kpi { padding:1rem .6rem; text-align:center; border-right:1px solid var(--line); }
.report__kpi:last-child { border-right:none; }
.report__kpi strong { display:block; font-size:var(--text-xl); font-weight:900; line-height:1; }
.report__kpi span { display:block; margin-top:.35rem; font-size:.62rem; color:var(--t-500); text-transform:uppercase; letter-spacing:.07em; }
.report__bars { padding:1.1rem; display:flex; flex-direction:column; gap:.75rem; }
.report__row { display:grid; grid-template-columns:1fr 2.1fr auto; align-items:center; gap:.8rem; }
.report__row > span { font-size:var(--text-xs); color:var(--t-300); }
.report__row .bar { height:9px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.report__row .bar i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--yellow)); transition:width 1.1s var(--ease); }
.report.in .bar i { width:var(--w); }
.report__row b { font-size:var(--text-xs); color:var(--t-100); font-weight:800; font-variant-numeric:tabular-nums; min-width:1.8ch; text-align:right; }
.report__note { padding:0 1.1rem 1.2rem; font-size:var(--text-xs); color:var(--gold); font-weight:600; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__inner { grid-template-columns:1fr; }
  .hero__panel { order:2; }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .grid--5 { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .grid--pricing { grid-template-columns:repeat(2,1fr); }
  .proof { grid-template-columns:1fr; }
  .pilot { grid-template-columns:1fr; }
  .coststat { grid-template-columns:repeat(3,1fr); }
  .compare__cards { grid-template-columns:1fr; }
  .compare__vs { justify-self:center; }
  .guarantee__inner { grid-template-columns:1fr; text-align:left; }
}
@media (max-width:760px){
  .nav, .header__cta { display:none; }
  .nav__toggle { display:flex; }
  .sticky-cta { display:flex; }
  .footer__inner { grid-template-columns:1fr; }
  .form__row { grid-template-columns:1fr; }
  .finalcta__actions .btn, .hero__actions .btn { flex:1; }
}
@media (max-width:520px){
  .grid--3, .grid--5, .grid--pricing, .steps { grid-template-columns:1fr; }
  .hero__actions, .finalcta__actions { flex-direction:column; align-items:stretch; }
  .hero__actions .btn, .finalcta__actions .btn { flex:none; width:100%; white-space:normal; }
  .ops__foot strong { font-size:var(--text-base); }
  .coststat { grid-template-columns:1fr; }
  .proof__copy { grid-template-columns:1fr; }
  .report__grid { grid-template-columns:repeat(2,1fr); }
  .report__kpi:nth-child(2) { border-right:none; }
  .report__row { grid-template-columns:1fr 1.6fr auto; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .ticker__track { animation:none; }
  .reveal { opacity:1; transform:none; }
  .stagger > * { opacity:1!important; transform:none!important; }
  .btn--shine:hover::after { animation:none; }
  .report__row .bar i { transition:none; }
}