/* ============================================================
   KIRBY PROJECTS — MARKETING SITE
   Tokens lifted from the Design Guide v2.0
   ============================================================ */
:root{
  /* Deep Teal scale */
  --teal-50:#f0f5f7; --teal-100:#d8e6eb; --teal-200:#adc9d3; --teal-300:#7ca6b6;
  --teal-400:#4d8294; --teal-500:#2a6577; --teal-600:#0b4f6c; --teal-700:#093f56;
  --teal-800:#072e40; --teal-900:#051f2b; --teal-950:#02121a;
  /* Vibrant Teal */
  --aqua-50:#effbfa; --aqua-100:#cdf3f0; --aqua-200:#9fe6e1; --aqua-300:#6dd3cd;
  --aqua-400:#3fb9b3; --aqua-500:#20a39e; --aqua-600:#15807c; --aqua-700:#106563; --aqua-800:#0c4c4b;
  /* Coral */
  --coral-50:#fef2f2; --coral-100:#fde0df; --coral-200:#fbbeba; --coral-300:#f79590;
  --coral-400:#f37571; --coral-500:#ef5b5b; --coral-600:#d83c3c; --coral-700:#b32a2a; --coral-800:#871d1d;
  /* Warm neutral */
  --sand-50:#faf7f3; --sand-100:#f5f0eb; --sand-200:#ebe3d8; --sand-300:#d8ccba; --sand-400:#b8a890;
  --ink-100:#efeae3; --ink-200:#d4cec6; --ink-300:#9b9590; --ink-400:#6b6661;
  --ink-500:#45413e; --ink-600:#2c2a28; --ink-700:#1a1a2e; --ink-900:#0a0a14;
  /* App sidebar (from screenshots) — deep desaturated navy */
  --nav-900:#0c1622; --nav-850:#101e2c; --nav-800:#15293a;

  --success:#16956a; --warning:#d28a17; --danger:#c0392b; --info:#2d6cdf;

  /* Semantic surfaces (light default) */
  --bg:var(--sand-50);
  --bg-soft:var(--sand-100);
  --bg-elev:#ffffff;
  --border:#e6dccd;
  --border-soft:#efe7d8;
  --text:var(--ink-700);
  --text-mute:var(--ink-400);
  --text-dim:var(--ink-300);

  /* Accent (tweakable) — drives CTAs / highlights */
  --accent:var(--teal-600);
  --accent-strong:var(--teal-700);
  --accent-soft:var(--teal-50);
  --accent-contrast:#ffffff;

  --r-sm:7px; --r-md:11px; --r-lg:16px; --r-xl:22px; --r-2xl:30px;
  --shadow-1:0 1px 2px rgba(7,46,64,.06), 0 1px 1px rgba(7,46,64,.04);
  --shadow-2:0 14px 40px -16px rgba(7,46,64,.22), 0 2px 8px rgba(7,46,64,.06);
  --shadow-3:0 40px 90px -36px rgba(7,46,64,.45);
  --shadow-float:0 30px 70px -28px rgba(7,46,64,.40);

  --font-sans:"Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, Menlo, monospace;
  --font-serif:"Instrument Serif", Georgia, serif;

  --maxw:1200px;
  --gut:40px;
}

/* Accent = Coral variant */
:root[data-accent="coral"]{
  --accent:var(--coral-500);
  --accent-strong:var(--coral-600);
  --accent-soft:var(--coral-50);
  --accent-contrast:#ffffff;
}

/* Dark theme */
:root[data-theme="dark"]{
  --bg:#0b1620;
  --bg-soft:#0f1d28;
  --bg-elev:#13212e;
  --border:#22323f;
  --border-soft:#1b2935;
  --text:#eef3f4;
  --text-mute:#9fb0b8;
  --text-dim:#65787f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; font-family:var(--font-sans);
  background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.55;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:500}
.eyebrow.dim{color:var(--text-dim)}
.serif-em{font-family:var(--font-serif); font-style:italic; font-weight:400}

/* ============================== NAV ============================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gut);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, padding .25s;
}
.nav.scrolled{border-bottom-color:var(--border); background:color-mix(in srgb, var(--bg) 92%, transparent)}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em}
.nav .brand .glyph{width:30px; height:30px}
.nav .brand small{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; color:var(--text-mute); font-weight:500; text-transform:uppercase; margin-top:1px}
.nav .links{display:flex; align-items:center; gap:4px}
.nav .links a{padding:8px 12px; border-radius:8px; font-size:14px; color:var(--text-mute); transition:color .15s, background .15s}
.nav .links a:hover{color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent)}
.nav .cta-group{display:flex; align-items:center; gap:8px}

/* ============================== BUTTONS ============================== */
.btn{
  --b-bg:var(--accent); --b-fg:var(--accent-contrast);
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; font-size:15px; letter-spacing:-.005em;
  padding:11px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  background:var(--b-bg); color:var(--b-fg);
  transition:transform .14s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 60%, #000 40%), 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn.ghost:hover{border-color:var(--text-mute); background:color-mix(in srgb, var(--text) 5%, transparent)}
.btn.light{background:#fff; color:var(--ink-700); border-color:transparent}
.btn.light:hover{background:#f3efe9}
.btn.on-dark.ghost{color:#fff; border-color:rgba(255,255,255,.25)}
.btn.on-dark.ghost:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08)}
.btn.sm{padding:8px 13px; font-size:13.5px; border-radius:8px}
.btn.lg{padding:14px 24px; font-size:16px; border-radius:12px}
.btn .ico{width:16px; height:16px; flex-shrink:0}

/* ============================== SECTION SCAFFOLD ============================== */
section{position:relative}
.band{padding:104px 0}
.band.tight{padding:72px 0}
.sec-intro{max-width:660px}
.sec-intro.center{margin:0 auto; text-align:center}
.sec-title{
  font-weight:500; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(30px,4vw,46px); margin:14px 0 0; color:var(--text);
}
.sec-title em{font-family:var(--font-serif); font-style:italic; color:var(--accent); letter-spacing:-.01em}
.sec-sub{font-size:18px; color:var(--text-mute); margin:18px 0 0; line-height:1.55}

/* Dark band */
.band.dark{
  background:
    radial-gradient(120% 90% at 85% 5%, rgba(32,163,158,.16), transparent 55%),
    radial-gradient(90% 80% at 5% 100%, rgba(11,79,108,.55), transparent 60%),
    var(--nav-900);
  color:#eaf1f2;
}
.band.dark .sec-title{color:#fff}
.band.dark .sec-sub{color:rgba(234,241,242,.7)}
.band.dark .eyebrow{color:var(--aqua-300)}

/* ============================== HERO ============================== */
.hero{padding:148px 0 80px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--aqua-500) 16%, transparent), transparent 60%),
    radial-gradient(50% 45% at 0% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center}
.hero h1{
  font-weight:400; letter-spacing:-.045em; line-height:.97; margin:22px 0 0;
  font-size:clamp(44px,5.6vw,72px); color:var(--text);
}
.hero h1 em{font-family:var(--font-serif); font-style:italic; color:var(--accent)}
/* Plan / Build / Check trio — equal weight, distinct flair per word */
.hero h1 .flare-plan{font-weight:500}
.hero h1 .flare-build{font-weight:700; letter-spacing:-.05em}
.hero h1 .flare-check{font-family:var(--font-serif); font-style:italic; color:var(--accent)}
.brand-tag{display:inline-flex; gap:.32em; align-items:baseline}
.brand-tag .fp{font-weight:600}
.brand-tag .fb{font-weight:800}
.brand-tag .fc{font-style:italic; color:var(--accent)}
.brand-tag .sep{opacity:.45; font-weight:400}
/* Final CTA flare trio */
.cta-final h2 .flare-plan{font-weight:500}
.cta-final h2 .flare-build{font-weight:700; letter-spacing:-.05em}
.hero .lede{font-size:20px; line-height:1.5; color:var(--text-mute); margin:24px 0 0; max-width:540px}
.hero .actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero .reassure{display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; font-size:13.5px; color:var(--text-mute)}
.hero .reassure span{display:inline-flex; align-items:center; gap:7px}
.hero .reassure svg{width:15px; height:15px; color:var(--success)}

.hero-pills{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  padding:5px 11px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg-elev); color:var(--text-mute);
}
.tag .dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* ============================== APP MOCKUP (recreated UI) ============================== */
.mock{
  --m-bg:var(--sand-100);
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--shadow-float);
}
.mock.float{transform:perspective(1600px) rotateY(-9deg) rotateX(2.5deg)}
.mock-chrome{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#0c1622; border-bottom:1px solid #1b2935}
.mock-chrome .dots{display:flex; gap:6px}
.mock-chrome .dots i{width:11px; height:11px; border-radius:50%; background:#2a3a47}
.mock-chrome .pathbar{margin-left:8px; font-family:var(--font-mono); font-size:11px; color:#6c828d; letter-spacing:.03em}
.mock-body{display:grid; grid-template-columns:188px 1fr; background:var(--m-bg)}

/* App sidebar */
.app-side{background:var(--nav-900); padding:16px 14px; display:flex; flex-direction:column; gap:3px; min-height:430px}
.app-side .logo{display:flex; align-items:center; gap:9px; padding:2px 4px 14px}
.app-side .logo .glyph{width:26px; height:26px}
.app-side .logo b{color:#fff; font-size:14px; font-weight:600; letter-spacing:.01em}
.app-side .logo small{display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:.2em; color:#5a6f7a; text-transform:uppercase}
.app-side .ws{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; background:#152634; margin-bottom:12px}
.app-side .ws .ic{width:24px; height:24px; border-radius:6px; background:#0c1622; display:grid; place-items:center; color:var(--aqua-300)}
.app-side .ws b{color:#e8eef0; font-size:11.5px; font-weight:600; display:block; line-height:1.2}
.app-side .ws small{font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; color:#5a6f7a}
.app-side .grouplbl{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em; color:#4d626d; text-transform:uppercase; margin:10px 6px 5px}
.app-side a{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; color:#9fb2bc; font-size:12.5px; transition:background .15s,color .15s}
.app-side a svg{width:15px; height:15px}
.app-side a.active{background:var(--accent); color:#fff}
.app-side a.active svg{color:#fff}

/* App main */
.app-main{padding:20px 22px; min-width:0}
.app-eyebrow{font-family:var(--font-mono); font-size:9px; letter-spacing:.18em; color:var(--text-dim); text-transform:uppercase}
.app-h{font-size:24px; font-weight:600; letter-spacing:-.02em; margin:3px 0 0; color:var(--ink-700)}
.app-desc{font-size:12px; color:var(--text-mute); margin:4px 0 0}

.kpi-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0}
.kpi{background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:12px 13px}
.kpi .v{font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--ink-700)}
.kpi .l{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.13em; color:var(--text-mute); text-transform:uppercase; margin-top:3px}
.kpi .l small{display:block; color:var(--text-dim); letter-spacing:.05em; margin-top:2px}

/* Portfolio table */
.ptable{background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.ptable .thead, .ptable .trow{display:grid; grid-template-columns:1.6fr .5fr .8fr .8fr 1.4fr; align-items:center}
.ptable .thead{padding:9px 14px; border-bottom:1px solid var(--border-soft); background:var(--sand-50)}
.ptable .thead span{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.13em; color:var(--text-mute); text-transform:uppercase}
.ptable .trow{padding:10px 14px; border-bottom:1px solid var(--border-soft); font-size:12px}
.ptable .trow:last-child{border-bottom:none}
.ptable .trow .pname{font-weight:500; color:var(--ink-700)}
.ptable .trow .prog{color:var(--ink-500); font-variant-numeric:tabular-nums}
.health{width:9px; height:9px; border-radius:50%; display:inline-block}
.health.ok{background:var(--success)} .health.risk{background:var(--warning)} .health.over{background:var(--coral-500)}
.gantt{height:7px; border-radius:999px; background:var(--sand-200); position:relative; overflow:hidden}
.gantt i{position:absolute; top:0; height:100%; border-radius:999px; background:color-mix(in srgb,var(--aqua-500) 55%, #fff)}
.gantt i.fill{background:var(--aqua-500)}

/* Quality stage board */
.stageboard{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:14px}
.stage{background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:11px; min-height:150px; display:flex; flex-direction:column; gap:9px}
.stage .num{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); display:grid; place-items:center; font-size:9px; font-weight:600; font-family:var(--font-mono)}
.stage .sh{font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; color:var(--text-mute); text-transform:uppercase; line-height:1.3}
.stage .chip{background:var(--sand-100); border:1px solid var(--border-soft); border-radius:6px; padding:6px 7px; font-size:9.5px; color:var(--ink-500)}
.stage .chip b{display:block; font-weight:500; color:var(--ink-700); font-size:10px}
.stage .chip.done{border-color:#bfe7d0; background:#eaf7f0}
.stage .chip .mini{display:flex; align-items:center; gap:4px; margin-top:3px; font-family:var(--font-mono); font-size:7.5px; letter-spacing:.05em; color:var(--text-mute)}
.dotpip{width:5px;height:5px;border-radius:50%;display:inline-block}

/* Generic app badge */
.abadge{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; padding:2px 7px; border-radius:999px; background:var(--sand-100); border:1px solid var(--border); color:var(--ink-500)}
.abadge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.abadge.ok{background:#e3f5ec;color:var(--success);border-color:#bfe7d0}
.abadge.warn{background:#fbf0d8;color:var(--warning);border-color:#f1dba0}
.abadge.info{background:#e0ecfb;color:var(--info);border-color:#c0d6f3}
.abadge.brand{background:var(--accent-soft);color:var(--accent-strong);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}

/* ============================== TRUST BAND ============================== */
.trust{display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center; opacity:.9}
.trust .logo-item{display:flex; align-items:center; gap:9px; color:var(--text-mute); font-weight:600; font-size:17px; letter-spacing:-.01em; filter:grayscale(1); opacity:.7; transition:opacity .2s}
.trust .logo-item:hover{opacity:1}
.trust .logo-item svg{width:22px; height:22px}

/* ============================== FEATURE ROWS ============================== */
.feature{display:grid; grid-template-columns:1fr 1.12fr; gap:64px; align-items:center; padding:64px 0}
.feature.flip .feat-copy{order:2}
.feature.flip .feat-visual{order:1}
.feat-copy h3{font-size:clamp(26px,3vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.08; margin:16px 0 0; color:var(--text)}
.feat-copy h3 em{font-family:var(--font-serif); font-style:italic; color:var(--accent)}
.feat-copy p.lead{font-size:18px; color:var(--text-mute); margin:16px 0 0; line-height:1.55}
.benefits{display:flex; flex-direction:column; gap:14px; margin:26px 0 0}
.benefit{display:flex; gap:13px; align-items:flex-start}
.benefit .bi{width:30px; height:30px; border-radius:8px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; flex-shrink:0}
.benefit .bi svg{width:16px; height:16px}
.benefit b{font-weight:500; font-size:15px; color:var(--text)}
.benefit span{display:block; font-size:14px; color:var(--text-mute); margin-top:1px}
.feat-link{display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-weight:500; font-size:15px; color:var(--accent); }
.feat-link svg{width:15px;height:15px; transition:transform .15s}
.feat-link:hover svg{transform:translateX(3px)}

/* ============================== MODULE GRID ============================== */
.mod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px}
.mod-card{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.mod-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.mod-card .mi{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; margin-bottom:16px}
.mod-card .mi svg{width:20px; height:20px}
.mod-card h4{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px}
.mod-card p{font-size:14px; color:var(--text-mute); margin:0; line-height:1.5}

/* ============================== STATS ============================== */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); overflow:hidden}
.stat{padding:34px 28px; background:transparent}
.stat .v{font-size:clamp(38px,5vw,56px); font-weight:400; letter-spacing:-.04em; line-height:1; color:#fff}
.stat .v em{font-family:var(--font-serif); font-style:italic; color:var(--aqua-300)}
.stat .l{font-size:14px; color:rgba(234,241,242,.62); margin-top:10px}

/* ============================== WORKFLOW ============================== */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; counter-reset:step}
.flow-step{position:relative; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elev)}
.flow-step .n{font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.1em}
.flow-step h4{font-size:18px; font-weight:600; letter-spacing:-.01em; margin:12px 0 8px}
.flow-step p{font-size:14px; color:var(--text-mute); margin:0; line-height:1.5}
.flow-step .arrow{position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-dim); z-index:2; background:var(--bg); border-radius:50%}

/* ============================== TESTIMONIAL ============================== */
.quote-wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:center}
.bigquote{font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1.22; letter-spacing:-.01em; color:#fff}
.bigquote::before{content:"\201C"; color:var(--aqua-300)}
.quote-by{display:flex; align-items:center; gap:14px; margin-top:30px}
.quote-by .av{width:48px; height:48px; border-radius:50%; background:var(--aqua-300); color:var(--teal-900); display:grid; place-items:center; font-weight:600}
.quote-by b{color:#fff; font-weight:500; display:block}
.quote-by span{color:rgba(234,241,242,.6); font-size:14px}
.case-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:28px}
.case-card .cr{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.case-card .cr:last-child{border-bottom:none}
.case-card .cr .v{font-size:30px; font-weight:400; letter-spacing:-.03em; color:#fff; font-family:var(--font-serif); font-style:italic}
.case-card .cr .l{font-size:13px; color:rgba(234,241,242,.62); text-align:right; max-width:150px}

/* ============================== PRICING ============================== */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; align-items:stretch}
.price-card{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:30px; display:flex; flex-direction:column;
}
.price-card.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-2); position:relative}
.price-card .ribbon{position:absolute; top:-12px; left:30px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--accent); color:var(--accent-contrast); padding:4px 10px; border-radius:999px}
.price-card .pname{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute)}
.price-card .amt{font-size:46px; font-weight:500; letter-spacing:-.035em; margin:14px 0 0; color:var(--text)}
.price-card .amt span{font-size:16px; font-weight:400; color:var(--text-mute); letter-spacing:0}
.price-card .pdesc{font-size:14px; color:var(--text-mute); margin:8px 0 22px; min-height:40px}
.price-card .btn{width:100%; justify-content:center; margin-bottom:22px}
.price-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.price-card li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text)}
.price-card li svg{width:16px; height:16px; color:var(--accent); flex-shrink:0; margin-top:2px}
.price-card li.muted{color:var(--text-dim)}
.price-card li.muted svg{color:var(--text-dim)}

/* --- 4-tier layout overrides --- */
.price-grid{grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px}
.price-card{padding:26px 24px}
.price-card .amt{font-size:38px; margin-top:10px}
.price-card .amt .per{font-size:15px; font-weight:400; color:var(--text-mute); letter-spacing:0}
.price-card .meta{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-mute); margin-top:12px}
.price-card .meta .sep{width:3px; height:3px; border-radius:50%; background:var(--text-dim)}
.price-card .billnote{font-size:12px; color:var(--text-dim); margin-top:5px; min-height:16px}
.price-card .pdesc{min-height:34px; margin-top:14px}
.price-card .incl{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:13px}

/* Billing toggle */
.bill-toggle{display:inline-flex; align-items:center; gap:3px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:4px; margin-top:26px}
.bill-toggle button{font:500 13px/1 var(--font-sans); border:0; background:transparent; color:var(--text-mute); padding:10px 20px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .18s, color .18s}
.bill-toggle button.on{background:var(--accent); color:var(--accent-contrast)}
.bill-toggle .save{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:2px 6px; border-radius:5px; background:var(--accent-soft); color:var(--accent-strong)}
.bill-toggle button.on .save{background:rgba(255,255,255,.22); color:var(--accent-contrast)}

/* Competitor anchor line */
.price-anchor{text-align:center; margin-top:30px; font-size:14.5px; color:var(--text-mute); max-width:760px; margin-left:auto; margin-right:auto; line-height:1.6}
.price-anchor b{color:var(--text); font-weight:600}

/* Storage note */
.storage-note{display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; text-align:center; margin-top:26px; padding:18px 24px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elev); font-size:14px; color:var(--text-mute)}
.storage-note svg{width:18px; height:18px; color:var(--accent); flex-shrink:0}
.storage-note b{color:var(--text); font-weight:600}

/* Comparison matrix */
.cmp-wrap{margin-top:60px; overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elev)}
.cmp{width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px}
.cmp th, .cmp td{padding:13px 18px; text-align:center; border-bottom:1px solid var(--border-soft)}
.cmp thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--text-mute); position:sticky; top:0; background:var(--bg-elev)}
.cmp thead th .pr{display:block; font-family:var(--font-sans); font-size:12.5px; color:var(--text-dim); letter-spacing:0; text-transform:none; margin-top:3px}
.cmp thead th.hi{color:var(--accent)}
.cmp th.feat, .cmp td.feat{text-align:left; color:var(--text); font-weight:500; width:34%}
.cmp td{color:var(--text-mute)}
.cmp td.hi{background:var(--accent-soft)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--accent); font-weight:600}
.cmp .no{color:var(--text-dim)}
.cmp .grouprow td{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); text-align:left; background:var(--bg-soft)}

@media (max-width:980px){
  .price-grid{grid-template-columns:1fr 1fr}
}

/* ============================== FAQ ============================== */
.faq{max-width:760px; margin:48px auto 0}
.faq details{border-bottom:1px solid var(--border); padding:6px 0}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  cursor:pointer; list-style:none; padding:20px 4px; font-size:18px; font-weight:500; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:22px; height:22px; flex-shrink:0; color:var(--accent); transition:transform .2s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 4px 22px; font-size:15.5px; color:var(--text-mute); line-height:1.6; max-width:660px}

/* ============================== FINAL CTA ============================== */
.cta-final{text-align:center; padding:34px 0}
.cta-final h2{font-weight:400; letter-spacing:-.04em; line-height:1; font-size:clamp(40px,6vw,76px); margin:0; color:#fff}
.cta-final h2 em{font-family:var(--font-serif); font-style:italic; color:var(--aqua-300)}
.cta-final p{font-size:19px; color:rgba(234,241,242,.7); margin:22px auto 0; max-width:520px}
.cta-final .actions{display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap}

/* ============================== FOOTER ============================== */
.footer{background:var(--nav-900); color:#9fb2bc; padding:72px 0 36px}
.footer .ftop{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid #1b2935}
.footer .brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; margin-bottom:16px}
.footer .brand .glyph{width:30px; height:30px}
.footer .fblurb{font-size:14px; color:#7d929d; max-width:280px; line-height:1.55}
.footer .fcol h5{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#5a6f7a; margin:0 0 16px}
.footer .fcol a{display:block; font-size:14px; color:#9fb2bc; padding:6px 0; transition:color .15s}
.footer .fcol a:hover{color:#fff}
.footer .fbot{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color:#5a6f7a; flex-wrap:wrap; gap:12px}
.footer .fbot .made{font-family:var(--font-mono); letter-spacing:.04em}

/* ============================== MOTION ============================== */
/* Scroll progress bar */
#scrollprog{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--accent), var(--aqua-500)); z-index:70; transition:transform .08s linear; pointer-events:none}

/* Scroll-reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform}
.reveal.zoom{transform:translateY(26px) scale(.965)}
.reveal.from-right{transform:translateX(34px)}
.reveal.in{opacity:1; transform:none}

/* Staggered children */
.stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 70ms)}
.stagger.in > *{opacity:1; transform:none}

/* Hero entrance */
@keyframes heroRise{from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none}}
@keyframes heroMock{from{opacity:0; transform:translateY(38px) scale(.96)} to{opacity:1; transform:none}}
.hero-grid > div:first-child > *{opacity:0; animation:heroRise .9s cubic-bezier(.2,.75,.2,1) both}
.hero-grid > div:first-child > *:nth-child(1){animation-delay:.08s}
.hero-grid > div:first-child > *:nth-child(2){animation-delay:.18s}
.hero-grid > div:first-child > *:nth-child(3){animation-delay:.30s}
.hero-grid > div:first-child > *:nth-child(4){animation-delay:.42s}
.hero-grid > div:first-child > *:nth-child(5){animation-delay:.54s}
.hero .feat-visual{opacity:0; animation:heroMock 1.05s cubic-bezier(.2,.75,.2,1) .34s both}

/* Continuous float on the hero mockup */
@keyframes mockFloat{
  0%,100%{transform:perspective(1600px) rotateY(-9deg) rotateX(2.5deg) translateY(0)}
  50%{transform:perspective(1600px) rotateY(-9deg) rotateX(2.5deg) translateY(-13px)}
}
.hero .mock.float{animation:mockFloat 6.5s ease-in-out infinite; animation-delay:1.2s}

/* Live pulsing status dot */
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.tag .dot{animation:pulseRing 2.6s ease-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
.health.live{animation:livePulse 1.8s ease-in-out infinite}

/* Growing bars */
.gantt i{transition:width 1s cubic-bezier(.2,.8,.2,1)}

/* Nav link underline */
.nav .links a{position:relative}
.nav .links a::after{content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nav .links a:hover::after{transform:scaleX(1)}

/* Button sheen on primary CTA */
.btn.primary{position:relative; overflow:hidden}
.btn.primary::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); transition:none}
.btn.primary:hover::after{animation:sheen .85s ease}
@keyframes sheen{from{left:-60%}to{left:130%}}

/* ============================== RESPONSIVE ============================== */
@media (max-width:980px){
  :root{--gut:24px}
  .nav .links{display:none}
  .hero-grid, .feature, .feature.flip .feat-copy, .feature.flip .feat-visual, .quote-wrap{grid-template-columns:1fr; gap:40px}
  .feature.flip .feat-copy{order:1} .feature.flip .feat-visual{order:2}
  .mock.float{transform:none}
  .hero .mock.float{animation:none; transform:none}
  .mod-grid, .stat-grid, .flow, .price-grid{grid-template-columns:1fr 1fr}
  .footer .ftop{grid-template-columns:1fr 1fr}
  .flow-step .arrow{display:none}
}
@media (max-width:560px){
  .mod-grid, .stat-grid, .flow, .price-grid{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .stageboard{grid-template-columns:repeat(3,1fr)}
  .hero{padding-top:120px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1; transform:none; transition:none}
  .stagger > *{opacity:1; transform:none; transition:none}
  .hero-grid > div:first-child > *, .hero .feat-visual{opacity:1 !important; animation:none !important; transform:none !important}
  .gantt i{transition:none}
  #scrollprog{display:none}
}