/* ═══════════════════════════════════════════════════════════
   TELEVIZIO — televizio.ge
   Black ground, one red signal, broadcast typography.
   ═══════════════════════════════════════════════════════════ */

/* ── brand typeface ───────────────────────────────────────── */
@font-face{
  font-family:'Eurostile GEO';
  src:url('../fonts/eurostile-geo-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Eurostile GEO';
  src:url('../fonts/eurostile-geo-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Eurostile GEO';
  src:url('../fonts/eurostile-geo-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Eurostile GEO';
  src:url('../fonts/eurostile-geo-900.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ── tokens ───────────────────────────────────────────────── */
:root{
  --black:#000000;
  --panel:#0B0B0C;
  --rule:#1B1B1F;
  --rule-2:#2C2C33;
  --red:#E4211C;
  --red-deep:#7E0F0C;
  --white:#FFFFFF;
  --dim:#7C7C84;

  --glow: 0 0 0 1px rgba(228,33,28,.45), 0 0 34px -6px rgba(228,33,28,.55);

  --f-dsp:'Eurostile GEO',system-ui,sans-serif;                     /* brand: headlines, labels */
  --f-body:'Eurostile GEO',system-ui,sans-serif;                    /* UI chrome */
  --f-text:'IBM Plex Sans','Noto Sans Georgian',system-ui,sans-serif;/* running text */
  --f-mono:'IBM Plex Mono','Eurostile GEO',ui-monospace,monospace;   /* data */

  /* the brand star, used as a mask so it inherits currentColor */
  --star:url('../img/star.svg');

  --pad: clamp(20px, 4.4vw, 68px);
  --max: 1440px;
  --hdr-h: 62px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--black);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--f-text);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

/* brand star, drawn as a mask so it takes the colour of its text */
.plan__list li::before,
.ticker__set span::after,
.box__cap span + span::before{
  content:"";
  display:inline-block;
  width:1em; height:.44em;
  background:currentColor;
  -webkit-mask:var(--star) center/contain no-repeat;
  mask:var(--star) center/contain no-repeat;
}

.vh{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  padding:10px 16px; background:var(--red); color:#fff;
  font:600 .8rem/1 var(--f-mono); text-decoration:none;
  transform:translateY(-160%);
}
.skip:focus{ transform:none; }

/* ── language switching ───────────────────────────────────── */
[data-lang="ka"] .en{ display:none; }
[data-lang="en"] .ka{ display:none; }

/* ── layout primitives ────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sec{
  position:relative;
  padding-block:clamp(72px,11vw,150px);
  scroll-margin-top:var(--hdr-h);
}

.sec__head{ max-width:min(58ch,100%); }
/* A centred head has to hold the longest Georgian line whole —
   "იგივე ყოველთვიურად." runs to about 985px — or the long word
   overflows its box and the block reads off-centre. The lede keeps
   its own 60ch cap, so only the heading uses the extra width. */
.sec__head--center{
  margin-inline:auto;
  text-align:center;
  max-width:min(100%, 1020px);
}
.sec__head--tight{ max-width:min(100%, 620px); }   /* holds "შეკვეთიდან თქვენამდე —" whole */

/* English headlines run in caps — Eurostile was drawn for it */
[data-lang="en"] .hero__h1,
[data-lang="en"] .dsp,
[data-lang="en"] .step h3,
[data-lang="en"] .plan__name,
[data-lang="en"] .menu__nav a{
  text-transform:uppercase;
  letter-spacing:.005em;
}
[data-lang="en"] .hero__h1{ letter-spacing:-.005em; }
/* caps set optically larger — give them a little less size and a little more room */
[data-lang="en"] .dsp{ font-size:clamp(1.95rem,4.5vw,3.7rem); }
[data-lang="en"] .sec__head{ max-width:min(64ch,100%); }
/* comes after the rule above, so the centred head keeps its width */
[data-lang="en"] .sec__head--center{ max-width:min(100%, 1020px); }
[data-lang="en"] .sec__head--tight{ max-width:min(100%, 620px); }

/* ── type ─────────────────────────────────────────────────── */
.dsp{
  font-family:var(--f-dsp);
  font-weight:700;
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}
/* one size for every section heading — the modifiers are gone on
   purpose, so nothing drifts out of step again */

/* On a phone the longest Georgian word — "ყოველთვიურად." — is wider
   than the column at the clamp's floor, and Mkhedruli will not break.
   Below 420px the heading follows the viewport instead. */
@media (max-width:420px){
  .dsp,
  [data-lang="en"] .dsp{ font-size:clamp(1.6rem,8.4vw,2.2rem); }
}

.lede{
  font-family:var(--f-text);
  margin-top:clamp(18px,2.4vw,30px);
  max-width:60ch;
  color:#B9B9C0;
  font-size:clamp(1.02rem,.97rem + .3vw,1.15rem);
  line-height:1.66;
}
.lede--center{ margin-inline:auto; }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:.95em 1.5em;
  border:1px solid transparent;
  border-radius:2px;
  font:600 .82rem/1 var(--f-mono);
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.btn--red{ background:var(--red); color:#fff; box-shadow:var(--glow); }
.btn--red:hover{ background:#FF3A34; transform:translateY(-1px); }
.btn--ghost{ border-color:var(--rule-2); color:var(--white); }
.btn--ghost:hover{ border-color:var(--red); color:var(--red); }
.btn--lg{ padding:1.15em 2em; font-size:.9rem; }

/* ── header ───────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(16px) saturate(.5);
  -webkit-backdrop-filter:blur(16px) saturate(.5);
}
.hdr__in{
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
  height:var(--hdr-h);
  max-width:var(--max); margin-inline:auto;
  padding-inline:var(--pad);
}
.hdr__logo{ flex:none; line-height:0; }
.hdr__logo img{ width:118px; height:auto; }

.hdr__nav{
  display:flex; gap:clamp(14px,2vw,30px);
  margin-right:auto;
  font:500 .74rem/1 var(--f-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hdr__nav a{
  color:var(--dim); text-decoration:none;
  padding:6px 0;
  transition:color .2s;
}
.hdr__nav a:hover{ color:var(--white); }

.hdr__end{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); }

/* one button, showing the flag of the language it switches to */
.lang{
  appearance:none; border:0; padding:0;
  display:grid; place-items:center;
  width:30px; height:20px;
  background:none; cursor:pointer;
  border-radius:2px;
  opacity:.72;
  transition:opacity .25s ease, transform .25s ease;
}
.lang:hover{ opacity:1; transform:scale(1.06); }
.flag{ display:block; width:100%; height:100%; }
[data-lang="ka"] .flag--ka{ display:none; }
[data-lang="en"] .flag--en{ display:none; }

.hdr__cta{ padding:.7em 1.15em; font-size:.76rem; }

.hdr__meter{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  overflow:hidden;
}
.hdr__meter i{
  display:block; height:100%; width:100%;
  background:var(--red);
  box-shadow:0 0 12px 1px rgba(228,33,28,.9);
  transform:scaleX(0); transform-origin:0 50%;
}

/* mobile menu */
.burger{
  display:none;
  appearance:none; background:none; border:1px solid var(--rule-2);
  border-radius:2px; padding:.62em 1em; cursor:pointer;
  font:600 .72rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
}
.burger:hover{ border-color:var(--red); color:var(--red); }
.burger__close{ display:none; }
.burger[aria-expanded="true"] .burger__open{ display:none; }
.burger[aria-expanded="true"] .burger__close{ display:inline; }

.menu{
  position:fixed; inset:var(--hdr-h) 0 0 0; z-index:99;
  background:var(--black);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,7vw,56px) var(--pad) clamp(32px,7vw,56px);
  overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  padding:clamp(12px,2.8vw,18px) 0;
  text-decoration:none;
  font-family:var(--f-dsp);
  font-weight:700;
  font-size:clamp(1.5rem,7vw,2.2rem);
  letter-spacing:-.02em;
  line-height:1.1;
}
.menu__foot{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  margin-top:clamp(28px,6vw,48px);
}
.menu__tel{
  font:500 .82rem/1 var(--f-mono); letter-spacing:.1em;
  color:var(--dim); text-decoration:none;
}
body.is-locked{ overflow:hidden; }

@media (max-width:900px){
  .hdr__nav{ display:none; }
  .hdr__end{ margin-left:auto; }
  .burger{ display:block; }
}
@media (min-width:901px){
  .menu{ display:none; }
}
@media (max-width:520px){
  .hdr__cta{ display:none; }
}

/* ═══ HERO — three rooms, crossfading ════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero__stage{ position:absolute; inset:0; z-index:0; }
.hero__plate{ position:absolute; inset:0; will-change:transform; }

.hero__scene{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:64% 46%;
  transform:scale(1.04);
  opacity:0;
}
.hero__scene.is-on{ opacity:1; }

.hero__vig{
  position:absolute; inset:0;
  background:radial-gradient(130% 100% at 62% 46%, transparent 34%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

/* keeps the copy legible whichever room is on */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 26%, rgba(0,0,0,.42) 52%, rgba(0,0,0,0) 72%),
    linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 26%);
  pointer-events:none;
}

.hero__copy{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:calc(var(--hdr-h) + clamp(24px,5vh,60px)) var(--pad) clamp(56px,9vh,96px);
  will-change:transform;
}
.hero__kick{
  display:flex; align-items:center; gap:.6em;
  font:500 .66rem/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:#fff;
  margin-bottom:clamp(16px,2vw,22px);
}
.hero__h1{
  font-family:var(--f-dsp);
  font-weight:900;
  font-size:clamp(2.1rem,7vw,5.4rem);
  line-height:.95;
  letter-spacing:-.03em;
  margin:0;
}
.hero__h1 em{
  font-style:normal;
  color:var(--red);
}
.hero__lede{
  font-family:var(--f-text);
  margin-top:clamp(18px,2.4vw,26px);
  max-width:46ch;
  color:#C8C8CF;
  font-size:clamp(1.02rem,.97rem + .3vw,1.14rem);
  line-height:1.62;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(24px,3vw,36px);
}

/* which room you are looking at */
.hero__dots{
  position:absolute; z-index:3;
  left:50%; bottom:clamp(18px,3.2vh,34px);
  transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero__dots button{
  appearance:none; border:0; padding:0;
  width:32px; height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.24);
  cursor:pointer;
  transition:background .45s ease, width .45s cubic-bezier(.2,.8,.2,1);
}
.hero__dots button:hover{ background:rgba(255,255,255,.5); }
.hero__dots button[aria-selected="true"]{
  width:52px;
  background:var(--red);
}

@media (max-width:900px){
  /* portrait: the room becomes a band, the copy sits under it */
  .hero{ min-height:0; display:block; padding-bottom:clamp(36px,7vw,56px); }
  .hero__stage{ position:relative; height:52svh; min-height:300px; }
  .hero__scrim{
    inset:0 0 auto 0; height:52svh; min-height:300px;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 20%),
      linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,0) 34%);
  }
  .hero__scene{ object-position:68% 44%; }
  .hero__copy{ padding-top:clamp(20px,4vw,32px); padding-bottom:0; }
  .hero__lede{ max-width:none; }
  .hero__dots{ bottom:auto; top:calc(52svh - 26px); }
}

/* ── channel strip ────────────────────────────────────────── */
/* Logos ride past in grey; the one under the cursor comes up to
   full colour and size. */
.scan{
  position:relative; z-index:2;
  background:linear-gradient(180deg,#070708,#000);
  overflow:hidden;
  padding-block:6px;
}
.scan::before,.scan::after{
  content:""; position:absolute; top:0; bottom:0; width:14vw; z-index:5;
  pointer-events:none;
}
.scan::before{ left:0;  background:linear-gradient(to right,#000,transparent); }
.scan::after{  right:0; background:linear-gradient(to left,#000,transparent); }


.scan__lane{ display:flex; width:max-content; }
.scan__set{ display:flex; align-items:center; }

.logo{
  position:relative;
  display:grid; place-items:center;
  width:clamp(132px,13vw,178px); height:86px;
  flex:none;
}
.logo::after{                       /* the light it picks up when lit */
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(closest-side, rgba(228,33,28,.22), transparent 72%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.logo img{
  /* both caps, so a wide wordmark and a square mark carry
     about the same weight in the lane */
  max-height:clamp(24px,2.5vw,32px);
  max-width:clamp(92px,10.5vw,128px);
  width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.05) contrast(.9);
  opacity:.5;
  transition:filter .42s ease, opacity .42s ease,
             transform .42s cubic-bezier(.2,.8,.2,1);
}
.logo:hover{ z-index:4; }
.logo:hover::after{ opacity:1; }
.logo:hover img{
  filter:none;
  opacity:1;
  transform:scale(1.34);
}

/* no cursor to reveal with — meet them halfway */
@media (hover:none){
  .logo img{ filter:grayscale(.4) brightness(.92); opacity:.92; }
}
@media (max-width:640px){
  .logo{ height:76px; width:clamp(116px,34vw,150px); }
  .logo img{ max-height:26px; }
}
@media (prefers-reduced-motion:reduce){
  .logo img{ transition:filter .2s ease, opacity .2s ease; }
  .logo:hover img{ transform:none; }
}

/* ═══ CHANNELS / EPG ══════════════════════════════════════ */
.sec--channels{ border-top:0; }

.guide__run{ height:auto; }
.guide__stage{ padding-block:clamp(72px,11vw,150px); }

/* Wide enough, the heading sits beside the guide so the pair fits one
   screen, and the section can hold it while the guide fills in. */
@media (min-width:1200px) and (min-height:640px){
  .sec--channels{ padding-block:0; }
  .guide__run{ height:250vh; }
  .guide__stage{
    position:sticky; top:0;
    height:100svh;
    display:flex; align-items:center;
    padding-block:0;
  }
  .guide{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:clamp(36px,4vw,64px);
    align-items:center;
  }
  .guide .sec__head{ max-width:none; }
  .guide .epg{ margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .sec--channels{ padding-block:0; }
  .guide__run{ height:auto; }
  .guide__stage{ position:relative; height:auto; padding-block:clamp(72px,11vw,150px); }
  .guide{ display:block; }
  .guide .epg{ margin-top:clamp(38px,5vw,64px); }
}

.epg{
  margin-top:clamp(38px,5vw,64px);
  border:1px solid var(--rule);
  background:var(--panel);
}
.epg__scroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.epg__scroll::-webkit-scrollbar{ height:6px; }
.epg__scroll::-webkit-scrollbar-thumb{ background:var(--rule-2); }
.epg__inner{ min-width:640px; --chw:170px; }

.epg__ruler{
  display:grid; grid-template-columns:var(--chw,190px) 1fr;
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:3;
  background:var(--panel);
}
.epg__rname,.epg__ch{
  padding:12px 16px;
  border-right:1px solid var(--rule);
  font:500 .7rem/1.2 var(--f-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.epg__times{
  display:grid; grid-template-columns:repeat(6,1fr);
  font:500 .7rem/1.2 var(--f-mono);
  color:var(--dim);
}
.epg__times span{
  padding:12px 10px;
  border-right:1px solid var(--rule);
  letter-spacing:.08em;
}
.epg__times span:last-child{ border-right:0; }

.epg__body{ position:relative; }

.epg__row{
  display:grid; grid-template-columns:var(--chw,190px) 1fr;
  border-bottom:1px solid var(--rule);
  min-height:52px;
}
.epg__row:last-child{ border-bottom:0; }
.epg__ch{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:0; text-transform:none;
  color:#D6D6DB;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.epg__ch b{
  font:500 .68rem/1 var(--f-mono);
  color:var(--red);
  letter-spacing:.06em;
}
.epg__progs{ display:grid; grid-template-columns:repeat(12,1fr); }

.prog{
  grid-column:span var(--span,2);
  min-width:0;
  padding:14px 14px;
  border-right:1px solid var(--rule);
  font-family:var(--f-text);
  font-size:.88rem;
  color:#9A9AA2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s, background .2s;
}
.prog:last-child{ border-right:0; }
.prog:hover{ color:var(--white); background:#131316; }
.prog.is-live{
  color:var(--white);
  background:linear-gradient(to right, rgba(228,33,28,.16), rgba(228,33,28,.04));
  box-shadow:inset 2px 0 0 var(--red);
}

.epg__now{
  position:absolute; top:0; bottom:0;
  left:calc(var(--chw,190px) + (100% - var(--chw,190px)) * var(--now));
  width:1px; background:var(--red);
  box-shadow:0 0 12px 1px rgba(228,33,28,.8);
  z-index:2; pointer-events:none;
}
.epg__now b{
  position:absolute; top:0; left:0;
  transform:translate(-50%,-100%);
  padding:3px 7px;
  background:var(--red); color:#fff;
  font:600 .6rem/1 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.epg__hint{
  padding:12px 16px;
  border-top:1px solid var(--rule);
  font:400 .7rem/1 var(--f-mono);
  letter-spacing:.08em;
  color:var(--dim);
}
@media (max-width:640px){
  .epg__inner{ --chw:200px; }
  .epg__ch{ font-size:.84rem; }
  .epg__row{ min-height:56px; }
}

/* stats */
.stats{
  display:grid;
  width:100%;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(26px,3.2vw,48px) clamp(24px,3vw,40px);
}
.stats dt{
  font-family:var(--f-dsp);
  font-weight:700;
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1;
  letter-spacing:-.02em;
}
.stats dt .u{
  font-family:var(--f-mono);
  font-size:.9rem; letter-spacing:.06em; color:var(--dim);
}
.stats dd{
  margin:10px 0 0;
  font:400 .82rem/1.4 var(--f-mono);
  color:var(--dim);
  letter-spacing:.03em;
}

/* ═══ THE WALL — 1,024 cells ══════════════════════════════ */
.sec--wall{
  padding-block:0 clamp(72px,11vw,150px);
  border-top:0;
}
.wall__run{ height:230vh; }          /* scrub runway for the assembly */
/* with no scrub there is nothing to scroll through */
@media (prefers-reduced-motion:reduce){
  .wall__run{ height:auto; }
  .wall__stage{
    position:relative; height:auto; min-height:0;
    padding-block:clamp(72px,11vw,150px);
  }
  .wall__canvas{ display:none; }
}
.wall{ position:relative; }
.wall__stage{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  overflow:hidden;
  display:flex; align-items:center;
}
.wall__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.wall__copy{
  position:relative; z-index:1;
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}
@media (max-width:900px){
  .wall__stage{ align-items:flex-end; padding-bottom:clamp(40px,8vh,80px); }
}
.wall__copy .dsp em{
  font-style:normal;
  color:var(--red);
}
/* the statistics hold the screen the way the wall does */
.stats__run{ height:190vh; }
.stats__stage{
  position:sticky; top:0;
  height:100svh; min-height:460px;
  display:flex; align-items:center;
}
@media (prefers-reduced-motion:reduce){
  .stats__run{ height:auto; }
  .stats__stage{
    position:relative; height:auto; min-height:0;
    padding-block:clamp(72px,11vw,150px);
  }
}

/* ═══ THE BOX ═════════════════════════════════════════════ */
/* The film runs the full width of the section — a band above the
   copy on a phone, edge-to-edge behind it once the section is wide
   and tall enough to hold the screen. */
.box__run{ height:auto; }
.box__stage{ position:relative; overflow:hidden; }

.box__film{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--black);
}
.box__scrim{
  display:block;
  height:80px;
  margin-top:-80px;
  position:relative;
  background:linear-gradient(to top,#000,transparent);
  pointer-events:none;
}
.box{ padding-top:clamp(28px,4vw,48px); padding-bottom:clamp(72px,11vw,150px); }
.box__copy{ min-width:0; }

.spec{
  width:100%;
  margin-top:clamp(28px,3.4vw,42px);
  border-collapse:collapse;
  border-top:1px solid var(--rule);
  text-align:left;
}
.spec th,.spec td{
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font:400 .82rem/1.4 var(--f-mono);
  letter-spacing:.03em;
  vertical-align:top;
}
.spec th{ color:var(--dim); font-weight:400; width:42%; }
.spec td{ color:var(--white); }

.box__note{
  font-family:var(--f-text);
  margin-top:clamp(22px,2.6vw,30px);
  font-size:1.04rem;
  line-height:1.6;
  color:#B9B9C0;
}
.box__note b{ color:var(--red); font-weight:700; }

.box__cap{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:clamp(20px,2.4vw,28px);
  font:400 .7rem/1 var(--f-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.box__cap span + span::before{ margin-right:.55em; vertical-align:.12em; color:var(--red); }

/* wide and tall enough: the film goes behind everything, full bleed,
   and the section holds the screen while it assembles */
@media (min-width:1000px) and (min-height:760px){
  .sec--box{ padding-block:0; }
  .box__run{ height:230vh; }
  .box__stage{
    position:sticky; top:0;
    height:100svh;
    display:flex; align-items:center;
  }
  .box__film{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    aspect-ratio:auto;
    transform:scale(1.24) translateX(9%);
  }
  .box__scrim{
    position:absolute; inset:0; z-index:1;
    height:auto; margin:0;
    background:
      linear-gradient(to right, #000 0%, rgba(0,0,0,.93) 30%, rgba(0,0,0,.5) 54%, rgba(0,0,0,0) 76%),
      linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 16%),
      linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 20%);
  }
  .box{
    position:relative; z-index:2;
    width:100%;
    padding-block:0;
  }
  .box__copy{ max-width:min(62ch,700px); }
  .box .spec th,.box .spec td{ padding:8px 0; }
}

@media (prefers-reduced-motion:reduce){
  .sec--box{ padding-block:0; }
  .box__run{ height:auto; }
  .box__stage{ position:relative; height:auto; display:block; }
  .box__film{ position:relative; height:auto; aspect-ratio:16/9; transform:none; }
  .box__scrim{ position:relative; inset:auto; height:80px; margin-top:-80px; background:linear-gradient(to top,#000,transparent); }
  .box{ padding-block:clamp(28px,4vw,48px) clamp(72px,11vw,150px); }
  .box__copy{ max-width:none; }
}

/* ═══ HOW IT WORKS ════════════════════════════════════════ */
.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,40px);
  margin-top:clamp(48px,6vw,76px);
}
/* the signal reaching each stage in turn */
.steps__rail{
  position:absolute; left:0; right:0; top:-26px; height:2px;
  background:rgba(228,33,28,.16);
  z-index:2; overflow:hidden;
}
.steps__rail i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--red),#FF6A60);
  box-shadow:0 0 14px 1px rgba(228,33,28,.9);
  transform:scaleX(0); transform-origin:0 50%;
}
.step{
  position:relative;
  padding-top:clamp(20px,2.4vw,28px);
}
.step__n{
  display:flex; align-items:center; gap:.7em;
  font:500 .72rem/1 var(--f-mono);
  color:var(--dim);
  letter-spacing:.2em;
  margin-bottom:clamp(28px,4vw,54px);
  transition:color .45s ease;
}
.step__n::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:#3B0E0C;
  transition:background .45s ease, box-shadow .45s ease;
}
.step.is-on .step__n{ color:var(--red); }
.step.is-on .step__n::before{
  background:var(--red);
  box-shadow:0 0 10px 2px rgba(228,33,28,.85);
}
.step__n b{ color:inherit; }
.step h3{
  font-family:var(--f-dsp);
  font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  letter-spacing:-.015em;
  line-height:1.15;
}
.step p{
  font-family:var(--f-text);
  margin-top:12px;
  color:#9C9CA4;
  font-size:.98rem;
  line-height:1.62;
}

/* ═══ PRICING ═════════════════════════════════════════════ */
.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,1.8vw,22px);
  margin-top:clamp(40px,5vw,68px);
  align-items:stretch;        /* one height, so the buttons align */
}
.plan{
  position:relative;
  border:1px solid transparent;
  background:var(--panel);
  border-radius:3px;
  padding:clamp(26px,3vw,36px);
  display:flex; flex-direction:column;
  transition:background .3s;
}
.plan:hover{ background:#121214; }
.plan--featured{
  border-color:rgba(228,33,28,.55);
  box-shadow:0 0 60px -22px rgba(228,33,28,.85);
  background:linear-gradient(180deg,#120607 0%, var(--panel) 42%);
}
.plan__flag{
  position:absolute; top:0; left:0;
  transform:translateY(-50%);
  margin-left:clamp(26px,3vw,36px);
  padding:5px 10px;
  background:var(--red); color:#fff;
  font:600 .6rem/1 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase;
}
.plan__name{
  font-family:var(--f-dsp);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-.01em;
}
.plan__price{
  display:flex; align-items:baseline; gap:.35em;
  margin:14px 0 clamp(24px,2.8vw,32px);
}
.plan__price b{
  font-family:var(--f-dsp);
  font-weight:900;
  font-size:clamp(3rem,5vw,4rem);
  line-height:.9;
  letter-spacing:-.045em;
}
.plan__price span{
  font:400 .82rem/1 var(--f-mono);
  color:var(--dim);
  letter-spacing:.06em;
}
.plan__list{ display:grid; gap:11px; margin-bottom:clamp(26px,3vw,34px); }
.plan__list li{
  font-family:var(--f-text);
  position:relative;
  padding-left:22px;
  font-size:.95rem;
  line-height:1.45;
  color:#B9B9C0;
}
.plan__list li::before{
  position:absolute; left:0; top:.62em;
  width:.85em; height:.374em;
  color:var(--red);
}
.plan__cta{ margin-top:auto; width:100%; }

/* ═══ FAQ ═════════════════════════════════════════════════ */
.faq{
  display:grid;
  /* Georgian sets "შეუკვეთავ." at about 500px, so the heading column
     has to hold that much or the word spills into the gap */
  grid-template-columns:minmax(500px,.62fr) 1.38fr;
  gap:clamp(44px,6.5vw,112px);
  align-items:start;
}
.faq__head{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.faq__list{ border-top:1px solid var(--rule); }

.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--f-dsp);
  font-weight:600;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.35;
  transition:color .2s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+";
  margin-left:auto;
  font:400 1.3rem/1 var(--f-mono);
  color:var(--red);
  transition:transform .3s;
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:var(--red); }
.qa__body{ padding:0 0 26px; max-width:62ch; }
.qa__body p{ font-family:var(--f-text); color:#9C9CA4; font-size:1rem; line-height:1.66; }

@media (max-width:1180px){
  .faq{ grid-template-columns:1fr; gap:clamp(32px,5vw,56px); }
  .faq__head{ position:static; }
}

/* ═══ CTA ═════════════════════════════════════════════════ */
.sec--cta{ text-align:center; overflow:hidden; }
.cta{ position:relative; }
.cta__star{
  display:block; width:clamp(54px,7vw,86px); margin:0 auto clamp(24px,3vw,34px);
  filter:drop-shadow(0 0 40px rgba(228,33,28,.7));
}
.cta__row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(28px,3.4vw,42px);
}
.cta__fine{
  margin-top:clamp(20px,2.4vw,28px);
  font:400 .74rem/1.5 var(--f-mono);
  letter-spacing:.06em;
  color:var(--dim);
}

/* ═══ WEBGL SIGNAL FIELD (closing section) ════════════════ */
.sec--cta{ position:relative; }
.cta__field{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.cta__field.is-on{ opacity:1; }
.sec--cta .wrap{ position:relative; z-index:1; }
/* hold the field back from behind the words */
.sec--cta .wrap::before{
  content:"";
  position:absolute; inset:-8% -12%;
  background:radial-gradient(closest-side, rgba(0,0,0,.92), rgba(0,0,0,.6) 55%, transparent 78%);
  z-index:-1; pointer-events:none;
}

/* ═══ MOBILE ORDER DOCK ═══════════════════════════════════ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:98;
  display:none; align-items:center; gap:14px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translateY(110%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.dock.is-on{ transform:none; }
.dock__price{
  display:flex; align-items:baseline; gap:.35em;
  margin-right:auto;
}
.dock__price b{
  font-family:var(--f-dsp); font-weight:900;
  font-size:1.5rem; letter-spacing:-.03em;
}
.dock__price span{
  font:400 .72rem/1 var(--f-mono); letter-spacing:.06em; color:var(--dim);
}
.dock__cta{ padding:.85em 1.5em; }
@media (max-width:900px){ .dock{ display:flex; } }
@media (prefers-reduced-motion:reduce){ .dock{ transition:none; } }

/* ═══ NAV — current section ═══════════════════════════════ */
.hdr__nav a[aria-current="true"]{ color:var(--white); }

/* ═══ FOOTER ══════════════════════════════════════════════ */
.ftr{
  padding-block:clamp(56px,7vw,96px) clamp(28px,3vw,40px);
}
.ftr__logo{
  width:min(46vw,300px); height:auto;
  margin-bottom:clamp(36px,5vw,60px);
}
.ftr__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(24px,3vw,40px);
  padding-bottom:clamp(32px,4vw,48px);
}
.ftr__cols p{ font-family:var(--f-text); color:var(--dim); font-size:.92rem; line-height:1.75; }
.ftr__lbl{
  font:500 .66rem/1 var(--f-mono) !important;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--white) !important;
  margin-bottom:14px !important;
}
.ftr__cols a{ text-decoration:none; transition:color .2s; }
.ftr__cols a:hover{ color:var(--red); }
.ftr__base{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px 28px;
  margin-top:clamp(24px,3vw,32px);
  font:400 .72rem/1 var(--f-mono);
  letter-spacing:.08em;
  color:var(--dim);
}

/* who built it — grey at rest, in its own colours on hover */
.ftr__by{
  display:inline-flex; align-items:center;
  font-size:.78rem;
  text-decoration:none;
  color:var(--dim);
  transition:color .35s ease;
}
.ftr__by:hover{ color:#B9B9C0; }

.ftr__by-mark{
  position:relative;
  display:block;
  width:134px; height:22px;
  margin-left:.6em;          /* the Georgian suffix hugs the mark, so no gap after */
}
.ftr__by-suffix{ margin-left:.1em; }
.ftr__by-mark img{
  position:absolute; inset:0;
  width:100%; height:100%;
  transition:opacity .35s ease;
}
.ftr__by-mono{ opacity:.42; }
/* their navy sits at luma 48 — lifted so it reads on black */
.ftr__by-color{ opacity:0; filter:brightness(1.4) saturate(1.05); }
.ftr__by:hover .ftr__by-mono{ opacity:0; }
.ftr__by:hover .ftr__by-color{ opacity:1; }

@media (max-width:520px){
  .ftr__base{ justify-content:flex-start; }
}

/* ── scroll-in reveal ─────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; }
}