/* TempoMix V35 — Nightlife palette + robust responsive overrides.
   Palette: Deep Night #090714 · Neon Fuchsia #FF2E9A · Laser Cyan #29F2E4 */
:root{
  --ink:#090714;--electric:#ff2e9a;--acid:#29f2e4;--pink:#29f2e4;
  --bg:#090714;--surface:#090714;--surface2:#090714;--text:#29f2e4;
  --muted:#29f2e4;--burgundy:#ff2e9a;--accent:#ff2e9a;--line:#ff2e9a;
  --display:"Oxanium",system-ui,sans-serif;--body:"Rajdhani",system-ui,sans-serif;
}
html,body,button,input,select,textarea{font-family:var(--body)}
body{font-weight:500}
:is(h1,h2,h3,h4,h5,h6,.brand,.nav,.button,.section-index,.eyebrow,.banner-label,.price,.choose,summary){font-family:var(--display)}

/* Mobile navigation: keep the TempoMix wordmark visible in the bar. */
@media(max-width:1000px){
  .header .brand{display:inline-flex!important;position:relative!important;z-index:3;align-items:baseline;color:var(--acid)!important;font-family:var(--display);font-size:clamp(1.15rem,5vw,1.55rem);letter-spacing:-.08em;white-space:nowrap}
  .header .brand span{font-weight:500}.header .brand strong{font-weight:800;color:var(--electric)!important}
  .header-actions{margin-left:auto}
}

/* Section 01: the four PNG symbols are permanent and fully opaque on every viewport. */
#solutions .service-symbol-slot{
  display:grid!important;place-items:center!important;opacity:1!important;mix-blend-mode:normal!important;
  visibility:visible!important;height:clamp(116px,11vw,158px);margin:.5rem 0 1rem;position:relative;z-index:3;pointer-events:none
}
#solutions .service-symbol-entrance{
  width:clamp(108px,10vw,146px)!important;height:clamp(108px,10vw,146px)!important;
  opacity:1!important;visibility:visible!important;transform:none!important;translate:none!important;scale:1!important
}
#solutions .service-symbol-tilt,#solutions .service-symbol-rotor{width:100%;height:100%;opacity:1!important;transform:none!important;filter:none!important}
#solutions .service-symbol-rotor img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;filter:none!important
}
@media(prefers-reduced-motion:no-preference){
  #solutions .service-symbol-rotor{animation:v35SymbolFloat 5.8s ease-in-out infinite alternate!important}
  #solutions .service-symbol-card:nth-child(2) .service-symbol-rotor{animation-delay:-1.3s!important}
  #solutions .service-symbol-card:nth-child(3) .service-symbol-rotor{animation-delay:-2.6s!important}
  #solutions .service-symbol-card:nth-child(4) .service-symbol-rotor{animation-delay:-3.9s!important}
}
@keyframes v35SymbolFloat{from{translate:0 3px;rotate:-1.3deg}to{translate:0 -5px;rotate:1.3deg}}

/* Banner text is centered in both scene banners. */
.scene-banner .banner-copy{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center!important;margin-inline:auto}
.scene-banner .banner-label{margin-inline:auto}
.scene-banner h2{margin-inline:auto!important;text-align:center!important}

/* Section 04: cinematic cards with a unique animated background for every use case. */
#production{--panel:var(--ink)!important;background:var(--ink)!important;color:var(--acid)!important;overflow:visible!important}
#production .production-head{max-width:980px}
#production .production-head>p:last-child{color:var(--acid)!important;opacity:.9}
#production .production-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
#production .production-card{
  --prod-image:url('media/film.webp');position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(290px,31vw,430px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.35rem,2.2vw,2rem);border:1px solid var(--electric)!important;border-radius:28px;
  background:var(--ink)!important;color:var(--acid)!important;box-shadow:0 12px 0 #ff2e9a33!important;
  contain:paint;transform:translateZ(0)
}
#production .production-card:nth-child(1){--prod-image:url('media/film.webp')}
#production .production-card:nth-child(2){--prod-image:url('media/live.webp')}
#production .production-card:nth-child(3){--prod-image:url('media/sync.webp')}
#production .production-card:nth-child(4){--prod-image:url('media/loop-filmer-poster.png')}
#production .production-card:nth-child(5){--prod-image:url('media/tempomix-dj-video.webp')}
#production .production-card:nth-child(6){--prod-image:url('media/banner-dance.jpg')}
#production .production-card::before{
  content:"";position:absolute;inset:-5%;z-index:-3;background-image:var(--prod-image);background-size:cover;background-position:center;
  opacity:.72;transform:scale(1.045);will-change:transform;pointer-events:none
}
#production .production-card::after{
  content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#09071420 5%,#0907148c 48%,#090714fa 88%);pointer-events:none
}
#production .production-card summary{display:flex;align-items:flex-end;gap:1rem;min-height:92px;padding:1rem 2rem 1rem 0;color:var(--acid)!important;text-shadow:0 2px 14px #090714}
#production .production-card h3{font-family:var(--display)!important;font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.12;color:var(--acid)!important;text-transform:uppercase;letter-spacing:-.025em}
#production .production-number{color:var(--electric)!important;font:800 .82rem var(--display)}
#production .production-card>p{position:relative;margin:0;padding:.25rem 0 .35rem;color:var(--acid)!important;line-height:1.6;font-size:1rem;text-shadow:0 1px 10px #090714}
#production .production-card summary::after{color:var(--electric)!important;top:auto;bottom:1.15rem}
#production .production-card[open]{border-color:var(--acid)!important;box-shadow:0 12px 0 #29f2e440!important}
@media(prefers-reduced-motion:no-preference){
  #production .production-card::before{animation:v35ProdBreath 16s ease-in-out infinite alternate}
  #production .production-card:nth-child(even)::before{animation-direction:alternate-reverse;animation-duration:19s}
}
@keyframes v35ProdBreath{from{transform:scale(1.045) translate3d(-.6%,0,0)}to{transform:scale(1.10) translate3d(.8%,-.7%,0)}}

/* Section 06 is now a normal top-level section, independent from the contact form. */
#builder{--panel:var(--ink)!important;background:var(--ink)!important;color:var(--acid)!important;position:relative;overflow:visible!important}
#builder :is(h2,p,.section-index){color:var(--acid)!important}
#builder .choice-grid span{background:var(--ink);color:var(--acid);border:1px solid var(--electric)!important;border-radius:14px}
#builder .choice-grid input:checked+span{background:var(--electric)!important;color:var(--ink)!important;border-color:var(--electric)!important}
#builder .button{background:var(--electric)!important;color:var(--ink)!important;border-color:var(--electric)!important}

/* Same section stacking/overlap transition on mobile, tablet and desktop. */
html.stack-enabled main>section:not(.hero):not(#contact){
  position:sticky!important;top:var(--stack-top,76px)!important;
  border-radius:clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0 0!important;
  border-top:2px solid var(--electric);box-shadow:0 -18px 42px #09071470;
}
html.stack-enabled main>.section{background:var(--panel,var(--ink))!important}
html.stack-enabled main>.scene-banner{box-shadow:0 -18px 42px #09071470}
html.stack-enabled main>section>.section-lip{display:none!important}

/* Section 10 / Contact: final long form must remain in normal document flow. */
html.stack-enabled main>#contact,
#contact{
  position:relative!important;top:auto!important;bottom:auto!important;
  transform:none!important;translate:none!important;scale:1!important;
  min-height:auto!important;overflow:visible!important;
  border-radius:clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0 0!important;
  border-top:2px solid var(--electric);box-shadow:0 -18px 42px #09071470;
}
#contact .contact-grid,#contact .contact-form{transform:none!important;translate:none!important;perspective:none!important}
#contact [data-flow]{opacity:1!important;transform:none!important;translate:none!important;visibility:visible!important}


/* Keep the mobile layout stable: no transform on scrolling sections or rails. */
@media(max-width:900px){
  #solutions .service-symbol-slot{height:128px;margin:.35rem 0 .75rem}
  #solutions .service-symbol-entrance{width:118px!important;height:118px!important}
  #production .production-grid{grid-template-columns:1fr;gap:18px}
  #production .production-card{min-height:310px;border-radius:24px;padding:1.2rem;contain:paint}
  #production .production-card::before{inset:-3%;opacity:.68;will-change:auto}
  #production .production-card summary{min-height:82px;padding:.8rem 2rem .8rem 0}
  #production .production-card>p{font-size:.98rem}
  #builder{transform:none!important;translate:none!important;perspective:none!important;contain:layout style}
  #builder .builder-grid,#builder .builder-form,#builder .choice-grid{transform:none!important;translate:none!important;perspective:none!important}
  #builder .choice-grid{grid-template-columns:1fr 1fr;gap:.65rem}
  #builder .choice-grid span{padding:.9rem .75rem;min-height:54px}
  html.stack-enabled #builder{top:var(--stack-top,76px)!important}
}
@media(max-width:560px){#builder .choice-grid{grid-template-columns:1fr}.scene-banner h2{max-width:92%!important}}

/* Tablet: preserve visual rhythm while giving cards room. */
@media(min-width:901px) and (max-width:1180px){
  #production .production-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #production .production-card{min-height:360px}
}

@media(prefers-reduced-motion:reduce){
  #solutions .service-symbol-rotor,#production .production-card::before{animation:none!important;transform:none!important;translate:none!important}
  html.stack-enabled main>section:not(.hero):not(#contact){position:relative!important;top:auto!important}
}