:root {
  --bg: #03030a;
  --bg2: #070912;
  --panel: rgba(12, 16, 30, 0.62);
  --panel-strong: rgba(16, 22, 41, 0.88);
  --panel-deep: rgba(2, 4, 10, 0.72);
  --border: rgba(190, 214, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.30);
  --text: #f8fbff;
  --muted: #a8b4d6;
  --muted2: #7783a3;
  --accent: #7dd3fc;
  --accent2: #f5c86a;
  --weekly-accent: #f6c65b;
  --success: #4ade80;
  --danger: #fb7185;
  --warning: #facc15;
  --shadow: 0 40px 130px rgba(0, 0, 0, .68);
  --radius: 32px;
  --font: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --cursor-x: 50vw;
  --cursor-y: 20vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  background: #03030a;
  overflow-x: hidden;
  letter-spacing: -.01em;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }

.cinema-bg,
.noise,
.grid-floor,
.spotlight,
.orb,
.film-lines { position: fixed; inset: 0; pointer-events: none; }
.cinema-bg { z-index: -10; overflow: hidden; background:
  radial-gradient(circle at 50% -10%, rgba(125, 211, 252, .14), transparent 38rem),
  linear-gradient(135deg, #03030a 0%, #060916 38%, #090914 70%, #020308 100%);
}
.noise { z-index: -7; opacity: .105; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.grid-floor { z-index: -8; background:
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 15%, black 0%, transparent 70%);
  animation: floorDrift 18s linear infinite;
}
@keyframes floorDrift { to { transform: translate3d(-72px, -72px, 0); } }
.spotlight { z-index: -6; background: radial-gradient(620px circle at var(--cursor-x) var(--cursor-y), rgba(125, 211, 252, .13), transparent 42%); transition: opacity .35s ease; }
.orb { width: 46rem; height: 46rem; border-radius: 50%; filter: blur(92px); opacity: .25; z-index: -9; animation: orbFloat 16s ease-in-out infinite alternate; }
.orb-blue { background: #0ea5e9; left: -18rem; top: 5rem; }
.orb-gold { background: #f5c86a; right: -20rem; top: -8rem; animation-delay: -7s; opacity: .23; }
.orb-purple { background: #a855f7; left: 42%; bottom: -26rem; animation-delay: -11s; opacity: .16; }
@keyframes orbFloat { to { transform: translate3d(5rem, 3rem, 0) scale(1.14); } }
.film-lines { z-index: -5; background:
  linear-gradient(90deg, rgba(255,255,255,.08), transparent 1px) 0 0 / 14vw 100%,
  linear-gradient(rgba(255,255,255,.035), transparent 1px) 0 0 / 100% 28px;
  opacity: .25;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 72%, transparent);
}

.progress-bar { position: fixed; inset: 0 auto auto 0; width: 0%; height: 4px; z-index: 9999; background: linear-gradient(90deg, #7dd3fc, #fff, #f5c86a, #a855f7); box-shadow: 0 0 28px rgba(125,211,252,.75); transition: width .25s ease, opacity .25s ease; }

.glass { border: 1px solid var(--border); background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)), var(--panel); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); }
.elite-border { position: relative; isolation: isolate; }
.elite-border::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(125,211,252,.10), rgba(245,200,106,.28), rgba(255,255,255,.10)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .75; z-index: -1; }

[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1); }
[data-reveal].revealed { opacity: 1; transform: translateY(0) scale(1); }

.hero { padding: 22px clamp(14px, 4vw, 72px) 54px; }
.topbar { max-width: 1360px; margin: 0 auto; padding: 13px 14px; border-radius: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: 14px; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; min-width: 235px; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, #7dd3fc, #ffffff 46%, #1d4ed8); box-shadow: 0 18px 52px rgba(125, 211, 252, .35), inset 0 1px 0 rgba(255,255,255,.65); color: #020617; font-weight: 1000; letter-spacing: -.08em; transform: perspective(600px) rotateX(8deg) rotateY(-8deg); }
.brand-mark span { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.brand strong { display: block; font-weight: 900; letter-spacing: -.04em; }
.brand small { display: block; color: var(--muted); margin-top: 1px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { text-decoration: none; color: var(--muted); padding: 11px 14px; border-radius: 999px; font-weight: 650; transition: .25s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.session-pill { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 999px; padding: 7px 9px 7px 13px; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 18px rgba(251,113,133,.8); }
.session-pill.online .dot { background: var(--success); box-shadow: 0 0 18px rgba(74,222,128,.85); }
.tiny-btn { border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.08); padding: 6px 10px; }

.hero-stage { max-width: 1360px; margin: 76px auto 0; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr); gap: 48px; align-items: center; }
.hero-badge-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.eyebrow, .theme-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 900; }
.imax-badge { color: #02030a; background: linear-gradient(135deg, #fff, #f5c86a); border-radius: 999px; padding: 8px 12px; font-weight: 950; letter-spacing: .1em; font-size: .72rem; box-shadow: 0 16px 50px rgba(245,200,106,.2); }
h1 { font-size: clamp(3.4rem, 7.3vw, 7.8rem); line-height: .88; margin: 0; letter-spacing: -.085em; max-width: 980px; text-wrap: balance; }
h1 span { background: linear-gradient(180deg, #fff 0%, #dbeafe 48%, #9bdcff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 45px rgba(125,211,252,.18)); }
.hero-copy p { color: var(--muted); font-size: clamp(1.03rem, 1.5vw, 1.22rem); line-height: 1.75; max-width: 720px; margin: 24px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { border: 1px solid var(--border); border-radius: 18px; color: var(--text); background: rgba(255,255,255,.065); padding: 14px 18px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; letter-spacing: -.02em; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: -60% auto -60% -80%; width: 55%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: left .6s ease; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.btn:hover::after { left: 130%; }
.btn.primary { color: #03111c; background: linear-gradient(135deg, #e9fbff 0%, #9be8ff 48%, #f5c86a 100%); box-shadow: 0 20px 70px rgba(125,211,252,.26); }
.btn.primary.mega { min-width: 205px; }
.btn.secondary { color: #081019; background: linear-gradient(135deg, #f7e5a5, #f5c86a); box-shadow: 0 18px 55px rgba(245,200,106,.18); }
.btn.ghost { background: rgba(255,255,255,.055); color: var(--text); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; max-width: 720px; }
.hero-metrics div { min-height: 82px; padding: 16px 17px; border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hero-metrics b { display: block; font-size: 1.15rem; font-weight: 950; color: #fff; }
.hero-metrics span { display: block; color: var(--muted); margin-top: 6px; font-size: .9rem; }

.cinema-preview { min-height: 510px; border-radius: 38px; padding: 28px; position: relative; overflow: hidden; transform-style: preserve-3d; }
.cinema-preview::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 28%), radial-gradient(circle at 82% 10%, rgba(245,200,106,.18), transparent 35%); pointer-events: none; }
.preview-glow-ring { position: absolute; inset: 24px; border-radius: 34px; background: conic-gradient(from 0deg, rgba(125,211,252,.0), rgba(125,211,252,.45), rgba(245,200,106,.35), rgba(168,85,247,.35), rgba(125,211,252,.0)); filter: blur(26px); opacity: .55; animation: spinGlow 8s linear infinite; }
@keyframes spinGlow { to { transform: rotate(360deg); } }
.preview-topline { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; font-weight: 950; margin-bottom: 20px; }
.preview-topline span { font-size: 1.05rem; }
.preview-topline i { font-style: normal; color: #020617; background: linear-gradient(135deg, #fff, #bdeeff); border-radius: 999px; padding: 10px 14px; box-shadow: 0 10px 28px rgba(125,211,252,.22); }
.preview-caption { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); margin-top: 18px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.mock-app { position: relative; z-index: 1; display: grid; grid-template-columns: 86px 1fr; gap: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 70px rgba(0,0,0,.4); overflow: hidden; padding: 16px; min-height: 245px; }
.mock-hero { min-height: 370px; transform: perspective(900px) rotateX(3deg) rotateY(-5deg); }
.mock-app::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--theme-accent, var(--accent)) 55%, transparent), transparent 34%); opacity: .35; animation: panelBreath 5s ease-in-out infinite alternate; }
@keyframes panelBreath { to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: .52; } }
.mock-sidebar, .mock-main { position: relative; z-index: 1; border-radius: 24px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.13); padding: 12px; }
.mock-sidebar { display: grid; align-content: start; gap: 13px; }
.mock-sidebar span { display: block; height: 31px; border-radius: 12px; background: rgba(255,255,255,.12); }
.mock-sidebar span:first-child { background: color-mix(in srgb, var(--theme-accent, var(--accent)) 70%, white); box-shadow: 0 0 22px color-mix(in srgb, var(--theme-accent, var(--accent)) 45%, transparent); }
.mock-main { padding: 18px; }
.mock-window-dots { display: flex; gap: 8px; margin-bottom: 18px; }
.mock-window-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.26); }
.mock-window-dots i:first-child { background: var(--theme-accent, var(--accent)); box-shadow: 0 0 18px var(--theme-accent, var(--accent)); }
.mock-title { width: 58%; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); margin-bottom: 20px; }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 17px; }
.mock-grid span { min-height: 84px; border-radius: 16px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.08); }
.mock-grid span:nth-child(2) { background: color-mix(in srgb, var(--theme-accent, var(--accent)) 34%, rgba(255,255,255,.08)); }
.mock-line { width: 46%; height: 12px; border-radius: 999px; background: rgba(255,255,255,.13); margin-top: 10px; }
.mock-line.wide { width: 78%; }

.section { max-width: 1360px; margin: 0 auto; padding: 64px clamp(14px, 3vw, 28px); }
.section-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 22px; }
.section-number { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; color: #03111c; background: linear-gradient(135deg, #fff, #7dd3fc); font-weight: 1000; box-shadow: 0 16px 50px rgba(125,211,252,.18); }
.section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: .95; letter-spacing: -.07em; }
.section-head p { margin: 10px 0 0; color: var(--muted); line-height: 1.7; max-width: 850px; }

.weekly-panel { border-radius: 40px; padding: 28px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; overflow: hidden; position: relative; min-height: 560px; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--weekly-accent) 18%, transparent), transparent 34rem), linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); }
.weekly-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 44%, transparent 56%); transform: translateX(-120%); animation: eventSweep 7s ease-in-out infinite; }
@keyframes eventSweep { 0%, 45% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
.weekly-copy-card { position: relative; z-index: 1; padding: 28px; border-radius: 32px; background: linear-gradient(145deg, rgba(0,0,0,.34), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; justify-content: center; min-height: 500px; }
.weekly-kicker { color: var(--weekly-accent); }
.weekly-info h3 { margin: 18px 0 0; display: grid; gap: 10px; }
.weekly-info h3 span { color: var(--muted); font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; }
.weekly-info h3 b { font-size: clamp(3rem, 5.4vw, 6.2rem); line-height: .86; letter-spacing: -.08em; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--weekly-accent) 72%, #fff)); color: transparent; -webkit-background-clip: text; background-clip: text; }
.weekly-info p { color: var(--muted); line-height: 1.75; font-size: 1.02rem; }
.weekly-countdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 24px; }
.weekly-countdown div, .weekly-countdown span { border-radius: 22px; border: 1px solid color-mix(in srgb, var(--weekly-accent) 45%, rgba(255,255,255,.12)); background: rgba(255,255,255,.06); padding: 15px 17px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.weekly-countdown small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.weekly-countdown strong { font-size: 1.18rem; }
.weekly-countdown span { color: #06070b; font-weight: 1000; font-size: 1.15rem; background: linear-gradient(135deg, #fff, var(--weekly-accent)); }
.weekly-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.weekly-meta span, .weekly-rotation-preview span { border-radius: 999px; border: 1px solid rgba(255,255,255,.13); color: var(--muted); background: rgba(255,255,255,.06); padding: 9px 12px; font-size: .88rem; }
.weekly-rotation-preview { margin-top: 18px; display: grid; gap: 12px; }
.weekly-rotation-preview span { width: fit-content; }
.weekly-rotation-preview b { color: var(--weekly-accent); }
.rotation-dots { display: flex; gap: 9px; }
.rotation-dots i { width: 38px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.14); }
.rotation-dots i.active { background: var(--weekly-accent); box-shadow: 0 0 24px color-mix(in srgb, var(--weekly-accent) 70%, transparent); }
.weekly-showcase-zone { position: relative; z-index: 1; display: flex; align-items: stretch; }
.weekly-showcase-card { width: 100%; border-radius: 34px; padding: 24px; position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent) 20%, rgba(255,255,255,.07)), rgba(12,16,28,.74)); border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, rgba(255,255,255,.14)); box-shadow: 0 35px 120px rgba(0,0,0,.55), 0 0 75px color-mix(in srgb, var(--theme-accent) 19%, transparent); display: flex; flex-direction: column; justify-content: space-between; }
.weekly-showcase-card::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.15), transparent 24%), radial-gradient(circle at 74% 5%, color-mix(in srgb, var(--theme-accent) 35%, transparent), transparent 35%); pointer-events: none; }
.weekly-ribbon-row, .theme-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.weekly-price-badge, .theme-price { color: #020617; font-weight: 1000; border-radius: 999px; padding: 10px 14px; background: linear-gradient(135deg, #fff, var(--theme-accent)); box-shadow: 0 12px 34px color-mix(in srgb, var(--theme-accent) 28%, transparent); }
.theme-category { color: color-mix(in srgb, var(--theme-accent, var(--accent)) 80%, #fff); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 1000; }
.weekly-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.weekly-badges span, .theme-access { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 999px; padding: 8px 11px; color: var(--muted); font-weight: 650; font-size: .83rem; }
.weekly-showcase-card .theme-preview { position: relative; z-index: 1; margin: 8px 0 20px; }
.weekly-showcase-copy { position: relative; z-index: 1; }
.weekly-showcase-copy h3, .theme-card h3 { margin: 0; font-size: 1.8rem; letter-spacing: -.06em; }
.weekly-showcase-copy p, .theme-card p { color: var(--muted); line-height: 1.72; }
.weekly-feature-pills, .feature-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.weekly-feature-pills span, .feature-pills span { border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: 8px 10px; color: var(--muted); background: rgba(255,255,255,.055); font-size: .84rem; }
.theme-owned { display: inline-flex; color: var(--success); font-weight: 950; margin: 8px 0; }
.theme-expired { display: inline-flex; color: var(--danger); font-weight: 900; margin: 8px 0; }
.theme-event-note { color: var(--weekly-accent); font-weight: 800; display: inline-flex; margin: 8px 0; }
.theme-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }

.store-panel, .account-shell, .payment-shell { border-radius: 32px; padding: 18px; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.search-box { min-height: 56px; display: flex; align-items: center; gap: 10px; border-radius: 19px; border: 1px solid var(--border); background: rgba(255,255,255,.055); padding: 0 16px; }
.search-box span { color: var(--accent); font-weight: 1000; }
input, textarea { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(0,0,0,.22); color: var(--text); padding: 14px 15px; outline: none; transition: .2s ease; }
input:focus, textarea:focus { border-color: rgba(125,211,252,.55); box-shadow: 0 0 0 4px rgba(125,211,252,.09); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { color: var(--muted); border: 1px solid var(--border); background: rgba(255,255,255,.055); border-radius: 999px; padding: 9px 12px; }
.chip.active { color: #03111c; background: linear-gradient(135deg, #fff, #7dd3fc); font-weight: 900; }
.themes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.theme-card { border: 1px solid color-mix(in srgb, var(--theme-accent, var(--accent)) 28%, rgba(255,255,255,.14)); border-radius: 30px; padding: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-accent, var(--accent)) 10%, rgba(255,255,255,.065)), rgba(12,16,30,.58)); box-shadow: 0 28px 90px rgba(0,0,0,.42); position: relative; overflow: hidden; transition: .28s ease; }
.theme-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--theme-accent, var(--accent)) 25%, transparent), transparent 36%); opacity: .72; pointer-events: none; }
.theme-card:hover { transform: translateY(-5px); box-shadow: 0 38px 120px rgba(0,0,0,.52), 0 0 70px color-mix(in srgb, var(--theme-accent, var(--accent)) 13%, transparent); }
.theme-access { margin: 12px 0 14px; display: inline-flex; position: relative; z-index: 1; }
.theme-card .theme-preview { position: relative; z-index: 1; margin: 10px 0 18px; }
.theme-card .mock-app { min-height: 210px; grid-template-columns: 64px 1fr; border-radius: 24px; padding: 12px; }
.theme-card .mock-grid span { min-height: 56px; }
.theme-card h3, .theme-card p, .feature-pills, .theme-owned, .theme-expired, .theme-actions { position: relative; z-index: 1; }

.account-grid { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end; }
label { display: grid; gap: 8px; color: var(--muted); font-weight: 700; }
label small { color: var(--muted2); font-weight: 500; line-height: 1.4; }
.message { color: var(--muted); }
.payment-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
.status-badge { display: inline-flex; width: fit-content; color: #03111c; background: linear-gradient(135deg, #fff, #7dd3fc); border-radius: 999px; padding: 8px 12px; font-weight: 900; }
.payment-copy { display: grid; gap: 12px; }
textarea { min-height: 150px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.payment-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qr-card { min-height: 340px; display: grid; place-items: center; border-radius: 28px; background: rgba(255,255,255,.045); border: 1px solid var(--border); position: relative; overflow: hidden; }
.qr-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(125,211,252,.18); filter: blur(42px); }
#qrImage { position: relative; z-index: 1; max-width: 240px; border-radius: 18px; background: white; padding: 10px; }
.qr-fallback { position: relative; z-index: 1; color: var(--muted); text-align: center; padding: 22px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-card { border-radius: 28px; padding: 24px; }
.how-card span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #03111c; background: linear-gradient(135deg, #fff, #f5c86a); font-weight: 1000; }
.how-card h3 { font-size: 1.5rem; margin: 16px 0 8px; }
.how-card p, footer span { color: var(--muted); line-height: 1.65; }
footer { max-width: 1360px; margin: 0 auto; padding: 28px clamp(14px, 3vw, 28px) 50px; display: flex; justify-content: space-between; color: var(--muted); gap: 15px; }
footer strong { color: var(--text); }

.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(16px); }
.modal-card, .purchase-card { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 32px; padding: 28px; }
.purchase-card { width: min(620px, 100%); }
.modal-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,.08); font-size: 1.4rem; z-index: 2; }
.modal-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
.modal-card h2, .purchase-card h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: .95; letter-spacing: -.07em; margin: 14px 0; }
.modal-price { display: inline-flex; margin: 12px 0; color: #03111c; background: linear-gradient(135deg, #fff, #7dd3fc); border-radius: 999px; padding: 10px 14px; font-weight: 1000; }
.palette { display: flex; gap: 8px; margin: 14px 0; }
.palette span { width: 44px; height: 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); }
.feature-list { padding-left: 18px; color: var(--muted); line-height: 1.8; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.modal-preview-wrap { display: grid; gap: 14px; align-content: start; }
.modal-preview { min-height: 320px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-grid div { border: 1px solid var(--border); background: rgba(255,255,255,.055); border-radius: 18px; padding: 12px; }
.spec-grid b { display: block; color: var(--text); }
.spec-grid span { color: var(--muted); }
.purchase-form { display: grid; gap: 14px; }
.toast-host { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: grid; gap: 10px; width: min(380px, calc(100vw - 40px)); }
.toast { border: 1px solid var(--border); background: rgba(16,22,41,.92); backdrop-filter: blur(18px); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); color: var(--text); transition: .25s ease; }
.toast.success { border-color: rgba(74,222,128,.35); }
.toast.error { border-color: rgba(251,113,133,.35); }
.skeleton { min-height: 520px; border-radius: 30px; background: linear-gradient(110deg, rgba(255,255,255,.055), rgba(255,255,255,.12), rgba(255,255,255,.055)); background-size: 220% 100%; animation: skeleton 1.2s ease-in-out infinite; }
@keyframes skeleton { to { background-position: -220% 0; } }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .hero-stage, .weekly-panel, .modal-grid { grid-template-columns: 1fr; }
  .themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .payment-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hero { padding-inline: 12px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .session-pill { width: 100%; justify-content: space-between; }
  .hero-stage { margin-top: 38px; gap: 26px; }
  h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }
  .hero-actions, .theme-actions, .search-row, .account-grid, .weekly-countdown { grid-template-columns: 1fr; display: grid; }
  .hero-metrics, .themes-grid { grid-template-columns: 1fr; }
  .cinema-preview { min-height: auto; padding: 18px; }
  .mock-hero { min-height: 260px; transform: none; }
  .section { padding: 38px 12px; }
  .weekly-panel { padding: 14px; border-radius: 28px; }
  .weekly-copy-card { min-height: auto; padding: 18px; }
  .weekly-info h3 b { font-size: clamp(2.7rem, 15vw, 4.2rem); }
  .mock-app { grid-template-columns: 58px 1fr; }
  .mock-grid { grid-template-columns: 1fr; }
  .mock-grid span { min-height: 44px; }
  footer { flex-direction: column; }
}