/* =================================================================
   КУТУЛИК — авангардный сайт-инфографика
   Темно-мягко-розовая палитра · многослойность · игра света
   ================================================================= */

/* ---------- Палитра и токены ---------- */
:root{
  /* фон / глубина */
  --void:    #0a0508;
  --deep:    #11070c;
  --base:    #160a10;
  --wine:    #2a0e1a;
  --wine-2:  #3c1426;

  /* розовая семья */
  --rose-deep:#6b1a35;
  --rose:     #c64b6f;
  --coral:    #ff7a9c;
  --glow:     #ff5b8a;
  --blush:    #f0b5c4;
  --dusty:    #d98ea0;

  /* текст */
  --cream:    #f5ebe4;
  --bone:     #e8d5d8;
  --mute:     #9a8a90;
  --mute-2:   #6e5f66;

  /* служебные */
  --line:     rgba(217,142,160,.16);
  --line-2:   rgba(245,235,228,.08);
  --glass:    rgba(255,255,255,.035);

  /* форма */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --maxw: 1240px;
  --gut: clamp(20px, 4vw, 56px);

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  font-family:var(--font-body);
  background:var(--void);
  color:var(--cream);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  min-height:100vh;
  cursor:auto;
  position:relative;
}
.has-custom-cursor body{ cursor:none; }
@media (pointer:coarse){ body{ cursor:auto; } }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
ul{ list-style:none; }
::selection{ background:var(--glow); color:var(--void); }
:where(a,button):focus-visible{
  outline:2px solid var(--blush);
  outline-offset:5px;
  box-shadow:0 0 0 7px rgba(255,91,138,.14), 0 0 32px rgba(255,91,138,.35);
}

/* =================================================================
   СЛОИ ОКРУЖЕНИЯ (фиксированные, под контентом)
   ================================================================= */

/* --- Зерно (плёночный шум) --- */
#grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  z-index:9000; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  animation:grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-2%)} 75%{transform:translate(-2%,4%)}
  100%{transform:translate(2%,-3%)}
}

/* --- Aurora (мягкие световые пятна) --- */
.aurora{
  position:fixed; inset:0; z-index:-3;
  overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(107,26,53,.45) 0%, transparent 55%),
    radial-gradient(140% 100% at 100% 100%, rgba(42,14,26,.7) 0%, transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--void) 100%);
}
.aurora__blob{
  position:absolute;
  width:60vmax; height:60vmax;
  border-radius:50%;
  filter:blur(80px);
  opacity:.5;
  mix-blend-mode:screen;
  will-change:transform;
}
.aurora__blob--a{
  background:radial-gradient(circle, rgba(255,91,138,.55), transparent 60%);
  top:-20vmax; left:-15vmax;
  animation:drift-a 28s var(--ease) infinite alternate;
}
.aurora__blob--b{
  background:radial-gradient(circle, rgba(198,75,111,.5), transparent 60%);
  bottom:-25vmax; right:-20vmax;
  animation:drift-b 34s var(--ease) infinite alternate;
}
.aurora__blob--c{
  background:radial-gradient(circle, rgba(240,181,196,.35), transparent 60%);
  top:40%; left:35%;
  width:45vmax; height:45vmax;
  animation:drift-c 40s var(--ease) infinite alternate;
}
@keyframes drift-a{ to{ transform:translate(15vmax, 8vmax) scale(1.15); } }
@keyframes drift-b{ to{ transform:translate(-12vmax, -6vmax) scale(1.1); } }
@keyframes drift-c{ to{ transform:translate(8vmax, -10vmax) scale(.85); } }

/* --- Виньетка --- */
.vignette{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 50%, rgba(10,5,8,.85) 100%);
}

/* --- Пыль (canvas) --- */
#dust{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
}

/* --- Кастомный курсор --- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none;
  mix-blend-mode:screen;
}
.cursor__dot,.cursor__ring{
  position:fixed; top:0; left:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform,width,height;
}
.cursor__dot{
  width:6px; height:6px;
  background:var(--glow);
  box-shadow:0 0 12px var(--glow);
}
.cursor__ring{
  width:38px; height:38px;
  border:1px solid rgba(255,91,138,.5);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.cursor.is-hot .cursor__ring{
  width:64px; height:64px;
  background:rgba(255,91,138,.08);
  border-color:rgba(255,122,156,.8);
}
.cursor.is-hot .cursor__dot{ opacity:0; }
@media (pointer:coarse){ .cursor{ display:none; } }

/* --- Скролл-нить --- */
.thread{
  position:fixed; left:18px; top:0; bottom:0;
  width:1px; z-index:50;
  background:var(--line-2);
  pointer-events:none;
}
.thread span{
  position:absolute; top:0; left:0;
  width:100%; height:0;
  background:linear-gradient(180deg, transparent, var(--glow) 30%, var(--blush));
  box-shadow:0 0 12px var(--glow);
  transition:height .1s linear;
}
@media (max-width:720px){ .thread{ display:none; } }

/* --- Вертикальные подписи --- */
.vside{
  position:fixed; top:0; bottom:0;
  z-index:40;
  display:flex; align-items:center;
  pointer-events:none;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mute-2);
}
.vside--left{ left:0; }
.vside--right{ right:0; }
.vside span{ writing-mode:vertical-rl; transform:rotate(180deg); padding:0 8px; }
.vside--right span{ transform:rotate(0deg); writing-mode:vertical-rl; }
.vside i{ display:block; width:1px; height:60px; background:var(--line); }
.vside--left i{ margin-left:8px; }
.vside--right i{ margin-right:8px; }
@media (max-width:980px){ .vside{ display:none; } }

/* =================================================================
   ОБЩИЕ БЛОКИ
   ================================================================= */
main{ position:relative; z-index:1; }

/* Секционные заголовки */
.sec-head{
  max-width:var(--maxw);
  margin:0 auto clamp(32px,5vw,72px);
  padding:0 var(--gut);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 24px;
  align-items:end;
}
.sec-head__idx{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--coral);
  letter-spacing:.2em;
  padding-top:.4em;
  border-top:1px solid var(--line);
}
.sec-head__title{
  grid-column:2;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 6vw, 4.4rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.sec-head__title em{
  font-style:italic;
  font-weight:300;
  background:linear-gradient(120deg, var(--blush), var(--glow));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.sec-head__lead{
  grid-column:2;
  max-width:46ch;
  color:var(--mute);
  font-size:clamp(.95rem,1.4vw,1.1rem);
  margin-top:14px;
}
@media (max-width:680px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-head__title,.sec-head__lead{ grid-column:1; }
  .sec-head__idx{ width:fit-content; }
}

/* Кнопки */
.btn{
  --bd:rgba(245,235,228,.18);
  position:relative;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.6em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  border:1px solid var(--bd);
  border-radius:100px;
  color:var(--cream);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  transition:transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.btn svg{ transition:transform .4s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 120%, rgba(255,91,138,.35), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
  z-index:-1;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--coral); color:#fff; }
.btn:hover::before{ opacity:1; }
.btn:hover svg{ transform:translate(2px,-2px); }

.btn--primary{
  background:linear-gradient(135deg, var(--rose), var(--glow));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 30px -8px rgba(255,91,138,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:rgba(255,91,138,.08); }

.btn--steam{
  background:linear-gradient(135deg, #1b2838, #2a475e);
  border-color:rgba(102,192,244,.3);
}
.btn--steam:hover{ border-color:#66c0f4; box-shadow:0 8px 30px -10px #66c0f4; }
.btn--boosty{
  background:linear-gradient(135deg, #f2914b, #ff5b8a);
  border-color:transparent;
  color:#fff;
}
.btn--boosty:hover{ box-shadow:0 8px 30px -8px #ff5b8a; }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:120px var(--gut) 80px;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__grid{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin:0 auto;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--dusty);
  margin-bottom:clamp(20px,3vw,40px);
}
.hero__eyebrow .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--glow);
  box-shadow:0 0 10px var(--glow);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.5} }

.hero__title{
  font-family:var(--font-display);
  font-weight:900;
  /* базовый фолбэк; JS fluid-fit подгонит точно под ширину контейнера */
  font-size:clamp(2.6rem, 13vw, 13rem);
  line-height:.86;
  letter-spacing:-.035em;
  position:relative;
  /* гарантия вмещения: никогда не вылезет за контейнер */
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.hero__title .glitch{ display:inline-block; }
@media (max-width:560px){
  .hero__title{ letter-spacing:-.02em; }
}
/* Glitch / RGB-split — постоянно тонкий, не агрессивный */
.glitch{ position:relative; display:inline-block; }
.glitch__layer{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.6;
}
.glitch__layer--r{ color:#ff3b6b; transform:translate(2px,-1px); }
.glitch__layer--g{ color:#3bff9e; transform:translate(-2px,1px); opacity:.18; }
.glitch__layer--b{ color:#5bb8ff; transform:translate(-1px,-2px); opacity:.25; }
.glitch__main{
  position:relative;
  background:linear-gradient(180deg, var(--cream) 0%, var(--blush) 60%, var(--rose) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 80px rgba(255,91,138,.4);
}
.glitch:hover .glitch__layer--r{ animation:rgb-r .6s steps(2) infinite; }
.glitch:hover .glitch__layer--b{ animation:rgb-b .6s steps(2) infinite; }
@keyframes rgb-r{ 0%,100%{transform:translate(2px,-1px)} 50%{transform:translate(6px,2px)} }
@keyframes rgb-b{ 0%,100%{transform:translate(-1px,-2px)} 50%{transform:translate(-5px,1px)} }

.hero__sub{
  margin-top:clamp(24px,4vw,48px);
  max-width:44ch;
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:var(--bone);
  font-weight:300;
}
.hero__sub p+p{ margin-top:.4em; color:var(--mute); }
.hero__sub em{
  font-style:italic;
  color:var(--blush);
  background:linear-gradient(120deg, var(--blush), var(--coral));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.hero__cta{
  margin-top:clamp(28px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:14px;
}

.hero__foot{
  position:absolute; left:0; right:0; bottom:30px;
  z-index:1;
  display:flex; justify-content:center;
}
.ticker-line{
  width:1px; height:60px;
  background:linear-gradient(180deg, transparent, var(--coral));
  animation:tline 2.2s var(--ease) infinite;
}
@keyframes tline{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Орб — дыхающий источник света */
.orb{ position:relative; width:300px; height:300px; }
.orb--hero{
  position:absolute;
  right:-8%; top:18%;
  width:clamp(360px, 50vw, 760px); height:clamp(360px, 50vw, 760px);
  filter:blur(.5px);
}
.orb__core{
  position:absolute; inset:30%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--blush) 25%, var(--glow) 55%, var(--rose-deep) 90%);
  filter:blur(8px);
  animation:breathe 6s ease-in-out infinite;
}
.orb__halo{
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,91,138,.45), transparent 60%);
  filter:blur(40px);
  animation:breathe-halo 6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{transform:scale(.92);opacity:.85} 50%{transform:scale(1.05);opacity:1} }
@keyframes breathe-halo{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.15);opacity:1} }

/* =================================================================
   MARQUEE
   ================================================================= */
.marquee{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(14px,2vw,22px) 0;
  background:rgba(42,14,26,.25);
}
.marquee__track{
  display:flex;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.4rem,3vw,2.4rem);
  letter-spacing:.05em;
  color:var(--blush);
  animation:marquee 40s linear infinite;
}
.marquee__track span{ padding-right:1em; }
.marquee__track span:nth-child(2){ color:transparent; -webkit-text-stroke:1px var(--dusty); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =================================================================
   COUNTER
   ================================================================= */
.counter{
  position:relative;
  padding:clamp(80px,12vw,160px) var(--gut);
  text-align:center;
}
.counter__inner{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.counter__label{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:24px;
}
.counter__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.5rem, 14vw, 12rem);
  line-height:1;
  letter-spacing:-.04em;
  display:inline-flex; align-items:flex-start; gap:.05em;
  background:linear-gradient(180deg, var(--cream), var(--blush) 50%, var(--coral));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 40px rgba(255,91,138,.35));
}
.counter__rub{
  font-size:.5em;
  color:var(--glow);
  -webkit-text-fill-color:var(--glow);
  margin-right:.05em;
  align-self:center;
  transform:translateY(-.1em);
}
.counter__value{ font-variant-numeric:tabular-nums; }
.counter__note{
  margin-top:24px;
  color:var(--mute);
  font-size:clamp(.95rem,1.4vw,1.1rem);
  font-weight:300;
}
.counter__rule{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:min(var(--maxw), 90%);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* =================================================================
   CHANNELS — ПОРТАЛЫ (иммерсивный split)
   ================================================================= */
.channels{
  position:relative;
  padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,140px);
  background:linear-gradient(180deg, rgba(42,14,26,.35), rgba(20,8,13,.6));
}

.portals{
  position:relative;
  max-width:var(--maxw);
  margin:clamp(36px,5vw,64px) auto 0;
  padding:0 var(--gut);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,22px);
  perspective:1600px;
}

/* центральный разделитель «или» */
.portals__divider{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  pointer-events:none;
}
.portals__divider span{
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  background:radial-gradient(circle, var(--deep), var(--void));
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--mute);
  box-shadow:0 0 30px rgba(0,0,0,.6), 0 0 0 6px var(--void);
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.portals.has-hover .portals__divider{ opacity:0; transform:translate(-50%,-50%) scale(.6); }

/* ============ Портал (общий) ============ */
.portal{
  position:relative;
  display:block;
  min-height:clamp(440px, 64vh, 620px);
  border-radius:var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:flex .6s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease);
  border:1px solid var(--line);
  text-decoration:none;
}
/* split-expand на десктопе */
@media (hover:hover) and (pointer:fine){
  .portals{
    grid-template-columns:1fr 1fr;
    transition:grid-template-columns .6s var(--ease-out);
  }
  /* активная панель реально расширяется, вторая сжимается */
  .portals.hover-steam{ grid-template-columns:1.55fr 1fr; }
  .portals.hover-boosty{ grid-template-columns:1fr 1.55fr; }
  .portals.has-hover .portal{ filter:saturate(.65) brightness(.55); }
  .portals.has-hover .portal.is-active{
    filter:none;
    z-index:5;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  }
  .portal{ will-change:transform; transition:filter .6s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease); }
}

/* слои фона */
.portal__bg{
  position:absolute; inset:-5%;
  z-index:0;
  transition:transform .8s var(--ease-out);
}
.portal__grid{
  position:absolute; inset:0;
  z-index:1;
  opacity:.25;
  transition:opacity .6s var(--ease), transform .8s var(--ease-out);
  mask-image:radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 80%);
}
.portal__orb{
  position:absolute;
  width:60%; aspect-ratio:1;
  border-radius:50%;
  filter:blur(50px);
  opacity:.55;
  z-index:1;
  transition:transform 1s var(--ease-out), opacity .6s var(--ease);
}
.portal__ghost{
  position:absolute;
  z-index:2;
  bottom:-12%;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(7rem, 22vw, 18rem);
  line-height:.8;
  letter-spacing:-.04em;
  opacity:.06;
  pointer-events:none;
  user-select:none;
  transition:opacity .6s var(--ease), transform .8s var(--ease-out);
  white-space:nowrap;
}
.portal__ghost--r{ right:-6%; }
.portal:not(.portal--boosty) .portal__ghost{ left:-4%; }
.portal__noise{
  position:absolute; inset:0; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
  pointer-events:none;
}
.portal__shimmer{
  position:absolute; inset:0;
  z-index:4;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.05) 52%, transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
  mix-blend-mode:screen;
}
.portal:hover .portal__shimmer{ animation:shimmer 1.1s var(--ease-out); }
@keyframes shimmer{ to{ transform:translateX(130%); } }

/* парящие частицы */
.portal__dust{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.portal__dust i{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:0;
  filter:blur(.5px);
  box-shadow:0 0 8px currentColor;
}
.portal:hover .portal__dust i{ animation:dust-float 4s ease-in-out infinite; }
.portal__dust i:nth-child(1){ left:15%; top:80%; animation-delay:.0s; }
.portal__dust i:nth-child(2){ left:35%; top:90%; animation-delay:.6s; }
.portal__dust i:nth-child(3){ left:60%; top:75%; animation-delay:1.2s; }
.portal__dust i:nth-child(4){ left:78%; top:88%; animation-delay:1.8s; }
.portal__dust i:nth-child(5){ left:25%; top:60%; animation-delay:2.4s; }
.portal__dust i:nth-child(6){ left:70%; top:55%; animation-delay:3.0s; }
@keyframes dust-float{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  20%{ opacity:.9; }
  100%{ opacity:0; transform:translateY(-180px) scale(1.4); }
}

/* контент */
.portal__inner{
  position:relative; z-index:6;
  height:100%; min-height:inherit;
  padding:clamp(26px,3.4vw,44px);
  display:flex; flex-direction:column;
}
.portal__head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:auto;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.portal__index{ opacity:.8; }
.portal__status{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.4em .8em;
  border:1px solid var(--line);
  border-radius:100px;
  backdrop-filter:blur(4px);
}
.portal__pulse{
  width:7px; height:7px; border-radius:50%;
  background:currentColor;
  animation:pulse 2s var(--ease) infinite;
}

.portal__glyph{
  position:absolute;
  top:clamp(60px,9vw,96px); right:clamp(24px,3.4vw,44px);
  z-index:6;
  width:clamp(48px,7vw,72px); height:clamp(48px,7vw,72px);
  opacity:.85;
  transition:transform .7s var(--ease-out), opacity .5s var(--ease);
  transform-origin:center;
}
.portal:hover .portal__glyph{ transform:scale(1.12) rotate(-4deg); opacity:1; }

.portal__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.8rem);
  line-height:.95;
  letter-spacing:-.025em;
  margin:clamp(40px,7vw,80px) 0 18px;
}
.portal__title span{ font-weight:300; font-style:italic; opacity:.95; }

.portal__text{
  max-width:34ch;
  color:var(--mute);
  font-weight:300;
  font-size:clamp(.95rem,1.3vw,1.05rem);
  margin-bottom:22px;
}

.portal__feats{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  margin-bottom:28px;
}
.portal__feats li{
  font-size:.85rem;
  color:var(--mute);
  font-weight:300;
}
.portal__feats li b{ font-weight:600; color:var(--bone); }

.portal__cta{
  position:relative;
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.7em;
  padding:1em 1.6em;
  border-radius:100px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.portal__cta svg{ transition:transform .4s var(--ease); }
.portal__cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 120%, rgba(255,255,255,.25), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.portal:hover .portal__cta{ transform:translateY(-3px); }
.portal:hover .portal__cta svg{ transform:translateX(4px); }
.portal:hover .portal__cta::after{ opacity:1; }

/* ============ Мир STEAM — холод / сталь ============ */
.portal--steam{ color:#9fd6f5; }
.portal--steam .portal__bg{
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(102,192,244,.18), transparent 55%),
    linear-gradient(155deg, #0d2233 0%, #0a1825 45%, #050c14 100%);
}
.portal--steam:hover .portal__bg{ transform:scale(1.06); }
.portal--steam .portal__grid{
  background-image:
    linear-gradient(rgba(102,192,244,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,192,244,.18) 1px, transparent 1px);
  background-size:46px 46px;
}
.portal--steam:hover .portal__grid{ opacity:.4; transform:scale(1.05); }
.portal--steam .portal__orb--steam{
  background:radial-gradient(circle, rgba(102,192,244,.7), transparent 60%);
  top:-12%; right:-10%;
}
.portal--steam .portal__ghost{ color:#66c0f4; }
.portal--steam .portal__title{
  background:linear-gradient(120deg, #e6f4ff 0%, #9fd6f5 50%, #4a9fd4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.portal--steam:hover{
  border-color:rgba(102,192,244,.5);
  box-shadow:0 30px 80px -20px rgba(102,192,244,.35), inset 0 1px 0 rgba(102,192,244,.15);
}
.portal--steam:hover .portal__orb--steam{ opacity:.8; transform:scale(1.15); }
.portal--steam .portal__cta{
  color:#c7e6ff;
  border-color:rgba(102,192,244,.3);
  box-shadow:inset 0 0 0 1px rgba(102,192,244,.08);
}
.portal--steam:hover .portal__cta{
  border-color:#66c0f4;
  box-shadow:0 10px 30px -10px #66c0f4, inset 0 1px 0 rgba(255,255,255,.2);
}

/* ============ Мир BOOSTY — тепло / роза ============ */
.portal--boosty{ color:var(--coral); }
.portal--boosty .portal__bg{
  background:
    radial-gradient(120% 100% at 80% 100%, rgba(255,122,156,.22), transparent 55%),
    linear-gradient(155deg, #2a0e1a 0%, #1d0813 45%, #0e0408 100%);
}
.portal--boosty:hover .portal__bg{ transform:scale(1.06); }
.portal--boosty .portal__grid--soft{
  background-image:
    radial-gradient(rgba(255,122,156,.22) 1px, transparent 1.5px);
  background-size:30px 30px;
  opacity:.2;
}
.portal--boosty:hover .portal__grid--soft{ opacity:.35; transform:scale(1.05); }
.portal--boosty .portal__orb--boosty{
  background:radial-gradient(circle, rgba(255,122,156,.7), transparent 60%);
  bottom:-12%; left:-10%;
}
.portal--boosty .portal__ghost{ color:var(--glow); }
.portal--boosty .portal__title{
  background:linear-gradient(120deg, #fff 0%, var(--blush) 45%, var(--glow) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.portal--boosty:hover{
  border-color:rgba(255,122,156,.5);
  box-shadow:0 30px 80px -20px rgba(255,91,138,.4), inset 0 1px 0 rgba(255,122,156,.15);
}
.portal--boosty:hover .portal__orb--boosty{ opacity:.85; transform:scale(1.15); }
.portal--boosty .portal__cta{
  color:#ffe1ea;
  border-color:rgba(255,122,156,.3);
  box-shadow:inset 0 0 0 1px rgba(255,122,156,.08);
}
.portal--boosty:hover .portal__cta{
  border-color:var(--coral);
  background:linear-gradient(135deg, rgba(242,145,75,.9), rgba(255,91,138,.9));
  color:#fff;
  box-shadow:0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ============ Мобайл — стак вертикально ============ */
@media (max-width:860px){
  .portals{ grid-template-columns:1fr; gap:18px; }
  .portals__divider{ display:none; }
  .portal{ min-height:auto; }
  .portal__ghost{ font-size:clamp(6rem,30vw,10rem); }
}

/* =================================================================
   ЗАЛ МЕМНЫХ — галерея донатеров
   ================================================================= */
.patrons{
  position:relative;
  padding:clamp(80px,10vw,140px) 0 clamp(60px,8vw,100px);
  overflow:hidden;
}

/* --- Лента почёта --- */
.honor-strip{
  max-width:100%;
  margin:0 0 clamp(40px,6vw,72px);
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:clamp(10px,1.6vw,16px) 0;
  background:linear-gradient(90deg, transparent, rgba(107,26,53,.25), transparent);
}
.honor-strip__track{
  display:flex; white-space:nowrap;
  font-family:var(--font-display);
  font-weight:300; font-style:italic;
  font-size:clamp(1.1rem,2.2vw,1.8rem);
  color:var(--dusty);
  animation:marquee 50s linear infinite;
}
.honor-strip__track span{ padding-right:.5em; letter-spacing:.08em; }

/* --- Заголовки тиров --- */
.tier-head{
  max-width:var(--maxw);
  margin:clamp(40px,6vw,72px) auto clamp(20px,2.6vw,32px);
  padding:0 var(--gut);
  display:flex; align-items:center; gap:18px;
}
.tier-head:first-of-type{ margin-top:clamp(24px,3vw,40px); }
.tier-head__line{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.tier-head__name{
  font-family:var(--font-mono);
  font-size:clamp(.7rem,1.1vw,.85rem);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--dusty);
  white-space:nowrap;
}

/* ============ ТОП-3: ЛЕГЕНДЫ ============ */
.pantheon{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px,2vw,28px);
  perspective:1600px;
}
@media (max-width:880px){ .pantheon{ grid-template-columns:1fr; } }

.legend{
  position:relative;
  padding:clamp(28px,3.4vw,44px) clamp(24px,2.8vw,36px) clamp(26px,3vw,38px);
  border-radius:var(--r-lg);
  background:
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 60%, rgba(0,0,0,.2));
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.legend__aura{
  position:absolute; inset:-30%;
  z-index:0;
  background:radial-gradient(circle at 50% 30%, rgba(255,200,87,.18), transparent 60%);
  opacity:.6;
  transition:opacity .6s var(--ease), transform .8s var(--ease-out);
  pointer-events:none;
}
.legend__shine{
  position:absolute; inset:0;
  z-index:4;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-130%);
  pointer-events:none; mix-blend-mode:screen;
}
.legend:hover .legend__shine{ animation:shimmer 1.1s var(--ease-out); }
.legend:hover .legend__aura{ opacity:1; transform:scale(1.1); }

.legend__rank{
  position:absolute; top:18px; left:50%;
  transform:translateX(-50%);
  z-index:5;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(.85rem,1.2vw,1rem);
  letter-spacing:.2em;
  color:var(--gold,#ffc857);
}

/* Аватар — гексагон с буквой */
.legend__avatar,.patron__avatar{
  position:relative;
  z-index:3;
  display:grid; place-items:center;
  margin:clamp(20px,3vw,32px) auto clamp(16px,2vw,22px);
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.legend__avatar{
  width:clamp(86px,11vw,128px); height:clamp(86px,11vw,128px);
  font-size:clamp(2.4rem,4vw,3.6rem);
}
.legend__avatar::before{
  content:"";
  position:absolute; inset:0;
  background:var(--avatar-grad, linear-gradient(135deg, var(--glow), var(--rose-deep)));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 40px var(--avatar-glow, rgba(255,91,138,.5));
}
.legend__avatar::after{
  content:"";
  position:absolute; inset:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.3));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.legend__avatar span,.patron__avatar span{ position:relative; z-index:2; text-shadow:0 2px 8px rgba(0,0,0,.6); }

.legend:hover .legend__avatar{ animation:avatar-breath 2.4s ease-in-out infinite; }
@keyframes avatar-breath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

.legend__title{
  position:relative; z-index:3;
  font-family:var(--font-mono);
  font-size:clamp(.65rem,.95vw,.78rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold,#ffc857);
  margin-bottom:8px;
}
.legend__name{
  position:relative; z-index:3;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--cream);
  margin-bottom:clamp(14px,1.8vw,20px);
  word-break:break-word;
}
.legend__sum{
  position:relative; z-index:3;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,3.6vw,3rem);
  line-height:1;
  letter-spacing:-.03em;
  display:inline-flex; align-items:flex-start; gap:.06em;
  background:linear-gradient(180deg, #fff, var(--blush) 55%, var(--gold,#ffc857));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 20px rgba(255,200,87,.25));
  margin-bottom:18px;
}
.legend__sum .rub{
  font-size:.45em;
  align-self:center;
  -webkit-text-fill-color:var(--gold,#ffc857);
  background:none;
  margin-right:.04em;
}
.legend__bar{
  position:relative; z-index:3;
  height:3px;
  background:rgba(255,255,255,.07);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:14px;
}
.legend__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--gold,#ffc857), var(--blush));
  border-radius:3px;
  box-shadow:0 0 12px var(--gold,#ffc857);
  transition:width 1.4s .3s var(--ease-out);
}
.legend.is-in .legend__bar i{ width:var(--p); }

.legend__foot{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:var(--mute);
}
.legend__seal{
  color:var(--gold,#ffc857);
  opacity:.8;
}

/* Ранги-окрасы */
.legend--rank1{ --gold:#ffd76b; --avatar-grad:linear-gradient(135deg,#ffe08a,#ffc857 45%,#c98a1a); --avatar-glow:rgba(255,200,87,.6); }
.legend--rank2{ --gold:#e7d3a0; --avatar-grad:linear-gradient(135deg,#f0e0c0,#c9b88a 50%,#8a7a5a); --avatar-glow:rgba(201,184,138,.5); }
.legend--rank3{ --gold:#d98e5a; --avatar-grad:linear-gradient(135deg,#e8a574,#c46b3d 50%,#8a3e1a); --avatar-glow:rgba(196,107,61,.5); }
.legend:hover{
  border-color:var(--gold);
  box-shadow:0 30px 80px -20px var(--avatar-glow), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============ ХРАНИТЕЛИ / СОЮЗНИКИ ============ */
.guardians,.allies{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
  display:grid;
  gap:clamp(14px,1.8vw,20px);
}
.guardians{ grid-template-columns:repeat(2,1fr); }
.allies{ grid-template-columns:repeat(3,1fr); }
@media (max-width:780px){ .guardians{ grid-template-columns:1fr; } }
@media (max-width:780px){ .allies{ grid-template-columns:1fr; } }

.patron{
  position:relative;
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.15));
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease);
  transform-style:preserve-3d;
  perspective:1200px;
}
.patron__link{ display:block; color:inherit; }
.patron__link::after{ content:""; position:absolute; inset:0; }

.patron__avatar{
  width:clamp(56px,7vw,72px); height:clamp(56px,7vw,72px);
  font-size:clamp(1.4rem,2vw,1.9rem);
  margin:0 0 16px;
}
.patron__avatar::before{
  content:"";
  position:absolute; inset:0;
  background:var(--avatar-grad, linear-gradient(135deg, var(--rose), var(--rose-deep)));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 22px var(--avatar-glow, rgba(255,91,138,.4));
}
.patron__avatar::after{
  content:"";
  position:absolute; inset:3px;
  background:linear-gradient(160deg, rgba(255,255,255,.15), rgba(0,0,0,.3));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.patron__avatar--link{ color:var(--coral); }
.patron__rank{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.15em;
  color:var(--mute);
  margin-bottom:6px;
}
.patron__rank .ext{ color:var(--coral); }
.patron__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1rem,1.5vw,1.25rem);
  color:var(--cream);
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.patron__name i{ font-style:italic; font-weight:300; color:var(--mute); }
.patron__sum{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--blush);
  letter-spacing:.01em;
  margin-bottom:14px;
}
.patron__sum .rub{ color:var(--coral); }
.patron__bar{
  position:absolute; left:0; bottom:0; right:0;
  height:3px;
  background:rgba(255,255,255,.06);
}
.patron__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--glow), var(--blush));
  box-shadow:0 0 10px var(--glow);
  transition:width 1.4s .3s var(--ease-out);
}
.patron.is-in .patron__bar i{ width:var(--p); }
.patron:hover{
  transform:translateY(-4px);
  border-color:var(--coral);
  box-shadow:0 20px 50px -20px rgba(255,91,138,.4);
}

/* ============ ПУСТОЙ ПОСТАМЕНТ ============ */
.throne{
  position:relative;
  max-width:var(--maxw);
  margin:clamp(60px,8vw,100px) auto 0;
  padding:0 var(--gut);
}
.throne__glow{
  position:absolute; inset:-10%;
  z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,91,138,.18), transparent 60%);
  filter:blur(40px);
  animation:throne-breathe 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes throne-breathe{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.9;transform:scale(1.08)} }
.throne__rays{
  position:absolute; top:50%; left:50%;
  width:600px; height:600px;
  transform:translate(-50%,-50%);
  z-index:0;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,91,138,.06) 20deg, transparent 40deg, transparent 60deg, rgba(255,91,138,.06) 80deg, transparent 100deg, transparent 120deg, rgba(255,91,138,.06) 140deg, transparent 160deg, transparent 180deg, rgba(255,91,138,.06) 200deg, transparent 220deg, transparent 240deg, rgba(255,91,138,.06) 260deg, transparent 280deg, transparent 300deg, rgba(255,91,138,.06) 320deg, transparent 340deg);
  border-radius:50%;
  animation:throne-spin 60s linear infinite;
  pointer-events:none;
  opacity:.6;
}
@keyframes throne-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.throne__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
  padding:clamp(32px,5vw,64px);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,91,138,.06), rgba(0,0,0,.25));
  border:1px dashed rgba(255,91,138,.35);
  backdrop-filter:blur(4px);
  overflow:hidden;
}
@media (max-width:680px){ .throne__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

.throne__avatar{
  position:relative;
  width:clamp(96px,14vw,140px); height:clamp(96px,14vw,140px);
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(3rem,6vw,5rem);
  color:var(--coral);
  filter:drop-shadow(0 0 30px rgba(255,91,138,.5));
  animation:throne-breathe 3.5s ease-in-out infinite;
}
.throne__avatar::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,91,138,.15), rgba(255,91,138,.03));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border:2px dashed rgba(255,122,156,.4);
}
.throne__avatar span{ position:relative; z-index:2; opacity:.7; }

.throne__tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--coral);
  padding:.4em .9em;
  border:1px solid rgba(255,122,156,.3);
  border-radius:100px;
  margin-bottom:16px;
}
.throne__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.8rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.throne__title em{
  font-style:italic; font-weight:300;
  background:linear-gradient(120deg, var(--blush), var(--glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.throne__lead{
  color:var(--mute);
  font-weight:300;
  max-width:48ch;
  margin-bottom:24px;
  font-size:clamp(.95rem,1.4vw,1.05rem);
}
.throne__cta{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.throne__hint{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--mute-2);
}

/* screen-reader-only */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =================================================================
   OUTRO
   ================================================================= */
.outro{
  position:relative;
  text-align:center;
  padding:clamp(100px,16vw,220px) var(--gut) clamp(80px,12vw,140px);
  overflow:hidden;
}
.outro__orb{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
}
.outro__orb .orb{ width:clamp(420px,80vw,900px); height:clamp(420px,80vw,900px); opacity:.5; }
.outro__title{
  position:relative; z-index:2;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.8rem,5vw,4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  max-width:18ch;
  margin:0 auto;
}
.outro__title em{
  font-style:italic; font-weight:300;
  background:linear-gradient(120deg, var(--blush), var(--glow));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.outro__text{
  position:relative; z-index:2;
  max-width:48ch;
  margin:24px auto 0;
  color:var(--mute);
  font-weight:300;
  font-size:clamp(1rem,1.5vw,1.15rem);
}
.outro__cta{
  position:relative; z-index:2;
  margin-top:40px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

/* =================================================================
   FOOTER
   ================================================================= */
.foot{
  position:relative;
  padding:32px var(--gut);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute-2);
}
.foot__row{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.foot__sign{
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  letter-spacing:.05em;
  text-transform:lowercase;
  color:var(--blush);
}
.foot__top{
  padding:.6em 1.1em;
  border:1px solid var(--line);
  border-radius:100px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.foot__top:hover{ border-color:var(--coral); color:var(--cream); }

/* =================================================================
   REVEAL-анимации (через IntersectionObserver)
   ================================================================= */
[data-reveal]{
  opacity:0;
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal="up"]{ transform:translateY(36px); }
[data-reveal="block"]{ transform:translateY(60px); filter:blur(8px); }
[data-reveal="card"]{ transform:translateY(40px) scale(.96); filter:blur(6px); }
[data-reveal="legend"]{
  transform:perspective(1200px) rotateY(24deg) translateY(40px);
  filter:blur(8px);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }

/* =================================================================
   CUSTOM SCROLLBAR
   ================================================================= */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--wine-2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--rose-deep); }
html{ scrollbar-color:var(--wine-2) var(--void); scrollbar-width:thin; }

/* =================================================================
   CINEMATIC DEPTH — restrained layers, strong hierarchy
   ================================================================= */
:root{
  --void:#050305;
  --deep:#0b0509;
  --base:#13080e;
  --line:rgba(240,181,196,.2);
  --line-2:rgba(245,235,228,.1);
  --glass:rgba(255,255,255,.045);
  --mx:50vw;
  --my:28vh;
  --scroll-p:0;
  --maxw:1320px;
}

body{
  background:
    radial-gradient(80vw 70vh at var(--mx) var(--my), rgba(255,91,138,.07), transparent 62%),
    var(--void);
}

#grain{
  inset:0;
  width:100%; height:100%;
  opacity:.038;
  animation:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.scene{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
  perspective:900px;
}
.scene::before{
  content:""; position:absolute; left:-20%; right:-20%; bottom:-30vh; height:72vh;
  background-image:
    linear-gradient(rgba(255,122,156,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,156,.09) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, transparent, #000 22%, transparent 82%);
  transform:rotateX(68deg) translateY(calc(var(--scroll-p) * 70px));
  transform-origin:center bottom;
  opacity:.42;
}
.scene__beam{
  position:absolute; top:-25vh; width:18vw; height:115vh;
  background:linear-gradient(180deg, rgba(255,228,235,.13), rgba(255,91,138,.025) 58%, transparent);
  filter:blur(28px); opacity:.48; mix-blend-mode:screen;
}
.scene__beam--left{ left:7%; transform:rotate(-13deg) translateY(calc(var(--scroll-p) * -34px)); }
.scene__beam--right{ right:8%; transform:rotate(14deg) translateY(calc(var(--scroll-p) * -52px)); }
.scene__horizon{
  position:absolute; left:50%; bottom:17vh; width:84vw; height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,122,156,.45),transparent);
  box-shadow:0 0 45px 12px rgba(255,91,138,.1);
}
.scene__glow{
  position:absolute; width:48vw; height:48vw; left:50%; top:18%;
  transform:translate(-50%, calc(-50% + var(--scroll-p) * -80px));
  border-radius:50%; filter:blur(70px);
  background:radial-gradient(circle,rgba(255,91,138,.13),transparent 66%);
}

.aurora{ background:linear-gradient(180deg,#080407 0%,#050305 72%,#090407 100%); }
.aurora__blob{ opacity:.3; filter:blur(110px); }
.vignette{ background:radial-gradient(ellipse at center,transparent 35%,rgba(2,1,2,.82) 100%); }

.hero{ min-height:max(760px,100svh); isolation:isolate; }
.hero::before{
  content:""; position:absolute; left:50%; top:50%; width:min(84vw,1180px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(255,181,201,.1);
  box-shadow:inset 0 0 100px rgba(255,91,138,.025), 0 0 100px rgba(255,91,138,.025);
}
.hero::after{
  content:""; position:absolute; inset:8% 5%; z-index:0;
  border:1px solid rgba(255,255,255,.045);
  border-radius:40px;
  mask-image:linear-gradient(135deg,#000,transparent 30%,transparent 70%,#000);
}
.hero__grid{ transform:translateY(calc(var(--scroll-p) * -52px)); }
.hero__eyebrow{
  padding:.7em 1.05em; border:1px solid var(--line); border-radius:999px;
  background:rgba(8,4,7,.45); backdrop-filter:blur(16px);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 14px 44px rgba(0,0,0,.3);
}
.hero__title{ overflow:visible; filter:drop-shadow(0 35px 55px rgba(0,0,0,.6)); }
.glitch__main{
  background:linear-gradient(180deg,#fff 0%,#f8e7eb 32%,#dfa5b5 68%,#8c2948 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 110px rgba(255,91,138,.3);
}
.hero__sub{
  padding-left:20px; border-left:1px solid rgba(255,122,156,.38);
  text-shadow:0 3px 24px rgba(0,0,0,.8);
}
.orb--hero{ right:-10%; top:10%; opacity:.82; transform:translate3d(var(--orb-x,0),var(--orb-y,0),0); }
.orb--hero::before,.orb--hero::after{
  content:""; position:absolute; inset:12%; border-radius:50%;
  border:1px solid rgba(255,181,196,.17); animation:orbit 24s linear infinite;
}
.orb--hero::after{ inset:22%; border-style:dashed; animation-direction:reverse; animation-duration:17s; }
@keyframes orbit{ to{ transform:rotate(1turn); } }

.marquee{ transform:rotate(-1deg) scale(1.015); box-shadow:0 18px 60px rgba(0,0,0,.35); }
.counter{ isolation:isolate; }
.counter::before{
  content:""; position:absolute; inset:12% 8%; z-index:-1;
  background:radial-gradient(ellipse,rgba(255,91,138,.12),transparent 66%);
  filter:blur(30px);
}
.counter__num{ filter:drop-shadow(0 18px 55px rgba(255,91,138,.32)); }

.channels{
  background:
    radial-gradient(70% 90% at 50% 48%,rgba(255,91,138,.09),transparent 72%),
    linear-gradient(180deg,rgba(15,7,11,.7),rgba(5,3,5,.94));
  isolation:isolate; overflow:hidden;
}
.channels::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(90deg,transparent 49.9%,rgba(255,181,196,.08) 50%,transparent 50.1%);
}
.sec-head__idx{ padding:.65em .8em; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025); }
.sec-head__title{ text-shadow:0 18px 48px rgba(0,0,0,.5); }

.portals{ gap:clamp(18px,2vw,30px); perspective:1800px; }
.portal{
  min-height:clamp(570px,72vh,720px);
  border-radius:34px;
  border-color:rgba(245,235,228,.16);
  box-shadow:0 35px 90px -36px #000, inset 0 1px rgba(255,255,255,.1);
  clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px));
  transform:perspective(1400px) translateY(var(--portal-reveal,40px)) rotateX(var(--portal-rx,0deg)) rotateY(var(--portal-ry,0deg));
  opacity:0;
  transition:opacity .9s var(--ease-out),filter .6s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.portal.is-revealed{ --portal-reveal:0px; opacity:1; }
.portal::before{
  content:""; position:absolute; inset:1px; z-index:5; pointer-events:none;
  clip-path:inherit;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 18%,transparent 82%,rgba(255,255,255,.04));
}
.portal::after{
  content:""; position:absolute; inset:18px; z-index:5; pointer-events:none;
  border:1px solid rgba(255,255,255,.055); border-radius:20px;
}
.portal__inner{ padding:clamp(32px,4vw,54px); transform:translateZ(42px); }
.portal__head{ padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); }
.portal__glyph{
  top:110px; right:clamp(34px,4vw,58px); padding:17px; width:94px; height:94px;
  border:1px solid currentColor; border-radius:50%;
  background:rgba(4,3,4,.32); backdrop-filter:blur(12px);
  box-shadow:0 0 0 9px rgba(255,255,255,.025),0 18px 50px rgba(0,0,0,.4);
}
.portal__title{ font-size:clamp(2.7rem,5vw,4.6rem); margin-top:clamp(90px,12vw,150px); }
.portal__text{ font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.75; }
.portal__feats{ gap:8px; }
.portal__feats li{ padding:.5em .8em; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(0,0,0,.18); }
.portal__cta{ padding:1.15em 1.8em; background:rgba(4,3,4,.46); box-shadow:inset 0 1px rgba(255,255,255,.09),0 16px 35px rgba(0,0,0,.24); }
.portal__ghost{ bottom:-2%; opacity:.075; }
.portals__divider span{ width:66px; height:66px; box-shadow:0 0 0 9px #070406,0 0 45px rgba(255,91,138,.2); }
@media (hover:hover) and (pointer:fine){
  .portals.has-hover .portal{ filter:saturate(.82) brightness(.72); }
  .portals.has-hover .portal.is-active{ filter:none; }
  .portal:hover{ transform:translateY(-8px); }
}

.patrons{
  padding-top:clamp(110px,13vw,180px);
  background:
    radial-gradient(80% 42% at 50% 25%,rgba(255,91,138,.11),transparent 70%),
    linear-gradient(180deg,#050305,#0c0509 45%,#050305);
  isolation:isolate;
}
.patrons::before{
  content:""; position:absolute; left:50%; top:240px; width:min(1200px,92vw); height:68%; z-index:-1;
  transform:translateX(-50%);
  border-left:1px solid rgba(255,181,196,.08); border-right:1px solid rgba(255,181,196,.08);
  background:
    linear-gradient(90deg,transparent 8%,rgba(255,181,196,.04) 8.1%,transparent 8.2%,transparent 91.8%,rgba(255,181,196,.04) 91.9%,transparent 92%),
    radial-gradient(ellipse at 50% 0,rgba(255,91,138,.08),transparent 56%);
}
.patrons::after{
  content:""; position:absolute; left:50%; top:360px; width:min(1080px,86vw); height:360px; z-index:-1;
  transform:translateX(-50%); border-radius:50% 50% 0 0;
  border:1px solid rgba(255,181,196,.1); border-bottom:0;
  box-shadow:inset 0 30px 80px rgba(255,91,138,.025);
}
.honor-strip{ backdrop-filter:blur(12px); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.tier-head__name{ color:var(--blush); text-shadow:0 0 24px rgba(255,91,138,.36); }
.pantheon{ align-items:end; gap:clamp(18px,2.2vw,32px); }
.legend{
  min-height:480px; display:flex; flex-direction:column; justify-content:center;
  border-radius:150px 150px 28px 28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 26%),
    linear-gradient(165deg,rgba(255,255,255,.045),rgba(5,3,5,.78));
  box-shadow:0 38px 80px -35px #000,inset 0 1px rgba(255,255,255,.13),inset 0 -30px 60px rgba(0,0,0,.32);
}
.legend.is-in,.patron.is-in{
  transform:perspective(1200px) translateY(var(--tilt-lift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}
.legend::before{
  content:""; position:absolute; inset:14px; z-index:1; pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  border-radius:140px 140px 19px 19px;
}
.legend::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-18px; height:25px; z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 28%,#18090f),#050305);
  clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);
  box-shadow:0 15px 35px #000;
}
.legend--rank1{ min-height:535px; margin-bottom:24px; }
.legend__rank{ top:32px; padding:.55em 1em; border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); border-radius:999px; background:rgba(5,3,5,.58); }
.legend__avatar{ filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 24px var(--avatar-glow)); }
.legend__avatar::before{ transform:rotate(30deg); }
.legend__avatar::after{ transform:rotate(30deg) scale(.91); }
.legend__sum{ font-size:clamp(2.2rem,3.5vw,3.35rem); }

.guardians,.allies{ gap:clamp(16px,2vw,24px); }
.patron{
  min-height:210px; padding:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 45%,rgba(0,0,0,.28));
  border-color:rgba(240,181,196,.15);
  box-shadow:0 24px 60px -34px #000,inset 0 1px rgba(255,255,255,.08);
}
.patron::before{
  content:""; position:absolute; inset:10px; pointer-events:none;
  border:1px solid rgba(240,181,196,.07); border-radius:12px;
}
.patron__avatar{ filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px var(--avatar-glow)); }
.patron__rank{ position:absolute; right:28px; top:27px; font-size:.8rem; }
.throne__inner{
  clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px));
  border-style:solid; background:linear-gradient(135deg,rgba(255,91,138,.1),rgba(255,255,255,.025) 40%,rgba(0,0,0,.3));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 35px 90px -45px rgba(255,91,138,.6);
}
.throne__avatar::before{ border:0; box-shadow:inset 0 0 0 1px rgba(255,122,156,.42),0 0 0 10px rgba(255,91,138,.035); }
.outro{ min-height:84vh; display:flex; flex-direction:column; justify-content:center; }

@media (max-width:880px){
  .scene__beam{ width:28vw; opacity:.3; }
  .hero{ min-height:max(680px,100svh); }
  .portal{ min-height:620px; }
  .pantheon{ gap:34px; }
  .legend,.legend--rank1{ min-height:440px; margin-bottom:0; }
  .legend--rank1{ order:-1; }
}
@media (max-width:560px){
  .marquee{ transform:none; }
  .hero{ padding-top:100px; }
  .hero::after{ inset:18px 12px; border-radius:28px; }
  .hero__sub{ font-size:.98rem; }
  .hero__cta{ gap:10px; }
  .btn{ padding:.88em 1.25em; }
  .portals{ padding-inline:14px; }
  .portal{ min-height:570px; border-radius:26px; }
  .portal__inner{ padding:28px; }
  .portal__glyph{ top:96px; right:28px; width:74px; height:74px; padding:13px; }
  .portal__title{ margin-top:110px; font-size:clamp(2.35rem,12vw,3.2rem); }
  .portal__feats{ gap:6px; }
  .portal__feats li{ font-size:.76rem; }
  .legend{ border-radius:110px 110px 24px 24px; }
  .patron{ min-height:190px; }
  .throne{ padding-inline:14px; }
  .throne__inner{ padding:34px 24px; }
}

@media (prefers-reduced-motion:reduce){
  .hero__grid,.scene::before,.scene__beam,.scene__glow{ transform:none; }
  .orb--hero::before,.orb--hero::after{ animation:none; }
}

/* ── Language Switcher ─────────────────────────────────────── */
.lang-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 6px 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 100px;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-switcher__btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.lang-switcher__btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(20, 20, 28, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.lang-switcher__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lang-switcher__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.lang-switcher__item.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lang-switcher__item .lang-switcher__name {
  font-weight: 600;
}

.lang-switcher__item .lang-switcher__name {
  opacity: 0.5;
  font-size: 0.72rem;
}

/* RTL support */
[dir="rtl"] .lang-switcher {
  right: auto;
  left: 16px;
}

[dir="rtl"] .lang-switcher__dropdown {
  right: auto;
  left: 0;
}

@media (max-width: 600px) {
  .lang-switcher {
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    font-size: 0.68rem;
  }
  [dir="rtl"] .lang-switcher {
    right: auto;
    left: 10px;
  }
  .lang-switcher__dropdown {
    min-width: 160px;
    max-height: 260px;
  }
}