/* ============================================================
   MedOrion Awards 2026 — Apple Dark Aesthetic
   Monochrome black, ruby accents, strict minimalism.
   ============================================================ */

:root{
  /* ground */
  --black:#000000;
  --bg:#0A0A0C;
  --bg-2:#0D0D10;

  /* glass */
  --glass:rgba(255,255,255,.03);
  --glass-hi:rgba(255,255,255,.055);
  --stroke:rgba(255,255,255,.08);
  --stroke-hi:rgba(255,255,255,.14);
  --hairline:rgba(255,255,255,.10);

  /* ink */
  --white:#FFFFFF;
  --grey:#A1A1A6;
  --graphite:#86868B;
  --dim:#6E6E73;

  /* ruby */
  --ruby:#E50914;
  --ruby-deep:#8B0000;
  --ruby-soft:rgba(229,9,20,.30);
  --ruby-glow:rgba(229,9,20,.22);

  --sans:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --ticker-h:46px;
  --max:1180px;
  --pad:clamp(20px,4.5vw,40px);
  --sec:clamp(76px,9vw,148px);
  --r-card:28px;
  --r-box:clamp(22px,2.6vw,32px);

  --ease:cubic-bezier(.22,.8,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* anchors must clear both the ticker and the nav */
  scroll-padding-top:calc(var(--ticker-h) + 92px);
  background:var(--bg);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  /* make room for the fixed ticker */
  padding-top:var(--ticker-h);
  background:var(--bg);
  color:var(--grey);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

::selection{background:var(--ruby);color:#fff}
:focus-visible{outline:2px solid var(--ruby);outline-offset:3px;border-radius:6px}

/* ---------- primitives ---------- */

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

section{position:relative;padding-block:var(--sec)}

/* ---------- light band ----------
   A whole section flipped to paper, so the page breathes instead of
   running as one unbroken black column. Everything here is a token
   override — no component is rewritten. */
section.light{
  background:#F4F4F6;
  color:#55555A;
  --glass:#FFFFFF;
  --glass-hi:#FFFFFF;
  --stroke:rgba(0,0,0,.09);
  --stroke-hi:rgba(0,0,0,.16);
  --hairline:rgba(0,0,0,.10);
  --white:#0A0A0C;
  --grey:#55555A;
  --graphite:#7B7B82;
  --dim:#8A8A90;
}
.light .mute{
  background:linear-gradient(180deg,#4C4C52 0%,#8E8E95 62%,#A6A6AD 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.light .lead{color:#5A5A60}
.light .card{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05)}
.light .card:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.10),0 0 0 1px var(--ruby-soft);
  background:#fff;
}
.light .card-icon{background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.10)}
.light .card-tag{border-color:rgba(0,0,0,.12);color:#6E6E75}
.light .card-note{color:var(--ruby)}
/* the cursor glow is built for black — on paper it just muddies the card */
.light .card::after{display:none}
.light .note-bar{background:#fff;border-color:rgba(0,0,0,.09)}
.light .pull{background:#fff;border-color:rgba(0,0,0,.09)}
.light .pull p{color:#55555A}
.light .pull footer{color:#8A8A90}
.light .btn{background:#0A0A0C;color:#fff}
/* channel tiles are already a light chip — on paper they need their own
   white and a border, otherwise they melt into the band */
.light .chip{background:#fff;border-color:rgba(0,0,0,.09)}
.light .chip:hover{box-shadow:0 14px 34px rgba(0,0,0,.12),0 0 0 1px var(--ruby-soft)}
.light .pr-icon{background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.10)}
.light .pr-list li{border-color:rgba(0,0,0,.09)}
.light .pr-list strong{color:#0A0A0C}
.light .media-note{background:#fff;border-color:rgba(0,0,0,.09)}
.light .stat-num,.light .pr-365{color:#0A0A0C}
/* a light band sits against black on both sides — no hairline needed */
.light + section::before,
section.light::before{display:none}
/* hairline between sections instead of colour blocks */
section + section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - 2*var(--pad),var(--max));height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline) 22%,var(--hairline) 78%,transparent);
}

/* headings: massive, white, tight */
h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--white);
  margin:0;
  text-wrap:balance;
}
/* the vw term has to carry small screens too — a high rem floor clips
   long Ukrainian compounds like "beauty-індустрії" on a 375px phone */
h1{
  font-size:clamp(1.95rem,5.4vw,3.4rem);
  line-height:1.07;font-weight:700;
  overflow-wrap:break-word;
}
h2{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.1;margin-bottom:20px}
h3{font-size:clamp(1.06rem,1.6vw,1.28rem);line-height:1.3;letter-spacing:-.022em;font-weight:600}
h4{font-size:1rem;letter-spacing:-.02em;font-weight:600}

/* a phrase that has to land: ruby, with a hairline under it */
.mark{
  color:var(--ruby);font-weight:600;
  box-shadow:inset 0 -2px 0 0 rgba(229,9,20,.35);
}
/* the quiet half of a sentence whose first half is the point */
.soft{color:var(--graphite);font-weight:400}

/* key words fade into cool graphite */
.mute{
  background:linear-gradient(180deg,#D8D8DD 0%,var(--graphite) 58%,#6C6C71 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--graphite);
}

.lead{
  font-size:clamp(1.06rem,1.45vw,1.26rem);
  line-height:1.66;
  color:#B6B6BC;
  max-width:62ch;
  margin:0;
  letter-spacing:-.013em;
}

/* eyebrow: quiet ruby label with a short rule, so every section opens
   the same way and the page gets a visible rhythm */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ruby);
  margin:0 0 16px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,var(--ruby));
}

.sec-head{max-width:820px;margin-bottom:clamp(34px,4.4vw,60px)}
.ig-link{
  display:inline-flex;align-items:center;gap:9px;
  margin:-8px 0 18px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--stroke);
  background:var(--glass);
  font-size:13.5px;font-weight:500;color:var(--grey);
  transition:border-color .4s var(--ease),color .4s var(--ease),
             background .4s var(--ease);
}
.ig-link .ic{width:17px;height:17px;color:var(--ruby)}
.ig-link:hover{border-color:var(--ruby-soft);color:var(--white);background:var(--glass-hi)}
.sec-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
/* a passage lifted out of the flow — wider type, a ruby rule down the side */
.pull{
  margin:0 0 clamp(30px,3.6vw,46px);
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px);
  border-radius:var(--r-card);
  border:1px solid var(--stroke);
  border-left:2px solid var(--ruby);
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  max-width:860px;
}
.pull p{
  margin:0 0 14px;
  font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6;
  color:var(--grey);letter-spacing:-.011em;
}
.pull p:last-of-type{margin-bottom:18px}
.pull footer{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:500;color:var(--dim);
}
.pull footer .ic{width:16px;height:16px;color:var(--graphite);flex-shrink:0}

/* ============================================================
   СУЗІРʼЯ ОРІОНА
   Зорі спалахують одна за одною, між ними промальовуються лінії,
   і в центрі підіймається статуетка. Усе на CSS-переходах: JS лише
   вимірює довжину ліній і додає клас, коли блок входить у кадр.
   ============================================================ */
/* ---------- expert board ----------
   Рада живе всередині блоку лауреатів, тож її треба відбити:
   волосяна лінія на всю ширину і власний підзаголовок. */
/* два підблоки в одній секції: кожен має свій відступ згори */
#residents,#board{scroll-margin-top:calc(var(--ticker-h) + 100px)}
.bs-title{margin-top:clamp(30px,3.4vw,44px)}

.split-rule{
  height:1px;margin:clamp(52px,6vw,84px) 0 clamp(34px,4vw,54px);
  background:linear-gradient(90deg,transparent,var(--hairline) 18%,
             var(--hairline) 82%,transparent);
}

.board-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
  margin-bottom:clamp(30px,3.6vw,48px);
}
.board-card{
  padding:clamp(20px,2.4vw,30px);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-card);
  border:1px solid var(--stroke);
  background:var(--glass);
  transition:border-color .45s var(--ease),transform .45s var(--ease),
             box-shadow .45s var(--ease);
}
.board-card:hover{
  border-color:var(--ruby-soft);transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(0,0,0,.10);
}
.bc-num{
  display:block;margin-bottom:14px;
  font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--ruby);
}
.board-card h3{margin-bottom:6px}
.bc-en{
  margin:0;font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:var(--dim);
}

.board-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,40px);align-items:start;
}
.bs-title{margin-bottom:18px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{
  position:relative;padding:11px 0 11px 30px;
  border-bottom:1px solid var(--hairline);
  font-size:15px;line-height:1.5;color:var(--grey);
}
.ticks li:last-child{border-bottom:0}
.ticks li::before{
  content:"";position:absolute;left:2px;top:19px;
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--ruby);
}
.board-split .pull{margin-bottom:0;max-width:none}
.sec-cta .btn{padding:16px 32px;min-height:54px}
.sec-head.center{margin-inline:auto;text-align:center}

/* ---------- capsule badge ---------- */
.capsule{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  color:var(--grey);
  line-height:1.4;
}
.capsule .sep{width:3px;height:3px;border-radius:50%;background:var(--ruby);flex-shrink:0}
/* the venue name has a shorter twin that only phones use */
.cap-short{display:none}
.capsule .dot{
  width:6px;height:6px;border-radius:50%;background:var(--ruby);flex-shrink:0;
  box-shadow:0 0 10px rgba(229,9,20,.9);
  animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .capsule .dot{animation:none} }

/* ---------- buttons ---------- */
.btn{
  position:relative;
  /* isolate keeps the negative-z halo inside this button's stacking context.
     No overflow:hidden — the halo has to bleed past the edge. */
  isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 30px;
  border-radius:999px;border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  text-align:center;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease);
}
/* ---------- star button ----------
   A dark pill carrying a hairline ring and a light arc that travels around
   the perimeter. The arc is a conic gradient whose angle is animated;
   masking it to the padding box leaves only the 1px ring visible.
------------------------------------ */
@property --star-a{ syntax:"<angle>"; initial-value:0deg; inherits:false; }

.btn{
  background:#0D0D10;
  color:var(--white);
  border:1px solid rgba(255,255,255,.12);
  --star-light:var(--ruby);
  --star-hot:#FF6B72;
}
.btn:hover{transform:translateY(-1px)}

@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .btn{border-color:transparent}
  .btn::before{
    content:"";position:absolute;inset:0;z-index:0;
    border-radius:inherit;padding:1px;
    background:conic-gradient(from var(--star-a),
      rgba(255,255,255,.11)  0deg,
      rgba(255,255,255,.11) 232deg,
      var(--star-light)     306deg,
      var(--star-hot)       334deg,
      #FFFFFF               344deg,
      var(--star-hot)       352deg,
      rgba(255,255,255,.11) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask-composite:exclude;
    pointer-events:none;
    animation:starSpin 4.4s linear infinite;
  }
}
@keyframes starSpin{ from{--star-a:0deg} to{--star-a:360deg} }

/* the halo the arc drags behind it */
.btn::after{
  content:"";position:absolute;inset:-1px;z-index:-2;
  border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--star-a),
    transparent 0deg,transparent 300deg,
    var(--star-light) 340deg,transparent 360deg);
  filter:blur(7px);
  opacity:.6;
  animation:starSpin 4.4s linear infinite;
}
.btn:hover::after{opacity:.95}

/* per-variant light colour */
.btn-ruby { --star-light:var(--ruby);            --star-hot:#FF6B72 }
.btn-white{ --star-light:rgba(250,250,250,.95);  --star-hot:#FFFFFF }
.btn-ghost{ --star-light:rgba(255,255,255,.75);  --star-hot:#FFFFFF }

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after{animation:none}
  .btn::after{opacity:.35}
}


/* ---------- frosted graphite card ---------- */
.card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(260px,25vw,330px);
  padding:clamp(22px,2.2vw,30px);
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--r-card);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease),box-shadow .45s var(--ease);
}
/* soft ruby light that blooms from the cursor */
.card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             var(--ruby-glow),transparent 68%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover{
  background:var(--glass-hi);
  border-color:var(--ruby-soft);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(229,9,20,.10);
}
.card:hover::before{opacity:1}
.card > *{position:relative;z-index:1}

.card-tag{
  padding:6px 14px;border-radius:999px;
  font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--graphite);
  white-space:nowrap;
}

/* ---------- thin-line thematic icons ---------- */
.ic{
  width:20px;height:20px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.card-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--white);
  transition:color .45s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),box-shadow .45s var(--ease);
}
/* Segment cards carry a round portrait instead of a rounded square once a
   photo exists in assets/img/segments/. Until then the line icon stands in. */
.seg-face{
  position:relative;overflow:hidden;
  width:clamp(56px,5.6vw,68px);height:clamp(56px,5.6vw,68px);
  border-radius:50%;
}
.seg-face img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  border-radius:50%;
  transition:transform .8s var(--ease);
}
.card:hover .seg-face img{transform:scale(1.07)}
/* a hairline ruby ring picks up on hover, like the rest of the card */
.seg-face.has-photo{background:#0C0C0E;border-color:rgba(255,255,255,.14)}

.card:hover .card-icon,
.host:hover .card-icon{
  color:var(--ruby);
  border-color:var(--ruby-soft);
  background:rgba(229,9,20,.08);
  box-shadow:0 0 22px rgba(229,9,20,.18);
}
.card-body{margin-top:auto;padding-top:26px}
.card h3{margin-bottom:9px}
.card p{margin:0;font-size:14px;line-height:1.56;color:var(--grey)}
.card-note{
  display:block;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--stroke);
  font-size:12.5px;font-weight:500;color:var(--ruby);
}

/* ============================================================
   ЗАВАНТАЖЕННЯ
   Чорна завіса з вордмарком і рубіновою смугою, яка після
   заповнення їде вгору й відкриває перший екран.
   ============================================================ */
body.loading{overflow:hidden}

.loader{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  transition:transform 1s cubic-bezier(.76,0,.24,1),
             opacity .5s ease .45s;
}
.loader.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
/* Аварійний вихід. Якщо скрипт не виконався зовсім, завіса зникне сама
   через шість секунд — сторінка ніколи не лишиться замкненою. */
.loader{animation:ldBail 1ms linear 6s forwards}
@keyframes ldBail{to{opacity:0;visibility:hidden;pointer-events:none}}

.ld-inner{width:min(78vw,420px);text-align:center}
.ld-logo{
  width:100%;height:auto;display:block;margin:0 auto 32px;
  opacity:.94;
  animation:ldIn 1s var(--ease) both;
}
@keyframes ldIn{from{opacity:0;transform:translateY(14px)}to{opacity:.94;transform:none}}

.ld-bar{
  position:relative;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.10);
}
.ld-bar i{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,var(--ruby-deep),var(--ruby) 60%,#FF6B72);
  box-shadow:0 0 18px rgba(229,9,20,.6);
  transition:width .35s var(--ease);
}
.ld-meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;
  font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:var(--dim);
}
/* на вузькому екрані підпис різався на два рядки й збивав відсоток */
.ld-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ld-pct{color:var(--grey);font-variant-numeric:tabular-nums;flex-shrink:0}
.ld-pct::after{content:"%"}

/* Без анімацій завіса не потрібна взагалі — показуємо сторінку одразу. */
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  body.loading{overflow:auto}
}

/* ---------- смуга прогресу прокрутки ---------- */
.scroll-prog{
  position:fixed;top:var(--ticker-h);left:0;right:0;z-index:129;
  height:2px;pointer-events:none;
  background:rgba(255,255,255,.06);
  opacity:0;transition:opacity .4s var(--ease);
}
.scroll-prog.on{opacity:1}
.scroll-prog i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--ruby-deep),var(--ruby));
  box-shadow:0 0 12px rgba(229,9,20,.55);
}

/* ---------- поява заголовків ----------
   Заголовок виїжджає з-під власної маски. Робимо це на цілому
   елементі, а не по словах: усередині лежить .mute з градієнтом
   по тексту, і розбиття на слова розірвало б цей градієнт. */
.fx .sec-head h2{
  clip-path:inset(0 0 105% 0);
  transform:translateY(18px);
  transition:clip-path 1.05s var(--ease),transform 1.05s var(--ease);
}
.fx .sec-head h2.on{clip-path:inset(0 0 -25% 0);transform:none}
@media (prefers-reduced-motion:reduce){
  .sec-head h2{clip-path:none;transform:none;transition:none}
}

/* ---------- лінія між блоками промальовується ---------- */
.fx section + section::before{
  transform:translateX(-50%) scaleX(0);
  transform-origin:50% 50%;
  transition:transform 1.3s var(--ease);
}
.fx section.in + section::before,
.fx section + section.in::before{transform:translateX(-50%) scaleX(1)}
@media (prefers-reduced-motion:reduce){
  section + section::before{transform:translateX(-50%) scaleX(1);transition:none}
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}
.d3{transition-delay:.21s}.d4{transition-delay:.28s}
.d5{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ============================================================
   TICKER — a press strip pinned above the nav
   ============================================================ */
.ticker{
  position:fixed;top:0;left:0;right:0;z-index:130;
  height:var(--ticker-h);
  display:flex;align-items:center;
  overflow:hidden;
  /* one solid white band across the top */
  background:#FFFFFF;
}
/* soften both ends so logos fade in and out instead of getting cut */
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(30px,6vw,72px);
  z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#FFFFFF 18%,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,#FFFFFF 18%,transparent)}

.ticker-track{
  display:flex;align-items:center;gap:clamp(26px,3.4vw,46px);
  width:max-content;
  padding-left:clamp(26px,3.4vw,46px);
  animation:marquee 46s linear infinite;
  will-change:transform;
}
/* Only a real pointer pauses the band. On touch, :hover sticks after a tap
   and the marquee would sit frozen until the user tapped somewhere else —
   which reads as the ticker randomly hanging. */
@media (hover:hover) and (pointer:fine){
  .ticker:hover .ticker-track{animation-play-state:paused}
}
/* the track is duplicated by JS, so -50% lands exactly on the seam */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tk-label{
  flex-shrink:0;
  font-size:12px;font-weight:700;letter-spacing:-.01em;
  color:#0F0F11;white-space:nowrap;
}
/* logos sit straight on the white band — no tiles */
.tk{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* explicit height, not max-height: these SVGs carry no intrinsic size and
   would collapse to 0x0 in a flex row without a definite cross size */
.tk img{height:20px;width:auto;max-width:104px;object-fit:contain}
.tk img.lightmark{filter:invert(1) brightness(.3)}
.tk .wordmark{font-size:12px;font-weight:700;letter-spacing:-.01em;color:#0F0F11;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:var(--ticker-h);left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav.solid{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom-color:var(--stroke);
}
.nav-logo{display:flex;align-items:center;flex-shrink:0;min-height:44px;padding-right:8px}
.nav-logo img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.95}

.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.nav-links a{
  position:relative;
  font-size:13.5px;font-weight:400;color:var(--graphite);
  padding-bottom:7px;
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:var(--ruby);box-shadow:0 0 8px rgba(229,9,20,.9);
  opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after{opacity:1;transform:none}

.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-cta .btn{min-height:42px;padding:10px 22px;font-size:13px}

.burger{
  display:none;
  width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:999px;
  cursor:pointer;
}
.burger span{
  position:relative;display:block;width:16px;height:1.4px;background:var(--white);
  transition:background .2s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1.4px;background:var(--white);
  transition:transform .35s var(--ease),top .35s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--ticker-h) 0 0 0;z-index:110;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:100px var(--pad) 40px;
  background:rgba(6,6,8,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{transform:none}
.mobile-menu a{
  font-size:clamp(1.45rem,6vw,2rem);font-weight:600;letter-spacing:-.03em;
  color:var(--white);
  padding:13px 0;border-bottom:1px solid var(--stroke);
}
.mobile-menu .btn{margin-top:28px;align-self:flex-start}
body.locked{overflow:hidden}

/* ============================================================
   1. HERO — centred Keynote composition, no object
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--ticker-h));
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding-block:clamp(64px,7.4vh,88px) clamp(22px,2.8vh,38px);
  background:var(--black);
  /* confines the shader's screen blend to the hero's own sky */
  isolation:isolate;
}
/* the ruby planet standing behind everything */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  display:block;pointer-events:none;
}
.hero-bg img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;
  /* held back so white type keeps its contrast over the glow */
  filter:brightness(.68) saturate(1.04);
}

/* animated ruby gradient (WebGL) — silky blades of light on black.
   Screened over the planet: the shader's black stays invisible and only
   its blades of light travel across the sky. */
.hero-gradient{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  display:block;pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity 1.2s var(--ease);
}
.hero-gradient.lit{opacity:.5}

/* Darkens the lower half where the copy sits, keeping the headline readable
   over the moving blades of the shader. */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% 88%,rgba(0,0,0,.82) 0%,rgba(0,0,0,.52) 44%,transparent 76%),
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.10) 18%,
      rgba(0,0,0,.28) 44%,
      rgba(0,0,0,.68) 100%);
}
/* the ground fades back to page black at the bottom */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom,transparent,var(--bg));
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:3}

/* Stacked, centred: info and logo on top, the hosts in the middle,
   the call to action underneath. */
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.3vw,17px)}
.hero-copy{display:contents}

/* the hosts, cut out, standing on the page itself */
.hero-hosts{
  position:relative;margin:0;
  width:min(100%,560px);
  margin-top:clamp(-6px,-1vw,0px);
}
.hero-hosts img{
  width:auto;max-width:100%;
  /* capped against the viewport so the CTA and the laureate row
     both stay above the fold */
  max-height:clamp(230px,31vh,380px);
  height:auto;display:block;margin-inline:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
}
/* glass name plates beside each host */
.hh-tag{
  position:absolute;z-index:2;
  display:flex;flex-direction:column;gap:2px;
  padding:9px 15px;border-radius:14px;
  background:rgba(12,12,14,.62);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  white-space:nowrap;
  text-align:left;
}
/* kept low enough to sit over the jackets, never across a face */
.hh-left {left:clamp(-14px,-2%,0px);  top:64%}
.hh-right{right:clamp(-14px,-2%,0px); top:53%}
.hh-name{font-size:clamp(.84rem,1.15vw,.98rem);font-weight:600;letter-spacing:-.02em;color:var(--white)}
.hh-role{font-size:10.5px;font-weight:400;color:var(--graphite)}

.hero h1{max-width:24ch;margin:0}
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:6px;
}
.hero-actions .btn{padding:17px 34px;min-height:56px;font-size:15px}

/* ---------- соціальний доказ під кнопкою ---------- */
.proof{
  display:inline-flex;align-items:center;gap:13px;
  margin-top:clamp(14px,1.8vh,22px);
  padding:7px 16px 7px 7px;border-radius:999px;
  border:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.proof:hover{border-color:var(--stroke);background:rgba(255,255,255,.04)}
.proof-faces{display:inline-flex;align-items:center}
.proof-faces img{
  width:clamp(30px,3.2vw,36px);height:clamp(30px,3.2vw,36px);
  border-radius:50%;object-fit:cover;
  border:2px solid #0A0A0C;
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
/* кожне наступне заходить на попереднє */
.proof-faces img + img{margin-left:-12px}
.proof:hover .proof-faces img{border-color:#14090B}
.proof-text{
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--grey);white-space:nowrap;
}
.proof-text b{color:var(--white);font-weight:700}


/* scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;color:var(--dim);
}
.scroll-cue i{
  display:block;width:1px;height:34px;
  background:linear-gradient(to bottom,var(--ruby),transparent);
}

/* ---------- hero wordmark: silver logo with a metallic sheen ---------- */
.hero-logo{
  position:relative;
  width:min(56%,320px);
  margin-inline:auto;
}
/* ruby bloom sitting behind the mark */
.hero-logo::before{
  content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:132%;aspect-ratio:2.4/1;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(229,9,20,.24) 0%,rgba(139,0,0,.10) 42%,transparent 70%);
  filter:blur(26px);
}
.hero-logo img{
  position:relative;z-index:1;
  width:100%;height:auto;
  /* the whole mark catches the light as the highlight crosses it */
  animation:logoGlint 4.6s ease-in-out infinite;
}
@keyframes logoGlint{
  0%,62%,100%{filter:drop-shadow(0 14px 44px rgba(0,0,0,.85)) brightness(1) contrast(1)}
  26%{filter:drop-shadow(0 14px 44px rgba(0,0,0,.85))
             drop-shadow(0 0 22px rgba(255,255,255,.45))
             brightness(1.28) contrast(1.06)}
}

/* the highlight is masked by the logo itself, so it only travels
   across the silver letterforms and never the empty box around them */
.hero-logo .sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:url("../img/logo.png");mask-image:url("../img/logo.png");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  /* a hot core with a softer trailing band — reads as real metal */
  background-image:linear-gradient(104deg,
    transparent 30%,
    rgba(255,255,255,.30) 38%,
    rgba(255,255,255,.85) 45%,
    rgba(255,255,255,1)   49%,
    rgba(255,255,255,.85) 53%,
    rgba(255,255,255,.30) 60%,
    transparent 68%);
  background-size:250% 100%;
  background-repeat:no-repeat;
  background-position:170% 0;
  filter:blur(1px);
  mix-blend-mode:screen;
  animation:sheen 4.6s ease-in-out infinite;
}
@keyframes sheen{
  0%   {background-position:170% 0}
  52%  {background-position:-80% 0}
  100% {background-position:-80% 0}
}

/* glints that pop on the polished points of the mark */
.hero-logo .spark{
  position:absolute;z-index:3;pointer-events:none;
  width:clamp(11px,2.2vw,19px);aspect-ratio:1;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C12.6 8.4 15.6 11.4 24 12 C15.6 12.6 12.6 15.6 12 24 C11.4 15.6 8.4 12.6 0 12 C8.4 11.4 11.4 8.4 12 0 Z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95));
  opacity:0;
  animation:twinkle 4.6s ease-in-out infinite;
}
.hero-logo .spark.s1{left:21%;  top:38%}
.hero-logo .spark.s2{left:12%;  top:62%; animation-delay:.55s}
.hero-logo .spark.s3{left:44%;  top:22%; animation-delay:1.05s}
.hero-logo .spark.s4{left:74%;  top:52%; animation-delay:1.45s}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.25) rotate(0deg)}
  6%     {opacity:1;transform:scale(1)   rotate(40deg)}
  16%    {opacity:0;transform:scale(.3)  rotate(80deg)}
}

@media (prefers-reduced-motion:reduce){
  .hero-logo,.hero-logo img{animation:none}
  .hero-logo img{filter:drop-shadow(0 14px 44px rgba(0,0,0,.85))}
  .hero-logo .sheen,.hero-logo .spark{animation:none;opacity:0}
}

/* ============================================================
   GRIDS
   ============================================================ */
.bento-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,16px)}
.bento-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,16px)}

.bento-report{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,16px)}
.span-2{grid-column:span 2}
.stat-card{min-height:clamp(200px,18vw,240px)}
.stat-num{
  font-size:clamp(2.7rem,5.4vw,4rem);font-weight:600;letter-spacing:-.055em;
  line-height:.94;color:var(--white);font-variant-numeric:tabular-nums;
}
.stat-lab{margin-top:12px;font-size:13.5px;color:var(--grey);line-height:1.5}


/* broadcast video */
.video-block{
  margin-top:clamp(14px,1.6vw,20px);
  padding:clamp(18px,2.2vw,26px);
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--r-card);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.video-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin-bottom:clamp(14px,1.6vw,18px);
}
.video-head h3{margin:0}
/* The broadcaster's own mark. Novy's logo is a dark shape with the letter
   knocked out of it, so it needs the same light chip the channel wall uses —
   dropped straight onto the dark card it disappears. */
.vh-brand{display:inline-flex;align-items:center;gap:12px}
.vh-brand .vh-mark{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;padding:7px;
  background:#F5F5F7;border-radius:12px;
}
.vh-brand img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* The browser's own play button sits dead centre, right over the
   speaker's face. Ours lives in the lower-left corner instead, and the
   native controls only appear once playback has started. */
.video-play{
  position:absolute;left:0;bottom:0;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  margin:clamp(14px,2vw,22px);
  padding:12px 22px 12px 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(10,10,12,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:var(--white);
  font-size:14px;font-weight:600;letter-spacing:-.012em;
  cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             transform .4s var(--ease),opacity .35s var(--ease);
}
.video-play:hover{
  background:rgba(20,10,12,.78);border-color:var(--ruby-soft);
  transform:translateY(-2px);
}
.vp-icon{
  width:34px;height:34px;flex-shrink:0;
  border-radius:50%;background:var(--ruby);
  position:relative;
  box-shadow:0 0 22px rgba(229,9,20,.45);
}
.vp-icon::after{
  content:"";position:absolute;left:53%;top:50%;
  transform:translate(-50%,-50%);
  border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff;
}
.video-frame.playing .video-play{
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s .35s;
}

.video-frame{
  position:relative;overflow:hidden;
  border-radius:clamp(14px,1.6vw,18px);
  border:1px solid var(--stroke);
  background:#000;
  aspect-ratio:16/9;
}
.video-frame video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* photo mosaic */
.mosaic{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,.9vw,12px);margin-top:clamp(12px,1.2vw,16px);
}
.mosaic figure{
  position:relative;margin:0;overflow:hidden;
  border-radius:16px;border:1px solid var(--stroke);
  background:var(--glass);aspect-ratio:4/3;
}
.mosaic img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.mosaic figure:hover img{transform:scale(1.06)}
/* the tail of the gallery is folded away until the + is pressed */
.mosaic figure.mo-more{display:none}
.mosaic.open figure.mo-more{display:block}

.mosaic-more{display:flex;justify-content:center;margin-top:clamp(16px,2vw,24px)}
.more-btn{
  display:inline-flex;align-items:center;gap:12px;
  min-height:48px;padding:13px 26px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--white);
  font-size:14px;font-weight:600;letter-spacing:-.012em;
  cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             transform .4s var(--ease);
}
.more-btn:hover{background:var(--glass-hi);border-color:var(--ruby-soft);transform:translateY(-2px)}
/* the plus is two bars; the vertical one rotates away when the gallery opens */
.more-plus{position:relative;width:14px;height:14px;flex-shrink:0}
.more-plus::before,.more-plus::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--ruby);border-radius:2px;
  transition:transform .45s var(--ease);
}
.more-plus::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.more-plus::after {width:1.5px;height:14px;transform:translate(-50%,-50%)}
.more-btn[aria-expanded="true"] .more-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.more-count{
  font-size:12px;font-weight:600;color:var(--graphite);
  padding-left:12px;border-left:1px solid var(--stroke);
}
.more-btn[aria-expanded="true"] .more-count{display:none}

/* ============================================================
   LAUREATES
   ============================================================ */
.laureates{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.2vw,16px)}
.lau{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-card);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease),box-shadow .45s var(--ease);
}
.lau:hover{
  background:var(--glass-hi);border-color:var(--ruby-soft);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 34px rgba(229,9,20,.10);
}
.lau-face{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(85% 70% at 50% 16%,rgba(229,9,20,.13) 0%,transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 100%);
  border-bottom:1px solid var(--stroke);
}
/* drop a portrait into assets/img/laureates/ -> JS swaps it over the monogram */
/* 4:5 originals crop to 3:4 (and to 1:1 on phones) — bias the crop upward
   so the frame keeps faces instead of centring on the torso */
.lau-face img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  transition:transform .7s var(--ease);
}
.lau.has-link:hover .lau-face img{transform:scale(1.04)}
.monogram{
  position:relative;z-index:1;
  font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;letter-spacing:-.045em;
  color:var(--white);opacity:.9;
}
.lau-body{padding:clamp(15px,1.5vw,20px);display:flex;flex-direction:column;gap:6px;flex:1}
.lau-name{font-size:clamp(.94rem,1.15vw,1.04rem);font-weight:600;letter-spacing:-.022em;color:var(--white);line-height:1.24}
.lau-role{font-size:12.5px;color:var(--dim);line-height:1.45;flex:1}
.lau-tag{
  align-self:flex-start;margin-top:4px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  font-size:10.5px;font-weight:500;color:var(--graphite);
}

/* ---- Instagram link on a laureate card ---- */
.lau{position:relative}
/* stretched overlay: the whole card is the link, but the markup stays flat */
.lau-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.lau.has-link{cursor:pointer}
.lau-ig{
  position:absolute;z-index:2;right:10px;top:10px;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,10,12,.62);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.lau-ig .ic{width:16px;height:16px}
.lau.has-link:hover .lau-ig{
  background:var(--ruby);border-color:var(--ruby);color:#fff;
  box-shadow:0 0 18px rgba(229,9,20,.55);
}
.lau-handle{
  font-size:12px;font-weight:500;color:var(--ruby);
  letter-spacing:-.01em;
}

/* ============================================================
   MEDIA
   ============================================================ */
.channels{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,.9vw,12px)}
/* light press-wall tiles so every channel keeps its own brand colour */
.chip{
  display:flex;align-items:center;justify-content:center;
  min-height:94px;padding:18px;
  background:#F5F5F7;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.chip:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 26px rgba(229,9,20,.18);
}
.chip img{
  max-height:34px;max-width:100%;width:auto;object-fit:contain;
  /* full colour — no grayscale, no inversion */
}
/* the one white-on-transparent mark would vanish on a light tile */
.chip img.lightmark{filter:invert(1) brightness(.35)}
.chip .wordmark{
  font-size:13.5px;font-weight:700;letter-spacing:-.02em;
  color:#15151A;text-align:center;
}

.media-note{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.2vw,16px);margin-top:clamp(14px,1.5vw,18px);
}
.media-note .card{min-height:clamp(180px,15vw,210px)}

/* ============================================================
   HOSTS
   ============================================================ */
.evening-split{display:block}
/* ---------- ruby-sky stage ----------
   The hero treatment, reused mid-page: a figure cut out and standing on the
   ruby planet. No frame and no card — the planet is a halo bleeding out of
   the column behind the figure and fading into the page on every side.
   The halo is sized to the figure rather than to the section: a section is
   far taller than the 4:5 photo, so covering it would zoom the planet
   clean out of frame on a phone.
------------------------------------- */
.sky{overflow-x:clip}
.sky-figure{
  position:relative;isolation:isolate;
  margin:0 auto clamp(30px,4.4vw,52px);
  width:min(100%,540px);
}
.sky-halo{
  position:absolute;z-index:-2;pointer-events:none;display:block;
  left:50%;translate:-50% 0;
  width:min(150%,820px);
  top:-14%;bottom:-10%;
}
/* The fade is a mask on the photo itself, not a dark sheet over it: a sheet
   can only reach the page colour at its own corners and leaves a rectangular
   seam. Masked, the planet simply stops existing before the edge. */
/* <picture> is inline by default, so the img's 100%/100% had nothing
   definite to resolve against and the planet came out figure-sized */
.sky-halo picture{display:block;width:100%;height:100%}
.sky-halo img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;
  filter:brightness(.8) saturate(1.03);
  -webkit-mask-image:radial-gradient(70% 58% at 50% 46%,
    #000 0%,rgba(0,0,0,.62) 54%,rgba(0,0,0,.20) 76%,transparent 90%);
          mask-image:radial-gradient(70% 58% at 50% 46%,
    #000 0%,rgba(0,0,0,.62) 54%,rgba(0,0,0,.20) 76%,transparent 90%);
}
/* scoped to the direct child: a bare `.sky-figure img` also caught the
   halo photo and squeezed it down to the subject's height */
.sky-figure > picture img{
  width:auto;max-width:100%;height:auto;
  max-height:clamp(330px,46vh,540px);
  display:block;margin-inline:auto;
  filter:drop-shadow(0 30px 62px rgba(0,0,0,.8));
}
.sky-figure-solo{width:min(100%,430px)}

/* a single figure needs a tighter, darker sky — she is dressed in the same
   red as the planet and would otherwise sink into it */
.sky-figure-solo .sky-halo{width:min(150%,640px)}
.sky-figure-solo .sky-halo img{filter:brightness(.62) saturate(1.02)}

.hosts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,16px)}
.host{
  padding:clamp(24px,2.8vw,38px);
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-card);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease),box-shadow .45s var(--ease);
}
.host:hover{
  background:var(--glass-hi);border-color:var(--ruby-soft);
  transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 34px rgba(229,9,20,.10);
}
.host .card-tag{margin-bottom:18px}
.host-name{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:600;letter-spacing:-.035em;line-height:1.12;margin-bottom:10px;color:var(--white)}
.host p{margin:0;color:var(--grey);font-size:14px}

.note-bar{
  margin-top:clamp(14px,1.5vw,18px);padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--stroke);border-radius:var(--r-card);
  background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.note-bar p{
  margin:0;font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;
  letter-spacing:-.022em;color:var(--white);
}

/* ============================================================
   NOMINATIONS
   ============================================================ */
.noms{border-top:1px solid var(--stroke)}
.nom{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:clamp(14px,2vw,30px);
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--stroke);
  transition:padding-left .5s var(--ease),border-color .5s var(--ease);
}
.nom:hover{padding-left:clamp(8px,1.4vw,18px);border-color:var(--ruby-soft)}
.nom-idx{
  font-size:13px;font-weight:500;letter-spacing:0;
  color:var(--dim);font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.nom:hover .nom-idx{color:var(--ruby)}
.nom-icon{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex-shrink:0;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--grey);
  transition:color .5s var(--ease),border-color .5s var(--ease),
             background .5s var(--ease),box-shadow .5s var(--ease);
}
.nom:hover .nom-icon{
  color:var(--ruby);border-color:var(--ruby-soft);
  background:rgba(229,9,20,.08);
  box-shadow:0 0 22px rgba(229,9,20,.18);
}
.nom-title{
  font-size:clamp(1.2rem,2.7vw,2rem);font-weight:600;letter-spacing:-.035em;
  line-height:1.2;color:var(--white);
}
.nom-arrow{
  width:20px;height:20px;flex-shrink:0;color:var(--dim);
  opacity:0;transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s var(--ease);
}
.nom:hover .nom-arrow{opacity:1;transform:none;color:var(--ruby)}

/* ============================================================
   ECOSYSTEM / PR
   ============================================================ */
.synergy{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.8vw,20px);
  margin-bottom:clamp(18px,2.4vw,30px);
  font-size:clamp(1.05rem,2vw,1.6rem);font-weight:600;letter-spacing:-.035em;
  color:var(--white);
}
.synergy .x{color:var(--ruby);font-weight:400}

.pr-split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,3.6vw,60px);align-items:start}
.pr-365{
  font-size:clamp(4.4rem,12vw,9rem);font-weight:700;line-height:.84;
  letter-spacing:-.06em;color:var(--white);
}
.pr-365 small{
  display:block;font-size:12.5px;font-weight:400;letter-spacing:-.005em;
  color:var(--dim);margin-top:16px;
}
.pr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--stroke)}
.pr-list li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--stroke);
}
.pr-icon{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex-shrink:0;margin-top:2px;
  border-radius:13px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--ruby);
}
.pr-list strong{display:block;font-size:clamp(1rem,1.4vw,1.14rem);font-weight:600;letter-spacing:-.025em;color:var(--white);margin-bottom:5px}
.pr-list span{color:var(--grey);font-size:13.5px}

/* ============================================================
   FORM
   ============================================================ */
.form-shell{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,3.6vw,60px);align-items:start;
}
.form-card{
  background:var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-box);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:clamp(22px,2.8vw,38px);
}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px)}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:500;letter-spacing:-.005em;color:var(--graphite)}
.field label .req{color:var(--ruby)}
.field input,.field select,.field textarea{
  width:100%;
  /* 16px keeps iOS from zooming the page on focus */
  font-family:var(--sans);font-size:16px;color:var(--white);
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);border-radius:14px;
  padding:14px 16px;min-height:52px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:108px;resize:vertical;line-height:1.55}
.field .sel{position:relative;display:flex}
.field .sel::after{
  content:"";position:absolute;right:18px;top:50%;pointer-events:none;
  width:8px;height:8px;margin-top:-6px;
  border-right:1.5px solid var(--graphite);border-bottom:1.5px solid var(--graphite);
  transform:rotate(45deg);
}
.field select{padding-right:44px;cursor:pointer}
.field select option{background:#141416;color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ruby);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(229,9,20,.14);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#E5484D}
.field .err{font-size:12px;color:#FF6B6B;display:none}
.field.invalid .err{display:block}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(18px,2.2vw,26px)}
.form-foot .btn{flex:1 1 260px}
.form-note{font-size:12px;color:var(--dim);flex:1 1 200px;line-height:1.5}
.btn[data-loading="true"]{opacity:.6;pointer-events:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{
  display:none;margin-top:14px;padding:13px 16px;border-radius:14px;
  border:1px solid rgba(229,72,77,.4);background:rgba(229,72,77,.09);
  font-size:13px;color:#FF8A8A;
}
.form-error.show{display:block}

/* success modal */
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  position:relative;width:100%;max-width:460px;text-align:center;
  padding:clamp(30px,4.2vw,48px);
  background:#0E0E11;
  border:1px solid var(--stroke-hi);
  border-radius:var(--r-box);
  box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 60px rgba(229,9,20,.10);
  transform:translateY(16px) scale(.98);transition:transform .4s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-mark{
  width:54px;height:54px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--ruby);box-shadow:0 8px 30px rgba(229,9,20,.5);
}
.modal-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-bottom:10px}
.modal-card p{margin:0 0 24px;color:var(--grey);font-size:14px}
.modal-close{
  position:absolute;top:10px;right:10px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:50%;cursor:pointer;
  color:var(--dim);font-size:24px;line-height:1;
}
.modal-close:hover{color:var(--white)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--black);
  border-top:1px solid var(--stroke);
  padding-block:clamp(50px,6vw,80px) 30px;
}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
  padding-bottom:clamp(26px,3.4vw,44px);
  border-bottom:1px solid var(--stroke);
}
.foot-logo img{height:30px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.9}
.foot-grid p{margin:0;color:var(--dim);font-size:13.5px;max-width:38ch}
.foot-h{font-size:11.5px;font-weight:500;color:var(--ruby);margin-bottom:16px}
.foot-list{display:flex;flex-direction:column;gap:11px}
.foot-list a,.foot-list span{color:var(--grey);font-size:14.5px;transition:color .3s var(--ease)}
.foot-list a:hover{color:var(--white)}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:22px;font-size:12px;color:var(--dim);
}

/* sticky mobile CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:none;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--stroke);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%}

.scroll-hint{
  display:none;align-items:center;gap:8px;margin-top:12px;
  font-size:11px;font-weight:400;color:var(--dim);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .laureates{grid-template-columns:repeat(3,1fr)}
  .channels{grid-template-columns:repeat(4,1fr)}
  .bento-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .hero-copy{align-items:center;text-align:center}
  .hero h1{max-width:18ch}
  .hero-hosts{max-width:min(100%,520px);margin-inline:auto}
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .form-shell{grid-template-columns:1fr}
  .pr-split{grid-template-columns:1fr;gap:26px}
  .bento-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-logo{grid-column:1/-1}
}

@media (max-width:960px){
  .board-grid{grid-template-columns:repeat(2,1fr)}
  .board-split{grid-template-columns:1fr;gap:26px}
}

@media (max-width:820px){
  .bento-report{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .media-note{grid-template-columns:1fr}
  .hosts{grid-template-columns:1fr}
}

@media (max-width:700px){
  /* phone hero: the wordmark and the hosts carry the screen, and the
     date capsule is squeezed onto a single line so it stops eating height */
  .nav-logo img{height:33px}
  .hero{padding-block:84px clamp(24px,3vh,38px)}
  .capsule{
    font-size:clamp(9px,2.85vw,11px);
    gap:7px;padding:7px 13px;
    white-space:nowrap;
  }
  .cap-long{display:none}
  .cap-short{display:inline}
  .hero-logo{width:min(66%,252px)}
  .hero-hosts{
    /* breaks out of the wrap padding: the figure's width was the real cap.
       Undoing the padding is exact; 100vw would also count the scrollbar. */
    width:calc(100% + 2*var(--pad));max-width:none;
    margin-inline:calc(-1*var(--pad));
    margin-top:8px;
  }
  .hero-hosts img{max-height:min(50vh,460px)}
  .hero-inner{gap:9px}
  .hero h1{font-size:clamp(1.6rem,6.6vw,2.2rem);max-width:22ch}
  .hero-actions{margin-top:-6px}
  .hh-tag{padding:7px 11px;border-radius:11px}
  .hh-name{font-size:.8rem}
  .hh-role{font-size:9.5px}
  /* the hosts now span the full screen, so the plates come in from the edge */
  .hh-left {left:12px; top:66%}
  .hh-right{right:12px; top:55%}
  /* mid-page figures break the wrap too, exactly like the hero */
  .sky-figure,.sky-figure-solo{
    width:calc(100% + 2*var(--pad));max-width:none;
    margin-inline:calc(-1*var(--pad));
  }
  .sky-figure > picture img{max-height:min(52vh,470px)}

  .sticky-cta{display:block}
  .scroll-cue{display:none}
  /* the arrow is hidden here, but the number and icon still need their own
     columns — otherwise the title wraps onto a second row */
  .nom{grid-template-columns:auto auto 1fr;gap:12px}
  .nom-arrow{display:none}
  .nom-icon{width:40px;height:40px;border-radius:12px}
  .nom-icon .ic{width:18px;height:18px}
  .foot-grid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-actions .btn{width:100%}
  .hero-actions .capsule{justify-content:center}

  /* everything stays on screen at once — no side-scrolling to hunt for logos */
  .channels{grid-template-columns:repeat(3,1fr);gap:8px}
  .chip{min-height:66px;padding:11px;border-radius:14px}
  .chip img{max-height:24px}
  .chip .wordmark{font-size:11.5px}

  .laureates{grid-template-columns:repeat(2,1fr);gap:10px}
  .lau-face{aspect-ratio:1/1}
  .scroll-hint{display:none}
}

@media (max-width:640px){
  .board-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .bento-4{grid-template-columns:1fr}
  .bento-report{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .card{min-height:230px}
  .form-foot .btn{flex:1 1 100%}
}

/* touch devices: no hover lift, no cursor glow */
@media (hover:none){
  .card:hover,.lau:hover,.host:hover,.chip:hover{
    transform:none;box-shadow:none;background:var(--glass);border-color:var(--stroke);
  }
  .card:hover::before{opacity:0}
  .mosaic figure:hover img{transform:none}
  .chip img{opacity:.8}
}

/* ============================================================
   ХВІСТ: правила, які мають перекрити ширші медіазапити вище
   ============================================================ */

/* Рада ділиться інакше, ніж лауреати: людей шість, а не девʼять */
/* Кружечки під кнопкою: на телефоні пʼять аватарів і довгий підпис
   не влазять в один рядок, тому останній ховаємо, а текст переносимо */
@media (max-width:700px){
  .proof{
    gap:11px;padding:6px 14px 6px 6px;
    max-width:100%;
  }
  .proof-faces img:nth-child(5){display:none}
  .proof-text{white-space:normal;font-size:12.5px;text-align:left}
}