:root{
    /* Portal-aligned palette (mirrors ebm-app public/css/style.css) */
    --navy:#0a1628;        /* hero / nav / footer / CTA / stat tiles */
    --navy-2:#0f2140;      /* inner panels on navy */
    --navy-line:#24375c;   /* borders on navy surfaces */
    --gold:#FFD700;        /* bright gold — on navy, button bg, chips */
    --gold-hover:#FFC107;
    --gold-ink:#8a6d00;    /* readable gold-brown for accent text on white */
    --cerise:#D70C56;      /* Urban Stream secondary accent */
    --bg:#f5f6fa;          /* light body canvas */
    --surface:#ffffff;     /* white cards */
    --line:#e2e8f0;        /* light borders */
    --ink:#16233a;         /* headings on light */
    --ink-body:#44546a;    /* body text on light */
    --ink-dim:#6b7b8d;     /* muted text on light */
    --on-navy:#eaf0fb;     /* text on navy */
    --on-navy-dim:#9fb0cc; /* dim text on navy */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--bg);
    color:var(--ink-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--navy);text-decoration:none}
  a:hover{color:var(--cerise)}
  .container{max-width:1160px;margin:0 auto;padding:0 24px}

  /* NAV — navy with gold underline (like the portal) */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(10,22,40,.92);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:2px solid var(--gold);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--gold)}
  .brand .logo{
    width:34px;height:34px;border-radius:9px;
    background:var(--gold);
    display:flex;align-items:center;justify-content:center;
    color:var(--navy);font-weight:900;
  }
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{color:var(--on-navy-dim);font-weight:500;font-size:14px}
  .nav-links a:hover{color:#fff}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 20px;border-radius:9px;font-weight:700;font-size:14px;
    border:1px solid transparent;cursor:pointer;transition:transform .15s, background .15s;
  }
  .btn-primary{background:var(--gold);color:var(--navy)}
  .btn-primary:hover{background:var(--gold-hover);color:var(--navy);transform:translateY(-1px)}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
  .btn-lg{padding:14px 26px;font-size:15px}
  /* Ghost buttons sitting on a navy band */
  .hero .btn-ghost,.cta-band .btn-ghost,.seg-hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
  .hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.seg-hero .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

  /* HERO — navy band */
  .hero{
    padding:96px 0 80px;color:var(--on-navy);
    background:
      radial-gradient(900px 400px at 82% 0%, rgba(255,215,0,.12), transparent 60%),
      radial-gradient(700px 350px at 8% 30%, rgba(30,58,95,.55), transparent 60%),
      var(--navy);
  }
  .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
  .tag{
    display:inline-block;padding:6px 12px;border:1px solid var(--navy-line);
    border-radius:100px;font-size:12px;color:var(--on-navy-dim);margin-bottom:20px;
  }
  .tag .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}
  .hero h1{
    font-size:52px;line-height:1.08;margin:0 0 20px;color:#fff;
    font-weight:800;letter-spacing:-.02em;
  }
  .hero h1 .grad{color:var(--gold)}
  .hero p.lead{font-size:18px;color:var(--on-navy-dim);max-width:600px;margin:0 0 32px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero .proof{margin-top:36px;display:flex;gap:28px;flex-wrap:wrap;color:var(--on-navy-dim);font-size:13px}
  .hero .proof i{color:var(--gold);margin-right:6px}

  /* Mock dashboard card — white, elevated on the navy hero */
  .mock{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  }
  .mock-head{display:flex;gap:6px;margin-bottom:14px}
  .mock-head span{width:10px;height:10px;border-radius:50%;background:#d7deea}
  .mock-head span:nth-child(1){background:#ff6b6b}
  .mock-head span:nth-child(2){background:#f3c969}
  .mock-head span:nth-child(3){background:#2fae6b}
  .mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
  .mock-stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
  .mock-stat .lbl{font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}
  .mock-stat .val{font-size:20px;font-weight:700;margin-top:4px;color:var(--ink)}
  .mock-stat .val.accent{color:var(--cerise)}
  .mock-stat .val.blue{color:var(--navy)}
  .mock-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:13px;color:var(--ink-body)}
  .mock-row .left{display:flex;align-items:center;gap:10px}
  .mock-row .left i{color:var(--ink-dim)}
  .badge{display:inline-block;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:600}
  .badge.live{background:rgba(47,174,107,.14);color:#1f8a52}
  .badge.blue{background:rgba(10,22,40,.08);color:var(--navy)}
  .badge.warn{background:rgba(255,193,7,.20);color:#8a6d00}

  /* Sections — light */
  section{padding:88px 0;border-bottom:1px solid var(--line)}
  .section-head{text-align:center;max-width:740px;margin:0 auto 56px}
  .section-head .kicker{color:var(--gold-ink);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
  .section-head h2{font-size:38px;margin:0 0 14px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
  .section-head p{color:var(--ink-dim);font-size:17px;margin:0}

  /* Feature grid — white cards */
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .feature{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:26px;transition:border .2s, transform .2s, box-shadow .2s;
  }
  .feature:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(10,22,40,.20)}
  .feature .ico{
    width:44px;height:44px;border-radius:10px;
    background:rgba(255,215,0,.22);color:var(--navy);
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
  }
  .feature h3{font-size:18px;margin:0 0 8px;font-weight:700;color:var(--ink)}
  .feature p{color:var(--ink-dim);font-size:14px;margin:0 0 12px}
  .feature ul{padding:0;margin:0;list-style:none}
  .feature li{font-size:13px;color:var(--ink-dim);padding:4px 0 4px 22px;position:relative}
  .feature li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--navy)}
  .feature-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:36px;align-items:start}
  .feature-wide .fw-head h3{font-size:22px;margin:0 0 10px;color:var(--ink)}
  .feature-wide .fw-head p{margin:0}
  .feature-wide .fw-points{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 30px;padding:0;margin:0;list-style:none}
  .feature-wide .fw-points li{font-size:13px;color:var(--ink-dim);padding:6px 0 6px 22px;position:relative}
  .feature-wide .fw-points li::before{content:"";position:absolute;left:4px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--navy)}
  .feature .case-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:700;color:var(--navy)}
  .feature .case-link:hover{color:var(--cerise)}
  .proof .section-head{margin-bottom:34px}
  .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .proof-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;transition:border .2s, transform .2s, box-shadow .2s}
  .proof-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(10,22,40,.20)}
  .proof-card .tag2{font-size:11px;color:var(--gold-ink);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
  .proof-card .res{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:14px}
  .proof-card .site{font-size:12px;color:var(--ink-dim);margin-top:auto}
  @media (max-width:920px){.proof-grid{grid-template-columns:1fr 1fr}}

  /* Who we help — segment cards */
  .who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .seg-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;transition:border .2s, transform .2s, box-shadow .2s}
  .seg-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(10,22,40,.20)}
  .seg-card .ico{width:46px;height:46px;border-radius:11px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
  .seg-card h3{font-size:18px;margin:0 0 8px;font-weight:700;color:var(--ink)}
  .seg-card p{color:var(--ink-dim);font-size:14px;margin:0 0 14px}
  .seg-card .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px}
  .seg-card:hover .go{color:var(--cerise)}

  /* Integrations */
  .integrations{background:#eef1f7}
  .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .logo-card{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:22px 18px;text-align:center;
  }
  .logo-card .name{font-weight:700;font-size:15px;margin-top:8px;color:var(--ink)}
  .logo-card .role{font-size:12px;color:var(--ink-dim);margin-top:4px}
  .logo-card i{font-size:24px;color:var(--navy)}

  /* Split / workflow */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .split h3{font-size:28px;margin:0 0 18px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
  .split p{color:var(--ink-dim);font-size:15px;margin:0 0 20px}
  .check{display:flex;gap:12px;margin-bottom:14px}
  .check i{color:var(--gold-ink);font-size:18px;flex-shrink:0}
  .check .t{font-size:14px}
  .check .t strong{color:var(--ink)}
  .check .t span{color:var(--ink-dim)}

  /* Stats strip — navy tiles with gold numbers (pop on the light section) */
  .stats-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1120px;margin:0 auto}
  .stats-strip .s{text-align:center;padding:24px 10px;background:var(--navy);border:1px solid var(--navy);border-radius:12px}
  .stats-strip .s .n{font-size:32px;font-weight:800;color:var(--gold);margin-bottom:4px}
  .stats-strip .s .l{font-size:13px;color:var(--on-navy-dim)}

  /* CTA — navy band */
  .cta-band{
    text-align:center;color:var(--on-navy);
    background:
      radial-gradient(600px 300px at 50% 0%, rgba(255,215,0,.14), transparent 70%),
      var(--navy);
    padding:88px 0;
  }
  .cta-band h2{font-size:38px;margin:0 0 14px;font-weight:800;color:#fff}
  .cta-band p{color:var(--on-navy-dim);font-size:17px;margin:0 0 28px}

  /* Landing-page (segment) hero — navy, a touch smaller than home hero */
  .seg-hero{color:var(--on-navy);padding:76px 0 64px;background:
    radial-gradient(820px 360px at 85% 0%, rgba(255,215,0,.12), transparent 60%),
    radial-gradient(640px 320px at 6% 30%, rgba(30,58,95,.55), transparent 60%),
    var(--navy);}
  .seg-hero .eyebrow{color:var(--gold);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
  .seg-hero h1{font-size:44px;line-height:1.1;margin:0 0 18px;font-weight:800;letter-spacing:-.02em;color:#fff;max-width:780px}
  .seg-hero p.lead{font-size:18px;color:var(--on-navy-dim);max-width:660px;margin:0 0 28px}
  .seg-hero .cta{display:flex;gap:14px;flex-wrap:wrap}

  /* Generic light helpers for landing pages */
  .col2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .panel-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px}
  .panel-card h3{margin:0 0 14px;font-size:20px;font-weight:800;color:var(--ink)}
  .pain{display:flex;gap:12px;margin-bottom:14px;font-size:14px}
  .pain i{color:var(--cerise);font-size:18px;flex-shrink:0}
  .pain .t strong{color:var(--ink)}
  .pain .t span{color:var(--ink-dim)}
  .result-band{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:26px 28px}
  .result-band .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
  .result-band .tile{text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px 8px}
  .result-band .tile .n{font-size:26px;font-weight:800;color:var(--navy)}
  .result-band .tile .l{font-size:12px;color:var(--ink-dim);margin-top:4px}

  footer{padding:48px 0 36px;color:var(--on-navy-dim);font-size:13px;background:var(--navy)}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px}
  .foot-grid h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
  .foot-grid a{color:var(--on-navy-dim);display:block;padding:4px 0}
  .foot-grid a:hover{color:var(--gold)}
  .foot-bot{border-top:1px solid var(--navy-line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

  @media (max-width:920px){
    .hero-grid,.split,.features,.logos,.stats-strip,.foot-grid,.who-grid,.col2{grid-template-columns:1fr}
    .feature-wide,.feature-wide .fw-points{grid-template-columns:1fr}
    .logos{grid-template-columns:repeat(2,1fr)}
    .stats-strip{grid-template-columns:repeat(2,1fr)}
    .who-grid{grid-template-columns:1fr}
    .result-band .tiles{grid-template-columns:repeat(2,1fr)}
    .hero h1{font-size:38px}
    .seg-hero h1{font-size:32px}
    .section-head h2,.cta-band h2{font-size:28px}
    .nav-links{display:none}
  }

/* ---- Forms (contact / demo request) ---- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px}
.form-card h3{margin:0 0 4px;font-size:21px;color:var(--ink)}
.form-card .sub{color:var(--ink-dim);font-size:14px;margin:0 0 18px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);box-sizing:border-box}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.28)}
.form-field textarea{min-height:110px;resize:vertical}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:12px;font-size:14px;font-weight:600}
.form-msg.ok{color:#16a34a}
.form-msg.err{color:var(--cerise)}
.form-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:18px;color:#166534}
@media(max-width:560px){.form-row2{grid-template-columns:1fr}}