/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--navy-950);
  background-image:
    radial-gradient(1200px 600px at 85% 20%, rgba(31, 107, 255, .16), transparent 60%),
    radial-gradient(900px 500px at 10% 60%, rgba(255, 45, 74, .08), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(53, 224, 255, .08), transparent 60%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--red); color: #fff; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--gold); color: #000; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }

.ico { width: 20px; height: 20px; flex: none; }
.ico-xs { width: 14px; height: 14px; }

/* ===== Type helpers ===== */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 4rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 40px rgba(31,107,255,.35);
}
.kicker {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: .6rem;
}
.lede { color: var(--text-dim); font-size: clamp(1rem, 1.4vw, 1.14rem); max-width: 62ch; }
.text-red { color: var(--red); text-shadow: 0 0 22px rgba(255,45,74,.55); }
.text-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.text-cyan { color: var(--cyan); text-shadow: 0 0 22px rgba(53,224,255,.6); }
.text-pink { color: var(--pink); text-shadow: 0 0 22px rgba(255,79,134,.6); }

/* ===== Wordmark: glowing blue A.I. + metallic gold MERICA ===== */
.wordmark { font-family: var(--font-display); display: inline-flex; align-items: baseline; letter-spacing: .01em; line-height: .95; white-space: nowrap; }
.wm-ai {
  background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(53,200,255,.75)) drop-shadow(0 3px 0 #06205e);
  font-style: italic; padding-right: .06em;
}
.wm-merica {
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a3a05) drop-shadow(0 0 14px rgba(245,196,81,.35));
}
.wordmark--sm { font-size: 1.35rem; }
.wordmark--xl { font-size: clamp(2.65rem, 7.4vw, 6.9rem); }
.wordmark--inline { font-size: 1em; }

/* ===== Layout ===== */
.section { position: relative; padding: clamp(56px, 7vw, 96px) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .display { margin-bottom: .5rem; }

/* ===== Buttons ===== */
.btn {
  --bc: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.35em; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-cond); font-weight: 600; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none; background: var(--bc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 24px -10px rgba(0,0,0,.6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s;
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn:hover { transform: translateY(-2px); text-decoration: none; filter: brightness(1.08); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn-lg { font-size: 1.14rem; padding: .95em 1.6em; }
.btn-sm { font-size: .88rem; padding: .55em 1em; }
.btn-red { background: var(--grad-red); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(255,90,110,.5), var(--glow-red); }
.btn-gold { background: var(--grad-gold); color: #2a1a00; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(255,220,130,.6), var(--glow-gold); }
.btn-cyan { background: linear-gradient(180deg, #5cecff, #13a8d9 60%, #0a7fb0); color: #00202c; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--glow-cyan); }
.btn-pink { background: linear-gradient(180deg, #ff7aa5, #ea2f6d 60%, #b3144d); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 24px rgba(255,79,134,.45); }
.btn-glass { background: rgba(20, 40, 110, .45); border-color: var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 20px rgba(31,107,255,.3); }
.btn-official { background: #ffffff; color: #0b1f5c; border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 10px 30px -8px rgba(255,255,255,.4); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10, 20, 60, .6); color: var(--text); transition: background .2s, border-color .2s; }
.icon-btn:hover { background: rgba(31, 107, 255, .35); border-color: var(--line-strong); }

.chip {
  display: inline-flex; align-items: center; gap: .4em; padding: .45em .95em; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10, 22, 64, .6); color: var(--text-dim);
  font-family: var(--font-cond); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .84rem;
  transition: all .2s var(--ease);
}
.chip:hover { color: #fff; border-color: var(--line-strong); }
.chip.is-active, .chip[aria-pressed="true"] { background: rgba(31,107,255,.35); color: #fff; border-color: var(--cyan); box-shadow: 0 0 16px rgba(53,224,255,.3); }

.pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255,45,74,.7); animation: pulse 1.8s infinite; vertical-align: middle; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,74,.7); } 70% { box-shadow: 0 0 0 10px rgba(255,45,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,74,0); } }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); z-index: 900; padding: 12px 18px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: var(--shadow-deep), var(--glow-cyan); font-weight: 600; transition: transform .35s var(--ease), opacity .35s; max-width: calc(100vw - 32px); opacity: 0; visibility: hidden; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.noscript { padding: 16px; text-align: center; background: var(--gold); color: #000; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}