/* ==========================================================================
   Indulge — landing page
   Palette comes from the app (design.js): ink #080210, pink #FF007D,
   magenta #D10A73, purple #78237D, violet #4A3D91, logo gradient pink→coral→gold.
   ========================================================================== */

/* ---------- Fonts (Nunito Sans, OFL) ---------- */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/nunito-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-sans-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-sans-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/nunito-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-sans-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-sans-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --ink:#080210;
  --ink-2:#0d0618;
  --ink-3:#140a24;
  --text:#f6f2fb;
  --muted:rgba(246,242,251,.66);
  --faint:rgba(246,242,251,.42);
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.055);
  --pink:#ff057e;
  --pink-2:#ff278f;
  --magenta:#d10a73;
  --purple:#a028af;
  --violet:#4a3d91;
  --coral:#fd5b67;
  --gold:#f9de44;
  --grad:linear-gradient(90deg,#ff057e 0%,#fd5b67 45%,#f9de44 100%);
  --grad-cta:linear-gradient(90deg,#ff057e 0%,#a028af 100%);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --r-lg:32px;
  --r-md:22px;
  --wrap:1200px;
  --gutter:clamp(20px,4vw,40px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
::selection{background:var(--pink);color:#fff}
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:12px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* gradient text */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:gradShift 6s ease-in-out infinite alternate}
@keyframes gradShift{to{background-position:100% 0}}

/* ---------- Reveal system (only when JS runs) ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0ms);will-change:transform,opacity}
.js [data-reveal="left"]{transform:translate3d(-44px,0,0)}
.js [data-reveal="right"]{transform:translate3d(44px,0,0)}
.js [data-reveal="scale"]{transform:scale(.92)}
.js [data-reveal="blur"]{filter:blur(14px);transform:translate3d(0,20px,0)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* split headline */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .04em .16em;margin:-.06em -.04em -.16em}
.wi{display:inline-block}
.js [data-split] .wi{transform:translate3d(0,112%,0) rotate(5deg);transform-origin:0 100%;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*70ms + var(--base,0ms))}
.js [data-split].is-in .wi{transform:none}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.01em;white-space:nowrap;border:1px solid var(--line-2);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s,background .3s,border-color .3s}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.btn--primary{border-color:transparent;background:var(--grad-cta);color:#fff;box-shadow:0 10px 30px -8px rgba(255,5,126,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#ff278f,#b53bc4);opacity:0;transition:opacity .3s}
.btn--primary:hover::before{opacity:1}
.btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(475%) skewX(-20deg)}}
.btn--lg{height:56px;padding:0 32px;font-size:16px}
.btn--primary:hover{box-shadow:0 16px 40px -8px rgba(255,5,126,.85),inset 0 1px 0 rgba(255,255,255,.4)}

.store{display:inline-block;line-height:0;border-radius:9px;transition:transform .4s var(--ease),filter .3s,box-shadow .3s}
.store img{display:block;height:56px;width:auto;border-radius:0}
.store:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px -12px rgba(255,5,126,.55)}
.stores{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Progress bar ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 14px rgba(255,5,126,.8)}

/* ---------- Header ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;pointer-events:none;transition:transform .5s var(--ease)}
.nav__bar{pointer-events:auto;width:min(100% - 24px,1160px);margin-inline:auto;display:flex;align-items:center;gap:16px;padding:8px 10px 8px 22px;border-radius:999px;background:rgba(14,6,24,.5);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px -20px rgba(0,0,0,.8);transition:background .4s,border-color .4s,padding .4s var(--ease),width .5s var(--ease)}
.nav.is-scrolled .nav__bar{background:rgba(10,3,20,.82);border-color:var(--line-2);width:min(100% - 24px,1040px);padding-block:6px}
.nav__logo{display:flex;flex:0 0 auto}
.nav__logo img{height:42px;width:auto;transition:transform .5s var(--ease)}
.nav__logo:hover img{transform:scale(1.06) rotate(-2deg)}
.nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto;position:relative}
.nav__links a{position:relative;z-index:1;padding:9px 18px;font-size:14.5px;font-weight:700;color:var(--muted);border-radius:999px;transition:color .3s}
.nav__links a:hover{color:#fff}
.nav__pill{position:absolute;z-index:0;top:0;left:0;height:100%;border-radius:999px;background:rgba(255,255,255,.1);opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;pointer-events:none}
.nav__cta{display:flex;gap:8px;flex:0 0 auto}
.nav__cta .btn{height:42px;padding:0 20px;font-size:14px}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center}
.nav__burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--ease),opacity .2s}
.nav__burger span+span{margin-top:5px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:100px var(--gutter) 40px;visibility:hidden;transition:visibility 0s .7s}
.menu.is-open{visibility:visible;transition:visibility 0s}
/* The circle reveal is a disc growing from the burger by transform (run by the
   compositor) instead of an animated clip-path, which repainted the whole menu
   every frame. Its radius covers the screen from that corner. */
.menu::before{content:"";position:absolute;z-index:-1;top:calc(44px - 150vmax);right:calc(44px - 150vmax);width:300vmax;height:300vmax;border-radius:50%;background:#080210;transform:scale(0);transition:transform .7s var(--ease-io)}
@supports (width:hypot(1px,1px)){.menu::before{top:calc(44px - hypot(100vw,100vh));right:calc(44px - hypot(100vw,100vh));width:calc(2*hypot(100vw,100vh));height:calc(2*hypot(100vw,100vh))}}
.menu.is-open::before{transform:scale(1);transition-duration:.8s}
.menu::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 400px at 80% 10%,rgba(255,5,126,.28),transparent 70%);opacity:0;transition:opacity .5s}
.menu.is-open::after{opacity:1;transition:opacity .6s .2s}
.menu a.menu__link{font-size:clamp(34px,10vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.2;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease)}
.menu.is-open a.menu__link{opacity:1;transform:none;transition-delay:calc(.25s + var(--i)*70ms)}
.menu__cta{display:grid;gap:12px;margin-top:28px;opacity:0;transition:opacity .5s .6s}
.menu.is-open .menu__cta{opacity:1}
body.menu-lock{overflow:hidden}
/* Nothing behind the menu moves while it is up: every section pauses its
   animations as it opens (.is-off, main.js, also set on sections scrolled out
   of view). A full-screen menu over the animated hero (it used to blur it, too)
   is what stuttered on phones. Hiding the page under the menu saved little and
   made closing hitch while it repainted.
   The lists name the looping animations one by one (keep them in sync):
   "section *" made every toggle restyle the whole section. */
.is-off :is(.grad,.aurora i,.beams i,.ecg path,.phone,.chip,.marquee__track,.marquee__group svg,.how__ring,.eq i,.sc--1,.heart,.crown,.crown img,.cta__orb,.cta__ph,.lhero__shield),
.is-off :is(.hero__grid,.lvl,.ev__tag)::before,
.is-off :is(.btn--primary,.dot-live,.phone__screen,.scroll-cue i,.pings i,.ticket__qr,.story__bars i,.sc--1,.lvl)::after{animation-play-state:paused!important}
.nav.is-open .nav__bar{-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .4s,border-color .4s,padding .4s var(--ease),width .5s var(--ease),-webkit-backdrop-filter 0s .35s,backdrop-filter 0s .35s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 78% 40%,rgba(255,5,126,.22),transparent 65%),radial-gradient(700px 500px at 10% 90%,rgba(74,61,145,.35),transparent 65%),var(--ink)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.7;mix-blend-mode:screen;will-change:transform}
.aurora .a1{width:620px;height:620px;left:-8%;top:-12%;background:radial-gradient(circle,#ff057e,transparent 68%);animation:drift1 16s ease-in-out infinite alternate}
.aurora .a2{width:700px;height:700px;right:-12%;top:8%;background:radial-gradient(circle,#78237d,transparent 68%);animation:drift2 20s ease-in-out infinite alternate}
.aurora .a3{width:520px;height:520px;left:34%;bottom:-24%;background:radial-gradient(circle,#4a3d91,transparent 68%);animation:drift3 18s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(18%,22%,0) scale(1.25)}}
@keyframes drift2{to{transform:translate3d(-20%,14%,0) scale(1.15)}}
@keyframes drift3{to{transform:translate3d(-24%,-18%,0) scale(1.3)}}
.beams{position:absolute;left:50%;top:-6%;width:0;height:0;opacity:.55;mask-image:linear-gradient(to bottom,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 85%)}
.beams i{position:absolute;top:0;left:-1px;width:2px;height:120vh;transform-origin:50% 0;background:linear-gradient(to bottom,rgba(255,5,126,.95),rgba(255,5,126,0) 80%);filter:blur(1px);animation:sweep var(--t,9s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);transform:rotate(var(--a))}
.beams i:nth-child(3n){background:linear-gradient(to bottom,rgba(120,100,255,.9),rgba(120,100,255,0) 80%)}
.beams i:nth-child(4n){background:linear-gradient(to bottom,rgba(249,222,68,.8),rgba(249,222,68,0) 70%)}
@keyframes sweep{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a)*-.55 + 6deg))}}
#sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__grid{position:absolute;inset:auto 0 0 0;height:46%;overflow:hidden;transform:perspective(520px) rotateX(58deg);transform-origin:50% 100%;mask-image:linear-gradient(to top,#000,transparent 90%);-webkit-mask-image:linear-gradient(to top,#000,transparent 90%)}
/* moves by transform (one cell taller, slid down a cell) so it is not repainted every frame */
.hero__grid::before{content:"";position:absolute;left:0;right:0;top:-64px;bottom:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px;animation:gridMove 3.2s linear infinite}
@keyframes gridMove{to{transform:translateY(64px)}}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(24px,4vw,56px)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dot-live{position:relative;width:9px;height:9px;border-radius:50%;background:#37e08b}
.dot-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(55,224,139,.7);animation:ping 2s infinite}
@keyframes ping{70%{transform:scale(3.2);opacity:0}100%{transform:scale(1);opacity:0}}
.hero__title{margin:22px 0 22px;font-size:clamp(40px,5.1vw,76px);font-weight:900;line-height:1.02;letter-spacing:-.035em}
.hl{position:relative;display:inline-block}
.ecg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.4em;overflow:visible;pointer-events:none}
.ecg path{fill:none;stroke:url(#ecgGrad);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 8px rgba(255,5,126,.9))}
.is-in .ecg path{animation:ecg 3.6s var(--ease-io) 1.1s infinite}
@keyframes ecg{0%{stroke-dashoffset:1}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.hero__lead{max-width:34em;font-size:clamp(17px,1.5vw,20px);color:var(--muted);margin-bottom:34px}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px;color:var(--faint);font-size:14px;font-weight:600}
.hero__meta li{display:flex;align-items:center;gap:8px}
.hero__meta svg{width:18px;height:18px;color:var(--pink)}

/* phones */
.phone{--pw:290px;position:relative;width:var(--pw);padding:calc(var(--pw)*.03);border-radius:calc(var(--pw)*.155);background:linear-gradient(150deg,#3a2f4d 0%,#120a1d 38%,#241a34 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 0 0 1px #000,0 50px 90px -30px rgba(0,0,0,.85),0 0 90px -20px var(--glow,rgba(255,5,126,.45));transition:box-shadow .8s}
.phone__screen{position:relative;border-radius:calc(var(--pw)*.128);overflow:hidden;aspect-ratio:1080/2424;background:var(--ink)}
.phone__screen img{width:100%;height:100%;object-fit:cover}
.phone__screen::before{content:"";position:absolute;z-index:3;top:calc(var(--pw)*.03);left:50%;width:calc(var(--pw)*.034);height:calc(var(--pw)*.034);margin-left:calc(var(--pw)*-.017);border-radius:50%;background:#000;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.phone__screen::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 60%);transform:translateX(-120%);animation:glare 7s ease-in-out infinite;pointer-events:none}
@keyframes glare{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.phone::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 3px 3px 0;background:#2b2138}

.hero__stage{position:relative;height:clamp(560px,52vw,740px);--rx:0;--ry:0;perspective:1400px}
.hero__stage .phone{position:absolute;left:50%;top:50%;transform-style:preserve-3d;margin:0}
.ph-main{--pw:clamp(250px,22vw,310px);z-index:3;transform:translate(-50%,-50%) rotateY(calc(var(--ry)*1deg)) rotateX(calc(var(--rx)*1deg));animation:floatA 7s ease-in-out infinite}
.ph-l{--pw:clamp(200px,17vw,240px);--glow:rgba(120,100,255,.4);z-index:2;transform:translate(-128%,-44%) rotate(-9deg) rotateY(calc(var(--ry)*.6deg));filter:brightness(.78);animation:floatB 8s ease-in-out infinite}
.ph-r{--pw:clamp(200px,17vw,240px);--glow:rgba(255,5,126,.35);z-index:2;transform:translate(28%,-56%) rotate(9deg) rotateY(calc(var(--ry)*.6deg));filter:brightness(.78);animation:floatC 9s ease-in-out infinite}
@keyframes floatA{50%{translate:0 -18px}}
@keyframes floatB{50%{translate:0 14px}}
@keyframes floatC{50%{translate:0 -12px}}
.js .hero__stage .phone{opacity:0;scale:.86}
.js .hero__stage.is-in .phone{opacity:1;scale:1;transition:opacity 1.2s var(--ease),scale 1.4s var(--ease)}
.js .hero__stage.is-in .ph-l{transition-delay:.35s}
.js .hero__stage.is-in .ph-r{transition-delay:.5s}

.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:rgba(20,10,36,.62);border:1px solid var(--line-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px -18px rgba(0,0,0,.8);font-size:13.5px;font-weight:800;line-height:1.25;white-space:nowrap;animation:floatB 6s ease-in-out infinite}
.chip small{display:block;font-weight:600;font-size:12px;color:var(--faint)}
.chip__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--grad-cta);flex:0 0 auto}
.chip__ic svg{width:18px;height:18px}
.chip--a{right:-2%;top:14%;animation-delay:-1s}
.chip--b{left:-4%;top:36%;animation:floatC 7s ease-in-out infinite;animation-delay:-2s}
.chip--c{right:2%;bottom:12%;animation:floatA 8s ease-in-out infinite;animation-delay:-3s}
.chip--b .chip__ic{background:linear-gradient(135deg,#4a3d91,#7864ff)}
.chip--c .chip__ic{background:linear-gradient(135deg,#fd5b67,#f9de44);color:#1b0b00}
.js .chip{opacity:0}
.js .hero__stage.is-in .chip{opacity:1;transition:opacity 1s .9s}

.scroll-cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:grid;justify-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.scroll-cue i{display:block;width:22px;height:36px;border:2px solid var(--line-2);border-radius:14px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--pink);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------- Marquee ---------- */
.marquee{position:relative;z-index:5;margin:-34px 0 0;padding:34px 0;transform:rotate(-1.6deg);background:linear-gradient(90deg,#ff057e,#c0147b 40%,#78237d);box-shadow:0 -20px 60px -20px rgba(255,5,126,.5),0 20px 60px -20px rgba(74,61,145,.6);overflow:hidden}
.marquee+.marquee{margin-top:-18px;transform:rotate(1.2deg);background:var(--ink-3);padding:20px 0;border-block:1px solid var(--line);box-shadow:none;z-index:4}
.marquee__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:48s}
.marquee__group{display:flex;align-items:center;flex:0 0 auto}
.marquee__group span{font-size:clamp(34px,5.4vw,70px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1;white-space:nowrap;padding:0 .35em;color:#fff}
.marquee__group span.o{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85)}
.marquee__group svg{width:clamp(22px,3vw,38px);height:auto;flex:0 0 auto;color:var(--gold);animation:spin 8s linear infinite}
.marquee--rev .marquee__group span{font-size:clamp(18px,2.2vw,28px);letter-spacing:.14em;color:var(--muted)}
.marquee--rev .marquee__group span.o{-webkit-text-stroke:1px rgba(255,255,255,.5)}
.marquee--rev .marquee__group svg{color:var(--pink);width:16px}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Section heads ---------- */
.sec{position:relative;padding:clamp(90px,12vw,160px) 0}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
.kicker::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--grad)}
.h2{margin-top:16px;font-size:clamp(34px,5vw,64px);font-weight:900;line-height:1.05;letter-spacing:-.03em}
.sub{margin-top:18px;max-width:36em;font-size:clamp(17px,1.4vw,19px);color:var(--muted)}
.head{margin-bottom:clamp(44px,6vw,80px)}
.head--c{text-align:center}
.head--c .sub{margin-inline:auto}

/* ---------- How it works (sticky) ---------- */
.how{background:radial-gradient(800px 600px at 15% 20%,rgba(74,61,145,.28),transparent 70%),radial-gradient(700px 500px at 90% 80%,rgba(255,5,126,.14),transparent 70%)}
.how__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,6vw,90px)}
.how__steps{position:relative;padding-left:56px}
.how__rail{position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
.how__rail i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--grad);transform-origin:0 0;transform:scaleY(var(--prog,.1));transition:transform .8s var(--ease);box-shadow:0 0 14px rgba(255,5,126,.7)}
.step{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s}
.step.is-active{opacity:1}
.step::before{content:"";position:absolute;left:-52px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--ink);border:2px solid var(--line-2);transition:all .5s var(--ease)}
.step.is-active::before{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 7px rgba(255,5,126,.18),0 0 24px var(--pink);transform:scale(1.15)}
.step__num{font-size:clamp(72px,9vw,128px);font-weight:900;line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2);transition:all .6s}
.step.is-active .step__num{-webkit-text-stroke-color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.step h3{margin-top:6px;font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.step p{margin-top:14px;max-width:30em;color:var(--muted);font-size:clamp(16px,1.3vw,18px)}
.step__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.step__tags li{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800;background:var(--glass);border:1px solid var(--line);color:var(--muted)}
.step .phone--inline{display:none}
.how__stage{position:relative}
.how__sticky{position:sticky;top:calc(50vh - 340px);height:680px;display:grid;place-items:center}
.how__glow{position:absolute;inset:8% 4%;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,var(--stage-c,#ff057e),transparent 65%);opacity:.5;transition:background 1s}
.how__ring{position:absolute;width:min(520px,100%);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,255,255,.16);animation:spin 40s linear infinite}
.how__ring::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--pink);box-shadow:0 0 20px var(--pink)}
.how__ring--2{width:min(400px,80%);animation-duration:26s;animation-direction:reverse;border-color:rgba(255,255,255,.1)}
.how__ring--2::after{background:var(--gold);box-shadow:0 0 20px var(--gold)}
.how__phone{--pw:clamp(260px,25vw,320px);position:relative;transform:rotate(-3deg);transition:transform 1s var(--ease)}
.how__phone[data-i="1"]{transform:rotate(2deg)}
.how__phone[data-i="2"]{transform:rotate(-2deg)}
.how__phone[data-i="3"]{transform:rotate(3deg)}
.how__phone .phone__screen img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.how__phone .phone__screen img.is-on{opacity:1;transform:none}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.card{position:relative;grid-column:span 4;min-height:340px;padding:30px;border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:border-color .4s,transform .6s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,5,126,.2),transparent 60%);opacity:0;transition:opacity .4s}
.card:hover{border-color:rgba(255,255,255,.26)}
.card:hover::before{opacity:1}
.card h3{font-size:clamp(22px,2.2vw,28px);font-weight:900;line-height:1.12;letter-spacing:-.02em}
.card p{margin-top:10px;color:var(--muted);font-size:15.5px;max-width:25em}
.card__ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:14px;background:var(--grad-cta);box-shadow:0 10px 24px -8px rgba(255,5,126,.7)}
.card__ic svg{width:22px;height:22px;color:#fff}
.c-map{grid-column:span 7;min-height:440px}
.c-ticket{grid-column:span 5;min-height:470px;background:linear-gradient(160deg,rgba(255,5,126,.16),rgba(74,61,145,.14) 60%,rgba(255,255,255,.02))}
.c-club,.c-level{grid-column:span 6;min-height:300px}

/* map card */
.c-map .phone{--pw:240px;position:absolute;right:42px;top:56px;transform:rotate(7deg);transition:transform .8s var(--ease)}
.c-map:hover .phone{transform:rotate(3deg) translateY(-14px)}
.c-map__txt{position:relative;z-index:2;max-width:46%}
.pings{position:absolute;left:0;bottom:0;width:48%;height:46%;z-index:0}
.pings i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 20px var(--pink)}
.pings i::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--pink);animation:ring 2.4s ease-out infinite;animation-delay:var(--dl)}
.pings i:nth-child(1){left:14%;top:30%;--dl:0s}
.pings i:nth-child(2){left:46%;top:58%;--dl:.8s;background:var(--gold);box-shadow:0 0 20px var(--gold)}
.pings i:nth-child(2)::after{border-color:var(--gold)}
.pings i:nth-child(3){left:72%;top:22%;--dl:1.6s;background:#7864ff;box-shadow:0 0 20px #7864ff}
.pings i:nth-child(3)::after{border-color:#7864ff}
.pings svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(3.4);opacity:0}}

/* ticket card */
.ticket{position:absolute;left:50%;bottom:-78px;width:min(310px,80%);translate:-50% 0;transform:perspective(900px) rotateX(calc(var(--tx,0)*1deg)) rotateY(calc(var(--ty,0)*1deg)) rotateZ(-4deg);transition:transform .5s var(--ease)}
.ticket__in{position:relative;border-radius:26px;background:linear-gradient(160deg,#fff 0%,#f4eefc 100%);color:#12041f;overflow:hidden;box-shadow:0 40px 70px -24px rgba(0,0,0,.8),0 0 70px -10px rgba(255,5,126,.5)}
.ticket__top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 14px;background:var(--grad-cta);color:#fff}
.ticket__top b{font-size:15px;font-weight:900;letter-spacing:.05em}
.ticket__top span{font-size:12px;font-weight:800;opacity:.9}
.ticket__body{padding:18px 22px 22px;display:grid;justify-items:center;gap:12px;position:relative}
.ticket__body::before,.ticket__body::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:#1a0a2c}
.ticket__body::before{left:-10px}
.ticket__body::after{right:-10px}
.ticket__dash{position:absolute;left:18px;right:18px;top:0;border-top:2px dashed rgba(18,4,31,.18)}
.ticket__qr{position:relative;width:150px;height:150px;padding:10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px rgba(18,4,31,.08);overflow:hidden}
.ticket__qr svg{width:100%;height:100%}
.ticket__qr::after{content:"";position:absolute;left:0;right:0;height:46px;top:-46px;background:linear-gradient(to bottom,transparent,rgba(255,5,126,.35));border-bottom:2px solid var(--pink);animation:scan 2.6s ease-in-out infinite}
@keyframes scan{0%{top:-46px}100%{top:100%}}
.ticket__meta{display:flex;justify-content:space-between;width:100%;font-size:12px;font-weight:800;color:#6b5a80}
.ticket__meta b{display:block;color:#12041f;font-size:15px;font-variant-numeric:tabular-nums}
.c-ticket__txt{position:relative;z-index:2}

/* line-up card */
.eq{display:flex;align-items:flex-end;gap:5px;height:96px;margin-top:26px}
.eq i{flex:1;min-width:4px;border-radius:4px 4px 2px 2px;background:linear-gradient(to top,var(--pink),var(--coral) 60%,var(--gold));transform-origin:50% 100%;animation:eq var(--s,1.1s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);height:100%;transform:scaleY(.3)}
@keyframes eq{to{transform:scaleY(var(--h,1))}}
.genres{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.genres li{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:800;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);transition:all .3s}
.card:hover .genres li{border-color:rgba(255,5,126,.5);color:#fff}

/* stories card */
.story{position:absolute;right:26px;bottom:-30px;width:150px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);transform:rotate(6deg);transition:transform .7s var(--ease)}
.card:hover .story{transform:rotate(2deg) translateY(-10px)}
.story img{width:100%;height:100%;object-fit:cover}
.story__bars{position:absolute;z-index:2;left:8px;right:8px;top:9px;display:flex;gap:4px}
.story__bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.story__bars i::after{content:"";display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0);animation:bar 9s linear infinite;animation-delay:var(--dl)}
.story__bars i:nth-child(1)::after{--dl:0s}
.story__bars i:nth-child(2)::after{animation-delay:3s}
.story__bars i:nth-child(3)::after{animation-delay:6s}
@keyframes bar{0%{transform:scaleX(0)}33%{transform:scaleX(1)}33.1%,100%{transform:scaleX(0)}}
.story__bars i:nth-child(2)::after,.story__bars i:nth-child(3)::after{animation-name:bar2}
@keyframes bar2{0%{transform:scaleX(0)}33%{transform:scaleX(1)}100%{transform:scaleX(1)}}

/* meet card */
.swipe{position:absolute;right:30px;bottom:26px;width:150px;height:200px}
.swipe .sc{position:absolute;inset:0;border-radius:22px;border:1px solid var(--line-2);box-shadow:0 20px 40px -18px rgba(0,0,0,.8);display:grid;place-items:end start;padding:14px;overflow:hidden}
.swipe .sc b{position:relative;z-index:1;font-size:15px;font-weight:900;line-height:1.1}
.swipe .sc small{display:block;font-weight:700;font-size:11px;opacity:.8}
.swipe .sc::before{content:"";position:absolute;left:50%;top:26%;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:0 70px 0 -4px rgba(255,255,255,.16)}
.sc--3{background:linear-gradient(160deg,#4a3d91,#1a0f38);transform:translate(-14px,-6px) rotate(-8deg) scale(.94)}
.sc--2{background:linear-gradient(160deg,#a028af,#3b0d52);transform:translate(8px,2px) rotate(4deg) scale(.97)}
.sc--1{background:linear-gradient(160deg,#ff057e,#6a1259);animation:swipe 6s var(--ease-io) infinite}
.sc--1::after{content:"MATCH";position:absolute;top:16px;right:12px;padding:3px 8px;border:2px solid #37e08b;color:#37e08b;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.08em;transform:rotate(12deg);animation:stamp 6s infinite}
@keyframes swipe{0%,35%{transform:translate(0,0) rotate(0);opacity:1}55%{transform:translate(120px,-14px) rotate(18deg);opacity:0}56%{transform:translate(0,12px) scale(.9);opacity:0}75%,100%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes stamp{0%,30%{opacity:0}40%,52%{opacity:1}56%,100%{opacity:0}}
.heart{position:absolute;right:76px;bottom:6px;z-index:5;width:34px;height:34px;color:var(--pink);filter:drop-shadow(0 0 12px var(--pink));animation:heart 6s infinite;opacity:0}
@keyframes heart{0%,40%{opacity:0;transform:translateY(0) scale(.6)}50%{opacity:1;transform:translateY(-26px) scale(1.2)}70%,100%{opacity:0;transform:translateY(-70px) scale(1)}}

/* club card */
.c-club{background:linear-gradient(135deg,rgba(249,222,68,.12),rgba(255,5,126,.14) 60%,rgba(255,255,255,.02))}
.crown{position:absolute;right:30px;top:24px;width:150px;height:150px;animation:floatA 6s ease-in-out infinite}
.crown img{width:100%;height:100%;filter:drop-shadow(0 0 22px rgba(255,5,126,.55));animation:crownGlow 3.2s ease-in-out infinite alternate}
@keyframes crownGlow{to{filter:drop-shadow(0 0 38px rgba(249,222,68,.75)) brightness(1.15)}}
.perks{display:grid;gap:10px;margin-top:22px}
.perks li{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.perks svg{width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(55,224,139,.18);color:#37e08b;flex:0 0 auto}

/* level card */
.lvl{position:absolute;right:34px;top:50%;translate:0 -50%;width:170px;height:170px}
.lvl svg{width:100%;height:100%;transform:rotate(-90deg)}
.lvl circle{fill:none;stroke-width:10;stroke-linecap:round}
.lvl .bg{stroke:rgba(255,255,255,.1)}
.lvl .fg{stroke:url(#lvlGrad);stroke-dasharray:464;stroke-dashoffset:464;filter:drop-shadow(0 0 10px rgba(255,5,126,.8));transition:stroke-dashoffset 2.2s var(--ease) .3s}
.is-in .lvl .fg{stroke-dashoffset:140}
.lvl__n{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.lvl__n b{font-size:46px;font-weight:900;font-variant-numeric:tabular-nums}
.lvl__n span{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.lvl::before,.lvl::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(255,255,255,.18);animation:spin 24s linear infinite}
.lvl::after{inset:-28px;border-color:rgba(255,5,126,.28);animation-direction:reverse;animation-duration:34s}

/* ---------- Stats ---------- */
.stats{position:relative;padding:clamp(100px,13vw,180px) 0;overflow:hidden;isolation:isolate;text-align:center}
.stats__bg{position:absolute;inset:-18% 0;z-index:-2;background:url(/img/photos/ph-stage.webp) center/cover;will-change:transform}
.stats::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(8,2,16,.55) 30%,rgba(8,2,16,.7) 70%,var(--ink) 100%),radial-gradient(700px 400px at 50% 50%,rgba(255,5,126,.3),transparent 70%)}
.stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,60px);margin-top:clamp(40px,6vw,80px)}
.stat{padding:clamp(24px,3vw,40px) 16px;border-radius:var(--r-lg);background:rgba(8,2,16,.5);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stat b{display:block;font-size:clamp(44px,5.6vw,80px);font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:13px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- Partners ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pcard{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3.4vw,48px);border-radius:36px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid var(--line);overflow:hidden;isolation:isolate;min-height:640px}
.pcard::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-120px;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(74,61,145,.9),transparent 70%);transition:transform 1s var(--ease)}
.pcard--pink::before{background:radial-gradient(circle,rgba(255,5,126,.7),transparent 70%)}
.pcard:hover::before{transform:scale(1.3)}
.badge{align-self:flex-start;padding:7px 16px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;background:rgba(120,100,255,.2);border:1px solid rgba(120,100,255,.5);color:#cfc8ff}
.pcard--pink .badge{background:rgba(255,5,126,.16);border-color:rgba(255,5,126,.5);color:#ffb3d6}
.pcard h3{margin-top:22px;font-size:clamp(28px,3.2vw,42px);font-weight:900;line-height:1.08;letter-spacing:-.025em;max-width:11em}
.pcard>p{margin-top:12px;color:var(--muted);font-size:17px}
.psteps{position:relative;display:grid;gap:18px;margin:34px 0 36px;max-width:23em}
.psteps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line)}
.psteps::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--grad);transform-origin:0 0;transform:scaleY(0);transition:transform 1.6s var(--ease) .4s}
.pcard.is-in .psteps::after{transform:scaleY(1)}
.psteps li{position:relative;display:flex;gap:16px;align-items:flex-start}
.psteps .n{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink-2);border:1px solid var(--line-2);font-weight:900;position:relative;z-index:1}
.psteps b{display:block;font-size:17px;font-weight:900;line-height:1.3;padding-top:2px}
.psteps span{display:block;font-size:14.5px;color:var(--muted);line-height:1.45}
.pcard .btn{align-self:flex-start;margin-top:auto}
.pcard .phone{--pw:200px;position:absolute;right:-30px;bottom:-190px;transform:rotate(9deg);transition:transform .8s var(--ease)}
.pcard:hover .phone{transform:rotate(5deg) translateY(-18px)}
.pcard--pink .phone{right:auto;left:auto;right:-20px}

/* ---------- Final CTA ---------- */
.cta{position:relative;margin:0 0 clamp(60px,8vw,100px)}
.cta__box{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(28px,4vw,48px);padding:clamp(48px,7vw,110px) clamp(24px,5vw,80px);text-align:center;background:var(--grad-cta);box-shadow:0 60px 120px -50px rgba(255,5,126,.6)}
.cta__bg{position:absolute;inset:-8% 0;z-index:-2;background:url(/img/photos/ph-welcome-1.webp) center/cover;mix-blend-mode:soft-light;opacity:.75}
.cta__box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 400px at 20% 0%,rgba(249,222,68,.4),transparent 70%),radial-gradient(700px 500px at 90% 100%,rgba(74,61,145,.8),transparent 70%)}
.cta__orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);animation:floatA 9s ease-in-out infinite}
.cta__orb--1{width:220px;height:220px;left:-60px;bottom:-80px}
.cta__orb--2{width:140px;height:140px;right:8%;top:-40px;animation-delay:-3s}
.cta h2{font-size:clamp(40px,7.4vw,108px);font-weight:900;line-height:.98;letter-spacing:-.045em}
.cta p{max-width:30em;margin:22px auto 0;font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.88)}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 40px;margin-top:40px}
.cta .stores{justify-content:center}
.qrs{display:flex;gap:16px}
.qr{display:grid;justify-items:center;gap:8px;font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.qr img{width:92px;height:92px;padding:7px;border-radius:16px;background:#fff;transition:transform .4s var(--ease)}
.qr:hover img{transform:scale(1.08) rotate(-3deg)}

/* CTA side phones */
.cta__ph{--pw:190px;position:absolute;bottom:-170px;z-index:0;animation:floatB 8s ease-in-out infinite}
.cta__ph--l{left:5%;transform:rotate(-11deg)}
.cta__ph--r{right:5%;transform:rotate(11deg);animation-name:floatC}
.cta__box>h2,.cta__box>p,.cta__row{position:relative;z-index:1}
@media (max-width:1180px){.cta__ph{display:none}}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:70px 0 40px;background:linear-gradient(180deg,transparent,rgba(74,61,145,.12))}
.foot__top{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.foot__brand img{height:74px;width:auto}
.foot__brand p{margin-top:16px;color:var(--muted);max-width:22em}
.foot__nav{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);justify-content:end;gap:10px 60px}
.foot__nav a{font-weight:700;color:var(--muted);transition:color .3s,transform .3s var(--ease);display:inline-block}
.foot__nav a:hover{color:#fff;transform:translateX(5px)}
.foot__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);color:var(--faint);font-size:14px}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--line);color:var(--muted);transition:all .35s var(--ease)}
.social a:hover{color:#fff;background:var(--grad-cta);border-color:transparent;transform:translateY(-4px)}
.social svg{width:18px;height:18px}
.totop{position:fixed;right:20px;bottom:20px;z-index:80;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(20,10,36,.8);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:all .4s var(--ease)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--grad-cta);border-color:transparent}
.totop svg{width:20px;height:20px}

/* cursor glow (desktop pointers only) */
.glow{position:fixed;left:0;top:0;z-index:1;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,5,126,.1),transparent 65%);opacity:0;transition:opacity .6s;will-change:transform}
.glow.is-on{opacity:1}
main,.foot{position:relative;z-index:2}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .c-map{grid-column:span 12}
  .c-ticket{grid-column:span 12;min-height:480px}
  .card{grid-column:span 6}
  .c-club,.c-level{grid-column:span 12}
  .pcard{min-height:620px}
}
@media (max-width:980px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__bar{padding-left:18px}
  .nav.is-scrolled .nav__bar{width:min(100% - 24px,1160px)}
  .hero{padding-top:118px}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{display:flex;flex-direction:column;align-items:center}
  .hero__lead{margin-inline:auto}
  .hero .stores,.hero__meta{justify-content:center}
  .hero__stage{height:620px;margin-top:10px}
  .chip--a{right:4%}
  .chip--b{left:2%}
  .scroll-cue{display:none}
  .how__grid{grid-template-columns:1fr}
  .how__stage{display:none}
  .how__steps{padding-left:0}
  .how__rail,.step::before{display:none}
  .step{min-height:0;opacity:1;padding:34px 0;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  .step .phone--inline{display:block;--pw:230px;margin:30px auto 0}
  .step{align-items:flex-start}
  .step .phone--inline{align-self:center}
  .duo{grid-template-columns:1fr}
  .pcard{min-height:0;padding-bottom:300px}
  .pcard .phone{right:50%;margin-right:-100px;bottom:-170px;transform:rotate(6deg)}
  .pcard--pink .phone{right:50%}
  .foot__top{grid-template-columns:1fr}
  .foot__nav{justify-content:start}
}
@media (max-width:700px){
  body{font-size:16px}
  .card{grid-column:span 12;min-height:320px;padding:24px}
  .c-map{min-height:520px}
  .c-map__txt{max-width:100%}
  .c-map .phone{--pw:200px;right:50%;margin-right:-100px;top:auto;bottom:-110px}
  .pings{display:none}
  .stats__grid{grid-template-columns:1fr}
  .stat b{font-size:64px}
  .hero__stage{height:540px}
  .ph-l{transform:translate(-120%,-42%) rotate(-9deg) rotateY(calc(var(--ry)*.6deg))}
  .ph-r{transform:translate(18%,-52%) rotate(9deg) rotateY(calc(var(--ry)*.6deg))}
  .chip{padding:8px 12px 8px 8px;font-size:12.5px}
  .chip--b{display:none}
  .store img{height:50px}
  .btn--lg{height:52px;padding:0 26px}
  .qrs{display:none}
  .story{width:128px}
  .swipe{right:20px}
  .c-level{min-height:0}
  .lvl{position:relative;right:auto;top:auto;translate:none;width:150px;height:150px;margin:34px auto 6px}
  .lvl__n b{font-size:40px}
  .crown{width:110px;height:110px;right:20px}
  .marquee{padding:26px 0;margin-top:-20px}
}
@media (max-width:480px){
  .hero__meta li:nth-child(3){display:none}
}
@media (max-width:440px){
  .hero__title{font-size:40px}
  .hero__stage{height:500px}
  .c-ticket{min-height:540px}
  .crown{opacity:.5}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .js [data-reveal],.js [data-split] .wi,.js .hero__stage .phone,.js .chip{opacity:1;transform:none;filter:none;scale:1}
  .ecg path{stroke-dashoffset:0}
  .marquee__track{animation:none}
  .glow,#sparks{display:none}
}

/* ---------- Live events rail (js/live.js) ---------- */
.onapp{padding-top:0}
.onapp[hidden],.stats[hidden]{display:none}
.evwrap{position:relative}
.evrail{display:flex;gap:22px;overflow-x:auto;padding:22px 4px 34px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent)}
.evrail::-webkit-scrollbar{display:none}
.evrail.is-drag{cursor:grabbing}
.evrail:not(.is-in) .ev{opacity:0}
.evrail.is-in .ev{animation:evIn .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*80ms)}
@keyframes evIn{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}

.ev{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;flex:0 0 clamp(210px,22vw,264px);display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .7s var(--ease),border-color .3s,box-shadow .5s;will-change:transform;-webkit-user-drag:none;user-select:none}
.ev.is-tilt{transition:transform .12s linear,border-color .3s,box-shadow .5s}
.ev:hover{border-color:rgba(255,5,126,.55);box-shadow:0 34px 70px -28px rgba(255,5,126,.65),0 0 0 1px rgba(255,5,126,.15)}
.ev::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,255,255,.22),transparent 60%);mix-blend-mode:soft-light;transition:opacity .4s}
.ev:hover::after{opacity:1}
.ev__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,#2a1245,#12061f)}
.ev__img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform 1.1s var(--ease)}
.ev:hover .ev__img img{transform:scale(1.1)}
.ev__img::before{content:"";position:absolute;z-index:2;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
.ev:hover .ev__img::before{animation:evShine 1s var(--ease)}
@keyframes evShine{to{transform:translateX(420%) skewX(-18deg)}}
.ev__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,2,16,.35),transparent 30%,transparent 70%,rgba(8,2,16,.5));pointer-events:none}
.ev__date{position:absolute;z-index:4;left:12px;top:12px;display:grid;place-items:center;width:50px;padding:7px 0;border-radius:15px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.1em;color:var(--pink);line-height:1.1;transform:translateZ(30px);transition:transform .6s var(--ease)}
.ev__date b{display:block;font-size:20px;color:#fff;letter-spacing:0}
.ev:hover .ev__date{transform:translateZ(30px) translateY(-3px) scale(1.06)}
.ev__tag{position:absolute;z-index:4;right:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:900;letter-spacing:.04em;background:var(--grad-cta);box-shadow:0 8px 20px -6px rgba(255,5,126,.7);transform:translateZ(30px)}
.ev__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:tagPulse 1.8s infinite}
@keyframes tagPulse{70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.ev__body{display:grid;gap:6px;padding:16px 16px 18px;transform:translateZ(14px)}
.ev__body strong{font-size:16px;font-weight:900;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev__meta{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evnav{position:absolute;z-index:6;top:42%;display:none;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(20,10,36,.78);border:1px solid var(--line-2);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;opacity:0;transition:opacity .3s,background .3s,transform .35s var(--ease)}
.evnav--prev{left:6px}.evnav--next{right:6px}
.evnav:hover{background:var(--grad-cta);border-color:transparent;transform:scale(1.1)}
.evwrap:hover .evnav{opacity:1}
@media (hover:hover) and (pointer:fine){.evnav{display:grid}}
.live__cta{display:flex;justify-content:center;margin-top:10px}
@media (prefers-reduced-motion:reduce){.evrail:not(.is-in) .ev{opacity:1}.evrail.is-in .ev{animation:none}.ev{transform:none}.ev__tag::before{animation:none}}

/* ==========================================================================
   Brand scrollbars: the pink -> purple gradient everywhere (landing, pro, admin).
   Chromium, Safari and Edge use ::-webkit-scrollbar. In Chromium the standard
   scrollbar-color/width would override these, so only Firefox gets them (below).
   Rails that hide their scrollbar keep doing so (their own class wins).
   ========================================================================== */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 14px; height: 14px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #0b0415; border-left: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.035); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
  min-height: 56px;
  min-width: 56px;
  border: 3px solid transparent;
  border-radius: 999px;
  background-color: #ff057e;
  background-image: linear-gradient(180deg, #ff057e 0%, #c0147b 48%, #78237d 100%);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
*::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, #ff057e 0%, #c0147b 48%, #78237d 100%); }
*::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, #ff3d9a 0%, #ff057e 50%, #a028af 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
*::-webkit-scrollbar-thumb:horizontal:hover { background-image: linear-gradient(90deg, #ff3d9a 0%, #ff057e 50%, #a028af 100%); }
*::-webkit-scrollbar-thumb:active { background-image: linear-gradient(180deg, #fd5b67 0%, #ff057e 55%, #f9de44 130%); }
*::-webkit-scrollbar-thumb:horizontal:active { background-image: linear-gradient(90deg, #fd5b67 0%, #ff057e 55%, #f9de44 130%); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #ff057e #0b0415; }
}