/* ============================================================
   Test Your Strategy — Design System
   Royal blue and metallic gold on white. Typeface: Outfit.
   ============================================================ */

/* Self-hosted Outfit (variable, SIL Open Font License 1.1). One 32 KB file
   covers every weight and keeps the site at zero external requests. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Palette: royal blue and gold on white.
   Gold is a FILL colour only — #d4af37 on white is 2.1:1 and fails every
   contrast threshold, so accent *text* uses --ink-accent instead. */
:root {
  --royal:         #16307a;   /* brand royal blue — logo field, solid buttons */
  --royal-deep:    #0f2557;   /* headings, CTA band */
  --royal-sunk:    #0b1c42;   /* the darkest bands: ticker, footer, code card */
  --gold:          #d9b143;   /* flat fallback where a gradient cannot apply */
  --gold-hi:       #f7e39c;   /* the highlight band of the metal */
  --gold-lit:      #e8c14f;   /* brighter solid, for gold on the dark bands */
  --gold-core:     #d4a92f;   /* the body of the metal */
  --gold-edge:     #c99a22;   /* the shaded lower edge */
  --gold-rim:      #a9821a;   /* the 1px rim that gives it a machined edge */
  --gold-ink:      #7a5f14;   /* gold as text, where it is unavoidable (6.0:1) */

  /* Metal is read from the gradient across a surface, not from a single hue.
     Every stop below was checked against the button label (#0f2557); the
     darkest, #c99a22, still measures 5.7:1, so the sweep is safe everywhere. */
  --gold-sheen: linear-gradient(168deg,
                  #f7e39c  0%,
                  #e8c552 18%,
                  #d4a92f 48%,
                  #e9c757 78%,
                  #c99a22 100%);
  --gold-sheen-hover: linear-gradient(168deg,
                  #fdf0bd  0%,
                  #f2d271 20%,
                  #e0b93f 50%,
                  #f3d472 80%,
                  #d4a92f 100%);
  --champagne:     #faf4e2;   /* pale gold wash for chips and the feature card */
  --ink-accent:    #1a3a8f;   /* links, eyebrows, accent text — 10.3:1 on white */

  --bg:            #ffffff;
  --bg-2:          #f4f6fc;
  --panel:         #ffffff;
  --panel-2:       #eef1f9;
  --sunk:          #0b1c42;
  --line:          #dae0ee;
  --line-soft:     #e8ecf6;

  --text:          #0f2557;   /* 14.8:1 */
  --text-2:        #3e4c72;   /*  8.5:1 */
  --text-3:        #626e8c;   /*  5.1:1 on white, 4.7:1 on the tint */

  --bull:          #d4af37;
  --bull-dim:      #7a5f14;
  --bear:          #c0392b;
  --accent:        #1a3a8f;

  --radius:        14px;
  --radius-sm:     9px;
  --maxw:          1180px;

  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 0 10px 34px -18px rgba(15, 37, 87, .30);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--ink-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1.1em; color: var(--text-2); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-accent);
  margin: 0 0 .9em;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--ink-accent); opacity: .45;
}

.lead { font-size: 1.09rem; max-width: 62ch; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

/* ---------- Ticker tape ---------- */
.tape {
  background: var(--sunk);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  font-family: var(--mono);
  font-size: .76rem;
  white-space: nowrap;
  padding: 7px 0;
}
.tape__track { display: inline-flex; gap: 2.4rem; animation: tape 42s linear infinite; }
.tape span { color: #9aa8ce; }
.tape b { color: var(--gold-lit); font-weight: 600; }
.tape .dn b { color: var(--bear); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--line-soft);
}
.hdr__in { display: flex; align-items: center; gap: 1.4rem; height: 66px; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: none; display: block; border-radius: 5px; overflow: hidden; }
.brand__mark svg { width: 32px; height: 32px; display: block; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav a { color: var(--text-2); font-size: .93rem; font-weight: 500; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; margin-left: auto; font-size: 1rem; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
/* The primary action is a piece of metal: a gradient sweep, a machined rim and
   a lit top edge. Reserved for one button per view — spend it twice and neither
   reads as primary. */
.btn--primary {
  background: var(--gold-sheen);
  color: var(--royal-deep);
  font-weight: 700;
  border-color: var(--gold-rim);
  /* top highlight + bottom shade read as a lit edge; the warm drop shadow
     stops the button floating on the white ground. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65),
              inset 0 -1px 0 rgba(90,66,8,.30),
              0 4px 14px -6px rgba(169,130,26,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover {
  background: var(--gold-sheen-hover);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              inset 0 -1px 0 rgba(90,66,8,.28),
              0 7px 20px -7px rgba(169,130,26,.65);
}
.btn--primary:active {
  box-shadow: inset 0 2px 5px rgba(90,66,8,.35);
  transform: translateY(0);
}
.btn--ghost { border-color: var(--line); color: var(--text); background: #fff; }
.btn--ghost:hover { border-color: var(--royal); color: var(--royal); background: var(--panel-2); }
.btn--wa { background: var(--royal); color: #fff; }
.btn--wa:hover { background: #24459b; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(60px, 7vw, 96px) 0 clamp(56px, 7vw, 92px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; z-index: 0; pointer-events: none; }
.hero__grid, .hero .wrap { position: relative; z-index: 1; }
.hero h1 span { color: var(--ink-accent); }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; }
.pill {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2); background: var(--panel-2);
}
.pill--live { color: var(--ink-accent); border-color: rgba(26,58,143,.28); }
.pill--live::before { content:"●"; margin-right: 6px; animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Code card */
.codecard {
  background: linear-gradient(180deg, #143069, #0f2557);
  border: 1px solid #24459b;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.codecard__bar { display: flex; align-items: center; gap: .45rem; padding: 10px 14px; border-bottom: 1px solid #24459b; background: #0b1c42; }
.codecard__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b4a9e; }
.dot-r { background: #ff5f57 !important; } .dot-y { background: #febc2e !important; } .dot-g { background: #28c840 !important; }
.codecard__file { font-family: var(--sans); font-size: .74rem; color: #9aa8ce; margin-left: .6rem; }
.codecard pre { margin: 0; padding: 18px 18px 22px; font-family: var(--mono); font-size: .79rem; line-height: 1.75; overflow-x: auto; color: #d3dcf0; }
.tok-c { color: #8093c4; font-style: italic; }
.tok-k { color: var(--gold); }
.tok-t { color: #8fb8ff; }
.tok-s { color: var(--gold); }
.tok-f { color: #ffffff; }
.tok-n { color: #ffb86b; }

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.stats div { background: var(--bg); padding: 26px 20px; text-align: center; }
.stats b { display: block; font-family: var(--sans); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--text); font-weight: 700; letter-spacing: -.03em; }
.stats span { font-size: .8rem; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-hi) 0%, var(--gold-core) 22%, var(--gold-edge) 45%, transparent 100%);
  opacity: 0; transition: opacity .22s ease;
}
.card:hover { border-color: rgba(26,58,143,.35); transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover::after { opacity: 1; }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .94rem; margin-bottom: 0; }
.card__ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--champagne); border: 1px solid rgba(122,95,20,.35);
  font-size: 1.15rem; margin-bottom: 16px;
}
.card__list { list-style: none; margin: 14px 0 0; padding: 0; font-size: .88rem; color: var(--text-3); }
.card__list li { padding-left: 18px; position: relative; }
.card__list li::before { content: "▸"; position: absolute; left: 0; color: var(--bull-dim); }

/* ---------- Process ---------- */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px;
  padding: 24px 0; border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__n {
  counter-increment: s; font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  color: var(--ink-accent); opacity: .5;
}
.step__n::before { content: "0" counter(s); }
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; font-size: .95rem; }

/* ---------- Pricing ---------- */
.price { display: flex; flex-direction: column; }
.price__amt { font-family: var(--sans); font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.price__amt small { font-size: .8rem; color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.price--feat { border-color: var(--gold-rim); background: linear-gradient(180deg, #fdf8e8, #ffffff 60%); box-shadow: 0 10px 30px -18px rgba(169,130,26,.5); }
.price__tag {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold-sheen); color: var(--royal-deep); border: 1px solid var(--gold-rim); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); padding: 4px 9px; border-radius: 999px; font-weight: 700;
}
.price ul { list-style: none; padding: 0; margin: 18px 0 24px; font-size: .92rem; color: var(--text-2); }
.price li { padding: 7px 0 7px 24px; position: relative; border-top: 1px dashed var(--line-soft); }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--ink-accent); font-weight: 700; }
.price .btn { margin-top: auto; }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--ink-accent);
  border-radius: var(--radius-sm); padding: 24px;
}
.quote p { font-size: .96rem; color: var(--text); font-style: italic; }
.quote footer { font-family: var(--sans); font-size: .78rem; color: var(--text-3); }
.quote footer b { color: var(--ink-accent); font-style: normal; }

/* ---------- FAQ ---------- */
details.faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); margin-bottom: 12px; overflow: hidden;
}
details.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 620; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--ink-accent); font-family: var(--mono); font-size: 1.3rem; line-height: 1; flex: none; }
details.faq[open] summary::after { content: "–"; }
details.faq[open] { border-color: rgba(26,58,143,.30); }
details.faq p { padding: 0 22px 18px; margin: 0; font-size: .94rem; }

/* ---------- Contact / Form ---------- */
.contact__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 34px; }
.contact__box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.cline { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.cline:first-of-type { border-top: 0; }
.cline i { font-style: normal; font-size: 1.1rem; }
.cline b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 600; }
.cline a { font-family: var(--sans); font-size: .95rem; word-break: break-all; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line); color: var(--text);
  font-family: var(--sans); font-size: .95rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-accent); box-shadow: 0 0 0 3px rgba(26,58,143,.14); }
.form-note { font-size: .8rem; color: var(--text-3); margin: 10px 0 0; }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(120deg, #2c2a72, #0f2557 62%);
  border: 1px solid var(--royal); border-radius: var(--radius);
  padding: clamp(30px, 5vw, 52px); text-align: center;
}
.cta h2 { margin-bottom: .4em; }

/* ---------- Footer ---------- */
.ftr { background: var(--sunk); border-top: 1px solid var(--line-soft); padding: 54px 0 28px; font-size: .9rem; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.ftr h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin-bottom: 1em; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 8px; }
.ftr a { color: var(--text-2); }
.ftr a:hover { color: var(--gold-lit); }
.ftr__base { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.disclaimer { font-size: .78rem; color: var(--text-3); line-height: 1.6; max-width: 70ch; }

/* ---------- Floating WhatsApp ---------- */
.float-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25d366; color: #052b13; font-weight: 700; font-size: .9rem;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.6);
}
.float-wa:hover { text-decoration: none; transform: translateY(-2px); }

/* ---------- Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }

/* ---------- Prose (article pages) ---------- */
.prose { max-width: 78ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { color: var(--text-2); padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; color: var(--text-2); }
.prose th { background: var(--panel-2); color: var(--text); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.crumbs { font-family: var(--sans); font-size: .76rem; color: var(--text-3); margin-bottom: 1.6rem; }
.crumbs a { color: var(--text-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid, .contact__grid { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .nav {
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
  .nav .btn { margin-top: 12px; }
  .nav__toggle { display: block; }
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .float-wa span { display: none; }
  .float-wa { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Blog ---------- */
.post-list { display: grid; gap: 16px; }
.post-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover { border-color: rgba(212,175,55,.45); transform: translateY(-3px); }
.post-card h3 { margin-bottom: .35em; }
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--ink-accent); text-decoration: none; }
.post-card p { font-size: .94rem; margin-bottom: 0; }
.post-meta {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
.post-meta .tag { color: var(--ink-accent); font-weight: 600; }
.post-body { max-width: 74ch; }
.post-body h2 { margin-top: 1.7em; }
.post-body h3 { margin-top: 1.4em; }
.post-body ul, .post-body ol { color: var(--text-2); padding-left: 1.2em; }
.post-body li { margin-bottom: .5em; }
.post-body blockquote {
  margin: 1.6em 0; padding: 16px 22px; border-left: 3px solid var(--ink-accent);
  background: var(--panel-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--gold);
}
.post-body pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: .82rem;
  line-height: 1.7; color: #d3dcf0;
}
.post-body pre code { background: none; padding: 0; color: inherit; }

/* ---------- Mentorship / cohort ---------- */
.seats {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  border: 1px solid rgba(122,95,20,.45); color: var(--gold-ink);
  background: var(--champagne); padding: 7px 12px; border-radius: 999px;
}
.criteria { list-style: none; padding: 0; margin: 18px 0 0; }
.criteria li {
  padding: 12px 0 12px 30px; position: relative;
  border-top: 1px solid var(--line-soft); font-size: .95rem; color: var(--text-2);
}
.criteria li::before {
  content: "✓"; position: absolute; left: 4px; top: 12px;
  color: var(--ink-accent); font-weight: 700;
}
.criteria li.no::before { content: "✕"; color: var(--bear); }


/* ==========================================================================
   Inverted surfaces
   Three bands stay dark on the white page — the ticker, the CTA and the
   footer — because they echo the navy of the logo square and give the page
   structure. Everything inside them needs light text, so it is set once here
   rather than fought rule by rule.
   ========================================================================== */
.cta {
  color: #ffffff;
}
.cta h2 { color: #ffffff; }
.cta p, .cta .lead { color: #c7d0e8; }
.cta .btn--ghost { border-color: rgba(255,255,255,.4); color: #ffffff; background: transparent; }
.cta .btn--ghost:hover { border-color: var(--gold-lit); color: var(--gold-lit); background: rgba(255,255,255,.06); }

.ftr { color: #c7d0e8; }
.ftr p { color: #b9c4e0; }
.ftr .brand { color: #ffffff; }
.ftr h4 { color: #9aa8ce; }
.ftr a { color: #c7d0e8; }
.ftr__base { color: #9aa8ce; border-top-color: #1c3566; }
.ftr .disclaimer { color: #9aa8ce; }

/* Floating WhatsApp button: navy pill, white label, yellow dot. */
.float-wa {
  background: var(--royal); color: #ffffff;
  box-shadow: 0 10px 26px -12px rgba(15,37,87,.55);
}
.float-wa:hover { background: #24459b; }

/* The stat strip reads as one ruled band rather than floating cells. */
.stats { background: var(--line); }
.stats div { background: #ffffff; }

/* Selection and focus use the accent ink, not the yellow. */
::selection { background: var(--gold-lit); color: var(--royal-deep); }
:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }