/* =========================================================
   FRONTBUMZ — design tokens (brand colors preserved from
   the original site: near-black bg, burnt-orange accent)
   ========================================================= */
:root{
  --color-bg: #050505;
  --color-bg-alt: #0a0a0a;
  --color-surface: rgba(15,15,15,0.7);
  --color-surface-solid: #0f0f0f;
  --color-border: rgba(255,255,255,0.08);
  --color-text: #ffffff;
  --color-text-muted: #8a8a8a;
  --color-text-faint: #565656;

  --color-accent: #ff7b00;
  --color-accent-dim: rgba(255,123,0,0.5);
  --color-accent-glow: rgba(255,123,0,0.16);
  --color-success: #3ddc84;
  --color-success-dim: rgba(61,220,132,0.12);

  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  --text-hero: clamp(3rem, 1.4rem + 7vw, 7.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 0.4rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-full: 999px;
  --shadow-glow: 0 0 60px var(--color-accent-glow);
  --transition: 220ms cubic-bezier(0.16,1,0.3,1);
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:none; text-size-adjust:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth; scroll-padding-top: 88px;
}
body{
  min-height:100dvh; line-height:1.6;
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--color-text); background:var(--color-bg);
  overflow-x:hidden;
}
img,picture,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; line-height:1.1; font-weight:700; }
p{ text-wrap:pretty; }
::selection{ background:var(--color-accent-glow); color:var(--color-text); }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:var(--radius-sm); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-accent); color:#000;
  padding:var(--space-2) var(--space-4); z-index:200; font-weight:600;
}
.skip-link:focus{ left:var(--space-4); top:var(--space-4); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.section{ padding-block: clamp(var(--space-16), 10vw, var(--space-32)); position:relative; }
.section-inner{ max-width:1180px; margin-inline:auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-10)); }

.eyebrow{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:600; letter-spacing:0.28em;
  font-size:var(--text-xs); color:var(--color-accent); text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 8px var(--color-accent); }

.section-title{
  font-size:var(--text-2xl); letter-spacing:0.01em; text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.section-lede{
  color:var(--color-text-muted); max-width:640px; font-size:var(--text-base);
  margin-bottom:var(--space-12);
}

/* reveal-on-scroll */
[data-reveal]{ opacity:0; transform:translateY(24px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(5,5,5,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  transition: transform var(--transition), background var(--transition);
}
.navbar.is-hidden{ transform:translateY(-100%); }
.nav-inner{
  max-width:1180px; margin-inline:auto; padding: var(--space-3) clamp(var(--space-5), 5vw, var(--space-10));
  display:flex; align-items:center; gap:var(--space-6);
}
.brand{ display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-weight:700; letter-spacing:0.05em; font-size:var(--text-lg); }
.brand-mark{ width:32px; height:32px; border-radius:50%; }
.brand-word .accent-b{ color:var(--color-accent); }

.nav-links{ display:flex; gap:var(--space-8); margin-inline:auto; }
.nav-links a{
  font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--color-text-muted);
  position:relative; padding-block:var(--space-1); transition:color var(--transition);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--color-accent);
  transition:width var(--transition);
}
.nav-links a:hover,.nav-links a.is-active{ color:var(--color-text); }
.nav-links a:hover::after,.nav-links a.is-active::after{ width:100%; }

.cta-pill{
  display:inline-flex; align-items:center; gap:var(--space-2);
  border:1px solid var(--color-accent-dim); background:transparent; color:var(--color-text);
  font-family:var(--font-display); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  font-size:var(--text-sm); padding: var(--space-3) var(--space-6); border-radius:var(--radius-full);
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space:nowrap;
}
.cta-pill:hover{ background:var(--color-accent-glow); border-color:var(--color-accent); box-shadow:var(--shadow-glow); transform:translateY(-1px); }
.cta-pill--nav{ padding: var(--space-2) var(--space-5); font-size:var(--text-xs); flex-shrink:0; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:var(--space-2); z-index:110; }
.nav-toggle span{ width:22px; height:2px; background:var(--color-text); border-radius:2px; transition:transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px); z-index:90;
  opacity:0; pointer-events:none; transition:opacity var(--transition);
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

@media (max-width: 900px){
  .nav-links{
    position:fixed; top:0; right:0; height:100dvh; width:min(78vw, 320px);
    background:#0a0a0a; flex-direction:column; align-items:flex-start;
    padding: calc(var(--space-16) + var(--space-8)) var(--space-8) var(--space-8);
    gap:var(--space-6); margin:0; transform:translateX(100%);
    transition:transform 320ms cubic-bezier(0.16,1,0.3,1); z-index:100;
    border-left:1px solid var(--color-border);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:var(--text-base); }
  .cta-pill--nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding: var(--space-24) var(--space-5) var(--space-16);
}
.hero-glow{
  position:absolute; top:-20%; left:50%; translate:-50% 0; width:min(900px, 140vw); height:900px;
  background:radial-gradient(closest-side, var(--color-accent-glow), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:26px 26px; mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{ position:relative; z-index:1; max-width:780px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.hero-title{
  font-size:var(--text-hero); text-transform:uppercase; letter-spacing:0.01em; line-height:0.98;
  margin-block: var(--space-4);
}
.hero-title .accent{ color:var(--color-accent); text-shadow:0 0 40px var(--color-accent-glow); }
.hero-sub{ color:var(--color-text-muted); max-width:560px; font-size:var(--text-lg); margin-bottom:var(--space-8); }
.hero-actions{ display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-16); }
.cta-ghost{
  font-family:var(--font-display); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  font-size:var(--text-sm); color:var(--color-text-muted); display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-2); transition:color var(--transition);
}
.cta-ghost:hover{ color:var(--color-text); }
.hero-logo{ width:min(420px, 80vw); filter:drop-shadow(0 30px 60px rgba(255,123,0,0.18)); animation: float 7s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.scroll-cue{
  position:absolute; bottom:var(--space-8); left:50%; translate:-50% 0; z-index:1;
  color:var(--color-text-faint); font-size:var(--text-lg); animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

/* =========================================================
   BROADCAST
   ========================================================= */
.stream-frame{ display:flex; flex-direction:column; gap:var(--space-5); }
.stream-embed{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--color-border); background:#000;
}
.stream-embed img,.stream-embed iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.play-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3);
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  transition:background var(--transition);
}
.play-overlay:hover{ background:linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.4)); }
.play-ring{
  width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,123,0,0.16); border:1px solid var(--color-accent); color:var(--color-text);
  font-size:1.4rem; transition:transform var(--transition), box-shadow var(--transition);
}
.play-overlay:hover .play-ring{ transform:scale(1.08); box-shadow:var(--shadow-glow); }
.play-label{ font-family:var(--font-display); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; font-size:var(--text-xs); color:var(--color-text); }

.stream-meta{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs);
  font-family:var(--font-display); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-full);
}
.pill--muted{ background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text-muted); }
.pill--accent{ background:var(--color-accent-glow); border:1px solid var(--color-accent-dim); color:var(--color-text); transition:background var(--transition), border-color var(--transition); }
.pill--accent:hover{ background:rgba(255,123,0,0.28); border-color:var(--color-accent); }

/* =========================================================
   CRAFT
   ========================================================= */
.craft-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.craft-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; transition: transform var(--transition), border-color var(--transition);
}
.craft-card:hover{ transform:translateY(-6px); border-color:var(--color-accent-dim); }
.craft-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.craft-media img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.craft-card:hover .craft-media img{ transform:scale(1.05); }
.step-tag{
  position:absolute; top:var(--space-3); left:var(--space-3); z-index:1;
  font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--color-accent);
  background:rgba(5,5,5,0.75); border:1px solid var(--color-accent-dim); border-radius:var(--radius-sm);
  padding: 2px 10px;
}
.craft-card h3{ font-size:var(--text-lg); text-transform:uppercase; margin: var(--space-4) var(--space-5) var(--space-2); }
.craft-card p{ color:var(--color-text-muted); font-size:var(--text-sm); margin: 0 var(--space-5) var(--space-5); }

/* =========================================================
   AI TRACKING
   ========================================================= */
.ai-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.ai-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--transition), transform var(--transition); }
.ai-card:hover{ transform:translateY(-6px); border-color:var(--color-accent-dim); }
.phase-num{ display:block; font-family:var(--font-display); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; font-size:var(--text-xs); color:var(--color-accent); padding: var(--space-4) var(--space-5) 0; }
.ai-media{ aspect-ratio:16/9; overflow:hidden; margin-top:var(--space-3); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.ai-media img{ width:100%; height:100%; object-fit:cover; }
.ai-body{ padding: var(--space-5); }
.ai-body h3{ font-size:var(--text-lg); text-transform:uppercase; margin-bottom:var(--space-2); }
.ai-body p{ color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-4); }
.status{
  display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs);
  font-family:var(--font-display); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding: var(--space-1) var(--space-3); border-radius:var(--radius-full);
}
.status--done{ color:var(--color-success); background:var(--color-success-dim); border:1px solid rgba(61,220,132,0.3); }
.status--live{ color:var(--color-accent); background:var(--color-accent-glow); border:1px solid var(--color-accent-dim); }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-6); align-items:start; }
.info-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}
.info-card h3{ font-size:var(--text-lg); text-transform:uppercase; margin-bottom:var(--space-4); display:flex; align-items:center; gap:var(--space-2); color:var(--color-text); }
.info-card h3 i{ color:var(--color-accent); }
.info-card p{ color:var(--color-text-muted); margin-bottom:var(--space-6); font-size:var(--text-base); }
.schedule{ display:grid; gap:var(--space-3); border-top:1px solid var(--color-border); padding-top:var(--space-5); }
.schedule > div{ display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--text-sm); }
.schedule dt{ color:var(--color-text-faint); text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-display); font-weight:600; }
.schedule dd{ color:var(--color-text); }

.social-row{ display:flex; gap:var(--space-4); }
.social-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border); font-size:1.25rem; color:var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
}
.social-btn:hover{ color:var(--color-accent); border-color:var(--color-accent-dim); background:var(--color-accent-glow); transform:translateY(-3px); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#000; padding: var(--space-8) 0; border-top:1px solid var(--color-border); }
.footer-inner{
  max-width:1180px; margin-inline:auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-10));
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  font-size:var(--text-xs); letter-spacing:0.05em; color:var(--color-text-faint);
}
.footer-copy{ display:flex; flex-direction:column; gap:var(--space-2); }
.footer-credit{ color:var(--color-text-faint); }
.footer-credit a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--color-border); padding-bottom:1px; transition:color var(--transition), border-color var(--transition); }
.footer-credit a:hover,.footer-credit a:focus-visible{ color:var(--color-accent); border-color:var(--color-accent); }
.footer-top{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-text-faint); transition:color var(--transition); }
.footer-top:hover{ color:var(--color-accent); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .craft-grid,.ai-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top: var(--space-20); }
  .footer-inner{ justify-content:center; text-align:center; }
  .footer-copy{ align-items:center; }
}
@media (max-width: 560px){
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .cta-pill,.hero-actions .cta-ghost{ width:100%; justify-content:center; }
  .social-row{ justify-content:center; }
}