/* ==== 65-za-nas.css ==== */
/* ---------- ЗА НАС (za-nas.html) · prefix .zn- · „Кино“ round 2026-09-27 ----------
   Sub-hero + four scenes on the shared dark stage (04-stage.css):
   01 #zn-why cobalt · 02 #zn-principles indigo · 03 #zn-founder night · 05 #zn-faq violet
   (04 #zn-nofit was removed 2026-10-01, archived in _archive/2026-10-01-subscription/b4-chrome/removed/) */
.zn-hero :focus-visible{outline-color:#fff}
.zn-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:700;font-size:19px;line-height:1;color:#fff;background:linear-gradient(150deg,#3A4BFF,#1420B5)}
.zn-price{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,var(--yellow) 56%);padding:0 3px;border-radius:2px;white-space:nowrap}
/* a promise, not a price: a periwinkle marker instead of the yellow one (yellow is for prices and the main action) */
.zn-nofee{font-weight:600;color:var(--ink);background:linear-gradient(transparent 56%,#C9D2FF 56%);padding:0 3px;border-radius:2px;white-space:nowrap}

/* ---------- hero: five suppliers -> one white road -> one person ---------- */
.zn-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.zn-hv{position:relative;width:min(100%,560px);margin-inline:auto}
.zn-hv-map{position:relative;container-type:inline-size}
.zn-hv-svg{display:block;width:100%;height:auto;overflow:visible}
.zn-tile{--ts:clamp(40px,11.07cqw,62px);position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:var(--ts);height:var(--ts);margin:calc(var(--ts)/-2) 0 0 calc(var(--ts)/-2)}
.zn-tile i{display:grid;place-items:center;width:100%;height:100%;border-radius:29%;background:#fff;color:var(--cobalt);box-shadow:0 12px 22px -8px rgba(7,11,82,.5);transform:rotate(var(--r,0deg))}
.zn-tile .ic{width:46%;height:46%;stroke-width:1.9}
.zn-tile b{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);padding:6px 11px;border-radius:999px;background:rgba(7,11,82,.34);border:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:600;line-height:1.1;letter-spacing:-.005em;color:#fff;white-space:nowrap}
@container (max-width:460px){.zn-tile-r b{transform:translateX(-78%)}}
.zn-hv-person{position:relative;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:-4px auto 0;padding:12px 14px 12px 12px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 34px 70px -28px rgba(7,11,82,.7)}
.zn-hv-person p b{display:block;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.zn-hv-person p span{display:block;font-size:15px;line-height:1.35;color:var(--muted)}
.zn-hv-ok{width:32px;height:32px;margin-left:10px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt-tint);color:var(--cobalt)}
.zn-hv-ok .ic{width:17px;height:17px;stroke-width:2.6}
@keyframes zn-lane{to{stroke-dashoffset:-22}}
@keyframes zn-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media (prefers-reduced-motion:no-preference){
  html.js .zn-tile{animation:zn-float 7s ease-in-out var(--d,0s) infinite;animation-play-state:paused}
  html.js .zn-hv-lane{animation:zn-lane 1.6s linear infinite;animation-play-state:paused}
  html.js .zn-on .zn-tile,html.js .zn-on .zn-hv-lane{animation-play-state:running}
}
@media (max-width:640px){.zn-hero-act .btn{flex:1 1 auto}.zn-tile b{padding:5px 9px}}

/* ======================= 01 · five paper bills, struck, one plan card lands ======================= */
/* sequence (from the moment the visual enters the screen): bills slide in 0.1–0.8 s, strike 1.6 s + k·0.08 s,
   2.0 s the five bills collapse into one tight pile that slides toward the card and dims (the pile as a group, so overlaps stay solid),
   the plan card pops 2.1 s in front of the pile's edge, checks 2.3–2.5 s; one loop: 6 s shimmer on the price */
.zn-why .scn-split{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.zn-bl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,2.4vw,36px)}
.zn-bl-st{position:relative;height:calc(4 * var(--bo) + var(--bh));--bo:64px;--bh:104px;--bt:40px;--bx:110px}
.zn-bill{position:absolute;left:0;right:0;top:calc(var(--k) * var(--bo));height:var(--bh);display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;
  background:#E9ECFA;color:var(--ink);rotate:var(--r,0deg);box-shadow:0 -12px 26px -16px rgba(4,8,50,.55),0 22px 40px -26px rgba(0,0,0,.6)}
.zn-bill-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt)}
.zn-bill-ic .ic{width:21px;height:21px;stroke-width:2}
.zn-bill b{flex:1;min-width:0;padding-top:9px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ink, not cobalt: the pile dims to .55 (znDim), and ink on the white pill keeps AA after the dim */
.zn-bill-sum{flex:none;margin-top:6px;padding:6px 10px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);background:#fff}
.zn-bill-x{position:absolute;left:62px;right:96px;top:31px;height:3px;border-radius:3px;background:#0B1233;transform-origin:0 50%}
.zn-bl-one{position:relative;z-index:2;width:100%;max-width:340px;justify-self:end;padding:26px 26px 28px;border:0;color:var(--ink)}
.zn-bl-k{margin-bottom:16px;font:600 15px/1.2 var(--f);letter-spacing:0;text-transform:none;color:var(--cobalt)}
.zn-bl-who{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.zn-bl-who b{display:block;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.zn-bl-who span{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.35;color:var(--muted);text-wrap:balance}
.zn-bl-plan{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0 20px}
.zn-bl-plan span{font-size:15px;font-weight:500;color:var(--muted)}
.zn-bl-plan b{position:relative;display:inline-block;overflow:hidden;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.zn-bl-plan b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%)}
.zn-bl-ones{display:grid;gap:11px}
.zn-bl-ones li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.zn-bl-ones i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cobalt);color:#fff}
.zn-bl-ones .ic{width:14px;height:14px;stroke-width:3}
@keyframes znStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* collapse: each bill moves from top k·bo to a pile with k·bt offsets, centred where the stack was, then shifts toward the card */
@keyframes znStack{to{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9}}
@keyframes znDim{to{opacity:.55}}
@keyframes znShine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
html.js .zn-bill-x{transform:scaleX(0)}
html.js .zn-bl.play .zn-bill-x{animation:znStrike .4s var(--ease) calc(1.6s + var(--k) * .08s) both}
html.js .zn-bl.play .zn-bill.sq{animation-name:sqL,znStack;animation-duration:.8s,.7s;animation-timing-function:var(--ease),var(--ease);animation-fill-mode:both,forwards;
  animation-delay:calc(var(--d0,0s) + var(--s,0) * var(--sq-gap)),2s}
html.js .zn-bl.play .zn-bl-st{animation:znDim .7s var(--ease) 2s forwards}
html.js .zn-bl.play.live .zn-bl-plan b::after{animation:znShine 6s ease-in-out 3.2s infinite}

@media (max-width:1100px){
  .zn-why .scn-split{grid-template-columns:1fr;gap:48px}
  .zn-bl{width:100%;max-width:760px}
}
@media (max-width:760px){
  .zn-bl{grid-template-columns:1fr;gap:34px;width:100%;max-width:380px;margin-inline:auto}
  .zn-bl{gap:0}
  .zn-bl-st{--bo:44px;--bh:64px;--bt:44px;--bx:0px}
  .zn-bill{padding:12px 14px;align-items:center}
  .zn-bill b{padding-top:0}
  .zn-bill-sum{margin-top:0}
  .zn-bill-x{top:31px}
  /* phones keep the bills apart (bt = bo, the pile only shrinks), so every struck name stays readable; the card overlaps the last bill a little */
  .zn-bl-one{justify-self:stretch;max-width:none;margin-top:-14px;padding:22px 22px 24px}
  .zn-bl-who{display:none}
  .zn-bl-plan{padding-top:4px}
}

/* ======================= 02 · six rules, six drawn medallions ======================= */
.zn-defs{position:absolute;width:0;height:0;overflow:hidden}
.zn-pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(24px,3vw,48px);max-width:1000px;margin-inline:auto}
.zn-md{display:grid;justify-items:center;align-content:start;gap:22px;text-align:center}
.zn-md svg{display:block;width:clamp(112px,9vw,128px);height:auto;overflow:visible}
.zn-pr-row{position:relative}
.zn-pr-line{display:none}
.zn-md svg .sq:not(.sq-draw){transform-box:fill-box;transform-origin:50% 50%}
.zn-md svg .sq-gy{transform-origin:50% 100%}
.zn-md-disc{fill:url(#zn-md-g)}
.zn-md-ring{stroke:#C9D2FF;stroke-opacity:.55;stroke-width:1.5}
.zn-md-t{font:700 30px/1 var(--f);fill:#2335FF}
.zn-md-n{font:700 16px/1 var(--f);fill:#fff}
.zn-md-ok circle{fill:#2335FF}
.zn-md-ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zn-md p{max-width:14ch;min-height:2lh;font-size:clamp(19px,1.45vw,21px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:#fff;text-wrap:balance}
@media (min-width:1200px){
  .zn-pr{padding-bottom:clamp(40px,5vw,72px)}
  .zn-pr-grid{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;max-width:none}
  .zn-pr .scn-head{margin-bottom:64px}
  .zn-pr .scn-foot{margin-top:56px}
  .zn-md svg{width:156px}
  /* one hairline from the first disc centre to the last, drawn left→right in 1.6 s (linear), so it reaches disc i at d0 + 2i·gap = its pop */
  .zn-pr-line{display:block;position:absolute;left:calc((100% - 120px) / 12);top:76px;width:calc(100% * 5 / 6 + 20px);height:4px;overflow:visible}
  html.js .play .zn-pr-line .sq-draw{animation-duration:1.6s;animation-timing-function:linear}
}
@media (max-width:760px){
  .zn-pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px}
  .zn-md{gap:16px}
  .zn-md svg{width:112px}
  .zn-md p{font-size:18px}
}

/* ======================= 03 · the founder: „Н“ monogram + one chat ======================= */
.zn-fd-act{margin-top:34px}
.zn-fd-act .btn{gap:12px}
.zn-fd-act .btn:hover .ic{transform:none}
.zn-fd-vis{position:relative;width:100%;max-width:640px;margin-left:auto;container-type:inline-size}
.zn-fd-mono{position:absolute;left:0;top:0;width:50cqw;aspect-ratio:1;container-type:inline-size}
.zn-fd-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zn-fd-disc{position:absolute;inset:17%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 24%,#6070FF 0%,#2335FF 42%,#111B9C 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 50px 100px -36px rgba(35,53,255,.95)}
.zn-fd-disc span{font-size:33cqw;font-weight:600;line-height:1;color:#fff;transform:translateY(-2%);text-shadow:0 20px 40px rgba(7,11,82,.35)}
.zn-fd-orbit{position:absolute;inset:0;animation:znSpin 96s linear infinite paused}
.zn-fd-orb{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(42cqw) rotate(calc(-1*var(--a)))}
.zn-fd-cr{position:absolute;left:-26px;top:-26px;width:52px;height:52px;animation:znSpin 96s linear infinite reverse paused}
.zn-fd-cr i{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:#fff;color:var(--cobalt);box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
.zn-fd-cr .ic{width:23px;height:23px;stroke-width:2}
@keyframes znSpin{to{rotate:360deg}}
.zn-fd.live .zn-fd-orbit,.zn-fd.live .zn-fd-cr{animation-play-state:running}
.zn-fd-chat{position:relative;z-index:1;width:53cqw;margin:48cqw 0 0 auto;padding:0;overflow:hidden;border:0;color:var(--ink)}
.zn-fd-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.zn-fd-h .zn-av{width:42px;height:42px;font-size:17px}
.zn-fd-h b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.zn-fd-h span{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.35;color:var(--muted);text-wrap:balance}
.zn-fd-on{width:8px;height:8px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.zn-fd-body{display:grid;gap:12px;padding:18px 16px 18px;background:linear-gradient(180deg,#F5F6FC,#fff)}
.zn-fd-m{max-width:88%;padding:10px 14px 7px;border-radius:18px;font-size:16px;line-height:1.4;text-wrap:pretty}
.zn-fd-m.in{justify-self:start;border-bottom-left-radius:6px;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.zn-fd-m.out{justify-self:end;border-bottom-right-radius:6px;background:var(--cobalt);color:#fff;box-shadow:0 18px 34px -20px rgba(35,53,255,.9)}
.zn-fd-m time{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--muted)}
.zn-fd-m.out time{color:rgba(255,255,255,.8)}
/* 1 · our album: three flat photos of the autumn menu (one big, two stacked), one caption */
.zn-fd-att{max-width:78%;padding:6px 6px 7px}
.zn-fd-pics{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:16/10;border-radius:13px;overflow:hidden}
.zn-fd-pic{display:block;width:100%;height:100%}
.zn-fd-pic.p1{grid-row:1/3}
.zn-fd-cap{padding:8px 8px 0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.zn-fd-att time{padding-right:8px}
/* 2 · your one tap: a big approve bubble with a tick, read ticks under it, one soft ring when it lands */
.zn-fd-ok{position:relative;padding:12px 16px 8px 12px;border-radius:22px;border-bottom-right-radius:6px}
.zn-fd-ok p{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.zn-fd-okic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff;color:var(--cobalt);font-style:normal}
.zn-fd-okic .ic{width:16px;height:16px;stroke-width:3}
.zn-fd-read{width:18px;height:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zn-fd-ok::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--cobalt);opacity:0;pointer-events:none}
/* 3 · our answer: live, with the two places it went */
.zn-fd-live{padding:11px 12px 7px 14px}
.zn-fd-done{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.zn-fd-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#1FA463;box-shadow:0 0 0 3px rgba(31,164,99,.18)}
.zn-fd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.zn-fd-chips i{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 9px;border-radius:999px;background:var(--cobalt-tint);color:var(--cobalt);font-style:normal;font-size:14px;font-weight:600;line-height:1.2}
.zn-fd-chips .ic{width:15px;height:15px;stroke-width:2.2}
.zn-fd-chips .ck{width:14px;height:14px;stroke-width:3;color:#1FA463}
.zn-fd-slot{position:relative;display:grid}
.zn-fd-type{position:absolute;left:0;top:0;display:flex;gap:5px;padding:14px 16px;border-radius:18px 18px 18px 6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);opacity:0}
.zn-fd-type i{width:7px;height:7px;border-radius:50%;background:var(--cobalt)}
@keyframes znType{0%{opacity:0;transform:translateY(6px)}18%,82%{opacity:1;transform:none}100%{opacity:0}}
@keyframes znDot{0%,100%{transform:none;opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes znTap{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14,1.4)}}
@media (prefers-reduced-motion:no-preference){
  html.js .zn-fd.play .zn-fd-ok::after{animation:znTap .9s var(--ease) 2.25s both}
  html.js .zn-fd.play .zn-fd-type{animation:znType 1.15s var(--ease) 2.35s both}
  html.js .zn-fd.play .zn-fd-type i{animation:znDot .56s ease-in-out 2.45s 2}
  html.js .zn-fd.play .zn-fd-type i:nth-child(2){animation-delay:2.55s}
  html.js .zn-fd.play .zn-fd-type i:nth-child(3){animation-delay:2.65s}
}
/* the cluster sits 32px lower: orbit top in line with the kicker, chat bottom in the button zone (the 46px gap between them is kept) */
@media (min-width:761px){.zn-fd-mono{top:32px}.zn-fd-chat{margin-top:calc(48cqw + 32px)}}
@media (max-width:900px){.zn-fd-vis{max-width:620px;margin-inline:auto}}
/* stacked: heading, then the visual, then the button (the head box dissolves so its two children can be ordered around the visual) */
@media (max-width:900px){.zn-fd .scn-split{display:flex;flex-direction:column;align-items:stretch}.zn-fd .scn-head{display:contents}.zn-fd-act{order:3;margin-top:8px}}
@media (max-width:760px){
  .zn-fd-act .btn{width:100%}
  .zn-fd-vis{max-width:420px}
  .zn-fd-mono{position:relative;width:280px;max-width:78cqw;margin-inline:auto}
  .zn-fd-orb:nth-child(4){display:none}
  .zn-fd-chat{width:100%;margin:28px 0 0}
  .zn-fd-cr{left:-22px;top:-22px;width:44px;height:44px}
  .zn-fd-cr i{border-radius:14px}
  .zn-fd-cr .ic{width:20px;height:20px}
}

/* ======================= 05 · FAQ on one glass panel ======================= */
.zn-fq-list{max-width:880px;margin-inline:auto;padding:8px}
.zn-qa{border-top:1px solid var(--hair);border-radius:20px;transition:background-color .3s}
.zn-qa:first-child,.zn-qa[open],.zn-qa[open]+.zn-qa{border-top-color:transparent}
.zn-qa[open]{background:rgba(255,255,255,.06)}
.zn-qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 18px 18px 26px;list-style:none;cursor:pointer;border-radius:20px;
  font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:#fff}
.zn-qa summary::-webkit-details-marker{display:none}
.zn-qa summary:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.zn-qa-ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .35s var(--ease),background-color .3s}
.zn-qa-ic::before,.zn-qa-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:#fff;transition:background-color .3s}
.zn-qa-ic::after{transform:rotate(90deg)}
.zn-qa summary:hover .zn-qa-ic{background:rgba(255,255,255,.18)}
.zn-qa[open] .zn-qa-ic{transform:rotate(45deg);background:#fff}
.zn-qa[open] .zn-qa-ic::before,.zn-qa[open] .zn-qa-ic::after{background:var(--cobalt)}
.zn-qa p{max-width:64ch;padding:0 26px 24px;font-size:17px;line-height:1.6;color:var(--on-2)}
.zn-qa p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@supports (interpolate-size:allow-keywords){
  .zn-fq-list{interpolate-size:allow-keywords}
  .zn-qa::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete}
  .zn-qa[open]::details-content{height:auto}
}
@media (max-width:760px){
  .zn-fq-list{padding:4px}
  .zn-qa summary{min-height:64px;padding:16px 12px 16px 18px;gap:14px}
  .zn-qa p{padding:0 18px 20px}
}

/* reduced motion: final composition (the .sq system is handled by 04-stage.css) */
@media (prefers-reduced-motion:reduce){
  .zn-fd-orbit,.zn-fd-cr,.zn-bl-plan b::after{animation:none!important}
  html.js .zn-bill-x,html.js .play .zn-bill-x{transform:none;animation:none}
  html.js .zn-bl-st{opacity:.55}
  html.js .zn-bill.sq{translate:var(--bx) calc((2 - var(--k)) * (var(--bo) - var(--bt)));scale:.9}
}