/* ===========================================================================
   Jenny's DrumSteps — "Backbeat Room" elevation layer
   Warm analog stage energy. Espresso ink + flame + cymbal gold.
   Loaded after each page's inline styles so the cascade favors these rules.
   =========================================================================== */

:root{
  /* --- new design tokens --- */
  --jds-ink:#0e0a07; --jds-ink-2:#15100a; --jds-surf:#1c150d; --jds-surf-2:#261c11;
  --jds-cream:#f6efe1; --jds-tan:#c2b096; --jds-mute:#85745d;
  --jds-line:rgba(231,177,58,.16);
  --jds-flame:#ff5b28; --jds-amber:#ff8a1f; --jds-gold:#e7b13a; --jds-gold-2:#f3cc5a;
  --jds-rust:#8a2f1a; --jds-teal:#2ed3c6; --jds-pink:#ff3d57;
  --jds-grad:linear-gradient(118deg,#ff5b28 0%,#ff8a1f 45%,#e7b13a 100%);
  --jds-grad-soft:linear-gradient(118deg,#ff7a3c,#f3cc5a);
  --jds-disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --jds-body:'Hanken Grotesk',system-ui,sans-serif;
  --jds-mono:'DM Mono','SFMono-Regular',monospace;
  --jds-shadow:0 24px 60px -28px rgba(0,0,0,.85), 0 4px 14px -6px rgba(0,0,0,.6);
  --jds-glow:0 0 28px rgba(255,91,40,.35), 0 0 64px rgba(231,177,58,.16);

  /* --- override the homepage's neon system so every var-based rule re-skins --- */
  --bg-void:#0e0a07; --bg-deep:#15100a; --bg-card:#1c150d; --bg-elevated:#261c11;
  --text-primary:#f6efe1; --text-secondary:#c2b096; --text-muted:#85745d;
  --neon-cyan:#e7b13a; --neon-magenta:#ff5b28; --neon-purple:#8a2f1a;
  --neon-orange:#ff8a1f; --neon-green:#2ed3c6; --neon-yellow:#f3cc5a;
  --gradient-main:linear-gradient(118deg,#ff5b28,#e7b13a);
  --gradient-warm:linear-gradient(118deg,#ff8a1f,#ff3d57);
  --gradient-cool:linear-gradient(118deg,#e7b13a,#ff5b28);
  --glow-cyan:0 0 30px rgba(231,177,58,.4),0 0 60px rgba(231,177,58,.2);
  --glow-magenta:0 0 30px rgba(255,91,40,.42),0 0 60px rgba(255,91,40,.22);
  --font-display:'Big Shoulders Display',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
}

/* ---------- base + warm atmosphere ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--jds-body); color:var(--jds-cream);
  background:var(--jds-ink) !important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* stage glow + 16-step sequencer grid, fixed so it sits behind everything */
  background-image:
    radial-gradient(58% 46% at 50% -8%, rgba(255,138,31,.13), transparent 64%),
    radial-gradient(38% 38% at 86% 16%, rgba(231,177,58,.08), transparent 70%),
    radial-gradient(50% 40% at 12% 88%, rgba(138,47,26,.14), transparent 72%),
    repeating-linear-gradient(90deg, rgba(246,239,225,.020) 0 1px, transparent 1px 6.25%);
  background-attachment:fixed; background-size:cover,cover,cover,100% 100%;
}
/* film grain on top, never blocks clicks */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--jds-flame); color:#0e0a07}

/* ---------- typography ---------- */
h1,h2,h3,.section-title,.gradient-text,.hero h1,.feature-card h3,.mode-card h3{
  font-family:var(--jds-disp) !important; font-weight:800; letter-spacing:.005em; line-height:.92;
}
h1,.hero h1{ font-size:clamp(2.9rem,8.5vw,6.6rem) !important; text-transform:uppercase; }
h2{ font-size:clamp(2rem,4.6vw,3.5rem) !important; text-transform:uppercase; }
h3{ letter-spacing:.02em; }
p,li,.hero-subtitle{ font-family:var(--jds-body); }
.hero-subtitle{ color:var(--jds-tan) !important; font-size:clamp(1.05rem,1.6vw,1.3rem) !important; line-height:1.6 !important; }
.gradient-text,.hero h1 .gradient-text{
  background:var(--jds-grad) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  filter:drop-shadow(0 6px 24px rgba(255,91,40,.28));
}
/* mono accents for numerals/labels/kbd */
.drum-key,.stat-number,kbd,.bpm,.beatgrid,.beat-label,code{ font-family:var(--jds-mono) !important; }
a{ color:var(--jds-gold-2); text-decoration-color:rgba(231,177,58,.4); text-underline-offset:3px; }
a:hover{ color:var(--jds-amber); }

/* ---------- navigation ---------- */
nav[role="navigation"],.navbar,header nav{
  background:linear-gradient(180deg, rgba(14,10,7,.86), rgba(14,10,7,.55)) !important;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--jds-line) !important;
}
.logo-text{ font-family:var(--jds-disp) !important; font-weight:900; letter-spacing:.06em; font-size:1.45rem;
  background:var(--jds-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.logo-icon{ filter:drop-shadow(0 4px 12px rgba(255,91,40,.5)); animation:jds-beat 1s ease-in-out infinite; }
.nav-links a{ font-family:var(--jds-body); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; color:var(--jds-tan); }
.nav-links a:hover{ color:var(--jds-cream); }
.nav-cta{
  background:var(--jds-grad) !important; color:#1a0d06 !important; font-family:var(--jds-disp) !important;
  font-weight:800; letter-spacing:.06em; border-radius:999px !important; box-shadow:var(--jds-glow);
}

/* ---------- buttons (tactile "hit") ---------- */
.btn-primary,.btn-secondary,.nav-cta,.cta-row a,.card a.button,a.btn{
  font-family:var(--jds-disp) !important; letter-spacing:.05em; text-transform:uppercase;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease !important;
}
.btn-primary{
  background:var(--jds-grad) !important; color:#1a0d06 !important; border:none !important;
  border-radius:999px !important; box-shadow:0 14px 34px -10px rgba(255,91,40,.6), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 22px 48px -10px rgba(255,91,40,.75), 0 0 0 3px rgba(231,177,58,.25) !important; }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-secondary{
  background:rgba(246,239,225,.03) !important; color:var(--jds-cream) !important;
  border:1.5px solid var(--jds-line) !important; border-radius:999px !important;
}
.btn-secondary:hover{ border-color:var(--jds-gold) !important; color:var(--jds-gold-2) !important; transform:translateY(-2px); box-shadow:var(--jds-glow); }

/* ---------- cards (homepage features + modes, inner-page cards) ---------- */
.feature-card,.mode-card,.demo-card,.testimonial-card,.stat-card,.wrap .card,.card{
  background:linear-gradient(165deg, var(--jds-surf), var(--jds-ink-2)) !important;
  border:1px solid var(--jds-line) !important; border-radius:22px !important;
  box-shadow:var(--jds-shadow) !important; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important;
}
/* hot top edge that lights on hover */
.feature-card::before,.mode-card::before,.wrap .card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--jds-grad); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; opacity:.9;
}
.feature-card:hover,.mode-card:hover,.wrap .card:hover,.card:hover{
  transform:translateY(-6px); border-color:rgba(231,177,58,.42) !important;
  box-shadow:0 36px 70px -30px rgba(0,0,0,.9), var(--jds-glow) !important;
}
.feature-card:hover::before,.mode-card:hover::before,.wrap .card:hover::before{ transform:scaleX(1); }
.feature-card h3,.mode-card h3,.card h2,.card h3{ color:var(--jds-cream) !important; }
.feature-icon,.mode-icon{ filter:drop-shadow(0 6px 16px rgba(255,91,40,.4)); }

/* ---------- stats ---------- */
.stat-number,.stat h3,.stat strong{ font-family:var(--jds-disp) !important; font-weight:900;
  background:var(--jds-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- section rhythm ---------- */
section{ position:relative; }
.hero-badge{ border:1px solid var(--jds-line) !important; background:rgba(255,138,31,.07) !important;
  color:var(--jds-gold-2) !important; font-family:var(--jds-mono) !important; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; }
.hero-badge .pulse,.pulse{ background:var(--jds-flame) !important; animation:jds-beat .5s ease-in-out infinite !important; }

/* ---------- inner-page specifics (.wrap/.beatgrid/.cta-row) ---------- */
.wrap{ max-width:920px; margin-inline:auto; padding-inline:clamp(18px,4vw,34px); }
.wrap h1{ background:var(--jds-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 22px rgba(255,91,40,.22)); margin-bottom:.4em; }
.beatgrid{ display:grid; grid-auto-flow:column; gap:6px; padding:12px; border:1px solid var(--jds-line); border-radius:14px;
  background:rgba(0,0,0,.25); }
.beatgrid > *{ aspect-ratio:1; border-radius:6px; background:rgba(246,239,225,.06); border:1px solid rgba(246,239,225,.05); }
.beatgrid > *:nth-child(4n+1){ background:rgba(231,177,58,.22); border-color:rgba(231,177,58,.4); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0; }

/* ---------- signature sequencer bar (injected by elevate.js) ---------- */
.jds-seq{ position:relative; display:flex; gap:5px; align-items:stretch; width:100%; max-width:520px;
  margin:26px 0 6px; padding:10px 12px; border:1px solid var(--jds-line); border-radius:14px;
  background:linear-gradient(165deg, rgba(28,21,13,.9), rgba(14,10,7,.7)); box-shadow:var(--jds-shadow); overflow:hidden; }
.jds-seq b{ flex:1; height:34px; border-radius:5px; background:rgba(246,239,225,.07);
  border:1px solid rgba(246,239,225,.06); box-shadow:inset 0 -6px 10px -8px rgba(0,0,0,.6); }
.jds-seq b.beat{ background:linear-gradient(180deg, rgba(231,177,58,.28), rgba(231,177,58,.1)); border-color:rgba(231,177,58,.35); }
.jds-seq .head{ position:absolute; top:8px; bottom:8px; width:calc(6.25% - 3px); border-radius:5px;
  background:var(--jds-grad); box-shadow:0 0 22px rgba(255,91,40,.7); mix-blend-mode:screen;
  left:10px; animation:jds-sweep 2.4s steps(16,end) infinite; }
.jds-seq .lbl{ position:absolute; right:12px; top:-9px; font-family:var(--jds-mono); font-size:.62rem;
  color:var(--jds-gold-2); letter-spacing:.1em; background:var(--jds-ink); padding:0 6px; }
@keyframes jds-sweep{ from{ transform:translateX(0) } to{ transform:translateX(1600%) } }

/* ---------- tame the legacy light "related links" box ---------- */
.seo-related-links{ background:linear-gradient(165deg,var(--jds-surf),var(--jds-ink-2)) !important;
  border:1px solid var(--jds-line) !important; border-radius:18px !important; color:var(--jds-tan) !important; box-shadow:var(--jds-shadow); }
.seo-related-links h2{ color:var(--jds-cream) !important; font-family:var(--jds-disp) !important; text-transform:uppercase; letter-spacing:.02em; }
.seo-related-links a{ color:var(--jds-gold-2) !important; }
.seo-related-links a:hover{ color:var(--jds-amber) !important; }
.seo-related-links-meta{ color:var(--jds-mute) !important; }

/* ---------- motion ---------- */
@keyframes jds-beat{ 0%,100%{ transform:scale(1) } 12%{ transform:scale(1.32) } 24%{ transform:scale(1) } }
.jds-reveal{ opacity:0; transform:translateY(26px); }
.jds-reveal.jds-in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }

/* ============ INTENSITY PASS — warmer pads, bigger kinetic type, louder motion ============ */

/* warm the homepage floating drums (were hardcoded neon rgba) — distinct warm hues */
.drum-crash{ background:radial-gradient(circle at 32% 28%, rgba(243,204,90,.95), rgba(231,177,58,.14) 62%, transparent) !important; box-shadow:0 0 54px rgba(243,204,90,.42) !important; }
.drum-ride{ background:radial-gradient(circle at 32% 28%, rgba(255,138,31,.95), rgba(255,138,31,.12) 62%, transparent) !important; box-shadow:0 0 54px rgba(255,138,31,.42) !important; }
.drum-hihat{ background:radial-gradient(circle at 32% 28%, rgba(231,177,58,.95), rgba(231,177,58,.12) 62%, transparent) !important; box-shadow:0 0 42px rgba(231,177,58,.4) !important; }
.drum-snare{ background:radial-gradient(circle at 32% 28%, rgba(255,91,40,.96), rgba(255,91,40,.12) 62%, transparent) !important; box-shadow:0 0 56px rgba(255,91,40,.44) !important; }
.drum-kick{ background:radial-gradient(circle at 32% 28%, rgba(255,61,87,.96), rgba(138,47,26,.16) 62%, transparent) !important; box-shadow:0 0 78px rgba(255,61,87,.46) !important; }
.drum-tom1{ background:radial-gradient(circle at 32% 28%, rgba(204,92,46,.95), rgba(138,47,26,.12) 62%, transparent) !important; box-shadow:0 0 46px rgba(204,92,46,.4) !important; }
.drum-tom2{ background:radial-gradient(circle at 32% 28%, rgba(231,177,58,.95), rgba(231,177,58,.12) 62%, transparent) !important; box-shadow:0 0 46px rgba(231,177,58,.4) !important; }
.drum-floor{ background:radial-gradient(circle at 32% 28%, rgba(176,72,38,.96), rgba(138,47,26,.14) 62%, transparent) !important; box-shadow:0 0 54px rgba(176,72,38,.42) !important; }

/* warm the app pads + beat cells */
:root{ --neon-pink:#ff3d57; }
/* only the genuinely COOL pads get warmed; metallics + woods + golds kept for variety */
.drum.kick .drum-head{ background:radial-gradient(circle at 35% 30%, #ff7a3c, #8a2f1a 72%) !important; }
.drum.tom1 .drum-head{ background:linear-gradient(135deg,#ff8a4a,#c8502e) !important; }
.drum.tom2 .drum-head{ background:linear-gradient(135deg,#e7b13a,#b4642a) !important; }
.drum.floor .drum-head{ background:linear-gradient(135deg,#d2691e,#8a2f1a) !important; }
.drum.splash .drum-head{ background:linear-gradient(135deg,#f3cc5a,#ff8a1f) !important; }
.drum.shaker .drum-head{ background:linear-gradient(135deg,#e7b13a,#b4642a) !important; }
.drum.clap .drum-head{ background:linear-gradient(135deg,#ff8a4a,#ff3d57) !important; }
.beat-cell.current{ background:var(--jds-flame) !important; box-shadow:0 0 16px rgba(255,91,40,.75) !important; }

/* bigger, kinetic hero type with a live shimmer + sweeping playhead underline */
h1,.hero h1{ font-size:clamp(3.2rem,10.5vw,8rem) !important; line-height:.86 !important; letter-spacing:-.012em; }
.gradient-text{ background:linear-gradient(100deg,#ff5b28,#ff8a1f,#f3cc5a,#ff8a1f,#ff5b28) !important;
  background-size:280% 100% !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; animation:jds-shimmer 6s linear infinite; }
@keyframes jds-shimmer{ from{ background-position:0% 50% } to{ background-position:280% 50% } }
.hero h1::after{ content:""; display:block; height:5px; width:min(360px,58%); margin-top:.2em; border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--jds-flame),var(--jds-gold),transparent); background-size:55% 100%; background-repeat:no-repeat;
  animation:jds-under 2.2s ease-in-out infinite; }
@keyframes jds-under{ 0%,100%{ background-position:-10% 0 } 50%{ background-position:110% 0 } }

/* louder card + reveal motion */
.feature-card,.mode-card,.wrap .card,.card{ transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease, border-color .42s ease !important; }
.feature-card:hover,.mode-card:hover,.wrap .card:hover,.card:hover{ transform:translateY(-10px) scale(1.015) !important; }
.jds-reveal{ opacity:0; transform:translateY(42px) scale(.965); }
.jds-reveal.jds-in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }

/* bigger, hotter sequencer bar + warm WebGL hero bg more present */
.jds-seq{ max-width:600px; padding:13px 15px; }
.jds-seq b{ height:42px; }
#hero-viz{ opacity:.66 !important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .jds-reveal{ opacity:1; transform:none; }
  .hero h1::after{ display:none; }
  html{ scroll-behavior:auto }
}
@media (max-width:640px){
  .jds-seq{ max-width:100% }
  body{ background-attachment:scroll }
}