:root{
  --bg:#0a0a0a;
  --fg:#f5f4ef;
  --fg-dim:#8a8a86;
  --accent:#ff3b30;
  --line:#232323;
  --font-display:'Bebas Neue', sans-serif;
  --font-body:'Inter', sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  overflow-x:hidden;
}

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

/* ---------- ENTER SCREEN ---------- */
#enter-screen{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  z-index:100;
  transition:opacity 0.9s ease, visibility 0.9s ease;
}

#enter-screen.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.enter-glow{
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(255,59,48,0.18) 0%, rgba(255,59,48,0) 70%);
  filter:blur(10px);
  animation:pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{transform:scale(1);opacity:0.7;}
  50%{transform:scale(1.15);opacity:1;}
}

.enter-eyebrow{
  font-size:13px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--fg-dim);
  z-index:1;
}

#enter-btn{
  z-index:1;
  background:transparent;
  border:1.5px solid var(--fg);
  color:var(--fg);
  font-family:var(--font-display);
  font-size:clamp(38px, 8vw, 64px);
  letter-spacing:0.12em;
  padding:22px 56px;
  border-radius:100px;
  cursor:pointer;
  transition:all 0.35s ease;
}

#enter-btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0a;
  transform:scale(1.04);
}

#enter-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.enter-sub{
  z-index:1;
  font-size:12px;
  color:var(--fg-dim);
  letter-spacing:0.08em;
}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 48px;
}

.logo{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:0.08em;
}

.logo.small{font-size:18px;}

.nav-links{display:flex;gap:32px;}

.nav-links a{
  font-size:14px;
  color:var(--fg-dim);
  transition:color 0.25s ease;
}

.nav-links a:hover{color:var(--fg);}

.touch-btn{
  border:1px solid var(--line);
  padding:9px 20px;
  border-radius:100px;
  font-size:13px;
  transition:all 0.25s ease;
}

.touch-btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0a0a;
}

/* ---------- HERO ---------- */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:20px 48px 60px;
}

.hero h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(42px, 8vw, 108px);
  line-height:1.05;
  letter-spacing:0.01em;
  max-width:1100px;
}

.hero .accent{color:var(--accent);}

/* ---------- QUOTE STRIP ---------- */
.quote-strip{
  min-height:22vh;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:40px 24px;
}

.quote-box{
  text-align:center;
  max-width:700px;
}

.quote-line{
  font-family:var(--font-display);
  font-size:clamp(22px, 4vw, 36px);
  letter-spacing:0.02em;
  color:var(--fg);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}

.quote-line.show{
  opacity:1;
  transform:translateY(0);
}

/* ---------- ABOUT ---------- */
.about{
  padding:100px 48px;
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

.tag{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:24px;
}

.about-text{
  font-size:clamp(18px, 2.6vw, 24px);
  line-height:1.6;
  color:var(--fg);
  font-weight:400;
}

/* ---------- MARQUEE ---------- */
.marquee-band{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
}

.marquee-track{
  display:inline-flex;
  gap:40px;
  animation:scrollLeft 16s linear infinite;
}

.marquee-track span{
  font-family:var(--font-display);
  font-size:clamp(20px, 3vw, 30px);
  letter-spacing:0.04em;
  color:var(--fg-dim);
}

@keyframes scrollLeft{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------- CONNECT ---------- */
.connect{
  padding:100px 48px 60px;
  text-align:center;
}

.connect h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px, 5vw, 48px);
  margin-bottom:36px;
}

.connect-list{
  list-style:none;
  display:flex;
  gap:36px;
  justify-content:center;
  flex-wrap:wrap;
}

.connect-list a{
  font-size:18px;
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
  transition:border-color 0.25s ease, color 0.25s ease;
}

.connect-list a:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ---------- FOOTER ---------- */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 48px 48px;
  border-top:1px solid var(--line);
}

.mute-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--fg-dim);
  font-size:13px;
  padding:8px 16px;
  border-radius:100px;
  cursor:pointer;
  transition:all 0.25s ease;
}

.mute-btn:hover{
  border-color:var(--accent);
  color:var(--fg);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .enter-glow, .marquee-track{animation:none;}
  #enter-screen, .quote-line{transition:none;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  .topbar{padding:20px 22px;}
  .nav-links{display:none;}
  .hero{padding:10px 22px 40px;}
  .about, .connect{padding-left:22px;padding-right:22px;}
  .footer{padding:24px 22px 36px;}
}