/* =========================================================
   PortaParty — styles.css
   Mobile-first. Tokens up top; sections follow page order.
   ========================================================= */
:root{
  --black:#050506;
  --panel:#111114;
  --panel-2:#19191e;
  --line:#2b2b33;
  --text:#f4f2ee;
  --muted:#c4c0cc;
  --dim:#9a96a6;
  --pink:#ff2d95;
  --purple:#a05cff;
  --blue:#2fa0ff;
  --acid:#c8ff2e;
  --yellow:#ffd21f;
  --orange:#ff7a1a;
  --steel:#c9ccd3;

  --sans:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --marker:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,40px);
  --r-sm:10px; --r-md:18px; --r-lg:28px;

  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#050506; --text:#f4f2ee; } }
:root[data-theme="dark"]{ --black:#050506; --text:#f4f2ee; }

*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--acid);color:#000;padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-stretch:115%}
h2{font-size:clamp(40px,8.2vw,88px)}
h3{font-size:clamp(20px,2.4vw,26px);line-height:1.05;font-stretch:105%}
.lead{font-size:clamp(18px,1.9vw,21px);color:var(--muted);max-width:56ch}
.scrawl{font-family:var(--marker);text-transform:none;font-weight:400;letter-spacing:0;line-height:1.1}
.fine{font-size:14px;color:var(--dim)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2px solid transparent;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;font-stretch:110%;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background-color .18s ease,color .18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-main{background:var(--pink);color:#fff;box-shadow:0 0 0 0 rgba(255,45,149,0)}
.btn-main:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 10px 32px rgba(255,45,149,.45),4px 4px 0 var(--acid)}
.btn-ghost{border-color:rgba(244,242,238,.55);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text);background:rgba(244,242,238,.07);transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:80;background:rgba(5,5,6,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(43,43,51,.8)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:inline-flex;align-items:baseline;gap:2px;text-decoration:none;font-weight:900;font-stretch:125%;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.logo b{font-family:var(--marker);font-weight:400;color:var(--pink);font-size:1.18em;transform:rotate(-4deg);display:inline-block;margin-left:4px;letter-spacing:0;font-stretch:normal}
.nav{display:none}
.nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:15px;padding:8px 2px;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav a:not(.btn):hover{color:var(--text)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:0 20px;font-size:13px;color:#fff}
.menu-btn{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text);border-radius:12px;cursor:pointer}
.nav.open{display:flex;position:fixed;left:0;right:0;top:calc(68px + env(safe-area-inset-top,0px));flex-direction:column;background:var(--black);padding:8px var(--gutter) 24px;border-bottom:1px solid var(--line)}
.nav.open a:not(.btn){font-size:20px;padding:14px 0;border-bottom:1px solid var(--panel-2);color:var(--text)}
.nav.open .btn{margin-top:16px;min-height:54px;font-size:15px}
@media (min-width:960px){
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:26px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(36px,6vw,72px) 0 0}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,rgba(160,92,255,.28),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,10.6vw,112px);font-stretch:118%;line-height:.88}
.hero h1 .line{display:block}
.hero .tag{display:inline-block;font-family:var(--marker);color:var(--acid);font-size:clamp(24px,3.4vw,38px);transform:rotate(-5deg);margin:14px 0 0 4px}
.hero .lead{margin-top:22px;color:var(--text);opacity:.9}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-visual{position:relative;justify-self:center;width:min(100%,360px);margin-bottom:20px}
.hero-visual .glow{position:absolute;inset:8% -14% 4% -14%;border-radius:50%;filter:blur(46px);opacity:.75;animation:led 9s linear infinite;pointer-events:none}
.hero-photo{position:relative;border-radius:22px;overflow:hidden;border:3px solid #0d0d10;box-shadow:0 30px 70px rgba(0,0,0,.6);transform:rotate(1.6deg);aspect-ratio:315/560;background:var(--panel)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;font-weight:900;text-transform:uppercase;line-height:.95;box-shadow:0 6px 18px rgba(0,0,0,.45);will-change:transform}
.sticker.s1{left:-18px;top:14%;width:112px;height:112px;border-radius:50%;background:var(--acid);color:#000;font-size:15px;font-stretch:112%;border:4px solid #fff;transform:rotate(-12deg)}
.sticker.s2{right:-16px;bottom:18%;background:#fff;color:#000;border-radius:12px;padding:0 0 10px;width:132px;overflow:hidden;transform:rotate(7deg)}
.sticker.s2 span{display:block;background:#e3262f;color:#fff;font-size:12px;padding:6px 0 4px;letter-spacing:.06em}
.sticker.s2 small{display:block;font-size:9px;font-weight:700;padding-bottom:2px;background:#e3262f;color:#fff}
.sticker.s2 em{font-family:var(--marker);font-style:normal;font-weight:400;text-transform:none;font-size:22px;display:block;padding-top:8px}
.sticker.s3{left:12%;bottom:-16px;background:var(--pink);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;transform:rotate(-4deg)}

.strip{margin-top:clamp(40px,6vw,72px);border-block:1px solid var(--line);background:var(--panel)}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.strip li{display:flex;align-items:center;gap:12px;padding:18px 14px;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.05em;font-stretch:110%;border-bottom:1px solid var(--line)}
.strip li:nth-child(odd){border-right:1px solid var(--line)}
.strip li:last-child{grid-column:1/-1;border-right:0;justify-content:center;border-bottom:0}
.strip svg{flex:none;width:26px;height:26px}
@media (min-width:760px){
  .strip ul{grid-template-columns:repeat(5,minmax(0,1fr))}
  .strip li{justify-content:center;border-bottom:0;border-right:1px solid var(--line)!important;padding:22px 10px}
  .strip li:last-child{grid-column:auto;border-right:0!important}
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px}
  .hero-visual{width:min(100%,380px)}
}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,11vw,140px) 0;position:relative}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,60px);max-width:900px}
.sec-head .scrawl{font-size:clamp(24px,3.2vw,36px);color:var(--acid);transform:rotate(-2deg);transform-origin:left}
.sec-alt{background:var(--panel)}
/* torn/tape edge between sections */
.edge{height:26px;background:var(--panel);clip-path:polygon(0 60%,4% 20%,9% 70%,15% 30%,22% 80%,28% 25%,35% 65%,41% 15%,48% 70%,55% 30%,61% 85%,68% 25%,74% 65%,81% 20%,88% 75%,94% 30%,100% 60%,100% 100%,0 100%)}
.edge.down{transform:scaleY(-1)}

/* ---------- experience ---------- */
.tabs{display:inline-flex;padding:6px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);gap:4px;margin-bottom:32px}
.tab{min-height:48px;padding:0 24px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px;cursor:pointer;font-stretch:110%}
.tab[aria-selected="true"]{background:var(--text);color:#000}
.tab:hover:not([aria-selected="true"]){color:var(--text)}
.panel{display:grid;gap:36px;align-items:center}
.panel[hidden]{display:none}
.panel-visual{position:relative;border-radius:var(--r-lg);background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.panel-visual.photo{max-width:420px;justify-self:center;width:100%}
.panel-visual.photo img{width:100%;height:auto;aspect-ratio:230/266;object-fit:cover}
.panel-visual .caption{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(5,5,6,.82);backdrop-filter:blur(6px);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--muted)}
.feat-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.feat-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.feat-list li:last-child{border-bottom:0}
.feat-list .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;color:#000;background:var(--c,var(--acid))}
.feat-list b{display:block;font-size:18px;font-weight:800;margin-bottom:2px}
.feat-list span{color:var(--muted);font-size:16px}
.feat-list li.hot b{color:var(--c,var(--acid))}
.panel .note{margin-top:20px}
@media (min-width:900px){ .panel{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px} }
.cutaway{width:100%;height:auto}
.pin{cursor:pointer}
.pin circle{transition:r .15s ease}
.pin.hot circle{r:17}

/* LED colour cycle (shared) */
@keyframes led{
  0%{background:var(--pink)}20%{background:var(--purple)}40%{background:var(--blue)}60%{background:var(--acid)}80%{background:var(--orange)}100%{background:var(--pink)}
}
@keyframes ledStroke{
  0%{stroke:#ff2d95}20%{stroke:#a05cff}40%{stroke:#2fa0ff}60%{stroke:#c8ff2e}80%{stroke:#ff7a1a}100%{stroke:#ff2d95}
}
.led-stroke{animation:ledStroke 9s linear infinite}

/* ---------- karaoke ---------- */
.kara-grid{display:grid;gap:48px;align-items:start}
.screen-rig{position:relative;max-width:440px;width:100%;justify-self:center}
.screen-rig figure{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#000}
.screen-rig img{width:100%;height:auto;aspect-ratio:230/266;object-fit:cover}
.eq{display:flex;gap:5px;align-items:flex-end;height:46px;margin-top:18px;padding:0 6px}
.eq i{flex:1;border-radius:3px 3px 0 0;background:var(--c);height:30%;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite;opacity:.9}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.spec{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.spec span{font-size:13px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted)}
.flow{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;counter-reset:f}
.flow li{position:relative;display:flex;align-items:center;gap:16px;padding:14px 0 30px;font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.2vw,24px);font-stretch:112%;line-height:1.1}
.flow li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(255,255,255,.06)}
.flow li:not(:last-child)::after{content:"";position:absolute;left:7px;top:36px;bottom:4px;width:2px;background:linear-gradient(var(--c),transparent)}
.flow li:last-child{padding-bottom:0}
.flow li.joke{color:var(--muted);font-size:clamp(16px,1.9vw,20px)}
.callout{margin-top:40px;font-family:var(--marker);font-size:clamp(30px,4.6vw,52px);line-height:1.05;color:var(--yellow);transform:rotate(-2.5deg);transform-origin:left}
@media (min-width:900px){ .kara-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px} .screen-rig{position:sticky;top:110px} }

/* ---------- selfie ---------- */
.selfie-grid{display:grid;gap:56px;align-items:center}
.selfie-visual{position:relative;width:min(100%,460px);justify-self:center;padding:10px 40px 60px 0}
.booth{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);width:78%}
.booth img{width:100%;height:auto;aspect-ratio:227/266;object-fit:cover}
.polaroid{position:absolute;background:#f6f4ef;padding:10px 10px 36px;border-radius:4px;box-shadow:0 20px 44px rgba(0,0,0,.55)}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--marker);color:#222;font-size:16px}
.selfie-visual .polaroid{right:0;bottom:0;width:62%;transform:rotate(6deg)}
.steps4{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.steps4 li{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--panel-2);display:grid;gap:6px}
.steps4 b{font-weight:900;font-size:22px;text-transform:uppercase;font-stretch:115%;color:var(--c)}
.steps4 span{color:var(--muted);font-size:15px}
@media (min-width:1100px){ .steps4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:900px){ .selfie-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px} }

/* ---------- graffiti ---------- */
.mark-grid{display:grid;gap:48px;align-items:center}
.wall{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);width:min(100%,460px);justify-self:center}
.wall img{width:100%;height:auto;aspect-ratio:228/266;object-fit:cover}
.wall svg{position:absolute;inset:0;width:100%;height:100%}
.tag-path{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600}
.tag-text{font-family:var(--marker);fill:transparent;stroke-width:1.2;stroke-dasharray:400;stroke-dashoffset:400}
.drawn .tag-path{animation:draw 1.6s ease forwards}
.drawn .tag-text{animation:drawText 1.8s ease forwards}
.drawn .d2{animation-delay:.5s}.drawn .d3{animation-delay:1s}.drawn .d4{animation-delay:1.4s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drawText{60%{fill:transparent}to{stroke-dashoffset:0;fill:currentColor}}
.tagger{margin-top:28px;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-md);padding:20px;display:grid;gap:12px}
.tagger label{font-weight:700}
.tagger .row{display:flex;gap:10px;flex-wrap:wrap}
.tagger input{flex:1 1 180px}
.tag-board{position:relative;min-height:120px;border-radius:12px;background:#1d1b24 repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.03) 58px 60px);overflow:hidden}
.tag-board .t{position:absolute;font-family:var(--marker);white-space:nowrap;animation:pop .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.4) rotate(var(--rot));opacity:0}to{transform:scale(1) rotate(var(--rot));opacity:1}}
.tag-board .empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:15px;text-align:center;padding:0 16px}
@media (min-width:900px){ .mark-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px} }

/* ---------- lock ---------- */
.lock-sec{overflow:hidden;text-align:center}
.lock-sec h2{font-size:clamp(34px,6.4vw,72px)}
.lock-stage{display:grid;gap:28px;justify-items:center;margin-top:44px}
.lock-dial{width:min(100%,380px);position:relative}
.lock-dial svg{width:100%;height:auto;overflow:visible}
.knob{transition:transform .55s cubic-bezier(.3,1.5,.5,1);transform-origin:180px 180px}
.lock-dial[data-mode="alone"] .knob{transform:rotate(-45deg)}
.lock-dial[data-mode="friends"] .knob{transform:rotate(45deg)}
.lock-glow{position:absolute;inset:10%;border-radius:50%;filter:blur(50px);opacity:.55;transition:background .4s ease;z-index:-1}
.lock-dial[data-mode="alone"] .lock-glow{background:var(--pink)}
.lock-dial[data-mode="friends"] .lock-glow{background:var(--acid)}
.lock-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,620px)}
.lock-opt{min-height:88px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;display:grid;gap:4px;place-content:center;padding:12px;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.lock-opt .emo{font-size:26px;line-height:1}
.lock-opt b{font-weight:900;text-transform:uppercase;font-size:clamp(14px,2.4vw,19px);font-stretch:112%;line-height:1.05}
.lock-opt:hover{transform:translateY(-2px)}
.lock-opt[aria-pressed="true"].alone{border-color:var(--pink);background:rgba(255,45,149,.12)}
.lock-opt[aria-pressed="true"].friends{border-color:var(--acid);background:rgba(200,255,46,.1)}
.choose{font-family:var(--marker);font-size:clamp(34px,5vw,56px);color:var(--text);transform:rotate(-3deg)}
.lock-status{min-height:1.6em;color:var(--muted)}

/* ---------- how it works ---------- */
.how{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.how li{position:relative;border-top:4px solid var(--c);background:var(--panel-2);border-radius:0 0 var(--r-md) var(--r-md);padding:26px 24px 28px;display:grid;gap:10px}
.how .num{font-weight:900;font-size:56px;line-height:.9;font-stretch:125%;color:var(--c)}
.how h3{font-size:24px}
.how p{color:var(--muted)}
@media (min-width:700px){ .how{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .how{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- reservation ---------- */
.res-grid{display:grid;gap:40px;align-items:start}
.res-aside{display:grid;gap:22px}
.next{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.next li{display:grid;grid-template-columns:28px 1fr;gap:12px;color:var(--muted)}
.next svg{margin-top:3px}
.contact-card{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;display:grid;gap:4px}
.contact-card a{font-weight:700;text-decoration:none}
.contact-card a:hover{color:var(--acid)}
.form-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,4vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.form-card fieldset{border:0;padding:0;margin:0 0 26px;display:grid;gap:16px}
.form-card legend{font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.08em;color:var(--acid);margin-bottom:14px;font-stretch:110%}
.two{display:grid;gap:16px}
@media (min-width:560px){ .two{grid-template-columns:repeat(2,minmax(0,1fr))} }
.field{display:grid;gap:7px;min-width:0}
.field label,.field .lbl{font-weight:700;font-size:15px}
.field .opt{font-weight:500;color:var(--dim)}
input,select,textarea{width:100%;min-height:54px;border-radius:14px;border:2px solid var(--line);background:#0c0c0f;color:var(--text);font:inherit;font-size:16px;padding:12px 16px;transition:border-color .15s ease,box-shadow .15s ease;appearance:none;-webkit-appearance:none}
textarea{min-height:120px;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4c0cc' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
input[type="date"],input[type="time"]{color-scheme:dark}
input:hover,select:hover,textarea:hover{border-color:#44444f}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,45,149,.2)}
[aria-invalid="true"]{border-color:#ff5d73!important}
.err{font-size:14px;color:#ff8b9c;min-height:0}
.err:empty{display:none}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg label{min-height:54px;border:2px solid var(--line);border-radius:14px;display:grid;place-items:center;font-weight:700;cursor:pointer;font-size:15px;text-align:center;padding:0 6px;background:#0c0c0f}
.seg input:checked+label{border-color:var(--pink);background:rgba(255,45,149,.14);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--acid);outline-offset:2px}
.seg.invalid label{border-color:#ff5d73}
.form-foot{display:grid;gap:12px}
.form-foot .fine{text-align:center}
.btn[disabled]{opacity:.7;cursor:progress}
.success{text-align:center;display:grid;gap:18px;justify-items:center;padding:clamp(16px,4vw,32px) 0}
.success[hidden]{display:none}
.success .big{font-size:64px;line-height:1}
.success h3{font-size:clamp(26px,4vw,36px)}
.summary{width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:6px;font-size:15px;color:var(--muted)}
.summary b{color:var(--text)}
.demo-note{font-size:13px;color:var(--dim)}
@media (min-width:980px){ .res-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px} .res-aside{position:sticky;top:110px} }

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 60px 22px 22px;font-weight:800;font-size:clamp(17px,2vw,20px);position:relative;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:3px solid var(--acid);border-bottom:3px solid var(--acid);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
.faq summary:hover{color:var(--acid)}
.faq .a{padding:0 22px 22px;color:var(--muted);max-width:70ch}
.faq .a strong{color:var(--text)}

/* ---------- final CTA ---------- */
.final{text-align:center;overflow:hidden}
.final h2{font-size:clamp(40px,8.6vw,104px);max-width:14ch;margin-inline:auto}
.parts{list-style:none;margin:36px auto 40px;padding:0;display:grid;gap:4px;font-weight:800;font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;font-stretch:112%;color:var(--muted)}
.parts li:last-child{font-family:var(--marker);text-transform:none;color:var(--pink);font-size:1.3em;transform:rotate(-3deg);font-weight:400;margin-top:6px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 calc(48px + 76px);color:var(--dim);font-size:15px}
footer .wrap{display:grid;gap:26px}
footer nav{display:flex;flex-wrap:wrap;gap:10px 26px}
footer nav a{text-decoration:none;color:var(--muted)}
footer nav a:hover{color:var(--text)}
footer .legal{font-size:13px;max-width:80ch}
@media (min-width:900px){ footer .wrap{grid-template-columns:auto 1fr auto;align-items:start} footer .legal{grid-column:1/-1} footer{padding-bottom:48px} }

/* ---------- sticky mobile CTA ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(5,5,6,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s ease}
.dock.show{transform:none}
@media (min-width:900px){ .dock{display:none} }

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .tag-path,.tag-text{stroke-dashoffset:0}
  .tag-text{fill:currentColor}
}

/* door polaroid in lock section */
.door-pol{position:relative!important;width:150px;transform:rotate(-4deg);margin-top:12px!important}
.door-pol img{aspect-ratio:170/505;object-fit:cover}
@media (min-width:1000px){
  .lock-stage{position:relative}
  .door-pol{position:absolute!important;right:3%;top:4%;width:160px;transform:rotate(6deg)}
}

/* karaoke rig illustration */
.rig{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;aspect-ratio:4/4.3;padding:18% 9% 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect width='240' height='240' fill='%231f1c28'/%3E%3Cg stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='36' cy='40' r='24' fill='%23ff2d95'/%3E%3Crect x='92' y='14' width='70' height='34' rx='8' fill='%23ffd21f' transform='rotate(-10 127 31)'/%3E%3Cpolygon points='205,20 213,40 234,40 217,52 224,72 205,60 186,72 193,52 176,40 197,40' fill='%23c8ff2e'/%3E%3Crect x='20' y='96' width='58' height='58' rx='12' fill='%232fa0ff' transform='rotate(12 49 125)'/%3E%3Ccircle cx='130' cy='118' r='30' fill='%23a05cff'/%3E%3Crect x='168' y='100' width='60' height='40' rx='20' fill='%23ff7a1a' transform='rotate(-8 198 120)'/%3E%3Crect x='30' y='180' width='80' height='40' rx='6' fill='%23f4f2ee' transform='rotate(6 70 200)'/%3E%3Ccircle cx='160' cy='196' r='22' fill='%23c8ff2e'/%3E%3Crect x='196' y='168' width='40' height='56' rx='8' fill='%23ff2d95' transform='rotate(-14 216 196)'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Crect x='106' y='26' width='40' height='5' rx='2' transform='rotate(-10 127 31)'/%3E%3Crect x='44' y='194' width='52' height='5' rx='2' transform='rotate(6 70 200)'/%3E%3Crect x='44' y='204' width='34' height='5' rx='2' transform='rotate(6 70 200)'/%3E%3Ccircle cx='122' cy='112' r='4'/%3E%3Ccircle cx='138' cy='112' r='4'/%3E%3Cpath d='M118 126 q12 12 24 0' stroke='%23111' stroke-width='4' fill='none'/%3E%3C/g%3E%3C/svg%3E") 0 0/240px 240px,#1f1c28}
.rig::before{content:"";position:absolute;inset:0;background:rgba(10,9,14,.5)}
.rig>*{position:relative}
.rig-speaker{position:absolute;top:4%;left:50%;width:22%;aspect-ratio:1.2;transform:translateX(-50%);background:#0b0b0e;border-radius:10px;box-shadow:inset 0 0 0 3px #26252e}
.rig-speaker::after{content:"";position:absolute;inset:18% 26%;border-radius:50%;background:radial-gradient(circle,#3a3945 0 22%,#15151a 24% 60%,#2b2a33 62%)}
.monitor{background:#0d0d10;border-radius:10px;padding:3.2%;box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 2px #26252e;position:relative}
.scr{aspect-ratio:16/10;border-radius:4px;background:radial-gradient(120% 90% at 30% 10%,#3b1c8f,#141a62 55%,#0a1240);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3%;padding:10% 6% 22%;overflow:hidden;position:relative}
.scr .up{position:absolute;top:5%;left:5%;font-size:clamp(9px,1.1vw,11px);color:#b9c3ff;font-weight:600}
.scr .up b{color:#fff}
.ly{font-weight:900;font-size:clamp(13px,1.9vw,19px);line-height:1.15;color:#7fe8ff;font-stretch:105%}
.ly.done{color:#8c8fc2;font-size:clamp(11px,1.4vw,14px)}
.ly.now span{background:linear-gradient(90deg,var(--yellow) 50%,#7fe8ff 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wipe 4s linear infinite}
@keyframes wipe{to{background-position:0 0}}
.scr .eq{position:absolute;left:6%;right:6%;bottom:6%;height:18%;margin:0;padding:0}
.bolt{position:absolute;width:7px;height:7px;border-radius:50%;background:#6d7079}
.b1{top:-12px;left:18%}.b2{top:-12px;right:18%}.b3{bottom:-12px;left:18%}.b4{bottom:-12px;right:18%}
.mic{position:absolute;right:4%;bottom:5%;width:14%;height:26%;transform:rotate(14deg)}
.mic{display:flex;flex-direction:column;align-items:center}
.mic .head{position:relative;z-index:1;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e9ebef,#8d929c 60%,#5c6068);box-shadow:inset 0 0 0 2px #45474f}
.mic .handle{margin-top:-4px;width:24%;flex:1;border-radius:6px;background:#15151a;box-shadow:inset 0 0 0 2px #2d2d35}
.mic .cord{width:40%;height:24%;margin-left:40%;margin-top:-4px;border:3px solid #111;border-color:transparent transparent #111 #111;border-radius:0 0 0 30px}
.rig-note{position:absolute!important;left:6%;bottom:5%;font-family:var(--marker);color:var(--yellow);font-size:clamp(15px,1.8vw,19px);transform:rotate(-3deg);max-width:62%}
@media (max-width:420px){.rig{aspect-ratio:4/4.8}}

/* fixes */
.sticker.s2{width:140px;padding-bottom:12px}
.sticker.s2 span{font-size:15px;padding:8px 0 2px;line-height:1}
.sticker.s2 small{font-size:10px;padding:0 0 6px;line-height:1}
.sticker.s2 em{font-size:24px;padding-top:10px}
.lock-dial{width:min(100%,460px)}
#reserve h2{font-size:clamp(38px,5.4vw,64px)}
#selfie h2{font-size:clamp(38px,6.4vw,76px)}
.final{border-top:0}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;animation:led 9s linear infinite;box-shadow:0 0 24px currentColor}
.rig-note{background:rgba(5,5,6,.85);padding:6px 12px;border-radius:8px}
.selfie-visual{padding:0 0 70px}
.booth{width:64%}
.selfie-visual .polaroid{width:50%;right:0;bottom:0;transform:rotate(6deg)}
@media (max-width:999px){ .door-pol{width:120px} }