/* APEX — Navy & Cobalt visual refresh | no red/orange accents.
   Small separate override layer to preserve original interactive logic. */
:root{
 --night:#081634; --navy:#0B1A3B; --navy-2:#142751;
 --ink:#0B1735; --body:#3F4D69; --muted:#64718C;
 --blue:#1F5BFF; --blue-deep:#1749DA; --sky:#87B5FF;
 --glow:#5C8DFF; --paper:#F4F6FB; --soft:#F4F6FC;
 --tint:#EBF1FF; --line:#E0E7F2; --signal:#0AAE91; --ok:#0C9277;
 --err:#635CC0; --r-panel:22px; --r-card:16px; --r-ctrl:10px;
 --font-display:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
 --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
 --shadow-soft:0 1px 2px rgba(8,22,52,.05),0 12px 28px -20px rgba(8,22,52,.18);
 --shadow-lift:0 6px 18px -12px rgba(8,22,52,.20),0 28px 65px -32px rgba(8,22,52,.28);
 --wrap:1340px;
}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--body);font-size:1.03rem;line-height:1.65}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.052em}
.x-head h2,.sec-head h2{font-weight:800;letter-spacing:-.06em}
.x-head p,.sec-head p{max-width:58ch}
:focus-visible{outline:3px solid #1F5BFF;outline-offset:4px}
:where(.btn,.menu a,.menu button,.burger,.svc,.x-tabs button){-webkit-tap-highlight-color:transparent}
.site-header,.site-header.is-solid{background:rgba(250,251,255,.96);border-bottom:1px solid #E2E8F2;box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav{height:82px}
.brand img{max-width:100%;object-fit:contain}
.menu a,.menu button{font-size:.95rem;font-weight:650;color:#293956;padding:11px 13px}
.menu a:hover,.menu button:hover{background:#EAF0FF;color:var(--blue)}
.menu a[aria-current=page]{background:#EAF0FF;color:var(--blue)}
.nav-cta .btn{min-height:43px}
.btn{font-weight:750;border-radius:10px;box-shadow:none}
.btn--primary,.btn--primary:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--primary{box-shadow:0 10px 21px -14px rgba(31,91,255,.7)}
.btn--primary:hover{background:var(--blue-deep);box-shadow:0 14px 24px -16px rgba(31,91,255,.8)}
.btn--ghost,.btn--line{background:#fff;color:#123A9D;border-color:#AFC6FF}
.btn--ghost:hover,.btn--line:hover{color:#1241BF;border-color:#1F5BFF;background:#F5F8FF}
/* Hero: LeadCallix-like typography / whitespace and strong dark console */
.x-hero{background:#F4F6FB;padding-top:clamp(126px,12vw,165px);padding-bottom:clamp(56px,6.5vw,92px)}
.x-hero::before{background:radial-gradient(56% 90% at 105% 27%,rgba(31,91,255,.11),transparent 72%),linear-gradient(180deg,#F4F6FB,#FBFCFF)}
.x-hero::after{opacity:.12;background-size:70px 70px}
.x-hero-fade{display:none}
.x-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,84px);align-items:center}
.x-pre{font-size:.79rem;letter-spacing:.075em;text-transform:uppercase;line-height:1.3;font-weight:800;padding:10px 14px;border-radius:999px;background:#EAF0FF;border:1px solid #D4E1FF;color:#2250C6;box-shadow:none}
.x-pre .pulse{background:#1F5BFF;animation:none;box-shadow:0 0 0 4px #CFDDFF}
.x-hero h1{font-size:clamp(3.35rem,6.25vw,6.25rem);line-height:.97;letter-spacing:-.078em;font-weight:850;max-width:12ch;margin-bottom:23px}
.x-hero h1 .hl,.page-hero h1 .hl{background:linear-gradient(108deg,#1543DE,#1F5BFF 65%,#3F83FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-lede{color:#43536D;font-size:clamp(1.04rem,1.4vw,1.23rem);line-height:1.66;max-width:51ch;margin-bottom:32px}
.x-hero .btn-row{gap:12px}
.x-hero .btn{min-height:54px;padding:15px 22px}
.x-proof{margin-top:38px;border-top:1px solid #DCE4F2;padding-top:22px;gap:12px 24px}
.x-proof li{color:#61708C;font-size:.86rem}
.x-proof strong{font-weight:800;color:#0A1838;font-size:1.14rem}
/* Dark console improves visual hierarchy; demo remains fully functional */
.x-filter{background:#0A1838;border:1px solid #243764;border-radius:22px;box-shadow:0 25px 60px -35px rgba(8,22,52,.55);color:#EAF0FF;backdrop-filter:none;overflow:hidden}
.x-filter-head{padding:18px 20px;border-bottom:1px solid #27395C;background:#091632}
.x-filter-head .dot{background:#345078;width:8px;height:8px}
.x-filter-head .dot:first-child{background:#3975FF}
.x-filter-head strong{color:#EDF3FF;font-size:.95rem;margin-left:6px}
.console-subtitle{font-weight:500;color:#8EA3CA;font-size:.78rem}
.x-filter-head .live{color:#65DFBE;font-size:.78rem}
.x-filter-head .live:before{background:#34C9A1;animation:none;box-shadow:0 0 0 3px rgba(52,201,161,.18)}
.x-tabs{padding:15px 14px 5px;gap:5px}
.x-tabs button{background:#14264C;color:#B8C8E6;border:1px solid #263D6C;border-radius:8px;font-weight:600;min-height:34px;font-size:.77rem}
.x-tabs button:hover{background:#203764;color:#fff;border-color:#5277C3}
.x-tabs button.on{background:#1F5BFF;border-color:#1F5BFF;color:#fff}
.x-stream{padding:8px 14px 12px;mask-image:linear-gradient(transparent,#000 20px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 20px,#000 calc(100% - 24px),transparent)}
.q{background:#142750;border:1px solid #243B6A;padding:13px 14px;border-radius:11px;transition:background .3s,border-color .3s,opacity .3s,transform .3s}
.q-text,.q.scanning .q-text{color:#ECF2FF;font-size:.93rem}
.q-text::before{filter:brightness(1.75)}
.q-meta{color:#A9BADD;font-size:.76rem}
.q-meta .geo{background:#1D3669;color:#A9C9FF}
.q-meta i{color:#9EBFFF}
.q-meta i::before{color:#6786BD}
.q--bid{background:#162F60;border-color:#315BAC}
.q--bid .q-tag{background:#1F5BFF;color:#fff;box-shadow:none}
.q--block{background:#112041;border-color:#1F3156}
.q--block .q-text{color:#91A2C1;text-decoration-color:#7594C6}
.q--block .q-tag{background:#263758;color:#AFC0DE}
.q--block .q-meta i{color:#8496BA}
.q.scanning{background:#1A3567;border-color:#6184D3}
.q.scanning .q-tag{background:#203A72;color:#C1D6FF}
.x-filter-foot{background:#091632;border-top:1px solid #27395C;color:#A1B3D4;padding:15px 20px}
.x-filter-foot strong{color:#F4F7FF}
.k--block{background:#7890B8}
/* Services: UI card rhythm and consistent icon system */
.x-svc{background:#fff;padding-block:clamp(72px,9vw,112px)}
.x-svc .x-head h2{color:#081634}
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0}
.svc{padding:27px 26px;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:18px;background:#fff;border:1px solid #DDE6F4;border-radius:16px;color:#42506D;box-shadow:0 12px 30px -28px rgba(8,22,52,.4);align-items:center}
.svc::before{display:none}
.svc:hover{color:#42506D;background:#FBFCFF;border-color:#AFC6FC;box-shadow:0 18px 42px -30px rgba(8,22,52,.35)}
.svc-main{min-width:0}
.svc-icon{display:grid;width:49px;height:49px;place-items:center;border-radius:13px;background:#EAF1FF;color:#2057EE;margin-bottom:18px}
.svc-icon svg{display:block;width:25px;height:25px}
.svc-name{font-size:clamp(1.45rem,2.2vw,2rem);letter-spacing:-.05em;font-weight:800;transform:none!important;color:#0B1837;margin-bottom:10px}
.svc-desc{font-size:.98rem;color:#51627D;line-height:1.55}
.svc-tags{grid-column:1/-1;gap:7px}
.svc-tags i{border:1px solid #DFE7F4;color:#4C5C79;background:#F5F7FC;font-size:.76rem;padding:6px 10px}
.svc-go{grid-column:2;grid-row:1;background:#EFF4FF;border-color:#DFE9FD;color:#1F5BFF;width:42px;height:42px;border-radius:11px;align-self:start}
.svc-go svg{width:19px;height:19px}
.svc:hover .svc-go{transform:none;background:#1F5BFF;color:#fff}
/* Brand coherence in interior sections */
.section--paper,.x-why,.x-takes,.x-clock,.x-refuse{background:#F4F6FB}
.page-hero{background:linear-gradient(130deg,#F4F6FB,#FFFFFF 72%);border-color:#E2E8F2}
.page-hero h1{font-weight:850;letter-spacing:-.07em}
.ig,.mk,.tk,.rs,.journey li,.wy,.xp,.city,.form-card,.faq details{border-radius:16px}
.ico,.city-geo{background:#E9F0FF;color:#245BF0}
.x-cta{background:linear-gradient(115deg,#091A3F,#113D94 80%,#1E58CD);color:#E9F0FF}
.x-cta h2 span{color:#91BDFF}
.x-cta .btn--primary{background:#fff;border-color:#fff;color:#1241A5}
.x-cta .btn--primary:hover{background:#EEF4FF;color:#1241A5}
.site-footer{background:#091735;border:0;color:#B6C6E2}
.site-footer h4,.site-footer .foot-brand{color:#fff}
.site-footer a{color:#C3D2EA}
.site-footer a:hover{color:#fff}
.socials a{background:#13284E;border:1px solid #243B66;color:#CFDFFF}
.socials a:hover{background:#20437B;color:#fff}
.foot-bottom{border-color:#243B66;color:#9FB2D5}
.foot-bottom a{color:#BACBE7}
/* Intentionally no red: use indigo for errors/risk and teal for positive signals. */
.rep-form input.bad{border-color:#756BC9}
.rep-status.bad{color:#655ABD}
.sev--high{background:#ECEBFF;color:#635CC0}
.xr-dash[data-s="0"] .xr-stage{background:#6777BA}
.meter:not(.meter--good) i{background:#7895C9}
.lg--bad::before{background:#8299CB}
.q--block .q-text{text-decoration-color:#7893BC}
/* Navigation and responsive ergonomics */
@media(max-width:1100px){.x-hero-grid{gap:32px}.x-hero h1{font-size:clamp(3rem,6vw,5.2rem)}.svc{padding:24px}}
@media(max-width:980px){
 .x-hero-grid{grid-template-columns:1fr;gap:40px}
 .x-hero-copy{max-width:800px}
 .x-hero h1{max-width:15ch;font-size:clamp(3.3rem,7vw,5.5rem)}
 .x-filter{max-width:820px;margin-inline:auto;width:100%}
 .mobile-panel{background:#F8FAFF}
 .burger{border:1px solid #D5E0F3;background:#EFF4FF;color:#1E417D}
 .svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(max-width:680px){
 .nav{height:72px}.mobile-panel{top:72px;inset-block-start:72px}
 .x-hero{padding-top:112px;padding-bottom:62px}
 .x-hero h1{font-size:clamp(2.85rem,11vw,4.5rem);line-height:1.015;letter-spacing:-.073em;margin-bottom:22px}
 .x-hero .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .x-hero .btn{min-width:0;min-height:52px;padding:12px 10px;font-size:.88rem}
 .x-pre{font-size:.71rem;letter-spacing:.04em}
 .x-lede{font-size:1.02rem}
 .x-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;padding:0;border-radius:13px;border:1px solid #DBE5F5;background:white;gap:0;overflow:hidden}
 .x-proof li{padding:15px 13px;font-size:.78rem}
 .x-proof li:nth-child(odd){border-right:1px solid #DBE5F5}
 .x-proof strong{font-size:1rem}
 .x-filter{border-radius:16px}
 .x-filter-head{padding:14px 13px}
 .console-subtitle{display:none}
 .x-tabs{padding:12px 12px 4px}
 .x-stream{height:326px;padding-inline:10px}
 .q{padding:11px}
 .q-text{font-size:.82rem}
 .x-filter-foot{padding:12px 13px}
 .svc-list{grid-template-columns:1fr;gap:12px}
 .svc{padding:22px}
 .svc-name{font-size:1.6rem}
 .x-svc{padding-block:65px}
}
@media(max-width:370px){.x-hero .btn-row{grid-template-columns:1fr}.x-hero h1{font-size:clamp(2.55rem,11vw,2.85rem)}.x-proof{grid-template-columns:1fr}.x-proof li{border-right:0!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.q.enter,.q.leave{animation:none;transition:none}.x-pre .pulse{animation:none}}



/* APEX 2026 | premium navy header + refined typography, spacing, and mobile polish.
   No extra frameworks, icon fonts or external assets. */
:root{
  --site-navy:#091735;
  --site-navy-lift:#112A58;
  --site-electric:#2B65FF;
  --site-electric-light:#8FB8FF;
}
/* Premium header: layered blue illumination without an expensive image asset. */
.site-header,.site-header.is-solid{
  background:linear-gradient(108deg,rgba(6,19,46,.99) 0%,rgba(9,29,68,.98) 48%,rgba(14,46,102,.97) 100%)!important;
  border-bottom:1px solid rgba(149,183,249,.19)!important;
  box-shadow:0 9px 34px -23px rgba(3,15,41,.72)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
}
.site-header::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent 12%,rgba(91,149,255,.36) 50%,transparent 90%);
  pointer-events:none;
}
.site-header .nav{color:#EEF5FF;gap:clamp(12px,2vw,28px)}
.site-header .brand{display:flex;align-items:center;min-width:0}
.site-header .brand picture,.site-header .brand img{display:block}
.site-header .brand img{filter:none}
.site-header .menu{gap:clamp(0px,.5vw,8px)}
.site-header .menu>li>a,.site-header .menu>li>button{
  color:#E7F0FF!important;font-weight:650;letter-spacing:-.01em;
  transition:background .16s ease,color .16s ease;
}
.site-header .menu>li>a:hover,.site-header .menu>li>button:hover,
.site-header .menu>li>a[aria-current="page"],.site-header .has-drop.open>button{
  background:rgba(255,255,255,.1)!important;color:#FFFFFF!important;
}
.site-header .nav-diag i{background:#82B4FF!important;box-shadow:0 0 0 3px rgba(130,180,255,.15);animation:none}
.site-header .nav-cta .btn--primary{
  background:linear-gradient(112deg,#2461FF,#3B78FF)!important;
  border:1px solid rgba(160,194,255,.25)!important;color:#FFFFFF!important;
  box-shadow:0 6px 19px -11px rgba(91,149,255,.9);
  border-radius:11px;
}
.site-header .nav-cta .btn--primary:hover{
  background:linear-gradient(112deg,#3E78FF,#225CE6)!important;
  box-shadow:0 9px 24px -12px rgba(91,149,255,.9);
}
/* White dropdown intentionally has dark text, unlike the blue top-level navigation. */
.site-header .dropdown{
  background:#FFFFFF!important;border:1px solid #DDE6F5!important;
  border-radius:15px!important;padding:9px!important;
  box-shadow:0 23px 58px -22px rgba(3,18,51,.36)!important;
}
.site-header .dropdown a,.site-header .dropdown a strong{color:#0D214C!important}
.site-header .dropdown a span{color:#5F708C!important}
.site-header .dropdown a:hover,.site-header .dropdown a:focus-visible{
  background:#EEF4FF!important;color:#123EB5!important;transform:none;
}
.site-header .dropdown a:hover strong{color:#123EB5!important}
.site-header .burger{border:1px solid rgba(184,210,255,.27)!important;background:rgba(255,255,255,.07)!important;color:#EDF4FF!important}
.site-header .burger:hover,.site-header .burger:active{background:rgba(255,255,255,.14)!important}
/* Consistent crisp presentation, roomier headings, less card clutter. */
body{font-kerning:normal}
h1,h2,h3,h4{text-wrap:balance}
.x-hero h1{letter-spacing:-.073em}
.x-lede,.page-hero .lede{letter-spacing:-.008em}
:is(.x-head,.sec-head) h2{letter-spacing:-.053em;line-height:1.1}
.x-head>p,.sec-head>p{line-height:1.72}
.btn,.site-header .nav-cta .btn{transition:background .17s ease,border-color .17s ease,box-shadow .17s ease,color .17s ease,transform .17s ease}
.btn:focus-visible,.site-header .menu a:focus-visible,.site-header .menu button:focus-visible{outline:3px solid #8EB9FF;outline-offset:3px}
:is(.x-why .wy,.tk,.rs,.journey li,.mk,.xp,.cap,.value-card,.city,.form-card){border-radius:17px}
:is(.x-why .wy,.tk,.rs,.journey li,.mk,.xp,.cap,.value-card,.city,.form-card){box-shadow:0 6px 28px -22px rgba(8,22,52,.18)}
.svc{box-shadow:0 10px 30px -27px rgba(8,22,52,.3)}
.svc-icon{border:1px solid rgba(99,151,255,.18);background:linear-gradient(155deg,#F1F6FF,#DFEBFF);border-radius:14px}
.svc-go{border-radius:12px}
.x-cta{background:linear-gradient(125deg,#081735,#0C2D65 70%,#144C9B);}
.site-footer{background:linear-gradient(110deg,#091735,#0C2147);}
/* Accessible, premium dark mobile drawer, consistent with the header and footer. */
@media (max-width:980px){
 .mobile-panel{
   background:linear-gradient(160deg,#081735,#112B58)!important;
   border-top:1px solid rgba(169,195,240,.19)!important;
   box-shadow:0 28px 60px -38px rgba(3,12,31,.7)!important;
 }
 .mobile-panel>a,.mobile-panel .sub a{color:#EEF5FF!important;border-bottom-color:rgba(185,208,249,.14)!important}
 .mobile-panel>a:hover,.mobile-panel .sub a:hover{color:#A6C9FF!important}
 .mobile-panel a[aria-current="page"]{color:#A6C9FF!important}
 .mobile-panel .sub{background:rgba(255,255,255,.055)!important;border:1px solid rgba(196,213,246,.12)}
 .mobile-panel .sub a{color:#C9DAF5!important}
 .mobile-panel .btn--primary{background:#2B65FF!important;color:#fff!important;border:1px solid rgba(169,195,240,.25)!important;justify-content:center}
}
@media (max-width:680px){
  .site-header .nav{height:72px}
  .mobile-panel{top:72px;inset-block-start:72px}
  .x-hero h1{letter-spacing:-.069em}
  .x-lede{line-height:1.67}
  .svc{border-radius:15px}
  .site-header .brand img{height:clamp(36px,10vw,43px)}
}
@media (hover:none){.svc:hover{box-shadow:0 10px 30px -27px rgba(8,22,52,.3);transform:none}}
@media (prefers-reduced-motion:reduce){
  .site-header .menu>li>a,.site-header .menu>li>button,.btn{transition:none!important}
}
