/* ===========================================================================
   MajesticBonus — shared stylesheet
   Dark, gold-accented theme. Page layout lives inline in each page (as exported
   from the design). This file holds the self-hosted fonts, the design tokens,
   the base reset, the layout/grid + keyframe + responsive rules carried over
   from the export, the scroll-reveal states, the sticky header / mobile menu,
   and the hover helpers that replace the design's inline `style-hover` /
   `style-focus` attributes (plain HTML can't express :hover / :focus inline).
   =========================================================================== */

/* --------------------------------------------------------- self-hosted fonts */
@font-face{ font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/sora-600.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/sora-700.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/sora-800.woff2') format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/manrope-400.woff2') format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/manrope-500.woff2') format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/manrope-600.woff2') format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/manrope-700.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/jetbrains-mono-600.woff2') format('woff2'); }

/* ----------------------------------------------------------------- tokens */
:root{
  --bg:#0a0a0c;--bg-1:#0d0d10;--bg-2:#141419;--surface:#131318;--surface-2:#1a1a20;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.055);
  --gold:#d4af37;--gold-1:#e8c874;--gold-2:#b8942e;--gold-soft:rgba(212,175,55,.13);--gold-line:rgba(212,175,55,.30);
  --ink:#f4f3ef;--muted:#a7a69f;--faint:#6d6c67;--danger:#e5776f;--ok:oklch(.76 .11 158);
  --r:16px;--maxw:1160px;
  --font-d:'Sora',system-ui,sans-serif;--font-b:'Manrope',system-ui,sans-serif;--font-m:'JetBrains Mono',ui-monospace,monospace;
}

/* ------------------------------------------------------------- base reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-b); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
input,textarea{ font-family:inherit; color:inherit; }
input::placeholder,textarea::placeholder{ color:var(--faint); }
canvas{ display:block; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(212,175,55,.28); color:#fff; }
[hidden]{ display:none !important; }   /* beat inline display:flex on toggled blocks */

/* keyboard focus ring — visible without disturbing mouse users */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;
}

/* section anchor targets clear the sticky header */
section[id]{ scroll-margin-top:88px; }

/* ------------------------------------------------------- scroll-in reveal
   Elements carry [data-anim]; app.js sets data-rv="show" when they enter the
   viewport. Only hidden when JS is on, so no-JS users see everything in place. */
html.js [data-anim]{ transform:translateY(24px); transition:transform .7s cubic-bezier(.16,.84,.44,1); will-change:transform; }
html.js [data-anim][data-rv="show"]{ transform:none; }

/* ------------------------------------------------ layout helpers (from export) */
[data-grid]{ display:grid; gap:18px; }
[data-grid="2"]{ grid-template-columns:repeat(2,1fr); }
[data-grid="3"]{ grid-template-columns:repeat(3,1fr); }
[data-grid="4"]{ grid-template-columns:repeat(4,1fr); }
[data-desktop]{ display:flex; }
[data-mobile]{ display:none; }

@keyframes heroFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes glowPulse{ 0%,100%{ opacity:.5; transform:translateX(-50%) scale(1); } 50%{ opacity:.8; transform:translateX(-50%) scale(1.06); } }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media(max-width:900px){ [data-grid="3"],[data-grid="4"]{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:660px){ [data-grid]{ grid-template-columns:1fr !important; } }
@media(max-width:760px){ [data-stack]{ grid-template-columns:1fr !important; } }
@media(max-width:860px){
  [data-desktop]{ display:none !important; }
  [data-mobile]{ display:inline-flex !important; }
  [data-sec]{ padding-top:76px !important; padding-bottom:76px !important; }
  [data-hero]{ padding-top:118px !important; }
}
@media(max-width:820px){ [data-grid-footer]{ grid-template-columns:1fr 1fr !important; gap:32px !important; } }
@media(max-width:520px){ [data-grid-footer]{ grid-template-columns:1fr !important; } }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js [data-anim]{ transform:none !important; transition:none !important; }
  *{ animation:none !important; }
}

/* ===================================================== sticky site header
   Rebuilt as a class-based component (the export used runtime conditionals for
   the scroll shadow + mobile menu). app.js toggles .is-scrolled and .is-open. */
.site-header{ position:sticky; top:0; z-index:60; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(10,10,12,.7); }
.header-shadow{ position:absolute; inset:0; border-bottom:1px solid var(--line); background:rgba(10,10,12,.86); pointer-events:none; opacity:0; transition:opacity .25s ease; }
.site-header.is-scrolled .header-shadow{ opacity:1; }
.header-inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-name{ font-family:var(--font-d); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.nav-desktop{ align-items:center; gap:2px; }
.nav-link{ position:relative; padding:9px 15px; font-size:14px; font-weight:600; color:var(--muted); border-radius:9px; transition:color .18s, background .18s; }
.nav-link:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav-link[aria-current="page"]{ color:var(--ink); }
.nav-link[aria-current="page"]::after{ content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2px; background:var(--gold); border-radius:2px; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.menu-btn{ width:42px; height:42px; align-items:center; justify-content:center; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; color:var(--ink); cursor:pointer; }
.mobile-menu{ position:relative; z-index:1; flex-direction:column; border-top:1px solid var(--line); background:rgba(10,10,12,.97); padding:10px 16px 18px; gap:2px; }
.mobile-menu:not([hidden]){ display:flex; }
.mobile-link{ padding:13px 12px; font-weight:600; font-size:15px; color:var(--muted); border-radius:10px; transition:color .18s, background .18s; }
.mobile-link:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
@media(min-width:861px){ .mobile-menu{ display:none !important; } }

/* ===================================================== hover / focus helpers
   Each replaces a `style-hover`/`style-focus` from the export. Where the
   hovered property is also set inline (inline wins the cascade) the rule uses
   !important. A short transition smooths every state change. */

/* gold pill buttons — lift + brighten (base gold styling stays inline) */
.btn-gold{ transition:transform .18s ease, filter .2s ease; }
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* text link tint to gold (footer links, "see how it works", FAQ questions) */
.hover-gold{ transition:color .18s ease; }
.hover-gold:hover{ color:var(--gold) !important; }

/* outline pill that fills with soft gold on hover (footer "Join the newsletter") */
.pill-gold{ transition:background .2s ease; }
.pill-gold:hover{ background:var(--gold-soft); }

/* arrow link whose gap grows on hover ("Learn more…") */
.link-arrow{ transition:gap .2s ease; }
.link-arrow:hover{ gap:12px !important; }

/* feature card — lift, gold border, lighter surface (base border/bg inline) */
.card-lift{ transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.card-lift:hover{ transform:translateY(-5px); border-color:var(--gold-line) !important; background:var(--surface-2) !important; }

/* lighter card lift — lift + gold border only (receive / resource cards) */
.card-hover{ transition:transform .25s ease, border-color .25s ease; }
.card-hover:hover{ transform:translateY(-4px); border-color:var(--gold-line) !important; }

/* email / text inputs — gold border on focus (base border inline) */
.field{ transition:border-color .2s ease, background .2s ease; }
.field:focus{ border-color:var(--gold-line) !important; }
.field-glow:focus{ background:rgba(255,255,255,.05) !important; }

/* ============================================================ FAQ accordion
   Single-open accordion. app.js toggles .is-open; CSS swaps the +/- icon and
   reveals the answer panel. */
.faq-item .faq-minus{ display:none; }
.faq-item.is-open .faq-minus{ display:block; }
.faq-item.is-open .faq-plus{ display:none; }
.faq-panel{ display:none; }
.faq-item.is-open .faq-panel{ display:block; animation:faqIn .3s ease both; }
.faq-btn{ transition:color .18s ease; }
.faq-btn:hover{ color:var(--gold); }