/* =========================
   DESIGN TOKENS (same palette)
==========================*/
:root{
  --bg-deep:#474a56;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.18);
  --text: #ffffff;
  --muted:#cfd6ff;

  --blue-1:#00c6ff;
  --blue-2:#1e47a8;
  --blue-3:#7ab3ff;
  --red-1:#e23d3d;
  --red-2:#ff6b6b;

  --nav-cyan:#00f0ff;
  --nav-pink:#ff00c8;

  --card-dark:#0b0f1a;
  --card-dark-2:#0f1424;

  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,.45);

  --radius-lg: 24px;
  --radius-xl: 32px;
}
:root{
  --bg:#ffffff; --ink:#101114; --muted:#5c656d;
  --brand:#1c4c2d; --olive:#91a381;
  --ring:rgba(16,17,20,.08);
  --shadow:0 10px 30px rgba(16,17,20,.09),0 6px 16px rgba(16,17,20,.04);
  --glass:rgba(226,232,240,.65); --blur:saturate(120%) blur(10px);
  --radius-lg:28px; --radius-xl:48px; --maxw:1200px;
  --chip-bg:#f6f9ff; --chip-border:#e2ebff;
}

/* =========================
   RESET / BASE
==========================*/
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  width:100%;
  overflow-x:hidden;
  font-family:'Josefin Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color:var(--bg);
  color:var(--ink);
  position:relative;
  scroll-behavior:smooth;
}
main{position:relative;z-index:10;width:100%}
.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}
:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px;border-radius:8px}


/* =========================
   PAGE SECTIONS
==========================*/
.page-hero{ max-width: var(--maxw); margin: 42px auto 0; padding: 24px 18px 0; }
.page-hero-card{
  background:#fff; border:1px solid #e6ebf5; border-radius: 22px; box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px); position: relative; overflow: hidden;
}
.page-hero-card::after{
  content:''; position:absolute; inset: -2px; border-radius: 22px; pointer-events:none;
  background: radial-gradient(80% 50% at 20% 0%, rgba(159,182,255,.12), transparent 60%),
              radial-gradient(80% 50% at 80% 0%, rgba(226,61,61,.08), transparent 60%);
  filter: blur(10px);
}
.page-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font: 700 .8rem/1 var(--font, 'Work Sans', system-ui);
  background: var(--chip-bg); border:1px solid var(--chip-border); color:#1b2440;
  padding: 8px 12px; border-radius: 999px; margin-bottom: 10px;
}
.hero-title{ font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .2px; }
.hero-sub{ color:black; font-size: clamp(1.1rem, 2vw, 1.25rem); line-height:1.8; margin-top:10px; font-weight: 600; }

/* Benefits grid */
.section{ max-width: var(--maxw); margin: 18px auto 0; padding: 0 18px 42px; }
.benefit-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 16px;
}
@media (max-width: 980px){
  .benefit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .benefit-grid{ grid-template-columns: 1fr; }
}
.benefit-card{
  background:#fff; border:1px solid #e6ebf5; border-radius: 20px; box-shadow: var(--shadow);
  padding: clamp(18px, 2.4vw, 26px); display:flex; gap:14px; align-items:flex-start; position:relative; overflow:hidden;
}
.benefit-icon{
  flex:0 0 46px; height:46px; width:46px; border-radius:12px;
  display:grid; place-items:center; background:#f4f7ff; border:1px solid #e6ebf5;
}
.benefit-icon i{ font-size:20px; color:#1e47a8; }
.benefit-title{ font-size:1.1rem; font-weight:900; color:#0021AD; margin-bottom:.25rem; }
.benefit-text{ color:#000; line-height:1.8; font-size:1.2rem; font-weight: 600; }

/* Reveal */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform: translateY(0) }

/* helpers */
.blue{ color:#0021AD; }
.red{ color:#e8000d; }