/* =============================================
   VALUEBULL — Global Shared Styles
   Variables, reset, nav, layout, sections, footer
   ============================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#FED700;
  --gold-light:rgba(254,215,0,.10);
  --gold-mid:rgba(254,215,0,.25);
  --gold-strong:rgba(254,215,0,.45);
  --nav-bg:#1a1a1b;
  --bg:#ffffff;
  --bg-sub:#f8f9fa;
  --bg-warm:#fafaf7;
  --ink:#0f1729;
  --ink-2:#374151;
  --ink-3:#6b7280;
  --ink-4:#9ca3af;
  --border:#e5e7eb;
  --border-light:#f3f4f6;
  --red:#dc2626;
  --red-light:#fef2f2;
  --red-border:#fecaca;
  --green:#16a34a;
  --green-light:#f0fdf4;
  --green-border:#bbf7d0;
  --amber:#d97706;
  --amber-light:#fffbeb;
  --amber-border:#fde68a;
  --font-display:'Bebas Neue',sans-serif;
  --font:'Poppins',sans-serif;
  --body:'DM Sans',sans-serif;
  --r:12px;
  --r-sm:8px;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;font-size:17px}
body{font-family:var(--body);background:var(--bg);color:var(--ink-2);line-height:1.7;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--ink)}

/* === NAV (sticky default, landing overrides to fixed) === */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);height:56px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{max-width:840px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{height:22px}
.nav-actions{display:flex;gap:8px;align-items:center}
.nav-btn{font-family:var(--font);font-size:12px;font-weight:600;padding:8px 20px;border-radius:6px;border:none;cursor:pointer;transition:all .2s;letter-spacing:.2px;text-decoration:none}
.nav-btn-ghost{background:none;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.12)}
.nav-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.nav-btn-gold{background:var(--gold);color:var(--ink);font-weight:700}
.nav-btn-gold:hover{box-shadow:0 0 20px rgba(254,215,0,.3);transform:translateY(-1px)}

/* === LAYOUT === */
.wrap{max-width:840px;margin:0 auto;padding:0 24px}
.section{padding:72px 0;border-bottom:1px solid var(--border-light)}
.section:last-of-type{border-bottom:none}
.section-label{font-family:var(--font);font-size:11px;font-weight:700;color:var(--ink-2);background:var(--bg-sub);border:1px solid var(--border);display:inline-block;padding:5px 14px;border-radius:4px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px}
.section-title{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);color:var(--ink);line-height:1;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.section-title em{font-style:normal;color:var(--gold)}
.section-title .red{color:var(--red)}
.section-desc{font-size:1rem;color:var(--ink-3);line-height:1.8;max-width:680px}
.section-desc strong{color:var(--ink);font-weight:600}

/* === SHARED BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:6px;padding:14px 30px;background:var(--gold);color:var(--ink);border:none;border-radius:var(--r-sm);font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:all .25s;text-decoration:none;letter-spacing:.2px}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(254,215,0,.2)}
.btn-sm{padding:12px 24px;font-size:.85rem}
.cta-btn{display:inline-block;font-family:var(--font);font-size:.9rem;font-weight:700;padding:14px 32px;border-radius:6px;transition:all .2s;cursor:pointer;border:none;text-decoration:none}
.cta-btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--border)}
.cta-btn.ghost:hover{border-color:var(--ink)}
.cta-btn.gold{background:var(--gold);color:var(--ink)}
.cta-btn.gold:hover{box-shadow:0 4px 16px rgba(254,215,0,.3);transform:translateY(-1px)}

/* === REVEAL ANIMATION === */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.vis{opacity:1;transform:none}

/* === FOOTER === */
.footer{text-align:center;padding:32px 24px 48px;font-size:.7rem;color:var(--ink-4)}
.footer a{color:var(--ink-3);text-decoration:none}

/* === RESPONSIVE === */
@media(max-width:768px){
  .section-title{font-size:clamp(26px,4vw,36px)}
}