/* =========================================================
   INVIVERSE : design tokens
   Deep-space navy at the top of every page, drifting to deep
   ocean at the bottom (the film runs from the farthest point
   in space to the deepest point in the ocean). Gold is used
   for one thing only: the action that sells a seat.
   ========================================================= */
:root{
  --void:        #05070d;
  --space:       #0a0f1f;
  --panel:       #0f1628;
  --panel-2:     #141d33;
  --ocean:       #07202c;
  --hairline:    rgba(255,255,255,0.09);
  --hairline-2:  rgba(255,255,255,0.16);
  --ink:         #eef1f8;
  --muted:       #a3abc2;
  --faint:       #6b7490;
  --ion:         #4fa8ff;
  --ion-soft:    rgba(79,168,255,0.16);
  --ember:       #ff8a3d;
  --gold:        #d9b872;
  --gold-bright: #f3d894;
  --gold-deep:   #9a7d45;
  --focus:       #8fcaff;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --maxw: 1160px;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-serif:   "Playfair Display", Georgia, serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* NOTE: html/body intentionally do NOT set overflow-x:hidden - doing so
   breaks position:sticky on .site-header in every browser (a well-known
   CSS interaction: overflow other than visible on an ancestor stops an
   element from being treated as sticky). Elements that could bleed
   outside the viewport (e.g. .hero-bg) contain their own overflow
   locally instead. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 1100px 600px at 18% -8%, rgba(79,168,255,0.16), transparent 60%),
    radial-gradient(ellipse 900px 600px at 92% 4%, rgba(255,138,61,0.09), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--space) 40%, #08182a 80%, var(--ocean) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* faint star field */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 62%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 74%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 88%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 44%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 52%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 80%, rgba(255,255,255,.3) 50%, transparent 51%);
  background-size:1400px 900px;
  opacity:.9;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow{ max-width:760px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--hairline);
}
/* The frosted-glass effect lives on a ::before layer instead of directly
   on .site-header. backdrop-filter (like transform/filter) makes an
   element establish a new containing block for any position:fixed
   descendant - which would trap the mobile nav overlay inside the
   68px-tall header instead of letting it cover the full viewport.
   A pseudo-element gets the blur without that side effect. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(5,7,13,0.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:20px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:32px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  font-size:14px; letter-spacing:.04em; color:var(--muted);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--ink); border-bottom-color:var(--gold); }

.header-tools{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.socials{ display:flex; gap:8px; }
.socials a{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--hairline); color:var(--muted); font-size:13px;
  transition:.15s ease;
}
.socials a:hover{ color:var(--ink); border-color:var(--ion); }
.lang-toggle{ display:flex; border:1px solid var(--hairline-2); border-radius:20px; overflow:hidden; }
.lang-toggle button{
  background:none; border:none; color:var(--faint);
  font-size:12px; font-weight:600; letter-spacing:.06em; padding:6px 11px; cursor:pointer;
}
.lang-toggle button.active{ background:var(--ink); color:var(--void); }
.header-cta{ display:inline-flex; }
.nav-burger{
  display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; padding:6px;
  position:relative; width:34px; height:34px; flex-shrink:0;
}
/* CSS-only hamburger / close icon - never depends on an external icon
   font finishing its network request, so the button is always visible. */
.burger-icon,
.burger-icon::before,
.burger-icon::after{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; background:currentColor; border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.burger-icon::before{ content:""; top:-7px; }
.burger-icon::after{ content:""; top:7px; }
.nav-burger[aria-expanded="true"] .burger-icon{ background:transparent; }
.nav-burger[aria-expanded="true"] .burger-icon::before{ top:0; transform:translate(-50%,-50%) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-icon::after{ top:0; transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  font-family:var(--font-display); font-size:15px; letter-spacing:.14em; font-weight:600;
  text-transform:uppercase;
  border-radius:3px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-bright) 100%);
  color:#1a1305;
  box-shadow:0 10px 30px -10px rgba(217,184,114,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(217,184,114,0.7); }
.btn-primary .btn-price{
  font-family:var(--font-body); font-weight:600; letter-spacing:0; text-transform:none;
  padding-left:10px; border-left:1px solid rgba(26,19,5,.35); font-size:14px;
}
.btn-ghost{ background:transparent; border-color:var(--hairline-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ion); color:var(--ion); }
.btn-sm{ padding:10px 18px; font-size:12px; letter-spacing:.1em; }
.btn-block{ width:100%; }

/* ---------- Hero (index) ---------- */
.hero{ position:relative; overflow:hidden; padding:72px 0 64px; }
.hero-bg{
  position:absolute; inset:-10% -5% -10% 30%; z-index:0; pointer-events:none;
  background:url("../assets/backdrop.jpg") center/cover no-repeat;
  opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 65% 45%, #000 20%, transparent 70%);
          mask-image:radial-gradient(ellipse 70% 80% at 65% 45%, #000 20%, transparent 70%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr minmax(300px,400px);
  gap:64px; align-items:center;
}
.hero-eyebrow{
  font-family:var(--font-display); font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px;
  display:flex; align-items:center; gap:14px;
}
.hero-eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); }
.hero-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(3rem, 8vw, 6.4rem);
  line-height:.95; letter-spacing:.18em; margin:0 0 6px; color:var(--ink);
}
.hero-title small{
  display:block; font-size:.34em; letter-spacing:.42em; font-weight:400;
  color:var(--ion); margin-top:14px;
}
.hero-hook{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.4;
  color:var(--gold-bright); max-width:520px; margin:28px 0 30px;
}
.hero-facts{
  display:grid; grid-template-columns:repeat(3,auto); gap:0 36px;
  margin:0 0 34px; padding:18px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  width:fit-content;
}
.hero-facts div{ display:flex; flex-direction:column; gap:2px; }
.hero-facts > div > span{ font-size:12px; color:var(--faint); letter-spacing:.04em; }
.hero-facts strong{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; letter-spacing:.04em; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin:16px 0 0; font-size:13px; color:var(--faint); }
.hero-note b{ color:var(--muted); font-weight:500; }

.poster-frame{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.85), 0 0 80px -20px rgba(79,168,255,.35);
  transform:rotate(1.2deg);
}
.poster-frame img{ width:100%; height:auto; }

/* countdown */
.countdown{
  position:relative; z-index:1;
  margin-top:56px; padding:22px 0 0; border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
}
.countdown-label{ font-size:13px; color:var(--muted); max-width:220px; line-height:1.4; }
.countdown-units{ display:flex; gap:26px; }
.countdown-units div{ display:flex; flex-direction:column; align-items:flex-start; min-width:52px; }
.countdown-units b{ font-family:var(--font-display); font-weight:500; font-size:2.2rem; line-height:1; letter-spacing:.02em; }
.countdown-units span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:6px; }

/* ---------- Sections ---------- */
.section{ padding:88px 0; }
.section-sm{ padding:56px 0; }
.section-line{ border:none; border-top:1px solid var(--hairline); margin:0; }
.kicker{
  display:block; font-family:var(--font-display); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem); line-height:1.1; letter-spacing:.03em;
  margin:0 0 18px; color:var(--ink);
}
.h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:600; letter-spacing:0; color:var(--gold-bright); }
.lede{ font-size:1.08rem; color:var(--muted); max-width:640px; margin:0 0 28px; line-height:1.65; }
.center{ text-align:center; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Trailer ---------- */
.trailer{ padding:0 0 88px; }
.video-frame{
  position:relative; width:100%; max-width:960px; margin:0 auto;
  aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--hairline-2); background:#000;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-caption{ text-align:center; color:var(--faint); font-size:13px; margin:16px 0 0; }

/* ---------- Story: space to ocean ---------- */
.story-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.story-copy p{ color:var(--muted); font-size:1.02rem; line-height:1.7; margin:0 0 18px; }
.story-copy p:last-child{ margin-bottom:0; }
.journey{
  position:relative; padding-left:34px; margin-top:44px;
}
.journey::before{
  content:""; position:absolute; left:8px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg, var(--ion) 0%, rgba(79,168,255,.25) 50%, #2fb6a8 100%);
}
.journey li{
  list-style:none; position:relative; margin:0 0 26px; color:var(--muted); font-size:.95rem;
}
.journey li::before{
  content:""; position:absolute; left:-30px; top:9px; width:9px; height:9px; border-radius:50%;
  background:var(--void); border:1.5px solid var(--ion);
}
.journey li:last-child::before{ border-color:#2fb6a8; }
.journey li strong{ display:block; color:var(--ink); font-family:var(--font-display); font-weight:500; font-size:1.1rem; letter-spacing:.04em; margin-bottom:4px; }
.journey ul{ padding:0; margin:0; }
.quote{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.25rem; line-height:1.5; color:var(--gold-bright);
  border-left:2px solid var(--gold); padding-left:20px; margin:32px 0 0;
}
.quote cite{ display:block; font-family:var(--font-body); font-style:normal; font-weight:400; font-size:.8rem; color:var(--faint); margin-top:8px; }

/* ---------- Special Version: why this cut ---------- */
.sv-band{
  border:1px solid var(--hairline-2); border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(79,168,255,.10), rgba(15,22,40,.6) 40%, rgba(255,138,61,.06));
  padding:44px 48px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
}
.sv-list{ display:grid; gap:16px; padding:0; margin:0; }
.sv-list li{
  list-style:none; display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start;
}
.sv-list i{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--hairline-2); color:var(--gold); font-size:14px;
}
.sv-list b{ display:block; color:var(--ink); font-weight:600; font-size:.98rem; margin-bottom:3px; }
.sv-list p{ margin:0; color:var(--muted); font-size:.9rem; }

/* ---------- Characters & cast ---------- */
.people-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.person{
  display:grid; grid-template-columns:200px 1fr; gap:0;
  border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:var(--panel);
}
.person figure{ margin:0; position:relative; min-height:260px; background:linear-gradient(160deg, #18213a, #0b1020); }
.person figure img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.person figure img.crop-left-40{ object-position:10% center; }
.person figure::after{
  content:attr(data-initial);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:4rem; font-weight:500; color:rgba(255,255,255,.12); letter-spacing:.1em;
}
.person figure.has-img::after{ display:none; }
.person-body{ padding:24px 26px 26px; }
.person-role{ font-family:var(--font-display); letter-spacing:.2em; font-size:12px; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.person-name{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; letter-spacing:.06em; margin:0 0 4px; line-height:1.1; }
.person-meta{ font-size:.82rem; color:var(--faint); margin:0 0 14px; }
.person-body p{ margin:0; color:var(--muted); font-size:.92rem; }
.person dl{ margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; }
.person dt{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); padding-top:2px; }
.person dd{ margin:0; font-size:.84rem; color:var(--muted); }

/* ---------- Why this film ---------- */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; }
.reasons > div{ padding:34px 30px; border-right:1px solid var(--hairline); background:rgba(15,22,40,.5); }
.reasons > div:last-child{ border-right:none; }
.reasons h3{ font-family:var(--font-display); font-weight:500; font-size:1.25rem; letter-spacing:.04em; margin:0 0 10px; }
.reasons p{ margin:0; color:var(--muted); font-size:.92rem; }

/* ---------- Event / practical details ---------- */
.event-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.event-facts{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:0; }
.event-facts div{ padding:18px 0 0; border-top:1px solid var(--hairline); }
.event-facts dt{ font-size:12px; letter-spacing:.06em; color:var(--faint); margin-bottom:6px; }
.event-facts dd{ margin:0; font-family:var(--font-display); font-weight:500; font-size:1.2rem; letter-spacing:.03em; }
.event-facts dd small{ display:block; font-family:var(--font-body); font-size:.85rem; color:var(--muted); font-weight:400; letter-spacing:0; margin-top:3px; }
.event-facts a{ color:var(--ion); border-bottom:1px solid rgba(79,168,255,.35); }

.ticket-card{
  border:1px solid rgba(217,184,114,.35); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(217,184,114,.08), rgba(15,22,40,.7));
  padding:34px 34px 30px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.ticket-card .kicker{ margin-bottom:8px; }
.ticket-card h3{ font-family:var(--font-display); font-weight:500; font-size:1.7rem; letter-spacing:.06em; margin:0 0 4px; line-height:1.1; }
.ticket-card .when{ color:var(--muted); font-size:.95rem; margin:0 0 22px; }
.price{ display:flex; align-items:baseline; gap:10px; margin:0 0 20px; }
.price b{ font-family:var(--font-display); font-weight:500; font-size:2.6rem; line-height:1; letter-spacing:.02em; }
.price span{ color:var(--faint); font-size:.9rem; }
.includes{ margin:0 0 26px; padding:0; }
.includes li{ list-style:none; display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:.92rem; margin-bottom:9px; }
.includes li i{ color:var(--gold); font-size:12px; margin-top:5px; }
.ticket-card .fine{ margin:14px 0 0; font-size:12px; color:var(--faint); text-align:center; }
.ticket-card .fine i{ margin-right:4px; }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; }
.faq details{ border-top:1px solid var(--hairline); }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-weight:500; font-size:1.02rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-size:1.4rem; color:var(--gold); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ margin:0 0 20px; color:var(--muted); font-size:.95rem; max-width:640px; }
.faq a{ color:var(--ion); }

/* ---------- Closing CTA ---------- */
.cta-band{
  position:relative; overflow:hidden;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:96px 0; text-align:center;
  background:radial-gradient(ellipse 700px 400px at 50% 120%, rgba(47,182,168,.18), transparent 70%);
}
.cta-band .h2{ font-size:clamp(2rem, 4.5vw, 3.4rem); letter-spacing:.1em; }
.cta-band .lede{ margin:0 auto 34px; }
.cta-band .hero-actions{ justify-content:center; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(5,7,13,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline-2); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:12px;
}
.sticky-cta .s-info{ display:flex; flex-direction:column; line-height:1.2; }
.sticky-cta .s-info b{ font-family:var(--font-display); font-weight:500; letter-spacing:.06em; font-size:.95rem; }
.sticky-cta .s-info span{ font-size:11px; color:var(--muted); }
.sticky-cta.visible{ display:flex; }
body.has-sticky{ padding-bottom:72px; }

/* ---------- Subpage hero ---------- */
.page-hero{ padding:72px 0 44px; }
.page-hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.2rem, 5vw, 3.6rem); letter-spacing:.06em; line-height:1.05; margin:0 0 14px;
}
.page-hero .lede{ margin-bottom:0; }

/* ---------- Ticket page ---------- */
.buy-grid{ display:grid; grid-template-columns:380px 1fr; gap:40px; align-items:start; }
.buy-summary{ position:sticky; top:92px; }
.buy-summary .ticket-card{ padding:26px 26px 22px; }
.buy-summary .poster-mini{ display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.buy-summary .poster-mini img{ width:64px; border-radius:6px; border:1px solid var(--hairline-2); }
.buy-summary h3{ font-size:1.25rem; }
.pay-methods{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.pay-methods li{ list-style:none; font-size:12px; color:var(--muted); border:1px solid var(--hairline-2); border-radius:20px; padding:5px 11px; }
.pay-methods li i{ color:var(--gold); margin-right:5px; font-size:11px; }
.form-shell{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline-2);
  background:#f6f4ef; color:#1a1f2b;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.form-shell-head{
  padding:18px 26px; border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.form-shell-head b{ font-family:var(--font-display); font-weight:500; letter-spacing:.06em; font-size:1.05rem; color:#0f1628; }
.form-shell-head span{ font-size:12px; color:#6b7490; }
.form-shell-head span i{ color:#2fb6a8; margin-right:5px; }
.form-shell-body{ padding:10px 18px 18px; min-height:420px; }
.form-shell-body a{ color:#2c6bb0; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 36px; padding:0; border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; }
.steps li{ list-style:none; padding:20px 22px; border-right:1px solid var(--hairline); background:rgba(15,22,40,.5); display:flex; gap:14px; align-items:flex-start; }
.steps li:last-child{ border-right:none; }
.steps li b{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; color:var(--gold); line-height:1; }
.steps li div{ font-size:.9rem; color:var(--muted); }
.steps li div strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:2px; }

/* ---------- About page ---------- */
.about-hero{ padding:80px 0 40px; }
.about-hero h1{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:.04em; line-height:1.05; margin:0 0 20px; max-width:820px; }
.about-hero h1 em{ font-family:var(--font-serif); font-style:italic; font-weight:600; letter-spacing:0; color:var(--gold-bright); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin:40px 0 0; }
.stats div{ padding:26px 0; border-right:1px solid var(--hairline); padding-right:24px; }
.stats div + div{ padding-left:28px; }
.stats div:last-child{ border-right:none; }
.stats b{ display:block; font-family:var(--font-display); font-weight:500; font-size:2.4rem; line-height:1; letter-spacing:.02em; color:var(--ink); }
.stats > div > span{ font-size:.85rem; color:var(--muted); display:block; margin-top:8px; }

.prose > :not(.first-release){ max-width:720px; }
.prose h2{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; letter-spacing:.04em; margin:52px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--muted); font-size:1.02rem; line-height:1.7; margin:0 0 16px; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--ion); }
.guest-row{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.guest-row span{ font-size:13px; color:var(--muted); border:1px solid var(--hairline-2); border-radius:20px; padding:6px 13px; }
.timeline{ margin:0; padding:0; }
.timeline li{ list-style:none; display:grid; grid-template-columns:110px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--hairline); }
.timeline li:last-child{ border-bottom:1px solid var(--hairline); }
.timeline b{ font-family:var(--font-display); font-weight:500; font-size:1.3rem; letter-spacing:.04em; color:var(--gold); }
.timeline p{ margin:0; color:var(--muted); font-size:.98rem; }
.timeline p strong{ color:var(--ink); display:block; margin-bottom:3px; }

.first-release{
  display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:center;
  border:1px solid rgba(217,184,114,.35); border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(217,184,114,.08), rgba(15,22,40,.6));
  padding:26px 30px; margin:56px 0 0;
}
.first-release img{ border-radius:6px; border:1px solid var(--hairline-2); }
.first-release h3{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; letter-spacing:.06em; margin:0 0 6px; }
.first-release p{ margin:0; color:var(--muted); font-size:.95rem; }

.motto{ text-align:center; padding:96px 0; border-top:1px solid var(--hairline); }
.motto p{ font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--gold-bright); margin:0 0 12px; line-height:1.3; }
.motto small{ color:var(--muted); font-size:1rem; }

.info-card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:22px 26px; margin:20px 0;
}
.info-card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.info-card dt{ color:var(--faint); font-size:.85rem; }
.info-card dd{ margin:0; color:var(--ink); font-size:.94rem; }
.info-card a{ color:var(--ion); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--hairline); padding:52px 0 32px; background:rgba(5,7,13,.55); }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; margin-bottom:34px; }
.footer-brand{ max-width:300px; }
.footer-brand img{ height:28px; margin-bottom:14px; }
.footer-brand p{ color:var(--faint); font-size:.88rem; margin:0; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--font-display); font-weight:500; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.footer-col a, .footer-col button{ display:block; color:var(--faint); font-size:.88rem; margin-bottom:9px; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
.footer-col a:hover, .footer-col button:hover{ color:var(--ion); }
.footer-bottom{
  border-top:1px solid var(--hairline); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.78rem; color:var(--faint);
}

/* ---------- Cookie banner ---------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:rgba(10,14,26,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--hairline); padding:18px 24px; display:none;
}
#cookie-banner.visible{ display:block; }
.cookie-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.cookie-text{ flex:1; min-width:240px; font-size:.86rem; color:var(--muted); margin:0; }
.cookie-text a{ color:var(--ion); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .story-grid, .event-grid, .sv-band{ grid-template-columns:1fr; }
  .sv-band{ padding:32px 28px; gap:28px; }
  .buy-grid{ grid-template-columns:1fr; }
  .buy-summary{ position:static; }
  .reasons{ grid-template-columns:1fr; }
  .reasons > div{ border-right:none; border-bottom:1px solid var(--hairline); }
  .reasons > div:last-child{ border-bottom:none; }
  .people-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .site-header .container{ height:62px; }
  .brand img{ height:26px; }
  .journey{ margin-top:8px; }
  .main-nav{
    position:fixed; top:62px; left:0; right:0;
    /* height instead of bottom:0 - .site-header's backdrop-filter creates a
       new containing block for fixed descendants, so a % offset like
       bottom:0 resolves against the 62px-tall header, not the viewport.
       vh/dvh units are immune to that and always measure the real viewport. */
    height:calc(100vh - 62px);
    height:calc(100dvh - 62px);
    background:var(--void); flex-direction:column; align-items:flex-start;
    padding:30px 24px; gap:24px; transform:translateX(100%); visibility:hidden; transition:transform .25s ease, visibility 0s .25s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav a{ font-size:20px; }
  .main-nav.open{ transform:translateX(0); visibility:visible; transition:transform .25s ease; }
  .nav-burger{ display:block; }
  .socials, .header-cta{ display:none; }
  .hero{ padding:40px 0 48px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-bg{ inset:-10% -20% 20% -20%; opacity:.22; }
  .poster-frame{ max-width:300px; margin:0 auto; transform:none; order:-1; }
  .hero-title{ font-size:clamp(2.6rem, 12vw, 4rem); letter-spacing:.12em; }
  .hero-facts{ grid-template-columns:1fr 1fr; gap:14px 24px; width:100%; }
  .hero-actions .btn{ width:100%; }
  .countdown{ margin-top:36px; }
  .section{ padding:64px 0; }
  .person{ grid-template-columns:120px 1fr; }
  .person figure{ min-height:200px; }
  .steps{ grid-template-columns:1fr; }
  .steps li{ border-right:none; border-bottom:1px solid var(--hairline); }
  .steps li:last-child{ border-bottom:none; }
  .stats{ grid-template-columns:1fr; }
  .stats div{ border-right:none; border-bottom:1px solid var(--hairline); padding:18px 0; }
  .stats div + div{ padding-left:0; }
  .stats div:last-child{ border-bottom:none; }
  .first-release{ grid-template-columns:1fr; text-align:center; }
  .first-release img{ margin:0 auto; width:130px; }
  .timeline li{ grid-template-columns:1fr; gap:6px; }
  .footer-grid{ flex-direction:column; }
  .event-facts{ grid-template-columns:1fr; }
  .cta-band{ padding:72px 0; }
}
@media (max-width:480px){
  .countdown-units{ gap:18px; }
  .countdown-units b{ font-size:1.8rem; }
  .person{ grid-template-columns:1fr; }
  .person figure{ min-height:220px; }
}

/* =========================================================
   FUTURISTIC UPGRADE PASS
   Sci-fi cues appropriate to a film distributor's site for a
   space/ocean story: a quiet starfield, HUD-style corner marks
   on key imagery, a glowing primary action, and content that
   materializes as you scroll. Kept subtle and premium rather
   than neon/cyberpunk - this still has to look like a real
   distributor's site, not a game launcher.
   ========================================================= */

/* ---- 1) Ambient starfield: extend the existing body::before star
   layer with slow drift instead of replacing body's own background
   (a plain `body{ background-image:... }` here would silently wipe
   out the dark navy gradient set on body itself, since background-image
   is a single property and the later rule wins - it must stay on the
   existing ::before layer instead). ---- */
body::before{
  background-size:1400px 900px, 1400px 900px;
  animation:star-drift 120s linear infinite;
}
@keyframes star-drift{
  0%{ background-position:0 0; }
  100%{ background-position:0 -900px; }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

/* ---- 2) HUD corner brackets on the poster and video frame ---- */
.poster-frame, .video-frame{ position:relative; }
.poster-frame::before, .poster-frame::after,
.video-frame::before, .video-frame::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none; z-index:2;
  border-color:var(--ion); border-style:solid; opacity:.85;
}
.poster-frame::before, .video-frame::before{
  top:-1px; left:-1px; border-width:2px 0 0 2px; border-top-left-radius:4px;
}
.poster-frame::after, .video-frame::after{
  bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-bottom-right-radius:4px;
}

/* ---- 3) Glowing, breathing primary CTA ---- */
.btn-primary{ position:relative; }
.btn-primary::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:linear-gradient(100deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
  opacity:0; filter:blur(10px); transition:opacity .3s ease;
}
.btn-primary:hover::after{ opacity:.65; }
@keyframes cta-pulse{
  0%,100%{ box-shadow:0 10px 30px -10px rgba(217,184,114,0.55); }
  50%{ box-shadow:0 10px 38px -8px rgba(217,184,114,0.8); }
}
#buy .btn-primary, .sticky-cta .btn-primary{ animation:cta-pulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  #buy .btn-primary, .sticky-cta .btn-primary{ animation:none; }
}

/* ---- 4) Section divider with an orbit-ring accent ---- */
.section-line{
  position:relative; border:none; border-top:1px solid var(--hairline); margin:0; overflow:visible;
}
.section-line::after{
  content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--void);
  border:1.5px solid var(--ion); box-shadow:0 0 10px 1px rgba(79,168,255,.55);
}

/* ---- 5) Scroll-reveal: sections fade/rise into place ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- 6) Mobile polish ---- */
@media (max-width:520px){
  .hero-facts{ column-gap:22px; row-gap:14px; }
  .btn{ min-height:48px; }
  .lang-toggle button{ min-width:34px; }
  .faq summary{ min-height:48px; }
}

/* =========================================================
   O FILMU (About the Film) page - gallery, timeline, data tables
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.gallery-grid figure{ margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline); aspect-ratio:4/5; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; }
.gallery-grid figcaption{ display:none; }

.film-timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--hairline); }
.film-timeline li{ position:relative; padding:0 0 28px 28px; }
.film-timeline li::before{
  content:""; position:absolute; left:-7px; top:3px; width:12px; height:12px; border-radius:50%;
  background:var(--void); border:2px solid var(--gold);
}
.film-timeline .tl-date{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; }
.film-timeline h4{ margin:2px 0 4px; font-family:var(--font-display); font-weight:500; font-size:1.1rem; }
.film-timeline p{ margin:0; color:var(--muted); font-size:.9rem; }

.data-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table th{ text-align:left; font-family:var(--font-display); letter-spacing:.06em; font-size:.78rem; text-transform:uppercase; color:var(--gold); padding:10px 14px; border-bottom:1px solid var(--hairline-2); }
.data-table td{ padding:10px 14px; border-bottom:1px solid var(--hairline); color:var(--muted); vertical-align:top; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table td strong, .data-table td b{ color:var(--ink); font-weight:500; }
.table-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r-md); }

.source-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.source-list li{ padding:12px 16px; border:1px solid var(--hairline); border-radius:var(--r-sm); font-size:.86rem; color:var(--muted); }
.source-list a{ color:var(--ion); border-bottom:1px solid rgba(79,168,255,.35); }
.source-list b{ color:var(--ink); }

.note-box{
  border:1px dashed var(--hairline-2); border-radius:var(--r-md); padding:16px 20px;
  font-size:.85rem; color:var(--faint); background:rgba(15,22,40,.4);
}

@media (max-width:760px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Behind-the-scenes photo grid with visible captions (O filmu page) */
.bts-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px;
}
.bts-grid figure{ margin:0; }
.bts-grid img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-md);
  border:1px solid var(--hairline); display:block;
}
.bts-grid figcaption{ margin-top:8px; font-size:.8rem; color:var(--faint); line-height:1.4; }
@media (max-width:760px){
  .bts-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .bts-grid{ grid-template-columns:1fr; }
}

/* Special Version comparison block (O filmu page) */
.version-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
  margin:28px 0; padding:26px; border:1px solid var(--hairline); border-radius:var(--r-md);
  background:rgba(15,22,40,.5);
}
.version-compare .vc-card{ text-align:center; }
.version-compare .vc-card .vc-label{ font-family:var(--font-display); letter-spacing:.14em; font-size:.75rem; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.version-compare .vc-card .vc-min{ font-family:var(--font-display); font-size:2.2rem; color:var(--ink); line-height:1; }
.version-compare .vc-card .vc-date{ margin-top:6px; font-size:.85rem; color:var(--muted); }
.version-compare .vc-arrow{ font-size:1.4rem; color:var(--gold); }
.version-compare .vc-card.is-current .vc-min{ color:var(--gold); }
.big-quote{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold-bright);
  text-align:center; max-width:640px; margin:8px auto 26px; line-height:1.45;
}
@media (max-width:600px){
  .version-compare{ grid-template-columns:1fr; }
  .version-compare .vc-arrow{ transform:rotate(90deg); }
}

/* Highlight box - for the single most important callout on the page
   (which version of the film is actually being screened). Deliberately
   louder than .note-box: gold border, icon, larger type. */
.highlight-box{
  display:flex; gap:20px; align-items:flex-start;
  margin:28px 0; padding:26px 28px;
  border:1.5px solid var(--gold); border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(217,184,114,.10), rgba(217,184,114,.03));
  box-shadow:0 0 0 1px rgba(217,184,114,.08), 0 20px 50px -25px rgba(217,184,114,.35);
}
.highlight-box > i{
  flex-shrink:0; font-size:1.5rem; color:var(--gold); margin-top:4px;
}
.highlight-box p{
  margin:0 0 14px; font-size:1.08rem; line-height:1.6; color:var(--ink);
}
.highlight-box strong{ color:var(--gold-bright); }
.highlight-box u{ text-decoration-color:var(--gold); text-underline-offset:3px; }
@media (max-width:600px){
  .highlight-box{ flex-direction:column; gap:12px; padding:22px; }
}

/* WebGL starfield canvas behind the hero content (Three.js). Sits at
   the same layer as .hero-bg; fades in once the scene renders its
   first frame so there's never a flash of a blank/black canvas. */
.hero-webgl{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.6s ease;
  width:100%; height:100%; display:block;
}
.hero-webgl.is-ready{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-webgl{ display:none; }
}