/* ============== BRAND TOKENS (from 2025 Brand Guidelines) ============== */
  :root{
    /* Primary palette */
    --bluejay:#0890FF;
    --canary:#FFD214;
    --midnight:#022440;
    --white:#FFFFFF;
    --black:#000000;
    /* Secondary palette */
    --sky:#EFF9FE;
    --butter:#FFF2CB;
    --lavender:#D5C4FF;
    --ocean:#0673CC;
    --wink:#3304AD;
    /* Neutrals */
    --dove:#F9FAFA;
    --silver:#D5DEE6;
    --coal:#9F9F9F;

    /* Brand drop shadow spec: X:0 Y:0 Blur:10 #000 @ 10% */
    --bshadow:0 0 10px rgba(0,0,0,.10);
    --bshadow-lg:0 0 24px rgba(2,36,64,.10);

    /* Radii — multiples of 8 */
    --r-8:8px;
    --r-16:16px;
    --r-24:24px;
    --r-pill:9999px;

    --ink:var(--midnight);
    --muted:#5a6b80; /* derived neutral for body-secondary, AA on white */
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--white);color:var(--ink);
    font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.02em;        /* Body: -2% kerning */
    line-height:1.5;               /* Body: 150% leading */
  }
  a{color:var(--bluejay);text-decoration:none}
  a:hover{text-decoration:underline}
  .container { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

  /* ============== TYPOGRAPHY (per brand spec) ============== */
  .eyebrow{
    font-weight:400; letter-spacing:-0.02em;
    text-transform:none;
    font-size:14px; color:var(--bluejay);
    display:inline-flex; align-items:center; gap:8px;
    margin-bottom:16px;  /* eyebrow→H1 = 16px (half of 32px H1→sub) */
  }
  .eyebrow .pulse{display:inline-block;width:8px;height:8px;background:var(--canary);
    border-radius:50%;box-shadow:0 0 0 0 rgba(255,210,20,.6);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,210,20,.65)}70%{box-shadow:0 0 0 10px rgba(255,210,20,0)}100%{box-shadow:0 0 0 0 rgba(255,210,20,0)}}

  h1.hero-h{
    font-weight:600;               /* SemiBold per spec */
    letter-spacing:-0.01em;        /* Heading: -1% kerning */
    line-height:0.95;              /* Heading: ~75% leading */
    font-size:64px;
    margin:0 0 32px;
  }
  h1.hero-h .hl{background:linear-gradient(180deg, transparent 62%, var(--canary) 62%);padding:0 6px;border-radius:4px}

  .lede{
    font-weight:400; letter-spacing:-0.02em; line-height:1.5;
    font-size:18px; color:var(--midnight); opacity:.85;
    max-width:560px; margin:0 0 32px;
  }

  h2.sec{
    font-weight:600; letter-spacing:-0.01em; line-height:1.05;
    font-size:40px; margin:0 0 48px;
  }
  h3{font-weight:500; letter-spacing:-0.01em; line-height:1.2; margin:0}
  h4{font-weight:600; letter-spacing:-0.01em; margin:0}
  .sec-eyebrow{
    font-size:14px; color:var(--bluejay); font-weight:500;
    letter-spacing:-0.01em; margin:0 0 8px;
  }

  /* ============== TOPBAR ============== */
  .topbar{background:var(--white);border-bottom:1px solid var(--silver)}
  .topbar .row{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo-img{height:28px;display:block}
  .top-trust{font-size:13px;color:var(--muted)}
  .top-trust b{color:var(--midnight);font-weight:600}

  /* ============== HERO ============== */
  .hero{padding:80px 0 56px;background:
    radial-gradient(1200px 500px at 90% -20%, rgba(8,144,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(255,210,20,.10), transparent 60%),
    var(--white);
  }
  .hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}

  .roi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 32px;}
  .roi{background:var(--white);border:1px solid var(--silver);border-radius:var(--r-16);
    padding:24px;box-shadow:var(--bshadow)}
  .roi .n{font-size:32px;font-weight:600;letter-spacing:-0.01em;line-height:1;color:var(--midnight)}
  .roi .n .unit{font-size:14px;color:var(--muted);font-weight:500;margin-left:2px}
  .roi .l{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.4}
  .roi.accent{background:var(--sky);border-color:#cfe6f7}
  .roi.accent .n{color:var(--ocean)}

  .role-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
  .pill{font-size:13px;border:1px solid var(--silver);background:var(--white);color:var(--midnight);
    padding:8px 16px;border-radius:var(--r-pill);font-weight:500;letter-spacing:-0.01em}
  .pill b{color:var(--bluejay);font-weight:600}

  /* ============== FORM CARD ============== */
  .formcard{background:var(--white);border:1px solid var(--silver);
    border-radius:var(--r-24);padding:32px;box-shadow:var(--bshadow-lg);position:sticky;top:24px}
  .formcard h2.form-h{
    font-weight:600; letter-spacing:-0.01em; line-height:1.1;
    font-size:24px; margin:0 0 8px; color:var(--midnight);
  }
  .formcard p.sub{margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.5}

  .expect{background:var(--sky);border-radius:var(--r-16);padding:16px 20px;
    margin:0 0 24px;font-size:13px;color:var(--midnight)}
  .expect .lab{font-weight:600;display:block;margin-bottom:8px}
  .expect ul{margin:0;padding:0;list-style:none}
  .expect li{padding:4px 0 4px 24px;position:relative}
  .expect li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:14px;
    border-radius:50%;background:var(--bluejay);
    box-shadow:inset 0 0 0 3px var(--sky), inset 0 0 0 4px var(--bluejay)}

  .field{display:block;margin-bottom:16px}
  .field > span.lab{display:block;font-size:12px;font-weight:500;color:var(--midnight);
    margin-bottom:8px;letter-spacing:-0.01em}
  .field input, .field select{
    width:100%;padding:12px 16px;border:1px solid var(--silver);
    border-radius:var(--r-8);font-size:14px;background:var(--white);
    color:var(--midnight);font-family:inherit;letter-spacing:-0.01em;
    transition:border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus{
    outline:none;border-color:var(--bluejay);
    box-shadow:0 0 0 3px rgba(8,144,255,.15)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* Primary CTA — Poppins Medium, pill, brand spec spacing */
  .cta{
    display:inline-block;width:100%;text-align:center;
    background:var(--canary); color:var(--midnight);
    font-family:"Poppins",sans-serif; font-weight:500; letter-spacing:-0.01em;
    border:none; padding:24px 32px;
    border-radius:var(--r-pill);
    font-size:16px;cursor:pointer;margin-top:8px;
    box-shadow:var(--bshadow);
    transition:transform .08s ease, box-shadow .15s ease;
  }
  .cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,210,20,.45)}
  .cta-secondary{
    background:transparent;color:var(--bluejay);
    padding:16px 24px;border:1px solid var(--bluejay);
  }
  .micro{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.5}

  /* ============== SECTIONS ============== */
  section.bd{padding:96px 0;border-top:1px solid var(--silver)}
  section.bd.dove{background:var(--dove)}
  section.bd.sky{background:var(--sky)}

  /* ============== LOGOS STRIP ============== */
  .logos{padding:40px 0;background:var(--white);border-top:1px solid var(--silver)}
  .logos .label{text-align:center;color:var(--muted);font-size:18px;font-weight:500;letter-spacing:-0.01em;margin-bottom:24px}

.logos.dark {
  background: var(--midnight);
  border-top-color: var(--midnight);
}

.logos.dark .label {
  color: var(--white);
}
.logos.dark .logo-row img {
  filter: brightness(0) invert(1) opacity(1);
}
.logos.dark .logo-row img:hover {
  filter: brightness(0) invert(1) opacity(.7);
}

  .logo-row{display:grid;grid-template-columns:repeat(8,1fr);gap:24px;align-items:center}
  .logo-row img{max-width:100%;height:32px;object-fit:contain;
    filter:grayscale(100%) opacity(.7);transition:filter .2s}
  .logo-row img:hover{filter:none}

  /* ============== ROLE CARDS ============== */
  .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .role{background:var(--white);border:1px solid var(--silver);
    border-radius:var(--r-24);padding:32px;box-shadow:var(--bshadow);
    transition:transform .15s ease, box-shadow .15s ease}
  .role:hover{transform:translateY(-2px);box-shadow:var(--bshadow-lg)}
  .role .badge{display:inline-block;font-size:12px;font-weight:500;
    letter-spacing:-0.01em;background:var(--sky);color:var(--ocean);
    padding:6px 12px;border-radius:var(--r-pill);margin-bottom:16px}
  .role h3{font-size:22px;margin-bottom:12px;font-weight:600;color:var(--midnight)}
  .role p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.5}
  .role .kpis{display:flex;gap:8px;flex-wrap:wrap}
  .kpi{font-size:12px;font-weight:500;letter-spacing:-0.01em;
    background:var(--midnight);color:var(--white);padding:6px 12px;border-radius:var(--r-pill)}
  .kpi.alt{background:var(--white);color:var(--midnight);border:1px solid var(--silver)}

  /* ============== QUOTES / PROOF ============== */
  .quote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .quote{border-radius:var(--r-24);padding:40px;position:relative;overflow:hidden;box-shadow:var(--bshadow-lg)}
  .quote.dark{background:var(--midnight);color:var(--white)}
  .quote.light{background:var(--white);color:var(--midnight);border:1px solid var(--silver)}
  .quote .mark{font-family:Georgia,serif;font-size:96px;line-height:1;
    position:absolute;top:16px;left:24px;opacity:.2}
  .quote.dark .mark{color:var(--canary)}
  .quote.light .mark{color:var(--bluejay)}
  .quote .q{font-size:22px;line-height:1.4;font-weight:500;letter-spacing:-0.01em;
    margin:24px 0 24px;position:relative;z-index:1}
  .quote .who{font-size:14px;line-height:1.5}
  .quote.dark .who{color:rgba(255,255,255,.7)}
  .quote.light .who{color:var(--muted)}
  .quote .who b{font-weight:600}
  .quote.dark .who b{color:var(--white)}
  .quote.light .who b{color:var(--midnight)}
  .quote .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
    margin-top:32px;padding-top:32px;border-top:1px solid}
  .quote.dark .stats{border-color:rgba(255,255,255,.15)}
  .quote.light .stats{border-color:var(--silver)}
  .quote .stats .n{font-size:24px;font-weight:600;letter-spacing:-0.01em;line-height:1.1}
  .quote.dark .stats .n{color:var(--canary)}
  .quote.light .stats .n{color:var(--bluejay)}
  .quote .stats .l{font-size:12px;margin-top:4px;line-height:1.4}
  .quote.dark .stats .l{color:rgba(255,255,255,.7)}
  .quote.light .stats .l{color:var(--muted)}

  /* ============== HOW IT WORKS ============== */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step{background:var(--white);border:1px solid var(--silver);
    border-radius:var(--r-16);padding:24px;box-shadow:var(--bshadow)}
  .step .num{font-size:14px;font-weight:600;color:var(--bluejay);
    margin-bottom:16px;letter-spacing:-0.01em}
  .step h4{font-size:16px;margin-bottom:8px;color:var(--midnight)}
  .step p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

  /* ============== AWARDS ============== */
  .awards{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;
    align-items:flex-start;padding:32px 0}
  .award{font-size:12px;color:var(--muted);text-align:center;max-width:140px;line-height:1.4}
  .award b{display:block;color:var(--midnight);font-size:14px;font-weight:600;
    margin-bottom:4px;letter-spacing:-0.01em}
.award-badge {
  display: block;
  margin: 0 auto 12px;
  height: 80px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

  /* ============== FOOTER CTA BAND ============== */
  .cta-band{background:var(--midnight);color:var(--white);padding:80px 0;text-align:center;
    background-image:
      radial-gradient(800px 300px at 20% 20%, rgba(8,144,255,.15), transparent 60%),
      radial-gradient(800px 300px at 80% 80%, rgba(255,210,20,.08), transparent 60%);
  }
  .cta-band h3{font-size:36px;font-weight:600;letter-spacing:-0.01em;
    line-height:1.1;margin:0 0 16px;color:var(--white)}
  .cta-band p{margin:0 0 32px;color:rgba(255,255,255,.75);font-size:18px}
  .cta-band .btn{display:inline-block;background:var(--canary);color:var(--midnight);
    font-weight:500;letter-spacing:-0.01em;padding:12px 16px;
    border-radius:var(--r-pill);text-decoration:none;font-size:16px;
    box-shadow:var(--bshadow)}
  .cta-band .btn:hover{text-decoration:none;transform:translateY(-1px)}

  /* ============== RESPONSIVE ============== */
  @media (max-width: 1024px){
    h1.hero-h{font-size:48px}
    h2.sec{font-size:32px}
  }
  @media (max-width: 960px){
    .hero{padding:48px 0 32px}
    .hero .grid{grid-template-columns:1fr;gap:40px}
    h1.hero-h{font-size:40px}
    .roles, .steps{grid-template-columns:1fr 1fr}
    .quote-wrap{grid-template-columns:1fr}
    .logo-row{grid-template-columns:repeat(4,1fr)}
  }
  @media (max-width: 560px){
    h1.hero-h{font-size:32px}
    h2.sec{font-size:26px}
    .roi-row{grid-template-columns:1fr 1fr}
    .roles, .steps{grid-template-columns:1fr}
    .logo-row{grid-template-columns:repeat(3,1fr)}
    .quote{padding:24px}
    .cta-band h3{font-size:26px}
    /* Stack the topbar on smartphone */
    .topbar .row{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      height:auto;
      padding:16px 0;
    }
    .top-trust{font-size:12px}
  }
@media (max-width: 480px) {
  .roi-row {
    grid-template-columns: 1fr;
  }
  .role-pills {
    justify-content: center;
  }
}