:root{
  /* Brand (navy-ish like your logo) */
  --ink:#071427;        /* near-black navy */
  --navy:#0B2A4A;       /* primary */
  --navy2:#103A63;      /* hover/alt */
  --sky:#E9F1FA;        /* soft blue wash */
  --line:#E6ECF2;       /* borders */
  --muted:#5C6B7A;      /* secondary text */
  --bg:#FFFFFF;

  /* Accents */
  --accent:#2B7BCB;     /* interactive blue */
  --good:#16a34a;

  --radius:18px;
  --shadow: 0 18px 40px rgba(7,20,39,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1240px;margin:0 auto;padding:0 22px}

/* ---------- Top Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.header .row{
  display:grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | actions */
  align-items:center;
  gap:22px;
  padding:18px 0;
}



/* Brand */
.brand{
  display:flex;align-items:center;gap:12px;min-width:220px;
}
.brand{min-width:auto}
.brand img{
  height:46px;   /* bigger logo */
  width:auto;
}

.brand .small{
  font-size:12px;color:var(--muted);
}

/* Nav links */
.nav{
  display:flex;
  gap:26px;                 /* spread out */
  align-items:center;
  flex-wrap:nowrap;         /* keep on one line */
  font-weight:900;
  margin-left:10px;
}

.nav a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(7,20,39,.85);
  padding:10px 10px;
  border-radius:999px;
}
.nav a:hover{
  background:var(--sky);
  color:var(--ink);
}
/* Keep nav centered and prevent clipping */
.nav{
  justify-content:center;
  white-space:nowrap;
}

/* Keep actions a consistent size so they don’t crush the nav */
.right{
  min-width: 520px;
}

/* Right actions */
.right{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  min-width:420px;          /* prevents squishing */
}

.iconBtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  font-size:13px;
  color:rgba(7,20,39,.85);
}
.iconBtn:hover{border-color:#d7e3ee;background:var(--sky)}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  font-size:13px;
  white-space: nowrap;
  line-height: 1;
  min-width: 86px;
  justify-content: center;
}
.pill.primary{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  border-color:transparent;
  color:#fff;
  box-shadow: 0 12px 24px rgba(11,42,74,.18);
}
.pill.primary:hover{filter:brightness(1.05)}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:999px;
  background:var(--good);color:#fff;font-size:12px;
  padding:0 6px;
}

/* Search (will be used next step) */
.search{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  min-width: 360px;
  max-width: 520px;
  width: 42vw;
}
.search input{
  border:none;outline:none;flex:1;
  font-size:14px;
}
.search .k{
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);
  padding:4px 8px;border-radius:999px;
  background:var(--sky);
}

/* ---------- Hero / Sections ----------
.hero{
  padding:40px 0 18px 0;
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(43,123,203,.14), transparent 60%),
    radial-gradient(900px 360px at 88% 0%, rgba(11,42,74,.12), transparent 60%);
}
.heroGrid{
  display:grid;grid-template-columns: 1.15fr .85fr;
  gap:16px;align-items:stretch;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}
.card.pad{padding:18px}
.h1{
  margin:0;
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.02em;
}
.sub{
  margin:12px 0 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.kpis{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin-top:18px;
}
.kpi{
  border:1px solid var(--line);
  background:var(--sky);
  border-radius:14px;
  padding:12px;
}
.kpi b{display:block;font-size:14px}
.kpi span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4}

/* Interactive tiles */
.tiles{
  display:grid;grid-template-columns:1fr;
  gap:12px;
}
.tile{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #fbfdff);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-2px);
  border-color:#d7e3ee;
  box-shadow: 0 18px 34px rgba(7,20,39,.12);
}
.tile h3{margin:0 0 6px 0;font-size:16px}
.tile p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.tile .mini{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-size:12px;color:rgba(7,20,39,.75);
  border:1px solid var(--line);
  background:var(--sky);
  padding:5px 10px;border-radius:999px;
} */

/* Footer */
.footer{
  margin-top:26px;
  border-top:1px solid var(--line);
  background: #061223;
  color:#e5eef7;
}
.footer .grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:16px;padding:24px 0;
}
.footer h4{margin:0 0 10px 0}
.footer p{margin:0;color:#c8d7e6;line-height:1.7}
.footer a{color:#e5eef7;text-decoration:underline;text-underline-offset:4px;opacity:.9}
.footer a:hover{opacity:1}
.copy{
  border-top:1px solid rgba(230,236,242,.16);
  padding:12px 0;
  color:#c8d7e6;
  font-size:13px;
}

/* Mobile */
.mobileOnly{display:none}
@media (max-width: 980px){
  .nav{display:none}
  .search{display:none}
  .mobileOnly{display:inline-flex}
  .heroGrid{grid-template-columns:1fr}
  .h1{font-size:42px}
  .kpis{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
  .right{min-width:auto}
}

@media (max-width: 520px){
  .footer .grid{grid-template-columns:1fr}
}
/* ===== DuPont-style hero with rotating background ===== */
.heroX{
  position: relative;
  min-height: 520px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  overflow: hidden;
  background: #0b1220;
}

.heroX-bg{
  position:absolute;
  inset:0;
}

.heroX-slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms ease, transform 1200ms ease;
  filter: saturate(1.05) contrast(1.05);
}

.heroX-slide.is-active{
  opacity: 1;
  transform: scale(1.00);
}

/* subtle dark overlay for text readability */
.heroX::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.86) 44%,
    rgba(255,255,255,.00) 70%
  );
  pointer-events:none;
}

/* optional vignette on right */
.heroX::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 85% 40%, rgba(0,0,0,.35), transparent 55%);
  pointer-events:none;
}

.heroX-wrap{
  position:relative;
  z-index:2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 22px;
  height: 100%;
  display:flex;
  align-items:center;
}

.heroX-panel{
  width: min(560px, 92vw);
  padding: 28px 28px;
  border-radius: 26px;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226,232,240,.85);
  box-shadow: 0 30px 70px rgba(15,23,42,.16);
}

.heroX-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.75);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(226,232,240,.9);
}

.heroX-title{
  margin: 16px 0 0 0;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.02;
  font-size: clamp(42px, 4.6vw, 64px);
  color: #0f172a;
}

.heroX-accent{
  color: var(--accent, #2B7BCB);
}

.heroX-sub{
  margin: 14px 0 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(15,23,42,.68);
  max-width: 52ch;
}

.heroX-actions{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

.heroX-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 13px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.90);
  color: #0f172a;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.heroX-btn:hover{ transform: translateY(-1px); border-color:#cbd5e1; }

.heroX-btn.primary{
  background: #0f172a;
  color:#fff;
  border-color:#0f172a;
  box-shadow: 0 16px 28px rgba(15,23,42,.18);
}
.heroX-btn.primary:hover{ filter: brightness(1.05); }

/* Mobile: make overlay more uniform */
@media (max-width: 900px){
  .heroX{ min-height: 560px; }
  .heroX::before{
    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 60%, rgba(255,255,255,.00) 100%);
  }
  .heroX-wrap{ align-items:flex-start; padding-top: 22px; }
  .heroX-panel{ width: min(640px, 94vw); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .heroX-slide{ transition:none !important; }
}
.card{ cursor:pointer; }
.card:active{ transform: translateY(-1px) scale(.995); }