/* Karaoke page refresh — V1
   Distinctive stage palette: electric raspberry, ultraviolet and ice blue.
   Page-scoped so request/admin karaoke tools remain unchanged. */
.karaoke-page{
  --karaoke-hot:#ff4fb8;
  --karaoke-violet:#7a5cff;
  --karaoke-ice:#85e9f5;
  --karaoke-bg:#06070b;
  --karaoke-panel:#10111a;
  --karaoke-panel-2:#0b0d14;
  --karaoke-text:#f7f7fb;
  --karaoke-muted:#a8afbb;
  background:var(--karaoke-bg);
}

/* Hero */
.karaoke-page .karaoke-hero{
  min-height:clamp(610px,72vh,720px);
  padding-top:110px;
  padding-bottom:70px;
  align-items:flex-end;
  overflow:hidden;
}
.karaoke-page .karaoke-hero::before{
  background:
    linear-gradient(90deg,rgba(5,6,9,.97) 0%,rgba(5,6,9,.89) 32%,rgba(5,6,9,.55) 56%,rgba(5,6,9,.14) 84%),
    linear-gradient(0deg,#050609 0%,rgba(5,6,9,.36) 25%,transparent 55%),
    radial-gradient(circle at 72% 32%,rgba(255,79,184,.18),transparent 25%),
    radial-gradient(circle at 86% 66%,rgba(133,233,245,.09),transparent 25%),
    url("photos/karaoke-dj-night.webp") 70% 46%/cover no-repeat!important;
  filter:saturate(1.06) contrast(1.04);
}
.karaoke-page .karaoke-hero::after{opacity:.045!important}
.karaoke-page .karaoke-hero .page-hero-inner{max-width:760px}
.karaoke-page .karaoke-hero .hero-number{
  right:3vw;
  top:25%;
  color:#fff;
  opacity:.035;
  font-size:clamp(9rem,22vw,22rem);
  letter-spacing:-.08em;
}
.karaoke-page .karaoke-hero .eyebrow{color:#f895cf!important}
.karaoke-page .karaoke-hero h1{
  max-width:720px;
  margin:12px 0 18px;
  font-size:clamp(4.4rem,7.4vw,7.4rem);
  line-height:.86;
  letter-spacing:-.065em;
  text-transform:uppercase;
  color:#fff!important;
  text-shadow:0 14px 42px rgba(0,0,0,.34);
}
.karaoke-page .karaoke-hero h1 span{
  background:linear-gradient(108deg,#ff4fb8 0%,#e95fd5 22%,#9b72ff 50%,#b7dff5 72%,#85e9f5 100%);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent!important;
  filter:drop-shadow(0 0 18px rgba(122,92,255,.18));
  animation:karaokeHeroSweep 9s ease-in-out infinite;
}
.karaoke-page .karaoke-hero .hero-intro{
  max-width:680px;
  color:#d1d5dd;
  font-size:1rem;
  line-height:1.72;
}
.karaoke-hero-capabilities{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 0;
}
.karaoke-hero-capabilities span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(7,8,13,.50);
  color:#eceef4;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.karaoke-page .primary{
  background:linear-gradient(105deg,#6f4cf5 0%,#b14edc 48%,#ef4da9 100%)!important;
  box-shadow:0 16px 42px rgba(92,57,202,.22)!important;
}
.karaoke-page .line-link{color:#d7e6eb!important;border-color:rgba(215,230,235,.38)!important}

@keyframes karaokeHeroSweep{
  0%,24%{background-position:0 50%}
  52%,68%{background-position:100% 50%}
  100%{background-position:0 50%}
}

/* Shared section hierarchy */
.karaoke-page .content-section{padding:clamp(72px,7vw,104px) 0}
.karaoke-page .section-title{
  margin:10px 0 0;
  font-size:clamp(2.8rem,5.2vw,5.15rem);
  line-height:.92;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.karaoke-page .section-title span,
.karaoke-showcase-copy h2 span,
.karaoke-cta h2 span{color:var(--karaoke-ice)!important}
.karaoke-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr);
  gap:clamp(32px,6vw,84px);
  align-items:end;
}
.karaoke-section-head>p{
  margin:0 0 7px;
  color:var(--karaoke-muted);
  font-size:1rem;
  line-height:1.72;
}

/* Intro */
.karaoke-intro{
  background:
    radial-gradient(circle at 9% 35%,rgba(122,92,255,.11),transparent 27%),
    radial-gradient(circle at 90% 65%,rgba(133,233,245,.06),transparent 25%),
    #08090f;
}
.karaoke-intro-grid{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;
  gap:clamp(42px,7vw,100px)!important;
  align-items:center!important;
}
.karaoke-lead{padding-top:0!important}
.karaoke-lead p{
  max-width:690px;
  margin:0 0 16px!important;
  color:#bbc1ca!important;
  font-size:1.04rem!important;
  line-height:1.75!important;
}

/* Image-led showcase replaces the repeated full-height photo band */
.karaoke-showcase{background:#050609}
.karaoke-showcase-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.72fr);
  gap:clamp(34px,6vw,86px);
  align-items:center;
}
.karaoke-showcase-image{
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:#0b0c12;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.02) inset;
}
.karaoke-showcase-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(5,6,9,.22),transparent 28%),radial-gradient(circle at 76% 24%,rgba(122,92,255,.10),transparent 30%);
  pointer-events:none;
}
.karaoke-showcase-image img{width:100%;height:100%;display:block;object-fit:cover}
.karaoke-showcase-copy h2{
  margin:13px 0 20px;
  color:#fff;
  font-size:clamp(2.8rem,4.8vw,5rem);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.karaoke-showcase-copy>p:not(.eyebrow){
  margin:0 0 25px;
  color:#b1b8c3;
  line-height:1.72;
}

/* Options */
.karaoke-options{background:linear-gradient(180deg,#08090e,#07080c)}
.karaoke-option-grid{
  margin-top:34px!important;
  gap:14px!important;
}
.karaoke-option-grid article{
  min-height:255px;
  padding:28px 30px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(16,17,25,.93),rgba(9,10,16,.96))!important;
}
.karaoke-option-grid article:nth-child(1){--tt-cycle-accent:var(--karaoke-hot)}
.karaoke-option-grid article:nth-child(2){--tt-cycle-accent:var(--karaoke-violet)}
.karaoke-option-grid article>span{
  margin-bottom:34px!important;
  color:#c7b8ff!important;
}
.karaoke-option-grid h3{font-size:1.6rem!important}
.karaoke-option-grid p{max-width:56ch;margin-bottom:18px!important}

/* Four-step flow */
.karaoke-flow{
  background:
    radial-gradient(circle at 10% 15%,rgba(255,79,184,.08),transparent 22%),
    radial-gradient(circle at 92% 72%,rgba(133,233,245,.055),transparent 25%),
    #050609!important;
}
.karaoke-flow-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:32px!important;
}
.karaoke-flow-grid article{
  min-height:205px!important;
  padding:23px 20px!important;
  border-radius:18px!important;
  background:linear-gradient(155deg,rgba(15,15,22,.92),rgba(8,9,14,.95))!important;
}
.karaoke-flow-grid article>b{
  margin-bottom:28px!important;
  color:#c4b6ff!important;
  font-size:.62rem!important;
}
.karaoke-flow-grid h3{font-size:1.15rem!important;margin-bottom:10px!important}
.karaoke-flow-grid p{font-size:.88rem;line-height:1.58!important;margin-bottom:0!important}

/* Phone request panel */
.karaoke-request-showcase{
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.62fr)!important;
  gap:clamp(26px,5vw,64px)!important;
  margin-top:22px!important;
  padding:clamp(24px,3vw,34px)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(13,13,21,.97),rgba(7,9,14,.98))!important;
}
.karaoke-request-copy h3{
  max-width:14ch!important;
  font-size:clamp(2.15rem,3.6vw,3.45rem)!important;
  line-height:.95!important;
}
.karaoke-request-copy p:not(.eyebrow){line-height:1.68!important}
.karaoke-request-points{gap:7px!important;margin-top:17px!important}
.karaoke-request-points span{
  padding:8px 10px!important;
  border-color:rgba(160,146,224,.18)!important;
  background:rgba(122,92,255,.055)!important;
  font-size:.61rem!important;
}
.karaoke-request-phone-stage{
  min-height:390px!important;
  padding:15px!important;
  border-radius:20px!important;
  background:radial-gradient(circle at 22% 22%,rgba(255,79,184,.15),transparent 30%),radial-gradient(circle at 78% 72%,rgba(133,233,245,.10),transparent 30%),#080a10!important;
}
.karaoke-request-phone-stage::before{inset:12px!important;border-radius:15px!important}
.karaoke-request-phone-stage img{width:min(100%,330px)!important;filter:drop-shadow(0 24px 42px rgba(0,0,0,.48))!important}

/* Equipment/setup */
.karaoke-setup{background:#090a0f!important}
.karaoke-setup-grid{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
  gap:clamp(42px,7vw,100px)!important;
  align-items:start!important;
}
.karaoke-setup .lead{max-width:590px;color:#aeb5bf;line-height:1.72}
.karaoke-setup-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px!important;
}
.karaoke-setup-list>div{
  min-height:158px;
  padding:20px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.025)!important;
}
.karaoke-setup-list>div:nth-child(1),.karaoke-setup-list>div:nth-child(4){border-top-color:rgba(255,79,184,.42)!important}
.karaoke-setup-list>div:nth-child(2),.karaoke-setup-list>div:nth-child(3){border-top-color:rgba(133,233,245,.34)!important}
.karaoke-setup-list span{font-size:.94rem!important}
.karaoke-setup-list p{font-size:.87rem;line-height:1.54!important}

/* Use cases */
.karaoke-good-for{
  background:linear-gradient(135deg,#070812,#050609 58%,#061014)!important;
}
.karaoke-use-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:30px!important;
}
.karaoke-use-grid article{
  min-height:175px!important;
  padding:22px!important;
  border-radius:17px!important;
}
.karaoke-use-grid h3{font-size:1.08rem!important;margin-bottom:9px!important}
.karaoke-use-grid p{font-size:.86rem;line-height:1.55!important;margin:0!important}

/* FAQs become an accordion */
.karaoke-faq{background:#08090d}
.karaoke-faq-layout{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.18fr);
  gap:clamp(36px,7vw,96px);
  align-items:start;
}
.karaoke-faq-list{border-top:1px solid rgba(255,255,255,.09)}
.karaoke-faq-list details{border-bottom:1px solid rgba(255,255,255,.09)}
.karaoke-faq-list summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:21px 44px 21px 0;
  color:#f2f3f6;
  font-weight:800;
  font-size:1rem;
}
.karaoke-faq-list summary::-webkit-details-marker{display:none}
.karaoke-faq-list summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:17px;
  color:#a99bf0;
  font-size:1.35rem;
  font-weight:400;
}
.karaoke-faq-list details[open] summary::after{content:"–"}
.karaoke-faq-list details p{
  margin:0;
  padding:0 44px 22px 0;
  color:#a7aeb9;
  line-height:1.68;
}

/* Closing CTA */
.karaoke-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(78px,8vw,112px) 24px!important;
  background:
    radial-gradient(circle at 16% 28%,rgba(255,79,184,.13),transparent 28%),
    radial-gradient(circle at 84% 66%,rgba(133,233,245,.09),transparent 27%),
    linear-gradient(125deg,#0b0710,#0b0a16 52%,#071116)!important;
}
.karaoke-cta-inner{position:relative;z-index:2;max-width:900px;margin:auto;text-align:center}
.karaoke-cta .eyebrow{color:#c9bdf6!important}
.karaoke-cta h2{
  max-width:830px;
  margin:14px auto 16px;
  color:#fff;
  font-size:clamp(2.9rem,5.4vw,5.5rem);
  line-height:.92;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.karaoke-cta-inner>p:not(.eyebrow){max-width:660px;margin:0 auto;color:#b7bdc6;line-height:1.7}
.karaoke-cta .page-actions{justify-content:center;margin-top:28px}

/* Navigation accent for Karaoke */
.karaoke-page .topbar nav>a.active{color:#f39bd0!important}
.karaoke-page .topbar nav>a.active::after{background:linear-gradient(90deg,var(--karaoke-hot),var(--karaoke-violet),var(--karaoke-ice))!important}

@media(max-width:980px){
  .karaoke-section-head,
  .karaoke-showcase-grid,
  .karaoke-setup-grid,
  .karaoke-faq-layout{grid-template-columns:1fr!important}
  .karaoke-section-head{gap:20px}
  .karaoke-section-head>p{max-width:700px}
  .karaoke-flow-grid,.karaoke-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .karaoke-showcase-grid{gap:30px}
  .karaoke-showcase-copy{max-width:760px}
  .karaoke-setup-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .karaoke-page .karaoke-hero{
    min-height:670px!important;
    padding-top:110px!important;
    padding-bottom:46px!important;
  }
  .karaoke-page .karaoke-hero::before{
    background:
      linear-gradient(0deg,#050609 0%,rgba(5,6,9,.95) 32%,rgba(5,6,9,.61) 60%,rgba(5,6,9,.24) 100%),
      radial-gradient(circle at 72% 22%,rgba(255,79,184,.13),transparent 29%),
      url("photos/karaoke-dj-night.webp") 58% top/auto 60% no-repeat,
      #050609!important;
  }
  .karaoke-page .karaoke-hero h1{
    font-size:clamp(3.7rem,16vw,5.4rem)!important;
    line-height:.87!important;
  }
  .karaoke-page .karaoke-hero .hero-intro{font-size:.94rem;line-height:1.6}
  .karaoke-hero-capabilities{gap:6px;margin-top:18px}
  .karaoke-hero-capabilities span{padding:7px 9px;font-size:.55rem}
  .karaoke-page .content-section{padding:62px 0}
  .karaoke-page .section-title{font-size:clamp(2.55rem,12vw,4rem)}
  .karaoke-showcase-image{border-radius:20px}
  .karaoke-showcase-copy h2{font-size:clamp(2.6rem,11vw,4rem)}
  .karaoke-option-grid,.karaoke-flow-grid,.karaoke-use-grid{grid-template-columns:1fr!important;margin-top:24px!important}
  .karaoke-option-grid article{min-height:0;padding:24px 21px!important}
  .karaoke-option-grid article>span{margin-bottom:26px!important}
  .karaoke-flow-grid article{min-height:0!important;padding:21px 19px!important}
  .karaoke-request-showcase{grid-template-columns:1fr!important;padding:18px!important;border-radius:20px!important}
  .karaoke-request-copy h3{max-width:none!important;font-size:clamp(2rem,10vw,3rem)!important}
  .karaoke-request-phone-stage{min-height:0!important;padding:14px!important}
  .karaoke-request-phone-stage img{width:min(100%,315px)!important}
  .karaoke-setup-list{grid-template-columns:1fr}
  .karaoke-setup-list>div{min-height:0}
  .karaoke-use-grid{grid-template-columns:1fr!important}
  .karaoke-use-grid article{min-height:0!important}
  .karaoke-faq-list summary{padding:18px 38px 18px 0;font-size:.94rem}
  .karaoke-faq-list details p{padding:0 36px 19px 0;font-size:.9rem}
  .karaoke-cta{padding:68px 20px!important}
  .karaoke-cta h2{font-size:clamp(2.65rem,12vw,4.2rem)}
}

@media(prefers-reduced-motion:reduce){
  .karaoke-page .karaoke-hero h1 span{animation:none!important;background-position:50% 50%!important}
}