/* Approved After Hours composition: neon-purple/blue, warm cocktails, acid-lime details. */
:root { --cinema-ink:#0e0a1b; --cinema-purple:#211333; --cinema-blue:#172750; --cinema-lime:#d9f27e; }
.nav { background:linear-gradient(90deg,#110c20e8,#151b39de); border-bottom-color:#f7f0ff20; backdrop-filter:blur(14px); }
.brand { gap:12px; letter-spacing:.1em; }
.brand-mark { overflow:hidden; border:0; border-radius:10px; width:38px; height:38px; box-shadow:0 0 22px #7357ff55; }
.brand-mark img { display:block; width:100%; height:100%; object-fit:cover; }
.nav-cta { color:var(--cinema-lime); border-color:#d9f27e88; }
.cinematic-hero { isolation:isolate; min-height:min(830px,100svh); padding:132px 0 38px; overflow:hidden; background:radial-gradient(ellipse at 77% 48%,#412246 0,#272044 23%,transparent 55%),radial-gradient(ellipse at 47% 85%,#22254f88 0,transparent 42%),linear-gradient(112deg,#100b20 0%,#251433 47%,#172448 100%); }
.cinematic-hero:before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#100b20 0%,#100b20ec 27%,#100b2055 53%,transparent 76%),linear-gradient(0deg,#100b20 0%,transparent 22%); }
.cinematic-hero .grain { opacity:.07; }
.cinematic-layout { position:relative; min-height:625px; display:grid; grid-template-columns:minmax(380px,.88fr) minmax(550px,1.12fr); align-items:center; gap:2%; }
.cinematic-copy { position:relative; z-index:4; max-width:590px; padding:16px 0 36px; }
.cinematic-copy .eyebrow { color:#d9f27e; margin-bottom:21px; }
.cinematic-copy h1 { max-width:580px; margin:0 0 22px; color:#fff8f0; font:600 clamp(54px,6vw,88px)/.99 var(--sans); letter-spacing:-.065em; }
.cinematic-copy h1 em { display:block; margin-top:8px; color:#d9f27e; font:italic 500 .82em/1.02 var(--serif); letter-spacing:-.055em; }
.cinematic-deck { max-width:465px; color:#e0d9e9; font-size:16px; line-height:1.72; margin:0 0 24px; }
.cinematic-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.cinematic-primary { min-height:56px; padding:0 23px; border-radius:4px; background:var(--cinema-lime); color:#141126; font-size:13px; font-weight:700; box-shadow:0 7px 30px #d9f27e26; }
.cinematic-film-link { min-height:44px; display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid #f7efff88; color:#fff7f2; font-size:13px; }
.cinematic-film-link:after { content:"↓"; color:var(--cinema-lime); font-size:17px; }
.cinematic-store-badges { display:flex; align-items:center; gap:11px; margin-top:21px; }
.cinematic-store-badges a { display:inline-flex; border-radius:7px; transition:transform .2s; }
.cinematic-store-badges a:hover { transform:translateY(-2px); }
.cinematic-store-badges img { width:auto; height:38px; display:block; }
.cinematic-note { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:#c9c3d1; font-size:11px; }
.cinematic-note .lime-dot { background:var(--cinema-lime); }
.cinematic-tabs { margin-top:15px; }
.cinematic-steps { display:flex; gap:22px; align-items:center; margin-top:25px; padding-top:17px; border-top:1px solid #eee8ff2b; color:#dbd5e4; font-size:11px; }
.cinematic-steps span { display:flex; align-items:center; gap:8px; }
.cinematic-steps b { color:var(--cinema-lime); font:600 12px var(--cond); }
.cinematic-visual { position:relative; z-index:2; height:570px; min-width:0; display:flex; align-items:center; justify-content:flex-end; isolation:isolate; }
.cinematic-visual:before { content:""; position:absolute; z-index:-2; inset:6% -11% 4% -8%; border-radius:50%; background:radial-gradient(ellipse,#b4547133 0%,#5443a044 28%,#2a579a20 56%,transparent 73%); filter:blur(24px); }
.cinematic-visual:after { content:none; }
.cinematic-glass { position:absolute; isolation:isolate; inset:0 0 0 auto; width:76%; height:100%; display:grid; place-items:center; }
.cinematic-glass:before { content:none; }
.cinematic-glass img { position:relative; z-index:0; width:auto; height:100%; max-width:100%; max-height:100%; aspect-ratio:1 / 1; object-fit:contain; object-position:center; border:0; border-radius:0; filter:saturate(1.04) contrast(1.03) drop-shadow(0 22px 33px #05030c80); box-shadow:none; mask-image:none; -webkit-mask-image:none; }
.cinematic-phone { position:absolute; z-index:3; left:4%; top:50%; width:clamp(176px,17vw,222px); padding:7px; transform:translateY(-48%) rotate(-5deg); border:1px solid #e1d7ff88; border-radius:31px; background:linear-gradient(145deg,#28223c,#080a13 46%,#252036); box-shadow:0 28px 80px #06030eaa,0 0 30px #8b69ff3d,inset 0 0 0 1px #fff2; }
.cinematic-phone:before { content:""; position:absolute; z-index:2; top:7px; left:50%; transform:translateX(-50%); width:31%; height:15px; border-radius:0 0 10px 10px; background:#090b13; }
.cinematic-phone img { width:100%; height:auto; max-height:510px; display:block; border-radius:24px; object-fit:contain; }
.cinematic-phone-caption { position:absolute; z-index:4; top:7%; left:2%; padding:9px 12px; border:1px solid #eee8ff25; border-radius:2px; background:#151129dd; color:#f8f2fc; font-size:10px; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 8px 25px #09061155; }
.cinematic-phone-caption b { color:var(--cinema-lime); margin-right:7px; }
.cinematic-drink-caption { position:absolute; z-index:2; bottom:6%; right:0; color:#e3deea; font-size:10px; letter-spacing:.17em; text-transform:uppercase; }
.cinematic-film { position:relative; padding:82px 0; overflow:hidden; background:linear-gradient(125deg,#130e25,#19142c 50%,#101a33); border-top:1px solid #f4eaff1b; }
.cinematic-film:before { content:""; position:absolute; width:55vw; height:25vw; left:45%; top:0; border-radius:50%; background:#534caa14; filter:blur(48px); pointer-events:none; }
.cinematic-film-grid { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; gap:8%; align-items:center; }
.cinematic-film-copy { max-width:480px; }
.cinematic-film-copy h2 { color:#fff7f0; font:500 clamp(38px,4.3vw,64px)/1.04 var(--serif); letter-spacing:-.045em; margin:0 0 18px; }
.cinematic-film-copy h2 em { color:var(--cinema-lime); }
.cinematic-film-copy>p:last-child { color:#d0c8db; line-height:1.75; font-size:15px; }
.cinematic-film-stage { position:relative; min-height:310px; display:grid; grid-template-columns:1fr .73fr; align-items:center; gap:20px; padding:22px 28px; border:1px solid #e1d5ff35; background:linear-gradient(135deg,#33224a99,#142344bb); box-shadow:0 28px 80px #05030a55; }
.cinematic-film-stage:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,#e879a20d,transparent 52%,#57b9ff0c); }
.cinematic-film-image { position:relative; z-index:1; width:100%; max-height:360px; object-fit:contain; border-radius:9px; box-shadow:0 18px 48px #05030a80; }
.cinematic-film-details { position:relative; z-index:1; }
.cinematic-film-details .eyebrow { color:var(--cinema-lime); margin-bottom:12px; }
.cinematic-film-details h3 { font:500 26px/1.1 var(--serif); margin:0 0 12px; }
.cinematic-film-details p { color:#d1c9dc; font-size:13px; line-height:1.65; margin:0; }
.footer-neon-logo { display:block; width:66px; height:66px; object-fit:cover; border-radius:12px; box-shadow:0 0 24px #713cff46; }
@media(max-width:1100px) and (min-width:681px) {
 .cinematic-layout { grid-template-columns:minmax(310px,.9fr) minmax(380px,1.1fr); gap:0; }
 .cinematic-visual { height:500px; }
 .cinematic-phone { width:clamp(150px,19vw,195px); left:0; }
 .cinematic-copy h1 { font-size:clamp(52px,6vw,70px); }
 .cinematic-steps { gap:12px; font-size:10px; }
 .cinematic-store-badges img { height:34px; }
}
@media(max-width:680px) {
 .nav { top:0; height:68px; background:#110d20ef; }
 .brand { font-size:14px; gap:8px; }
 .brand-mark { width:34px; height:34px; }
 .nav-actions { gap:8px; }
 .nav-cta { min-height:40px; font-size:8px; }
 .cinematic-hero { min-height:0; padding:90px 0 22px; background:radial-gradient(ellipse at 76% 70%,#34235499,transparent 55%),linear-gradient(145deg,#100b20,#21152f 55%,#172448); }
 .cinematic-hero:before { background:linear-gradient(180deg,#100b2033 0%,transparent 52%,#100b2060 100%); }
 .cinematic-layout { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; }
 .cinematic-copy { padding:6px 0 0; }
 .cinematic-copy .eyebrow { font-size:8px; margin-bottom:11px; }
 .cinematic-copy h1 { font-size:clamp(41px,11vw,55px); line-height:.97; margin-bottom:13px; }
 .cinematic-copy h1 em { margin-top:4px; font-size:.78em; }
 .cinematic-deck { max-width:36em; font-size:13px; line-height:1.52; margin-bottom:14px; }
 .cinematic-actions { gap:15px; }
 .cinematic-primary { min-height:48px; padding:0 15px; font-size:11px; }
 .cinematic-film-link { min-height:42px; font-size:11px; }
 .cinematic-store-badges { gap:8px; margin-top:12px; }
 .cinematic-store-badges img { height:30px; }
 .cinematic-note { margin-top:8px; font-size:9px; }
 .cinematic-tabs { margin-top:9px; }
 .cinematic-steps { display:none; }
 .cinematic-visual { width:100%; height:clamp(250px,72vw,315px); margin-top:8px; justify-content:flex-end; }
 .cinematic-visual:before { inset:4% -12% 1% -12%; filter:blur(18px); }
 .cinematic-glass { width:74%; inset:0 0 0 auto; }
 .cinematic-glass img { mask-image:none; -webkit-mask-image:none; }
 .cinematic-phone { width:clamp(112px,34vw,140px); left:0; top:48%; padding:4px; border-radius:21px; transform:translateY(-47%) rotate(-4deg); box-shadow:0 14px 34px #06030e99,0 0 21px #8b69ff30; }
 .cinematic-phone:before { top:4px; height:9px; }
 .cinematic-phone img { border-radius:17px; max-height:unset; }
 .cinematic-phone-caption { top:1%; left:0; padding:6px 8px; font-size:8px; }
 .cinematic-drink-caption { right:1%; bottom:1%; font-size:7px; }
 .cinematic-film { padding:58px 0; }
 .cinematic-film-grid { grid-template-columns:1fr; gap:25px; }
 .cinematic-film-copy h2 { font-size:43px; }
 .cinematic-film-copy>p:last-child { font-size:13px; margin:0; }
 .cinematic-film-stage { min-height:200px; grid-template-columns:1fr .9fr; gap:12px; padding:14px; }
 .cinematic-film-details h3 { font-size:20px; }
 .cinematic-film-details p { font-size:11px; }
 .cinematic-film-image { max-height:260px; }
}
@media(max-width:375px) {
 .cinematic-copy h1 { font-size:40px; }
 .cinematic-deck { font-size:12px; }
 .cinematic-primary { padding:0 12px; }
 .cinematic-actions { gap:11px; }
 .cinematic-visual { height:254px; }
 .cinematic-phone { width:108px; }
}
/* Voiced film: native controls, no automatic playback, full dedicated frame. */
.cinematic-film-player { min-width:0; width:100%; }
.cinematic-film-player video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border:1px solid #e1d5ff35; border-radius:14px; background:#181126; box-shadow:0 24px 64px #05030a44; }
.cinematic-film-copy .film-note { color:#c9c3d1; font-size:12px; line-height:1.65; margin:18px 0 22px; }
.film-transcript { border:0; padding:14px 0 0; color:#d9d1e4; }
.film-transcript summary { font-size:12px; min-height:44px; }
.film-transcript p { font-size:13px; line-height:1.7; }
@media(max-width:680px) {
 .cinematic-film-player { width:min(100%,340px); margin-inline:auto; }
 .cinematic-film-player video { aspect-ratio:9/16; }
}
@media(prefers-reduced-motion:reduce) { .cinematic-store-badges a { transition:none; } }