/*
  Bengal Strategy — Design System
  Single fixed dark theme. No light mode, no toggle.
  Every text token is tuned for WCAG AA contrast or better
  against the dark background colours used across this site.
*/

:root {
  --gold:       #D4B05C;
  --gold-lt:    #ECCF85;
  --gold-dim:   rgba(212,176,92,0.14);
  --gold-bdr:   rgba(212,176,92,0.36);

  --bg:         #0C1220;
  --bg-nav:     rgba(12,18,32,0.97);
  --bg-card:    rgba(255,255,255,0.06);
  --bg-card-h:  rgba(255,255,255,0.10);
  --bg-stripe:  rgba(255,255,255,0.03);
  --bg-input:   rgba(255,255,255,0.07);
  --bg-footer:  #070C18;

  --bdr:        rgba(255,255,255,0.14);
  --bdr-hi:     rgba(212,176,92,0.42);

  /* Text scale — all checked for contrast against #0C1220 and --bg-card
     t1  #FFFFFF  on #0C1220 -> contrast ratio approx 18.9:1
     t2  #EAF0F7  on #0C1220 -> contrast ratio approx 16.8:1
     t3  #C7D4E3  on #0C1220 -> contrast ratio approx 12.4:1
     t4  #9FB1C4  on #0C1220 -> contrast ratio approx  7.6:1
     t5  #7C92A8  on #0C1220 -> contrast ratio approx  5.1:1  (labels/eyebrows only, never body text) */
  --t1: #FFFFFF;
  --t2: #EAF0F7;
  --t3: #C7D4E3;
  --t4: #9FB1C4;
  --t5: #7C92A8;
  --tg: #D4B05C;

  --teal:    #14B8A6;
  --coral:   #F0703D;
  --violet:  #9166F0;
  --emerald: #22C58D;
  --blue:    #4D8BF5;

  --r:  12px;
  --rl: 18px;
}

/* Footer is always the darkest panel on the page, text forced bright */
.site-footer, .footer-bottom { background: var(--bg-footer); }
.site-footer p,
.footer-brand p             { color: #AFC0D2; }
.fb-logo, .footer-bottom a  { color: var(--gold-lt); }
.footer-col h4              { color: #7C92A8; }
.footer-col a                { color: #C7D4E3; }
.footer-col a:hover          { color: var(--gold-lt); }
.footer-bottom p             { color: #7C92A8; }

/* === RESET === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (hover:hover) and (pointer:fine) { body { cursor:none; } }

/* === CURSOR === */
.cursor {
  width:10px; height:10px; background:var(--gold); border-radius:50%;
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
}
.cursor-ring {
  width:36px; height:36px; border:1.5px solid rgba(212,176,92,0.45);
  border-radius:50%; position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transition: transform 0.28s cubic-bezier(0.23,1,0.32,1),
              width .22s, height .22s, border-color .22s;
}
.cursor-ring.on { border-color:var(--gold); width:50px; height:50px; }

/* === PROGRESS BAR === */
.progress-bar {
  position:fixed; top:0; left:0; height:2px;
  background:var(--gold); z-index:201; width:0%;
}

/* === SCROLL REVEAL === */
.reveal {
  opacity:0; transform:translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity:1; transform:none; }

/* === NAV === */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  padding:0 2rem;
  height:58px;
  background: var(--bg-nav);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr);
}

.nav-logo {
  font-family:'Syne',sans-serif; font-weight:700; font-size:0.95rem;
  letter-spacing:0.06em; color:var(--gold); text-decoration:none;
  display:flex; align-items:center; gap:0.35rem; flex-shrink:0;
  white-space:nowrap;
}
.nav-logo em { font-weight:400; color:var(--t4); font-size:0.73rem; font-style:normal; }

.nav-links { display:flex; align-items:center; gap:0.1rem; list-style:none; }
.nav-links a {
  color:var(--t3); text-decoration:none;
  font-size:0.78rem; padding:0.4rem 0.75rem; border-radius:50px;
  transition: color .18s, background .18s;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--t1); background:var(--bg-card); }
.nav-links a.active { color:var(--gold-lt); background:var(--gold-dim); }

.nav-cta {
  background:var(--gold) !important; color:#0C1220 !important;
  font-weight:700 !important; border-radius:50px !important;
  padding:0.4rem 0.9rem !important;
}
.nav-cta:hover { background:var(--gold-lt) !important; }

.nav-ext {
  border:1px solid var(--bdr) !important; color:var(--t3) !important;
}
.nav-ext:hover { border-color:var(--gold) !important; color:var(--gold-lt) !important; background:var(--gold-dim) !important; }

.nav-right { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }

/* === HAMBURGER === */
.hbtn {
  display:none;
  width:36px; height:36px; border-radius:var(--r);
  border:1px solid var(--bdr); background:var(--bg-card);
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; flex-shrink:0;
  transition: border-color .2s, background .2s;
}
.hbtn:hover { border-color:var(--gold); background:var(--gold-dim); }
.hbtn span {
  display:block; width:17px; height:1.5px;
  background:var(--t1); border-radius:2px;
  transition: transform .26s ease, opacity .26s ease;
}
.hbtn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hbtn.open span:nth-child(2) { opacity:0; }
.hbtn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* === MOBILE DRAWER === */
.mob-menu {
  display:none; position:fixed;
  top:58px; left:0; right:0; bottom:0;
  z-index:99; background:var(--bg);
  padding:1.5rem; flex-direction:column; gap:0.25rem;
  overflow-y:auto;
  border-top:1px solid var(--bdr);
}
.mob-menu.open { display:flex; animation: fadeIn .22s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.mob-menu a {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.9rem 1.1rem; border-radius:var(--r);
  text-decoration:none; font-size:1rem; font-weight:500;
  color:var(--t2); border:1px solid transparent;
  transition: background .18s, border-color .18s, color .18s;
}
.mob-menu a:hover, .mob-menu a.active {
  background:var(--bg-card); border-color:var(--bdr); color:var(--gold-lt);
}
.mob-cta {
  background:var(--gold) !important; color:#0C1220 !important;
  font-weight:700 !important; margin-top:0.25rem !important;
  border-color:transparent !important;
}
.mob-cta:hover { background:var(--gold-lt) !important; }
.mob-ext { border:1px solid var(--bdr) !important; color:var(--t3) !important; }
.mob-ext:hover { border-color:var(--gold) !important; color:var(--gold-lt) !important; }

.mob-sep { height:1px; background:var(--bdr); margin:0.4rem 0; }
.mob-lbl {
  font-size:0.64rem; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--t5); padding:0.5rem 1.1rem 0.15rem;
}

/* === SHARED LAYOUT === */
.pg-hero { padding:5rem 2.5rem 4rem; max-width:1200px; margin:0 auto; }
.pg-section { padding:4rem 2.5rem; max-width:1200px; margin:0 auto; }
.full-divider { border:none; border-top:1px solid var(--bdr); margin:0; }

.lbl { font-size:0.65rem; letter-spacing:0.17em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:0.5rem; display:block; }
.hdg { font-family:'Syne',sans-serif; font-size:clamp(1.7rem,3vw,2.5rem); font-weight:700; line-height:1.1; color:var(--t1); margin-bottom:0.85rem; }
.sub { font-size:0.96rem; color:var(--t2); line-height:1.85; max-width:560px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:0.55rem;
  background:var(--gold-dim); border:1px solid var(--gold-bdr);
  padding:0.32rem 0.85rem; border-radius:50px;
  font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:1.4rem;
}
.dot-pulse { width:5px; height:5px; background:var(--gold); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

.pg-title {
  font-family:'Syne',sans-serif; font-size:clamp(2.4rem,5.5vw,4.5rem);
  font-weight:800; line-height:0.94; color:var(--t1); margin-bottom:1.4rem;
}
.pg-title .ac { color:var(--gold-lt); }
.pg-title .dm { color:var(--t4); }

.pg-intro { font-size:1.03rem; color:var(--t2); max-width:580px; line-height:1.85; }

/* === CARDS === */
.card {
  background:var(--bg-card); border:1px solid var(--bdr); border-radius:var(--rl);
  padding:1.75rem; position:relative; overflow:hidden;
  transition: border-color .22s, background .22s, transform .18s;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .32s ease;
}
.card:hover { border-color:var(--bdr-hi); background:var(--bg-card-h); transform:translateY(-2px); }
.card:hover::before { transform:scaleX(1); }
.ca-gold::before   { background:var(--gold); }
.ca-teal::before   { background:var(--teal); }
.ca-violet::before { background:var(--violet); }
.ca-coral::before  { background:var(--coral); }
.ca-blue::before   { background:var(--blue); }
.ca-em::before     { background:var(--emerald); }

.c-tag   { font-size:0.62rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--t4); margin-bottom:0.55rem; display:block; }
.c-title { font-family:'Syne',sans-serif; font-size:1.03rem; font-weight:600; margin-bottom:0.45rem; line-height:1.28; color:var(--t1); }
.c-val   { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700; color:var(--gold-lt); display:block; margin-bottom:0.38rem; }
.c-body  { font-size:0.85rem; color:var(--t2); line-height:1.75; }

/* Grid helpers */
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/* === STAT === */
.stat-b {
  background:var(--bg-card); border:1px solid var(--bdr); border-radius:var(--r);
  padding:1.2rem 1.4rem; transition:border-color .2s;
}
.stat-b:hover { border-color:var(--bdr-hi); }
.stat-b .sv { font-family:'Syne',sans-serif; font-size:1.9rem; font-weight:700; color:var(--gold-lt); display:block; margin-bottom:0.22rem; }
.stat-b .sl { font-size:0.78rem; color:var(--t2); line-height:1.45; }

/* === BUTTONS === */
.btn {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.68rem 1.5rem; border-radius:50px;
  font-size:0.82rem; font-family:'Inter',sans-serif;
  text-decoration:none; cursor:pointer; font-weight:500;
  transition: all .2s;
}
.btn-g  { background:var(--gold); color:#0C1220; font-weight:700; }
.btn-g:hover { background:var(--gold-lt); }
.btn-gh { border:1px solid var(--bdr); color:var(--t2); background:transparent; }
.btn-gh:hover { border-color:var(--gold); color:var(--gold-lt); background:var(--gold-dim); }

/* === PILLS === */
.pill { display:inline-block; padding:0.28rem 0.82rem; border-radius:50px; font-size:0.74rem; font-weight:500; }
.p-g  { background:rgba(212,176,92,0.16); color:#F0DBA5; border:1px solid rgba(212,176,92,0.34); }
.p-t  { background:rgba(20,184,166,0.16); color:#6EE9D8; border:1px solid rgba(20,184,166,0.34); }
.p-v  { background:rgba(145,102,240,0.16); color:#C2ACF7; border:1px solid rgba(145,102,240,0.34); }
.p-c  { background:rgba(240,112,61,0.16);  color:#FAAC8A; border:1px solid rgba(240,112,61,0.34); }

/* === FOOTER === */
.site-footer {
  padding:2.5rem; background:var(--bg-footer);
  border-top:1px solid rgba(255,255,255,0.10);
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; margin-top:4rem;
}
.footer-bottom {
  padding:1.1rem 2.5rem; background:var(--bg-footer);
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; align-items:center;
}
.footer-brand .fb-logo {
  font-family:'Syne',sans-serif; font-weight:700; font-size:0.95rem;
  display:block; margin-bottom:0.65rem;
}

/* === RESPONSIVE === */
@media (max-width:900px) {
  .site-nav { padding:0 1.25rem; }
  .nav-links { display:none !important; }
  .hbtn { display:flex; }
  .pg-hero { padding:4rem 1.5rem 3rem; }
  .pg-section { padding:2.5rem 1.5rem; }
  .g3,.g4 { grid-template-columns:1fr; gap:0.75rem; }
  .g2 { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr; padding:2rem 1.5rem; }
  .footer-bottom { flex-direction:column; gap:0.6rem; text-align:center; padding:1rem 1.5rem; }
}

@media (prefers-reduced-motion:reduce) {
  .cursor, .cursor-ring { display:none !important; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* ── CLASS NAME ALIASES ──────────────────────────────────────────────────
   The HTML pages use these original class names. Aliased here so both
   the old names and the short names work identically. */

.page-hero   { padding:5rem 2.5rem 4rem; max-width:1200px; margin:0 auto; }
.page-intro  { font-size:1.03rem; color:var(--t2); max-width:580px; line-height:1.85; }
.page-title  { font-family:'Syne',sans-serif; font-size:clamp(2.4rem,5.5vw,4.5rem); font-weight:800; line-height:0.94; color:var(--t1); margin-bottom:1.4rem; }
.page-title .accent { color:var(--gold-lt); }

/* .section appears on index.html homepage and some budget/roadmap pages */
.section { padding:4rem 2.5rem; max-width:1200px; margin:0 auto; }

/* Section heading/label/paragraph aliases */
.section-label { font-size:0.65rem; letter-spacing:0.17em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:0.5rem; display:block; }
.section-h     { font-family:'Syne',sans-serif; font-size:clamp(1.7rem,3vw,2.5rem); font-weight:700; line-height:1.1; color:var(--t1); margin-bottom:0.85rem; }
.section-p     { font-size:0.96rem; color:var(--t2); max-width:540px; line-height:1.85; margin-bottom:2.5rem; }

/* Stat block alias */
.stat-block { background:var(--bg-card); border:1px solid var(--bdr); border-radius:var(--r); padding:1.2rem 1.4rem; transition:border-color .2s; }
.stat-block:hover { border-color:var(--bdr-hi); }
.stat-block .sv { font-family:'Syne',sans-serif; font-size:1.9rem; font-weight:700; color:var(--gold-lt); display:block; margin-bottom:0.22rem; }
.stat-block .sl { font-size:0.78rem; color:var(--t2); line-height:1.45; }

/* Card sub-element aliases */
.card-tag   { font-size:0.62rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--t4); margin-bottom:0.55rem; display:block; }
.card-title { font-family:'Syne',sans-serif; font-size:1.03rem; font-weight:600; margin-bottom:0.45rem; line-height:1.28; color:var(--t1); }
.card-val   { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700; color:var(--gold-lt); display:block; margin-bottom:0.38rem; }
.card-body  { font-size:0.85rem; color:var(--t2); line-height:1.75; }

/* Grid aliases */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }

/* Card accent aliases */
.gold-accent::before   { background:var(--gold); }
.teal-accent::before   { background:var(--teal); }
.violet-accent::before { background:var(--violet); }
.coral-accent::before  { background:var(--coral); }
.blue-accent::before   { background:var(--blue); }

/* Pill aliases */
.pill-gold   { background:rgba(212,176,92,0.16); color:#F0DBA5; border:1px solid rgba(212,176,92,0.34); }
.pill-teal   { background:rgba(20,184,166,0.16);  color:#6EE9D8; border:1px solid rgba(20,184,166,0.34); }
.pill-violet { background:rgba(145,102,240,0.16); color:#C2ACF7; border:1px solid rgba(145,102,240,0.34); }
.pill-coral  { background:rgba(240,112,61,0.16);  color:#FAAC8A; border:1px solid rgba(240,112,61,0.34); }

/* Button aliases */
.btn-gold  { background:var(--gold); color:#0C1220; font-weight:700; }
.btn-gold:hover { background:var(--gold-lt); }
.btn-ghost { border:1px solid var(--bdr); color:var(--t2); background:transparent; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold-lt); background:var(--gold-dim); }

@media (max-width:900px) {
  .page-hero { padding:4rem 1.5rem 3rem; }
  .section   { padding:2.5rem 1.5rem; }
  .grid-3, .grid-4 { grid-template-columns:1fr; gap:0.75rem; }
  .grid-2    { grid-template-columns:1fr; }
}