/* ═══════════════════════════════════════════════════════════════════
   TRIAD TRIPLE THREAT — World-Class Design System v2
   Dark Navy · Gold · White · Bebas Neue
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:        #060D18;
  --bg-2:      #0A1525;
  --bg-3:      #0E1F38;
  --bg-card:   rgba(255,255,255,0.035);
  --bg-card-h: rgba(255,255,255,0.065);

  --gold:      #C9A84C;
  --gold-lt:   #E8D080;
  --gold-dk:   #A07830;
  --gold-glow: rgba(201,168,76,0.18);
  --gold-ring: rgba(201,168,76,0.5);

  --white:     #FFFFFF;
  --w80:       rgba(255,255,255,0.80);
  --w60:       rgba(255,255,255,0.60);
  --w40:       rgba(255,255,255,0.40);
  --w20:       rgba(255,255,255,0.20);
  --w10:       rgba(255,255,255,0.10);
  --w06:       rgba(255,255,255,0.06);
  --w03:       rgba(255,255,255,0.03);

  --maroon:    #A8353A;
  --maroon-dk: #7A1A1E;

  --border:    rgba(255,255,255,0.09);
  --border-g:  rgba(201,168,76,0.28);

  --f-disp:    'Bebas Neue', sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;

  --r:         10px;
  --r-lg:      18px;
  --r-xl:      28px;

  --shadow:    0 8px 40px rgba(0,0,0,0.5);
  --shadow-g:  0 0 0 1px var(--gold-ring), 0 24px 80px rgba(0,0,0,0.55), 0 0 100px var(--gold-glow);

  --ease:      cubic-bezier(.25,.46,.45,.94);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ── Dot Grid Background ───────────────────────────────────── */
.dot-bg {
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 36px 36px;
}
.dot-bg-sm {
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Rank Badge SVG ────────────────────────────────────────── */
.rank-badge { display:block; }
.rank-badge--watermark {
  position:absolute;
  opacity:0.04;
  pointer-events:none;
}
.rank-badge--hero {
  position:absolute;
  opacity:0.07;
  pointer-events:none;
  right:-5%;
  top:50%;
  transform:translateY(-50%);
  width:min(600px, 65vw);
}

/* ── Navigation ────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6%; height:72px;
  transition:background 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(6,13,24,0.92);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom-color:rgba(201,168,76,0.15);
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
}
.nav-wordmark {
  font-family:var(--f-disp);
  font-size:1.9rem; letter-spacing:4px;
  color:var(--white); line-height:1;
}
.nav-pipe { width:1px; height:20px; background:var(--w20); }
.nav-sub {
  font-size:0.62rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
}
.nav-links {
  display:flex; align-items:center; gap:4px; list-style:none;
}
.nav-links a {
  font-size:0.8rem; font-weight:500; letter-spacing:0.5px;
  color:var(--w60); padding:8px 14px; border-radius:6px;
  transition:color var(--ease), background var(--ease);
}
.nav-links a:hover { color:var(--white); background:var(--w06); }
.nav-links a.active { color:var(--gold); }
.nav-links .nav-btn {
  background:var(--gold); color:var(--bg);
  font-weight:700; border-radius:8px;
  padding:9px 20px;
  transition:background var(--ease), transform var(--ease);
}
.nav-links .nav-btn:hover {
  background:var(--gold-lt); transform:translateY(-1px);
  color:var(--bg);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700;
  font-size:0.9rem; letter-spacing:0.5px;
  padding:15px 32px; border-radius:var(--r);
  border:none; cursor:pointer;
  transition:all 0.2s var(--ease);
  white-space:nowrap;
}
.btn-gold {
  background:var(--gold); color:var(--bg);
}
.btn-gold:hover {
  background:var(--gold-lt);
  transform:translateY(-2px);
  box-shadow:0 8px 32px var(--gold-glow);
}
.btn-ghost {
  background:transparent;
  color:var(--w80);
  border:1.5px solid var(--w20);
}
.btn-ghost:hover {
  border-color:var(--white);
  color:var(--white);
  background:var(--w06);
}
.btn-outline-gold {
  background:transparent;
  color:var(--gold);
  border:1.5px solid var(--border-g);
}
.btn-outline-gold:hover {
  background:rgba(201,168,76,0.08);
  border-color:var(--gold);
}
.btn-sm { padding:10px 22px; font-size:0.82rem; }
.btn-lg { padding:18px 40px; font-size:0.95rem; }
.btn-full { width:100%; justify-content:center; }

/* ── Glass Card ─────────────────────────────────────────────── */
.glass {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(16px);
  transition:background 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.glass:hover {
  background:var(--bg-card-h);
  border-color:rgba(255,255,255,0.14);
}
.glass.glow:hover {
  box-shadow:var(--shadow-g);
  border-color:var(--border-g);
  transform:translateY(-4px);
}

/* ── Section ─────────────────────────────────────────────────── */
.section { padding:100px 6%; }
.section-sm { padding:64px 6%; }
.wrap { max-width:1240px; margin:0 auto; }
.wrap-sm { max-width:900px; margin:0 auto; }
.wrap-xs { max-width:680px; margin:0 auto; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.68rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
.eyebrow-line {
  width:28px; height:1.5px; background:var(--gold);
}

.display {
  font-family:var(--f-disp);
  font-size:clamp(3rem,6vw,5.5rem);
  line-height:0.95;
  letter-spacing:1px;
  color:var(--white);
}
.display em { color:var(--gold); font-style:normal; }
.display-lg {
  font-family:var(--f-disp);
  font-size:clamp(3.5rem,7.5vw,7rem);
  line-height:0.9;
  letter-spacing:2px;
}
.display-xl {
  font-family:var(--f-disp);
  font-size:clamp(4rem,10vw,9rem);
  line-height:0.88;
  letter-spacing:3px;
}
.lead {
  font-size:1.1rem; color:var(--w60); line-height:1.75;
  max-width:560px;
}
.lead-lg { font-size:1.2rem; }
.section-divider {
  height:1px;
  background:linear-gradient(to right, transparent, var(--border-g), transparent);
  margin:0 6%;
}

/* ── Gold Text Gradient ─────────────────────────────────────── */
.gold-text {
  background:linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 50%, var(--gold-dk) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Check / Bullet items ─────────────────────────────────────── */
.check-list { list-style:none; }
.check-list li {
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
  font-size:0.9rem; color:var(--w80); line-height:1.55;
}
.check-list li:last-child { border-bottom:none; }
.check-list li::before {
  content:'✦'; color:var(--gold); font-size:0.7rem;
  margin-top:4px; flex-shrink:0;
}

/* ── Reveal animations ──────────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── Page Hero Header ───────────────────────────────────────── */
.page-hero {
  padding:140px 6% 100px;
  background:var(--bg);
  position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.06) 0%, transparent 60%),
                    radial-gradient(ellipse at 20% 80%, rgba(168,53,58,0.08) 0%, transparent 50%),
                    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:auto, auto, 30px 30px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  background:var(--bg-2);
  border-top:1px solid var(--border-g);
  padding:72px 6% 40px;
}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:56px;
}
@media(max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:480px){ .footer-top{ grid-template-columns:1fr; } }
.footer-logo {
  font-family:var(--f-disp); font-size:2.2rem;
  letter-spacing:4px; color:var(--white);
  margin-bottom:6px;
}
.footer-tagline {
  font-size:0.68rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:20px;
}
.footer-desc { font-size:0.85rem; color:var(--w40); line-height:1.75; }
.footer-email { font-size:0.8rem; color:var(--w40); margin-top:14px; }
.footer-col h5 {
  font-size:0.65rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
.footer-col a {
  display:block; font-size:0.85rem; color:var(--w40);
  margin-bottom:11px; transition:color var(--ease);
}
.footer-col a:hover { color:var(--white); }
.footer-bottom {
  border-top:1px solid var(--border);
  padding-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.75rem; color:var(--w20);
  flex-wrap:wrap; gap:12px;
}

/* ── Form elements (dark) ───────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:7px; }
.field label {
  font-size:0.68rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--w40);
}
.field input, .field select, .field textarea {
  background:var(--w06);
  border:1.5px solid var(--border);
  border-radius:var(--r); padding:13px 16px;
  font-family:var(--f-body); font-size:0.9rem; color:var(--white);
  outline:none; transition:border var(--ease), background var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color:var(--w20); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--gold); background:rgba(201,168,76,0.04);
}
.field select option { background:#0C1A2E; color:var(--white); }

/* ── Misc utilities ─────────────────────────────────────────── */
.tc { text-align:center; }
.mt2 { margin-top:8px; }
.mt4 { margin-top:16px; }
.mt6 { margin-top:24px; }
.mt8 { margin-top:32px; }
.mb2 { margin-bottom:8px; }
.mb4 { margin-bottom:16px; }
.mb6 { margin-bottom:24px; }
.mb8 { margin-bottom:32px; }
.flex { display:flex; align-items:center; }
.gap2 { gap:8px; }
.gap3 { gap:12px; }
.gap4 { gap:16px; }
.gap6 { gap:24px; }
.gap8 { gap:32px; }
.tag {
  display:inline-block;
  font-size:0.65rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; padding:4px 12px; border-radius:20px;
  background:rgba(201,168,76,0.12); color:var(--gold);
  border:1px solid rgba(201,168,76,0.2);
}
.tag-maroon {
  background:rgba(168,53,58,0.12); color:#e87a80;
  border:1px solid rgba(168,53,58,0.2);
}

/* ── Hamburger button (hidden on desktop) ───────────────────── */
.nav-ham {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:7px;
  cursor:pointer;
  padding:8px 10px;
  margin-left:auto;
}
.nav-ham span {
  display:block;
  width:20px;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform 0.25s ease, opacity 0.2s ease;
}
/* Animated X when open */
.nav-open .nav-ham span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-ham span:nth-child(2){ opacity:0; }
.nav-open .nav-ham span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:900px){
  .section { padding:72px 5%; }
  .page-hero { padding:120px 5% 72px; }
}
@media(max-width:640px){
  .section { padding:56px 5%; }

  /* Show hamburger, hide normal links */
  .nav-ham { display:flex; }
  .nav { position:relative; flex-wrap:wrap; }

  /* Mobile menu — hidden by default, shown when .nav-open */
  .nav-links {
    display:none;
    flex-direction:column;
    width:100%;
    background:#0A1020;
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding:8px 0 16px;
    gap:0;
    box-shadow:0 16px 40px rgba(0,0,0,0.45);
    order:3;
  }
  .nav-open .nav-links { display:flex; }

  .nav-links li { width:100%; }
  .nav-links a {
    display:block;
    padding:13px 24px;
    font-size:0.95rem;
    border-radius:0;
    color:var(--w80);
  }
  .nav-links a:hover { background:rgba(255,255,255,0.05); }
  .nav-links a.active { color:var(--gold); }
  .nav-links .nav-btn {
    margin:10px 16px 0;
    text-align:center;
    border-radius:8px;
    display:block;
    padding:12px 20px;
  }
}