:root{
--bg:#0C0911; --bg-2:#130E1A; --surface:#1A1323; --surface-2:#221830;
--ink:#F6EFE6; --muted:#B5A9BA; --faint:#7E7186; --line:rgba(246,239,230,.10); --line-2:rgba(246,239,230,.18);
--gold:#E4C68F; --gold-deep:#B8924E; --rose:#FF7C87; --plum:#6A3B9E;
--on-gold:#1B1208;
--f-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
--f-body:"Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
--f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
--r:18px; --max:1200px; --ease:cubic-bezier(.2,.7,.1,1);
color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
img,video{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); line-height:1.02; text-wrap:balance; margin:0; font-weight:500; letter-spacing:-0.01em}
h2{font-size:clamp(2.3rem, 5vw, 4rem)}
h2 em,h1 em{font-style:italic; color:var(--gold)}
h3{font-size:1.45rem}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.section{padding-block:clamp(72px, 10vw, 128px); position:relative}
.eyebrow{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.lede{font-size:1.15rem; color:var(--muted); max-width:58ch}
.head{display:grid; gap:18px; margin-bottom:56px; max-width:780px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.grain{position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; font:600 .98rem/1 var(--f-body); letter-spacing:.01em; padding:17px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:linear-gradient(135deg, #F1DAAE, var(--gold) 45%, var(--gold-deep)); color:var(--on-gold); box-shadow:0 10px 40px -12px rgba(228,198,143,.6)}
.btn-gold::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%); animation:shine 4.5s var(--ease) infinite 1.5s}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 50px -12px rgba(228,198,143,.75)}
@keyframes shine{0%{transform:translateX(-120%)} 30%,100%{transform:translateX(120%)}}
.btn-glass{background:rgba(246,239,230,.06); border-color:var(--line-2); color:var(--ink); backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(246,239,230,.12); transform:translateY(-2px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; transition:background .4s, border-color .4s; border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(12,9,17,.72); backdrop-filter:blur(16px) saturate(140%); border-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:22px; height:74px}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:1.5rem; text-decoration:none; letter-spacing:-0.01em}
.logo i{font-style:italic; color:var(--gold); font-weight:500}
.logo svg{flex:none; animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-links{display:flex; gap:28px; margin-left:auto; font-size:.93rem}
.nav-links a{text-decoration:none; color:var(--muted); position:relative; transition:color .2s}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{transform:scaleX(1)}
.city-pick select{font:500 .82rem var(--f-mono); color:var(--ink); background:rgba(246,239,230,.06); border:1px solid var(--line-2); border-radius:999px; padding:9px 14px}
.city-pick select option{background:var(--surface)}
.nav .btn{padding:12px 20px; font-size:.9rem}
@media (max-width:940px){ .nav-links{display:none} .city-pick{margin-left:auto} }
@media (max-width:520px){ .nav .btn{display:none} }
.hero{position:relative; margin-top:-74px; padding-top:74px; min-height:min(900px, 100svh); display:grid; align-items:end; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 60% at 70% 40%, rgba(106,59,158,.55), transparent 70%), radial-gradient(50% 50% at 20% 80%, rgba(255,124,135,.25), transparent 70%), var(--bg)}
.hero-media video{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.08); animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.0) translate3d(-1%, -1%, 0)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(12,9,17,.55) 0%, rgba(12,9,17,.25) 35%, rgba(12,9,17,.85) 78%, var(--bg) 100%), radial-gradient(80% 60% at 0% 100%, rgba(12,9,17,.8), transparent 70%)}
.hero .wrap{width:100%; padding-block:clamp(80px, 12vw, 150px) 56px; display:grid; gap:30px}
.hero h1{font-size:clamp(3.1rem, 9vw, 7.6rem); line-height:.95; letter-spacing:-0.025em; max-width:12ch}
.hero h1 .line{display:block; overflow:hidden; padding-bottom:.06em}
.hero h1 .line > span{display:inline-block; animation:rise 1.1s var(--ease) both}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
.hero h1 .line:nth-child(3) > span{animation-delay:.24s}
.hero h1 s{text-decoration:none; position:relative; color:var(--muted)}
.hero h1 s::after{content:""; position:absolute; left:-2%; right:-2%; top:55%; height:.07em; background:var(--rose); transform-origin:left; animation:strike .7s var(--ease) both 1.1s}
@keyframes rise{from{transform:translateY(105%)} to{transform:none}}
@keyframes strike{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:.0; transform:translateY(18px)} to{opacity:1; transform:none}}
.hero .lede{font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:#D9CFDB; animation:fadeUp .9s var(--ease) both .45s}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; animation:fadeUp .9s var(--ease) both .6s}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; animation:fadeUp .9s var(--ease) both .75s}
.chip{font:500 .76rem var(--f-mono); letter-spacing:.06em; padding:8px 14px; border-radius:999px; background:rgba(246,239,230,.07); border:1px solid var(--line-2); color:#E6DCE6; backdrop-filter:blur(8px)}
.chip b{color:var(--gold); font-weight:500}
.live{display:inline-flex; align-items:center; gap:8px}
.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 0 rgba(255,124,135,.7); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,124,135,0)} 100%{box-shadow:0 0 0 0 rgba(255,124,135,0)}}
.marquee{border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding-block:22px}
.marquee .track{display:flex; width:max-content; animation:scroll 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--f-display); font-style:italic; font-size:clamp(1.4rem, 2.6vw, 2.1rem); color:var(--ink); white-space:nowrap; padding-inline:28px; display:inline-flex; align-items:center; gap:56px}
.marquee span::after{content:"✦"; font-style:normal; font-size:.9rem; color:var(--gold)}
@keyframes scroll{to{transform:translateX(-50%)}}
@supports (animation-timeline: view()){
.reveal{animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% cover 28%}
@keyframes reveal{from{transform:translateY(40px); opacity:.55} to{transform:none; opacity:1}}
.parallax{animation:par linear both; animation-timeline:view()}
@keyframes par{from{transform:translateY(40px)} to{transform:translateY(-40px)}}
}
.r2r{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center}
.r2r-copy{display:grid; gap:24px; min-width:0}
.mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; aspect-ratio:1/1.02; max-width:100%}
.vcard{position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(140deg, var(--surface-2), var(--plum) 140%); border:1px solid var(--line); min-height:0}
.vcard.tall{grid-row:1 / span 2}
.vcard video{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease)}
.vcard:hover video{transform:scale(1.06)}
.vcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(12,9,17,.75))}
.vcard .cap{position:absolute; left:16px; bottom:14px; z-index:1; font:500 .72rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.compare div{padding:18px 20px; display:grid; gap:6px; font-size:.95rem}
.compare div:first-child{background:var(--bg-2); color:var(--faint)}
.compare div:last-child{background:var(--surface)}
.compare b{font:500 .7rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase}
.compare div:last-child b{color:var(--gold)}
@media (max-width:900px){ .r2r{grid-template-columns:1fr; gap:40px} }
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.why article{padding:28px 24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:grid; gap:14px; align-content:start; transition:transform .5s var(--ease), border-color .4s}
.why article:hover{transform:translateY(-6px); border-color:var(--line-2)}
.why .ico{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(228,198,143,.1); color:var(--gold)}
.why .ico svg{width:22px; height:22px}
.why p{color:var(--muted); font-size:.96rem}
@media (max-width:980px){ .why{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .why{grid-template-columns:1fr} }
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:27px; height:1px; background:linear-gradient(90deg, var(--gold), var(--rose), transparent)}
.step{display:grid; gap:12px; align-content:start; position:relative; min-width:0}
.step .dot{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:1px solid var(--gold); font:500 1.3rem var(--f-display); font-style:italic; color:var(--gold); position:relative}
.step .dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(228,198,143,.25); animation:ring 3s var(--ease) infinite}
.step:nth-child(2) .dot::after{animation-delay:.6s} .step:nth-child(3) .dot::after{animation-delay:1.2s} .step:nth-child(4) .dot::after{animation-delay:1.8s} .step:nth-child(5) .dot::after{animation-delay:2.4s}
@keyframes ring{0%{transform:scale(.9); opacity:1} 100%{transform:scale(1.35); opacity:0}}
.step .when{font:500 .72rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rose)}
.step p{color:var(--muted); font-size:.95rem}
@media (max-width:1000px){ .steps{grid-template-columns:1fr; gap:28px} .steps::before{left:27px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg, var(--gold), var(--rose), transparent)} .step{grid-template-columns:56px 1fr; column-gap:20px} .step .dot{grid-row:span 3} }
.formats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.format{--mx:50%; --my:0%; position:relative; padding:30px 26px 32px; border-radius:22px; background:var(--surface); border:1px solid var(--line); display:grid; gap:14px; align-content:start; overflow:hidden; min-width:0; transition:transform .5s var(--ease)}
.format::before{content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(228,198,143,.14), transparent 45%); opacity:0; transition:opacity .4s; pointer-events:none}
.format:hover{transform:translateY(-6px)} .format:hover::before{opacity:1}
.format .tag{justify-self:start; font:500 .7rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.format h3{font-size:1.6rem}
.format p{color:var(--muted); font-size:.96rem}
.format.inner{background:linear-gradient(160deg, #2A1B3B, #160F1E 70%); border-color:rgba(228,198,143,.35)}
.format.inner .tag{color:var(--on-gold); background:var(--gold); padding:5px 10px; border-radius:999px}
@media (max-width:1040px){ .formats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .formats{grid-template-columns:1fr} }
.orbit-sec{background:radial-gradient(60% 70% at 25% 50%, rgba(106,59,158,.35), transparent 70%), var(--bg-2); border-block:1px solid var(--line); overflow:hidden}
.orbit-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.orbit{position:relative; width:100%; max-width:520px; aspect-ratio:1; justify-self:center}
.orbit .glow{position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, rgba(228,198,143,.45), rgba(255,124,135,.12) 45%, transparent 70%); filter:blur(10px); animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08); opacity:.8}}
.orbit .tbl{position:absolute; inset:28%; border-radius:50%; background:radial-gradient(circle at 40% 35%, #2C1F3A, #150F1C 70%); border:1px solid rgba(228,198,143,.35); display:grid; place-items:center; text-align:center; box-shadow:inset 0 0 60px rgba(0,0,0,.6), 0 30px 80px -20px rgba(0,0,0,.8)}
.orbit .tbl small{font:500 .66rem var(--f-mono); letter-spacing:.18em; color:var(--muted); display:block}
.orbit .tbl b{font:italic 500 1.8rem var(--f-display); color:var(--gold); display:block; margin-block:4px}
.orbit .flame{width:8px; height:14px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:linear-gradient(var(--gold), var(--rose)); margin:0 auto 8px; box-shadow:0 0 18px 6px rgba(228,198,143,.55); animation:flicker 1.6s ease-in-out infinite alternate}
@keyframes flicker{0%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(.92,1.08) rotate(2deg)} 100%{transform:scale(1.04,.95) rotate(-1deg)}}
.orbit .ring{position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(246,239,230,.12); animation:spin 60s linear infinite}
@property --a{syntax:"<angle>"; initial-value:0deg; inherits:true}
.orbit .seats{position:absolute; inset:0; animation:orbitA 70s linear infinite}
@keyframes orbitA{to{--a:360deg}}
.orbit .seat{position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(calc(var(--i) * 60deg + var(--a))) translateY(calc(-1 * var(--r, 180px))) rotate(calc(-1 * (var(--i) * 60deg + var(--a))))}
.orbit .seat .chipx{position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font:600 .82rem/1.25 var(--f-body); padding:9px 14px; border-radius:14px; background:rgba(26,19,35,.92); border:1px solid var(--line-2); backdrop-filter:blur(8px); box-shadow:0 12px 30px rgba(0,0,0,.4)}
.orbit .seat .chipx small{display:block; font:400 .66rem var(--f-mono); color:var(--muted); letter-spacing:.04em}
.orbit .seat.you .chipx{background:linear-gradient(135deg,#F1DAAE,var(--gold)); color:var(--on-gold); border-color:transparent}
.orbit .seat.you .chipx small{color:#5a4318}
.guest-line{font-family:var(--f-display); font-size:clamp(1.7rem, 3.4vw, 2.7rem); line-height:1.2; text-wrap:balance}
.guest-line mark{background:none; color:var(--gold); font-style:italic}
.guest-note{font:400 .78rem var(--f-mono); color:var(--faint)}
.feel{display:grid; gap:22px; margin-top:8px}
.feel div{display:grid; grid-template-columns:28px 1fr; gap:14px}
.feel div::before{content:"✦"; color:var(--gold); line-height:1.6}
.feel h3{font-family:var(--f-body); font-weight:700; font-size:1.02rem; margin-bottom:2px}
.feel p{color:var(--muted); font-size:.95rem}
@media (max-width:900px){ .orbit-grid{grid-template-columns:1fr} .orbit{max-width:420px} }
@media (max-width:480px){ .orbit .seat .chipx{font-size:.7rem; padding:6px 9px} .orbit .seat .chipx small{display:none} }
.quiz-shell{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.quiz-side{display:grid; gap:20px; position:sticky; top:110px}
.quiz-side ul{margin:0; padding:0; list-style:none; display:grid; gap:12px; color:var(--muted)}
.quiz-side li{display:flex; gap:12px}
.quiz-side li::before{content:"✦"; color:var(--gold)}
@media (max-width:900px){ .quiz-shell{grid-template-columns:1fr; gap:32px} .quiz-side{position:static} }
.card{position:relative; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line-2); border-radius:26px; padding:clamp(22px, 4vw, 44px); min-width:0; box-shadow:0 40px 100px -40px rgba(106,59,158,.6)}
.card::before{content:""; position:absolute; inset:-1px; border-radius:27px; padding:1px; background:linear-gradient(135deg, rgba(228,198,143,.6), transparent 40%, transparent 60%, rgba(255,124,135,.5)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.card .pane{animation:paneIn .5s var(--ease) both}
@keyframes paneIn{from{opacity:.0; transform:translateX(24px)} to{opacity:1; transform:none}}
.progress{display:flex; align-items:center; gap:14px; margin-bottom:28px; font:400 .76rem var(--f-mono); color:var(--muted)}
.bar{flex:1; height:4px; background:var(--line); border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg, var(--gold), var(--rose)); border-radius:999px; transition:width .5s var(--ease)}
.q-title{font-family:var(--f-display); font-size:clamp(1.6rem, 3vw, 2.25rem); line-height:1.1; margin-bottom:26px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.opt{text-align:left; font:500 1rem/1.4 var(--f-body); color:var(--ink); background:rgba(246,239,230,.03); border:1px solid var(--line-2); border-radius:14px; padding:18px 20px; cursor:pointer; transition:border-color .25s, background .25s, transform .25s var(--ease)}
.opt:hover{border-color:var(--gold); background:rgba(228,198,143,.07); transform:translateY(-2px)}
.opt[aria-pressed="true"]{border-color:var(--gold); background:rgba(228,198,143,.16)}
@media (max-width:620px){ .opts{grid-template-columns:1fr} }
.quiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px}
.linkbtn{background:none; border:0; color:var(--muted); font:500 .95rem var(--f-body); cursor:pointer; padding:8px 0}
.linkbtn:hover{color:var(--ink)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:grid; gap:7px; min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem; font-weight:600; color:#E2D8E3}
.field input,.field select{font:400 1rem var(--f-body); color:var(--ink); background:rgba(246,239,230,.04); border:1px solid var(--line-2); border-radius:12px; padding:14px 15px; width:100%; transition:border-color .2s}
.field input::placeholder{color:var(--faint)}
.field select option{background:var(--surface)}
.field input:focus,.field select:focus{outline:none; border-color:var(--gold)}
.field .hint{font-size:.8rem; color:var(--faint)}
.err{font-size:.84rem; color:var(--rose)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted); grid-column:1/-1}
.check input{margin-top:5px; accent-color:var(--gold); width:18px; height:18px; flex:none}
@media (max-width:620px){ .form{grid-template-columns:1fr} }
.vibe-result{display:grid; gap:20px}
.vibe-badge{display:flex; align-items:center; gap:20px}
.disc{flex:none; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; font:italic 500 2.2rem var(--f-display); color:var(--on-gold); background:conic-gradient(from 0deg, #F1DAAE, var(--gold), var(--rose), var(--gold), #F1DAAE); animation:spin 8s linear infinite; position:relative}
.disc span{animation:spin 8s linear infinite reverse}
.vibe-name{font-family:var(--f-display); font-size:clamp(2rem, 4vw, 3rem); line-height:1}
.ticket{position:relative; border:1px dashed var(--line-2); border-radius:16px; padding:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; font:400 .8rem var(--f-mono); background:rgba(246,239,230,.02)}
.ticket div{display:grid; gap:3px; min-width:0}
.ticket span{color:var(--faint); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem}
.ticket b{font-weight:500; overflow-wrap:anywhere}
@media (max-width:520px){ .ticket{grid-template-columns:1fr 1fr} }
.notice{font-size:.92rem; padding:16px 18px; border-radius:12px; background:rgba(228,198,143,.1); border:1px solid rgba(228,198,143,.25)}
.notice pre{white-space:pre-wrap; font:400 .76rem var(--f-mono); margin:10px 0 0; max-height:160px; overflow:auto; color:var(--muted)}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:26px}
.confetti i{position:absolute; top:-10px; width:7px; height:12px; border-radius:2px; animation:fall 2.4s var(--ease) forwards}
@keyframes fall{to{transform:translateY(560px) rotate(540deg); opacity:0}}
.cities{display:flex; flex-wrap:wrap; gap:12px}
.city{display:inline-flex; align-items:center; gap:12px; padding:14px 20px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:500 1.25rem var(--f-display); cursor:pointer; transition:all .3s var(--ease)}
.city small{font:500 .64rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.city.first small{color:var(--gold)}
.city:hover{border-color:var(--gold); transform:translateY(-3px)}
.city[aria-pressed="true"]{background:var(--gold); color:var(--on-gold); border-color:var(--gold)}
.city[aria-pressed="true"] small{color:#5a4318}
.safe{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:22px; overflow:hidden}
.safe div{display:grid; gap:12px; align-content:start; padding:30px 26px; border-right:1px solid var(--line); background:var(--bg-2)}
.safe div:last-child{border-right:0}
.safe svg{width:28px; height:28px; color:var(--gold)}
.safe h3{font-size:1.35rem}
.safe p{color:var(--muted); font-size:.95rem}
@media (max-width:940px){ .safe{grid-template-columns:1fr 1fr} .safe div:nth-child(2){border-right:0} .safe div:nth-child(-n+2){border-bottom:1px solid var(--line)} }
@media (max-width:540px){ .safe{grid-template-columns:1fr} .safe div{border-right:0; border-bottom:1px solid var(--line)} .safe div:last-child{border-bottom:0} }
@property --ang{syntax:"<angle>"; initial-value:0deg; inherits:false}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:34px 30px; display:grid; gap:20px; grid-template-rows:auto auto 1fr auto; min-width:0; transition:transform .5s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.pop{background:linear-gradient(170deg, #2B1C3D, #191120 70%); border-color:transparent}
.plan.pop::before{content:""; position:absolute; inset:-1.5px; border-radius:25.5px; padding:1.5px; background:conic-gradient(from var(--ang), var(--gold), var(--rose), var(--plum), var(--gold)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:angle 6s linear infinite; pointer-events:none}
@keyframes angle{to{--ang:360deg}}
.plan .badge{position:absolute; top:-13px; left:30px; font:500 .68rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:var(--rose); color:#2A0A10}
.pname{font:500 .76rem var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.price{font-family:var(--f-display); font-size:3.4rem; line-height:1; font-variant-numeric:tabular-nums}
.price small{font:500 .95rem var(--f-body); color:var(--muted)}
.plan ul{margin:0; padding:0; list-style:none; display:grid; gap:11px; align-content:start; font-size:.96rem; color:var(--muted)}
.plan li{display:flex; gap:10px}
.plan li::before{content:"✦"; color:var(--gold); font-size:.8rem; padding-top:3px}
.plan .btn{justify-content:center}
.price-note{margin-top:26px; font-size:.9rem; color:var(--faint)}
@media (max-width:940px){ .plans{grid-template-columns:1fr; gap:26px} }
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px}
.faq details{border-bottom:1px solid var(--line); padding:22px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; font-family:var(--f-display); font-size:1.4rem; list-style:none; display:flex; justify-content:space-between; gap:16px; transition:color .2s}
.faq summary:hover{color:var(--gold)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:300 1.6rem/1 var(--f-body); color:var(--gold); transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px; color:var(--muted); max-width:62ch; animation:fadeUp .4s var(--ease)}
@media (max-width:860px){ .faq{grid-template-columns:1fr; gap:28px} }
.closing{position:relative; overflow:hidden; isolation:isolate; border-top:1px solid var(--line)}
.closing .bgv{position:absolute; inset:0; z-index:-2; background:radial-gradient(50% 70% at 70% 50%, rgba(106,59,158,.5), transparent), var(--bg-2)}
.closing .bgv video{width:100%; height:100%; object-fit:cover; display:block}
.closing::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,9,17,.92) 0%, rgba(12,9,17,.6) 55%, rgba(12,9,17,.35))}
.closing .wrap{display:grid; gap:30px; padding-block:clamp(96px, 14vw, 170px)}
.closing h2{font-size:clamp(2.6rem, 6.5vw, 5.4rem); max-width:14ch}
footer{background:var(--bg); color:var(--faint); font-size:.88rem; border-top:1px solid var(--line)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-block:30px}
footer nav{display:flex; flex-wrap:wrap; gap:22px}
footer a{text-decoration:none} footer a:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important; transition:none!important}
.hero-media video,.vcard video,.closing video{display:none}
}
.paybox{display:grid; gap:14px; padding:22px; border-radius:18px; background:linear-gradient(160deg, rgba(228,198,143,.12), rgba(106,59,158,.14)); border:1px solid rgba(228,198,143,.3)}
.paybox .eyebrow::before{display:none}
.pay-title{font-family:var(--f-display); font-size:1.5rem; line-height:1.15}
.pay-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pay-opt{display:grid; gap:2px; text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--line-2); background:rgba(12,9,17,.4); color:var(--ink); font:500 .95rem var(--f-body); cursor:pointer; transition:border-color .2s, background .2s}
.pay-opt .pp{font:500 1.6rem/1.1 var(--f-display); color:var(--gold)}
.pay-opt small{color:var(--muted); font-size:.78rem}
.pay-opt[aria-checked="true"]{border-color:var(--gold); background:rgba(228,198,143,.14)}
.paybox .btn{justify-content:center}
.pay-note{font-size:.82rem; color:var(--muted)}
.pay-note.err{color:var(--rose)}
.muted{color:var(--muted)}
@media (max-width:480px){ .pay-opts{grid-template-columns:1fr} }