/* ═══════════════════════════════════════════════════════════
   TOKENS
   Спільне ядро — золото і графіт. Два світи додають рівно
   по одному акценту кожен. Більше кольорів не вводити.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#07060a;
  --ink:#0b0910;

  /* спільний бренд */
  --gold-1:#c9a84c;
  --gold-2:#f0d080;
  --gold-3:#8f6f2a;

  --text:#efe9de;
  --text-dim:#9b9285;

  --glass:rgba(255,255,255,.045);
  --glass-line:rgba(255,255,255,.10);

  /* світ 1 — Лос-Сантос */
  --ls:#b13cff;
  --ls-soft:#d98cff;
  --ls-deep:#2a0b45;

  /* світ 2 — Фронтир */
  --fr:#e08a2e;
  --fr-soft:#f2b45f;
  --fr-deep:#3a1f0c;

  --nav-h:74px;

  /* ЄДИНИЙ ВЛАСНИК: rAF-цикл пише --mx/--my. Більше ніхто. */
  --mx:50%; --my:40%;

  /* геометрія шва — одне джерело правди для всіх, хто його читає */
  --seam-top:53.5%;
  --seam-bot:46.5%;
  /* Кут шва НЕ пишеться руками. Його рахує rAF-цикл із реальних
     розмірів героя за тими самими --seam-top/--seam-bot, тож на
     будь-якому співвідношенні сторін він точний, а елементи
     лишаються мʼякими градієнтами, а не різаними clip-path. */
  --seam-deg:0deg;

  --ui:'Manrope',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --display:'Cinzel',Georgia,serif;
  --body:'Crimson Pro',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (pointer:fine){body{cursor:none}}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:none}

/* ═══════════════════════════════════════════════════════════
   КУРСОР
   ═══════════════════════════════════════════════════════════ */
.cur,.cur-ring{position:fixed;top:0;left:0;z-index:999;pointer-events:none;will-change:transform}
.cur{
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px;
  background:linear-gradient(135deg,#fff,#f0d080);
  box-shadow:0 0 10px rgba(240,208,128,.9),0 0 26px rgba(201,168,76,.6);
  transform:rotate(45deg);
}
.cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(240,208,128,.42);
  transition:width .25s ease,height .25s ease,margin .25s ease,border-color .25s ease,opacity .25s ease;
}
.cur-ring.hot{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(240,208,128,.85)}
@media (pointer:coarse){.cur,.cur-ring{display:none}}

/* ═══════════════════════════════════════════════════════════
   НАВБАР
   ═══════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,3.6vw,54px);
  border-bottom:1px solid transparent;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
.nav.solid{
  background:rgba(9,7,14,.72);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(255,255,255,.06);
}

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1) 55%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(201,168,76,.55));
}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.21em;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1) 58%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-sub{
  font-family:var(--ui);font-weight:500;font-size:9px;letter-spacing:.36em;
  color:var(--text-dim);margin-top:5px;
}

.nav-links{display:flex;gap:clamp(14px,2vw,32px);align-items:center}
.nav-links a{
  position:relative;font-family:var(--ui);font-weight:500;font-size:13.5px;
  letter-spacing:.06em;color:var(--text-dim);padding:7px 2px;transition:color .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  transform:scaleX(0);transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.btn-dc{
  display:flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:10px;
  border:1px solid rgba(201,168,76,.40);
  background:rgba(201,168,76,.06);
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.08em;
  color:var(--gold-2);transition:background .3s,border-color .3s,box-shadow .3s;
}
.btn-dc:hover{
  background:rgba(201,168,76,.15);
  border-color:rgba(240,208,128,.75);
  box-shadow:0 0 24px rgba(201,168,76,.22);
}
.btn-dc svg{width:16px;height:16px;fill:currentColor;flex:none}

.nav-burger{display:none;width:38px;height:38px;place-items:center;
  border:1px solid var(--glass-line);border-radius:9px;background:var(--glass);color:var(--text-dim)}

/* ═══════════════════════════════════════════════════════════
   ГЕРОЙ — дві половини
   Шов НЕРУХОМИЙ. Наведення міняє тільки transform і opacity —
   жодної анімації layout-властивостей.
   ═══════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}

.side{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
/* Розріз — одна пряма лінія наскрізь. Злам виявився гіршим
   за пряму: око читає його як помилку, а не як заломлення. */
.side-ls{clip-path:polygon(0 0, var(--seam-top) 0, var(--seam-bot) 100%, 0 100%)}
.side-fr{clip-path:polygon(var(--seam-top) 0, 100% 0, 100% 100%, var(--seam-bot) 100%)}

/* Фон світу. --img порожній до появи справжніх скріншотів —
   підміна на фото це буде рівно один рядок. */
.side-bg{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1),filter .6s ease;
  will-change:transform;
}
.side-ls .side-bg{
  background-position:38% 50%;
  background-image:
    var(--img,url('art-gta.webp')),
    radial-gradient(62% 46% at 40% 72%, rgba(190,80,255,.42), transparent 70%),
    radial-gradient(76% 44% at 22% 98%, rgba(255,86,190,.26), transparent 74%),
    radial-gradient(50% 34% at 68% 26%, rgba(96,150,255,.34), transparent 72%),
    linear-gradient(178deg,rgba(36,16,65,.55) 0%,rgba(51,22,90,.42) 32%,rgba(69,26,115,.40) 60%,rgba(23,10,40,.72) 100%);
}
.side-fr .side-bg{
  background-position:62% 50%;
  background-image:
    var(--img,url('art-rdr.webp')),
    radial-gradient(64% 48% at 62% 68%, rgba(255,158,52,.38), transparent 70%),
    radial-gradient(78% 44% at 80% 98%, rgba(255,200,120,.22), transparent 76%),
    radial-gradient(48% 32% at 32% 22%, rgba(255,168,74,.30), transparent 72%),
    linear-gradient(178deg,rgba(65,38,15,.55) 0%,rgba(90,52,19,.40) 30%,rgba(110,63,20,.38) 58%,rgba(30,16,8,.72) 100%);
}

/* горизонт — тонка світла смуга, дає відчуття глибини без фото */
.side::before{
  content:'';position:absolute;left:-10%;right:-10%;top:52%;height:1px;
  background:linear-gradient(90deg,transparent,currentColor,transparent);
  opacity:.30;filter:blur(.4px);
}
.side-ls{color:var(--ls-soft)}
.side-fr{color:var(--fr-soft)}

/* низ кожної половини топиться в чорне, щоб текст читався завжди */
.side-fade{
  position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(180deg,transparent,rgba(6,4,10,.48) 40%,rgba(6,4,10,.94) 100%);
  pointer-events:none;
}
/* верх — під навбар */
.side-fade-top{
  position:absolute;left:0;right:0;top:0;height:32%;
  background:linear-gradient(180deg,rgba(6,4,10,.72),transparent);
  pointer-events:none;
}

/* зерно — одна текстура на весь герой, не на кожну половину */
.hero-grain{
  position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* вінʼєтка — поверх половин, під контентом */
.hero-vig{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, transparent 44%, rgba(4,2,8,.60) 100%);
}
/* курсорне світло — читає --mx/--my, не пише */
.hero-glow{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle 320px at var(--mx) var(--my), rgba(255,238,200,.055), transparent 72%);
}

/* ── ШОВ ───────────────────────────────────────────────── */
.seam{position:absolute;inset:0;z-index:7;pointer-events:none}
/* Лінія шва вирізається З ТИХ САМИХ --seam-top/--seam-bot, що й
   половини. Раніше половини були у відсотках, а лінія — у градусах:
   на 16:9 збігалось, на 21:9 і 2560x1440 розʼїжджалось. Кут більше
   ніде не записаний — його не існує як окремого числа. */
.seam-line{
  position:absolute;inset:0;
  clip-path:polygon(
    calc(var(--seam-top) - 1px) 0,
    calc(var(--seam-top) + 1px) 0,
    calc(var(--seam-bot) + 1px) 100%,
    calc(var(--seam-bot) - 1px) 100%);
  background:linear-gradient(180deg,
    transparent,
    rgba(240,208,128,.30) 14%,
    rgba(240,208,128,.85) 46%,
    rgba(240,208,128,.30) 82%,
    transparent);
}
/* світіння нижнього, відхиленого відрізка */
.seam-glow{
  position:absolute;top:-62vh;height:124vh;left:0;
  width:clamp(160px,16vw,300px);
  transform:translateX(-50%);
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 26% 62% at 50% 50%,
    rgba(255,236,200,.20), transparent 74%);
}

/* ── ЦЕНТР: вордмарк ───────────────────────────────────── */
.hero-center{
  position:absolute;left:50%;top:clamp(96px,17vh,190px);
  transform:translateX(-50%);
  z-index:20;text-align:center;pointer-events:none;
  width:min(92vw,900px);
}
/* локальне затемнення саме під вордмарком — а не глобальне,
   інакше вбиває атмосферу обох половин */
.hero-center::before{
  content:'';position:absolute;left:50%;top:50%;
  width:150%;height:290%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(4,2,8,.80), transparent 70%);
  z-index:-1;
}
.wordmark{
  font-family:var(--display);font-weight:600;
  font-size:clamp(42px,7.6vw,116px);
  letter-spacing:.16em;line-height:1;
  margin-left:.16em; /* компенсація трекінгу праворуч */
  background:linear-gradient(180deg,#fff8e8 0%,var(--gold-2) 34%,var(--gold-1) 62%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 34px rgba(201,168,76,.30));
}
.wordmark-sub{
  margin-top:clamp(10px,1.6vh,20px);
  font-family:var(--ui);font-weight:500;
  font-size:clamp(10px,1.05vw,13px);letter-spacing:.52em;
  color:var(--gold-2);opacity:.82;
  margin-left:.52em;
}
.wordmark-rule{
  margin:clamp(12px,1.8vh,22px) auto 0;width:min(340px,52vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,208,128,.55),transparent);
}

/* ══════════════════════════════════════════════════════════
   ПРЕЛОАДЕР — «вхід у камінь»
   Промінь падає → б'є в камінь → спалах → завіси розходяться
   по лінії шва і відкривають два світи.
   Завіси вирізані з тих самих --seam-top/--seam-bot, тому
   відкриваються рівно вздовж розрізу героя.
   ═════════════════════════════════════════════════════════ */
body.pre-lock{overflow:hidden}

.pre{position:fixed;inset:0;z-index:200;pointer-events:none}
.pre.done{display:none}

/* завіси — це і є чорний екран */
.pre-curtain{
  position:absolute;inset:-2px;background:#050309;
  will-change:transform;
}
.pre-l{
  clip-path:polygon(0 0, var(--seam-top) 0, var(--seam-bot) 100%, 0 100%);
  animation:curtainL .95s cubic-bezier(.7,0,.24,1) 1.45s forwards;
}
.pre-r{
  clip-path:polygon(var(--seam-top) 0, 100% 0, 100% 100%, var(--seam-bot) 100%);
  animation:curtainR .95s cubic-bezier(.7,0,.24,1) 1.45s forwards;
}
@keyframes curtainL{to{transform:translate3d(-102%,0,0)}}
@keyframes curtainR{to{transform:translate3d( 102%,0,0)}}

/* промінь, що падає згори */
/* Обгортку крутить JS (він знає виміряний кут), сам промінь
   тільки росте. Змінна в transform усередині @keyframes
   підставлялась один раз на старті анімації — до того, як JS
   встигав виміряти геометрію, — тому промінь лишався вертикальним. */
.tilt{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-origin:0 0;
  will-change:transform;
}
.pre-beam{
  position:absolute;left:0;top:0;
  width:clamp(140px,14vw,240px);height:56vh;
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) scaleY(0);
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 16% 92% at 50% 100%,
    rgba(255,252,244,.9) 0%, rgba(255,244,222,.22) 40%, transparent 78%);
  animation:preBeam 1.05s cubic-bezier(.5,0,.2,1) .18s forwards;
}
@keyframes preBeam{
  from{transform:translate(-50%,-100%) scaleY(0);opacity:0}
  22% {opacity:1}
  to  {transform:translate(-50%,-100%) scaleY(1);opacity:1}
}

/* камінь: зʼявляється темним, спалахує від удару променя */
.pre-gem{
  position:absolute;left:50%;top:50%;
  width:clamp(84px,7.4vw,124px);height:auto;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;filter:brightness(.35) saturate(.5);
  animation:preGem 1.5s cubic-bezier(.3,.7,.2,1) .62s forwards;
}
/* Камінь прелоадера гасне в піку спалаху — там його не видно,
   а далі камінь героя вже на місці. Інакше в момент розходження
   завіс на екрані два однакові камені. */
@keyframes preGem{
  0%  {opacity:0;  transform:translate(-50%,-50%) scale(.55);
       filter:brightness(.35) saturate(.5)}
  46% {opacity:1;  transform:translate(-50%,-50%) scale(1.02);
       filter:brightness(.8) saturate(.9)}
  53% {opacity:1;  transform:translate(-50%,-50%) scale(1);
       filter:brightness(2.8) saturate(1.5)
       drop-shadow(0 0 60px rgba(230,190,255,.9))}
  62% {opacity:0;  transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;  transform:translate(-50%,-50%) scale(1)}
}

/* спалах у момент удару */
.pre-flash{
  position:absolute;left:50%;top:50%;
  width:60vmax;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.1);
  border-radius:50%;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(220,180,255,.45) 22%,
    rgba(255,200,140,.22) 40%,
    transparent 68%);
  animation:preFlash .85s cubic-bezier(.2,.8,.3,1) 1.26s forwards;
}
@keyframes preFlash{
  0%  {opacity:0;   transform:translate(-50%,-50%) scale(.06)}
  18% {opacity:1}
  100%{opacity:0;   transform:translate(-50%,-50%) scale(1)}
}

.pre-skip{
  position:absolute;right:26px;bottom:24px;pointer-events:auto;
  padding:9px 16px;border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.22em;
  color:rgba(239,233,222,.5);cursor:pointer;
  opacity:0;animation:skipIn .5s ease .7s forwards;
  transition:color .3s,border-color .3s;
}
.pre-skip:hover{color:var(--text);border-color:rgba(240,208,128,.5)}
@keyframes skipIn{to{opacity:1}}

/* ══════════════════════════════════════════════════════════
   ПИЛ У ПОВІТРІ — глибина фону
   12 елементів, тільки transform/opacity, без blur.
   ═════════════════════════════════════════════════════════ */
.motes{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;border-radius:50%;
  mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,246,226,1),rgba(255,236,200,.5) 42%,transparent 70%);
  box-shadow:0 0 10px rgba(255,238,205,.55);
  animation:moteDrift linear infinite;
  will-change:transform;
}
@keyframes moteDrift{
  0%  {transform:translate3d(0,0,0);opacity:0}
  10% {opacity:.9}
  86% {opacity:.7}
  100%{transform:translate3d(var(--dx),-124vh,0);opacity:0}
}

/* ══════════════════════════════════════════════════════════
   ДИСПЕРСІЯ — призма на осі
   Один промінь падає згори у камінь, камінь розкладає його
   на два світи. Це і є назва бренду, показана буквально.
   Уся конструкція — три шари, анімуються тільки opacity
   і transform. Blur лише на двох елементах.
   ═════════════════════════════════════════════════════════ */
.prism-stage{
  position:absolute;left:50%;top:50%;z-index:22;
  width:0;height:0;pointer-events:none;
  transform:translate(-50%,-50%);
}

/* Промінь згори. Живе в шарі шва і вирізається з тих самих змінних,
   тому падає точно вздовж розрізу на будь-якому співвідношенні сторін. */
.beam-in{
  position:absolute;left:0;top:0;
  width:clamp(150px,15vw,260px);height:52vh;
  /* нижній край рівно в камені; поворот — на обгортці .tilt */
  transform-origin:50% 100%;
  transform:translate(-50%,-100%);
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 20% 92% at 50% 100%,
    rgba(255,250,238,.62) 0%, rgba(255,244,222,.16) 40%, transparent 76%);
  animation:beamPulse 5.5s ease-in-out infinite;
}
@keyframes beamPulse{
  0%,100%{opacity:.72}
  50%    {opacity:1}
}

/* обгортка каменя — сюди пише паралакс від курсора */
.prism-tilt{position:absolute;left:0;top:0;will-change:transform}

/* камінь */
.prism{
  position:absolute;left:50%;top:50%;
  width:clamp(84px,7.4vw,124px);height:auto;
  transform:translate(-50%,-50%);
  filter:
    drop-shadow(0 0 26px rgba(190,120,255,.55))
    drop-shadow(0 0 64px rgba(255,190,120,.30));
  animation:prismFloat 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes prismFloat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,calc(-50% - 9px)) scale(1.025)}
}
/* внутрішнє світло каменя */
.prism-core{
  position:absolute;left:50%;top:50%;
  width:clamp(120px,10vw,180px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,240,255,.30),transparent 62%);
  filter:blur(10px);
  animation:beamPulse 5.5s ease-in-out infinite;
}

/* віяло розкладеного світла — вниз, у два світи */
.rays{
  position:absolute;left:50%;top:50%;
  width:1px;height:1px;
}
/* Промінь — не прямокутник, а мʼяке еліптичне світло, що згасає
   в УСІ боки, і додається до сцени (screen), а не накладається
   альфою. Прямокутник з вертикальним градієнтом дає різані бокові
   краї, і накладені прямокутники читаються як пластикові трикутники.
   Blur тут не потрібен — градієнт уже мʼякий, тож нуль вартості. */
.ray{
  position:absolute;left:0;top:0;
  width:clamp(300px,30vw,520px);
  height:82vh;
  transform-origin:50% 0;
  mix-blend-mode:screen;
  opacity:.34;
  background:radial-gradient(ellipse 34% 78% at 50% 2%,
    var(--c) 0%, var(--c-mid) 34%, transparent 74%);
  animation:rayBreathe 9s ease-in-out infinite;
}
.ray-l{--c:rgba(186,104,255,.50); --c-mid:rgba(150,70,220,.16)}
.ray-r{--c:rgba(255,176,88,.46);  --c-mid:rgba(220,130,50,.15)}
.ray-c{--c:rgba(255,246,228,.34); --c-mid:rgba(255,230,190,.10)}

/* світлова калюжа під каменем — стик усіх променів,
   інакше видно, що вони починаються «з нізвідки» */
.ray-pool{
  position:absolute;left:50%;top:0;
  width:clamp(260px,26vw,420px);aspect-ratio:1;
  transform:translate(-50%,-24%);
  mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,238,215,.22),transparent 62%);
  animation:beamPulse 5.5s ease-in-out infinite;
}

/* кути віяла — по одному власнику на промінь */
/* Кути навмисно нерівномірні. Симетричне віяло читається як
   згенероване; нерівне — як фізичне. */
.r1{transform:translateX(-50%) rotate(-37deg)}
.r2{transform:translateX(-50%) rotate(-17deg)}
.r3{transform:translateX(-50%) rotate( -4deg)}
.r4{transform:translateX(-50%) rotate( 15deg)}
.r5{transform:translateX(-50%) rotate( 31deg)}
.r2{animation-delay:-2.1s}
.r3{animation-delay:-4.4s}
.r4{animation-delay:-6.2s}
.r5{animation-delay:-7.7s}
@keyframes rayBreathe{
  0%,100%{opacity:.20}
  50%    {opacity:.40}
}

/* ── КОНТЕНТ ПОЛОВИНИ ──────────────────────────────────── */
.side-in{
  position:relative;z-index:10;
  width:100%;
  padding:0 clamp(22px,4.4vw,72px) clamp(52px,9vh,104px);
  display:flex;flex-direction:column;
}
.side-ls .side-in{align-items:flex-start;text-align:left;padding-right:22%}
.side-fr .side-in{align-items:flex-end;text-align:right;padding-left:22%}

.side-kicker{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.38em;
  color:var(--text-dim);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.side-kicker::before{
  content:'';width:26px;height:1px;background:currentColor;opacity:.5;
}
.side-fr .side-kicker{flex-direction:row-reverse}

.side-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,5.4vw,82px);line-height:.94;letter-spacing:.02em;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.7);
}
.side-title em{
  display:block;font-style:normal;font-weight:500;
  font-size:clamp(15px,1.55vw,23px);letter-spacing:.34em;
  margin-top:12px;
}
.side-ls .side-title em{color:var(--ls-soft)}
.side-fr .side-title em{color:var(--fr-soft)}

.side-tag{
  margin-top:clamp(16px,2.4vh,26px);
  font-family:var(--ui);font-weight:600;font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.16em;
}
.side-ls .side-tag{color:var(--ls-soft)}
.side-fr .side-tag{color:var(--fr-soft)}

.side-copy{
  margin-top:12px;max-width:33ch;
  font-size:clamp(16px,1.25vw,18.5px);line-height:1.58;
  color:rgba(239,233,222,.80);
}

/* CTA */
.cta{
  position:relative;margin-top:clamp(22px,3.4vh,36px);
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 30px;border-radius:12px;
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.16em;
  border:1px solid;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,background-color .35s ease;
  will-change:transform;
}
/* transform кнопки належить rAF-циклу (магніт), тому в :hover його
   немає — інакше два власники однієї властивості. */
.cta{will-change:transform}
.cta .arw{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.cta:hover .arw{transform:translateX(5px)}

/* курсор фарбується у світ, над яким він зараз */
body[data-world="ls"] .cur{background:linear-gradient(135deg,#fff,#d9b6ff);
  box-shadow:0 0 10px rgba(216,182,255,.95),0 0 28px rgba(138,67,251,.7)}
body[data-world="ls"] .cur-ring{border-color:rgba(200,130,255,.62)}
body[data-world="fr"] .cur{background:linear-gradient(135deg,#fff,#ffd79a);
  box-shadow:0 0 10px rgba(255,215,154,.95),0 0 28px rgba(224,138,46,.7)}
body[data-world="fr"] .cur-ring{border-color:rgba(255,190,110,.62)}

/* світло під курсором теж набуває кольору світу */
.hero-glow{transition:background-color .4s ease}
.hero[data-hover="ls"] .hero-glow{
  background:radial-gradient(circle 340px at var(--mx) var(--my),
    rgba(196,120,255,.10), transparent 72%);
}
.hero[data-hover="fr"] .hero-glow{
  background:radial-gradient(circle 340px at var(--mx) var(--my),
    rgba(255,190,120,.10), transparent 72%);
}

.cta-ls{
  color:#f4e7ff;border-color:rgba(177,60,255,.55);
  background:rgba(177,60,255,.13);
  box-shadow:0 0 0 rgba(177,60,255,0);
}
.cta-ls:hover{background:rgba(177,60,255,.24);box-shadow:0 10px 40px rgba(177,60,255,.30)}

.cta-fr{
  color:#fff2dd;border-color:rgba(224,138,46,.58);
  background:rgba(224,138,46,.13);
}
.cta-fr:hover{background:rgba(224,138,46,.24);box-shadow:0 10px 40px rgba(224,138,46,.30)}

/* Наведення на половину: лише transform фону + opacity сусіда.
   Layout не рухається — шов стоїть як укопаний. */
.hero[data-hover="ls"] .side-ls .side-bg{transform:scale(1.045)}
.hero[data-hover="ls"] .side-fr .side-bg{filter:saturate(.55) brightness(.62)}
.hero[data-hover="ls"] .side-fr .side-in{opacity:.55}

.hero[data-hover="fr"] .side-fr .side-bg{transform:scale(1.045)}
.hero[data-hover="fr"] .side-ls .side-bg{filter:saturate(.55) brightness(.62)}
.hero[data-hover="fr"] .side-ls .side-in{opacity:.55}

.side-in{transition:opacity .5s ease}

/* ── підказка скролу ───────────────────────────────────── */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;z-index:24;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.34em;
  color:var(--text-dim);pointer-events:none;
}
.scroll-cue i{
  display:block;width:1px;height:34px;
  background:linear-gradient(180deg,rgba(240,208,128,.75),transparent);
  transform-origin:top;
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1);opacity:1}
}

/* ── вхідна анімація: тільки transform + opacity ────────── */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.ready .rise{opacity:1;transform:none}
.ready .d1{transition-delay:.10s}
.ready .d2{transition-delay:.24s}
.ready .d3{transition-delay:.34s}
.ready .d4{transition-delay:.44s}
.ready .d5{transition-delay:.54s}
.ready .d6{transition-delay:.66s}

/* ═══════════════════════════════════════════════════════════
   МОБІЛЬНИЙ — шов стає горизонтальним, половини стають екранами
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .btn-dc span{display:none}
  .btn-dc{padding:9px 12px}

  .hero{min-height:auto}
  .side{position:relative;inset:auto;min-height:66svh;clip-path:none}
  .side-ls,.side-fr{clip-path:none}
  .side-ls .side-in,.side-fr .side-in{
    align-items:flex-start;text-align:left;padding-left:22px;padding-right:22px;
  }
  .side-fr .side-kicker{flex-direction:row}
  .side-copy{max-width:none}
  .seam{display:none}
  .hero-center{position:relative;left:auto;top:auto;transform:none;
    width:100%;padding:calc(var(--nav-h) + 34px) 22px 26px;background:var(--bg)}
  .hero-center::before{display:none}
  .prism-stage{display:none}
  .scroll-cue{display:none}
  .hero-vig,.hero-glow{display:none}
}

/* ═══════════════════════════════════════════════════════════
   ДОСТУПНІСТЬ
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise,.reveal{opacity:1;transform:none}
  .cur,.cur-ring{display:none}
  body{cursor:auto}
}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}

/* ═══════════════════════════════════════════════════════════
   СЕКЦІЯ 2 — ОДНА СПІЛЬНОТА
   ═══════════════════════════════════════════════════════════ */
.sec{position:relative;padding:clamp(72px,11vh,140px) clamp(22px,5vw,72px)}
.sec-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 46% at 22% 30%, rgba(120,50,190,.16), transparent 70%),
    radial-gradient(60% 46% at 80% 60%, rgba(190,110,40,.14), transparent 70%),
    linear-gradient(180deg,rgba(7,6,10,.90),rgba(11,8,16,.84) 40%,rgba(7,6,10,.90));
}
.wrap{position:relative;max-width:1240px;margin:0 auto}

.sec-head{text-align:center;max-width:760px;margin:0 auto}
.kicker{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.42em;
  color:var(--gold-2);opacity:.85;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.kicker::before,.kicker::after{
  content:'';width:34px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,208,128,.7));
}
.kicker::after{background:linear-gradient(90deg,rgba(240,208,128,.7),transparent)}

.sec-title{
  margin-top:20px;
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.9vw,54px);line-height:1.1;letter-spacing:.01em;
  color:#fff;
}
.sec-title em{
  font-style:normal;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1) 60%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-copy{
  margin:20px auto 0;max-width:60ch;
  font-size:clamp(16px,1.2vw,19px);line-height:1.66;
  color:rgba(239,233,222,.74);
}

/* ── візуал ────────────────────────────────────────────── */
.worlds{
  position:relative;margin:clamp(38px,6vh,66px) auto 0;
  max-width:1060px;
}
.worlds img{
  display:block;width:100%;height:auto;border-radius:16px;
  /* краї топляться у фон — без рамки і без різкого обрізу */
  -webkit-mask-image:radial-gradient(ellipse 82% 78% at 50% 48%,#000 52%,transparent 92%);
  mask-image:radial-gradient(ellipse 82% 78% at 50% 48%,#000 52%,transparent 92%);
}
.worlds-cap{
  position:absolute;left:50%;bottom:clamp(6px,2.4vw,26px);
  transform:translateX(-50%);
  font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.34em;
  color:rgba(239,233,222,.55);white-space:nowrap;
}

/* ── три докази ────────────────────────────────────────── */
.proofs{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
}
.proof{
  position:relative;padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--glass-line);border-radius:14px;
  background:var(--glass);
  transition:border-color .35s ease,background-color .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.proof:hover{
  border-color:rgba(240,208,128,.34);
  background:rgba(240,208,128,.05);
  transform:translateY(-3px);
}
.proof-n{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,3.8vw,52px);line-height:1;
  background:linear-gradient(180deg,#fff8e8,var(--gold-2) 50%,var(--gold-1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.proof-l{
  margin-top:12px;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.16em;
  color:var(--text);
}
.proof-d{
  margin-top:8px;font-size:15.5px;line-height:1.5;
  color:rgba(239,233,222,.60);
}

/* ── CTA у Discord ─────────────────────────────────────── */
.band{
  margin-top:clamp(40px,6vh,72px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;
  padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,42px);
  border:1px solid rgba(240,208,128,.20);border-radius:16px;
  background:linear-gradient(90deg,rgba(138,67,251,.07),rgba(224,138,46,.07));
}
.band-t{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,27px);color:#fff}
.band-s{margin-top:7px;font-size:16px;color:rgba(239,233,222,.66)}
.band .btn-dc{padding:14px 26px;font-size:13px}

/* ═══════════════════════════════════════════════════════════
   СЕКЦІЯ 3 — ДВА СВІТИ, ДВІ КАРТКИ
   ═══════════════════════════════════════════════════════════ */
.worlds-grid{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,26px);
}
.wcard{
  position:relative;overflow:hidden;
  border:1px solid var(--glass-line);border-radius:18px;
  padding:clamp(26px,3vw,44px);
  background:var(--glass);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1);
}
.wcard:hover{transform:translateY(-4px)}
.wcard-ls:hover{border-color:rgba(177,60,255,.42)}
.wcard-fr:hover{border-color:rgba(224,138,46,.42)}

/* власна атмосфера картки — та сама, що в героя, тільки тихіша */
.wcard::before{
  content:'';position:absolute;inset:0;z-index:-1;
  transition:opacity .5s ease;opacity:.55;
}
.wcard:hover::before{opacity:1}
.wcard-ls::before{
  background:
    radial-gradient(70% 52% at 22% 0%, rgba(177,60,255,.26), transparent 70%),
    radial-gradient(60% 44% at 88% 100%, rgba(255,86,190,.12), transparent 72%);
}
.wcard-fr::before{
  background:
    radial-gradient(70% 52% at 78% 0%, rgba(224,138,46,.26), transparent 70%),
    radial-gradient(60% 44% at 12% 100%, rgba(255,200,120,.12), transparent 72%);
}

.wcard-era{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.36em;
  color:var(--text-dim);
}
.wcard-t{
  margin-top:14px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3vw,40px);line-height:1.04;color:#fff;
}
.wcard-t span{
  display:block;font-weight:500;
  font-size:clamp(12px,1.15vw,15px);letter-spacing:.3em;margin-top:9px;
}
.wcard-ls .wcard-t span{color:var(--ls-soft)}
.wcard-fr .wcard-t span{color:var(--fr-soft)}

.wcard-copy{
  margin-top:16px;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;
  color:rgba(239,233,222,.72);
}

.wlist{margin-top:22px;display:flex;flex-direction:column;gap:11px}
.wlist div{
  display:flex;align-items:flex-start;gap:11px;
  font-family:var(--ui);font-weight:500;font-size:14px;line-height:1.45;
  color:rgba(239,233,222,.86);
}
.wlist i{
  flex:none;width:15px;height:15px;margin-top:2px;border-radius:4px;
  display:grid;place-items:center;
  font-size:9px;font-style:normal;
}
.wcard-ls .wlist i{background:rgba(177,60,255,.20);color:var(--ls-soft)}
.wcard-fr .wlist i{background:rgba(224,138,46,.20);color:var(--fr-soft)}

.wcard-foot{
  margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.wcard-stage{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  padding:6px 11px;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);color:var(--text-dim);
}
.wlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.14em;
}
.wcard-ls .wlink{color:var(--ls-soft)}
.wcard-fr .wlink{color:var(--fr-soft)}
.wlink .arw{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.wlink:hover .arw{transform:translateX(5px)}

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

/* ═══════════════════════════════════════════════════════════
   СЕКЦІЯ 4 — ЯК ЗАЙТИ
   Кроки не просто описані — вони виконуються з сайту.
   ═══════════════════════════════════════════════════════════ */
.join-grid{
  margin-top:clamp(38px,6vh,66px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,26px);
}
.jcard{
  position:relative;
  border:1px solid var(--glass-line);border-radius:18px;
  padding:clamp(24px,2.8vw,38px);
  background:var(--glass);
}
.jcard-h{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);
}
.jcard-h b{
  font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,29px);
  color:#fff;
}
.jcard-h span{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.28em;
  color:var(--text-dim);
}

.step{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.step:last-of-type{border-bottom:0}
.step-n{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  font-family:var(--ui);font-weight:700;font-size:12px;
}
.jcard-ls .step-n{background:rgba(177,60,255,.16);color:var(--ls-soft)}
.jcard-fr .step-n{background:rgba(224,138,46,.16);color:var(--fr-soft)}
.step-b{flex:1;min-width:0}
.step-t{
  font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--text);
}
.step-d{
  margin-top:6px;font-size:15.5px;line-height:1.5;color:rgba(239,233,222,.62);
}
.step-d a{text-decoration:underline;text-underline-offset:3px}
.jcard-ls .step-d a{color:var(--ls-soft)}
.jcard-fr .step-d a{color:var(--fr-soft)}

/* рядок з командою + кнопка копіювання */
.cmd{
  margin-top:11px;display:flex;align-items:stretch;gap:0;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;
  background:rgba(0,0,0,.30);
}
.cmd code{
  flex:1;min-width:0;padding:11px 13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--gold-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cmd button{
  flex:none;padding:0 16px;cursor:pointer;
  border-left:1px solid rgba(255,255,255,.12);
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--text-dim);
  transition:background-color .3s,color .3s;
}
.cmd button:hover{background:rgba(240,208,128,.10);color:var(--gold-2)}
.cmd button.ok{background:rgba(54,255,135,.12);color:#36FF87}

.jcta{
  margin-top:22px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 24px;border-radius:12px;border:1px solid;
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.14em;
  transition:background-color .35s,box-shadow .35s;
}
.jcard-ls .jcta{
  color:#f4e7ff;border-color:rgba(177,60,255,.5);background:rgba(177,60,255,.12);
}
.jcard-ls .jcta:hover{background:rgba(177,60,255,.22);box-shadow:0 8px 34px rgba(177,60,255,.26)}
.jcard-fr .jcta{
  color:#fff2dd;border-color:rgba(224,138,46,.52);background:rgba(224,138,46,.12);
}
.jcard-fr .jcta:hover{background:rgba(224,138,46,.22);box-shadow:0 8px 34px rgba(224,138,46,.26)}

.jnote{
  margin-top:26px;padding:16px 20px;border-radius:12px;
  border:1px solid rgba(255,223,54,.20);background:rgba(255,223,54,.05);
  font-size:15.5px;line-height:1.55;color:rgba(239,233,222,.74);
}
.jnote b{color:#FFDF36;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.16em;display:block;margin-bottom:6px}

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

/* поява секції — IntersectionObserver відписується після першого разу */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.s1{transition-delay:.08s}
.reveal.s2{transition-delay:.16s}
.reveal.s3{transition-delay:.24s}

@media (max-width:820px){
  .proofs{grid-template-columns:1fr}
  .band{flex-direction:column;align-items:flex-start}
  .worlds-cap{position:static;transform:none;display:block;text-align:center;margin-top:14px}
}
/* ═══════════════════════════════════════════════════════════
   ШКІРА СВІТУ
   Сторінка світу підміняє акцент один раз, і всі компоненти
   нижче читають --acc замість власного кольору. Додати третій
   світ = додати один блок, а не переписати компоненти.
   ═══════════════════════════════════════════════════════════ */
html[data-skin="ls"]{ --acc:var(--ls); --acc-soft:var(--ls-soft); --acc-deep:var(--ls-deep) }
html[data-skin="fr"]{ --acc:var(--fr); --acc-soft:var(--fr-soft); --acc-deep:var(--fr-deep) }

/* навбар світу: назад до розвилки + розділи саме цього світу */
.nav-back{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.2em;
  color:var(--text-dim);transition:color .3s;
}
.nav-back:hover{color:var(--acc-soft)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{
  transform:scaleX(1);
  background:linear-gradient(90deg,transparent,var(--acc-soft),transparent);
}
.brand-world{
  font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.32em;
  color:var(--acc-soft);margin-top:5px;
}

/* ── ГЕРОЙ СВІТУ ───────────────────────────────────────── */
.whero{
  position:relative;min-height:88svh;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) clamp(22px,5vw,72px) clamp(50px,8vh,90px);
}
.whero-bg{
  position:absolute;inset:-4%;z-index:-2;
  background-size:cover;background-position:center;
}
html[data-skin="ls"] .whero-bg{
  background-position:60% 46%;
  background-image:
    var(--img,url('art-gta.webp')),
    radial-gradient(62% 48% at 26% 74%, rgba(190,80,255,.34), transparent 70%),
    radial-gradient(70% 44% at 84% 30%, rgba(96,150,255,.26), transparent 72%),
    linear-gradient(178deg,rgba(27,12,49,.50) 0%,rgba(44,18,80,.34) 38%,rgba(21,10,38,.70) 100%);
}
html[data-skin="fr"] .whero-bg{
  background-position:64% 46%;
  background-image:
    var(--img,url('art-rdr.webp')),
    radial-gradient(62% 48% at 30% 74%, rgba(255,158,52,.32), transparent 70%),
    radial-gradient(70% 44% at 84% 28%, rgba(255,200,120,.24), transparent 72%),
    linear-gradient(178deg,rgba(51,32,14,.50) 0%,rgba(90,52,19,.34) 38%,rgba(29,16,7,.70) 100%);
}
.whero-fade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,4,10,.78),transparent 34%),
    linear-gradient(90deg,rgba(6,4,10,.86),transparent 62%),
    linear-gradient(0deg,rgba(6,4,10,.92),transparent 46%);
}
.whero-in{position:relative;max-width:min(760px,92vw)}
.whero-kicker{
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.4em;
  color:var(--acc-soft);display:flex;align-items:center;gap:13px;
}
.whero-kicker::before{content:'';width:30px;height:1px;background:currentColor;opacity:.6}
.whero-t{
  margin-top:18px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:.01em;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.whero-t em{
  display:block;font-style:normal;font-weight:500;
  font-size:clamp(15px,1.7vw,25px);letter-spacing:.34em;margin-top:14px;
  color:var(--acc-soft);
}
.whero-tag{
  margin-top:clamp(18px,2.6vh,30px);
  font-family:var(--ui);font-weight:600;font-size:clamp(13px,1.2vw,16px);
  letter-spacing:.16em;color:var(--acc-soft);
}
.whero-copy{
  margin-top:14px;max-width:52ch;
  font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.62;
  color:rgba(239,233,222,.82);
}
.whero-act{margin-top:clamp(26px,3.6vh,40px);display:flex;gap:14px;flex-wrap:wrap}
.btn-acc,.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border-radius:12px;border:1px solid;
  font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.15em;
  transition:background-color .35s,box-shadow .35s,border-color .35s;
}
.btn-acc{
  color:#fff;border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--acc) 16%,transparent);
}
.btn-acc:hover{
  background:color-mix(in srgb,var(--acc) 28%,transparent);
  box-shadow:0 10px 40px color-mix(in srgb,var(--acc) 30%,transparent);
}
.btn-ghost{color:var(--text-dim);border-color:var(--glass-line);background:var(--glass)}
.btn-ghost:hover{color:var(--text);border-color:rgba(240,208,128,.4)}

/* ── ПЕРШІ 15 ХВИЛИН — вертикальна лінія часу ──────────── */
.tl{margin-top:clamp(40px,6vh,72px);position:relative;max-width:840px;margin-inline:auto}
.tl::before{
  content:'';position:absolute;left:19px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb,var(--acc) 60%,transparent) 12%,
    color-mix(in srgb,var(--acc) 60%,transparent) 88%,
    transparent);
}
.tl-i{position:relative;display:flex;gap:22px;padding:0 0 clamp(26px,3.4vh,40px) 0}
.tl-i:last-child{padding-bottom:0}
.tl-n{
  position:relative;z-index:1;flex:none;
  width:39px;height:39px;border-radius:50%;
  display:grid;place-items:center;
  background:#0b0910;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);
  font-family:var(--display);font-weight:600;font-size:15px;
  color:var(--acc-soft);
}
.tl-b{flex:1;padding-top:5px}
.tl-t{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,25px);color:#fff}
.tl-d{margin-top:9px;font-size:16.5px;line-height:1.62;color:rgba(239,233,222,.70)}
.tl-time{
  display:inline-block;margin-top:11px;padding:5px 11px;border-radius:7px;
  border:1px solid var(--glass-line);background:var(--glass);
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  color:var(--text-dim);
}

/* акцент світу підхоплюють спільні компоненти */
html[data-skin] .kicker{color:var(--acc-soft)}
html[data-skin] .sec-title em{
  background:linear-gradient(180deg,var(--acc-soft),var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin] .proof-n{
  background:linear-gradient(180deg,#fff,var(--acc-soft) 55%,var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-skin] .kicker::before{background:linear-gradient(90deg,transparent,var(--acc-soft))}
html[data-skin] .kicker::after{background:linear-gradient(90deg,var(--acc-soft),transparent)}

/* ── ФУТЕР ─────────────────────────────────────────────── */
.foot{
  position:relative;padding:clamp(40px,6vh,64px) clamp(22px,5vw,72px);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--ui);font-size:12.5px;color:var(--text-dim);
}
.foot a{transition:color .3s}
.foot a:hover{color:var(--text)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}


/* ═══════════════════════════════════════════════════════════
   НИТКИ СВІТЛА
   Одне полотно, малює той самий rAF-цикл. Вузли дрейфують,
   найближчі зʼєднуються нитками; курсор притягує сусідів.
   Кількість вузлів — від площі вікна, DPR обмежений двома,
   під prefers-reduced-motion полотно не створюється взагалі.
   ═══════════════════════════════════════════════════════════ */
/* Полотно закріплене на весь екран і живе під контентом.
   Секції мають напівпрозорий фон, тому нитки й пил видно
   на всю сторінку, а не лише в межах героя. */
/* Полотно закріплене на весь екран і лежить НАД фоновими
   кадрами, але ПІД текстом. Секціям навмисно не даємо z-index:
   із ним вони створюють контекст накладання і замикають дітей
   усередині себе — тоді текст не може піднятись над полотном. */
#web{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hero,.whero,.sec,.foot{position:relative}
.whero-in{position:relative;z-index:4}
.wrap{position:relative;z-index:4}
.foot > *{position:relative;z-index:4}

/* ═══════════════════════════════════════════════════════════
   ПІДВАЛ ІЗ ПРИСТРОЄМ
   Не копія чужого телефона, а свій пристрій у мові бренду:
   скло, золото, темний екран. Нахил пише rAF-цикл в обгортку,
   світлові відблиски — CSS. Один власник transform на елемент.
   ═══════════════════════════════════════════════════════════ */
.social{
  position:relative;
  padding:clamp(64px,9vh,120px) clamp(22px,5vw,72px) clamp(40px,6vh,72px);
}
.social-in{
  position:relative;z-index:4;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,90px);
  align-items:center;
}
.social-copy{max-width:44ch}
.social-copy .sec-title{margin-top:18px}
.social-copy .sec-copy{margin-left:0}
.social-note{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;
}
.social-note span{
  padding:7px 13px;border-radius:8px;
  border:1px solid var(--glass-line);background:var(--glass);
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;
  color:var(--text-dim);
}

/* ── пристрій ──────────────────────────────────────────── */
.dev-stage{
  position:relative;
  width:clamp(250px,26vw,320px);
  perspective:1400px;
}
.dev-tilt{will-change:transform;transform-style:preserve-3d}

.dev{
  position:relative;
  aspect-ratio:9/19;
  border-radius:44px;
  padding:9px;
  background:
    linear-gradient(160deg,rgba(240,208,128,.55),rgba(120,96,40,.25) 34%,rgba(20,16,28,.9) 62%),
    linear-gradient(#0b0910,#0b0910);
  box-shadow:
    0 40px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
/* відблиск на склі — рухається разом із нахилом */
.dev::after{
  content:'';position:absolute;inset:0;border-radius:44px;pointer-events:none;
  background:linear-gradient(120deg,
    rgba(255,255,255,.16) 0%, transparent 26%,
    transparent 68%, rgba(255,255,255,.07) 100%);
}
.dev-screen{
  position:relative;height:100%;border-radius:36px;overflow:hidden;
  background:
    radial-gradient(70% 46% at 50% 16%, rgba(138,67,251,.30), transparent 70%),
    radial-gradient(60% 40% at 50% 92%, rgba(224,138,46,.20), transparent 72%),
    linear-gradient(180deg,#0d0a16,#08060e);
  display:flex;flex-direction:column;
}

/* статус-рядок */
.dev-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 0;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.04em;
  color:rgba(239,233,222,.72);
}
.dev-top i{display:flex;gap:4px;align-items:center;font-style:normal}
.dev-top b{
  display:inline-block;width:16px;height:8px;border-radius:2px;
  border:1px solid rgba(239,233,222,.5);position:relative;
}
.dev-top b::after{
  content:'';position:absolute;inset:1.5px;right:5px;border-radius:1px;
  background:var(--gold-2);
}

/* шапка екрана */
.dev-head{
  padding:clamp(20px,3vh,34px) 20px clamp(14px,2vh,22px);
  text-align:center;
}
.dev-mark{
  font-family:var(--display);font-weight:700;font-size:26px;line-height:1;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-1) 58%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,168,76,.5));
}
.dev-sub{
  margin-top:9px;
  font-family:var(--ui);font-weight:600;font-size:9px;letter-spacing:.3em;
  color:rgba(239,233,222,.45);
}

/* сітка застосунків */
.dev-apps{
  flex:1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2.4vh,20px) 8px;
  padding:6px 18px clamp(18px,3vh,28px);
  align-content:start;
}
.app{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;
}
.app-ic{
  width:clamp(40px,4.4vw,52px);aspect-ratio:1;border-radius:28%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),
             box-shadow .32s ease, border-color .32s ease, background-color .32s ease;
  will-change:transform;
}
.app-ic svg{width:56%;height:56%;fill:currentColor}
.app-n{
  font-family:var(--ui);font-weight:600;font-size:9px;letter-spacing:.08em;
  color:rgba(239,233,222,.55);
}
.app:hover .app-ic{
  transform:translateY(-4px) scale(1.06);
  border-color:currentColor;
  background:rgba(255,255,255,.09);
}
.app:hover .app-n{color:var(--text)}

/* кожен застосунок носить свій колір, решта — успадковується */
.app-yt{color:#ff4b46}
.app-tt{color:#4de8dd}
.app-ig{color:#ff6ab0}
.app-dc{color:#8b9cff}
.app-tw{color:#b78cff}
.app-tg{color:#5ec2f0}

/* нижня риска пристрою */
.dev-bar{
  width:34%;height:4px;border-radius:2px;margin:0 auto 12px;
  background:rgba(239,233,222,.28);
}

@media (max-width:900px){
  .social-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .social-copy{max-width:none}
  .social-copy .kicker{justify-content:center}
  .social-note{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   МЕДІА-СТРІЧКА
   Дві однакові доріжки поспіль, зсув на -50% — шов непомітний
   і петля безшовна. Анімується тільки transform, тож жодного
   перерахунку макета. Тривалість рахується з кількості кадрів,
   щоб швидкість не мінялась, коли їх стане більше.
   ═══════════════════════════════════════════════════════════ */
.mq{
  position:relative;
  margin-top:clamp(34px,5vh,58px);
  overflow:hidden;
  /* краї доріжки тануть у фон, а не обрізаються */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Дві трансформації, два власники: анімація рухає внутрішню
   доріжку, рука — зовнішню. Якби вони ділили один transform,
   перетягування щокадру перебивало б анімацію. */
.mq{cursor:grab;touch-action:pan-y}
.mq.grabbing{cursor:grabbing}
.mq.grabbing .shot{pointer-events:none}
.mq-track{
  width:max-content;
  transform:translate3d(var(--mq-shift,0px),0,0);
  will-change:transform;
}
.mq-run{
  display:flex;width:max-content;
  animation:mqRun var(--mq-dur,60s) linear infinite;
  will-change:transform;
}
.mq:hover .mq-run{animation-play-state:paused}
@keyframes mqRun{ to{ transform:translate3d(-50%,0,0) } }

.shot{
  position:relative;flex:none;
  width:clamp(260px,26vw,400px);
  margin-right:clamp(12px,1.4vw,20px);
  border-radius:14px;overflow:hidden;
  border:1px solid var(--glass-line);
  background:#0b0910;
  transition:border-color .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,4,10,.86));
}
.shot:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc,#c9a84c) 50%,transparent)}

.shot-by{
  position:absolute;left:13px;bottom:11px;z-index:2;
  display:flex;align-items:center;gap:8px;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.04em;
  color:var(--text);
}
.shot-by i{
  font-style:normal;font-size:9px;letter-spacing:.24em;
  color:rgba(239,233,222,.5);
}
.shot-tag{
  position:absolute;right:11px;top:11px;z-index:2;
  padding:4px 9px;border-radius:6px;
  background:rgba(8,6,12,.72);backdrop-filter:blur(8px);
  font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.2em;
}
.shot-tag.ls{color:var(--ls-soft)}
.shot-tag.fr{color:var(--fr-soft)}

@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto}
  .mq-track{animation:none}
}

/* ── стрічку можна тягнути рукою ───────────────────────── */
.mq{cursor:grab}
.mq.drag{cursor:grabbing}
.mq.drag .shot{pointer-events:none}
.mq::-webkit-scrollbar{display:none}

/* ═══════════════════════════════════════════════════════════
   ПОСІБНИК
   Довга довідка: кроки, вимоги, розкривні розв'язання проблем.
   ═══════════════════════════════════════════════════════════ */
.doc{max-width:900px;margin:0 auto}
.doc h3{
  margin-top:clamp(40px,6vh,68px);
  font-family:var(--display);font-weight:600;
  font-size:clamp(22px,2.4vw,32px);color:#fff;
}
.doc p{margin-top:14px;font-size:17px;line-height:1.68;color:rgba(239,233,222,.78)}
.doc a{color:var(--acc-soft);text-decoration:underline;text-underline-offset:3px}
.doc b{color:var(--text)}
.doc code{
  padding:2px 7px;border-radius:5px;
  background:rgba(255,255,255,.07);border:1px solid var(--glass-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:var(--gold-2);word-break:break-all;
}
.doc kbd{
  display:inline-block;padding:2px 8px;border-radius:6px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.06);
  font-family:var(--ui);font-weight:600;font-size:13px;color:var(--text);
}

/* нумеровані кроки */
.steps{margin-top:22px;counter-reset:st}
.steps li{
  list-style:none;position:relative;
  padding:0 0 16px 46px;
  font-size:16.5px;line-height:1.6;color:rgba(239,233,222,.80);
}
.steps li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc,#c9a84c) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--acc,#c9a84c) 34%,transparent);
  font-family:var(--ui);font-weight:700;font-size:12px;
  color:var(--acc-soft,#f0d080);
}
.steps li:last-child{padding-bottom:0}

/* системні вимоги */
.req{
  margin-top:24px;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);
}
.req-col{
  border:1px solid var(--glass-line);border-radius:14px;
  background:var(--glass);padding:clamp(20px,2.4vw,28px);
}
.req-col.rec{border-color:color-mix(in srgb,var(--acc,#c9a84c) 32%,transparent)}
.req-h{
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.24em;
  color:var(--text-dim);padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.req-col.rec .req-h{color:var(--acc-soft,#f0d080)}
.req-col dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin-top:14px}
.req-col dt{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  color:var(--text-dim);padding-top:3px;white-space:nowrap;
}
.req-col dd{font-size:15px;line-height:1.45;color:rgba(239,233,222,.86)}

/* розкривні блоки */
.acc{margin-top:24px;border-top:1px solid rgba(255,255,255,.07)}
.acc details{border-bottom:1px solid rgba(255,255,255,.07)}
.acc summary{
  list-style:none;cursor:pointer;
  padding:17px 40px 17px 0;position:relative;
  font-family:var(--ui);font-weight:600;font-size:16px;color:var(--text);
  transition:color .3s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--acc-soft,#f0d080)}
.acc summary::after{
  content:'';position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.5;
  transition:transform .3s ease,opacity .3s ease;
}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;opacity:1}
.acc-b{padding:0 0 20px}
.acc-b p:first-child{margin-top:0}

/* попередження */
.warn{
  margin-top:24px;padding:17px 21px;border-radius:12px;
  border:1px solid rgba(255,223,54,.22);background:rgba(255,223,54,.05);
}
.warn b{
  display:block;margin-bottom:7px;
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  color:#FFDF36;
}
.warn p{margin-top:0;font-size:16px}

/* велика підказка «як знайти сервер» */
.find{
  margin-top:26px;padding:clamp(22px,2.6vw,34px);
  border-radius:16px;border:1px solid color-mix(in srgb,var(--acc,#c9a84c) 30%,transparent);
  background:color-mix(in srgb,var(--acc,#c9a84c) 6%,transparent);
  text-align:center;
}
.find-l{
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.24em;
  color:var(--text-dim);
}
.find-n{
  margin-top:12px;font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3.4vw,42px);letter-spacing:.04em;color:#fff;
}
.find-s{margin-top:12px;font-size:16px;color:rgba(239,233,222,.7)}

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

/* ═══════════════════════════════════════════════════════════
   ПОСІБНИК
   Довга довідка: бічна навігація, кроки, розкривні розділи.
   Ніякої анімації понад необхідну — це сторінка, яку читають.
   ═══════════════════════════════════════════════════════════ */
.doc{
  display:grid;grid-template-columns:230px 1fr;gap:clamp(28px,4vw,64px);
  max-width:1180px;margin:0 auto;
  padding:calc(var(--nav-h) + clamp(38px,6vh,64px)) clamp(22px,5vw,64px) clamp(60px,9vh,110px);
  position:relative;z-index:4;
}
.doc-nav{position:sticky;top:calc(var(--nav-h) + 26px);align-self:start}
.doc-nav b{
  display:block;margin-bottom:14px;
  font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.28em;
  color:var(--text-dim);
}
.doc-nav a{
  display:block;padding:8px 0;
  font-family:var(--ui);font-weight:500;font-size:14px;
  color:var(--text-dim);border-left:1px solid transparent;padding-left:14px;
  margin-left:-14px;
  transition:color .3s,border-color .3s;
}
.doc-nav a:hover{color:var(--text);border-left-color:var(--acc-soft)}

.doc-h{margin-bottom:clamp(28px,4vh,46px)}
.doc-h h1{
  margin-top:16px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,4.4vw,58px);line-height:1.04;color:#fff;
}
.doc-h p{
  margin-top:16px;max-width:62ch;
  font-size:clamp(16px,1.2vw,18.5px);line-height:1.65;
  color:rgba(239,233,222,.72);
}

.doc-sec{margin-top:clamp(38px,6vh,70px);scroll-margin-top:calc(var(--nav-h) + 22px)}
.doc-sec > h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(23px,2.6vw,34px);color:#fff;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.doc-sec > p{
  margin-top:16px;max-width:68ch;font-size:17px;line-height:1.66;
  color:rgba(239,233,222,.74);
}

/* нумеровані кроки */
.steps{margin-top:22px;counter-reset:st}
.steps li{
  list-style:none;position:relative;
  padding:0 0 16px 44px;
  font-size:16.5px;line-height:1.62;color:rgba(239,233,222,.80);
}
.steps li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 16%,transparent);
  color:var(--acc-soft);
  font-family:var(--ui);font-weight:700;font-size:12px;
}
.steps li b{color:var(--text);font-weight:600}
.steps code,.doc code{
  padding:2px 7px;border-radius:6px;
  background:rgba(0,0,0,.35);border:1px solid var(--glass-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;color:var(--gold-2);
  word-break:break-all;
}
.doc a[href^="http"]{color:var(--acc-soft);text-decoration:underline;text-underline-offset:3px}

/* розкривні блоки з проблемами */
.faq{margin-top:20px}
.faq details{
  border:1px solid var(--glass-line);border-radius:12px;
  background:var(--glass);margin-bottom:10px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;
  padding:15px 18px;
  font-family:var(--ui);font-weight:600;font-size:15px;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:background-color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';font-size:19px;color:var(--acc-soft);flex:none;
  transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq-b{padding:2px 18px 18px}
.faq-b .steps{margin-top:6px}

/* таблиця системних вимог */
.sys{
  margin-top:22px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);
}
.sys-col{
  border:1px solid var(--glass-line);border-radius:14px;
  background:var(--glass);padding:20px 22px;
}
.sys-col.rec{border-color:color-mix(in srgb,var(--acc) 34%,transparent)}
.sys-col h3{
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.26em;
  color:var(--text-dim);margin-bottom:14px;
}
.sys-col.rec h3{color:var(--acc-soft)}
.sys-col dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px}
.sys-col dt{
  font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  color:var(--text-dim);padding-top:2px;white-space:nowrap;
}
.sys-col dd{font-size:15px;line-height:1.45;color:rgba(239,233,222,.86)}

.note{
  margin-top:22px;padding:16px 20px;border-radius:12px;
  border:1px solid rgba(255,223,54,.20);background:rgba(255,223,54,.05);
  font-size:16px;line-height:1.6;color:rgba(239,233,222,.78);
}
.note b{
  display:block;margin-bottom:6px;
  font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.2em;color:#FFDF36;
}
.note.ok{border-color:rgba(54,255,135,.22);background:rgba(54,255,135,.05)}
.note.ok b{color:#36FF87}

@media (max-width:900px){
  .doc{grid-template-columns:1fr}
  .doc-nav{position:static;
    display:flex;gap:16px;flex-wrap:wrap;
    padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07)}
  .doc-nav b{width:100%;margin-bottom:4px}
  .doc-nav a{padding:4px 0;margin:0;border:0}
  .sys{grid-template-columns:1fr}
}

/* ── пошук по посібнику ───────────────────────────────── */
.doc-search{
  display:flex;align-items:center;gap:9px;
  margin-bottom:18px;padding:9px 12px;
  border:1px solid var(--glass-line);border-radius:10px;background:var(--glass);
  transition:border-color .3s;
}
.doc-search:focus-within{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.doc-search svg{width:15px;height:15px;flex:none;stroke:var(--text-dim);fill:none;stroke-width:1.8}
.doc-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--ui);font-size:14px;color:var(--text);
}
.doc-search input::placeholder{color:var(--text-dim)}
.doc-empty{
  display:none;margin-top:28px;padding:20px;border-radius:12px;
  border:1px dashed var(--glass-line);
  font-family:var(--ui);font-size:15px;color:var(--text-dim);text-align:center;
}
.doc.searching .doc-sec[hidden]{display:none}
.doc.no-hits .doc-empty{display:block}
mark{background:color-mix(in srgb,var(--acc) 34%,transparent);color:#fff;border-radius:3px;padding:0 2px}

/* ── зображення в посібнику ───────────────────────────── */
.doc-shot{
  margin:20px 0 0;border-radius:12px;overflow:hidden;
  border:1px solid var(--glass-line);background:#0b0910;
}
.doc-shot img,.doc-shot video{display:block;width:100%;height:auto}
.doc-shot figcaption{
  padding:11px 15px;
  font-family:var(--ui);font-weight:500;font-size:13px;
  color:var(--text-dim);border-top:1px solid rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════
   ПІДТРИМКА / МАГАЗИН ПІДПИСОК (Tebex-вітрина)
   Нахил картки — єдиний власник transform: пише лише rAF-цикл
   (site.js, tierCards), поки є тонкий вказівник і без reduced-motion.
   CSS тут відповідає тільки за border/box-shadow/glow на :hover —
   транзиції transform без участі JS немає навмисно.
   ═══════════════════════════════════════════════════════════ */
.shop-note{margin-top:22px}
.tier-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;margin-top:34px;perspective:1600px;
}
.tier{
  --glow:201,168,76;
  position:relative;display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .4s,box-shadow .4s;
}
.tier:hover{
  border-color:rgba(var(--glow),.55);
  box-shadow:
    0 30px 70px -18px rgba(var(--glow),.45),
    0 0 0 1px rgba(var(--glow),.18) inset,
    0 0 40px -6px rgba(var(--glow),.35);
}
.tier[data-gem="quartz"]{--glow:210,175,255}
.tier[data-gem="topaz"]{--glow:242,180,95}
.tier[data-gem="nephrite"]{--glow:110,224,150}
.tier[data-gem="sapphire"]{--glow:96,156,255}
.tier[data-gem="ruby"]{--glow:255,92,92}
.tier[data-gem="diamond"]{--glow:214,186,255}

.tier-art{position:relative;aspect-ratio:8/7;overflow:hidden;background:#050308}
.tier-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.tier:hover .tier-art img{transform:scale(1.07)}
.tier-art::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(7,6,10,.94) 96%);
}
.tier-sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s;mix-blend-mode:overlay;
  background:radial-gradient(240px circle at var(--cx,50%) var(--cy,30%),rgba(255,255,255,.55),transparent 62%);
}
.tier:hover .tier-sheen{opacity:1}

.tier-body{
  position:relative;flex:1;display:flex;flex-direction:column;gap:14px;
  padding:6px 22px 24px;margin-top:-34px;
}
.tier-name{
  font-family:'Cinzel',serif;font-weight:600;font-size:19px;
  color:#fff;letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.tier-price{font-size:29px;font-weight:800;color:rgb(var(--glow));line-height:1}
.tier-price small{font-size:13px;font-weight:500;color:var(--text-dim);margin-left:2px}
.tier-diamond{
  font-size:13.5px;color:rgba(239,233,222,.72);
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07);
}
.tier-feat{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:8px}
.tier-feat li{
  position:relative;padding-left:18px;
  font-size:14.5px;line-height:1.5;color:rgba(239,233,222,.8);
}
.tier-feat li::before{content:'✦';position:absolute;left:0;top:1px;font-size:11px;color:rgb(var(--glow))}
.tier-cta{justify-content:center;width:100%}
.tier.locked{opacity:.5;filter:grayscale(.6)}
.tier.locked:hover{box-shadow:none;border-color:var(--glass-line)}
.tier.locked .tier-cta{pointer-events:none}
.tier-lock-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--text-dim);border:1px solid var(--glass-line);border-radius:100px;
  padding:4px 10px;align-self:flex-start;
}
@media (max-width:640px){
  .tier-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .tier-art img{transition:none}
  .tier:hover .tier-art img{transform:none}
}

/* ═══════════════════════════════════════════════════
   КАРТКИ ГРАВЦІВ / ПЕРСОНАЖІВ (заготовка)
   ═══════════════════════════════════════════════════ */
.char-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px;margin:28px 0;
}
.char-card{
  border-radius:18px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.char-card:hover{
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  transform:translateY(-4px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
}
.char-photo{aspect-ratio:1/1;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.char-photo img{width:100%;height:100%;object-fit:cover;display:block}
.char-photo-fallback{
  font-family:'Cinzel',serif;font-weight:700;font-size:64px;color:var(--acc-soft);
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 22%,#0a0a0f),#0a0a0f 70%);
}
.char-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.char-name{font-family:'Cinzel',serif;font-weight:600;font-size:17px;color:#fff}
.char-role{font-size:12.5px;color:var(--acc);letter-spacing:.03em;text-transform:uppercase;font-weight:700}
.char-stats{display:flex;gap:16px;margin:0;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.char-stats dt{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.char-stats dd{margin:2px 0 0;font-size:13.5px;color:#fff;font-weight:600}
.char-bio{margin:0;font-size:13.5px;line-height:1.55;color:rgba(239,233,222,.75)}

/* ═══════════════════════════════════════════════════
   РЕФЕРАЛЬНИЙ РЕЙТИНГ (заготовка)
   ═══════════════════════════════════════════════════ */
.ref-board{
  border-radius:16px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);
}
.ref-row{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);
}
.ref-row:last-child{border-bottom:none}
.ref-rank{font-family:'Cinzel',serif;font-weight:700;color:var(--text-dim);font-size:14px}
.ref-row:nth-child(1) .ref-rank{color:var(--acc)}
.ref-name{font-size:14.5px;font-weight:600;color:#fff}
.ref-count{font-size:14.5px;font-weight:800;color:var(--acc)}
@media (max-width:520px){
  .char-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ═══════════════════════════════════════════════════
   НОВИНИ / ПАТЧНОУТИ
   ═══════════════════════════════════════════════════ */
.news-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;margin:28px 0;
}
.doc a.news-card, a.news-card{
  display:flex;flex-direction:column;gap:10px;
  padding:22px 24px;border-radius:18px;text-decoration:none;
  background:var(--glass);border:1px solid var(--glass-line);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.doc a.news-card .news-title, .doc a.news-card .news-excerpt, .doc a.news-card .news-more{
  text-decoration:none;
}
.news-card:hover{
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  transform:translateY(-4px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
}
.news-meta{display:flex;align-items:center;gap:10px}
.news-tag{
  font-family:var(--ui);font-size:11px;font-weight:800;letter-spacing:.08em;
  color:#0a0a0f;background:var(--acc);border-radius:100px;padding:3px 10px;
}
.news-date{font-size:12.5px;color:var(--text-dim)}
.news-title{font-family:'Cinzel',serif;font-weight:600;font-size:19px;color:#fff;text-decoration:none}
.news-excerpt{margin:0;font-size:14px;line-height:1.55;color:rgba(239,233,222,.75);flex:1;text-decoration:none}
.news-more{font-size:13px;font-weight:700;color:var(--acc-soft);text-decoration:none}
@media (max-width:520px){
  .news-grid{grid-template-columns:1fr}
}

/* ── ВАЙТЛІСТ-ФОРМА (public/whitelist) ─────────────────── */
.wl-field{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.wl-field label{
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--text-dim);text-transform:uppercase;
}
.wl-field input,.wl-field textarea{
  font-family:var(--body);font-size:16px;color:var(--text);
  background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;
  padding:13px 16px;transition:border-color .25s,background-color .25s;
}
.wl-field input:focus,.wl-field textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--acc) 8%,transparent);
}
.wl-field textarea{resize:vertical;min-height:120px;font-size:16px;line-height:1.55}
.wl-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.wl-actions button{cursor:pointer}