@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --night:#0A0E24;
  --night-2:#12163a;
  --brick:#241B3A;
  --brick-2:#2E2140;
  --stone:#8B8698;
  --ember:#FF7A1A;
  --ember-2:#FFA94D;
  --gold:#FFC247;
  --cream:#F3EDE0;
  --cream-dim:#C9C2D8;
  --line: rgba(243,237,224,0.14);
  --radius: 10px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--night);
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3, .display{
  font-family:'Bungee', system-ui, sans-serif;
  font-weight:400;
  letter-spacing:0.5px;
  line-height:1.15;
}

a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ember-2);
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(20px,5vw,48px);
  background:linear-gradient(to bottom, rgba(10,14,36,0.92), rgba(10,14,36,0));
  backdrop-filter: blur(2px);
}
.nav .brand{
  font-family:'Bungee', sans-serif;
  font-size:1.1rem;
  color:var(--cream);
}
.nav .brand span{color:var(--ember);}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{
  font-size:0.85rem;
  font-weight:600;
  color:var(--cream-dim);
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--gold);}
.nav-cta{
  background:var(--ember);
  color:#1a0f00;
  font-weight:700;
  font-size:0.82rem;
  padding:10px 18px;
  border-radius:6px;
  transition:transform 0.15s, background 0.15s;
}
.nav-cta:hover{background:var(--gold); transform:translateY(-1px);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  background-image:
    linear-gradient(to bottom, rgba(6,8,22,0.15) 0%, rgba(6,8,22,0.35) 55%, var(--night) 96%),
    url('bgr.png');
  background-size:cover;
  background-position:center 30%;
}
.hero-inner{
  width:100%;
  padding:0 clamp(20px,5vw,48px) 72px;
  max-width:1120px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero-tagline{
  max-width:560px;
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--cream-dim);
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.btn-primary{
  background:var(--ember);
  color:#1a0f00;
  font-weight:700;
  font-size:0.95rem;
  padding:14px 26px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  transition:transform 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow:0 8px 24px rgba(255,122,26,0.25);
}
.btn-primary:hover{background:var(--gold); transform:translateY(-2px);}
.btn-ghost{
  border:1.5px solid var(--line);
  color:var(--cream);
  font-weight:600;
  font-size:0.9rem;
  padding:13px 22px;
  border-radius:6px;
  transition:border-color 0.15s, background 0.15s;
}
.btn-ghost:hover{border-color:var(--gold); background:rgba(255,194,71,0.08);}
.platform-note{
  font-size:0.78rem;
  color:var(--cream-dim);
  letter-spacing:0.03em;
}

/* jagged broken-wall divider */
.jagged{
  position:relative;
  height:46px;
  width:100%;
  background:var(--night-2);
  clip-path: polygon(
    0% 100%, 0% 30%, 3% 42%, 7% 18%, 11% 46%, 15% 12%, 19% 50%, 23% 24%,
    27% 44%, 31% 8%, 35% 40%, 39% 20%, 43% 48%, 47% 16%, 51% 38%, 55% 6%,
    59% 44%, 63% 22%, 67% 50%, 71% 14%, 75% 40%, 79% 26%, 83% 46%, 87% 10%,
    91% 42%, 95% 20%, 100% 36%, 100% 100%
  );
}

/* ---------- SECTIONS ---------- */
section{position:relative;}
.section{
  background:var(--night-2);
  padding:88px 0 96px;
}
.section-alt{
  background:var(--brick);
}
.section-head{
  max-width:620px;
  margin-bottom:52px;
}
.section-head h2{
  font-size:clamp(1.6rem,3.4vw,2.3rem);
  margin-top:10px;
  color:var(--cream);
}
.section-head p{
  margin-top:14px;
  color:var(--cream-dim);
  font-size:1rem;
}

/* feature cards */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.feature-card{
  background:rgba(243,237,224,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform 0.2s, border-color 0.2s;
}
.feature-card:hover{transform:translateY(-4px); border-color:rgba(255,194,71,0.4);}
.feature-num{
  font-family:'Bungee', sans-serif;
  font-size:0.75rem;
  color:var(--ember);
  margin-bottom:14px;
  display:block;
}
.feature-card h3{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:1.05rem;
  color:var(--cream);
  margin-bottom:10px;
}
.feature-card p{
  color:var(--cream-dim);
  font-size:0.9rem;
}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg, var(--brick-2), var(--night));
  padding:64px 0;
  text-align:center;
}
.cta-band h2{
  font-size:clamp(1.5rem,3.6vw,2.1rem);
  margin-bottom:16px;
}
.cta-band p{
  color:var(--cream-dim);
  max-width:480px;
  margin:0 auto 30px;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--night);
  border-top:1px solid var(--line);
  padding:56px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-brand{
  font-family:'Bungee', sans-serif;
  font-size:1.05rem;
  margin-bottom:14px;
}
.footer-brand span{color:var(--ember);}
.footer-col h4{
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:0.88rem;
  color:var(--cream-dim);
  margin-bottom:10px;
}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.78rem;
  color:var(--stone);
}

/* ---------- PRIVACY PAGE ---------- */
.legal-hero{
  padding:150px 0 40px;
  background:linear-gradient(180deg, var(--brick), var(--night-2));
}
.legal-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);}
.legal-hero .eyebrow{margin-bottom:14px; display:block;}
.legal-updated{color:var(--cream-dim); font-size:0.85rem; margin-top:14px;}
.legal-body{
  background:var(--night-2);
  padding:56px 0 96px;
}
.legal-body h2{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:1.15rem;
  color:var(--gold);
  margin:36px 0 12px;
}
.legal-body h2:first-child{margin-top:0;}
.legal-body p, .legal-body li{
  color:var(--cream-dim);
  font-size:0.95rem;
  margin-bottom:12px;
}
.legal-body ul{padding-left:20px; margin-bottom:16px;}
.legal-body a{color:var(--gold); text-decoration:underline;}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--cream-dim);
  margin-bottom:28px;
}
.back-link:hover{color:var(--gold);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .feature-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .nav-links{display:none;}
  .hero{background-position:center 20%;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}