/* ============================================================
   OEC Design System — built on the REAL oeconnection.com tokens
   (Inter · navy #062136 / #003c71 · turquoise #2dc8d8 accent)
   Foundation derived from the OEC Design System colors_and_type.css.
   Legacy aliases retained so page CSS keeps resolving.
   ============================================================ */

/* ---------- Inter (self-hosted, OFL) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/Inter-Regular.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/Inter-Medium.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/Inter-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/Inter-Bold.woff2") format("woff2");}

:root{
  /* ---- REAL OEC brand tokens ---- */
  --oec-dark-navy:#062136;
  --oec-navy:#003c71;
  --oec-turquoise:#2dc8d8;
  --oec-teal:#12b3a8;
  --oec-lime:#ccd426;
  --oec-coral:#de4f38;
  --oec-yellow:#f4b400;
  --oec-black:#000;
  --oec-dark-gray:#4d4e53;
  --oec-gray:#a0a0a0;
  --oec-light-gray:#f9f9f9;
  --oec-white:#fff;
  --oec-border:#e4e7ea;
  --oec-surface-2:#f1f3f5;
  --oec-navy-tint:#eaf1f7;
  --oec-turquoise-tint:#e3f7fa;
  --oec-success:#0d874c;
  --oec-danger:#ce0403;

  /* ---- Legacy aliases mapped onto OEC values ---- */
  --navy-900:#041725;
  --navy-800:#062136;
  --navy-700:#0b2c44;
  --navy-600:#003c71;
  --blue-700:#062136;   /* dark navy (hovers / gradient end) */
  --blue-600:#003c71;   /* navy — primary fills & links */
  --blue-500:#2dc8d8;   /* turquoise — accent */
  --blue-400:#2dc8d8;   /* turquoise — accent borders/hover */
  --blue-100:#bfe9ef;   /* light turquoise hairline */
  --blue-50:#e3f7fa;    /* turquoise tint wash */

  --signal-600:#22b6c4; /* darker turquoise (CTA hover) */
  --signal-500:#2dc8d8; /* turquoise CTA */
  --signal-100:#e3f7fa;

  /* AI accent — retoned to brand (turquoise → teal → navy) */
  --ai-cyan:#2dc8d8;
  --ai-violet:#12b3a8;
  --ai-blue:#003c71;

  /* Neutrals */
  --ink:#062136;
  --ink-2:#4d4e53;
  --muted:#6c7a86;
  --muted-2:#a0a0a0;
  --line:#e4e7ea;
  --line-2:#eef1f3;
  --surface:#fff;
  --surface-soft:#f9f9f9;
  --surface-blue:#eaf1f7;

  --bg:#fff;
  --primary:#003c71;
  --primary-ink:#062136;

  /* Type — Inter only */
  --font-display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Inter", system-ui, sans-serif;

  /* Radii (OEC small-radius scale) */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:20px; --r-pill:30px;

  /* Shadow ladder — no colored glows */
  --sh-sm:0 1px 2px rgba(0,0,0,.06);
  --sh-md:0 4px 20px rgba(0,0,0,.10);
  --sh-lg:0 12px 28px rgba(0,0,0,.16);
  --sh-blue:0 4px 20px rgba(0,0,0,.10);

  /* Layout */
  --maxw:1275px;
  --gut:clamp(20px,4vw,56px);
  --nav-h:76px;

  --ease:cubic-bezier(0.62,0.01,0.37,0.99);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--oec-dark-navy); margin:0; line-height:1.15; letter-spacing:-.01em; font-weight:700;}
p{margin:0;}
code{font-family:ui-monospace, "SFMono-Regular", Menlo, monospace;}
::selection{background:var(--oec-turquoise); color:var(--oec-dark-navy);}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);}
.container-wide{max-width:1400px; margin:0 auto; padding-inline:var(--gut);}
.section{padding-block:clamp(56px,8vw,100px);}
.section-sm{padding-block:clamp(40px,6vw,72px);}
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.grid{display:grid; gap:24px;}

/* ---------- Overline (signature OEC section opener) ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--oec-dark-navy); background:var(--oec-turquoise);
  padding:.42em .85em; border-radius:var(--r-sm); line-height:1;
}
.eyebrow.on-dark{background:var(--oec-turquoise); color:var(--oec-dark-navy);}

/* ---------- Type scale ---------- */
.display{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.02; font-size:clamp(40px,6vw,62px);}
.h1{font-size:clamp(34px,4.4vw,52px); font-weight:700;}
.h2{font-size:clamp(28px,3.2vw,40px); font-weight:700;}
.h3{font-size:clamp(21px,2vw,28px); font-weight:600;}
.lead{font-size:clamp(18px,1.4vw,20px); line-height:1.6; color:var(--ink-2);}
.muted{color:var(--muted);}
.balance{text-wrap:balance;}
.pretty{text-wrap:pretty;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-sans); font-weight:600; font-size:16px;
  padding:13px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform var(--dur,.25s) var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{width:18px; height:18px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--oec-navy); color:#fff;}
.btn-primary:hover{background:var(--oec-dark-navy); transform:translateY(-2px); box-shadow:var(--sh-md);}
.btn-signal{background:var(--oec-turquoise); color:var(--oec-dark-navy);}
.btn-signal:hover{background:#23b7c6; transform:translateY(-2px); box-shadow:var(--sh-md);}
.btn-lime{background:var(--oec-lime); color:var(--oec-dark-navy);}
.btn-lime:hover{background:#bcc31f; transform:translateY(-2px); box-shadow:var(--sh-md);}
.btn-dark{background:var(--oec-dark-navy); color:#fff;}
.btn-dark:hover{background:#020f1c; transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--oec-dark-navy); border-color:var(--oec-gray);}
.btn-ghost:hover{border-color:var(--oec-dark-navy); color:var(--oec-dark-navy); background:rgba(6,33,54,.03);}
.btn-white{background:#fff; color:var(--oec-navy);}
.btn-white:hover{transform:translateY(-2px); box-shadow:var(--sh-lg);}
.btn-link{padding:0; background:none; color:var(--oec-navy); font-weight:600; gap:6px; border:0;}
.btn-link svg{transition:transform .25s var(--ease);}
.btn-link:hover{color:var(--oec-dark-navy);}
.btn-link:hover svg{transform:translateX(4px);}
.btn-lg{padding:16px 32px; font-size:17px;}

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-sm); background:var(--oec-navy-tint); color:var(--oec-navy);
}
.badge-soft{background:var(--oec-light-gray); color:var(--oec-dark-gray);}
.badge-signal{background:var(--oec-turquoise); color:var(--oec-dark-navy);}
.badge-ai{background:var(--oec-turquoise-tint); color:#0a7d8a;}
.badge-dot::before{content:""; width:7px;height:7px;border-radius:50%;background:currentColor;}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card-hover:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--blue-100);}
.card-pad{padding:28px;}

/* ---------- Stat ---------- */
.stat-num{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1; font-size:clamp(36px,4.2vw,56px); color:var(--oec-dark-navy);}
.stat-num .u{color:var(--oec-turquoise);}
.stat-label{color:var(--muted); font-size:15px; margin-top:8px; max-width:18ch;}

/* ---------- Surfaces ---------- */
.bg-soft{background:var(--surface-soft);}
.bg-blue{background:var(--surface-blue);}
.bg-navy{background:var(--oec-dark-navy); color:#fff;}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff;}
.bg-navy .lead{color:rgba(255,255,255,.78);}
.on-dark{color:rgba(255,255,255,.78);}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff;}

/* ---------- Dividers ---------- */
.hr{height:1px; background:var(--line); border:0;}

/* ---------- Reveal animation ----------
   Content is visible by DEFAULT. Only when JS adds `.reveal-on` to <html>
   do elements start hidden and animate in — so a failed/slow IntersectionObserver
   can never leave the page body blank (critical for the client demo). */
.reveal-on [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-on [data-reveal].in{opacity:1; transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}
[data-reveal][data-delay="4"]{transition-delay:.32s;}
[data-reveal][data-delay="5"]{transition-delay:.40s;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   HEADER / NAV  (<oec-header>)
   ============================================================ */
oec-header{display:block; position:sticky; top:0; z-index:200;}
.nav{
  height:var(--nav-h); background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s;
}
.nav.scrolled{box-shadow:var(--sh-md);}
.nav-inner{max-width:1400px; margin:0 auto; padding-inline:var(--gut); height:100%; display:flex; align-items:center; gap:28px;}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.brand-logo{height:30px; width:auto; display:block;}
.brand-word{font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.02em; color:var(--oec-dark-navy);}
.nav-links{display:flex; align-items:center; gap:4px; height:100%;}
.nav-link{
  display:flex; align-items:center; gap:6px; height:100%; padding:0 14px; font-weight:600; font-size:15.5px;
  color:var(--ink-2); position:relative; border:0; background:none;
}
.nav-link:hover{color:var(--oec-navy);}
.nav-link svg{width:14px;height:14px; transition:transform .25s;}
.nav-link[aria-expanded="true"]{color:var(--oec-navy);}
.nav-link[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-spacer{flex:1;}
.nav-utility{display:flex; align-items:center; gap:6px;}
.nav-util-link{font-size:14.5px; font-weight:600; color:var(--ink-2); padding:9px 12px; border-radius:var(--r-sm);}
.nav-util-link:hover{color:var(--oec-navy); background:var(--oec-navy-tint);}

/* Mega menu */
.mega{
  position:absolute; left:0; right:0; top:var(--nav-h);
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-elevated, 0 10px 20px rgba(0,0,0,.15));
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .26s var(--ease);
}
.mega.open{opacity:1; visibility:visible; transform:none;}
.mega-inner{max-width:1400px; margin:0 auto; padding:38px var(--gut) 42px; display:grid; grid-template-columns:repeat(4,1fr) 1.1fr; gap:14px;}
.mega-col h5{font-family:var(--font-sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600;}
.mega-item{display:block; padding:11px 12px; border-radius:var(--r-md); transition:background .18s;}
.mega-item:hover{background:var(--oec-turquoise-tint);}
.mega-item .mi-name{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--oec-dark-navy);}
.mega-item .mi-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.mega-feature{background:var(--oec-dark-navy); border-radius:var(--r-md); padding:24px; color:#fff; display:flex; flex-direction:column; justify-content:space-between;}
.mega-feature .mf-kicker{font-family:var(--font-sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--oec-turquoise);}
.mega-feature .mf-title{font-family:var(--font-display); font-weight:700; font-size:20px; margin-top:10px; line-height:1.15;}

.nav-toggle{display:none;}

@media (max-width:1080px){
  .nav-links,.nav-utility .desktop-only{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* ============================================================
   FOOTER  (<oec-footer>)
   ============================================================ */
oec-footer{display:block; background:var(--oec-dark-navy); color:rgba(255,255,255,.7);}
.footer-top{max-width:var(--maxw); margin:0 auto; padding:72px var(--gut) 48px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
.footer-brand .brand-logo{filter:brightness(0) invert(1); height:32px;}
.footer-brand .brand-word{color:#fff;}
.footer-tag{margin-top:18px; max-width:32ch; color:rgba(255,255,255,.6); font-size:15px;}
.footer-tagline{margin-top:14px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--oec-turquoise);}
.footer-cta{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.footer-col h6{font-family:var(--font-sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px; font-weight:600;}
.footer-col a{display:block; padding:6px 0; color:rgba(255,255,255,.72); font-size:15px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);}
.footer-bottom-inner{max-width:var(--maxw); margin:0 auto; padding:22px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.5);}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:38px;height:38px;border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid;place-items:center; color:rgba(255,255,255,.7);}
.footer-social a:hover{background:var(--oec-turquoise); border-color:var(--oec-turquoise); color:var(--oec-dark-navy);}
.footer-social svg{width:17px;height:17px;}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:13.5px; font-weight:600; color:var(--ink-2);}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--oec-turquoise); box-shadow:0 0 0 4px var(--oec-turquoise-tint);}

/* ---------- Marquee logos placeholder ---------- */
.logo-chip{height:40px; padding:0 22px; border-radius:var(--r-md); background:var(--surface-soft); display:flex; align-items:center; justify-content:center; color:var(--muted-2); font-family:var(--font-display); font-weight:700; letter-spacing:.02em; font-size:18px; white-space:nowrap;}

/* ---------- Image placeholder ---------- */
.ph{
  position:relative; background:linear-gradient(135deg,var(--surface-soft),var(--oec-turquoise-tint));
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:grid; place-items:center; color:var(--muted-2);
}
.ph::after{content:attr(data-ph); font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px;}

/* utility */
.flex{display:flex;} .ac{align-items:center;} .jc{justify-content:center;} .jsb{justify-content:space-between;}
.wrap{flex-wrap:wrap;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;} .gap-32{gap:32px;}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}
.tc{text-align:center;} .mx-auto{margin-inline:auto;}
.maxw-xs{max-width:42ch;} .maxw-sm{max-width:54ch;} .maxw-md{max-width:64ch;}
.hide{display:none !important;}