/* =====================================================================
   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;
}

/* Official logo.jpg asset, cropped into a readable nav lockup. */
.brand{
  min-width:184px;
  gap:10px;
}
.brand-mark{
  position:relative;
  width:48px;
  height:48px;
  flex:none;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.brand-mark .brand-logo--full{
  position:absolute;
  left:50%;
  top:0;
  width:88px;
  height:88px;
  max-width:none;
  transform:translateX(-50%);
  object-fit:cover;
  filter:none;
}
.brand .brand-text{
  display:flex;
}
.brand .brand-name{
  font-size:20px;
  letter-spacing:0;
}
.brand .brand-tag{
  margin-top:2px;
  font-size:9px;
  letter-spacing:.11em;
}
.nav.is-scrolled .brand-mark{
  width:44px;
  height:44px;
}
.nav.is-scrolled .brand-mark .brand-logo--full{
  width:80px;
  height:80px;
}
@media (max-width:680px){
  .brand{
    min-width:158px;
  }
  .brand-mark{
    width:44px;
    height:44px;
  }
  .brand-mark .brand-logo--full{
    width:80px;
    height:80px;
  }
  .brand .brand-name{
    font-size:18px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:140px;
    gap:8px;
  }
  .brand-mark{
    width:40px;
    height:40px;
  }
  .brand-mark .brand-logo--full{
    width:74px;
    height:74px;
  }
  .brand .brand-name{
    font-size:16px;
  }
}

/* ============================================================
   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));
}

/* ============================================================
   NAV - SHARPER BRAND LOCKUP
   ============================================================ */
.brand{
  gap:10px;
}
.brand .brand-logo{
  width:auto;
  height:48px;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(6,23,59,0.10));
}
.nav.is-scrolled .brand .brand-logo{
  height:44px;
}
.brand .brand-text{
  display:flex;
}
.brand .brand-name{
  font-size:20px;
  letter-spacing:0;
}
.brand .brand-tag{
  margin-top:2px;
  font-size:9px;
  letter-spacing:.11em;
}
@media (max-width:680px){
  .brand .brand-name{
    font-size:18px;
  }
  .brand .brand-logo{
    height:44px;
  }
}
@media (max-width:420px){
  .brand{
    gap:8px;
  }
  .brand .brand-logo{
    height:40px;
  }
  .brand .brand-name{
    font-size:16px;
  }
}

/* Use the official full logo asset in the nav. */
.brand{
  min-width:154px;
}
.brand .brand-logo--full{
  width:154px;
  height:auto;
  max-width:none;
  display:block;
  object-fit:contain;
}
.nav.is-scrolled .brand .brand-logo--full{
  width:142px;
  height:auto;
}
@media (max-width:680px){
  .brand{
    min-width:132px;
  }
  .brand .brand-logo--full{
    width:132px;
  }
  .nav.is-scrolled .brand .brand-logo--full{
    width:124px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:116px;
  }
  .brand .brand-logo--full{
    width:116px;
  }
}

/* Final nav logo override: source is logo.jpg/logo.jpeg, rendered as a compact lockup. */
.brand{
  min-width:184px;
  gap:10px;
}
.brand-mark{
  position:relative;
  display:block;
  width:48px;
  height:48px;
  flex:none;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.brand-mark .brand-logo--full,
.nav.is-scrolled .brand-mark .brand-logo--full{
  position:absolute;
  left:50%;
  top:0;
  width:88px;
  height:88px;
  max-width:none;
  display:block;
  object-fit:cover;
  transform:translateX(-50%);
  filter:none;
}
.nav.is-scrolled .brand-mark{
  width:44px;
  height:44px;
}
.nav.is-scrolled .brand-mark .brand-logo--full{
  width:80px;
  height:80px;
}
@media (max-width:680px){
  .brand{min-width:158px;}
  .brand-mark{width:44px;height:44px;}
  .brand-mark .brand-logo--full{width:80px;height:80px;}
}
@media (max-width:420px){
  .brand{min-width:140px;gap:8px;}
  .brand-mark{width:40px;height:40px;}
  .brand-mark .brand-logo--full{width:74px;height:74px;}
}

/* Final nav logo: single horizontal asset derived from logo.jpg. */
.brand{
  min-width:205px;
  gap:0;
}
.brand .brand-logo--nav{
  width:205px;
  height:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(6,23,59,0.08));
}
.nav.is-scrolled .brand .brand-logo--nav{
  width:190px;
  height:auto;
}
@media (max-width:680px){
  .brand{
    min-width:176px;
  }
  .brand .brand-logo--nav{
    width:176px;
  }
  .nav.is-scrolled .brand .brand-logo--nav{
    width:164px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:146px;
  }
  .brand .brand-logo--nav{
    width:146px;
  }
}

/* Final nav logo: use requested logo-mark.png without delayed text rendering. */
.brand{
  min-width:72px;
  gap:0;
}
.brand .brand-logo--mark{
  display:block;
  width:auto;
  height:68px;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(6,23,59,0.08));
}
.nav.is-scrolled .brand .brand-logo--mark{
  width:auto;
  height:60px;
}
@media (max-width:680px){
  .brand{
    min-width:62px;
  }
  .brand .brand-logo--mark{
    height:60px;
  }
  .nav.is-scrolled .brand .brand-logo--mark{
    height:54px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:54px;
  }
  .brand .brand-logo--mark{
    height:52px;
  }
}

/* Final nav lockup: logo-mark.png as the mark, readable text beside it. */
.brand{
  min-width:168px;
  gap:9px;
}
.brand-mark--from-logo{
  position:relative;
  display:block;
  width:46px;
  height:46px;
  flex:none;
  overflow:hidden;
  border-radius:8px;
  background:transparent;
}
.brand-mark--from-logo .brand-logo--mark,
.nav.is-scrolled .brand-mark--from-logo .brand-logo--mark{
  position:absolute;
  left:50%;
  top:-4px;
  width:66px;
  height:66px;
  max-width:none;
  object-fit:contain;
  transform:translateX(-50%);
  filter:none;
}
.brand .brand-text{
  display:flex;
}
.brand .brand-name{
  font-size:20px;
  line-height:1;
  letter-spacing:0;
}
.brand .brand-tag{
  margin-top:3px;
  font-size:9px;
  letter-spacing:.12em;
}
.nav.is-scrolled .brand-mark--from-logo{
  width:42px;
  height:42px;
}
.nav.is-scrolled .brand-mark--from-logo .brand-logo--mark{
  top:-4px;
  width:60px;
  height:60px;
}
@media (max-width:680px){
  .brand{
    min-width:150px;
    gap:8px;
  }
  .brand-mark--from-logo{
    width:42px;
    height:42px;
  }
  .brand-mark--from-logo .brand-logo--mark{
    top:-4px;
    width:60px;
    height:60px;
  }
  .brand .brand-name{
    font-size:18px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:132px;
  }
  .brand-mark--from-logo{
    width:38px;
    height:38px;
  }
  .brand-mark--from-logo .brand-logo--mark{
    top:-3px;
    width:54px;
    height:54px;
  }
  .brand .brand-name{
    font-size:16px;
  }
}

/* Final navbar proportions: larger logo mark and cleaner menu typography. */
:root{
  --nav-h:76px;
}
.nav{
  height:var(--nav-h);
}
.nav.is-scrolled{
  height:68px;
}
.nav-inner{
  max-width:1240px;
  gap:28px;
}
.brand{
  min-width:190px;
  gap:11px;
  align-items:center;
}
.brand-mark--from-logo{
  width:56px;
  height:56px;
  border-radius:10px;
  overflow:hidden !important;
}
.brand-mark--from-logo .brand-logo--mark,
.nav.is-scrolled .brand-mark--from-logo .brand-logo--mark{
  top:-7px;
  width:92px;
  height:92px;
}
.brand .brand-text{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
}
.brand .brand-name{
  font-size:21px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}
.brand .brand-tag{
  margin-top:4px;
  font-size:8.8px;
  font-weight:600;
  letter-spacing:.11em;
}
.nav-links{
  gap:28px;
}
.nav-links a,
.nav-login{
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:0;
}
.nav-links a{
  padding:8px 0;
}
.nav-demo{
  padding:12px 22px;
  font-size:14.5px;
  font-weight:700;
}
.nav.is-scrolled .brand-mark--from-logo{
  width:50px;
  height:50px;
}
.nav.is-scrolled .brand-mark--from-logo .brand-logo--mark{
  top:-6px;
  width:82px;
  height:82px;
}
@media (max-width:1080px){
  .nav-links{
    gap:22px;
  }
  .nav-links a,
  .nav-login{
    font-size:14.5px;
  }
  .brand{
    min-width:178px;
  }
  .brand .brand-name{
    font-size:20px;
  }
}
@media (max-width:980px){
  .nav-links{
    top:var(--nav-h);
  }
}
@media (max-width:680px){
  .brand{
    min-width:160px;
    gap:9px;
  }
  .brand-mark--from-logo{
    width:48px;
    height:48px;
  }
  .brand-mark--from-logo .brand-logo--mark{
    top:-6px;
    width:80px;
    height:80px;
  }
  .brand .brand-name{
    font-size:18px;
  }
  .nav-demo{
    padding:10px 14px;
    font-size:13.5px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:142px;
  }
  .brand-mark--from-logo{
    width:42px;
    height:42px;
  }
  .brand-mark--from-logo .brand-logo--mark{
    top:-5px;
    width:70px;
    height:70px;
  }
  .brand .brand-name{
    font-size:16px;
  }
}

/* Final requested logo mode: use logo-mark.png alone, no side text. */
.brand{
  min-width:76px;
  gap:0;
}
.brand .brand-logo--mark-full{
  display:block;
  width:auto;
  height:70px;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(6,23,59,0.08));
}
.brand .brand-text{
  display:none !important;
}
.nav.is-scrolled .brand .brand-logo--mark-full{
  height:62px;
}
@media (max-width:680px){
  .brand{
    min-width:66px;
  }
  .brand .brand-logo--mark-full{
    height:62px;
  }
  .nav.is-scrolled .brand .brand-logo--mark-full{
    height:56px;
  }
}
@media (max-width:420px){
  .brand{
    min-width:58px;
  }
  .brand .brand-logo--mark-full{
    height:56px;
  }
}