/* ============================================================
   WCD x Wero (sowieso) style mockup
   look: page-wide pink->peach->yellow gradient, giant Rubik 900
   lowercase type, flat vector art with black outlines, white
   pills with hard black offset shadows, scroll-driven scenes
   ============================================================ */

:root{
  --ink:#1d1c1c;
  --red:#F04A3F; --yellow:#F5C244; --blue:#3E8CD1; --green:#35B27A;
  --pill-yellow:#fff48d;
  --hard-sh:0 3px 0 #1d1c1c;
  --hard-sh-big:0 5px 0 #1d1c1c;
  --font:"Rubik", system-ui, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }
body{
  font-family:var(--font); color:var(--ink);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:#f7c473;
}
::selection{ background:var(--ink); color:#fff48d; }

.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 120% at -8% 20%, #f4589d 0%, rgba(244,88,157,0) 52%),
    radial-gradient(130% 130% at 108% 88%, #fdf276 0%, rgba(253,242,118,0) 58%),
    linear-gradient(115deg, #f4589d 0%, #f7a06b 46%, #fdf276 100%);
  animation:bg-drift 34s ease-in-out infinite alternate;
}
@keyframes bg-drift{
  from{ filter:hue-rotate(0deg) saturate(1); }
  to{ filter:hue-rotate(-14deg) saturate(1.08); }
}

/* shared idle motion: hands keep breathing after their entrance */
.hand-inner{ position:relative; width:100%; }
.play .hand-inner{ animation:idle-bob 5.6s ease-in-out 2.3s infinite; }
.hand-r .hand-inner{ animation-duration:6.4s; animation-delay:3s; }
.fhand-r .hand-inner{ animation-duration:6s; animation-delay:2.6s; }
@keyframes idle-bob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-13px) rotate(1.6deg); }
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:900; letter-spacing:-.02em; line-height:1.02; }
h2{ font-size:clamp(34px,5.2vw,58px); }

.fine{ font-size:13.5px; font-weight:600; letter-spacing:.02em; opacity:.72; }

/* ---------- pills / buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font); font-weight:700; font-size:16px;
  color:var(--ink); background:#fff; border:2.5px solid var(--ink); border-radius:999px;
  padding:15px 30px; cursor:pointer; box-shadow:var(--hard-sh);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 #1d1c1c; }
.btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #1d1c1c; }
.btn-yellow{ background:var(--pill-yellow); }
.btn-white{ background:#fff; }
.btn-big{ font-size:18px; padding:18px 40px; }

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; left:0; top:0; z-index:400; width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--ink);
  transform:translate(-100px,-100px); pointer-events:none; will-change:transform;
  transition:width .18s ease, height .18s ease, opacity .25s ease;
  opacity:0; margin-left:-11px; margin-top:-11px;
}
.cursor.grow{ margin-left:-26px; margin-top:-26px; }
body.cursor-on .cursor{ opacity:.92; }
.cursor.grow{ width:52px; height:52px; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- brand pill ---------- */
.brand{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; align-items:center; gap:12px;
  background:var(--pill-yellow); border:2.5px solid var(--ink); border-radius:999px;
  padding:8px 22px 8px 14px; box-shadow:var(--hard-sh);
  transition:transform .18s ease;
}
.brand:hover{ transform:translateX(-50%) translateY(-2px); }
.brand.hide{ transform:translateX(-50%) translateY(-160%); }
.brand{ transition:transform .28s ease; }
.brand svg{ width:44px; height:auto; display:block; }
.brand-div{ width:2px; height:26px; background:var(--ink); border-radius:2px; }
.brand b{ font-weight:900; font-size:19px; letter-spacing:.02em; }

/* ---------- bottom dock ---------- */
.dock{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:300;
  display:flex; align-items:center; gap:4px;
  background:#fff; border:2.5px solid var(--ink); border-radius:999px;
  padding:7px 10px; box-shadow:var(--hard-sh-big);
}
.dock a{
  font-size:14.5px; font-weight:700; padding:13px 15px; border-radius:999px;
  position:relative; white-space:nowrap;
}
.dock a:hover{ background:#f5f0e2; }
.dock a.on::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2.5px;
  border-radius:2px; background:var(--ink);
}
.dock .dock-test{ background:var(--pill-yellow); border:2px solid var(--ink); margin-left:4px; }
.dock .dock-test:hover{ background:#fff; }

/* ---------- eyes mascot ---------- */
.eyes{
  position:fixed; right:20px; bottom:18px; z-index:300;
  display:flex; gap:5px; background:#fff; border:2.5px solid var(--ink);
  border-radius:999px; padding:10px 12px; box-shadow:var(--hard-sh-big);
}
.eye{
  width:22px; height:26px; border-radius:50%; background:#fff;
  border:2.5px solid var(--ink); position:relative; overflow:hidden;
}
.eye i{
  position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--ink); transform:translate(-50%,-50%);
}
.eyes.blink .eye{ height:8px; margin-top:9px; margin-bottom:9px; }
.eye, .eye i{ transition:all .12s ease; }

/* ============================================================
   1. HERO PIN
   ============================================================ */
/* scenes are time-driven: each is one screen tall, animations autoplay on enter (.play) */
.hero-pin{ position:relative; }
.pin{ position:relative; height:100vh; height:100svh; overflow:clip; }
@keyframes fade-in{ to{ opacity:1; } }

.hero-lines{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:2; pointer-events:none;
  padding-bottom:6vh;
}
.hero-lines span{
  display:block; font-weight:900; letter-spacing:-.03em; line-height:.96;
  text-transform:uppercase;
  font-size:clamp(56px,11.5vw,164px); text-align:center;
  opacity:0; transform:translateY(40px);
  animation:line-in .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-lines .hl-1{ animation-delay:.15s; }
.hero-lines .hl-2{ animation-delay:.32s; }
.hero-lines .hl-3{ animation-delay:.49s; }
@keyframes line-in{ to{ opacity:1; transform:translateY(0); } }
.hero-lines .dot{ color:var(--red); font-style:normal; }

.badge{
  position:absolute; top:13%; right:12%; width:132px; z-index:3;
  filter:drop-shadow(0 4px 0 rgba(29,28,28,.9));
  opacity:0; transform:scale(.4) rotate(-30deg);
  animation:badge-in .6s cubic-bezier(.3,1.4,.5,1) .75s forwards;
}
@keyframes badge-in{ to{ opacity:1; transform:scale(1) rotate(0deg); } }
.badge svg{ display:block; width:100%; height:auto; }
.badge-ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:badge-rot 17s linear infinite; will-change:transform;
}
@keyframes badge-rot{ to{ transform:rotate(360deg); } }

.hand{ position:absolute; z-index:1; width:clamp(240px,30vw,430px); will-change:transform; }
.hand svg{ display:block; width:100%; height:auto; overflow:visible; }
.hand-l{ left:4%; bottom:-6%; transform:rotate(-14deg) translateY(42%); }
.hand-r{ right:4%; bottom:-6%; transform:scaleX(-1) rotate(-14deg) translateY(42%); }
.hero-pin.play .hand-l{ animation:hand-up-l 1.5s cubic-bezier(.2,.75,.25,1) .55s forwards; }
.hero-pin.play .hand-r{ animation:hand-up-r 1.5s cubic-bezier(.2,.75,.25,1) .7s forwards; }
@keyframes hand-up-l{ to{ transform:rotate(-4deg) translateY(-4%); } }
@keyframes hand-up-r{ to{ transform:scaleX(-1) rotate(-4deg) translateY(-4%); } }
.wrist-rib{
  position:absolute; left:16%; bottom:16%; width:58%; height:32px; border-radius:16px;
  background:var(--rib,#F5C244); border:3px solid var(--ink);
  transform:rotate(-6deg);
  box-shadow:inset 0 -7px 0 rgba(29,28,28,.16), 0 3px 0 rgba(29,28,28,.85);
}
.wrist-rib::after{
  content:""; position:absolute; right:-18px; top:5px; width:36px; height:17px;
  background:var(--rib,#F5C244); border:3px solid var(--ink); border-radius:9px;
  transform:rotate(26deg);
}

/* sparks: 4-point stars drawn with clip-path */
.spark{
  position:absolute; width:34px; height:34px; z-index:4; opacity:0;
  background:#fff; border:none;
  clip-path:polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter:drop-shadow(0 2px 0 rgba(29,28,28,.85));
  transform:scale(.3) rotate(-20deg);
}
.play .spark{
  animation:
    spark-pop .55s cubic-bezier(.3,1.5,.5,1) var(--d,1.7s) forwards,
    spark-twinkle 3.4s ease-in-out calc(var(--d, 1.7s) + 1.4s) infinite;
}
@keyframes spark-pop{ to{ opacity:1; transform:scale(1) rotate(8deg); } }
@keyframes spark-twinkle{
  0%,100%{ opacity:1; transform:scale(1) rotate(8deg); }
  50%{ opacity:.45; transform:scale(.7) rotate(-6deg); }
}
.hero-pin .s1{ --d:1.75s; } .hero-pin .s2{ --d:1.95s; }
.hero-pin .s3{ --d:2.15s; } .hero-pin .s4{ --d:2.35s; }
.play .crack{ animation:crack-in .4s ease var(--d,2s) forwards; }
@keyframes crack-in{ to{ opacity:.9; } }
.c1{ --d:2s; } .c2{ --d:2.15s; } .c3{ --d:2.3s; }
.hero-pin .s1{ left:24%; top:24%; }
.hero-pin .s2{ right:28%; top:60%; width:24px; height:24px; }
.hero-pin .s3{ left:40%; top:70%; width:20px; height:20px; }
.hero-pin .s4{ right:20%; top:34%; width:26px; height:26px; }

.crack{
  position:absolute; height:3px; background:var(--ink); border-radius:2px;
  z-index:1; opacity:0; transform-origin:left center;
}
.c1{ left:12%; top:12%; width:120px; transform:rotate(38deg); }
.c2{ right:10%; top:9%; width:150px; transform:rotate(-42deg); }
.c3{ left:55%; top:86%; width:90px; transform:rotate(24deg); }
@media (max-width:600px){ .crack{ display:none; } }

.scroll-pill{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:2.5px solid var(--ink); border-radius:999px;
  padding:13px 8px 13px 24px; box-shadow:var(--hard-sh-big);
  font-size:15px; font-weight:700; white-space:nowrap;
}
.scroll-pill i{
  width:30px; height:30px; border-radius:50%; background:var(--pill-yellow);
  border:2px solid var(--ink); display:flex; align-items:center; justify-content:center;
  margin-right:6px;
}
.scroll-pill i svg{ width:14px; height:14px; display:block; animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(-1px);} 50%{ transform:translateY(2px);} }

/* ============================================================
   2. MANIFESTO + PLANES
   ============================================================ */
.mani{ position:relative; }
.mani .pin{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:auto; padding:14vh 0 7vh;
}
.mani-kicker{
  font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; margin-bottom:26px;
}
.mani.play .mani-kicker{ animation:fade-in .5s ease .15s forwards; }
.mani-text{
  max-width:1060px; padding:0 5vw; text-align:center;
  font-weight:900; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(34px,5.6vw,76px);
}
.mani-text .w{ opacity:.13; transition:opacity .18s linear; }
.mani-text .w.lit{ opacity:1; }
.mani .mission-txt{ margin-top:32px; padding:0 5vw; }

/* people in the merged mission screen (drawn from scratch) */
.mani .crowd{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(12px,3.5vw,56px); margin-top:clamp(30px,6vh,60px);
  pointer-events:none;
}
.mani .crowd svg{ width:clamp(76px,11.5vw,164px); height:auto; display:block; overflow:visible; }
.mani .crowd svg *{ stroke-linejoin:round; stroke-linecap:round; }
.mani .wave{ transform-box:view-box; animation:crowd-wave 1.6s ease-in-out infinite; }
.mani .p1 .wave{ transform-origin:221px 106px; }
.mani .p2 .wave{ transform-origin:39px 114px; animation-delay:-.4s; }
.mani .p3 .wave{ transform-origin:221px 106px; animation-delay:-.8s; }
.mani .p4 .wave{ transform-origin:39px 106px; animation-delay:-1.2s; }
@keyframes crowd-wave{
  0%,100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(8deg); }
}
body.noanim .mani .wave{ animation:none; }
@media (prefers-reduced-motion:reduce){ .mani .wave{ animation:none; } }
@media (max-width:760px){
  .mani .crowd{ gap:8px; }
  .mani .crowd svg{ width:clamp(70px,21vw,110px); }
}

.plane{ position:absolute; width:clamp(90px,10vw,150px); z-index:3; pointer-events:none; will-change:transform; }
.plane > svg{ display:block; width:100%; height:auto; }
.plane .trail{
  position:absolute; right:88%; top:30%; width:150%; height:auto; opacity:.6;
}
.plane-1{ left:-12%; top:20%; }
.plane-2{ left:-16%; top:68%; width:clamp(70px,7.5vw,110px); }
.mani.play .plane-1{ animation:fly-1 14s linear .4s infinite; }
.mani.play .plane-2{ animation:fly-2 19s linear 3.2s infinite; }
@keyframes fly-1{
  0%{ transform:translate(0,0) rotate(6deg); }
  50%{ transform:translate(58vw,-58px) rotate(-2deg); }
  100%{ transform:translate(122vw,-6px) rotate(-9deg); }
}
@keyframes fly-2{
  0%{ transform:translate(0,0) rotate(4deg); }
  50%{ transform:translate(62vw,42px) rotate(-1deg); }
  100%{ transform:translate(128vw,4px) rotate(-7deg); }
}

/* ============================================================
   3. RIBBON HAND PIN
   ============================================================ */
.rib-pin{ position:relative; }
.rib-pin .pin{ display:flex; align-items:center; justify-content:center; }
.rib-title{
  position:relative; z-index:2; max-width:900px; text-align:center; padding:0 5vw;
  font-size:clamp(30px,4.6vw,58px); font-weight:900; letter-spacing:-.02em; line-height:1.06;
  margin-bottom:34vh;
}
.rib-title .w{ opacity:.14; transition:opacity .18s linear; }
.rib-title .w.lit{ opacity:1; }
.rib-hand{
  position:absolute; left:63%; bottom:-4%; width:clamp(300px,36vw,500px); z-index:1;
  transform:translateX(-50%) translateY(75%) rotate(6deg); will-change:transform;
}
.rib-pin.play .rib-hand{ animation:rib-rise 1.5s cubic-bezier(.2,.75,.25,1) .35s forwards; }
@keyframes rib-rise{ to{ transform:translateX(-50%) translateY(4%) rotate(2deg); } }
.rib-pin.play .rib-note{ animation:fade-in .5s ease 1.6s forwards; }
.rib-hand svg{ display:block; width:100%; height:auto; overflow:visible; }
.rib-band{
  position:absolute; left:20%; bottom:25%; width:48%; height:30px; border-radius:15px;
  background:var(--red); border:3px solid var(--ink); transform:rotate(-5deg);
  box-shadow:inset 0 -7px 0 rgba(29,28,28,.15);
}
.rib-band::after{
  content:""; position:absolute; right:-16px; top:4px; width:34px; height:16px;
  background:var(--red); border:3px solid var(--ink); border-radius:8px;
  transform:rotate(28deg);
}
.rib-note{
  position:absolute; bottom:110px; left:5vw;
  font-size:14.5px; font-weight:600; opacity:0; z-index:3;
  background:#fff; border:2px solid var(--ink); border-radius:999px; padding:9px 20px;
  box-shadow:var(--hard-sh); white-space:nowrap; transform:rotate(-2deg);
}
@media (max-width:900px){
  .rib-note{ left:50%; transform:translateX(-50%) rotate(-2deg); bottom:auto; top:47%;
    white-space:normal; text-align:center; max-width:78vw; }
  .rib-hand{ left:55%; width:64vw; }
}

/* ============================================================
   3b. SITUATIONS: "узнаёшь себя?"
   ============================================================ */
.sits{ padding:12vh 5vw 2vh; max-width:860px; margin:0 auto; }
.sits h2{ margin-bottom:5vh; }
.sit{
  background:#fff; border:3px solid var(--ink); border-radius:18px;
  padding:17px 24px 17px 30px; box-shadow:0 5px 0 var(--ink);
  font-weight:500; font-size:16.5px; line-height:1.5; position:relative;
  margin-bottom:16px; transform:rotate(var(--st,0deg)); max-width:640px;
}
.sit:nth-child(even){ margin-left:auto; }
.sit::before{
  content:""; position:absolute; left:10px; top:14px; bottom:14px; width:7px;
  border-radius:5px; background:var(--sc,var(--red));
}
.sit b{ font-weight:700; }
.sits-final{
  font-size:clamp(20px,2.6vw,28px); font-weight:900; letter-spacing:-.015em;
  margin-top:5vh; max-width:640px;
}

/* ============================================================
   4. STEPS: sticky left + falling cards
   ============================================================ */
.steps{ position:relative; padding:16vh 0 10vh; }
.steps-grid{
  max-width:1220px; margin:0 auto; padding:0 5vw;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:6vw;
}
.steps-left{ position:sticky; top:16vh; align-self:start; padding-top:4vh; }
.steps-left h2{ font-size:clamp(38px,4.6vw,62px); margin-bottom:18px; }
.steps-sub{ max-width:380px; font-size:17px; line-height:1.55; margin-bottom:26px; font-weight:500; }

.steps-right{ display:flex; flex-direction:column; gap:7vh; padding:4vh 0 6vh; }
.card{
  background:var(--card-bg,#fff); border:3px solid var(--ink); border-radius:26px;
  padding:30px 32px 26px; position:relative;
  box-shadow:0 7px 0 var(--ink);
  transform:rotate(var(--tilt,0deg));
  max-width:560px;
}
.card-1{ --card-bg:#c9f7d9; --tilt:-3deg; }
.card-2{ --card-bg:#ffd9ec; --tilt:2.4deg; align-self:flex-end; }
.card-3{ --card-bg:#cdeffc; --tilt:-2deg; }
.card-num{
  position:absolute; top:-22px; left:-22px; width:52px; height:52px; border-radius:50%;
  background:#fff; border:3px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:22px; box-shadow:var(--hard-sh);
  animation:num-wiggle 4.6s ease-in-out infinite;
}
.card-2 .card-num{ animation-delay:1.4s; }
.card-3 .card-num{ animation-delay:2.8s; }
@keyframes num-wiggle{
  0%,100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(5deg) translateY(-3px); }
}
.card-pic{ width:96px; margin-bottom:6px; }
.card-pic svg{ display:block; width:100%; height:auto; }
.card h3{ font-size:clamp(21px,2.2vw,27px); font-weight:900; letter-spacing:-.015em; margin:6px 0 10px; }
.card p{ font-size:16px; line-height:1.55; font-weight:500; }
.card-ribs{ display:flex; gap:7px; margin-top:16px; }
.card-ribs i{ width:40px; height:9px; border-radius:5px; border:2px solid var(--ink); transform:rotate(-2deg); }

/* ============================================================
   5. COLORS
   ============================================================ */
.colors{ padding:18vh 5vw 8vh; max-width:1150px; margin:0 auto; }
.colors-kicker{
  font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:14px; opacity:.75;
}
.colors-title{ font-size:clamp(36px,5.4vw,68px); max-width:900px; margin-bottom:7vh; }
.colors-title .w{ opacity:.13; transition:opacity .18s linear; }
.colors-title .w.lit{ opacity:1; }

.color-rows{ display:flex; flex-direction:column; }
.crow{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;
  gap:3vw; align-items:center;
  padding:34px 6px; border-top:3px solid var(--ink); position:relative;
  transition:background .2s ease;
}
.crow:last-child{ border-bottom:3px solid var(--ink); }
.crow-word{
  font-size:clamp(36px,5vw,66px); font-weight:900; letter-spacing:-.03em; line-height:1;
  white-space:nowrap;
}
.crow-word em{
  font-style:normal; background:var(--csoft); border-radius:14px; padding:.02em .16em;
  box-decoration-break:clone; transition:background .2s ease, color .2s ease;
}
.crow:hover .crow-word em{ background:var(--c); color:#fff; }
.crow-desc{ font-size:clamp(15px,1.5vw,18px); font-weight:600; line-height:1.45; }
.crow-lock{
  font-size:12.5px; font-weight:700; letter-spacing:.05em; white-space:nowrap;
  border:2px solid var(--ink); border-radius:999px; padding:9px 16px; background:#fff;
  box-shadow:var(--hard-sh); display:inline-flex; align-items:center; gap:8px;
  transition:transform .16s ease;
}
.crow:hover .crow-lock{ transform:translateY(-2px); }
.crow-lock::before{
  content:""; width:9px; height:8px; border:2px solid var(--ink); border-bottom:none;
  border-radius:5px 5px 0 0; transform:translateY(-2px);
}
.colors-note{ margin-top:26px; max-width:640px; font-size:15px; font-weight:500; opacity:.8; }
.colors-cta{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* ============================================================
   6. PROOF
   ============================================================ */
.proof{ padding:16vh 5vw; max-width:1150px; margin:0 auto; text-align:center; }
.proof-title{ font-size:clamp(30px,4.4vw,54px); max-width:820px; margin:0 auto 7vh; }
.proof-title .w{ opacity:.13; transition:opacity .18s linear; }
.proof-title .w.lit{ opacity:1; }
.proof-band{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcard{
  background:#fff; border:3px solid var(--ink); border-radius:26px; padding:34px 26px 28px;
  box-shadow:0 7px 0 var(--ink);
}
.pcard.tilt-l{ transform:rotate(-2deg); }
.pcard.tilt-r{ transform:rotate(1.6deg); }
.pcard b{ display:block; font-size:clamp(44px,5vw,64px); font-weight:900; letter-spacing:-.03em; line-height:1; }
.pcard span{ display:block; margin-top:10px; font-size:14.5px; font-weight:600; line-height:1.45; opacity:.8; }
.proof-note{ margin-top:34px; font-size:15px; font-weight:500; opacity:.85; }
.proof-note a{ font-weight:700; border-bottom:2.5px solid var(--ink); }

/* ============================================================
   7. FOUNDER
   ============================================================ */
.founder{ padding:10vh 5vw 14vh; }
.founder-grid{
  max-width:1150px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:5vw; align-items:start;
}
.founder-txt h2{ margin-bottom:26px; }
.fq{ font-size:clamp(18px,2vw,22px); font-weight:600; line-height:1.5; margin-bottom:22px; }
.fbig{
  font-size:clamp(26px,3.4vw,42px); font-weight:900; letter-spacing:-.02em; line-height:1.12;
  margin-bottom:24px;
}
.fbig .w{ opacity:.13; transition:opacity .18s linear; }
.fbig .w.lit{ opacity:1; }
.fsmall{ font-size:15px; font-weight:500; line-height:1.6; opacity:.85; max-width:560px; }
.founder-side{ position:sticky; top:9vh; align-self:start; }
.film-card{
  display:block; width:100%; aspect-ratio:4/5; position:relative; overflow:hidden;
  border:3px solid var(--ink); border-radius:26px; padding:0; cursor:pointer;
  background:#1d1c1c; box-shadow:0 7px 0 var(--ink); transform:rotate(-2deg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.film-card:hover{ transform:rotate(-2deg) translateY(-4px); box-shadow:0 11px 0 var(--ink); }
.film-card svg{ position:absolute; inset:0; width:100%; height:100%; }
.film-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background:#fff; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 var(--ink);
  animation:play-pulse 2.6s ease-in-out infinite;
}
@keyframes play-pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.08); } }
.film-play i{
  display:block; width:0; height:0; border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--ink); margin-left:5px;
}
.film-cap{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; color:#fff;
  background:linear-gradient(transparent, rgba(29,28,28,.9)); font-size:13.5px; font-weight:500;
  text-align:left; line-height:1.45;
}
.film-cap b{ display:block; font-weight:800; font-size:15.5px; }
.film-note{ margin:12px 4px 20px; font-size:13px; font-weight:600; opacity:.7; text-align:center; }
.film-open{ margin-bottom:20px; }
.film-open .instagram-media{ margin:0 auto !important; border-radius:18px; }
body.noanim .film-play{ animation:none; }

/* ============================================================
   8. PEOPLE
   ============================================================ */
.people{ padding:6vh 5vw 12vh; max-width:1220px; margin:0 auto; }
.people-title{ margin-bottom:6vh; }
.people-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.person{
  background:#fff; border:3px solid var(--ink); border-radius:24px; padding:24px 22px 20px;
  box-shadow:0 6px 0 var(--ink); transform:rotate(var(--pt,0deg));
}
.person:nth-child(1){ --pt:-1.6deg; } .person:nth-child(2){ --pt:1.2deg; }
.person:nth-child(3){ --pt:-1deg; }  .person:nth-child(4){ --pt:1.8deg; }
.p-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.p-ava{
  width:46px; height:46px; border-radius:50%; background:var(--pc); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:19px; color:#fff;
  flex:0 0 auto;
}
.p-who b{ display:block; font-size:15.5px; font-weight:800; }
.p-who i{ font-style:normal; font-size:12.5px; font-weight:600; opacity:.65; }
.person p{ font-size:14.5px; line-height:1.5; font-weight:500; }

/* ============================================================
   9. ROADS
   ============================================================ */
.roads{ padding:0 5vw 14vh; max-width:1150px; margin:0 auto; }
.roads-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.road{
  border:3px solid var(--ink); border-radius:28px; padding:36px 32px 30px;
  box-shadow:0 7px 0 var(--ink); display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.road:hover{ transform:translateY(-4px); box-shadow:0 11px 0 var(--ink); }
.road-a{ background:#c9f7d9; transform:rotate(-1.2deg); }
.road-b{ background:#ffd9ec; transform:rotate(1.2deg); }
.road-a:hover{ transform:rotate(-1.2deg) translateY(-4px); }
.road-b:hover{ transform:rotate(1.2deg) translateY(-4px); }
.road h3{ font-size:clamp(22px,2.4vw,28px); font-weight:900; letter-spacing:-.015em; }
.road p{ font-size:15.5px; font-weight:500; line-height:1.5; flex:1; }
.road-go{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15.5px;
  margin-top:6px;
}
.road-go i{
  font-style:normal; width:34px; height:34px; border-radius:50%; background:#fff;
  border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2.5px 0 var(--ink); transition:transform .18s ease;
}
.road:hover .road-go i{ transform:translateX(4px); }

/* ============================================================
   10. FINAL HIGH FIVE + JOIN
   ============================================================ */
.final{ position:relative; }
.final .pin{ display:flex; align-items:center; justify-content:center; }
.final-inner{ position:relative; z-index:2; text-align:center; padding:0 5vw; }
.final-title{
  font-size:clamp(52px,9vw,128px); font-weight:900; letter-spacing:-.03em; line-height:.98;
  margin-bottom:5vh;
}
.final-title .dot{ color:var(--red); font-style:normal; }
.fhand{ position:absolute; z-index:1; width:clamp(230px,26vw,390px); top:50%; will-change:transform; }
.fhand svg{ display:block; width:100%; height:auto; overflow:visible; }
.fhand-l{ left:0; transform:translate(-128%,-50%) rotate(74deg); }
.fhand-r{ right:0; transform:translate(128%,-50%) scaleX(-1) rotate(74deg); }
.final.play .fhand-l{ animation:fh-in-l 1.15s cubic-bezier(.2,.75,.25,1) .25s forwards; }
.final.play .fhand-r{ animation:fh-in-r 1.15s cubic-bezier(.2,.75,.25,1) .4s forwards; }
@keyframes fh-in-l{ to{ transform:translate(-12%,-50%) rotate(68deg); } }
@keyframes fh-in-r{ to{ transform:translate(12%,-50%) scaleX(-1) rotate(68deg); } }
.final .f1{ --d:1.35s; } .final .f2{ --d:1.55s; }
.final .spark{ z-index:3; }
.final .f1{ left:30%; top:26%; }
.final .f2{ right:26%; top:64%; width:24px; height:24px; }

.join{ max-width:560px; margin:0 auto; }
.join form{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.join input{
  flex:1; min-width:240px; font:inherit; font-size:16px; font-weight:600; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:15px 24px;
  box-shadow:var(--hard-sh);
}
.join input::placeholder{ color:rgba(29,28,28,.45); font-weight:500; }
.join input:focus{ outline:none; box-shadow:0 3px 0 var(--ink), 0 0 0 4px rgba(255,244,141,.75); }
.join .fine{ margin-top:16px; }
.join-done{ font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:-.01em; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:4vh 4vw 120px; }
.foot-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1280px; margin:0 auto 40px;
}
.fcard{
  border:3px solid var(--ink); border-radius:24px; min-height:190px; padding:24px 22px;
  display:flex; flex-direction:column; box-shadow:0 6px 0 var(--ink);
  transition:transform .18s ease;
  position:relative;
}
.fcard:hover{ transform:translateY(-4px); }
.fcard b{ font-size:clamp(17px,1.5vw,21px); font-weight:900; letter-spacing:-.01em; line-height:1.2; max-width:86%; }
.fcard-go{ position:absolute; right:16px; top:16px; }
.fcard-go i{
  font-style:normal; width:38px; height:38px; border-radius:50%; background:var(--pill-yellow);
  border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-weight:800; box-shadow:0 2.5px 0 var(--ink);
}
.fcard-ribs{ display:flex; gap:6px; margin-top:auto; }
.fcard-ribs i{ width:34px; height:8px; border-radius:5px; border:2px solid var(--ink); transform:rotate(-2deg); }
.fc-green{ background:#c9f7d9; }
.fc-white{ background:#fff; }
.fc-pink{ background:#ffd9ec; }
.fc-ig{ background:#cdeffc; }

.langs{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:0 auto 30px; }
.langs a{
  font-size:12px; font-weight:800; letter-spacing:.08em; border:2px solid var(--ink);
  border-radius:999px; padding:12px 15px; background:#fff; box-shadow:0 2px 0 var(--ink);
  transition:transform .15s ease;
}
.langs a:hover{ transform:translateY(-2px); }
.langs a.on{ background:var(--ink); color:#fff48d; }

.giant{
  text-align:center; font-weight:900; letter-spacing:-.045em; line-height:.86;
  font-size:clamp(64px,21.5vw,330px); color:var(--ink); user-select:none;
}
.giant span{ color:var(--red); }
.foot-meta{
  text-align:center; margin-top:48px; font-size:13px; font-weight:600; opacity:.7;
  max-width:760px; margin-left:auto; margin-right:auto; line-height:1.7;
}

/* ============================================================
   reveal helper (non-pinned sections) — soft expo ease + stagger
   ============================================================ */
.rv{ opacity:0; transform:translateY(32px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:translateY(0); }
.pcard:nth-child(2), .person:nth-child(2), .fcard:nth-child(2), .sit:nth-of-type(2){ transition-delay:.09s; }
.pcard:nth-child(3), .person:nth-child(3), .fcard:nth-child(3), .sit:nth-of-type(3){ transition-delay:.18s; }
.person:nth-child(4), .fcard:nth-child(4), .sit:nth-of-type(4){ transition-delay:.27s; }
.crow:nth-child(2){ transition-delay:.08s; } .crow:nth-child(3){ transition-delay:.16s; }
.crow:nth-child(4){ transition-delay:.24s; }
.card.rv{ transform:translateY(56px) rotate(calc(var(--tilt,0deg) + 2deg)); }
.card.rv.in{ transform:translateY(0) rotate(var(--tilt,0deg)); }
.pcard.rv{ transform:translateY(30px); }
.pcard.rv.in{ transform:translateY(0); }
.pcard.tilt-l.rv.in{ transform:rotate(-2deg); }
.pcard.tilt-r.rv.in{ transform:rotate(1.6deg); }
.person.rv.in{ transform:rotate(var(--pt,0deg)); }
.road-a.rv.in{ transform:rotate(-1.2deg); }
.road-b.rv.in{ transform:rotate(1.2deg); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  .steps-grid{ grid-template-columns:1fr; }
  .steps-left{ position:static; padding-top:0; }
  .steps-right{ gap:5vh; }
  .card-2{ align-self:stretch; }
  .founder-grid{ grid-template-columns:1fr; }
  .founder-side{ position:static; max-width:380px; margin:0 auto; }
  .people-grid{ grid-template-columns:repeat(2,1fr); }
  .roads-grid{ grid-template-columns:1fr; }
  .foot-cards{ grid-template-columns:repeat(2,1fr); }
  .proof-band{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .crow{ grid-template-columns:1fr; gap:10px; padding:26px 2px; }
  .crow-lock{ justify-self:start; }
  .rib-title{ margin-bottom:26vh; }
  .badge{ width:96px; top:9%; right:6%; }
  .hand{ width:52vw; }
  .hand-l{ left:-6%; bottom:-2%; }
  .hand-r{ right:-6%; bottom:-2%; }
  .wrist-rib{ bottom:21%; height:26px; }
  .wrist-rib::after{ width:28px; height:14px; top:4px; right:-14px; }
  .fhand{ width:44vw; }
  .dock a:not(.dock-test){ padding:8px 11px; font-size:13.5px; }
  .eyes{ display:none; }
  .scroll-pill span{ font-size:13px; }
}
@media (max-width:520px){
  .people-grid{ grid-template-columns:1fr; }
  .foot-cards{ grid-template-columns:1fr; }
  .hero-lines span{ font-size:clamp(44px,13.5vw,72px); }
  .brand b{ display:none; }
  .brand-div{ display:none; }
}

/* ============================================================
   reduced motion / noanim: everything visible, nothing pinned long
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body.noanim .badge-spin{ animation:none; }
body.noanim .plane-1, body.noanim .plane-2{ animation:none; }
body.noanim .bg, body.noanim .card-num, body.noanim .hand-inner{ animation:none; }
body.noanim .rv, body.noanim .crow, body.noanim .sit{ transition-delay:0s; }
body.noanim .hero-lines span{ opacity:1; transform:none; animation:none; }
body.noanim .badge{ opacity:1; transform:none; animation:none; }
body.noanim .hand-l{ transform:rotate(-6deg) translateY(0); }
body.noanim .hand-r{ transform:scaleX(-1) rotate(-6deg) translateY(0); }
body.noanim .spark{ opacity:1; transform:none; }
body.noanim .crack{ opacity:.9; }
body.noanim .scroll-pill i svg{ animation:none; }
body.noanim .mani-kicker, body.noanim .rib-note{ opacity:1; }
body.noanim .mani-text .w, body.noanim .rib-title .w, body.noanim .colors-title .w,
body.noanim .proof-title .w, body.noanim .fbig .w{ opacity:1; }
body.noanim .plane-1{ left:60%; top:16%; }
body.noanim .plane-2{ left:14%; top:66%; }
body.noanim .rib-hand{ transform:translateX(-50%) translateY(4%) rotate(2deg); }
body.noanim .fhand-l{ transform:translate(-12%,-50%) rotate(74deg); }
body.noanim .fhand-r{ transform:translate(12%,-50%) scaleX(-1) rotate(74deg); }
body.noanim .rv{ opacity:1; transform:none; }
body.noanim .badge-spin{ animation:none; }

/* ============================================================
   V2 OVERRIDES & ADDITIONS: full prod content in the Wero skin
   ============================================================ */

/* partner links pill, top right (prod topbar «Инфлюенсерам / Бизнесу») */
.partners{
  position:fixed; top:16px; right:20px; z-index:300;
  display:flex; gap:4px; background:#fff; border:2.5px solid var(--ink);
  border-radius:999px; padding:6px 8px; box-shadow:var(--hard-sh);
}
.partners a{ font-size:13.5px; font-weight:700; padding:8px 13px; border-radius:999px; white-space:nowrap; }
.partners a:hover{ background:#f5f0e2; }
@media (max-width:1100px){ .partners{ display:none; } }

/* hero: title in flow with meta, mech text and CTAs */
.hero-core{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:9vh 5vw 16vh; pointer-events:none;
}
.hero-core .btn, .hero-core a{ pointer-events:auto; }
.hero-meta{
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:10px; opacity:0; animation:fade-in .5s ease .1s forwards;
}
.hero-lines{ position:static; display:block; padding:0; pointer-events:none; }
.hero-lines span{ font-size:clamp(44px,9vw,124px); }
.hero-mech{
  max-width:640px; margin:26px 0 0; font-size:clamp(16px,1.9vw,19.5px); line-height:1.5;
  font-weight:500; opacity:0; animation:fade-in .7s ease .9s forwards;
}
.hero-mech em{ font-style:normal; font-weight:800; }
.hero-ctas{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;
  margin:26px 0 12px; opacity:0; animation:fade-in .7s ease 1.15s forwards;
}
.hero-core .fine{ opacity:0; animation:fade-in .7s ease 1.3s forwards; }
body.noanim .hero-meta, body.noanim .hero-mech, body.noanim .hero-ctas, body.noanim .hero-core .fine{
  opacity:1; animation:none;
}
@media (max-height:820px){
  .hero-lines span{ font-size:clamp(40px,7.6vw,96px); }
  .hero-core{ padding-top:7vh; }
}
@media (max-width:900px){
  .hero-core{ justify-content:flex-start; padding-top:96px; }
  .hero-mech{ font-size:15.5px; max-width:92vw; }
}

/* mission */
.mission{ padding:12vh 5vw 2vh; }
.mission-txt{
  max-width:680px; margin:0 auto; text-align:center; font-size:clamp(16.5px,1.9vw,20px);
  line-height:1.6; font-weight:500;
}
.mission-txt b{ display:inline-block; margin-top:14px; font-weight:900; font-size:1.15em; }

/* map */
.map-wrap{ margin-top:8vh; }
.map-wrap h3{ font-size:clamp(24px,2.6vw,32px); font-weight:900; letter-spacing:-.015em; }
.map-sub{ margin:6px 0 18px; font-size:15px; font-weight:500; opacity:.8; }
#wcd-map{
  height:clamp(340px,48vh,470px); border-radius:26px; border:3px solid var(--ink);
  box-shadow:0 7px 0 var(--ink); overflow:hidden; background:#fdf3d8;
}
.map-note{ margin-top:16px; font-size:14px; font-weight:500; opacity:.85; }
.map-note a{ font-weight:700; border-bottom:2.5px solid var(--ink); }
.maplibregl-popup-content{
  font-family:var(--font); border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:0 3px 0 var(--ink); padding:10px 14px;
}

/* city vote card */
.citycard{
  margin-top:8vh; background:#fff; border:3px solid var(--ink); border-radius:28px;
  box-shadow:0 7px 0 var(--ink); padding:34px 32px 30px; position:relative;
  transform:rotate(-.6deg); text-align:left;
}
.card-tag{
  position:absolute; top:-18px; left:28px; background:var(--pill-yellow);
  border:2.5px solid var(--ink); border-radius:999px; padding:6px 18px;
  font-size:13.5px; font-weight:800; box-shadow:var(--hard-sh); white-space:nowrap;
}
.citycard h3{ font-size:clamp(22px,2.4vw,28px); font-weight:900; letter-spacing:-.015em; margin:6px 0 10px; }
.city-sub{ font-size:15px; font-weight:500; line-height:1.55; opacity:.85; max-width:640px; }
.citypick{ position:relative; max-width:380px; margin-top:16px; }
.cityinput, .cityform input{
  width:100%; font:inherit; font-size:15.5px; font-weight:600; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:13px 22px;
  box-shadow:var(--hard-sh);
}
.cityinput::placeholder, .cityform input::placeholder{ color:rgba(29,28,28,.45); font-weight:500; }
.cityinput:focus, .cityform input:focus{ outline:none; box-shadow:0 3px 0 var(--ink), 0 0 0 4px rgba(255,244,141,.75); }
.citysugg{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:20;
  background:#fff; border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:0 5px 0 var(--ink); overflow:hidden;
}
.citysugg button{
  display:block; width:100%; text-align:left; font:inherit; font-size:15px; font-weight:600;
  padding:11px 18px; background:none; border:none; cursor:pointer;
}
.citysugg button:hover{ background:var(--pill-yellow); }
.citysugg button.free{ border-top:2px solid var(--ink); font-weight:700; }
.flow-meta{
  margin:22px 0 6px; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}
.place{
  display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:2px solid rgba(29,28,28,.12);
}
.place:last-child{ border-bottom:none; }
.place .nm{ flex:1; font-size:15px; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.place .bar{
  flex:0 0 92px; height:9px; border-radius:5px; background:rgba(29,28,28,.1);
  border:1.5px solid var(--ink); overflow:hidden;
}
.place .bar i{ display:block; height:100%; background:var(--c,#E858F2); background:linear-gradient(90deg,var(--red),var(--yellow)); }
.place .n{ font-size:13.5px; font-weight:800; min-width:24px; text-align:right; }
.place button{
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; background:#fff;
  border:2px solid var(--ink); border-radius:999px; padding:8px 16px; box-shadow:0 2px 0 var(--ink);
}
.place button:hover:not(:disabled){ background:var(--pill-yellow); }
.place button:disabled{ opacity:.55; cursor:default; box-shadow:none; }
.cityform{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.cityform input{ flex:1; min-width:220px; width:auto; }
.cityform .btn{ padding:13px 24px; font-size:15px; }
.amb-box{
  margin-top:20px; padding:18px 20px; border-radius:18px; background:#fdf6de;
  border:2px solid var(--ink); font-size:14.5px;
}
.amb-box a{ font-weight:700; border-bottom:2px solid var(--ink); }
.amb-box .btn{ border-bottom:none; }
.form-err{ font-weight:600; }

/* test invite */
.invite-sec{ padding:14vh 5vw 4vh; max-width:1000px; margin:0 auto; }
.invite{
  background:#fff; border:3px solid var(--ink); border-radius:32px; padding:clamp(30px,5vw,52px);
  box-shadow:0 8px 0 var(--ink); position:relative; transform:rotate(.6deg);
}
.invite h2{ font-size:clamp(30px,4.4vw,52px); margin:8px 0 14px; }
.invite-qs{ font-size:clamp(16px,1.9vw,19px); font-weight:500; line-height:1.55; max-width:600px; }
.mini4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:26px 0; max-width:680px; }
@media (max-width:640px){ .mini4{ grid-template-columns:repeat(2,1fr); } }
.mini{
  background:#fdf6de; border:2.5px solid var(--ink); border-radius:16px;
  padding:14px 8px 12px; text-align:center; box-shadow:0 3px 0 var(--ink);
  transform:rotate(var(--mt,0deg));
}
.mini:nth-child(1){ --mt:-1.4deg; } .mini:nth-child(2){ --mt:1deg; }
.mini:nth-child(3){ --mt:-.8deg; } .mini:nth-child(4){ --mt:1.4deg; }
.mini i{ display:block; width:40px; height:9px; border-radius:5px; border:2px solid var(--ink); margin:0 auto 9px; transform:rotate(-2deg); }
.mini b{ font-size:14.5px; font-weight:800; }
.mini span{ display:block; font-size:12px; font-weight:600; opacity:.65; margin-top:1px; }

/* founder text */
.fp{ font-size:16.5px; font-weight:500; line-height:1.6; margin-bottom:18px; }
.founder-txt .fq{ margin-bottom:18px; }
.people-note{ margin-top:20px; font-size:14.5px; font-weight:500; opacity:.85; max-width:760px; }
.people-note a{ font-weight:700; border-bottom:2.5px solid var(--ink); }

/* wall of hellos */
.wall{
  margin:6vh 0 0; overflow:hidden; background:#fff;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:16px 0;
}
.wall .track{
  display:flex; gap:46px; width:max-content; padding-left:24px;
  animation:wall-run 70s linear infinite;
}
@keyframes wall-run{ to{ transform:translateX(-50%); } }
.wall .msg{ white-space:nowrap; font-size:15px; font-weight:500; }
.wall .msg b{ font-weight:800; }
.wall .msg .meta{ font-size:11.5px; font-weight:700; opacity:.55; margin-left:8px; letter-spacing:.06em; }
.wall-note{
  text-align:center; margin:14px 0 0; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}
body.noanim .wall .track{ animation:none; flex-wrap:wrap; width:auto; }

/* final: normal-flow section, hands pinned to its sides */
.final{ height:auto; position:relative; padding:16vh 5vw 10vh; overflow:clip; }
.final-flow{ position:relative; }
.final .fhand{ position:absolute; top:50%; }
.final-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; text-align:center; }
.days-big{ margin:10px 0 6vh; }
.days-big b{ display:block; font-size:clamp(72px,12vw,150px); font-weight:900; letter-spacing:-.04em; line-height:1; }
.days-big span{
  display:block; margin-top:10px; font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.7;
}
.ladder{
  background:#fff; border:3px solid var(--ink); border-radius:26px; padding:10px 26px;
  box-shadow:0 7px 0 var(--ink); text-align:left; margin-bottom:6vh; transform:rotate(-.5deg);
}
.rung{ display:flex; gap:16px; padding:15px 0; border-bottom:2px solid rgba(29,28,28,.12); align-items:baseline; }
.rung:last-child{ border-bottom:none; }
.rdot{
  flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:3px solid var(--ink); background:transparent; transform:translateY(1px);
}
.rung.done .rdot{ background:var(--ink); }
.rung.now .rdot{ background:var(--yellow); }
.rtx b{ font-weight:800; font-size:15.5px; }
.rung.now .rtx b{ background:var(--pill-yellow); border-radius:8px; padding:1px 7px; box-decoration-break:clone; }
.rtx span{ display:block; font-size:13.5px; font-weight:500; opacity:.7; }

/* footer lead */
.foot-lead{
  text-align:center; font-size:clamp(19px,2.4vw,26px); font-weight:800; letter-spacing:-.01em;
  line-height:1.35; margin:0 auto 44px; max-width:720px;
}

/* v2 text-parity additions */
.card-step{
  display:block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  opacity:.6; margin-bottom:4px;
}
.film-ig{ margin:14px 4px 0; font-size:13.5px; font-weight:500; text-align:center; opacity:.8; }

/* ============================================================
   AUDIT FIXES (multi-agent audit, confirmed findings)
   ============================================================ */

/* deeper hard shadow on interactive pills — same tactile family as cards */
:root{ --hard-sh:0 4px 0 #1d1c1c; }
.btn:hover{ box-shadow:0 7px 0 #1d1c1c; }

/* visible focus for keyboard users */
:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px; }
.btn:focus-visible, .cityinput:focus-visible, .join input:focus-visible{ outline-offset:3px; }

/* hero crack no longer stabs the partners pill */
.c2{ right:22%; top:14%; }

/* tighten the dead seams between sections */
.colors{ padding-top:10vh; }
.steps{ padding-bottom:6vh; }

/* the after-line under «21 ноября угадывать не придётся» gets a real style */
.sits-after{
  font-size:16.5px; font-weight:500; line-height:1.6; max-width:640px; margin-top:16px;
}

/* footer cards join the tilted family */
.fcard:nth-child(1){ transform:rotate(-1.4deg); }
.fcard:nth-child(2){ transform:rotate(1deg); }
.fcard:nth-child(3){ transform:rotate(-.9deg); }
.fcard:nth-child(4){ transform:rotate(1.6deg); }
.fcard:nth-child(1):hover{ transform:rotate(-1.4deg) translateY(-4px); }
.fcard:nth-child(2):hover{ transform:rotate(1deg) translateY(-4px); }
.fcard:nth-child(3):hover{ transform:rotate(-.9deg) translateY(-4px); }
.fcard:nth-child(4):hover{ transform:rotate(1.6deg) translateY(-4px); }

/* marquee pauses on hover (WCAG 2.2.2) */
.wall:hover .track{ animation-play-state:paused; }

/* readable hover on yellow and green colour rows */
.color-rows .crow:nth-child(2):hover .crow-word em,
.color-rows .crow:nth-child(4):hover .crow-word em{ color:var(--ink); }

/* keyboard-highlighted suggestion */
.citysugg button.active{ background:var(--pill-yellow); }

/* mobile: badge duplicates hero-meta and clips it — drop it */
@media (max-width:900px){
  .badge{ display:none; }
}
/* mobile: vote rows wrap instead of crushing the place name */
@media (max-width:560px){
  .place{ flex-wrap:wrap; }
  .place .nm{ flex-basis:100%; }
  .dock a{ padding:11px 9px; font-size:12.5px; }
  .dock .dock-test{ margin-left:2px; }
}

/* ============================================================
   HAND-DRAWN SQUIGGLES: wobbly SVG accents in the typography
   ============================================================ */
.sq{ position:relative; white-space:nowrap; }
.sq > svg{
  position:absolute; left:-2%; bottom:-.16em; width:104%; height:.3em;
  overflow:visible; pointer-events:none;
}
.sq > svg path{
  fill:none; stroke:var(--sqc,#F04A3F); stroke-width:2.6; stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.sq--oval > svg path{ stroke-width:3.4; }
.sq.draw > svg path, .w.lit.sq > svg path{
  transition:stroke-dashoffset .9s cubic-bezier(.5,0,.3,1) .3s;
  stroke-dashoffset:0;
}
.sq > svg path + path{ transition-delay:.55s; }
.sq--oval > svg{
  left:-.35em; right:-.35em; top:-.14em; bottom:-.1em;
  width:calc(100% + .7em); height:calc(100% + .24em);
}
.days-wrap{ position:relative; display:inline-block; padding:.04em .18em; }
.days-wrap > svg{
  position:absolute; inset:-.06em -.22em; width:calc(100% + .44em); height:calc(100% + .12em);
  overflow:visible; pointer-events:none;
}
.days-wrap > svg path{
  fill:none; stroke:var(--ink); stroke-width:2.8; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.final.play .days-wrap > svg path{
  transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1) .5s;
  stroke-dashoffset:0;
}
body.noanim .sq > svg path, body.noanim .days-wrap > svg path{
  stroke-dashoffset:0; transition:none;
}


/* ============================================================
   BEST-PRACTICES AUDIT ROUND 2
   ============================================================ */
/* the dock jumps to the form itself, not to the section top */
#join-form{ scroll-margin-top:24px; scroll-margin-bottom:120px; }

/* pause the ambient loops when their section is off screen */
.paused, .paused *{ animation-play-state:paused !important; }

body.noanim .badge-ring{ animation:none; }

/* both partner links live in the header on phones too: mark left, audiences right */
@media (max-width:1100px){
  .partners{ display:flex; top:16px; right:12px; padding:5px 6px; }
  .partners a{ font-size:12.5px; padding:9px 11px; }
  .brand{ left:12px; transform:none; padding:6px 10px; }
  .brand:hover{ transform:translateY(-2px); }
  .brand.hide{ transform:translateY(-160%); }
  .brand b, .brand-div{ display:none; }
  .brand svg{ width:38px; }
  /* the two pills leave together, otherwise one hangs alone mid-scroll */
  .partners{ transition:transform .28s ease; }
  body.chrome-hidden .partners{ transform:translateY(-160%); }
}
@media (max-width:430px){
  .partners a{ font-size:11.5px; padding:9px 8px; letter-spacing:-.01em; }
}

/* the poster is a photo now: fills the card, caption stays readable over it */
.film-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* ============================================================
   LANGUAGE SWITCHER — took over the mascot's corner
   ============================================================ */
.lang{ position:fixed; right:20px; bottom:18px; z-index:300; transition:transform .28s ease; }
.lang-btn{
  display:flex; align-items:center; gap:9px; font:inherit; font-size:14.5px; color:var(--ink);
  background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:13px 17px;
  cursor:pointer; box-shadow:0 5px 0 var(--ink); transition:transform .16s ease, box-shadow .16s ease;
}
.lang-btn b{ font-weight:900; letter-spacing:.06em; }
.lang-btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--ink); }
.lang-btn:active{ transform:translateY(1px); box-shadow:0 3px 0 var(--ink); }
.lang-btn svg{ width:11px; height:8px; transition:transform .22s ease; }
.lang-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.lang-list{
  position:absolute; right:0; bottom:calc(100% + 12px); min-width:196px; padding:6px;
  background:#fff; border:2.5px solid var(--ink); border-radius:22px; box-shadow:0 6px 0 var(--ink);
  max-height:min(64vh, 420px); overflow-y:auto;
}
.lang-list a{
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:15px;
  font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:none;
}
.lang-list a i{
  font-style:normal; font-size:11px; font-weight:900; letter-spacing:.06em; opacity:.55;
  min-width:22px;
}
.lang-list a:hover, .lang-list a:focus-visible{ background:#f5f0e2; outline:none; }
.lang-list a[aria-selected="true"]{ background:var(--pill-yellow); font-weight:800; }
.lang-list a[aria-selected="true"] i{ opacity:.75; }

/* phones: compact pill that leaves with the header, so it never sits on the text */
@media (max-width:1100px){
  /* clears the bottom menu instead of touching its edge */
  .lang{ right:12px; bottom:86px; top:auto; }
  .lang-btn{ padding:10px 12px; font-size:12.5px; box-shadow:0 4px 0 var(--ink); }
  .lang-btn svg{ display:none; }
  body.chrome-hidden .lang{ transform:translateY(180%); }
  .lang-list{ min-width:180px; bottom:calc(100% + 10px); }
}

/* ============================================================
   MOBILE BOTTOM BAR: one CTA + language, instead of five anchors
   ============================================================ */
.mbar{ display:none; }
@media (max-width:1100px){
  .dock{ display:none; }
  .mbar{
    position:fixed; left:12px; right:76px; bottom:14px; z-index:300; display:block;
  }
  .mbar-cta{
    display:block; text-align:center; width:100%; font-size:16.5px; padding:16px 20px;
    box-shadow:0 5px 0 var(--ink);
  }
  /* the language pill sits beside the CTA, same height, its own corner */
  .lang{ right:12px; bottom:14px; }
  .lang-btn{ padding:16px 15px; font-size:13.5px; box-shadow:0 5px 0 var(--ink); }
  body.chrome-hidden .lang{ transform:none; }
  /* header: mark and audiences on one axis, equal insets and height */
  .brand{ left:12px; top:14px; height:52px; align-items:center; }
  .partners{ right:12px; top:14px; height:52px; align-items:center; }
}

/* ============================================================
   HANDS OVERLAP THE NEXT SCREEN + THE CTA FLIES INTO THE BAR
   ============================================================ */
/* clip sideways only: fingers and ribbons cross the section edge instead of being cut */
.hero-pin .pin, .rib-pin .pin{ overflow-x:clip; overflow-y:visible; }
.hero-pin, .rib-pin{ z-index:5; }

@media (max-width:1100px){
  .mbar, .lang{ transition:transform .35s cubic-bezier(.3,.8,.3,1); }
  body.mbar-wait .mbar{ transform:translateY(160%); pointer-events:none; }
}
/* the flying clone of the hero button */
.cta-fly{
  position:fixed; z-index:400; margin:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:top .5s cubic-bezier(.35,.9,.3,1), left .5s cubic-bezier(.35,.9,.3,1),
             width .5s cubic-bezier(.35,.9,.3,1), height .5s cubic-bezier(.35,.9,.3,1);
}
body.noanim .mbar, body.noanim .lang, body.noanim .cta-fly{ transition:none; }

/* ============================================================
   MOBILE DENSITY: vh-sized section paddings are desktop air —
   on a phone they read as dead screens between blocks
   ============================================================ */
@media (max-width:900px){
  .mission{ padding-top:7vh; }
  .proof{ padding-top:7vh; padding-bottom:8vh; }
  .steps{ padding-top:7vh; padding-bottom:4vh; }
  .colors{ padding-top:5vh; padding-bottom:5vh; }
  .sits{ padding-top:6vh; }
  .invite-sec{ padding-top:7vh; padding-bottom:3vh; }
  .founder{ padding-top:6vh; padding-bottom:7vh; }
  .people{ padding-bottom:7vh; }
  .wall{ margin-top:4vh; }
  .rib-title{ margin-bottom:22vh; }
  /* the plane scene: full screen was half air on phones */
  .mani .pin{ height:auto; min-height:0; padding:56px 0 30px; }
}
/* footer cards: the fixed height left an empty band inside each card on phones */
@media (max-width:520px){
  .fcard{ min-height:0; }
  .fcard-ribs{ margin-top:14px; }
}