/* =====================================================================
   Comply Mug — landing page styles
   Ported from the original single-file design into Symfony AssetMapper.
   Loaded via assets/app.js (import './styles/app.css').
   ===================================================================== */

/* ============================================================
   COMPLY MUG — DESIGN TOKENS
   ============================================================ */
:root{
  --navy-950:#06173B;
  --navy-900:#0A2868;
  --navy-800:#123569;
  --navy-700:#1B4A8F;
  --blue-600:#1768D1;
  --blue-500:#2C82E0;
  --blue-400:#5AA3E8;
  --blue-300:#8FC4EE;
  --blue-100:#E9F2FC;
  --green-700:#3F8A1C;
  --green-600:#4F9A1F;
  --green-500:#6FB72A;
  --green-400:#8FCB52;
  --green-300:#BFE3A0;
  --green-100:#ECF7E3;
  --mist-50:#F2F7F6;
  --mist-100:#E9F1F0;
  --paper:#FFFFFF;
  --ink:#0E2238;
  --slate-600:#4E6170;
  --slate-500:#6B7E8A;
  --slate-400:#94A6B0;
  --line:#DCE6E6;
  --line-dark:rgba(255,255,255,0.14);
  --shadow-sm: 0 2px 10px rgba(10,40,104,0.06);
  --shadow-md: 0 8px 30px rgba(10,40,104,0.10);
  --shadow-lg: 0 20px 60px rgba(6,23,59,0.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --nav-h: 72px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--mist-50);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;color:var(--navy-900);}
p{margin:0;}
section{position:relative;}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  /* Never leave reveal content hidden for users who opt out of motion. */
  .reveal.is-armed{opacity:1 !important;transform:none !important;}
}

/* Fixed nav offset so anchored sections aren't hidden under the header. */
section[id],header[id]{scroll-margin-top:90px;}

/* Skip link for keyboard / screen-reader users. */
.skip-link{position:absolute;left:14px;top:-60px;z-index:200;background:var(--navy-900);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 10px;font-size:14px;font-weight:600;transition:top .15s ease;}
.skip-link:focus{top:0;}

/* Honeypot anti-spam field — visually hidden, off the accessibility tree. */
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.wrap{max-width:1220px;margin:0 auto;padding:0 28px;}
.section{padding:108px 0;}
.section--tight{padding:80px 0;}
@media (max-width:768px){
  .section{padding:72px 0;}
  .section--tight{padding:56px 0;}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--green-600);
}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--green-500);display:block;}
.eyebrow.on-dark{color:var(--green-400);}
.eyebrow.is-blue{color:var(--blue-600);}
.eyebrow.is-blue::before{background:var(--blue-500);}

.head-row{max-width:680px;margin-bottom:48px;}
.head-row h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px;line-height:1.15;}
.head-row p{margin-top:16px;font-size:17px;color:var(--slate-600);line-height:1.65;}
.head-row.centered{margin-left:auto;margin-right:auto;text-align:center;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:8px;border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--green-500);color:var(--navy-950);box-shadow:0 10px 26px rgba(111,183,42,0.30);}
.btn-primary:hover{background:var(--green-400);box-shadow:0 12px 30px rgba(111,183,42,0.40);transform:translateY(-1px);}
.btn-ghost-dark{border-color:rgba(255,255,255,0.35);color:#fff;}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
.btn-outline{border-color:var(--navy-900);color:var(--navy-900);}
.btn-outline:hover{background:var(--navy-900);color:#fff;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6;cursor:default;}

.chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:0.03em;
  padding:9px 16px;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--navy-800);
  box-shadow:var(--shadow-sm);
}
.chip.is-light{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);color:#dbe9f8;}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe0e1;}

.icon-circle{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;
  margin-bottom:18px;
}
.icon-circle svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.icon-circle.bg-green{background:linear-gradient(145deg,var(--green-500),var(--green-700));}
.icon-circle.bg-blue{background:linear-gradient(145deg,var(--blue-500),var(--navy-800));}
.icon-circle.bg-navy{background:linear-gradient(145deg,var(--navy-700),var(--navy-950));}

.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){
  .grid-6{grid-template-columns:1fr;}
}

/* Reveal-on-scroll is JS-gated: without JS (or before it runs) content stays visible. */
/* Hidden state is applied by JS only to elements it arms+observes. If the JS never
   runs (e.g. a Turbo visit without re-init), nothing is armed → content stays visible.
   This guarantees pages can never render blank. */
.reveal.is-armed{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.is-armed.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 70ms);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;
  display:flex;align-items:center;background:rgba(255,255,255,0.97);backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s ease, height .3s ease;
}
.nav.is-scrolled{box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(10,40,104,0.08);height:68px;}
.nav-inner{width:100%;max-width:1220px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;flex:none;min-width:0;}
.brand img{height:56px;width:auto;flex:none;transition:height .25s ease;}
.nav.is-scrolled .brand img{height:50px;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--navy-900);white-space:nowrap;}
.brand-name span{color:var(--green-600);}
.brand-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;color:var(--slate-500);white-space:nowrap;}

.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--navy-800);position:relative;padding:6px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--green-500);transition:width .2s ease;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:18px;flex:none;}
.nav-login{font-size:14px;font-weight:600;color:var(--navy-800);}
.nav-demo{padding:11px 20px;font-size:14px;}
.nav-burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;}
.nav-burger svg{width:20px;height:20px;stroke:var(--navy-900);fill:none;stroke-width:1.8;stroke-linecap:round;}

@media (max-width:980px){
  .nav-links{position:fixed;top:72px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;
    padding:14px 28px 28px;gap:4px;box-shadow:0 16px 30px rgba(10,40,104,0.10);transform:translateY(-8px);opacity:0;
    pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
  .nav-links.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links a{padding:12px 4px;border-bottom:1px solid var(--line);}
  .nav-burger{display:flex;}
  .nav-login{display:none;}
}
@media (max-width:680px){
  .brand-tag{display:none;}
  .brand-name{font-size:17px;}
}
@media (max-width:480px){
  .nav-inner{gap:10px;padding:0 16px;}
  .brand img{height:48px;}
  .nav.is-scrolled .brand img{height:44px;}
  .nav-cta{gap:10px;}
  .nav-demo{padding:10px 13px;font-size:13px;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;color:#fff;background:var(--navy-950);
  min-height:780px;display:grid;align-content:center;
  padding-top:calc(var(--nav-h) + 64px);padding-bottom:104px;overflow:hidden;
}
/* photographic backdrop + readability wash (text sits over the dark left side).
   The layer is wider than the hero and anchored left, so the laptop is pushed
   toward the right and the left stays clear for the copy. */
.hero__bg{
  position:absolute;top:0;bottom:0;left:0;width:108%;z-index:-2;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(5,18,46,0.96) 0%, rgba(5,18,46,0.90) 32%, rgba(6,21,52,0.80) 58%, rgba(6,21,52,0.74) 80%, rgba(6,21,52,0.72) 100%),
    linear-gradient(180deg, rgba(5,18,46,0.42) 0%, rgba(5,18,46,0.10) 32%, rgba(5,18,46,0.70) 72%, rgba(5,18,46,0.90) 100%);
}
.hero::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 720px 480px at 10% 28%, rgba(111,183,42,0.12), transparent 62%);
}
.hero-inner{display:grid;grid-template-columns:1fr;}
.hero-copy{max-width:600px;}
@media (max-width:900px){
  .hero{min-height:0;}
  .hero__bg{background-position:66% center;}
}
@media (max-width:560px){
  .hero{padding-top:calc(var(--nav-h) + 36px);padding-bottom:64px;}
  .hero__bg::after{background:linear-gradient(180deg, rgba(5,18,46,0.72), rgba(5,18,46,0.55) 45%, rgba(5,18,46,0.82));}
  .hero-copy{max-width:none;}
  .hero-copy p.lede{max-width:none;}
  .hero-actions .btn{flex:1;}
}
.hero-copy h1{font-size:clamp(36px,5vw,58px);color:#fff;line-height:1.08;margin-top:18px;max-width:680px;}
.hero-copy h1 em{font-style:normal;color:var(--green-400);}
.hero-copy p.lede{margin-top:22px;font-size:17.5px;line-height:1.7;color:#c4d3e6;max-width:620px;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-trust{margin-top:24px;font-size:13.5px;color:#8ea3bf;line-height:1.6;max-width:620px;}
.hero-trust strong{color:#cfe0f2;font-weight:600;}

.hero-stats{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-stats .chip{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:#e7eefb;}
.hero-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;max-width:620px;}
.hero-proof div{border:1px solid rgba(255,255,255,0.13);background:rgba(255,255,255,0.045);border-radius:var(--radius-md);padding:14px 16px;}
.hero-proof strong{display:block;color:#fff;font-size:13.5px;margin-bottom:4px;}
.hero-proof span{display:block;color:#aebfd6;font-size:12.8px;line-height:1.45;}

/* Hero visual: the gauge */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;perspective:1050px;}
.hero__bg{
  opacity:.58;
  filter:saturate(.8) contrast(1.03);
  background-position:58% center;
}
.hero__bg::after{
  background:
    linear-gradient(90deg, rgba(5,18,46,0.98) 0%, rgba(5,18,46,0.92) 36%, rgba(6,21,52,0.70) 62%, rgba(6,21,52,0.46) 100%),
    linear-gradient(180deg, rgba(5,18,46,0.62) 0%, rgba(5,18,46,0.18) 38%, rgba(6,21,52,0.82) 100%);
}
.gauge-card{
  position:relative;width:100%;max-width:400px;background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:28px 26px 26px;
  backdrop-filter:blur(6px);box-shadow:0 30px 80px rgba(0,0,0,0.35);
}
.gauge-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);}
.gauge-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.gauge-card-head .label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.1em;color:#9db2cd;text-transform:uppercase;}
.gauge-card-head .dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 4px rgba(143,203,82,0.18);}
.gauge-body{display:flex;gap:24px;align-items:flex-end;}
.gauge-vessel-wrap{position:relative;width:108px;flex:none;}
.gauge-readout{flex:1;}
.gauge-readout .pct{font-family:var(--font-display);font-size:46px;font-weight:700;color:#fff;line-height:1;}
.gauge-readout .pct sup{font-size:20px;top:-18px;}
.gauge-readout .pct-label{margin-top:6px;font-size:13px;color:#9db2cd;}
.gauge-readout .sample-tag{margin-top:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:#6f87a5;text-transform:uppercase;}
.gauge-mini-rows{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.gauge-mini-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#c4d3e6;}
.gauge-mini-row .bar{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,0.10);overflow:hidden;}
.gauge-mini-row .bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-400),var(--green-400));width:0%;transition:width 1.4s cubic-bezier(.2,.7,.2,1);}
.gauge-mini-row .v{font-family:var(--font-mono);width:34px;text-align:right;color:#9db2cd;}
.gauge-insight{margin-top:20px;border:1px solid rgba(255,255,255,0.12);background:rgba(3,14,38,0.34);border-radius:var(--radius-md);padding:13px 14px;}
.gauge-insight span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-400);margin-bottom:4px;}
.gauge-insight strong{display:block;color:#e7eefb;font-size:13.5px;font-weight:600;}
.gauge-vessel-wrap svg{width:100%;height:auto;}
@media (max-width:560px){
  .hero-proof{grid-template-columns:1fr;}
  .gauge-body{gap:18px;}
  .gauge-vessel-wrap{width:92px;}
}

.steam{position:absolute;pointer-events:none;}
.steam path{stroke-linecap:round;fill:none;}
.steam-hero{top:-60px;right:6%;width:160px;opacity:.55;}
.steam-wisp{animation:wisp 6s ease-in-out infinite;}
.steam-wisp.s2{animation-delay:.7s;}
.steam-wisp.s3{animation-delay:1.4s;}
@keyframes wisp{
  0%,100%{transform:translateY(0) scaleY(1);opacity:.5;}
  50%{transform:translateY(-10px) scaleY(1.05);opacity:.9;}
}

/* divider wave */
.pour-divider{display:block;width:100%;height:64px;margin-top:-2px;}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section{background:var(--paper);padding:34px 0;border-bottom:1px solid var(--line);}
.marquee-label{text-align:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;color:var(--slate-500);text-transform:uppercase;margin-bottom:18px;}
.marquee-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 32s linear infinite;}
.marquee-track-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   PROBLEM SECTION
   ============================================================ */
#problem{
  background:linear-gradient(170deg,#eef3fa 0%,#e7edf6 52%,#f1f5fb 100%);
  overflow:hidden;
}
#problem::after{
  content:"";
  position:absolute;
  right:-18%;
  top:12%;
  width:48%;
  height:72%;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.035) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 72%,transparent);
  opacity:.4;
}
.problem-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:54px;
  align-items:center;
  margin-bottom:52px;
}
.problem-copy{margin-bottom:0;}
.problem-title{max-width:780px;}
.problem-title span{
  color:var(--green-600);
  display:inline;
}
.problem-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.problem-proof span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(10,40,104,0.10);
  background:linear-gradient(180deg,#fff,var(--surface-soft));
  color:var(--navy-800);
  box-shadow:0 8px 20px rgba(10,40,104,0.06);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.problem-proof span::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:2px;
  background:linear-gradient(145deg,var(--green-500),var(--blue-500));
}

/* Problem → Solution split */
.problem-routine-card{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(10,40,104,0.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.96),rgba(251,253,253,0.92)),
    linear-gradient(135deg,rgba(111,183,42,0.18),rgba(44,130,224,0.13));
  box-shadow:0 34px 90px rgba(6,23,59,0.14);
  padding:22px;
}
.problem-routine-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.04) 1px,transparent 1px);
  background-size:38px 38px;
  opacity:.18;
}
.routine-card-head,
.routine-flow,
.routine-metrics{
  position:relative;
  z-index:1;
}
.routine-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(10,40,104,0.10);
}
.routine-card-head span{
  color:var(--slate-500);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.routine-card-head strong{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--green-700);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.routine-card-head strong::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 5px rgba(111,183,42,0.16);
}
.routine-flow{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.routine-step{
  position:relative;
  display:flex;
  gap:13px;
  align-items:flex-start;
  min-height:66px;
  padding:14px 14px 14px 16px;
  border:1px solid rgba(10,40,104,0.10);
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(10,40,104,0.06);
}
.routine-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:27px;
  bottom:-11px;
  width:2px;
  height:11px;
  background:linear-gradient(180deg,var(--green-500),var(--blue-500));
}
.routine-dot{
  width:24px;
  height:24px;
  flex:none;
  border-radius:8px;
  background:linear-gradient(145deg,var(--green-500),var(--blue-500));
  box-shadow:0 8px 18px rgba(23,104,209,0.16);
}
.routine-step strong{
  display:block;
  color:var(--navy-900);
  font-family:var(--font-display);
  font-size:15.5px;
  line-height:1.1;
}
.routine-step small{
  display:block;
  margin-top:4px;
  color:var(--slate-600);
  font-size:12.6px;
  line-height:1.45;
}
.routine-metrics{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:14px;
}
.routine-metrics span{
  min-height:74px;
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(10,40,104,0.10);
  background:var(--navy-950);
  color:#aebfd6;
  font-size:12.5px;
}
.routine-metrics strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-family:var(--font-display);
  font-size:26px;
  line-height:1;
}
.problem-flow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.problem-flow::before{
  content:"";
  position:absolute;
  top:50%;
  left:8%;
  right:8%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(192,69,63,0.20),rgba(44,130,224,0.30),rgba(111,183,42,0.24));
  transform:translateY(-50%);
}
.flow-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:500px;
  padding:18px;
  overflow:visible;
  border:1px solid rgba(10,40,104,0.12);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.97),rgba(249,252,252,0.94)),
    radial-gradient(circle at 12% 8%,rgba(44,130,224,0.10),transparent 35%),
    radial-gradient(circle at 90% 92%,rgba(111,183,42,0.12),transparent 38%);
  box-shadow:0 24px 62px rgba(6,23,59,0.12);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.flow-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.04) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.03) 1px,transparent 1px);
  background-size:36px 36px;
  opacity:.34;
}
.flow-card:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:3;
  top:50%;
  right:-22px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(10,40,104,0.12);
  background:#fff;
  box-shadow:0 12px 26px rgba(6,23,59,0.12);
  transform:translateY(-50%);
}
.flow-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 36%,rgba(10,40,104,0.12));
  box-shadow:0 34px 78px rgba(6,23,59,0.16);
}
.flow-header{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:4px 4px 16px;
}
.flow-number{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  border-radius:14px;
  background:linear-gradient(145deg,var(--navy-900),var(--navy-950));
  color:#fff;
  box-shadow:0 14px 30px rgba(6,23,59,0.22);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.flow-tag{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.45;
  text-transform:uppercase;
}
.flow-content{
  display:grid;
  grid-template-rows:1fr auto 1.08fr;
  gap:14px;
  flex:1;
}
.flow-section{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:22px 20px 20px;
  border-radius:14px;
  overflow:hidden;
}
.flow-section::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.72);
}
.flow-icon-wrapper{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  margin-bottom:14px;
  border-radius:50%;
}
.flow-icon-wrapper svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.flow-section h4{
  color:inherit;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}
.flow-section p{
  margin-top:10px;
  font-size:14.6px;
  line-height:1.65;
}
.flow-problem{
  border:1px solid rgba(192,69,63,0.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,0.82),rgba(255,246,245,0.96)),
    linear-gradient(135deg,rgba(192,69,63,0.10),transparent 46%);
  color:#C0453F;
}
.flow-problem .flow-icon-wrapper{
  background:#FBE7E6;
  color:#C0453F;
}
.flow-problem p{color:var(--slate-600);}
.flow-solution{
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  background:
    linear-gradient(180deg,rgba(236,247,227,0.98),rgba(226,242,218,0.94)),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 50%);
  color:var(--green-700);
  box-shadow:0 14px 34px rgba(111,183,42,0.10);
}
.flow-solution .flow-icon-wrapper{
  background:rgba(111,183,42,0.18);
  color:var(--green-700);
}
.flow-solution p{color:#405565;}
.flow-arrow{
  position:relative;
  justify-self:center;
  display:grid;
  place-items:center;
  width:58px;
  height:42px;
  margin:-2px 0;
  border-radius:999px;
  border:1px solid rgba(10,40,104,0.12);
  background:linear-gradient(180deg,#fff,var(--mist-50));
  color:var(--accent);
  box-shadow:0 12px 28px rgba(6,23,59,0.11);
}
.flow-arrow::before,
.flow-arrow::after{
  content:"";
  position:absolute;
  left:50%;
  width:2px;
  height:18px;
  background:linear-gradient(180deg,rgba(192,69,63,0.25),rgba(111,183,42,0.25));
  transform:translateX(-50%);
}
.flow-arrow::before{top:-18px;}
.flow-arrow::after{bottom:-18px;}
.flow-arrow svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(90deg);
}
.flow-card:not(:last-child) .flow-arrow::after{
  box-shadow:34px -4px 0 -1px rgba(10,40,104,0.16);
}
.flow-card:not(:last-child) .flow-header::after{
  content:"";
  position:absolute;
  z-index:4;
  top:calc(50% + 3px);
  right:-42px;
  width:12px;
  height:12px;
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
}

@media (max-width:920px){
  .problem-head{grid-template-columns:1fr;gap:34px;}
  .problem-flow{grid-template-columns:1fr;gap:22px;}
  .problem-flow::before{
    top:28px;
    bottom:28px;
    left:41px;
    right:auto;
    width:2px;
    height:auto;
    transform:none;
    background:linear-gradient(180deg,rgba(192,69,63,0.20),rgba(44,130,224,0.30),rgba(111,183,42,0.24));
  }
  .flow-card{
    min-height:0;
    padding:18px 18px 18px 76px;
  }
  .flow-card:not(:last-child)::after{
    top:auto;
    right:auto;
    left:22px;
    bottom:-31px;
    width:38px;
    height:38px;
  }
  .flow-header{padding-bottom:12px;}
  .flow-card:not(:last-child) .flow-header::after{display:none;}
  .flow-number{
    position:absolute;
    left:18px;
    top:18px;
    width:46px;
    height:46px;
  }
  .flow-content{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto;
    align-items:stretch;
  }
  .flow-arrow{
    align-self:center;
    width:46px;
    height:46px;
  }
  .flow-arrow::before,
  .flow-arrow::after{
    top:50%;
    left:auto;
    width:20px;
    height:2px;
    transform:translateY(-50%);
  }
  .flow-arrow::before{right:100%;}
  .flow-arrow::after{left:100%;bottom:auto;}
  .flow-arrow svg{transform:none;}
}
@media (max-width:620px){
  .problem-head{margin-bottom:34px;}
  .problem-routine-card{padding:16px;}
  .routine-metrics{grid-template-columns:1fr;}
  .problem-flow::before{display:none;}
  .flow-card{padding:16px;}
  .flow-card:not(:last-child)::after{display:none;}
  .flow-number{position:static;width:42px;height:42px;border-radius:12px;}
  .flow-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .flow-arrow{width:54px;height:40px;}
  .flow-arrow::before,.flow-arrow::after{
    left:50%;
    width:2px;
    height:16px;
    transform:translateX(-50%);
  }
  .flow-arrow::before{top:-16px;right:auto;}
  .flow-arrow::after{bottom:-16px;top:auto;left:50%;}
  .flow-arrow svg{transform:rotate(90deg);}
  .flow-section{padding:18px;}
}

.problem-intro{font-style:italic;color:var(--slate-600);font-size:17px;max-width:760px;margin-top:14px;line-height:1.6;}

/* ============================================================
   PRODUCT OVERVIEW
   ============================================================ */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.overview-quote{
  background:linear-gradient(160deg,var(--green-100),var(--mist-50));
  border-left:4px solid var(--green-500);border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:34px 32px;color:var(--navy-800);font-size:18px;line-height:1.7;
}
.overview-quote p{font-style:normal;font-weight:500;}
.overview-proof{display:grid;gap:12px;margin-top:24px;}
.overview-proof span{display:block;border:1px solid rgba(10,40,104,0.10);background:rgba(255,255,255,0.62);border-radius:var(--radius-sm);padding:12px 14px;color:var(--slate-600);font-size:13.5px;line-height:1.45;}
.overview-proof strong{display:block;color:var(--navy-900);font-family:var(--font-display);font-size:15px;margin-bottom:2px;}
.overview-list{display:flex;flex-direction:column;gap:28px;}
.overview-item{display:flex;gap:18px;}
.overview-item .icon-circle{margin-bottom:0;width:46px;height:46px;border-radius:12px;}
.overview-item .icon-circle svg{width:21px;height:21px;}
.overview-item h4{font-size:16.5px;color:var(--navy-900);margin-bottom:6px;}
.overview-item p{font-size:14.8px;color:var(--slate-600);line-height:1.6;}
.overview-actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:2px;}
@media (max-width:860px){.overview-grid{grid-template-columns:1fr;}}

/* ============================================================
   DIFFERENCE — numbered measurement cards
   ============================================================ */
.diff-card{position:relative;padding-top:38px;}
.diff-num{
  font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--blue-600);
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.diff-num .ticks{display:flex;gap:3px;}
.diff-num .ticks span{width:2px;height:10px;background:var(--line);border-radius:1px;}
.diff-num .ticks span.on{background:var(--green-500);height:14px;}
.diff-card h3{font-size:18.5px;margin-bottom:10px;}
.diff-card p{font-size:14.8px;color:var(--slate-600);line-height:1.6;}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-rail{position:relative;}
.steps-rail::before{
  content:"";position:absolute;top:23px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  z-index:0;
}
@media (max-width:980px){.steps-rail::before{display:none;}}
.step-card{position:relative;background:transparent;border:none;box-shadow:none;padding:0;}
.step-card:hover{transform:none;}
.step-num-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.step-num{
  width:46px;height:46px;border-radius:50%;background:var(--paper);border:2px solid var(--green-500);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;
  color:var(--navy-900);font-size:15px;flex:none;position:relative;z-index:1;box-shadow:var(--shadow-sm);
}
.step-card h3{font-size:17.5px;margin-bottom:10px;}
.step-card p{font-size:14.6px;color:var(--slate-600);line-height:1.6;}

/* ============================================================
   CAPABILITIES / INDUSTRIES (icon grid cards)
   ============================================================ */
.cap-card h3{font-size:17px;margin-bottom:9px;}
.cap-card p{font-size:14.4px;color:var(--slate-600);line-height:1.6;}

/* ============================================================
   PLATFORM PREVIEW MOCKUP
   ============================================================ */
.preview-shell{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.preview-topbar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--mist-50);}
.preview-topbar .dot{width:9px;height:9px;border-radius:50%;}
.preview-topbar .dot:nth-child(1){background:#EF6B5C;}
.preview-topbar .dot:nth-child(2){background:#F2B84B;}
.preview-topbar .dot:nth-child(3){background:var(--green-500);}
.preview-topbar .url{margin-left:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--slate-500);}
.preview-body{display:grid;grid-template-columns:200px 1fr;min-height:380px;}
.preview-side{background:var(--navy-950);color:#cdd9ec;padding:20px 14px;}
.preview-side .brand-mini{display:flex;align-items:center;gap:8px;margin-bottom:22px;padding:0 6px;}
.preview-side .brand-mini img{width:22px;height:22px;}
.preview-side .brand-mini span{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;}
.preview-side .nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:12.6px;margin-bottom:2px;}
.preview-side .nav-item.active{background:rgba(111,183,42,0.16);color:#fff;}
.preview-side .nav-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;opacity:.85;}
.preview-main{padding:22px 24px;background:#fff;}
.preview-main h4{font-size:14px;color:var(--navy-900);margin-bottom:2px;}
.preview-main .crumb{font-size:11.5px;color:var(--slate-400);margin-bottom:18px;}
.preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.preview-kpis div{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--mist-50);padding:12px;}
.preview-kpis span{display:block;font-size:10.5px;color:var(--slate-500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.preview-kpis strong{display:block;font-family:var(--font-display);font-size:24px;color:var(--navy-900);line-height:1;}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.preview-mini-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;}
.preview-mini-card .t{font-size:11.5px;color:var(--slate-500);margin-bottom:10px;}
.donut{width:84px;height:84px;margin:0 auto;}
.bars-mini{display:flex;align-items:flex-end;gap:6px;height:70px;}
.bars-mini div{flex:1;border-radius:3px 3px 0 0;}
.rowlines{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.rowlines .rl{display:flex;align-items:center;gap:8px;}
.rowlines .rl .lbl{font-size:9.5px;color:var(--slate-500);width:54px;flex:none;}
.rowlines .rl .track{flex:1;height:5px;background:var(--mist-100);border-radius:3px;overflow:hidden;}
.rowlines .rl .track span{display:block;height:100%;border-radius:3px;}
.preview-table{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.preview-row{display:grid;grid-template-columns:1.15fr .75fr .85fr;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--slate-600);}
.preview-row:first-child{border-top:0;}
.preview-row-head{background:var(--mist-50);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate-500);}
.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.status-pill.ok{background:var(--green-100);color:var(--green-700);}
.status-pill.warn{background:#FFF3D8;color:#8A5D00;}
.preview-caption{text-align:center;font-style:italic;color:var(--slate-500);font-size:14px;margin-top:18px;}
@media (max-width:860px){.preview-body{grid-template-columns:1fr;}.preview-side{display:none;}.preview-cards{grid-template-columns:1fr;}.preview-kpis{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:560px){.preview-main{padding:18px;}.preview-kpis,.preview-row{grid-template-columns:1fr;}.preview-row{gap:4px;}.preview-row-head{display:none;}}

/* ============================================================
   REGULATED ENVIRONMENTS (dark)
   ============================================================ */
.dark-section{background:linear-gradient(180deg,var(--navy-950),#0a2050);color:#fff;}
.dark-section h2{color:#fff;}
.dark-section .head-row p{color:#aebfd6;}
.dark-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-md);padding:30px;transition:transform .25s ease, background .25s ease;}
.dark-card:hover{transform:translateY(-3px);background:rgba(255,255,255,0.07);}
.dark-card h3{color:#fff;font-size:17px;margin-bottom:10px;}
.dark-card p{color:#aebfd6;font-size:14.4px;line-height:1.6;}
.dark-card .icon-circle{background:linear-gradient(145deg,var(--blue-500),var(--navy-700));}

/* ============================================================
   FRAMEWORKS
   ============================================================ */
.fw-groups{display:grid;grid-template-columns:1.1fr 0.9fr;gap:54px;align-items:start;}
.fw-block{margin-bottom:34px;}
.fw-block:last-child{margin-bottom:0;}
.fw-block .ftitle{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);font-weight:600;margin-bottom:14px;}
.fw-chip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.fw-chip{
  background:var(--navy-900);color:#fff;border-radius:10px;padding:14px 10px;text-align:center;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);
}
.fw-chip.is-regional{background:var(--blue-600);}
@media (max-width:980px){.fw-groups{grid-template-columns:1fr;}}
@media (max-width:560px){.fw-chip-grid{grid-template-columns:repeat(2,1fr);}}
.fw-art{display:flex;justify-content:center;}
.fw-art img{width:280px;}

/* ============================================================
   OUTCOMES
   ============================================================ */
.outcome-card{position:relative;padding-top:26px;}
.outcome-card::before{content:"";position:absolute;top:0;left:30px;width:40px;height:3px;background:var(--green-500);border-radius:2px;}
.outcome-card h3{font-size:17px;margin-bottom:10px;}
.outcome-card p{font-size:14.3px;color:var(--slate-600);line-height:1.6;}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.cs-disclaimer{font-size:13.5px;color:var(--slate-500);font-style:italic;margin-top:10px;max-width:680px;}
.cs-card{display:flex;flex-direction:column;}
.cs-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);font-weight:600;margin-bottom:14px;}
.cs-card h3{font-size:17.5px;margin-bottom:16px;}
.cs-row{margin-bottom:14px;}
.cs-row .k{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-500);margin-bottom:5px;}
.cs-row p{font-size:14.2px;color:var(--slate-600);line-height:1.55;}
.cs-metric{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);}
.cs-metric .num{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--green-600);}
.cs-metric .lbl{font-size:13px;color:var(--slate-500);font-style:italic;}

/* ============================================================
   WHY / COMPARISON TABLE
   ============================================================ */
.compare-table{width:100%;max-width:900px;margin:0 auto;border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.compare-table thead th{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;padding:18px 26px;font-weight:600;width:50%;
}
.compare-table thead th:first-child{background:var(--navy-900);color:#9fb3cd;}
.compare-table thead th:last-child{background:linear-gradient(135deg,var(--green-600),var(--green-700));color:#fff;}
.compare-table thead th:last-child .ct-badge{display:inline-flex;align-items:center;gap:9px;}
.compare-table thead th:last-child .ct-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);}

.compare-table td{padding:15px 26px;font-size:15px;border-bottom:1px solid var(--line);transition:background .15s ease;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table td.new{background:var(--green-100);box-shadow:inset 3px 0 0 var(--green-500);}
.compare-table tbody tr:hover td{background:var(--mist-50);}
.compare-table tbody tr:hover td.new{background:#E3F3D4;}

.compare-table .old{color:var(--slate-500);}
.compare-table .new{color:var(--navy-900);font-weight:600;}

/* ✕ / ✓ badges — shared with the Problem section's icon language */
.ct-ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;vertical-align:-6px;margin-right:13px;}
.ct-ico svg{width:12px;height:12px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.ct-x{background:#FBE7E6;}
.ct-x svg{stroke:#C0453F;}
.ct-check{background:rgba(111,183,42,0.22);}
.ct-check svg{stroke:var(--green-700);}

@media (max-width:700px){
  .compare-table{display:block;overflow-x:auto;}
  .compare-table td,.compare-table th{padding:13px 16px;white-space:nowrap;}
  .ct-ico{margin-right:9px;}
}

/* ============================================================
   ROADMAP
   ============================================================ */
.roadmap-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;}
@media (max-width:860px){.roadmap-rail{grid-template-columns:1fr;}}
.road-card{border-top:4px solid var(--line);padding-top:22px;}
.road-card.is-live{border-top-color:var(--green-500);}
.road-card.is-next{border-top-color:var(--blue-500);}
.road-card.is-following{border-top-color:var(--navy-700);}
.road-status{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.road-status .dot{width:7px;height:7px;border-radius:50%;}
.is-live .road-status{color:var(--green-700);}
.is-live .road-status .dot{background:var(--green-500);box-shadow:0 0 0 4px rgba(111,183,42,0.18);}
.is-next .road-status{color:var(--blue-600);}
.is-next .road-status .dot{background:var(--blue-500);}
.is-following .road-status{color:var(--navy-700);}
.is-following .road-status .dot{background:var(--navy-700);}
.road-card .vname{font-family:var(--font-mono);font-size:12.5px;color:var(--slate-500);margin-bottom:4px;}
.road-card h3{font-size:19px;margin-bottom:16px;}
.road-card ul{display:flex;flex-direction:column;gap:10px;}
.road-card li{font-size:14px;color:var(--slate-600);padding-left:20px;position:relative;line-height:1.5;}
.road-card li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--green-300);}

/* ============================================================
   DEMO FORM
   ============================================================ */
.demo-section{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));color:#fff;}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.demo-copy h2{color:#fff;}
.demo-copy p{color:#b9c7dc;margin-top:16px;font-size:16px;line-height:1.7;max-width:480px;}
.demo-points{margin-top:26px;display:flex;flex-direction:column;gap:13px;}
.demo-points li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#d6e1f0;}
.demo-points svg{width:18px;height:18px;stroke:var(--green-400);fill:none;stroke-width:2;margin-top:1px;flex:none;}
.demo-trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;max-width:520px;}
.demo-trust span{border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);border-radius:var(--radius-sm);padding:9px 11px;font-size:12.5px;color:#d6e1f0;}
.demo-card{background:#fff;border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-lg);color:var(--ink);}
.demo-card h3{font-size:19px;margin-bottom:6px;}
.demo-card .sub{font-size:13.5px;color:var(--slate-500);margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-800);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:14.5px;
  color:var(--ink);background:var(--mist-50);transition:border-color .2s ease, background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500);background:#fff;outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-note{font-size:12px;color:var(--slate-500);margin-top:14px;text-align:center;}
.thanks{display:none;text-align:center;padding:30px 6px;}
.thanks.show{display:block;}
.thanks .icon-circle{margin:0 auto 16px;background:linear-gradient(145deg,var(--green-500),var(--green-700));}
.thanks h3{font-size:19px;margin-bottom:8px;}
.thanks p{color:var(--slate-600);font-size:14.5px;}
@media (max-width:860px){.demo-grid{grid-template-columns:1fr;}.field-row{grid-template-columns:1fr;}}
@media (max-width:560px){.demo-card{padding:24px 20px;}.demo-trust{display:grid;grid-template-columns:1fr;}}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  background:radial-gradient(ellipse 900px 500px at 50% 0%, rgba(111,183,42,0.14), transparent 60%), var(--navy-950);
  color:#fff;text-align:center;padding:120px 0 100px;position:relative;overflow:hidden;
}
.final-cta h2{color:#fff;font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1.24;max-width:820px;margin:16px auto 0;}
.final-cta p{color:#b9c7dc;font-size:16.5px;line-height:1.65;max-width:620px;margin:18px auto 0;}
.final-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px;}
.final-cta .mark{margin:42px auto 30px;width:98px;height:98px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.final-cta .mark img{width:72px;height:72px;}
.final-pillars{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9db2cd;}
.final-pillars span:nth-child(2){color:var(--green-400);}
.final-url{margin-top:34px;font-size:14.5px;color:#7d93b3;}
@media (max-width:560px){.final-cta{padding:84px 0 72px;}.final-actions .btn{width:100%;}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:#040f29;color:#9fb0c8;padding:70px 0 30px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:36px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.08);}
.foot-brand .brand-name{color:#fff;}
.foot-wordmark{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  color:#fff;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
}
.foot-wordmark span{color:var(--green-400);}
.foot-brand p{margin-top:16px;font-size:13.8px;line-height:1.7;color:#8295b1;max-width:280px;}
.foot-social{display:flex;gap:10px;margin-top:20px;}
.foot-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.foot-social a:hover{background:rgba(111,183,42,0.25);}
.foot-social svg{width:16px;height:16px;stroke:#cfe0f2;fill:none;stroke-width:1.8;}
.foot-col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5d7191;margin-bottom:18px;}
.foot-col ul{display:flex;flex-direction:column;gap:11px;}
.foot-col a{font-size:14px;color:#b6c5da;transition:color .2s ease;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px;}
.foot-bottom .legal{display:flex;gap:22px;flex-wrap:wrap;}
.foot-bottom a{font-size:13px;color:#7286a3;}
.foot-bottom a:hover{color:#cfe0f2;}
.foot-bottom .legal span{font-size:13px;color:#7286a3;}
.foot-copy{font-size:13px;color:#5d7191;}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr;}}

/* misc */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ============================================================
   DEMO FORM — validation errors (Symfony form_errors output)
   ============================================================ */
.demo-card .field ul{list-style:none;margin:6px 0 0;padding:0;}
.demo-card .field ul li{color:#C0392B;font-size:12px;font-weight:600;line-height:1.4;}
.demo-card .field input.is-invalid,
.demo-card .field select.is-invalid,
.demo-card .field textarea.is-invalid{border-color:#C0392B;}

/* ============================================================
   PAGE HEADER (sub-page hero band)
   ============================================================ */
.page-header{
  padding:calc(var(--nav-h) + 64px) 0 56px;
  background:
    radial-gradient(ellipse 900px 520px at 82% -20%, rgba(111,183,42,0.12), transparent 60%),
    radial-gradient(ellipse 720px 420px at 0% 0%, rgba(44,130,224,0.10), transparent 55%),
    var(--mist-50);
  border-bottom:1px solid var(--line);
}
.page-header h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;margin-top:16px;max-width:760px;}
.page-header p{margin-top:18px;font-size:clamp(16px,1.4vw,19px);color:var(--slate-600);line-height:1.6;max-width:680px;}
@media (max-width:768px){ .page-header{padding:calc(var(--nav-h) + 36px) 0 40px;} }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-section{padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);}
.stats-section.is-dark{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));border-color:transparent;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stat-item{text-align:center;padding:10px;}
.stat-value{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.8vw,46px);line-height:1;color:var(--navy-900);}
.stat-value em{font-style:normal;color:var(--green-600);}
.stats-section.is-dark .stat-value{color:#fff;}
.stats-section.is-dark .stat-value em{color:var(--green-400);}
.stat-label{margin-top:10px;font-size:14px;color:var(--slate-600);line-height:1.4;}
.stats-section.is-dark .stat-label{color:#9fb2cc;}
@media (max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   FAQ (native <details> accordion)
   ============================================================ */
.wrap-narrow{max-width:820px;}
.faq-list{margin-top:6px;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--navy-900);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--blue-600);}
.faq-icon{position:relative;width:16px;height:16px;flex:none;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--green-500);border-radius:2px;transition:transform .2s ease;}
.faq-icon::before{top:7px;left:0;width:16px;height:2px;}
.faq-icon::after{top:0;left:7px;width:2px;height:16px;}
.faq-item[open] .faq-icon::after{transform:scaleY(0);}
.faq-a{padding:0 24px 22px;color:var(--slate-600);font-size:15.5px;line-height:1.7;max-width:70ch;}

/* ============================================================
   CTA BAND (mid-page)
   ============================================================ */
.cta-band{padding:28px 0;}
.cta-band-inner{background:linear-gradient(135deg,var(--green-100),var(--blue-100));border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.cta-band-copy h2{font-size:clamp(21px,2.3vw,28px);line-height:1.2;}
.cta-band-copy p{margin-top:8px;color:var(--slate-600);font-size:16px;max-width:580px;line-height:1.6;}
.cta-band-inner .btn{flex:none;}

/* ============================================================
   PROFESSIONAL POLISH PASS
   ============================================================ */
::selection{background:var(--green-300);color:var(--navy-950);}

/* Page header: breadcrumb + soft decorative orb to balance the composition */
.page-header{position:relative;overflow:hidden;}
.page-header > .wrap{position:relative;z-index:1;}
.page-header-orb{position:absolute;top:-200px;right:-150px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, rgba(111,183,42,0.20), rgba(44,130,224,0.12) 55%, transparent 72%);
  filter:blur(6px);pointer-events:none;}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--slate-500);margin-bottom:20px;}
.breadcrumb a{color:var(--slate-500);transition:color .15s ease;}
.breadcrumb a:hover{color:var(--blue-600);}
.breadcrumb .sep{color:var(--slate-400);}
.breadcrumb [aria-current]{color:var(--navy-800);font-weight:600;}
.page-header .eyebrow{margin-bottom:6px;}
.page-header h1{letter-spacing:-0.02em;}

/* Cards: stronger definition + animated brand accent on hover */
.card{position:relative;}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--green-500),var(--blue-500));
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.card:hover::after{transform:scaleX(1);}
.card:hover{box-shadow:0 16px 40px rgba(10,40,104,0.14);}

/* Stats band: premium vertical dividers + tighter tracking */
.stat-value{letter-spacing:-0.02em;}
@media (min-width:681px){
  .stat-item{position:relative;}
  .stat-item:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);
    width:1px;height:46px;background:var(--line);}
  .stats-section.is-dark .stat-item:not(:last-child)::after{background:rgba(255,255,255,0.14);}
}

/* Headings + buttons: refined tracking */
.head-row h2{letter-spacing:-0.018em;}
.btn{letter-spacing:0.01em;}

/* ============================================================
   PREMIUM VISUAL DESIGN PASS
   ============================================================ */
:root{
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:8px;
  --nav-h:92px;
  --surface:#FBFDFD;
  --surface-soft:#F6FAFA;
}

body{
  background:
    linear-gradient(180deg,#f7fbfb 0%,#eef5f4 48%,#f7fbfb 100%);
}

main{
  background:
    linear-gradient(90deg,rgba(10,40,104,0.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.026) 1px,transparent 1px);
  background-size:72px 72px;
}

h1,h2,h3,h4,
.head-row h2,
.page-header h1,
.stat-value{
  letter-spacing:0;
}

.nav{
  background:rgba(255,255,255,0.94);
  box-shadow:0 1px 0 rgba(10,40,104,0.09),0 16px 44px rgba(6,23,59,0.05);
  height:72px;
}
.nav.is-scrolled{height:64px;}
.brand img{
  height:58px;
  max-width:188px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(6,23,59,0.09));
}
.nav.is-scrolled .brand img{height:50px;}
.nav-inner{gap:22px;}
.nav-links{gap:26px;}
.nav-demo{padding:10px 18px;}
@media (max-width:1100px){
  .nav-links{gap:18px;}
  .nav-demo{padding:10px 16px;}
}
@media (max-width:480px){
  .brand img{height:50px;max-width:170px;}
  .nav.is-scrolled .brand img{height:44px;}
}

.section > .wrap,
.stats-section > .wrap,
.hero > .wrap,
.page-header > .wrap,
.final-cta > .wrap{
  position:relative;
  z-index:1;
}

.section:not(.dark-section):not(.demo-section){
  overflow:hidden;
}
.section:not(.dark-section):not(.demo-section)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(111,183,42,0.05),transparent 34%),
    linear-gradient(315deg,rgba(44,130,224,0.05),transparent 32%);
  opacity:.75;
}

.card,
.dark-card,
.demo-card,
.faq-item,
.preview-shell,
.cta-band-inner,
.compare-table{
  border-radius:8px;
}

.card{
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  border-color:rgba(10,40,104,0.10);
  box-shadow:0 14px 36px rgba(10,40,104,0.08);
}
.card:hover{
  border-color:rgba(23,104,209,0.22);
  box-shadow:0 24px 54px rgba(10,40,104,0.14);
}
.icon-circle{border-radius:8px;}

.hero{
  isolation:isolate;
  background:
    radial-gradient(ellipse 70% 80% at 76% 44%,rgba(44,130,224,0.12),transparent 62%),
    linear-gradient(115deg,rgba(6,23,59,0.99) 0%,rgba(6,23,59,0.96) 50%,rgba(8,29,76,0.91) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.028) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(180deg,rgba(255,255,255,0.022) 0 1px,transparent 1px 88px);
  padding-top:calc(var(--nav-h) + 30px);
  padding-bottom:68px;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,203,82,0.58),rgba(90,163,232,0.48),transparent);
}
.hero-inner{
  grid-template-columns:minmax(0,0.92fr) minmax(420px,1fr);
  gap:66px;
  min-height:0;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(34px,3.45vw,46px);
  max-width:590px;
  text-wrap:balance;
  letter-spacing:0;
  margin-top:14px;
}
.hero-copy p.lede{
  color:#d4deeb;
  font-size:17.2px;
  max-width:600px;
}
.hero-proof div{
  border-radius:8px;
  background:rgba(255,255,255,0.065);
}
.hero-media-frame{
  position:relative;
  width:100%;
  margin:0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.18);
  background:#071a43;
  box-shadow:0 42px 110px rgba(0,0,0,0.42),0 0 0 1px rgba(143,203,82,0.12);
}
.hero-media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -120px 130px rgba(6,23,59,0.38);
  pointer-events:none;
}
.hero-media-frame img{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  transform:scale(1.015);
}
.hero-signal{
  position:absolute;
  z-index:2;
  min-width:142px;
  padding:13px 15px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(6,23,59,0.72);
  color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 16px 34px rgba(0,0,0,0.28);
}
.hero-signal span{
  display:block;
  color:#aebfd6;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-signal strong{
  display:block;
  margin-top:4px;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1;
}
.hero-signal--top{top:18px;right:18px;}
.hero-signal--bottom{left:18px;bottom:18px;}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;min-height:0;}
  .hero-copy h1{font-size:46px;}
}
@media (max-width:560px){
  .hero{padding-top:calc(var(--nav-h) + 34px);padding-bottom:68px;}
  .hero-copy h1{font-size:38px;}
  .hero-copy p.lede{font-size:16.5px;}
  .hero-signal{position:static;margin:10px 10px 0;display:inline-block;min-width:0;}
  .hero-media-frame{display:flex;flex-wrap:wrap;padding-bottom:10px;}
  .hero-media-frame img{flex:0 0 100%;}
}

/* ============================================================
   HERO DASHBOARD MOCKUP (HTML/CSS — no raster image)
   ============================================================ */
.cm-dash{
  width:100%;max-width:590px;margin:-10px auto 0;
  border-radius:14px;overflow:hidden;
  font-family:var(--font-body);color:#e7eefb;line-height:1.4;
  background:linear-gradient(180deg,#0b2150,#081a40);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 36px 92px rgba(0,0,0,0.46),0 0 0 1px rgba(143,203,82,0.12);
  transform:rotateY(-6deg) rotateX(2.5deg) scale(.96);
  transform-origin:center center;
  animation:cmFloat 7s ease-in-out infinite;
}
@keyframes cmFloat{
  0%,100%{transform:rotateY(-6deg) rotateX(2.5deg) scale(.96) translateY(0);}
  50%{transform:rotateY(-5deg) rotateX(2deg) scale(.965) translateY(-10px);}
}
/* framework coverage bars: grow in on load (staggered) */
@keyframes cmBarFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.cm-bar > span{transform-origin:left center;animation:cmBarFill 1.1s cubic-bezier(.2,.7,.2,1) both;}
.cm-bars li:nth-child(1) .cm-bar>span{animation-delay:.25s;}
.cm-bars li:nth-child(2) .cm-bar>span{animation-delay:.40s;}
.cm-bars li:nth-child(3) .cm-bar>span{animation-delay:.55s;}
.cm-bars li:nth-child(4) .cm-bar>span{animation-delay:.70s;}
/* sparklines under each KPI: draw in */
.cm-spark polyline{stroke-dasharray:140;stroke-dashoffset:140;animation:cmDraw 1.5s ease forwards .35s;}
@keyframes cmDraw{to{stroke-dashoffset:0;}}
@media (max-width:900px){.cm-dash{transform:none;animation:none;}}
.cm-dash *{box-sizing:border-box;}
.cm-dash__chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08);}
.cm-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.18);}
.cm-dash__url{margin-left:8px;font-family:var(--font-mono);font-size:10px;color:#8095b6;
  background:rgba(255,255,255,0.05);padding:3px 10px;border-radius:6px;}
.cm-dash__body{display:grid;grid-template-columns:120px 1fr;}

/* sidebar */
.cm-side{padding:14px 10px;border-right:1px solid rgba(255,255,255,0.07);background:rgba(3,13,38,0.45);}
.cm-brand{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:2px 2px 13px;margin-bottom:11px;border-bottom:1px solid rgba(255,255,255,0.08);}
.cm-brand__logo{flex:none;width:66px;height:auto;display:block;
  background:#fff;border-radius:8px;padding:7px;box-shadow:0 4px 12px rgba(0,0,0,0.25);}
.cm-brand__mark{width:23px;height:23px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-500),var(--green-700));}
.cm-brand__mark svg{width:14px;height:14px;fill:none;stroke:var(--navy-950);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cm-brand__txt{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#fff;letter-spacing:-0.01em;}
.cm-brand__txt span{color:var(--green-400);}
.cm-nav{display:flex;flex-direction:column;gap:2px;}
.cm-nav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:11.5px;font-weight:500;color:#9fb2cd;}
.cm-nav svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cm-nav a.is-active{background:rgba(111,183,42,0.15);color:#fff;box-shadow:inset 2px 0 0 var(--green-400);}
.cm-nav a.is-active svg{stroke:var(--green-400);}

/* main */
.cm-main{padding:14px;min-width:0;}
.cm-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.cm-title{font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;}
.cm-filters{display:flex;gap:6px;}
.cm-pill{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;color:#aebfd6;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);padding:4px 8px;border-radius:6px;}
.cm-pill svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* KPI cards */
.cm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:9px;}
.cm-kpi{position:relative;overflow:hidden;padding:9px 10px;border-radius:9px;
  background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);}
.cm-kpi__label{display:block;font-size:9px;color:#8ea3bf;line-height:1.25;min-height:2.3em;}
.cm-kpi__num{display:block;font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;line-height:1.05;margin-top:2px;}
.cm-kpi__num--accent{color:var(--green-400);}
.cm-kpi__delta{display:inline-block;margin-top:4px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.01em;}
.cm-kpi__delta.up{color:var(--green-400);}
.cm-kpi__delta.down{color:#e9756f;}
.cm-kpi__link{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:600;color:var(--green-400);}
.cm-spark{position:absolute;left:0;bottom:0;width:100%;height:18px;opacity:.35;}
.cm-spark polyline{fill:none;stroke:var(--green-400);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* lower panels */
.cm-panels{display:grid;grid-template-columns:1.15fr 1fr;gap:8px;}
.cm-panel{padding:11px 12px;border-radius:9px;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);}
.cm-panel__head{font-family:var(--font-display);font-weight:600;font-size:11px;color:#e7eefb;margin-bottom:11px;}
.cm-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.cm-bars li{display:grid;grid-template-columns:58px 1fr 28px;align-items:center;gap:8px;}
.cm-bars__name{font-family:var(--font-mono);font-size:9px;color:#aebfd6;white-space:nowrap;}
.cm-bar{height:6px;border-radius:4px;background:rgba(255,255,255,0.10);overflow:hidden;}
.cm-bar > span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green-600),var(--green-400));}
.cm-bars__v{font-family:var(--font-mono);font-size:9px;color:#cfe0f2;text-align:right;}

/* risk donut */
.cm-risk{display:flex;align-items:center;gap:12px;}
.cm-donut{position:relative;width:100px;height:100px;flex:none;border-radius:50%;}
.cm-donut::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--green-500) 0 273deg,#F2C24B 273deg 334deg,#F08A24 334deg 350deg,#E0524E 350deg 360deg);
  -webkit-mask:conic-gradient(#000 var(--cmA,360deg), #0000 var(--cmA,360deg));
  mask:conic-gradient(#000 var(--cmA,360deg), #0000 var(--cmA,360deg));
  animation:cmDonutSweep 1.5s cubic-bezier(.2,.7,.2,1) .35s both;}
@property --cmA{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes cmDonutSweep{from{--cmA:0deg;}to{--cmA:360deg;}}
.cm-donut__hole{position:absolute;inset:17px;border-radius:50%;background:#0d2249;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;}
.cm-donut__hole strong{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;line-height:1;}
.cm-donut__hole small{font-family:var(--font-mono);font-size:7px;letter-spacing:.04em;text-transform:uppercase;color:#8ea3bf;}
.cm-legend{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.cm-legend li{display:flex;align-items:center;gap:7px;font-size:10px;color:#aebfd6;}
.cm-legend i{width:8px;height:8px;border-radius:2px;flex:none;}
.cm-legend b{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:#e7eefb;}
.cm-legend i.lo{background:var(--green-500);}
.cm-legend i.me{background:#F2C24B;}
.cm-legend i.hi{background:#F08A24;}
.cm-legend i.cr{background:#E0524E;}

@media (max-width:560px){
  .cm-dash__body{grid-template-columns:1fr;}
  .cm-side{display:none;}
  .cm-kpis{grid-template-columns:repeat(2,1fr);}
  .cm-panels{grid-template-columns:1fr;}
  .cm-pill--date{display:none;}
}

.page-header{
  isolation:isolate;
  padding:calc(var(--nav-h) + 54px) 0 58px;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.96),rgba(246,250,250,0.94)),
    repeating-linear-gradient(90deg,rgba(10,40,104,0.06) 0 1px,transparent 1px 62px),
    repeating-linear-gradient(180deg,rgba(10,40,104,0.045) 0 1px,transparent 1px 62px);
}
.page-header-inner{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(300px,.65fr);
  gap:52px;
  align-items:center;
}
.page-header-copy{max-width:780px;}
.page-header h1{
  font-size:clamp(34px,3.6vw,50px);
  max-width:680px;
  text-wrap:balance;
}
.page-header p{max-width:700px;}
.page-header-orb{display:none;}
.page-header-media{
  position:relative;
  margin:0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(10,40,104,0.12);
  box-shadow:0 28px 70px rgba(10,40,104,0.16);
  background:#071a43;
}
.page-header-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(6,23,59,0.34));
}
.page-header-media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04);
}
@media (max-width:900px){
  .page-header-inner{grid-template-columns:1fr;gap:30px;}
  .page-header h1{font-size:42px;}
  .page-header-media img{aspect-ratio:16/7;}
}
@media (max-width:560px){
  .page-header{padding:calc(var(--nav-h) + 32px) 0 38px;}
  .page-header h1{font-size:34px;}
  .page-header-media img{aspect-ratio:16/9;}
}

.preview-shell{
  border-color:rgba(10,40,104,0.12);
  box-shadow:0 34px 90px rgba(6,23,59,0.16);
}
.preview-topbar{background:linear-gradient(180deg,#fff,var(--surface-soft));}
.preview-main{background:linear-gradient(180deg,#fff,var(--surface));}
.preview-kpis div,
.preview-mini-card{
  background:#fff;
  box-shadow:0 8px 20px rgba(10,40,104,0.05);
}

.fw-art{align-items:center;}
.fw-visual{
  position:relative;
  margin:0;
  width:100%;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(10,40,104,0.12);
  background:#071a43;
  box-shadow:0 28px 80px rgba(10,40,104,0.17);
}
.fw-visual img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.94) contrast(1.04);
}
.fw-visual figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(6,23,59,0.72);
  color:#e7eefb;
  backdrop-filter:blur(12px);
}
.fw-visual figcaption span{
  display:block;
  color:var(--green-400);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.fw-visual figcaption strong{
  display:block;
  font-size:13.5px;
  line-height:1.45;
}

.dark-section,
.stats-section.is-dark,
.demo-section,
.final-cta{
  overflow:hidden;
  background-color:var(--navy-950);
  background-image:
    linear-gradient(115deg,rgba(6,23,59,0.96),rgba(6,23,59,0.86)),
    url("../images/home-grc-visual-XDXNPqh.jpg");
  background-size:cover;
  background-position:center;
}
.dark-card{
  border-color:rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  box-shadow:0 18px 44px rgba(0,0,0,0.18);
}
/* Stats band — cards reusing the shared .card / .icon-circle design language */
.stats-section{background:linear-gradient(180deg,#ffffff 0%,#f3f9f8 100%);border-top:none;}
.stats-grid{grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-item{
  text-align:left;padding:28px 26px 26px;
  background:#ffffff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.stat-item::after{display:none;}              /* drop the old vertical divider */
.stat-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe0e1;}
.stat-item .icon-circle{margin-bottom:16px;}
.stat-value{font-size:clamp(30px,3.4vw,42px);}
.stat-label{margin-top:8px;font-size:14px;color:var(--slate-600);}
/* dark variant (platform / roadmap) keeps its backdrop; only the cards restyle */
.stats-section.is-dark .stat-item{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);box-shadow:0 18px 44px rgba(0,0,0,0.20);}
.stats-section.is-dark .stat-item:hover{border-color:rgba(143,203,82,0.42);}
@media (max-width:680px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media (max-width:560px){.stat-value{font-size:32px;}.stat-item{padding:22px 20px;}}

/* Home "Compliance posture" band — gauge-card + key stats on a dark backdrop */
.posture-section .posture-grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:48px;align-items:center;}
.posture-side h2{color:#fff;font-size:clamp(26px,2.8vw,34px);line-height:1.12;margin:14px 0 26px;max-width:20ch;}
.posture-side .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
.posture-section .stat-item{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);box-shadow:0 18px 44px rgba(0,0,0,0.20);}
.posture-section .stat-item:hover{border-color:rgba(143,203,82,0.42);}
.posture-section .stat-value{color:#fff;}
.posture-section .stat-value em{color:var(--green-400);}
.posture-section .stat-label{color:#9fb2cc;}
@media (max-width:860px){
  .posture-section .posture-grid{grid-template-columns:1fr;gap:34px;justify-items:center;}
  .posture-side{width:100%;}
}
@media (max-width:460px){
  .posture-side .stats-grid{grid-template-columns:1fr;}
}

.cta-band-inner{
  background:
    linear-gradient(135deg,rgba(255,255,255,0.96),rgba(255,255,255,0.86)),
    linear-gradient(90deg,rgba(111,183,42,0.18),rgba(44,130,224,0.16));
  box-shadow:0 20px 54px rgba(10,40,104,0.10);
}

.demo-card{
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 34px 90px rgba(0,0,0,0.28);
}

.final-cta .mark{
  width:116px;
  height:116px;
}
.final-cta .mark img{
  width:86px;
  height:86px;
  object-fit:contain;
}

/* Balanced line breaks on headings for a more polished, professional rag */
.head-row h2,.cta-band-copy h2,.faq-section h2{text-wrap:balance;}
.head-row p,.page-header p,.lede{text-wrap:pretty;}

/* ============================================================
   INTERNAL PAGE EXPERIENCE
   ============================================================ */
.page-header{
  color:#fff;
  padding:calc(var(--nav-h) + 56px) 0 58px;
  border-bottom:0;
  background:
    linear-gradient(115deg,rgba(6,23,59,0.98) 0%,rgba(6,23,59,0.94) 46%,rgba(8,29,76,0.90) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(180deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 74px);
}
.page-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,203,82,0.58),rgba(90,163,232,0.48),transparent);
}
.page-header-inner{
  grid-template-columns:minmax(0,.92fr) minmax(360px,.78fr);
  gap:56px;
}
.page-header-copy{max-width:720px;}
.page-header h1{
  color:#fff;
  font-size:clamp(34px,3.5vw,48px);
  line-height:1.1;
  margin-top:14px;
}
.page-header p{
  color:#d4deeb;
  font-size:17.5px;
  line-height:1.68;
}
.page-header .eyebrow{color:var(--green-400);}
.page-header .eyebrow::before{background:var(--green-400);}
.page-header .breadcrumb{color:#9fb2cc;margin-bottom:22px;}
.page-header .breadcrumb a{color:#9fb2cc;}
.page-header .breadcrumb a:hover{color:#fff;}
.page-header .breadcrumb .sep{color:#6f86a6;}
.page-header .breadcrumb [aria-current]{color:#fff;}
.page-header-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.page-chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.07);
  color:#e7eefb;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.page-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.page-header-media{
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 42px 110px rgba(0,0,0,0.42),0 0 0 1px rgba(143,203,82,0.12);
}
.page-header-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),inset 0 -150px 150px rgba(6,23,59,0.46);
  pointer-events:none;
}
.page-header-media::after{
  z-index:1;
  background:linear-gradient(180deg,rgba(6,23,59,0.02) 34%,rgba(6,23,59,0.44) 100%);
}
.page-header-media img{
  aspect-ratio:16/10;
  filter:saturate(.98) contrast(1.06);
  transform:scale(1.012);
}
.page-header-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(6,23,59,0.72);
  color:#e7eefb;
  backdrop-filter:blur(12px);
}
.page-header-caption span{
  display:block;
  margin-bottom:4px;
  color:var(--green-400);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.page-header-caption strong{
  display:block;
  max-width:52ch;
  font-size:13.5px;
  line-height:1.45;
}
/* ============================================================
   PAGE-HEADER BESPOKE ART (per-page HTML/CSS illustration)
   Replaces the generic stock photo with a visual that represents
   each page. Sits in the page-header's right column on a dark panel.
   ============================================================ */
.ph-art{
  position:relative;
  margin:0;
  min-height:344px;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 26px;
  border-radius:8px;
  overflow:hidden;
  color:#e7eefb;
  font-family:var(--font-body);
  border:1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(ellipse 110% 80% at 86% -15%, rgba(44,130,224,0.20), transparent 58%),
    radial-gradient(ellipse 92% 72% at -6% 116%, rgba(111,183,42,0.16), transparent 60%),
    linear-gradient(160deg,#0b2150,#071a40);
  box-shadow:0 42px 110px rgba(0,0,0,0.42),0 0 0 1px rgba(143,203,82,0.12);
}
.ph-art::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(180deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 48px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
  mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.ph-art__tag{
  position:relative;z-index:1;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-400);
}
.ph-art__tag::before{content:"";width:16px;height:1.5px;background:var(--green-400);}
.ph-art__body{position:relative;z-index:1;flex:1;display:flex;align-items:center;}
.ph-art__body > *{width:100%;}
.ph-art__cap{
  position:relative;z-index:1;
  font-size:12.5px;color:#9fb2cc;line-height:1.45;
  border-top:1px solid rgba(255,255,255,0.10);padding-top:12px;
}

/* How It Works — 4-step flow */
.ph-flow{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;}
.ph-flow li{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.05);}
.ph-flow__n{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:600;font-size:12px;color:var(--navy-950);
  background:linear-gradient(145deg,var(--green-500),var(--green-700));}
.ph-flow__t strong{display:block;font-family:var(--font-display);font-size:14px;color:#fff;line-height:1.1;}
.ph-flow__t small{display:block;margin-top:3px;font-size:11.5px;color:#9fb2cc;}

/* Frameworks — map once, comply many */
.ph-fw{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
.ph-fw__hub{flex:none;width:122px;padding:20px 14px;border-radius:10px;text-align:center;
  border:1px solid rgba(143,203,82,0.35);background:rgba(111,183,42,0.12);}
.ph-fw__hub strong{display:block;font-family:var(--font-display);font-weight:700;font-size:44px;color:#fff;line-height:1;}
.ph-fw__hub strong span{color:var(--green-400);font-size:26px;}
.ph-fw__hub small{display:block;margin-top:8px;font-size:11px;color:#cfe0f2;line-height:1.35;}
.ph-fw__chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none;}
.ph-fw__chips li{position:relative;padding:10px 12px 10px 30px;border-radius:8px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:#e7eefb;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);}
.ph-fw__chips li::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px rgba(111,183,42,0.18);}

/* Industries — sector tiles */
.ph-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ph-tile{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:16px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.05);}
.ph-tile svg{width:24px;height:24px;fill:none;stroke:var(--green-400);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ph-tile span{font-size:11.5px;font-weight:600;color:#cfe0f2;line-height:1.2;}

/* Security — posture panel */
.ph-sec{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
.ph-sec__shield{flex:none;width:96px;height:96px;border-radius:16px;display:grid;place-items:center;
  border:1px solid rgba(143,203,82,0.30);background:linear-gradient(145deg,rgba(44,130,224,0.30),rgba(10,40,104,0.34));}
.ph-sec__shield svg{width:46px;height:46px;fill:none;stroke:var(--green-400);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ph-sec__rows{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;}
.ph-sec__rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:8px;font-size:12.5px;color:#e7eefb;
  border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.05);}
.ph-sec__rows i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(111,183,42,0.22);}
.ph-sec__rows i svg{width:11px;height:11px;fill:none;stroke:var(--green-400);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* Roadmap — Now / Next / Later */
.ph-road{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ph-road__col{padding:14px;border-radius:8px;border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.05);border-top:3px solid var(--slate-500);}
.ph-road__col.is-live{border-top-color:var(--green-500);}
.ph-road__col.is-next{border-top-color:var(--blue-500);}
.ph-road__col.is-later{border-top-color:var(--navy-700);}
.ph-road__col > span{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9fb2cc;}
.ph-road__col.is-live > span{color:var(--green-400);}
.ph-road__col strong{display:block;margin-top:8px;font-family:var(--font-display);font-size:13.5px;color:#fff;}
.ph-road__col em{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:#9fb2cc;line-height:1.4;}

@media (max-width:900px){
  .ph-art{min-height:0;}
}
@media (max-width:560px){
  .ph-art{padding:20px;}
  .ph-fw,.ph-sec{grid-template-columns:1fr;gap:14px;}
  .ph-fw__hub{width:100%;}
  .ph-tiles{grid-template-columns:repeat(2,1fr);}
  .ph-road{grid-template-columns:1fr;}
}

.page-header--how-it-works .page-header-media img{object-position:center 58%;}
.page-header--frameworks .page-header-media img{object-position:center center;}
.page-header--industries .page-header-media img{object-position:48% center;}
.page-header--security .page-header-media img{object-position:58% center;}
.page-header--roadmap .page-header-media img{object-position:center 46%;}

.page-insight-section{
  background:linear-gradient(180deg,#ffffff 0%,var(--surface-soft) 100%);
}
.page-insight-section .head-row p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.page-story-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.story-kicker{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:14px;
  padding:7px 10px;
  border-radius:8px;
  background:var(--green-100);
  color:var(--green-700);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.page-story-card h3{
  font-size:19px;
  margin-bottom:10px;
}
.page-story-card p{
  color:var(--slate-600);
  font-size:14.8px;
  line-height:1.66;
}

.steps-rail::before{display:none;}
.step-card{
  height:100%;
  padding:28px 24px;
  border:1px solid rgba(10,40,104,0.10);
  border-radius:8px;
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  box-shadow:0 14px 36px rgba(10,40,104,0.08);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.step-card:hover{
  transform:translateY(-3px);
  border-color:rgba(23,104,209,0.22);
  box-shadow:0 24px 54px rgba(10,40,104,0.14);
}
.step-num{
  width:44px;
  height:44px;
  border-radius:8px;
}

.roadmap-rail{align-items:stretch;}
.road-card{
  height:100%;
  padding:28px;
  border:1px solid rgba(10,40,104,0.10);
  border-top:4px solid var(--line);
  border-radius:8px;
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  box-shadow:0 14px 36px rgba(10,40,104,0.08);
}
.road-card.is-live{border-top-color:var(--green-500);}
.road-card.is-next{border-top-color:var(--blue-500);}
.road-card.is-following{border-top-color:var(--navy-700);}
.road-card h3{font-size:20px;}

@media (max-width:900px){
  .page-header-inner{
    grid-template-columns:1fr;
    gap:34px;
  }
  .page-header h1{font-size:42px;}
  .page-header-media img{aspect-ratio:16/7;}
}
@media (max-width:560px){
  .page-header{
    padding:calc(var(--nav-h) + 34px) 0 42px;
  }
  .page-header h1{font-size:34px;}
  .page-header p{font-size:16px;}
  .page-header-actions .btn{flex:1;}
  .page-header-media img{aspect-ratio:16/9;}
  .page-header-caption{
    left:10px;
    right:10px;
    bottom:10px;
    padding:11px 12px;
  }
  .page-header-caption strong{font-size:12.5px;}
}

/* ============================================================
   HOME — SECTION SYNC PASS
   One design language across every band: a shared green→blue→navy
   accent system, an alternating light/tinted rhythm, hairline
   separators between sections, and a unified card treatment.
   ============================================================ */
:root{
  --brand-accent:linear-gradient(90deg,var(--green-500),var(--blue-500));
}

/* --- Alternating light surfaces so adjacent bands read as a sequence ---
   marquee(paper) → problem(tinted) → platform(paper) → posture(dark)
   → why(tinted) → cta-band → final-cta(dark)                            */
#platform{
  background:var(--paper);
}
.why-section{
  background:linear-gradient(180deg,#fff 0%,var(--surface-soft) 100%);
}

/* Hairline separators tie the light bands together as one flow. */
#problem,
#platform,
.why-section{
  border-top:1px solid rgba(10,40,104,0.06);
}

/* Consistent centered intro copy for the grid-based bands. */
.head-row.centered p{
  margin-left:auto;
  margin-right:auto;
}

/* --- Capabilities cards: adopt the same accent vocabulary used by the
       problem flow-cards and roadmap cards (top accent bar + lift). --- */
.cap-card{
  position:relative;
  text-align:left;
}
.cap-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--brand-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.cap-card:hover::after{
  transform:scaleX(1);
}

/* Tint each capability icon to echo the green→blue→navy posture palette
   and give the grid a deliberate, synchronized rhythm. */
.cap-card .icon-circle{
  box-shadow:0 10px 22px rgba(10,40,104,0.16);
}

/* Eyebrow underline picks up the shared brand gradient (dark + blue
   variants keep their own colors via their more specific rules). */
.eyebrow::before{
  width:22px;
  background:var(--brand-accent);
}

/* The mid-page CTA band and the comparison header share the same
   green→blue brand sweep for a consistent "payoff" accent. */
.cta-band-inner{
  background:linear-gradient(120deg,var(--green-100) 0%,#eaf3fc 55%,var(--blue-100) 100%);
}

@media (max-width:620px){
  .cap-card{padding:26px 22px;}
}

/* ============================================================
   HOME — THE JOURNEY (horizontal 4-step flow)
   ============================================================ */
.journey-section .jr-grid{
  display:grid;grid-template-columns:0.95fr 1.78fr;gap:44px;align-items:center;
}
.journey-section .jr-intro h2{
  font-size:clamp(26px,3vw,36px);line-height:1.14;margin:14px 0 18px;
}
.journey-section .jr-intro h2 span{color:var(--green-600);}
.journey-section .jr-intro p{
  color:var(--slate-600);font-size:16px;line-height:1.65;margin-bottom:26px;max-width:44ch;
}
.journey-section .jr-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 18px;font-size:14px;font-weight:600;color:var(--navy-900);
  box-shadow:var(--shadow-sm);
}
.journey-section .jr-badge-ico{
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--green-100);
}
.journey-section .jr-badge-ico svg{width:17px;height:17px;stroke:var(--green-600);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

.journey-section .jr-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
.journey-section .jr-card{
  position:relative;
  --accent:var(--green-500);--accent-soft:rgba(111,183,42,0.14);
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  border:1px solid rgba(10,40,104,0.10);
  border-radius:14px;
  padding:22px 20px 26px;
  box-shadow:0 14px 34px rgba(10,40,104,0.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.journey-section .jr-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(10,40,104,0.13);}
.journey-section .jr-card::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  border-radius:0 0 14px 14px;background:var(--accent);
}
/* circular arrow connector sitting in the gap between cards */
.journey-section .jr-card:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-34px;transform:translate(50%,-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(10,40,104,0.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4A8F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:15px;
}
.journey-section .jr-num{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--accent);}
.journey-section .jr-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin:14px 0;background:var(--accent-soft);
}
.journey-section .jr-ico svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.journey-section .jr-card h3{font-size:17px;line-height:1.22;margin-bottom:10px;}
.journey-section .jr-card p{font-size:13.6px;color:var(--slate-600);line-height:1.55;}

.journey-section .jr-card--red{--accent:#E5484D;--accent-soft:#FCEBEA;}
.journey-section .jr-card--amber{--accent:#EE8B2D;--accent-soft:#FDEFE0;}
.journey-section .jr-card--gold{--accent:#DDA62B;--accent-soft:#FBF2DA;}
.journey-section .jr-card--green{--accent:#5FA524;--accent-soft:#ECF7E0;}

@media (max-width:1080px){
  .journey-section .jr-grid{grid-template-columns:1fr;gap:34px;}
  .journey-section .jr-flow{grid-template-columns:repeat(2,1fr);gap:24px;}
  .journey-section .jr-card:not(:last-child)::after{display:none;}
}
@media (max-width:560px){
  .journey-section .jr-flow{grid-template-columns:1fr;gap:16px;}
}

/* ============================================================
   HOME — OUR APPROACH (intro + steps beside a full dashboard)
   ============================================================ */
.approach-section{--ap-red:#E5484D;}
.approach-section .ap-grid{
  display:grid;grid-template-columns:0.82fr 1.18fr;gap:48px;align-items:center;
}
.approach-section .ap-intro h2{font-size:clamp(28px,3.3vw,40px);line-height:1.12;margin:14px 0 18px;}
.approach-section .ap-intro h2 span{color:var(--green-600);}
.approach-section .ap-intro > p{color:var(--slate-600);font-size:16px;line-height:1.65;margin-bottom:28px;max-width:46ch;}
.approach-section .ap-steps{display:flex;flex-direction:column;gap:20px;}
.approach-section .ap-step{display:flex;gap:15px;align-items:flex-start;}
.approach-section .ap-ico{
  width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-500),var(--green-700));
  box-shadow:0 6px 16px rgba(6,23,59,0.10);
}
.approach-section .ap-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.approach-section .ap-step h4{font-size:16.5px;margin-bottom:4px;color:var(--navy-900);}
.approach-section .ap-step p{font-size:14px;color:var(--slate-600);line-height:1.55;}

/* --- Full dashboard --- */
.approach-section .ap-dash{
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  border:1px solid rgba(10,40,104,0.10);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(10,40,104,0.14);
  padding:24px;
}
.approach-section .sd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.approach-section .sd-title{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--navy-900);}
.approach-section .sd-filters{display:flex;gap:8px;}
.approach-section .sd-filter{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--slate-600);background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 11px;
}
.approach-section .sd-filter::after{
  content:"";width:9px;height:9px;flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7E8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
}

.approach-section .sd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.approach-section .sd-kpi{border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff;}
.approach-section .sd-kpi .lbl{display:block;font-size:11px;color:var(--slate-500);margin-bottom:8px;}
.approach-section .sd-kpi .num{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--navy-900);line-height:1;}
.approach-section .sd-kpi .delta{display:block;font-family:var(--font-mono);font-size:10.5px;margin-top:6px;color:var(--slate-500);}
.approach-section .sd-kpi .delta.up{color:var(--green-700);}
.approach-section .sd-kpi .delta.down{color:var(--ap-red);}
.approach-section .sd-kpi .spark{display:block;width:100%;height:22px;margin-top:9px;}
.approach-section .sd-kpi .spark polyline{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.approach-section .sd-kpi.is-green .spark polyline{stroke:var(--green-500);}
.approach-section .sd-kpi.is-amber .spark polyline{stroke:#EE8B2D;}
.approach-section .sd-kpi.is-red .spark polyline{stroke:var(--ap-red);}
.approach-section .sd-kpi.is-blue .spark polyline{stroke:var(--blue-500);}

.approach-section .sd-row{display:grid;grid-template-columns:1.05fr 1fr;gap:12px;margin-bottom:14px;}
.approach-section .sd-panel{border:1px solid var(--line);border-radius:11px;padding:15px 16px;background:#fff;}
.approach-section .sd-panel .lbl{display:block;font-size:12px;font-weight:600;color:var(--navy-900);margin-bottom:13px;}

.approach-section .sd-bars{display:flex;flex-direction:column;gap:11px;list-style:none;padding:0;margin:0;}
.approach-section .sd-bars li{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--slate-600);}
.approach-section .sd-bars li>span:first-child{width:66px;flex:none;}
.approach-section .sd-bar{flex:1;height:8px;border-radius:5px;background:var(--mist-100);overflow:hidden;}
.approach-section .sd-bar>span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--green-600),var(--green-400));}
.approach-section .sd-bars b{font-family:var(--font-mono);font-size:11.5px;color:var(--navy-900);width:36px;text-align:right;}

.approach-section .sd-risk-row{display:flex;align-items:center;gap:14px;}
.approach-section .sd-donut{
  position:relative;width:96px;height:96px;flex:none;border-radius:50%;
  background:conic-gradient(var(--green-500) 0 57%,#F2B84B 57% 88%,var(--ap-red) 88% 98%,#7C5CE0 98% 100%);
}
.approach-section .sd-donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff;}
.approach-section .sd-donut span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.approach-section .sd-donut strong{font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--navy-900);}
.approach-section .sd-donut small{font-size:8.5px;color:var(--slate-500);margin-top:3px;}
.approach-section .sd-legend{flex:1;display:grid;gap:7px;font-size:12px;color:var(--slate-600);}
.approach-section .sd-legend li{display:flex;align-items:center;gap:8px;}
.approach-section .sd-legend i{width:9px;height:9px;border-radius:3px;flex:none;}
.approach-section .sd-legend b{margin-left:auto;font-family:var(--font-mono);color:var(--navy-900);font-weight:600;}
.approach-section .sd-legend b em{color:var(--slate-500);font-style:normal;font-weight:500;}
.approach-section .sd-legend .lo{background:var(--green-500);}
.approach-section .sd-legend .me{background:#F2B84B;}
.approach-section .sd-legend .hi{background:var(--ap-red);}
.approach-section .sd-legend .cr{background:#7C5CE0;}

.approach-section .sd-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.approach-section .sd-stat{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:11px;padding:13px 16px;background:#fff;}
.approach-section .sd-stat-ico{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy-700),var(--navy-950));}
.approach-section .sd-stat-ico svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.approach-section .sd-stat strong{display:block;font-family:var(--font-display);font-size:20px;color:var(--navy-900);line-height:1;}
.approach-section .sd-stat small{font-size:12px;color:var(--slate-500);}

/* Solution proof band (integrated from the former "Our Solution" block) */
.approach-section .ap-proof{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:34px;padding-top:32px;border-top:1px solid var(--line);
}
.approach-section .ap-proof-item{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,var(--surface) 100%);
  box-shadow:0 12px 30px rgba(10,40,104,0.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.approach-section .ap-proof-item:hover{
  transform:translateY(-3px);border-color:rgba(23,104,209,0.22);
  box-shadow:0 22px 46px rgba(10,40,104,0.12);
}
.approach-section .ap-proof-item strong{
  font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;
  color:var(--green-700);
}
.approach-section .ap-proof-item span{font-size:14px;color:var(--slate-600);line-height:1.3;}
@media (max-width:760px){
  .approach-section .ap-proof{grid-template-columns:1fr;gap:14px;}
}

@media (max-width:1080px){
  .approach-section .ap-grid{grid-template-columns:1fr;gap:34px;}
}
@media (max-width:620px){
  .approach-section .sd-kpis{grid-template-columns:1fr 1fr;}
  .approach-section .sd-row{grid-template-columns:1fr;}
  .approach-section .ap-dash{padding:18px;}
}
@media (max-width:420px){
  .approach-section .sd-kpis,
  .approach-section .sd-foot{grid-template-columns:1fr;}
}

/* ============================================================
   HOME - PROBLEM / SOLUTION (full-width stacked blocks)
   ============================================================ */
#problem.problem-compare-section{
  padding:100px 0 108px;
  background:linear-gradient(135deg,#eef4fb 0%,#fbfdff 46%,#edf7ef 100%);
  overflow:hidden;
}
#problem.problem-compare-section .wrap{
  display:grid;
  gap:28px;
}

.pc-block{
  position:relative;
  width:100%;
  padding:46px 48px 44px;
  border:1px solid rgba(10,40,104,0.10);
  border-radius:20px;
  background:#fff;
  box-shadow:0 26px 64px rgba(6,23,59,0.10);
  overflow:hidden;
}
.pc-block::after{                       /* slim accent bar across the top */
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--pc-accent),transparent 68%);
}
.pc-block--problem{
  --pc-accent:#E5484D;--pc-accent-strong:#C9363C;--pc-accent-soft:#FDECEC;
  background:linear-gradient(180deg,#ffffff 0%,#fffafa 100%);
}
.pc-block--solution{
  --pc-accent:var(--green-600);--pc-accent-strong:var(--green-700);--pc-accent-soft:var(--green-100);
  background:linear-gradient(180deg,#ffffff 0%,#f7fcf5 100%);
}

/* Block header */
.pc-head{margin-bottom:32px;}
.pc-kicker{
  display:inline-flex;align-items:center;gap:14px;
  color:var(--pc-accent-strong);
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:.04em;line-height:1;text-transform:uppercase;
}
.pc-kicker-icon{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:14px;background:var(--pc-accent-soft);color:var(--pc-accent);
}
.pc-kicker-icon svg,
.pc-card-icon svg{
  width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.pc-head h2{
  margin-top:22px;color:var(--navy-900);
  font-size:clamp(26px,2.6vw,34px);line-height:1.14;letter-spacing:0;
}
.pc-head h2 span{color:var(--pc-accent-strong);}
.pc-rule{
  display:block;width:70px;height:4px;margin-top:20px;border-radius:4px;
  background:linear-gradient(90deg,var(--pc-accent),var(--blue-400));
}

/* Card row — three across, full width */
.pc-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.pc-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:28px 26px;
  border:1px solid rgba(10,40,104,0.09);
  border-radius:16px;
  background:#fff;                       /* opaque — no grid bleed / checkerboard */
  box-shadow:0 12px 30px rgba(6,23,59,0.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pc-card:hover{
  transform:translateY(-4px);
  border-color:rgba(10,40,104,0.16);
  box-shadow:0 26px 50px rgba(6,23,59,0.13);
}
.pc-card-icon{
  display:grid;place-items:center;width:54px;height:54px;
  border-radius:14px;margin-bottom:20px;
  background:linear-gradient(145deg,var(--pc-accent),var(--pc-accent-strong));
  color:#fff;box-shadow:0 8px 18px rgba(6,23,59,0.12);
}
.pc-card strong{
  display:block;color:var(--navy-900);
  font-family:var(--font-display);font-size:18.5px;line-height:1.25;letter-spacing:0;
}
.pc-card small{
  display:block;margin-top:11px;color:var(--slate-600);
  font-size:14.7px;line-height:1.6;
}
.pc-card-num{
  position:absolute;top:22px;right:24px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  color:var(--pc-accent);opacity:.32;
}

/* Solution highlight strip */
.pc-result{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:24px;padding-top:26px;
  border-top:1px solid rgba(10,40,104,0.10);
}
.pc-result span{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;border:1px solid rgba(10,40,104,0.10);border-radius:13px;
  background:#fff;color:var(--slate-600);font-size:14px;line-height:1.3;
}
.pc-result strong{
  color:var(--green-700);font-family:var(--font-display);
  font-size:30px;line-height:1;letter-spacing:0;
}

@media (max-width:900px){
  .pc-cards{grid-template-columns:1fr;}
  .pc-result{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:600px){
  #problem.problem-compare-section{padding:72px 0;}
  .pc-block{padding:30px 22px;border-radius:16px;}
  .pc-head h2{font-size:27px;}
}

/* ============================================================
   HOME - PROBLEM DIAGNOSTIC REFINE
   ============================================================ */
#problem.problem-compare-section{
  --pc-accent:#E5484D;
  --pc-accent-strong:#C9363C;
  --pc-accent-soft:#FDECEC;
  padding:104px 0 110px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.03) 1px,transparent 1px),
    linear-gradient(180deg,#f6f9fc 0%,#edf3f8 100%);
  background-size:34px 34px,34px 34px,auto;
  overflow:hidden;
}
#problem.problem-compare-section::after{
  display:none;
}
.pc-shell{
  position:relative;
  z-index:1;
}
.pc-layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.78fr);
  gap:38px;
  align-items:center;
  margin-bottom:28px;
}
.pc-copy{
  max-width:690px;
}
.pc-kicker{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--pc-accent-strong);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
}
.pc-kicker-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  flex:none;
  border-radius:14px;
  background:var(--pc-accent-soft);
  color:var(--pc-accent);
  box-shadow:0 10px 24px rgba(229,72,77,0.10);
}
.pc-kicker-icon svg,
.pc-card-icon svg,
.pc-visual-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pc-copy h2{
  max-width:660px;
  margin-top:24px;
  color:var(--navy-900);
  font-size:42px;
  line-height:1.1;
  letter-spacing:0;
}
.pc-copy h2 span{
  color:var(--pc-accent-strong);
}
.pc-lede{
  max-width:660px;
  margin-top:20px;
  color:var(--slate-600);
  font-size:17px;
  line-height:1.68;
}
.pc-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.pc-proof span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 13px;
  border:1px solid rgba(10,40,104,0.10);
  border-radius:8px;
  background:rgba(255,255,255,0.78);
  color:var(--navy-800);
  box-shadow:0 8px 22px rgba(6,23,59,0.055);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pc-proof span::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:2px;
  background:linear-gradient(145deg,var(--pc-accent),#F2B84B);
}
.pc-visual{
  position:relative;
  padding:24px;
  border:1px solid rgba(10,40,104,0.11);
  border-radius:16px;
  background:linear-gradient(180deg,#fff 0%,#fff8f8 100%);
  box-shadow:0 26px 60px rgba(6,23,59,0.12);
  overflow:hidden;
}
.pc-visual::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.035) 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.2;
}
.pc-visual > *{
  position:relative;
  z-index:1;
}
.pc-visual-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.pc-visual-head span{
  color:var(--navy-900);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}
.pc-visual-head strong{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 10px;
  border-radius:8px;
  background:var(--pc-accent-soft);
  color:var(--pc-accent-strong);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
}
.pc-visual-meter{
  height:10px;
  margin-bottom:18px;
  border-radius:8px;
  background:#edf2f5;
  overflow:hidden;
}
.pc-visual-meter span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#F2B84B,var(--pc-accent));
}
.pc-visual-rows{
  display:grid;
  gap:10px;
}
.pc-visual-row{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:58px;
  padding:10px 12px;
  border:1px solid rgba(10,40,104,0.08);
  border-radius:10px;
  background:#fff;
}
.pc-visual-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#fff0f0;
  color:var(--pc-accent);
}
.pc-visual-row span:nth-child(2){
  color:var(--slate-600);
  font-size:13.5px;
}
.pc-visual-row strong{
  color:var(--navy-900);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1;
  text-transform:uppercase;
}
.pc-visual-foot{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.pc-visual-foot span{
  min-height:72px;
  padding:14px;
  border:1px solid rgba(10,40,104,0.08);
  border-radius:10px;
  background:#fff;
  color:var(--slate-600);
  font-size:12.5px;
  line-height:1.3;
}
.pc-visual-foot strong{
  display:block;
  margin-bottom:5px;
  color:var(--pc-accent-strong);
  font-family:var(--font-display);
  font-size:28px;
  line-height:1;
}
.pc-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.pc-card{
  position:relative;
  display:block;
  min-height:238px;
  padding:26px 24px 24px;
  border:1px solid rgba(10,40,104,0.10);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(6,23,59,0.08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pc-card:hover{
  transform:translateY(-4px);
  border-color:rgba(229,72,77,0.22);
  box-shadow:0 26px 54px rgba(6,23,59,0.13);
}
.pc-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,var(--pc-accent),#F2B84B);
}
.pc-card-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:20px;
  border-radius:13px;
  background:linear-gradient(145deg,var(--pc-accent),var(--pc-accent-strong));
  color:#fff;
  box-shadow:0 10px 20px rgba(229,72,77,0.18);
}
.pc-card h3{
  color:var(--navy-900);
  font-size:18px;
  line-height:1.24;
  letter-spacing:0;
}
.pc-card p{
  margin-top:11px;
  color:var(--slate-600);
  font-size:14.6px;
  line-height:1.58;
}
.pc-card-num{
  position:absolute;
  top:25px;
  right:24px;
  color:rgba(229,72,77,0.34);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
}
@media (max-width:1040px){
  .pc-layout{
    grid-template-columns:1fr;
    gap:28px;
  }
  .pc-copy{
    max-width:none;
  }
  .pc-cards{
    grid-template-columns:1fr;
  }
  .pc-card{
    min-height:0;
  }
}
@media (max-width:640px){
  #problem.problem-compare-section{
    padding:74px 0;
  }
  .pc-copy h2{
    font-size:32px;
  }
  .pc-lede{
    font-size:15.8px;
  }
  .pc-proof{
    gap:8px;
  }
  .pc-proof span{
    width:100%;
  }
  .pc-visual{
    padding:18px;
    border-radius:14px;
  }
  .pc-visual-row{
    grid-template-columns:38px minmax(0,1fr);
  }
  .pc-visual-row strong{
    grid-column:2;
  }
  .pc-visual-foot{
    grid-template-columns:1fr;
  }
  .pc-card{
    padding:24px 20px 22px;
    border-radius:12px;
  }
}
@media (max-width:420px){
  .pc-copy h2{
    font-size:29px;
  }
  .pc-kicker-icon{
    width:48px;
    height:48px;
  }
  .pc-card h3{
    font-size:17px;
  }
}

/* ============================================================
   HOME - PROBLEM / APPROACH POLISH
   ============================================================ */
#problem.problem-compare-section{
  padding:78px 0 52px;
  background:
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,0.035) 1px,transparent 1px),
    linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 46%,#edf3f8 46%,#edf3f8 100%);
  background-size:34px 34px,34px 34px,auto;
}
.pc-layout{
  grid-template-columns:minmax(0,1fr) minmax(340px,.66fr);
  gap:46px;
  margin-bottom:24px;
}
.pc-copy h2{
  max-width:690px;
  margin-top:22px;
  color:#fff;
  font-size:clamp(36px,3.8vw,54px);
  line-height:1.06;
}
.pc-copy h2 span{
  color:#ff5a62;
}
.pc-lede{
  max-width:660px;
  margin-top:18px;
  color:#c2d2e6;
  font-size:16.5px;
}
.pc-kicker{
  color:#ff7b82;
}
.pc-kicker-icon{
  background:rgba(255,255,255,0.09);
  color:#ff6b72;
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
}
.pc-proof{
  margin-top:22px;
}
.pc-proof span{
  min-height:36px;
  border-color:rgba(255,255,255,0.13);
  background:rgba(255,255,255,0.075);
  color:#e4edf8;
  box-shadow:none;
}
.pc-proof span::before{
  background:linear-gradient(145deg,#ff6b72,var(--green-400));
}
.pc-visual{
  padding:22px;
  border-color:rgba(255,255,255,0.12);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(255,248,248,0.96) 100%);
  box-shadow:0 30px 70px rgba(0,0,0,0.26);
}
.pc-visual-row{
  min-height:54px;
  border-radius:8px;
}
.pc-visual-foot span{
  min-height:68px;
  border-radius:8px;
}
.pc-cards{
  gap:18px;
}
.pc-card{
  min-height:204px;
  padding:24px 24px 22px;
  border-radius:10px;
  box-shadow:0 18px 42px rgba(6,23,59,0.11);
}
.pc-card:hover{
  box-shadow:0 26px 54px rgba(6,23,59,0.15);
}
.pc-card::after{
  border-radius:10px 10px 0 0;
  background:linear-gradient(90deg,#ff5a62,var(--green-400),var(--blue-400));
}
.pc-card-icon{
  width:50px;
  height:50px;
  margin-bottom:18px;
  border-radius:12px;
  background:linear-gradient(145deg,#f04b55,#bc2f3a);
}
.pc-card h3{
  font-size:17.5px;
}
.pc-card p{
  font-size:14.2px;
  line-height:1.55;
}
.pc-bridge{
  display:grid;
  place-items:center;
  height:74px;
  margin:14px 0 -88px;
  pointer-events:none;
}
.pc-bridge span{
  position:relative;
  display:block;
  width:42px;
  height:64px;
}
.pc-bridge span::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:14px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,#ff5a62,var(--green-500),var(--blue-400));
  transform:translateX(-50%);
}
.pc-bridge span::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:42px;
  height:42px;
  border:1px solid rgba(10,40,104,0.12);
  border-radius:50%;
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F9A1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m6 13 6 6 6-6'/%3E%3C/svg%3E")
    center/21px 21px no-repeat;
  box-shadow:0 16px 36px rgba(6,23,59,0.16);
  transform:translateX(-50%);
}
.approach-section{
  padding-top:82px;
}
.approach-section .ap-grid{
  gap:42px;
}

@media (max-width:1040px){
  #problem.problem-compare-section{
    background:
      linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px),
      linear-gradient(180deg,rgba(255,255,255,0.035) 1px,transparent 1px),
      linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 58%,#edf3f8 58%,#edf3f8 100%);
    background-size:34px 34px,34px 34px,auto;
  }
  .pc-layout{
    gap:24px;
  }
}
@media (max-width:640px){
  #problem.problem-compare-section{
    padding:62px 0 42px;
    background:
      linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px),
      linear-gradient(180deg,rgba(255,255,255,0.035) 1px,transparent 1px),
      linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 66%,#edf3f8 66%,#edf3f8 100%);
    background-size:30px 30px,30px 30px,auto;
  }
  .pc-copy h2{
    font-size:34px;
  }
  .pc-proof span{
    width:auto;
  }
  .pc-bridge{
    height:62px;
    margin:10px 0 -74px;
  }
  .pc-bridge span{
    height:54px;
  }
  .approach-section{
    padding-top:72px;
  }
}

/* ============================================================
   HOME - PROBLEM TONED DOWN
   ============================================================ */
#problem.problem-compare-section{
  padding:74px 0 38px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.034) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.026) 1px,transparent 1px),
    radial-gradient(circle at 10% 8%,rgba(10,40,104,0.08),transparent 34%),
    radial-gradient(circle at 88% 8%,rgba(111,183,42,0.075),transparent 32%),
    linear-gradient(180deg,#f8fbfd 0%,#eef5f6 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}
.pc-layout{
  grid-template-columns:minmax(0,1fr) minmax(330px,.62fr);
  gap:42px;
  margin-bottom:20px;
}
.pc-copy h2{
  max-width:720px;
  color:var(--navy-900);
  font-size:clamp(34px,3.45vw,50px);
  line-height:1.08;
}
.pc-copy h2 span{
  color:#D33C45;
}
.pc-lede{
  max-width:690px;
  color:var(--slate-600);
  font-size:16.2px;
  line-height:1.62;
}
.pc-kicker{
  color:#D33C45;
}
.pc-kicker-icon{
  background:#FDECEC;
  color:#D33C45;
  border:1px solid rgba(211,60,69,0.14);
  box-shadow:0 10px 24px rgba(211,60,69,0.09);
}
.pc-proof{
  margin-top:20px;
}
.pc-proof span{
  min-height:34px;
  border-color:rgba(10,40,104,0.10);
  background:rgba(255,255,255,0.82);
  color:var(--navy-800);
  box-shadow:0 8px 20px rgba(6,23,59,0.05);
}
.pc-proof span::before{
  background:linear-gradient(145deg,#D33C45,var(--green-500));
}
.pc-visual{
  padding:20px;
  border-color:rgba(10,40,104,0.11);
  border-radius:10px;
  background:#fff;
  box-shadow:0 20px 46px rgba(6,23,59,0.12);
}
.pc-visual::before{
  opacity:.08;
}
.pc-visual-head{
  margin-bottom:16px;
}
.pc-visual-head strong{
  background:#FDECEC;
  color:#C9363C;
}
.pc-visual-meter{
  height:8px;
  margin-bottom:16px;
}
.pc-visual-meter span{
  background:linear-gradient(90deg,#F2B84B,#D33C45);
}
.pc-visual-row{
  min-height:50px;
  border-radius:8px;
  background:#fff;
}
.pc-visual-icon{
  background:#FDECEC;
  color:#D33C45;
}
.pc-visual-foot span{
  min-height:62px;
  border-radius:8px;
}
.pc-visual-foot strong{
  color:#D33C45;
  font-size:26px;
}
.pc-cards{
  gap:16px;
}
.pc-card{
  min-height:186px;
  padding:22px 22px 20px;
  border-color:rgba(10,40,104,0.09);
  border-radius:8px;
  box-shadow:0 14px 32px rgba(6,23,59,0.08);
}
.pc-card:hover{
  border-color:rgba(10,40,104,0.16);
  box-shadow:0 22px 44px rgba(6,23,59,0.12);
}
.pc-card::after{
  height:2px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(90deg,#D33C45,var(--green-500),var(--blue-500));
  opacity:.9;
}
.pc-card-icon{
  width:46px;
  height:46px;
  margin-bottom:16px;
  border-radius:10px;
  background:linear-gradient(145deg,#E5484D,#C9363C);
  box-shadow:0 10px 20px rgba(211,60,69,0.16);
}
.pc-card h3{
  font-size:17px;
}
.pc-card p{
  margin-top:9px;
  font-size:14px;
  line-height:1.52;
}
.pc-card-num{
  top:22px;
  right:22px;
}
.pc-bridge{
  height:58px;
  margin:8px 0 -68px;
}
.pc-bridge span{
  width:36px;
  height:52px;
}
.pc-bridge span::before{
  bottom:12px;
  background:linear-gradient(180deg,rgba(211,60,69,0.75),var(--green-500));
}
.pc-bridge span::after{
  width:36px;
  height:36px;
  background-size:18px 18px;
  box-shadow:0 12px 26px rgba(6,23,59,0.13);
}
.approach-section{
  padding-top:68px;
}

@media (max-width:1040px){
  #problem.problem-compare-section{
    background:
      linear-gradient(90deg,rgba(10,40,104,0.034) 1px,transparent 1px),
      linear-gradient(180deg,rgba(10,40,104,0.026) 1px,transparent 1px),
      radial-gradient(circle at 10% 8%,rgba(10,40,104,0.08),transparent 34%),
      radial-gradient(circle at 88% 8%,rgba(111,183,42,0.075),transparent 32%),
      linear-gradient(180deg,#f8fbfd 0%,#eef5f6 100%);
    background-size:34px 34px,34px 34px,auto,auto,auto;
  }
  .pc-layout{
    grid-template-columns:1fr;
    gap:22px;
  }
}
@media (max-width:640px){
  #problem.problem-compare-section{
    padding:58px 0 34px;
    background:
      linear-gradient(90deg,rgba(10,40,104,0.032) 1px,transparent 1px),
      linear-gradient(180deg,rgba(10,40,104,0.024) 1px,transparent 1px),
      linear-gradient(180deg,#f8fbfd 0%,#eef5f6 100%);
    background-size:30px 30px,30px 30px,auto;
  }
  .pc-copy h2{
    font-size:32px;
  }
  .pc-lede{
    font-size:15.5px;
  }
  .pc-visual{
    padding:16px;
  }
  .pc-card{
    padding:21px 18px 19px;
  }
  .pc-bridge{
    margin:6px 0 -62px;
  }
  .approach-section{
    padding-top:62px;
  }
}

/* ============================================================
   HOME - FINAL PROBLEM / APPROACH CLEANUP
   ============================================================ */
#problem.problem-compare-section{
  padding:70px 0 0;
  overflow:visible;
  background:
    linear-gradient(90deg,rgba(23,104,209,0.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(23,104,209,0.036) 1px,transparent 1px),
    radial-gradient(circle at 12% 10%,rgba(23,104,209,0.10),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(90,163,232,0.12),transparent 30%),
    linear-gradient(180deg,#f5faff 0%,#eaf3fb 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}
#problem.problem-compare-section::after{
  display:none;
}
.pc-layout{
  margin-bottom:0;
}
.pc-cards{
  display:none;
}
.pc-visual{
  border-color:rgba(23,104,209,0.14);
  box-shadow:0 20px 46px rgba(10,40,104,0.12);
}
.pc-bridge{
  position:relative;
  z-index:6;
  display:grid;
  place-items:center;
  height:72px;
  margin:24px 0 -38px;
  pointer-events:none;
}
.pc-bridge span{
  width:38px;
  height:62px;
}
.pc-bridge span::before{
  top:0;
  bottom:12px;
  background:linear-gradient(180deg,var(--blue-500),var(--green-500));
}
.pc-bridge span::after{
  width:38px;
  height:38px;
  border-color:rgba(23,104,209,0.18);
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231768D1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m6 13 6 6 6-6'/%3E%3C/svg%3E")
    center/19px 19px no-repeat;
  box-shadow:0 14px 30px rgba(10,40,104,0.16);
}
.approach-section{
  padding-top:86px;
  background:
    linear-gradient(90deg,rgba(23,104,209,0.040) 1px,transparent 1px),
    linear-gradient(180deg,rgba(23,104,209,0.032) 1px,transparent 1px),
    linear-gradient(180deg,#eaf3fb 0%,#f6fbff 100%);
  background-size:34px 34px,34px 34px,auto;
}
.approach-section .ap-dash{
  border-color:rgba(23,104,209,0.14);
  background:linear-gradient(180deg,#fff 0%,#f8fcff 100%);
}
.approach-section .sd-foot{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.approach-section .sd-stat{
  min-width:0;
  padding:12px 14px;
}
.approach-section .sd-stat strong{
  font-size:19px;
}
.approach-section .sd-stat small{
  white-space:normal;
}
.approach-section .ap-proof{
  display:none;
}

@media (max-width:760px){
  .approach-section .sd-foot{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  #problem.problem-compare-section{
    padding-top:56px;
    background:
      linear-gradient(90deg,rgba(23,104,209,0.040) 1px,transparent 1px),
      linear-gradient(180deg,rgba(23,104,209,0.032) 1px,transparent 1px),
      linear-gradient(180deg,#f5faff 0%,#eaf3fb 100%);
    background-size:30px 30px,30px 30px,auto;
  }
  .pc-bridge{
    height:62px;
    margin:18px 0 -34px;
  }
  .pc-bridge span{
    height:54px;
  }
  .approach-section{
    padding-top:76px;
    background-size:30px 30px,30px 30px,auto;
  }
}

/* ============================================================
   HOME - APPROACH ARROW AND SECTION DETAIL
   ============================================================ */
.pc-bridge{
  height:88px;
  margin:26px 0 -48px;
}
.pc-bridge span{
  width:56px;
  height:76px;
}
.pc-bridge span::before{
  bottom:18px;
  width:3px;
  background:linear-gradient(180deg,var(--blue-400),var(--blue-600));
  box-shadow:0 0 0 4px rgba(44,130,224,0.08);
}
.pc-bridge span::after{
  width:56px;
  height:56px;
  border:1px solid rgba(255,255,255,0.42);
  background:
    linear-gradient(145deg,var(--blue-500),var(--navy-800))
    center/100% no-repeat;
  box-shadow:0 18px 42px rgba(10,40,104,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.pc-bridge span{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v14'/%3E%3Cpath d='m5.5 12.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E")
    center bottom 15px/27px 27px no-repeat;
}
.approach-section{
  position:relative;
  padding-top:100px;
  overflow:hidden;
}
.approach-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:26px;
  width:1px;
  height:54px;
  background:linear-gradient(180deg,rgba(23,104,209,0.40),rgba(79,154,31,0.18));
  transform:translateX(-50%);
}
.approach-section .wrap{
  position:relative;
  z-index:1;
}
.approach-section .ap-intro{
  position:relative;
  padding:28px 0 28px 28px;
}
.approach-section .ap-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:26px;
  bottom:26px;
  width:3px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--blue-500),var(--green-500));
}
.approach-section .ap-dash{
  border-radius:14px;
  box-shadow:0 28px 70px rgba(10,40,104,0.15);
}
.approach-section .sd-stat-ico{
  background:linear-gradient(145deg,var(--blue-600),var(--navy-900));
}

@media (max-width:640px){
  .pc-bridge{
    height:78px;
    margin:20px 0 -44px;
  }
  .pc-bridge span{
    width:50px;
    height:68px;
    background-size:24px 24px;
    background-position:center bottom 13px;
  }
  .pc-bridge span::after{
    width:50px;
    height:50px;
  }
  .approach-section{
    padding-top:88px;
  }
  .approach-section .ap-intro{
    padding-left:20px;
  }
}

/* ============================================================
   HOME - CLEAN NEUTRAL TRANSITION
   ============================================================ */
#problem.problem-compare-section{
  padding:64px 0 18px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.024) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.020) 1px,transparent 1px),
    linear-gradient(180deg,#fbfdff 0%,#f4f8fb 100%);
  background-size:34px 34px,34px 34px,auto;
}
.pc-layout{
  gap:38px;
}
.pc-visual{
  border-color:rgba(23,104,209,0.20);
  background:
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 18px 44px rgba(10,40,104,0.12);
}
.pc-visual-head span{
  color:var(--navy-900);
}
.pc-visual-head strong{
  background:var(--blue-100);
  color:var(--blue-600);
}
.pc-visual-icon{
  background:var(--blue-100);
  color:var(--blue-600);
}
.pc-visual-meter span{
  background:linear-gradient(90deg,var(--blue-500),var(--green-500));
}
.pc-visual-foot strong{
  color:var(--blue-600);
}
.pc-proof span::before{
  background:linear-gradient(145deg,var(--blue-500),var(--green-500));
}
.pc-kicker{
  color:var(--blue-600);
}
.pc-kicker-icon{
  background:var(--blue-100);
  color:var(--blue-600);
  border-color:rgba(23,104,209,0.16);
  box-shadow:0 10px 24px rgba(23,104,209,0.10);
}
.pc-bridge{
  height:46px;
  margin:14px 0 -20px;
}
.pc-bridge span{
  width:44px;
  height:44px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E")
    center/22px 22px no-repeat;
}
.pc-bridge span::before{
  display:none;
}
.pc-bridge span::after{
  width:44px;
  height:44px;
  border:none;
  border-radius:14px;
  background:linear-gradient(145deg,var(--blue-500),var(--navy-800));
  box-shadow:0 12px 28px rgba(23,104,209,0.24);
}
.approach-section{
  padding-top:50px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.020) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.018) 1px,transparent 1px),
    linear-gradient(180deg,#f4f8fb 0%,#fbfdff 100%);
  background-size:34px 34px,34px 34px,auto;
}
.approach-section::before,
.approach-section .ap-intro::before{
  display:none;
}
.approach-section .ap-intro{
  padding:0;
}
.approach-section .ap-grid{
  gap:34px;
}
.approach-section .ap-dash{
  border-color:rgba(23,104,209,0.16);
  box-shadow:0 22px 56px rgba(10,40,104,0.12);
}
.approach-section .sd-kpi,
.approach-section .sd-panel,
.approach-section .sd-stat{
  border-color:rgba(23,104,209,0.14);
}

@media (max-width:640px){
  #problem.problem-compare-section{
    padding:52px 0 14px;
    background:
      linear-gradient(90deg,rgba(10,40,104,0.022) 1px,transparent 1px),
      linear-gradient(180deg,rgba(10,40,104,0.018) 1px,transparent 1px),
      linear-gradient(180deg,#fbfdff 0%,#f4f8fb 100%);
    background-size:30px 30px,30px 30px,auto;
  }
  .pc-bridge{
    height:42px;
    margin:12px 0 -18px;
  }
  .pc-bridge span,
  .pc-bridge span::after{
    width:40px;
    height:40px;
  }
  .pc-bridge span{
    background-size:20px 20px;
  }
  .approach-section{
    padding-top:44px;
    background-size:30px 30px,30px 30px,auto;
  }
}

/* ============================================================
   HOME - PROBLEM RED ACCENTS + ARROW FIX
   ============================================================ */
#problem.problem-compare-section{
  --pc-danger:#D33C45;
  --pc-danger-dark:#B92D36;
  --pc-danger-soft:#FDECEC;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.020) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.017) 1px,transparent 1px),
    radial-gradient(circle at 14% 12%,rgba(211,60,69,0.055),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f7fafc 100%);
  background-size:34px 34px,34px 34px,auto,auto;
}
.pc-kicker{
  color:var(--pc-danger);
}
.pc-kicker-icon{
  background:var(--pc-danger-soft);
  color:var(--pc-danger);
  border-color:rgba(211,60,69,0.16);
  box-shadow:0 10px 24px rgba(211,60,69,0.10);
}
.pc-copy h2 span{
  color:var(--pc-danger);
}
.pc-proof span::before{
  background:linear-gradient(145deg,var(--pc-danger),#F2B84B);
}
.pc-visual{
  border-color:rgba(211,60,69,0.16);
  background:linear-gradient(180deg,#fff 0%,#fffafa 100%);
  box-shadow:0 18px 44px rgba(6,23,59,0.11);
}
.pc-visual-head strong,
.pc-visual-icon{
  background:var(--pc-danger-soft);
  color:var(--pc-danger);
}
.pc-visual-meter span{
  background:linear-gradient(90deg,#F2B84B,var(--pc-danger));
}
.pc-visual-foot strong{
  color:var(--pc-danger);
}
.pc-bridge{
  height:48px;
  margin:16px 0 -22px;
}
.pc-bridge span{
  position:relative;
  width:42px;
  height:42px;
  background:none;
}
.pc-bridge span::before{
  display:block;
  content:"";
  position:absolute;
  left:50%;
  top:-20px;
  width:2px;
  height:24px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(211,60,69,0),rgba(211,60,69,0.72));
  transform:translateX(-50%);
  box-shadow:none;
}
.pc-bridge span::after{
  content:"";
  position:absolute;
  inset:0;
  width:42px;
  height:42px;
  border:1px solid rgba(211,60,69,0.18);
  border-radius:50%;
  background:
    linear-gradient(145deg,var(--pc-danger),var(--pc-danger-dark)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:auto,21px 21px;
  box-shadow:0 12px 26px rgba(211,60,69,0.22);
}

@media (max-width:640px){
  #problem.problem-compare-section{
    background:
      linear-gradient(90deg,rgba(10,40,104,0.018) 1px,transparent 1px),
      linear-gradient(180deg,rgba(10,40,104,0.015) 1px,transparent 1px),
      linear-gradient(180deg,#fff 0%,#f7fafc 100%);
    background-size:30px 30px,30px 30px,auto;
  }
  .pc-bridge{
    height:44px;
    margin:12px 0 -20px;
  }
  .pc-bridge span,
  .pc-bridge span::after{
    width:38px;
    height:38px;
  }
}

/* ============================================================
   HOME - RED PROBLEM CARD / GREEN APPROACH CARD
   ============================================================ */
.pc-visual{
  border:none;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.22),rgba(255,255,255,0.03)),
    linear-gradient(145deg,#b8898c 0%,#d53a44 100%);
  box-shadow:0 24px 58px rgba(185,45,54,0.22);
}
.pc-visual::before{
  display:none;
}
.pc-visual-head span{
  color:var(--navy-900);
}
.pc-visual-head strong{
  background:#fff;
  color:var(--pc-danger);
}
.pc-visual-meter{
  background:rgba(255,255,255,0.72);
}
.pc-visual-meter span{
  background:linear-gradient(90deg,#F2B84B,var(--pc-danger));
}
.pc-visual-row,
.pc-visual-foot span{
  border:none;
  background:#fff;
  box-shadow:0 8px 18px rgba(96,20,25,0.08);
}
.pc-visual-icon{
  background:var(--pc-danger-soft);
  color:var(--pc-danger);
}
.pc-visual-foot strong{
  color:var(--pc-danger);
}
.pc-bridge{
  height:54px;
  margin:18px 0 -24px;
}
.pc-bridge span{
  width:44px;
  height:44px;
}
.pc-bridge span::before{
  top:-24px;
  height:28px;
  background:linear-gradient(180deg,rgba(211,60,69,0),rgba(211,60,69,0.68));
}
.pc-bridge span::after{
  width:44px;
  height:44px;
  border:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E") center/22px 22px no-repeat,
    linear-gradient(145deg,var(--pc-danger),var(--pc-danger-dark));
  box-shadow:0 14px 30px rgba(211,60,69,0.28);
}
.approach-section .ap-dash{
  border:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.94),rgba(255,255,255,0.82)),
    linear-gradient(145deg,#ecf7e3 0%,#dff1d5 100%);
  box-shadow:0 24px 60px rgba(63,138,28,0.14);
}
.approach-section .sd-kpi,
.approach-section .sd-panel,
.approach-section .sd-stat{
  border-color:rgba(63,138,28,0.16);
  background:#fff;
}
.approach-section .sd-stat-ico{
  background:linear-gradient(145deg,var(--green-500),var(--green-700));
}

@media (max-width:640px){
  .pc-bridge{
    height:50px;
    margin:14px 0 -22px;
  }
  .pc-bridge span,
  .pc-bridge span::after{
    width:40px;
    height:40px;
  }
  .pc-bridge span::after{
    background-size:20px 20px, auto;
  }
}

/* ============================================================
   HOME - CONNECTED PROBLEM / APPROACH FINISH
   ============================================================ */
#problem.problem-compare-section{
  padding-bottom:0;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.018) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.014) 1px,transparent 1px),
    radial-gradient(circle at 16% 20%,rgba(211,60,69,0.055),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f7fafc 100%);
  background-size:34px 34px,34px 34px,auto,auto;
}
.pc-bridge{
  height:44px;
  margin:10px 0 -18px;
}
.pc-bridge span{
  width:40px;
  height:40px;
}
.pc-bridge span::before{
  display:none;
}
.pc-bridge span::after{
  width:40px;
  height:40px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E") center/20px 20px no-repeat,
    linear-gradient(145deg,var(--blue-500),var(--navy-800));
  box-shadow:0 12px 28px rgba(23,104,209,0.22);
}
.approach-section{
  padding-top:42px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.018) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.014) 1px,transparent 1px),
    linear-gradient(180deg,#f7fafc 0%,#fbfdff 100%);
  background-size:34px 34px,34px 34px,auto;
}
.approach-section .ap-intro{
  padding:30px 32px;
  border:1px solid rgba(79,154,31,0.16);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 8%,rgba(143,203,82,0.26),transparent 34%),
    linear-gradient(145deg,#f4fbef 0%,#e5f4dc 52%,#f9fdf6 100%);
  box-shadow:0 18px 44px rgba(63,138,28,0.10);
}
.approach-section .ap-intro::before{
  display:none;
}
.approach-section .sd-foot .sd-stat{
  border-color:rgba(23,104,209,0.20);
  background:linear-gradient(180deg,#fff 0%,#f4f9ff 100%);
  box-shadow:0 10px 24px rgba(23,104,209,0.08);
}
.approach-section .sd-foot .sd-stat-ico{
  background:linear-gradient(145deg,var(--blue-500),var(--navy-800));
  box-shadow:0 10px 22px rgba(23,104,209,0.22);
}
.approach-section .sd-foot .sd-stat strong{
  color:var(--navy-900);
}
.approach-section .sd-foot .sd-stat small{
  color:var(--slate-600);
}

@media (max-width:640px){
  .approach-section{
    padding-top:38px;
    background-size:30px 30px,30px 30px,auto;
  }
  .approach-section .ap-intro{
    padding:24px 20px;
  }
}

/* ============================================================
   HOME - BLUE ARROW / GREEN APPROACH GRADIENT
   ============================================================ */
.pc-bridge span::before{
  background:linear-gradient(180deg,rgba(44,130,224,0),rgba(44,130,224,0.72));
}
.pc-bridge span::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E") center/22px 22px no-repeat,
    linear-gradient(145deg,var(--blue-500),var(--navy-800));
  box-shadow:0 14px 30px rgba(23,104,209,0.28);
}
.approach-section .ap-dash{
  background:
    linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.78)),
    radial-gradient(circle at 16% 10%,rgba(143,203,82,0.34),transparent 32%),
    radial-gradient(circle at 86% 92%,rgba(79,154,31,0.20),transparent 36%),
    linear-gradient(145deg,#f3faed 0%,#e0f1d6 48%,#f7fcf4 100%);
  border:1px solid rgba(79,154,31,0.18);
  box-shadow:0 26px 64px rgba(63,138,28,0.16);
}
.approach-section .sd-kpi,
.approach-section .sd-panel,
.approach-section .sd-stat{
  border-color:rgba(79,154,31,0.18);
  background:rgba(255,255,255,0.88);
}

/* Flat navy controls requested for the arrow and proof icons. */
.pc-bridge span::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v12'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E") center/22px 22px no-repeat,
    #0a2868;
}
.approach-section .sd-foot .sd-stat-ico{
  background:#0a2868;
}

/* ============================================================
   HOME - APPROACH TO CAPABILITIES RHYTHM
   ============================================================ */
.approach-section{
  padding-bottom:56px;
}
#platform{
  padding-top:62px;
  background:
    linear-gradient(180deg,#fbfdff 0%,#fff 100%);
}
#platform .head-row{
  margin-bottom:40px;
}
#platform .head-row h2{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
#platform .head-row p{
  max-width:760px;
}
#platform .cap-card{
  border-color:rgba(10,40,104,0.10);
}
#platform .cap-card .icon-circle{
  background:#0a2868;
  box-shadow:0 14px 28px rgba(10,40,104,0.18);
}
#platform .cap-card:nth-child(1) .icon-circle,
#platform .cap-card:nth-child(4) .icon-circle{
  background:#3F8A1C;
  box-shadow:0 14px 28px rgba(63,138,28,0.18);
}
#platform .cap-card:nth-child(2) .icon-circle,
#platform .cap-card:nth-child(5) .icon-circle{
  background:#1768D1;
  box-shadow:0 14px 28px rgba(23,104,209,0.18);
}
#platform .cap-card:nth-child(3) .icon-circle,
#platform .cap-card:nth-child(6) .icon-circle{
  background:#0a2868;
}

@media (max-width:760px){
  .approach-section{
    padding-bottom:46px;
  }
  #platform{
    padding-top:52px;
  }
  #platform .head-row{
    margin-bottom:30px;
  }
}

/* ============================================================
   HOME - CAPABILITY CARD SOFT GRADIENTS
   ============================================================ */
#platform .cap-card{
  overflow:hidden;
  border-color:rgba(10,40,104,0.10);
  background:
    radial-gradient(circle at 88% 8%,var(--cap-glow,rgba(10,40,104,0.05)),transparent 34%),
    linear-gradient(145deg,#fff 0%,var(--cap-soft,#f8fbff) 100%);
}
#platform .cap-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,var(--cap-line,#0a2868),transparent 72%);
  height:3px;
  opacity:.75;
}
#platform .cap-card:nth-child(1),
#platform .cap-card:nth-child(4){
  --cap-soft:#f2faed;
  --cap-glow:rgba(111,183,42,0.16);
  --cap-line:#3F8A1C;
}
#platform .cap-card:nth-child(2),
#platform .cap-card:nth-child(5){
  --cap-soft:#f1f7ff;
  --cap-glow:rgba(23,104,209,0.14);
  --cap-line:#1768D1;
}
#platform .cap-card:nth-child(3),
#platform .cap-card:nth-child(6){
  --cap-soft:#f3f6fb;
  --cap-glow:rgba(10,40,104,0.12);
  --cap-line:#0a2868;
}
#platform .cap-card:hover{
  border-color:color-mix(in srgb,var(--cap-line) 22%,rgba(10,40,104,0.10));
}

/* =====================================================================
   SITE CHROME + FINISHING PASS
   One block for the header (it replaces the stack of superseded nav /
   brand experiments that used to live here) plus the shared finishing
   details: layered elevation, restrained accents, tabular figures and
   the sign-in entry point.
   ===================================================================== */

/* ---------- Elevation: layered and low-glare instead of one flat haze ---------- */
:root{
  --nav-h:76px;
  --nav-h-scrolled:66px;
  --shadow-sm:0 1px 2px rgba(6,23,59,0.05), 0 4px 12px -6px rgba(6,23,59,0.12);
  --shadow-md:0 1px 2px rgba(6,23,59,0.05), 0 14px 32px -16px rgba(6,23,59,0.26);
  --shadow-lg:0 2px 6px rgba(6,23,59,0.06), 0 34px 68px -28px rgba(6,23,59,0.40);
}

/* ---------- Header ---------- */
.nav{
  height:var(--nav-h);
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:inset 0 -1px 0 rgba(10,40,104,0.09);
  transition:height .28s cubic-bezier(.2,.7,.2,1), background .28s ease, box-shadow .28s ease;
}
.nav.is-scrolled{
  height:var(--nav-h-scrolled);
  background:rgba(255,255,255,0.98);
  box-shadow:inset 0 -1px 0 rgba(10,40,104,0.10), 0 12px 34px -22px rgba(6,23,59,0.55);
}
.nav-inner{max-width:1240px;padding:0 28px;gap:24px;}

/* Brand: the mark on its own, no drop shadow — it stays crisp when it shrinks. */
.brand{min-width:0;gap:0;}
.brand .brand-logo--mark-full{
  display:block;width:auto;height:60px;max-width:none;object-fit:contain;filter:none;
  transition:height .28s cubic-bezier(.2,.7,.2,1);
}
.nav.is-scrolled .brand .brand-logo--mark-full{height:52px;}

/* Links sit centred between the brand and the action cluster. */
.nav-links{flex:1;justify-content:center;gap:26px;}
.nav-links a{
  font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--slate-600);padding:8px 0;
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--navy-900);}
.nav-links a.active{color:var(--navy-900);font-weight:600;}
.nav-links a::after{height:2px;border-radius:2px;}

/* Action cluster: a quiet sign-in next to the one primary CTA. */
.nav-cta{gap:12px;}
.nav-cta::before{content:"";width:1px;height:26px;background:var(--line);flex:none;}
.nav-login{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:8px;border:1.5px solid var(--line);background:#fff;
  font-size:14.5px;font-weight:600;line-height:1;color:var(--navy-900);
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-login:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff;box-shadow:var(--shadow-sm);}
.nav-login svg{
  width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.nav-demo{padding:11px 20px;font-size:14.5px;font-weight:600;}

/* Sign-in + demo repeated inside the mobile drawer, where .nav-login is hidden. */
.nav-drawer-cta{display:none;}

@media (max-width:1080px){
  .nav-links{gap:20px;}
  .nav-links a{font-size:14px;}
  .nav-login{padding:10px 13px;font-size:14px;}
  .nav-demo{padding:11px 16px;font-size:14px;}
}
@media (max-width:980px){
  .nav-links{
    top:var(--nav-h);flex:none;justify-content:flex-start;gap:0;
    border-top:1px solid var(--line);box-shadow:0 26px 44px -24px rgba(6,23,59,0.55);
  }
  .nav.is-scrolled .nav-links{top:var(--nav-h-scrolled);}
  .nav-links a{padding:13px 4px;}
  .nav-links a::after{display:none;}
  .nav-cta::before{display:none;}
  .nav-login{display:none;}
  .nav-drawer-cta{display:grid;gap:10px;margin-top:16px;}
  .nav-drawer-cta a{padding:13px 18px;border-bottom:0;font-size:15px;}
}
@media (max-width:680px){
  .brand .brand-logo--mark-full{height:54px;}
  .nav.is-scrolled .brand .brand-logo--mark-full{height:48px;}
  .nav-demo{padding:10px 15px;font-size:13.5px;}
}
@media (max-width:420px){
  .nav-inner{gap:10px;padding:0 16px;}
  .brand .brand-logo--mark-full{height:48px;}
  .nav.is-scrolled .brand .brand-logo--mark-full{height:44px;}
  .nav-demo{padding:10px 13px;font-size:13px;}
}

/* ---------- Buttons: weight from shape, not from glow ---------- */
.btn{letter-spacing:0.01em;}
.btn-primary{box-shadow:0 1px 2px rgba(6,23,59,0.06), 0 12px 26px -14px rgba(63,138,28,0.85);}
.btn-primary:hover{box-shadow:0 2px 4px rgba(6,23,59,0.07), 0 16px 32px -14px rgba(63,138,28,0.95);}
.btn-outline{border-color:rgba(10,40,104,0.22);}
.btn-outline:hover{border-color:var(--navy-900);}

/* ---------- Cards: quieter borders, a shorter lift ---------- */
.card{border-color:rgba(10,40,104,0.10);}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(10,40,104,0.16);}

/* ---------- Metrics line up in columns ---------- */
.stat-value,.cm-kpi__num,.cm-bars__v,.cm-donut__hole strong,
.gauge-readout .pct,.gauge-mini-row .v{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- Anchored sections clear the fixed header ---------- */
html{scroll-padding-top:calc(var(--nav-h) + 18px);}
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 14px);}

/* ---------- Focus + selection ---------- */
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;}
::selection{background:rgba(111,183,42,0.30);color:var(--navy-950);}

/* ---------------------------------------------------------------------
   HERO — the cockpit as a framed product shot in the right column
   The two-column layout from .hero-inner (and the .hero-media-frame /
   .hero-signal styles above) carries it; this only tunes the frame.
   Swap the shot by replacing assets/images/hero-cockpit.png.
   --------------------------------------------------------------------- */
/* Give the shot more of the row, and let the content set the hero height
   instead of the old 780px floor (which left dead space under the copy). */
.hero{min-height:0;padding-bottom:84px;}
.hero-inner{align-items:center;grid-template-columns:minmax(0,0.86fr) minmax(460px,1.15fr);gap:58px;}
.hero-copy{max-width:580px;}

.hero-media-frame{background:#071a43;}
/* Softer inner shading so the charts near the bottom stay readable. */
.hero-media-frame::before{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -70px 90px rgba(6,23,59,0.22);
}
.hero-media-frame img{
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center top;
  transform:none;
}

/* Browser chrome strip — reads as a live app window, not a flat picture. */
.hero-media-chrome{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;
  background:rgba(6,18,44,0.94);
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.hero-media-chrome span{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:rgba(255,255,255,0.20);
}
.hero-media-chrome em{
  margin:0 auto;flex:0 1 62%;min-width:0;text-align:center;
  font-family:var(--font-mono);font-style:normal;font-size:11px;letter-spacing:0.02em;
  color:#8fa4c2;
  padding:5px 11px;border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (max-width:900px){
  /* Restack: this block sits after the earlier stacking rule, so it has to
     restate the single column or the two-track layout leaks onto mobile. */
  .hero-inner{grid-template-columns:1fr;gap:0;}
  .hero-copy{max-width:none;}
  .hero-visual{margin-top:38px;}
  .hero-media-frame{max-width:660px;margin-inline:auto;}
}
@media (max-width:560px){
  .hero-media-chrome{padding:9px 11px;gap:6px;}
  .hero-media-chrome span{width:8px;height:8px;}
  .hero-media-chrome em{font-size:10px;padding:4px 9px;}
}

/* =====================================================================
   HOME REFINEMENT PASS
   Bigger brand lockup, a calmer "problem" panel, a tighter section
   rhythm — and the breakpoints each of those needs.
   ===================================================================== */

/* ---------- Brand: a larger mark, with the bar grown to hold it ---------- */
:root{
  --nav-h:84px;
  --nav-h-scrolled:72px;
}
.brand .brand-logo--mark-full{height:68px;}
.nav.is-scrolled .brand .brand-logo--mark-full{height:58px;}

/* ---------- Marquee band: a surface, not a bare white strip ---------- */
.marquee-section{
  padding:40px 0;
  background:linear-gradient(180deg,#fff 0%,#f8fbfb 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marquee-label{
  margin-bottom:22px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--slate-500);
}
.marquee-track .chip{
  padding:10px 18px;
  border-color:rgba(10,40,104,0.10);
  box-shadow:0 1px 2px rgba(6,23,59,0.04);
}

/* ---------- Problem panel: red as an accent, not as a whole surface ----------
   The saturated crimson block read as a warning banner rather than as a
   product screenshot; this keeps the signal and drops the shouting. */
.pc-visual{
  border:1px solid rgba(201,54,60,0.18);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#fff8f8 100%);
  box-shadow:0 1px 2px rgba(6,23,59,0.05), 0 26px 54px -28px rgba(120,25,32,0.40);
}
.pc-visual::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#D33C45,rgba(211,60,69,0) 72%);
}
.pc-visual-meter{background:#f2e6e6;}
.pc-visual-row,
.pc-visual-foot span{
  border:1px solid rgba(10,40,104,0.08);
  background:#fff;
  box-shadow:0 1px 2px rgba(6,23,59,0.04);
}
.pc-visual-head strong{
  background:#FDECEC;
  color:#C9363C;
}

/* ---------- Section rhythm + heading scale ---------- */
.head-row{margin-bottom:52px;}
.head-row h2{font-size:clamp(29px,3.5vw,42px);line-height:1.13;}
.head-row p{font-size:17.5px;}

/* ---------- Capability cards: even heights, calmer accents ---------- */
#platform .cap-card{
  display:flex;
  flex-direction:column;
  min-height:212px;
  padding:28px 26px;
}
#platform .cap-card::before{opacity:.6;}
#platform .cap-card p{margin-top:auto;padding-top:10px;}

/* ---------- Posture band: tighter stat cards ---------- */
.posture-section .stat-card,
.posture-section .posture-stat{padding:24px 26px;}

/* =====================================================================
   RESPONSIVE — every rule above restated where the layout changes
   ===================================================================== */
@media (max-width:1080px){
  .brand .brand-logo--mark-full{height:62px;}
  .nav.is-scrolled .brand .brand-logo--mark-full{height:54px;}
}
@media (max-width:980px){
  /* Drawer hangs off the taller bar. */
  .nav-links{top:var(--nav-h);}
  .nav.is-scrolled .nav-links{top:var(--nav-h-scrolled);}
}
@media (max-width:900px){
  .head-row{margin-bottom:40px;}
}
@media (max-width:768px){
  .marquee-section{padding:32px 0;}
  .marquee-label{margin-bottom:18px;}
  #platform .cap-card{min-height:0;padding:24px 22px;}
  #platform .cap-card p{margin-top:12px;padding-top:0;}
}
@media (max-width:680px){
  .brand .brand-logo--mark-full{height:58px;}
  .nav.is-scrolled .brand .brand-logo--mark-full{height:52px;}
}
@media (max-width:560px){
  .head-row{margin-bottom:32px;}
  .head-row p{font-size:16.5px;}
  .pc-visual{padding:18px;border-radius:10px;}
}
@media (max-width:420px){
  .brand .brand-logo--mark-full{height:52px;}
  .nav.is-scrolled .brand .brand-logo--mark-full{height:46px;}
  .marquee-track .chip{padding:9px 14px;}
}

/* Mid widths only: even the two hero columns out so the copy stops
   over-wrapping. Bounded at the bottom, or it would win over the 900px
   stacking rule and squeeze the copy into a column on phones. */
@media (max-width:1180px) and (min-width:901px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;}
  .hero-copy h1{font-size:clamp(30px,3.4vw,38px);}
}

/* =====================================================================
   HERO — PRO PASS
   Ambient depth behind the product shot, a badge instead of a bare
   eyebrow, floating figures on the frame, and a proof band that turns
   the dead space under the fold into something that earns its height.
   ===================================================================== */

/* Depth: one warm brand glow behind the copy, one cool glow behind the
   shot, over a fine grid — so the navy reads as a surface, not a fill. */
.hero{padding-bottom:0;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 780px 520px at 8% 24%, rgba(111,183,42,0.15), transparent 62%),
    radial-gradient(ellipse 900px 620px at 78% 42%, rgba(44,130,224,0.20), transparent 66%),
    radial-gradient(ellipse 620px 380px at 88% 96%, rgba(10,40,104,0.55), transparent 70%);
}

/* Eyebrow → status badge, with a live dot. */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  border:1px solid rgba(143,203,82,0.32);
  background:rgba(111,183,42,0.10);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:#AEE07A;
}
.hero-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green-400);
  box-shadow:0 0 0 4px rgba(143,203,82,0.16);
}
.hero-copy h1{margin-top:22px;}

/* Frame: layered depth + a lit top edge, no tilt — this segment reads
   more credible flat than skewed. */
.hero-media-frame{
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 44px 96px -34px rgba(0,0,0,0.80),
    0 0 90px -26px rgba(44,130,224,0.42),
    0 0 0 1px rgba(143,203,82,0.09);
}
.hero-media-chrome{background:rgba(6,18,44,0.96);}

/* Floating figures, straddling the frame corners. */
.hero-visual{position:relative;}
.hero-signal{
  position:absolute;z-index:3;
  min-width:0;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.20);
  background:rgba(7,21,52,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -20px rgba(0,0,0,0.75);
}
.hero-signal span{
  display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:0.12em;text-transform:uppercase;color:#93A9C6;
}
.hero-signal strong{
  display:block;margin-top:5px;
  font-family:var(--font-display);font-size:21px;font-weight:700;
  line-height:1;color:#fff;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.hero-signal--top{top:-16px;right:-16px;bottom:auto;left:auto;}
.hero-signal--top strong{color:var(--green-400);}
.hero-signal--bottom{left:-16px;bottom:-16px;top:auto;right:auto;}

/* Proof band closing the hero. */
.hero-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:64px 0 0;padding:30px 0 40px;
  border-top:1px solid rgba(255,255,255,0.12);
  list-style:none;
}
.hero-facts li{
  position:relative;
  padding:0 26px;
}
.hero-facts li:first-child{padding-left:0;}
.hero-facts li:not(:last-child)::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:36px;background:rgba(255,255,255,0.12);
}
.hero-facts strong{
  display:block;
  font-family:var(--font-display);font-size:30px;font-weight:700;
  line-height:1;color:#fff;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;
}
.hero-facts span{
  display:block;margin-top:9px;
  font-size:13.5px;line-height:1.4;color:#9FB3CE;
}

/* --------------------------- responsive --------------------------- */
@media (max-width:1180px) and (min-width:901px){
  .hero-signal--top{top:-14px;right:-10px;}
  .hero-signal--bottom{left:-10px;bottom:-14px;}
  .hero-facts strong{font-size:27px;}
  .hero-facts li{padding:0 20px;}
}
@media (max-width:900px){
  /* Stacked: the badges would collide with the centred frame, and the
     band drops to two rows. */
  .hero-signal{display:none;}
  .hero-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 0;
    margin-top:48px;padding:28px 0 36px;
  }
  .hero-facts li{padding:0 20px;}
  .hero-facts li:nth-child(odd){padding-left:0;}
  .hero-facts li:nth-child(2)::after{display:none;}
}
@media (max-width:560px){
  .hero-badge{font-size:10.5px;letter-spacing:0.12em;padding:7px 13px 7px 10px;}
  .hero-copy h1{margin-top:18px;}
  .hero-facts{
    grid-template-columns:1fr 1fr;
    gap:22px 0;margin-top:38px;padding:24px 0 32px;
  }
  .hero-facts strong{font-size:25px;}
  .hero-facts span{font-size:12.5px;}
}
@media (max-width:380px){
  .hero-facts{grid-template-columns:1fr;gap:18px;}
  .hero-facts li{padding:0;}
  .hero-facts li::after{display:none !important;}
}

/* .hero is a grid; a .wrap child with auto margins shrink-wraps to its
   content unless the width is explicit — which collapsed the proof band. */
.hero > .wrap{width:100%;}

/* .hero's implicit grid column sizes to max-content, so a wide child (the
   proof band) could push the whole page past the viewport on phones.
   minmax(0,1fr) pins the track to the container and lets it shrink. */
.hero{grid-template-columns:minmax(0,1fr);}

/* =====================================================================
   HERO — AI SURFACE
   A near-black field lit by a drifting aurora, a masked dot matrix and a
   faint node network, with the header riding over it on the home page.
   ===================================================================== */

/* ---------- The surface ---------- */
.hero{
  background:
    radial-gradient(1080px 680px at 10% 16%, rgba(111,183,42,0.13), transparent 58%),
    radial-gradient(1180px 780px at 80% 44%, rgba(23,104,209,0.22), transparent 62%),
    radial-gradient(760px 520px at 98% 98%, rgba(44,130,224,0.11), transparent 70%),
    linear-gradient(180deg,#05090F 0%,#070E1A 44%,#04070E 100%);
  padding-top:calc(var(--nav-h) + 54px);
}
.hero::before{content:none;}

.hero-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
/* Dot matrix, faded out at the edges so it reads as depth, not wallpaper. */
.hero-fx::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(150,196,238,0.17) 1px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 52% 40%, #000 16%, transparent 76%);
  mask-image:radial-gradient(ellipse 78% 68% at 52% 40%, #000 16%, transparent 76%);
}
/* A single wide ring behind the product shot. */
.hero-fx::after{
  content:"";position:absolute;right:-14%;top:-36%;width:920px;height:920px;border-radius:50%;
  border:1px solid rgba(143,203,82,0.07);
  box-shadow:inset 0 0 200px 60px rgba(23,104,209,0.06);
}
.hero-fx__aurora{
  position:absolute;inset:-25% -15%;
  background:
    radial-gradient(closest-side, rgba(111,183,42,0.22), transparent 70%) 12% 28%/48% 62% no-repeat,
    radial-gradient(closest-side, rgba(23,104,209,0.30), transparent 72%) 78% 46%/56% 72% no-repeat;
  filter:blur(26px);
  animation:heroAurora 22s ease-in-out infinite alternate;
}
@keyframes heroAurora{
  from{transform:translate3d(-1.5%,-1%,0) scale(1);}
  to{transform:translate3d(2%,1.5%,0) scale(1.07);}
}
.hero-fx__net{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.hero-fx__net .net-links line{stroke:rgba(120,175,235,0.17);stroke-width:1;}
.hero-fx__net .net-nodes circle{fill:rgba(143,203,82,0.55);}

/* ---------- Copy ---------- */
.hero-badge{
  padding:8px 17px 8px 13px;
  border-color:rgba(143,203,82,0.30);
  background:rgba(111,183,42,0.09);
}
.hero-badge::before{content:none;}
.hero-badge svg{
  width:14px;height:14px;flex:none;
  stroke:var(--green-400);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.hero-copy p.lede{color:#AFC0D6;}

/* Pill CTAs with icons — hero only; the rest of the site keeps its radius. */
.hero-actions .btn{border-radius:999px;padding:15px 26px;gap:10px;}
.hero-actions .btn svg{
  width:16px;height:16px;flex:none;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.hero-actions .btn-ghost-dark{
  background:rgba(255,255,255,0.045);
  border-color:rgba(255,255,255,0.17);
}
.hero-actions .btn-ghost-dark:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.34);}

.hero-ticks{
  display:flex;flex-wrap:wrap;gap:13px 28px;
  margin:28px 0 0;padding:0;list-style:none;
}
.hero-ticks li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;color:#B7C8DD;
}
.hero-ticks svg{
  width:17px;height:17px;flex:none;
  stroke:var(--green-400);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Product frame ---------- */
.hero-media-frame{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.11);
  background:#070C15;
  box-shadow:
    0 50px 110px -40px rgba(0,0,0,0.92),
    0 0 130px -44px rgba(23,104,209,0.60),
    0 0 0 1px rgba(143,203,82,0.06);
}
.hero-media-frame::before{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.11);
}
.hero-signal{background:rgba(6,14,30,0.88);border-color:rgba(255,255,255,0.17);}

/* ---------- Proof band ---------- */
.hero-facts{border-top-color:rgba(255,255,255,0.10);}
.hero-facts li:not(:last-child)::after{background:rgba(255,255,255,0.10);}
.hero-facts span{color:#93A8C4;}

/* =====================================================================
   HEADER OVER THE HERO (home only, until the first scroll)
   ===================================================================== */
.brand .brand-logo--ondark{display:none;}
.nav--over-hero:not(.is-scrolled){
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.07);
}
.nav--over-hero:not(.is-scrolled) .brand .brand-logo--mark-full:not(.brand-logo--ondark){display:none;}
.nav--over-hero:not(.is-scrolled) .brand .brand-logo--ondark{display:block;}
.nav--over-hero:not(.is-scrolled) .nav-links a{color:#B3C4DA;}
.nav--over-hero:not(.is-scrolled) .nav-links a:hover,
.nav--over-hero:not(.is-scrolled) .nav-links a.active{color:#fff;}
.nav--over-hero:not(.is-scrolled) .nav-cta::before{background:rgba(255,255,255,0.16);}
.nav--over-hero:not(.is-scrolled) .nav-login{
  color:#fff;
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.05);
}
.nav--over-hero:not(.is-scrolled) .nav-login:hover{
  background:#fff;color:var(--navy-950);border-color:#fff;
}
.nav--over-hero:not(.is-scrolled) .nav-burger{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.20);
}
.nav--over-hero:not(.is-scrolled) .nav-burger svg{stroke:#fff;}

/* --------------------------- responsive --------------------------- */
@media (max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + 40px);}
  .hero-fx::after{right:-40%;top:-20%;width:680px;height:680px;}
  .hero-ticks{gap:11px 22px;margin-top:24px;}
}
@media (max-width:560px){
  .hero-actions .btn{width:100%;justify-content:center;padding:14px 22px;}
  .hero-ticks{flex-direction:column;gap:11px;}
  .hero-ticks li{font-size:14px;}
  .hero-fx::before{background-size:26px 26px;}
}

/* Give the copy column enough room for the three ticks to sit on one row. */
@media (min-width:901px){
  /* Copy just wide enough for the three ticks on one row; the rest of the
     row goes to the product shot, which is what people actually read. */
  .hero-inner{grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);gap:50px;}
  .hero-copy{max-width:none;}
  .hero-copy h1{max-width:540px;}
  .hero-copy p.lede{max-width:520px;}
  .hero-ticks{gap:12px 16px;}
  .hero-ticks li{font-size:13px;white-space:nowrap;letter-spacing:0.005em;}
  .hero-ticks svg{width:15px;height:15px;}
}

/* An older rule gives the hero buttons flex:1, which beats width:100%.
   Force the wrap only once they'd actually get cramped. */
@media (max-width:460px){
  .hero-actions .btn{flex:1 1 100%;width:100%;}
}

/* =====================================================================
   HEADER — TRANSPARENT, NEVER WHITE
   Every page opens on a dark band, so the bar is see-through at the top
   and settles into dark glass on scroll. Light-on-dark throughout.
   ===================================================================== */
.nav{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.07);
}
.nav.is-scrolled{
  background:rgba(6,12,24,0.82);
  backdrop-filter:saturate(165%) blur(18px);
  -webkit-backdrop-filter:saturate(165%) blur(18px);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.09),
    0 16px 44px -26px rgba(0,0,0,0.92);
}

/* The light-on-dark lockup is now the only one used. */
.brand .brand-logo--mark-full:not(.brand-logo--ondark){display:none;}
.brand .brand-logo--ondark{display:block;}

.nav-links a{color:#B3C4DA;}
.nav-links a:hover,
.nav-links a.active{color:#fff;}
.nav-cta::before{background:rgba(255,255,255,0.16);}
.nav-login{
  color:#fff;
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.05);
}
.nav-login:hover{background:#fff;color:var(--navy-950);border-color:#fff;}
.nav-burger{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.20);
}
.nav-burger svg{stroke:#fff;}

@media (max-width:980px){
  /* The drawer follows the bar into the dark. */
  .nav-links{
    background:rgba(7,13,26,0.97);
    backdrop-filter:saturate(165%) blur(18px);
    -webkit-backdrop-filter:saturate(165%) blur(18px);
    border-top:1px solid rgba(255,255,255,0.10);
    box-shadow:0 30px 50px -26px rgba(0,0,0,0.9);
  }
  .nav-links a{color:#C3D2E4;border-bottom-color:rgba(255,255,255,0.08);}
  .nav-links a.active{color:#fff;}
}

/* =====================================================================
   THE TWO BANDS AFTER THE HERO — carry the colour through
   ===================================================================== */

/* Framework band: stays in the dark so the hero doesn't end on a hard cut. */
.marquee-section{
  background:linear-gradient(180deg,#04070E 0%,#060B14 55%,#080F1B 100%);
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.marquee-label{color:#7E93AF;}
.marquee-track .chip{
  background:rgba(255,255,255,0.045);
  border-color:rgba(255,255,255,0.13);
  color:#C7D7E9;
  box-shadow:none;
}

/* Problem band: a tinted mist rather than plain white — cool base, a wash
   of the section's own red at the top right, a blue counterweight bottom left. */
#problem.problem-compare-section{
  background:
    linear-gradient(90deg,rgba(10,40,104,0.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.03) 1px,transparent 1px),
    radial-gradient(880px 520px at 88% 4%, rgba(211,60,69,0.09), transparent 62%),
    radial-gradient(760px 500px at 4% 96%, rgba(23,104,209,0.10), transparent 62%),
    linear-gradient(180deg,#E9F0F6 0%,#F1F5F9 44%,#E7EEF5 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}

/* --------------------------- responsive --------------------------- */
@media (max-width:768px){
  .marquee-section{
    background:linear-gradient(180deg,#04070E 0%,#070D18 100%);
  }
}

/* The drawer's outline button inherits a navy border that vanishes on the
   dark panel — give it the same light treatment as the header's Log in. */
@media (max-width:980px){
  .nav-drawer-cta .btn-outline{
    border-color:rgba(255,255,255,0.22);
    background:rgba(255,255,255,0.05);
    color:#fff;
  }
  .nav-drawer-cta .btn-outline:hover{
    background:#fff;color:var(--navy-950);border-color:#fff;
  }
}

/* =====================================================================
   LIGHT BANDS — ONE CONTINUOUS RAMP
   Each band now starts on the exact tone the previous one ended on, so
   problem → approach → capabilities → why read as a single surface
   drifting from cool mist to paper instead of four stacked rectangles.
   ===================================================================== */

/* The dark framework band casts onto the mist below it, tying the two. */
#problem.problem-compare-section::after{
  content:"";
  display:block;
  position:absolute;
  top:0;left:0;right:0;
  height:110px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,15,27,0.16) 0%,rgba(8,15,27,0.05) 42%,transparent 100%);
}

/*  #E6EEF5 ──────────────► #F0F5FA  */
#problem.problem-compare-section{
  background:
    linear-gradient(90deg,rgba(10,40,104,0.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.03) 1px,transparent 1px),
    radial-gradient(880px 520px at 88% 4%, rgba(211,60,69,0.09), transparent 62%),
    radial-gradient(760px 500px at 4% 96%, rgba(23,104,209,0.09), transparent 62%),
    linear-gradient(180deg,#E6EEF5 0%,#EDF3F8 52%,#F0F5FA 100%);
  background-size:34px 34px,34px 34px,auto,auto,auto;
}

/*  #F0F5FA ──────────────► #F5F9FC  */
.approach-section{
  background:
    linear-gradient(90deg,rgba(10,40,104,0.018) 1px,transparent 1px),
    linear-gradient(180deg,rgba(10,40,104,0.014) 1px,transparent 1px),
    linear-gradient(180deg,#F0F5FA 0%,#F5F9FC 100%);
  background-size:34px 34px,34px 34px,auto;
}

/*  #F5F9FC ──────────────► #F9FCFD  */
#platform{
  background:linear-gradient(180deg,#F5F9FC 0%,#F9FCFD 100%);
}

/*  #F9FCFD ──────────────► #F4F8FB  */
.why-section{
  background:linear-gradient(180deg,#F9FCFD 0%,#F4F8FB 100%);
}

/* The hairlines were the only thing still drawing the seams. */
#platform,
.why-section{
  border-top-color:transparent;
}

@media (max-width:768px){
  .approach-section{background-size:30px 30px,30px 30px,auto;}
  #problem.problem-compare-section::after{height:80px;}
}

/* Each .section repaints its own corner wash, which redraws an edge at every
   band boundary and fights the ramp. The ramp carries the colour now. */
#problem.problem-compare-section::before,
.approach-section::before,
#platform::before,
.why-section::before{
  opacity:0;
}

/* =====================================================================
   HEADER — container aligned with the page, buttons matched to the hero
   .nav-inner ran at 1240px against .wrap's 1220px, which pushed the logo
   10px left of every other block on the page.
   ===================================================================== */
.nav-inner{max-width:1220px;}

/* Same pill shape as the hero's CTAs, so the two pairs read as one set. */
.nav-login,
.nav-demo{border-radius:999px;}

/* =====================================================================
   OUR APPROACH — the dark surface moves onto the left card
   The section goes back to the light ramp; only the intro panel carries
   the header's treatment, so it reads as one dark card beside the light
   dashboard rather than a whole dark band.
   ===================================================================== */
.approach-section{
  position:relative;
  overflow:hidden;
  padding-top:96px;
  padding-bottom:100px;
  background:
    linear-gradient(90deg,rgba(10,40,104,0.018) 1px,transparent 1px) top left/34px 34px repeat,
    linear-gradient(180deg,rgba(10,40,104,0.014) 1px,transparent 1px) top left/34px 34px repeat,
    linear-gradient(180deg,#F0F5FA 0%,#F5F9FC 100%);
}
.approach-section::before{opacity:0;}

/* The left card: the header's surface, at card scale. */
.approach-section .ap-intro{
  padding:34px 34px 38px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:
    radial-gradient(circle, rgba(150,196,238,0.12) 1px, transparent 1.4px) top left/26px 26px repeat,
    radial-gradient(680px 480px at 10% 12%, rgba(111,183,42,0.18), transparent 62%),
    radial-gradient(720px 520px at 92% 88%, rgba(23,104,209,0.20), transparent 64%),
    linear-gradient(160deg,#070E1A 0%,#05090F 55%,#060C16 100%);
  box-shadow:
    0 34px 76px -32px rgba(6,23,59,0.45),
    0 0 0 1px rgba(143,203,82,0.07);
}
/* Its copy flips to light-on-dark. */
.approach-section .ap-intro .eyebrow{color:var(--green-400);}
.approach-section .ap-intro .eyebrow::before{background:var(--green-400);}
.approach-section .ap-intro h2{color:#fff;}
.approach-section .ap-intro h2 span{color:var(--green-400);}
.approach-section .ap-intro > p{color:#AFC0D6;}
.approach-section .ap-step h4{color:#fff;}
.approach-section .ap-step p{color:#9DB1CB;}
.approach-section .ap-ico{box-shadow:0 12px 26px rgba(0,0,0,0.45);}

/* The dashboard sits on light again — back to a light-surface shadow. */
.approach-section .ap-dash{
  box-shadow:0 26px 64px -28px rgba(6,23,59,0.28);
}

@media (max-width:900px){
  .approach-section{padding-top:78px;padding-bottom:82px;}
  .approach-section .ap-intro{padding:28px 24px 30px;}
}
@media (max-width:560px){
  .approach-section .ap-intro{padding:24px 20px 26px;}
}

/* =====================================================================
   BUTTONS — squared off, no coloured glow
   ===================================================================== */
.btn,
.hero-actions .btn,
.nav-login,
.nav-demo{border-radius:10px;}

/* The green halo is gone; depth now comes from a neutral, tight shadow. */
.btn-primary{
  box-shadow:0 1px 2px rgba(6,23,59,0.12);
}
.btn-primary:hover{
  box-shadow:0 6px 16px -8px rgba(6,23,59,0.42);
}
.nav-login:hover{
  box-shadow:0 1px 2px rgba(6,23,59,0.12);
}

/* =====================================================================
   HERO — the green light moves to the right
   It sat top-left, over the copy; on the right it lights the product
   shot instead and leaves the text on clean dark.
   ===================================================================== */
.hero{
  background:
    radial-gradient(980px 640px at 88% 14%, rgba(111,183,42,0.15), transparent 58%),
    radial-gradient(1180px 800px at 70% 56%, rgba(23,104,209,0.22), transparent 64%),
    radial-gradient(760px 520px at 98% 96%, rgba(44,130,224,0.11), transparent 70%),
    linear-gradient(180deg,#05090F 0%,#070E1A 44%,#04070E 100%);
}
.hero-fx__aurora{
  background:
    radial-gradient(closest-side, rgba(111,183,42,0.22), transparent 70%) 86% 20%/46% 58% no-repeat,
    radial-gradient(closest-side, rgba(23,104,209,0.30), transparent 72%) 68% 58%/56% 72% no-repeat;
}