:root {
  /* Layer A — palette (hex only here) */
  --ink-900: #15100F;   /* warm near-black, cinematic base */
  --ink-800: #1e1815;
  --ink-700: #2a2320;
  --white:   #FBFAF2;   /* frost white — warm ivory used as the base "white" everywhere */
  --off:     #FBF6F1;   /* warm pastel cream */
  --sand:    #F3EBE2;   /* soft pastel sand */
  --gray-500:#7a6f68;   /* warm gray (text on light) */
  --gray-400:#b8aca2;   /* warm muted (text on dark) */
  --gray-200:#ece3da;   /* warm border */
  --coral:   #E0785A;   /* softened terracotta accent (from logo) */
  --coral-600:#C75E3F;
  --coral-700:#B4552F;  /* AA-contrast fill for white button text (4.7:1) */
  --brown:   #8B5E3C;
  --rust:    #A6552E;
  --umber:   #5A3B29;

  /* Layer B — semantic */
  --bg-dark: var(--ink-900);
  --bg-light: var(--white);
  --bg-muted: var(--off);
  --text-on-dark: var(--white);
  --text-on-light: var(--ink-900);
  --text-muted-dark: var(--gray-400);
  --text-muted-light: var(--gray-500);
  --accent: var(--coral);
  --accent-strong: var(--coral-600);
  --accent-deep: var(--coral-700);
  --border-light: var(--gray-200);

  /* type scale (fluid) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.77rem, 1.5rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.37rem, 1.9rem + 2.2vw, 3.6rem);
  --step-4:  clamp(3.1rem, 2.2rem + 4.2vw, 5.5rem);

  /* spacing + radii */
  --space-s: 0.75rem; --space-m: 1.5rem; --space-l: 3rem; --space-xl: 6rem;
  --radius: 14px; --radius-lg: 22px;
  --container: 1200px;
  /* Manrope (self-hosted, weights 200/300/400) leads; system sans is the fallback.
     Weight roles: 200 = hero/accent, 300 = section headings/secondary, 400 = body/UI. */
  --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Self-hosted Manrope — only the three weights the brand system uses (woff2). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200;font-display:swap;
  src:url("../fonts/Manrope-Thin.woff2?v=3dfd78f8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/Manrope-Light.woff2?v=72009cf8") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Manrope-Regular.woff2?v=1f4c2cd5") format("woff2")}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none}
body{font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;font-weight:400;
  color:var(--text-on-light);background:var(--bg-light);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Section headings — Manrope Light. Hero-level headings are dropped to Thin below. */
h1,h2,h3,h4{line-height:1.08;letter-spacing:-0.02em;font-weight:300}
.container{width:min(var(--container),92vw);margin-inline:auto}
.section{padding-block:var(--space-xl)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;
  border-radius:100px;font-weight:400;font-size:var(--step-0);cursor:pointer;
  transition:transform .15s ease, background .15s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--accent-deep);color:var(--white)}
.btn--primary:hover{background:var(--rust)}
.btn--ghost{background:transparent;border-color:currentColor}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:var(--step--1);
  color:var(--accent);font-weight:400}
[hidden]{display:none!important}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;color:var(--white);
  border-bottom:1px solid transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease,
    transform .45s cubic-bezier(.22,.8,.24,1), opacity .35s ease}
.site-header.is-solid{background:rgba(20,14,11,.92);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:saturate(1.15) blur(6px);
  -webkit-backdrop-filter:saturate(1.15) blur(6px)}
.site-header.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.site-header .container{width:100%;max-width:none;padding-inline:6vw}
.site-header__row{display:flex;align-items:center;justify-content:space-between;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:inherit;font-weight:400;letter-spacing:-0.01em}
.brand__word{font-size:1.15rem}
.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav__link{color:inherit;font-weight:400;font-size:var(--step--1);opacity:.85;transition:opacity .15s ease}
.site-nav__link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}

.planets{background:var(--ink-900)}
@media(min-width:821px){
  .planets{margin-top:-100vh}    /* planet I slides over the film's last screen */
  /* extra CONTENT slot (not padding — sticky children are constrained to the
     content box) keeps The System pinned while Mars slides over it */
  .planets::after{content:"";display:block;height:100vh}
  .cine--mars{margin-top:-100vh} /* Mars slides over The System */
}
/* deck parallax: each block pins and the next slides over it */
.cb{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;color:var(--white);overflow:hidden;background:var(--ink-900)}
.cb__media{position:absolute;inset:0;z-index:0}
.cb__media img,.cb__media video{width:100%;height:100%;object-fit:cover}
/* soft top edge while sliding over the previous block: an alpha mask makes the
   incoming block genuinely transparent at its top, so the pinned block below
   shows through — a real crossfade, not a colored band */
/* thin top mask softens the incoming block's moving edge; the block being
   covered is dimmed into ink by the scroll-driven --covered overlay below,
   so nothing ghosts through at rest */
.planets .cb,.planets .system{
  -webkit-mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh);
  mask-image:linear-gradient(180deg,transparent,rgb(0 0 0) 14vh)}
.planets .cb::after,.planets .system::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--ink-900);opacity:calc(var(--covered, 0) * 1)}
/* keep each planet in frame when cover-crop trims the sides */
.planets .cb:nth-of-type(1) .cb__media video{object-position:72% 50%}
.planets .cb:nth-of-type(2) .cb__media video{object-position:28% 50%}
.planets .cb:nth-of-type(3) .cb__media video{object-position:72% 50%}
.cb__text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:clamp(2rem,6vw,6rem);max-width:46ch}
.cb__text h2{font-size:var(--step-3);font-weight:200}          /* Thin heading */
.cb__body{color:var(--gray-400);font-weight:300;max-width:38ch}
.cb__link{color:var(--accent);font-weight:400;margin-top:.4rem;width:max-content}
.cb__link:hover{text-decoration:underline;text-underline-offset:4px}
/* left variant: text left over a scrim that fades to the right */
.cb--left .cb__text{grid-column:1}
.cb--left::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(18,12,10,.86) 42%, transparent 78%)}
/* right variant mirrors it */
.cb--right .cb__text{grid-column:2;justify-self:end;text-align:right;align-items:flex-end}
.cb--right::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(270deg, rgba(18,12,10,.86) 42%, transparent 78%)}
/* scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .cb.is-armed .cb__text{opacity:0;transform:translateY(26px)}
  .cb.is-armed.is-in .cb__text{opacity:1;transform:none;
    transition:opacity .8s ease, transform .9s cubic-bezier(.22,.8,.24,1)}
}
@media(max-width:820px){
  .cb{grid-template-columns:1fr}
  .cb--right .cb__text,.cb--left .cb__text{grid-column:1;text-align:left;align-items:flex-start}
  .cb--right::before{background:linear-gradient(90deg, rgba(18,12,10,.86) 42%, transparent 92%)}
  /* no deck parallax on phones — plain stacked sections */
  .planets .cb,.system{position:relative;top:auto;min-height:88vh}
}

.system{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--white);overflow:hidden;background:var(--ink-900)}
.system__media{position:absolute;inset:0;z-index:0}
.system__media img,.system__media video{width:100%;height:100%;object-fit:cover;opacity:.7}
.system__inner{position:relative;z-index:2;max-width:40ch}
.system__inner h2{font-size:var(--step-4);font-weight:200;margin:.4rem 0}
.system__sub{color:var(--gray-400);font-weight:300;margin-inline:auto;max-width:44ch}
@media (prefers-reduced-motion: no-preference){
  .system.is-armed .system__inner{opacity:0;transform:translateY(26px)}
  .system.is-armed.is-in .system__inner{opacity:1;transform:none;
    transition:opacity .8s ease, transform .9s cubic-bezier(.22,.8,.24,1)}
}

.finale{position:relative;background:var(--ink-900);color:var(--white);overflow:hidden}
.finale__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.6;mix-blend-mode:screen;pointer-events:none}
.cta{background:transparent;color:var(--white);text-align:center;position:relative;z-index:1}
.cta__inner{position:relative;z-index:1}
.cta h2{font-size:var(--step-4);font-weight:200;max-width:18ch;margin:0 auto 2rem}
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta__mail{display:inline-block;margin-top:1.6rem;color:var(--gray-400);font-weight:300;
  letter-spacing:.04em;text-decoration:none;border-bottom:1px solid rgba(224,120,90,.35);
  padding-bottom:2px;transition:color .2s ease, border-color .2s ease}
.cta__mail:hover{color:var(--accent);border-color:var(--accent)}
.site-footer{background:transparent;color:var(--white);padding-block:var(--space-l);position:relative;z-index:1}
.site-footer .container{width:100%;max-width:none;padding-inline:6vw}  /* align with the header */
.site-footer__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer__links{display:flex;gap:1.5rem}
.site-footer__company{display:block;margin-top:1.4rem;padding-top:1.2rem;padding-inline:clamp(16px,4vw,40px);
  text-align:center;border-top:1px solid rgba(255,255,255,.12);color:var(--gray-400);font-style:normal;font-size:var(--step--1)}
@media(max-width:720px){
  .site-footer__row{flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
  .site-footer__links{justify-content:center}
}

/* Legal pages (privacy, terms) — static content over the light frost body */
.legal__back{color:var(--accent);font-weight:400;display:inline-block;margin-bottom:1.5rem}
.legal h1{font-size:var(--step-3);margin-bottom:.5rem}
.legal__updated{color:var(--text-muted-light);margin-bottom:2rem}
.legal__body{max-width:70ch}.legal__body h2{font-size:var(--step-1);margin-block:1.5rem .5rem}
.legal__body p{margin-bottom:1rem;color:var(--text-muted-light)}
.legal__body ul,.legal__body ol{padding-left:1.4em;margin-bottom:1rem}
.legal__body li{margin-bottom:.4rem;color:var(--text-muted-light)}

/* logo mark */
.brandmark{display:inline-flex;width:26px;height:26px;color:inherit;flex:none;align-items:center}
.brandmark--sm{width:14px;height:14px}   /* small mark for the terminal bar */
.brandmark svg{width:100%;height:100%}
.brandmark .chev1,.brandmark .chev2{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .brand:hover .brandmark .chev1,.brand.is-greet .brandmark .chev1{animation:chevRise 1.9s ease-out infinite}
  .brand:hover .brandmark .chev2,.brand.is-greet .brandmark .chev2{animation:chevRise 1.9s ease-out infinite .32s}
}
@keyframes chevRise{
  0%{opacity:0;transform:translateY(4px)}
  25%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(-2px)}
  100%{opacity:0;transform:translateY(-4px)}
}
/* header Telegram button: compact pill (matches the header CTA sizing).
   Over the transparent header it goes white for contrast; on the solid dark
   header and in the mobile dropdown it returns to the coral CTA. */
.site-nav__tg{padding:.45rem 1rem;font-size:var(--step--1)}
.site-header .site-nav__tg{background:var(--white);color:var(--text-on-light)}
.site-header .site-nav__tg:hover{background:var(--sand)}
.site-header.is-solid .site-nav__tg,.site-header.nav-open .site-nav__tg{background:var(--accent-deep);color:var(--white)}
.site-header.is-solid .site-nav__tg:hover,.site-header.nav-open .site-nav__tg:hover{background:var(--rust)}
/* mobile nav */
.nav-toggle{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  width:40px;height:34px;padding:6px 8px;flex-direction:column;justify-content:center;gap:6px;color:inherit}
.nav-toggle span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .25s ease}
@media(max-width:720px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:center;
    text-align:center;gap:1.3rem;padding:1.4rem 6vw 1.7rem;background:rgba(20,14,11,.96);color:var(--white);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(224,120,90,.35);
    opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s}
  .site-nav__link{font-size:var(--step-0)}
  .site-nav .site-nav__tg{width:min(260px,86%);padding:.85rem 1.2rem;font-size:var(--step-0);justify-content:center}
  .site-header.nav-open{background:rgba(20,14,11,.96)}
  .site-header.nav-open .site-nav{opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .3s ease, transform .3s ease}
  .site-header.nav-open .nav-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
}
/* legal pages: container matches the header width; body copy stays at 70ch */
.legal .container{width:100%;max-width:none;padding-inline:6vw}