/* ══════════════════════════════════════════
   ENVEILA · тёмная тема
   ══════════════════════════════════════════ */

:root{
  --bg:     #0a0c10;
  --bg-2:   #10141a;
  --flat:   #0a0b10;
  --panel:  #141922;
  --line:   rgba(255,255,255,.14);
  --line-2: rgba(255,255,255,.26);

  --text:   #ffffff;
  --dim:    #c3ccd8;
  --faint:  #8e9aab;

  --acc:    #3ee8c8;
  --acc-2:  #4d8dff;
  --acc-3:  #b98cff;

  --disp: 'Sora', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;

  --r: 22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; font-weight:400; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(115% 70% at 50% -10%, rgba(62,232,200,.10), transparent 58%),
    radial-gradient(90% 55% at 12% 32%, rgba(77,141,255,.07), transparent 60%),
    radial-gradient(80% 50% at 90% 78%, rgba(185,140,255,.05), transparent 60%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.55));
}

a{ color:inherit; text-decoration:none; }
svg{ display:block; }
img{ max-width:100%; }

.hold{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:22px; }
.mid{ text-align:center; }
.left{ text-align:left; margin-left:0; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:300; background:var(--panel); padding:10px 16px; border-radius:8px; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:4px; }

/* ── ШАПКА ───────────────────────────────── */
.top{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; padding-top:calc(18px + env(safe-area-inset-top));
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease;
}
.top.stuck{
  background:rgba(10,12,16,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.brand{ display:block; }
.mark{ width:32px; height:auto; }
.mark .swp{ animation:swp 7s ease-in-out infinite; }
@keyframes swp{ 0%,66%{ transform:translateX(0);} 86%,100%{ transform:translateX(200px);} }

.nav{ display:none; gap:34px; }
.nav a{
  position:relative; font-family:var(--disp);
  font-size:12px; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); transition:color .3s ease;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:var(--acc); transition:right .35s cubic-bezier(.2,.9,.3,1);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ right:0; }

.burger{ width:28px; height:28px; padding:0; display:grid; align-content:center; gap:7px; background:none; border:none; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.5px; background:var(--text); transition:transform .35s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.2px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:79; display:grid; place-content:center;
  background:rgba(10,12,16,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  animation:fade .35s ease;
}
.drawer[hidden]{ display:none; }
.drawer nav{ display:grid; gap:6px; text-align:center; }
.drawer a{ font-family:var(--disp); font-size:24px; font-weight:300; padding:12px 30px; color:var(--dim); transition:color .3s ease; }
.drawer a:hover{ color:var(--acc); }
.drawer-cta{ color:var(--acc) !important; margin-top:16px; letter-spacing:.24em !important; font-size:14px !important; text-transform:uppercase; }
@keyframes fade{ from{ opacity:0; } }

/* ── ГЕРОЙ ───────────────────────────────── */
.hero{ padding:130px 0 70px; text-align:center; }
.tag{
  margin:0; font-family:var(--disp); font-weight:400;
  font-size:clamp(27px,6.6vw,54px); line-height:1.2; letter-spacing:-.025em;
}
.tag-sub{
  margin:16px 0 0; font-family:var(--disp);
  font-size:clamp(11px,2.6vw,13px); font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--acc);
}

/* ── СТЕНА ГОРОДОВ ───────────────────────── */
.wall-hold{ margin:44px auto 46px; }
.wall{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
  perspective:1400px;
}

.tile{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(150deg,#161a22,#0d1015);
  border:1px solid var(--line);
  text-align:left;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), border-color .45s ease, box-shadow .5s ease;
  will-change:transform;
}
.tile:hover{
  border-color:var(--line-2);
  box-shadow:0 32px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05);
}
.tile-big{ grid-column:span 2; aspect-ratio:16/11; }

/* картинка */
.tile-img{ position:absolute; inset:0; display:block; overflow:hidden; }
.tile-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04);
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1), filter .6s ease;
  filter:saturate(.85) contrast(1.05);
}
.tile:hover .tile-img img{ transform:scale(1.12); filter:saturate(1.05) contrast(1.08); }

/* затемнение под текстом */
.tile-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,8,11,.94) 0%, rgba(6,8,11,.55) 34%, rgba(6,8,11,.12) 62%, rgba(6,8,11,.35) 100%);
  transition:opacity .5s ease;
}
.tile:hover .tile-veil{ opacity:.88; }

/* блик за курсором */
.tile-glare{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .45s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.16), transparent 62%);
  mix-blend-mode:screen;
}
.tile:hover .tile-glare{ opacity:1; }

/* содержимое */
.tile-body{
  position:absolute; inset:auto 0 0 0; z-index:3;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:5px; padding:20px;
  transform:translateZ(30px);
}
.tile-state{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--disp); font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  padding:5px 11px; border-radius:100px;
  background:rgba(10,12,16,.55);
  border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.tile-on .tile-state{ color:var(--acc); border-color:rgba(62,232,200,.45); }
.tile-state i{
  width:5px; height:5px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 8px var(--acc);
  animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.tile-name{
  font-family:var(--disp); font-weight:500;
  font-size:clamp(18px,4.4vw,24px); line-height:1.14;
  letter-spacing:-.02em; margin-top:5px;
}
.tile-big .tile-name{ font-size:clamp(24px,6vw,40px); }
.tile-sub{ font-size:12.5px; color:var(--dim); }

.tile-go{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  font-family:var(--disp); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1);
}
.tile-go i{ font-style:normal; transition:transform .4s ease; }
.tile:hover .tile-go{ opacity:1; transform:translateY(0); }
.tile:hover .tile-go i{ transform:translateX(5px); }

/* тонкая линия сверху у активного */
.tile-on::after{
  content:''; position:absolute; inset:0 0 auto 0; height:2px; z-index:4;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  opacity:.85;
}

/* появление плиток */
.wall .tile{ opacity:0; transform:translateY(26px); }
.wall.seen .tile{
  opacity:1; transform:none;
  transition:opacity .8s ease calc(var(--i) * 70ms),
             transform .8s cubic-bezier(.2,.8,.3,1) calc(var(--i) * 70ms);
}

/* ── КНОПКА ──────────────────────────────── */
.halo{ position:relative; display:inline-block; }
.halo::before{
  content:''; position:absolute; inset:-7px; border-radius:100px;
  border:1.5px solid var(--acc); opacity:0;
  animation:pulse 3.2s ease-out infinite; pointer-events:none;
}
@keyframes pulse{ 0%{ transform:scale(.95); opacity:.6; } 70%,100%{ transform:scale(1.16); opacity:0; } }

.enter{
  position:relative; display:inline-block; border-radius:100px;
  background:linear-gradient(112deg,var(--acc) 0%,#37d9e0 45%,var(--acc-2) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 18px 48px -14px rgba(62,232,200,.65);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .45s ease;
}
.enter:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 26px 64px -14px rgba(62,232,200,.9); }
.enter:active{ transform:translateY(-1px); }
.enter::after{
  content:''; position:absolute; top:0; bottom:0; left:-70%; width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg); transition:left .8s cubic-bezier(.3,.8,.3,1);
}
.enter:hover::after{ left:130%; }
.enter-in{ position:relative; display:flex; align-items:center; gap:14px; padding:20px 46px; transition:gap .35s ease; }
.enter:hover .enter-in{ gap:20px; }
.enter-word{ font-family:var(--disp); font-size:13.5px; font-weight:600; letter-spacing:.2em; text-indent:.2em; color:#04231e; }
.enter-arw{ width:22px; height:11px; color:#04231e; flex:none; }
.enter-sm .enter-in{ padding:17px 36px; }
.enter-sm .enter-word{ font-size:12.5px; }
.enter-sub{ margin:16px 0 0; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); }

/* ── СПИСОК ОСТАЛЬНЫХ ГОРОДОВ ────────────── */
.cities{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 20px; margin-top:44px;
}
.cities-label{
  font-family:var(--disp); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.cities a{ position:relative; font-size:13.5px; color:var(--dim); transition:color .3s ease; }
.cities a:hover{ color:var(--acc); }
.cities a.live::before{
  content:''; position:absolute; left:-10px; top:50%;
  width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 8px var(--acc);
}
.cities.left{ justify-content:flex-start; margin-top:24px; }

/* ── КАРТА (по умолчанию выключена) ──────── */
.stage{ position:relative; width:100%; height:min(50svh,460px); margin-top:26px; touch-action:none; cursor:grab; }
.stage.grabbing{ cursor:grabbing; }
.globe{ position:absolute; inset:0; width:100%; height:100%; }
.globe path{ fill:rgba(255,255,255,.018); stroke:rgba(255,255,255,.30); stroke-width:.6; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.dots{ position:absolute; inset:0; pointer-events:none; }
.dot{ position:absolute; top:0; left:0; width:46px; height:46px; margin:-23px 0 0 -23px; padding:0; background:none; border:none; display:grid; place-items:center; cursor:pointer; pointer-events:auto; }
.dot:focus{ outline:none; }
.dot i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.62); box-shadow:0 0 0 4px rgba(255,255,255,.07); transition:transform .35s ease, background .3s ease; }
.dot b{
  position:absolute; bottom:calc(50% + 18px); left:50%; transform:translateX(-50%) translateY(5px);
  font-family:var(--disp); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; padding:5px 12px; border-radius:100px;
  background:rgba(10,12,16,.9); border:1px solid var(--line);
  opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
.dot:hover i,.dot.near i{ transform:scale(1.5); background:var(--acc); }
.dot:hover b,.dot.near b,.dot.show b{ opacity:1; transform:translateX(-50%) translateY(0); }
.dot.on i{ width:13px; height:13px; background:var(--acc); box-shadow:0 0 0 5px rgba(62,232,200,.14), 0 0 26px 4px rgba(62,232,200,.6); }
.hint{ position:absolute; left:0; right:0; bottom:-2px; margin:0; text-align:center; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); pointer-events:none; transition:opacity .6s ease; }
.hint.gone{ opacity:0; }

/* ── СЕКЦИИ ──────────────────────────────── */
.sec{ padding:88px 0; }
.eyebrow{ margin:0 0 14px; font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--acc); }
.s-title{ font-family:var(--disp); font-weight:400; font-size:clamp(26px,5.8vw,42px); line-height:1.24; letter-spacing:-.015em; margin:0 0 20px; }
.s-lead{ margin:0 auto 32px; max-width:48ch; color:var(--dim); font-size:16px; }
.fine{ margin:26px 0 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.fine a{ color:var(--acc); border-bottom:1px solid rgba(62,232,200,.4); }
.mid-t{ text-align:center; }

.steps{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:14px; }
.steps li{
  position:relative; padding:28px 26px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),transparent 60%);
  overflow:hidden; transition:border-color .4s ease, transform .4s ease;
}
.steps li::before{ content:''; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(180deg,var(--acc),transparent); opacity:.6; }
.steps li:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.steps .n{ display:inline-block; margin-bottom:14px; font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--acc); padding:4px 10px; border:1px solid rgba(62,232,200,.3); border-radius:100px; }
.steps h3{ font-family:var(--disp); font-weight:500; font-size:19px; margin:0 0 10px; }
.steps p{ margin:0; color:var(--dim); font-size:14.5px; }

.grid6{ display:grid; gap:14px; margin-top:36px; }
.grid6 article{
  padding:26px 24px; border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.018);
  transition:background .4s ease, border-color .4s ease, transform .4s ease;
}
.grid6 article:hover{ background:rgba(255,255,255,.045); border-color:var(--line-2); transform:translateY(-4px); }
.grid6 h3{ font-family:var(--disp); font-weight:500; font-size:16px; margin:0 0 10px; }
.grid6 h3::before{ content:''; display:block; width:22px; height:2px; border-radius:2px; background:var(--acc); margin-bottom:14px; }
.grid6 article:nth-child(2) h3::before{ background:var(--acc-2); }
.grid6 article:nth-child(3) h3::before{ background:var(--acc-3); }
.grid6 article:nth-child(4) h3::before{ background:var(--acc-2); }
.grid6 article:nth-child(5) h3::before{ background:var(--acc-3); }
.grid6 p{ margin:0; color:var(--dim); font-size:14.5px; }

/* ── ШКАЛЫ ───────────────────────────────── */
.dials{ display:grid; gap:30px; margin-top:46px; grid-template-columns:repeat(2,1fr); }
.dial{ text-align:center; }
.dial-ring{ position:relative; width:100%; max-width:148px; margin:0 auto 18px; }
.dial-ring svg{ width:100%; height:auto; transform:rotate(-90deg); }
.dial-bg{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:7; }
.dial-fg{ fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.7s cubic-bezier(.2,.8,.25,1); }
.dial:nth-child(1) .dial-fg{ stroke:var(--acc);   filter:drop-shadow(0 0 7px rgba(62,232,200,.6)); }
.dial:nth-child(2) .dial-fg{ stroke:var(--acc-2); filter:drop-shadow(0 0 7px rgba(77,141,255,.6)); }
.dial:nth-child(3) .dial-fg{ stroke:var(--acc-3); filter:drop-shadow(0 0 7px rgba(185,140,255,.6)); }
.dial:nth-child(4) .dial-fg{ stroke:#ffcf5c;      filter:drop-shadow(0 0 7px rgba(255,207,92,.55)); }
.dial-num{ position:absolute; inset:0; display:grid; place-content:center; font-family:var(--disp); font-size:30px; font-weight:400; letter-spacing:-.02em; }
.dial h3{ font-family:var(--disp); font-weight:500; font-size:15.5px; margin:0 0 6px; }
.dial p{ margin:0; font-size:13px; color:var(--faint); max-width:24ch; margin-inline:auto; }

/* ── ВИДЕО ───────────────────────────────── */
.film{ background:none; }
.film-in{ max-width:1200px; margin-inline:auto; padding:20px 22px 60px; }
.film-slot{
  position:relative; width:100%; aspect-ratio:16/9;
  display:grid; place-items:center;
  background:none;
}
.film-slot video,.film-slot img{
  width:100%; height:100%; object-fit:contain;
  background:none;
}
/* чёрный фон ролика не даёт вклада — сквозь него виден фон страницы */
.film-vid{
  mix-blend-mode:screen;
  mask-image:radial-gradient(120% 96% at 50% 50%, #000 66%, transparent 99%);
  -webkit-mask-image:radial-gradient(120% 96% at 50% 50%, #000 66%, transparent 99%);
}

/* ── ЦИТАТА ──────────────────────────────── */
.quote-sec{ padding-block:96px; }
.quote{ margin:0; padding:0 0 0 22px; border-left:2px solid var(--acc); }
.quote p{ font-family:var(--disp); font-weight:300; font-size:clamp(18px,4.6vw,30px); line-height:1.5; margin:0 0 18px; color:var(--dim); }
.quote .strong{ color:var(--text); font-weight:400; margin-bottom:0; }

/* ── ПАРТНЁРЫ ────────────────────────────── */
.belt{
  margin-top:38px; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.belt-run{ display:flex; gap:60px; width:max-content; animation:run 32s linear infinite; }
.belt:hover .belt-run{ animation-play-state:paused; }
.belt-run span{ font-family:var(--disp); font-weight:400; font-size:20px; letter-spacing:.18em; color:var(--faint); white-space:nowrap; transition:color .3s ease; }
.belt-run span:hover{ color:var(--acc); }
@keyframes run{ to{ transform:translateX(-50%); } }

/* ── ФИНАЛ ───────────────────────────────── */
.last{ padding-block:112px; }
.last-title{ font-family:var(--disp); font-weight:400; font-size:clamp(28px,6.6vw,50px); line-height:1.18; letter-spacing:-.02em; margin:0 0 14px; }

/* ── СТРАНИЦА ГОРОДА ─────────────────────── */
.city-hero{ position:relative; padding:150px 0 20px; }
.city-hero.has-img{ padding-top:200px; padding-bottom:56px; }
.city-bg{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.city-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.04); }
.city-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 4%, rgba(10,12,16,.86) 42%, rgba(10,12,16,.6) 100%);
}
.city-hero-in{ position:relative; }
.crumbs{ margin:0 0 26px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.crumbs a{ color:var(--acc); }
.crumbs span{ margin:0 8px; opacity:.5; }
.state{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 14px;
  border:1px solid var(--line); border-radius:100px;
  font-family:var(--disp); font-size:10.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
  background:rgba(10,12,16,.5); backdrop-filter:blur(8px);
}
.state::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--faint); }
.state.on{ color:var(--acc); border-color:rgba(62,232,200,.4); }
.state.on::before{ background:var(--acc); box-shadow:0 0 8px var(--acc); }
.city-name{ font-family:var(--disp); font-weight:400; font-size:clamp(36px,9vw,74px); line-height:1.06; letter-spacing:-.03em; margin:0 0 22px; }
.city-lead{ margin:0; max-width:54ch; color:var(--dim); font-size:clamp(15px,3.6vw,18px); }

.quests{ margin-top:36px; display:grid; gap:14px; }
.quest{ padding:28px 26px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.018); transition:border-color .4s ease, transform .4s ease; }
.quest:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.quest-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.quest h3{ font-family:var(--disp); font-weight:500; font-size:19px; margin:0; }
.quest-state{ flex:none; font-family:var(--disp); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); padding:4px 11px; border:1px solid var(--line); border-radius:100px; }
.quest-state.live{ color:var(--acc); border-color:rgba(62,232,200,.4); }
.quest > p{ margin:12px 0 0; color:var(--dim); font-size:14.5px; max-width:56ch; }
.quest-meta{ display:flex; gap:10px; margin:16px 0 0 !important; flex-wrap:wrap; }
.quest-meta span{ font-size:11.5px; letter-spacing:.08em; color:var(--faint); padding:4px 11px; border:1px solid var(--line); border-radius:100px; }
.city-cta{ margin-top:44px; }
.others{ padding-top:0; }

/* ── ПОДВАЛ ──────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:36px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot-in{ display:flex; flex-direction:column; gap:16px; }
.foot-brand{ font-family:var(--disp); font-weight:500; font-size:12px; letter-spacing:.32em; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:20px; }
.foot-nav a{ font-size:13px; color:var(--dim); }
.foot-nav a:hover{ color:var(--acc); }
.foot-copy{ font-size:12px; letter-spacing:.1em; color:var(--faint); }

/* ── ПЛАНШЕТ ─────────────────────────────── */
@media (min-width:700px){
  .wall{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .tile{ aspect-ratio:1/1; }
  .tile-big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  .tile-body{ padding:24px; }
}

/* ── ДЕСКТОП ─────────────────────────────── */
@media (min-width:1000px){
  body{ font-size:17px; }
  .hold{ padding-inline:44px; }
  .top{ padding:24px 44px; }
  .mark{ width:36px; }
  .nav{ display:flex; }
  .burger{ display:none; }

  .hero{ padding:170px 0 90px; }
  .wall{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .wall-hold{ margin:56px auto 56px; }
  .tile-body{ padding:26px; }

  .sec{ padding:120px 0; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .grid6{ grid-template-columns:repeat(3,1fr); }
  .dials{ grid-template-columns:repeat(4,1fr); }
  .quests{ grid-template-columns:repeat(2,1fr); }
  .film-in{ padding:110px 44px; }
  .city-hero{ padding-top:190px; }
  .city-hero.has-img{ padding-top:250px; padding-bottom:70px; }
  .foot-in{ flex-direction:row; align-items:center; justify-content:space-between; }
  .quote{ padding-left:34px; }
}

/* ── ПОЯВЛЕНИЕ ───────────────────────────── */
.rv{ opacity:0; transform:translateY(20px); }
.rv.seen{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.3,1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .wall .tile{ opacity:1; transform:none; }
}
/* отступ под фиксированную шапку при переходе по якорям */
[id]{ scroll-margin-top:110px; }

/* ── ЗАГАДКА ─────────────────────────────── */
.rd{ display:grid; gap:0; margin-top:36px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.rd-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0d1015; }
.rd-img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.03) brightness(1); transition:filter 1.2s ease; }
.rd.solved .rd-img img{ filter:saturate(1) contrast(1.06) brightness(1.12); }
.rd-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,12,16,.12), rgba(10,12,16,.5));
}

.rd-panel{ padding:28px 24px 30px; background:rgba(255,255,255,.018); }
.rd-from{
  display:flex; align-items:center; gap:9px; margin:0 0 18px;
  font-family:var(--disp); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.rd-from i{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 9px var(--acc); animation:blink 2.6s ease-in-out infinite; }

.rd-lines{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.rd-lines li{
  font-family:var(--disp); font-weight:300;
  font-size:clamp(15px,3.6vw,18px); line-height:1.45; color:var(--dim);
}
.rd-lines b{ font-weight:300; color:inherit; transition:color .5s ease, text-shadow .5s ease; }
.rd.solved .rd-lines b{ color:var(--acc); text-shadow:0 0 14px rgba(62,232,200,.6); }

.rd-q{ margin:0 0 16px; font-size:14.5px; color:var(--text); }

.rd-form{ display:flex; gap:8px; }
.rd-input{
  flex:1; min-width:0;
  padding:14px 18px;
  font-family:var(--disp); font-size:14px; letter-spacing:.08em;
  color:var(--text); background:rgba(0,0,0,.35);
  border:1px solid var(--line); border-radius:100px;
  outline:none; transition:border-color .3s ease;
}
.rd-input::placeholder{ color:var(--faint); letter-spacing:.14em; font-size:12px; text-transform:uppercase; }
.rd-input:focus{ border-color:var(--acc); }
.rd-go{
  flex:none; width:50px; height:50px; border:none; border-radius:50%;
  background:linear-gradient(112deg,var(--acc),var(--acc-2));
  color:#04231e; font-size:19px; cursor:pointer;
  transition:transform .3s ease, box-shadow .35s ease;
}
.rd-go:hover{ transform:scale(1.06); box-shadow:0 10px 30px -10px rgba(62,232,200,.8); }
.rd.shake .rd-form{ animation:shake .42s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }

.rd-say{ margin:14px 0 0; min-height:22px; font-size:13.5px; color:var(--dim); }
.rd-say.ok{ color:var(--acc); }
.rd-hint{
  margin-top:12px; padding:0; background:none; border:none;
  font-family:inherit; font-size:12px; color:var(--faint);
  border-bottom:1px dashed var(--line-2); cursor:pointer;
  transition:color .3s ease;
}
.rd-hint:hover{ color:var(--dim); }

.rd-win{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.rd-win[hidden]{ display:none; }
.rd-win p{ margin:0 0 18px; font-size:14.5px; color:var(--dim); }

@media (min-width:860px){
  .rd{ grid-template-columns:1fr 1fr; }
  .rd-img{ aspect-ratio:auto; height:100%; }
  .rd-panel{ padding:38px 34px; }
}

/* ── ВОПРОСЫ ─────────────────────────────── */
.faq-list{ margin-top:34px; border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{
  position:relative;
  list-style:none; cursor:pointer;
  padding:22px 46px 22px 0;
  font-family:var(--disp); font-weight:400;
  font-size:clamp(15px,3.6vw,18px); color:var(--text);
  transition:color .3s ease;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary:hover{ color:var(--acc); }
.faq-list summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg); transition:transform .35s ease, border-color .3s ease;
}
.faq-list details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--acc); }
.faq-a{ padding:0 0 24px; animation:faqIn .4s ease; }
.faq-a p{ margin:0; max-width:70ch; color:var(--dim); font-size:14.5px; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } }
.faq-sponsor summary{ color:var(--acc); }