/* ============================================================
   full.css — single-page mobile landing that stitches the section
   mockups into one clean page. Rides on /assets/styles.css (hero/reel/
   privacy/cta atoms) + /pages.css (how-*) + /razdel.css (sphere pages).
   Mobile-first only. No section animations here — reveal states are
   forced visible; the sphere/how sections keep their own static render.
   ============================================================ */

/* one fixed, translucent header (reuses .pz-top from pages.css) */
.lp{max-width:440px;margin-inline:auto;}

/* every section keeps its own internal layout; here we just make the
   reveal-gated bits visible without the scroll-observer JS. */
.reveal-fade,.reveal-up{opacity:1 !important;transform:none !important;}

/* the peeking mascot / assistant face is per-page — drop it everywhere */
.rz-peek,.pz-peek,.pz-peekb{display:none !important;}
/* desktop-only sphere icon-scatter — hidden on mobile (no visual change) */
.rz-orbit{display:none;}

/* how/sfera sections were standalone full pages — in the stitched flow keep
   them ~one screen but don't let their internal max-width double-clamp */
.lp .pz-page,.lp .rz{max-width:100%;}
.lp .rz{margin-inline:0;}

/* ---------- HERO (static CSS orbit — no canvas/JS) ---------- */
.lp-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  padding:clamp(84px,13vh,120px) 22px clamp(30px,6vh,54px);text-align:center;}
.lp-orbit{position:relative;width:min(78vw,320px);aspect-ratio:1;margin:0 auto 6px;}
.lp-orbit .lp-mascot{position:absolute;left:50%;top:50%;width:39%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 30px rgba(43,41,56,.22));z-index:2;}
.lp-sph{position:absolute;left:var(--x);top:var(--y);width:52px;height:52px;transform:translate(-50%,-50%);
  border-radius:17px;display:grid;place-items:center;background:var(--surface);
  box-shadow:0 12px 26px -12px rgba(43,41,56,.30);}
.lp-sph i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
@media(max-width:400px){.lp-sph{width:46px;height:46px;}}
.lp-hero h1{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(2rem,8vw,2.55rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-top:8px;}
.lp-hero h1 .accent{color:var(--accent);}
.lp-hero .lp-sub{font-size:1.04rem;line-height:1.5;color:var(--ink-muted);max-width:34ch;margin:.7rem auto 0;}
.lp-actions{display:flex;flex-direction:column;gap:11px;width:100%;max-width:330px;margin:1.4rem auto 0;}
.lp-actions .btn{width:100%;justify-content:center;}
.lp-hero .stores-line{margin-top:1.2rem;}

/* ---------- section rhythm for the flat marketing sections ---------- */
.lp .privacy,.lp .reel,.lp .cta{min-height:auto;padding-block:clamp(48px,9vh,84px);}
.lp .privacy .wrap,.lp .reel .wrap,.lp .cta .wrap{padding-inline:22px;}

/* REEL — static compact chip-cloud (icon+title) on phones. Shortened to fit the
   screen: the wrap is height-capped and the BOTTOM fades into the page (soft
   semi-transparent gradient), so the chips look like they trail off downward —
   the vertical counterpart of the desktop conveyor's left/right edge fade.
   display:contents flattens both rows into one centred wrap flow. */
.lp .reel .marquee{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:1.3rem;
  max-height:clamp(220px,42vh,340px);overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 68%,transparent);mask:linear-gradient(180deg,#000 68%,transparent);}
.lp .reel .mq-row{display:contents;animation:none;}
.lp .reel .mq-t{flex:0 0 auto;width:auto;padding:8px 13px 8px 8px;animation:none;}
.lp .reel .mq-t small{display:none;}
.lp .reel .mq-ic{width:32px;height:32px;border-radius:10px;}
.lp .reel .mq-tx b{font-size:.88rem;}

/* CTA form stacks on phones */
.lp .cta-form{flex-direction:column;gap:10px;width:100%;max-width:330px;margin-inline:auto;}
.lp .cta-form input,.lp .cta-form .btn{width:100%;}

/* ---------- how-insights: let the web fill the section, spheres spread by height ---------- */
.lp .pz-web{flex:1;justify-content:flex-start;}
.lp .pz-web .pz-demo-col{flex:1 1 auto;display:flex;min-height:0;}
.lp .pz-web .mind-stage{flex:1;width:100%;max-width:none;height:auto;min-height:360px;margin:0 auto;}

/* ---------- privacy: fill the section + scatter the guarantee cards ---------- */
.lp .privacy{min-height:100svh;display:flex;flex-direction:column;
  padding-block:clamp(84px,13vh,116px) clamp(40px,7vh,58px);}
.lp .privacy .privacy-inner{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;}
.lp .privacy .privacy-viz{flex:1;display:flex;margin-top:clamp(1.2rem,4vh,2rem);}
.lp .privacy .pscatter{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  gap:0;padding:6px 2px;position:relative;width:100%;}
.lp .privacy .pscatter > *{position:relative;inset:auto;margin:0;}
.lp .privacy .ps-seal{align-self:flex-start;width:85%;transform:rotate(-1.6deg);}
.lp .privacy .ps-1{align-self:flex-end;width:90%;transform:rotate(2.3deg);}
.lp .privacy .ps-2{align-self:flex-start;width:86%;transform:rotate(-2.4deg);}
.lp .privacy .ps-3{align-self:flex-end;width:89%;transform:rotate(1.3deg);}

/* HERO: frozen scene (no pin-scroll morph) → one screen */
.lp .hero-scene{height:100svh;}
/* mobile header = brand + big «Меню» only; inline nav-links + CTA are desktop-only */
.nav-links,.site-header .nav-cta{display:none;}

/* header = a SOLID fixed bar. No hairline divider — instead a barely-there soft shadow
   gives it a gentle lift off the content. Опаque from the top; no blur. Deck active (phone + desktop). */
body.deck-mode .site-header{background:var(--bg);box-shadow:0 5px 14px -8px rgba(43,41,56,.16);border-bottom:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
body.deck-mode .site-header.scrolled{background:var(--bg);box-shadow:0 5px 14px -8px rgba(43,41,56,.16);backdrop-filter:none;-webkit-backdrop-filter:none;}
body.deck-mode .site-header.menu-open{box-shadow:none;}   /* the open menu panel carries its own hairline */

/* privacy — chaotic flex-column scatter over the WHOLE section height, matching the sphere
   modules' .rzb idiom: alternating left/right align, varied widths + tilts, slight edge-bleed.
   (NOT centred — the earlier translateX(-50%) version read as a neat centred stack.)
   MOBILE-ONLY: on desktop (≥920) desktop.css owns the privacy layout (diagonal cascade). */
@media (max-width:919px){
  .lp .privacy .privacy-inner{position:absolute;inset:0;max-width:none;margin:0;padding:clamp(84px,13vh,112px) 22px clamp(28px,5vh,48px);display:flex;flex-direction:column;}
  .lp .privacy .privacy-copy{flex:none;}   /* natural height at the top (was flex-grow:1 → ate all the space) */
  .lp .privacy .privacy-viz{flex:1 1 auto;min-height:0;position:relative;margin-top:clamp(.8rem,3vh,1.6rem);}
  .lp .privacy .pscatter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:4px 0;height:auto;}
  .lp .privacy .pscatter > *{position:relative;inset:auto;margin:0;left:auto;right:auto;top:auto;bottom:auto;}
  /* !important beats styles.css `.ps,.ps-seal{transform:none!important}` @max-760 (which flattened them) */
  .lp .privacy .ps-seal{align-self:flex-start;width:63%;transform:rotate(-5deg)!important;margin-left:8%;z-index:4;}
  .lp .privacy .ps-1{align-self:flex-end;width:91%;transform:rotate(3.6deg)!important;margin-right:-4%;z-index:6;}
  .lp .privacy .ps-2{align-self:flex-start;width:84%;transform:rotate(-4.2deg)!important;margin-left:-3%;z-index:5;}
  .lp .privacy .ps-3{align-self:flex-end;width:88%;transform:rotate(2.8deg)!important;margin-right:-3%;z-index:6;}
}

/* rz sphere pages: keep the chaotic scatter INSIDE the container (razdel.css). The real fix is
   below — centre the WHOLE deck as a phone-width column on wide viewports (the deck pins sections
   to inset:0 = full viewport; the standalone sfera-*.html pages are a centred max-width:440 column,
   so the combined page must match — otherwise the scatter reads as shoved to the left).
   MOBILE-ONLY: on desktop (≥920px) desktop.css owns the layout (1160px columns) — the `> section`
   element bump + the !important here would otherwise leak past it and clamp every PC section to 440. */
@media (max-width:919px){
  .lp.deck > section{max-width:440px;margin-inline:auto;}
  .lp.deck > section.rz, .lp.deck > section.pz-page{max-width:440px !important;}   /* beat .lp .rz{max-width:100%} */
  /* sphere scenes: razdel.css gives .rz 70px + .rz-head 8px → the h1 landed at 78px, only 6px
     under the 72px fixed header. Push it down so the title breathes. */
  .lp .rz{padding-top:100px;}
  /* razdel.css ships .rzb with 96px bottom padding (left over from the standalone sphere page,
     where content followed below). In the deck that's just dead space — the cards stopped ~100px
     short of the bottom. Reclaim it so the scatter fills the scene. */
  .lp .rzb{padding-bottom:24px;}
}

/* CTA — ported from :8091 (mascot + perks + button), on cream */
/* the footer moved to the FAQ scene, so the CTA is symmetric now: equal padding top/bottom → the
   hero centres on the true middle of the screen (and still clears the 72px fixed header). */
.lp .cta{background:var(--bg);min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:clamp(70px,10vh,92px);text-align:center;}
.lp .cta .cta-hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;}
.lp .cta .cta-inner{max-width:620px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
.lp .cta h2{color:var(--ink);font-size:clamp(2rem,8vw,3rem);line-height:1.07;}
.lp .cta h2 .accent{color:var(--accent);}
.lp .cta .cta-sub,.lp .cta .stores-line{display:none;}
.lp .cta .cta-mascot{display:block;width:clamp(96px,24vw,130px);height:auto;object-fit:contain;margin-bottom:6px;
  filter:drop-shadow(0 16px 24px rgba(43,41,56,.16));}
.lp .cta .cta-btn{display:inline-flex;margin-top:1.9rem;min-height:58px;padding:0 2.4em;font-size:1.06rem;}
/* perks (idiom .mq-t: icon-tile + title + subtitle) */
.lp .cta .perks{display:grid;grid-template-columns:1fr;gap:.7rem;width:100%;max-width:460px;margin-top:1.8rem;text-align:left;}
.lp .cta .perk{display:flex;align-items:center;gap:13px;background:var(--surface);border-radius:16px;padding:14px 17px;box-shadow:var(--shadow-sm);}
.lp .cta .perk-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;}
.lp .cta .perk-ic i{width:100%;height:100%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.lp .cta .perk-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.lp .cta .perk-tx b{font-family:'Onest',sans-serif;font-size:1rem;font-weight:700;line-height:1.2;color:var(--ink);}
.lp .cta .perk-tx small{font-size:.85rem;line-height:1.35;color:var(--ink-muted);}

/* MOBILE grant logos. Flush-left like everything else in the footer — centring them (and their
   heading) put one block on a different axis from the headline, the contacts and the cards above it,
   and mixed axes read as a layout bug rather than a choice. */
@media (max-width:919px){
  .lp .fs-logo{opacity:1;}            /* crisp on mobile — no softening */
  .lp .fs-fasie{height:30px;}
  .lp .fs-sk{height:34px;}
}

/* SHORT viewports (small phones / iOS URL-bar shown): compress the CTA so headline + perks + button
   fit one screen, and the footer so the FAQ scene still has room for its questions. */
@media (max-height:760px){
  .lp .cta{padding-block:clamp(54px,8vh,68px);}
  .lp .cta .cta-mascot{width:clamp(70px,15vw,88px);margin-bottom:2px;}
  .lp .cta h2{font-size:clamp(1.6rem,6.6vw,2.1rem);}
  .lp .cta .perks{gap:.45rem;margin-top:.9rem;}
  .lp .cta .perk{padding:9px 13px;}
  .lp .cta .perk-ic{width:31px;height:31px;}
  .lp .cta .perk-tx b{font-size:.92rem;}
  .lp .cta .perk-tx small{font-size:.78rem;line-height:1.25;}
  .lp .cta .cta-btn{margin-top:1rem;min-height:50px;}
  /* FAQ rows too: header + h2 + 8 rows + footer needs ~730px, so on a short screen the rows must
     shrink or the questions end up jammed against the header and the footer band. */
  .lp .faq h2{font-size:clamp(1.4rem,5.6vw,1.9rem);margin-bottom:.35rem;}
  .lp .faq .faq-item > summary{padding:6px 0;}
  .lp .faq .faq-ic{width:32px;height:32px;border-radius:10px;}
  .lp .faq .faq-a{padding-left:44px;}   /* stay aligned under the question text (32px tile + 12px gap) */
}
@media (max-height:640px){
  .lp .cta .cta-mascot{display:none;}
}

/* privacy cards — drop the tile background behind the icons, keep just the icon,
   bigger (shield / lock / РФ / •••) */
.lp .privacy .ps-ic{background:none;border-radius:0;width:auto;height:auto;font-size:1.15rem;}
.lp .privacy .ps-ic--txt{font-size:1.12rem;font-weight:800;letter-spacing:.02em;}
.lp .privacy .ps-shield{background:none;border-radius:0;width:auto;height:auto;}
.lp .privacy .ps-shield i{width:34px;height:34px;background:var(--accent);}
.lp .privacy .pg-lock{width:23px;height:26px;}

/* FAQ — the LAST pinned deck scene: questions centred in the space above, footer closing the page.
   Native <details> accordion, exclusive via name="faq" (only one open at a time → bounded height).
   Icon tiles are NEUTRAL grey when collapsed and take the topic colour only on open, so the rows
   read calm instead of confetti. Questions are kept short (3–7 words) so every row is ONE line.
   Answers live in the HTML source even when collapsed (bots read them) + FAQPage JSON-LD. */
.lp .faq{background:var(--bg);min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:0;}
/* THE scroll host — holds the questions AND the footer, so opening an answer grows the content and
   the page slides down (footer and all) instead of clipping the questions below it. Full-bleed on
   purpose: its scrollbar then sits at the screen edge, clear of the chevrons. */
.lp .faq .faq-scroll{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--outline) transparent;}
.lp .faq .faq-scroll::-webkit-scrollbar{width:4px;}
.lp .faq .faq-scroll::-webkit-scrollbar-thumb{background:var(--outline);border-radius:4px;}
/* flex:1 0 auto — GROWS to fill when the questions are collapsed (so they centre and the footer
   rests at the bottom), but never shrinks below its content when one is open: that overflow is
   exactly what makes the host scroll. The 88px top floor is the fixed 72px header + breathing room;
   a vh-relative min would drop below 72px and tuck the h2 under it. */
.lp .faq .faq-hero{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;width:100%;
  padding-block:clamp(88px,10.5vh,94px) clamp(28px,4vh,44px);}
.lp .faq .faq-wrap{max-width:720px;margin-inline:auto;width:100%;padding-inline:22px;
  display:flex;flex-direction:column;}
/* centred like the three scenes it closes the deck with (#reel, #privacy, #get) — the list below
   stays left, same idiom as .cta (centred heading, left perks). */
.lp .faq h2{color:var(--ink);font-size:clamp(1.6rem,6.2vw,2.3rem);line-height:1.08;margin-bottom:clamp(.5rem,1.6vh,.9rem);
  text-align:center;}
.lp .faq h2 .accent{color:var(--accent);}
/* the list itself no longer scrolls — it is free to take its natural height and push the footer
   down; .faq-scroll above is the scroll host. motion.js routes gestures that land inside
   [data-deck-scroll] to that host first and only hands them to the deck at its ends. */
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid var(--outline);}
.faq-item:first-child{border-top:1px solid var(--outline);}
.faq-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:9px 0;}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::marker{content:"";}
.faq-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink-faint) 13%,var(--surface));
  transition:background .25s var(--ease);}
.faq-ic i{width:50%;height:50%;background:var(--ink-faint);transition:background .25s var(--ease);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.faq-item[open] .faq-ic{background:color-mix(in srgb,var(--c) 16%,var(--surface));}
.faq-item[open] .faq-ic i{background:var(--c);}
.faq-q{flex:1;min-width:0;font-family:'Onest',sans-serif;font-weight:600;
  font-size:clamp(.96rem,1.3vw,1.05rem);line-height:1.3;color:var(--ink);transition:color .18s var(--ease);}
.faq-item > summary:hover .faq-q{color:var(--accent);}
.faq-item[open] .faq-q{color:var(--c);}
.faq-mk{flex:none;width:10px;height:10px;margin-right:3px;border-radius:1px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .25s var(--ease),border-color .25s var(--ease);}
.faq-item[open] .faq-mk{transform:translateY(2px) rotate(-135deg);border-color:var(--c);}
.faq-a{padding:0 0 12px 48px;}   /* indent under the question text (36px tile + 12px gap) */
.faq-a p{margin:0;max-width:58ch;font-size:clamp(.9rem,1.2vw,.98rem);line-height:1.5;color:var(--ink-muted);}

/* last scene (deck tail) = CTA hero (100svh, centred) + footer stacked into one
   scrollable page; no assistant face */
.lp .cta.deck-tail{display:block;min-height:0;padding:0;background:var(--bg);}
.lp .cta.deck-tail .cta-hero{min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding-block:clamp(60px,12vh,110px) clamp(40px,8vh,72px);}

/* ============ FOOTER SCENE (#footer) — the closing screen of the deck ============
   Its own scene, so contacts become real rows (label + value) you can actually hit with a thumb,
   and the grant/residency logos get a titled plate instead of being fine print. Same card idiom as
   .perk / .mq-t: leading visual + <b> + <small>. Section label → content = 8px, section → section
   = 16px+ (spacing canon). No decorative bullets/kickers — hierarchy is typographic only. */
/* position:relative + overflow:clip — Зено is positioned against THE SCENE, not against .foot-brand,
   so his cut lands on the viewport edge instead of the content column's invisible border. clip also
   stops him widening the document (he'd add a horizontal scrollbar to the whole page). */
.lp .foot{position:relative;background:var(--bg);min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:clip;
  padding-block:clamp(88px,10.5vh,94px) clamp(20px,3vh,30px);}
.lp .foot .foot-wrap{max-width:520px;margin-inline:auto;width:100%;padding-inline:22px;
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
/* .foot-main eats the free space and centres in it → the legal line lands at the bottom of the
   scene on its own. margin-top:auto on the legal instead would absorb that space and un-centre. */
.foot-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;}

/* Brand = big headline + Зено leaning in from off-screen. The wordmark is gone: the header already
   carries it, and the mascot IS the brand. */
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.45rem;}
.foot-name{display:none;}
/* MOBILE: bottom-right, cut by the VIEWPORT edge (parent is .lp .foot, the full-width scene — anchor
   him to .foot-brand and the cut lands on the content column instead, mid-cheek).
   Bottom half on purpose: up beside the headline he squeezed it to five ragged lines.
   rotate is negative = leaning INTO the page; positive tipped him out of it. */
/* 🔴 THE SCENE IS NOT THE SCREEN — .foot-peek is a SIBLING of the scenes, not a child of .foot-brand.
   Three things inside a deck scene make an off-screen peek impossible from within:
     • .lp.deck > section{max-width:440px} (line ~121) — the scene is a 440px column on 441–919px,
     • motion.css puts overflow:hidden on it — the cut line lands mid-page,
     • motion.css puts transform:translateZ(0) on it — which makes even position:fixed anchor to the
       SCENE instead of the viewport, so escaping by `fixed` alone does not work.
   Result was Зено stopping short of the edge and hanging in mid-air with a seam. Outside the scene
   only the real screen edge bounds him. Exactly what the .cta-peek comment in pages.css says for #get.
   opacity:0 by default + the .deck-on gate = he shows on the footer scene only, and stays hidden with
   the deck off (reduced-motion / no-JS), where a fixed image would ride over the whole page.
   He GLIDES IN from off the screen edge (the .cta-peek idiom on «Один помощник», mirrored: there he
   comes from the right, here from the bottom-right on phones and from the LEFT on PC). A bare fade-in
   read as him materialising in mid-air; the slide is what makes him walk into the scene. The rest
   position is the authored one (right:-42px / left:-76px) — the transform only carries him there. */
.foot-peek{position:fixed;z-index:4;pointer-events:none;
  right:-42px;bottom:7.5vh;width:clamp(132px,37vw,158px);height:auto;object-fit:contain;
  transform:translateX(122%) rotate(-7deg);opacity:0;
  transition:transform .9s var(--ease),opacity .55s var(--ease);
  filter:drop-shadow(0 18px 28px rgba(43,41,56,.18));}
.foot.deck-on ~ .foot-peek{transform:translateX(0) rotate(-7deg);opacity:1;}
/* the tagline is the headline of the scene now → title face/size, not body copy. Full width: the
   mascot no longer stands beside it. */
.foot-tag{position:relative;z-index:1;margin:0;
  font-family:'Sansation',sans-serif;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.55rem,6.8vw,2.1rem);line-height:1.14;color:var(--ink);
  max-width:18ch;text-wrap:balance;}
.foot-tag .accent{color:var(--accent);font-weight:700;}

.foot-sec{margin-top:clamp(1.3rem,3.2vh,1.9rem);}
.foot-h{font-family:'Onest',sans-serif;font-weight:600;font-size:.9rem;line-height:1.2;
  color:var(--ink-muted);margin:0 0 8px;}   /* --ink-faint fails AA on cream (~2.3:1); muted = ~4.6:1 */
/* dark buttons, not white cards: the .btn-secondary idiom (--navy + white) with the icon straight on
   the button — a tile inside would be a surface on a surface. Muted value = the .ps-seal-tx small
   convention (white at 66%), derived from the token rather than a new hex. */
.foot-rows{display:flex;flex-direction:column;gap:10px;}
.foot-row{display:flex;align-items:center;gap:12px;background:var(--navy);border-radius:16px;
  padding:13px 16px;box-shadow:0 12px 26px -14px rgba(43,41,56,.5);text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.foot-row:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(43,41,56,.55);}
.foot-row-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;}
.foot-row-ic i{width:100%;height:100%;background:var(--on-accent);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.foot-row-tx{display:flex;flex-direction:column;gap:1px;min-width:0;}
.foot-row-tx b{font-family:'Onest',sans-serif;font-size:1rem;font-weight:700;line-height:1.25;color:var(--on-accent);}
.foot-row-tx small{font-size:.86rem;line-height:1.35;overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--on-accent) 66%,transparent);}

/* no plate — the logos sit straight on the page (both webp are transparent, verified). A pair with a
   fixed gap; flex:1 halves would park them at 25%/75% of the width instead. flex-start, not centre:
   centring parked them 90px in on mobile and 124px on PC, out of line with the «Гранты и статус»
   heading and the contact cards above — that offset was the whole «футер поплыл». */
.foot-plate{display:flex;align-items:center;justify-content:flex-start;gap:clamp(1.8rem,7vw,2.8rem);}
/* padding-block keeps the tap target ≥44px: without the captions the logo alone is only 34px tall,
   and the link shrank to 42 — just under the thumb-target floor. */
.foot-org{flex:0 0 auto;display:flex;align-items:center;
  text-decoration:none;transition:opacity .2s var(--ease);padding-block:7px;}
.foot-org:hover{opacity:.72;}
/* bigger than the old fine-print sizes (30/34). Sk stays the taller number on purpose — its mark is
   stacked (Sk over «Участник»), so equal px would read smaller than FASIE's wordmark. */
.foot-org-logo{height:44px;display:grid;place-items:center;}
.foot-org-logo .fs-logo{display:block;width:auto;max-width:100%;object-fit:contain;opacity:1;}
.lp .foot .fs-fasie{height:38px;}
.lp .foot .fs-sk{height:44px;}

.foot-legal{flex:none;margin-top:clamp(1.3rem,3.2vh,1.9rem);display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.15rem .5rem;font-size:.84rem;color:var(--ink-faint);}
.foot-legal-sep{opacity:.55;}
.foot-legal a{color:var(--ink-faint);text-decoration:none;transition:color .2s var(--ease);}
.foot-legal a:hover{color:var(--accent);}

/* DESKTOP: a 520px column marooned in the middle of a 1440px screen reads as an empty page, so the
   closing scene gets a real two-column layout — brand holds the left, the actionable blocks stack
   on the right, edges aligned with the header (--maxw/--gutter). */
@media (min-width:920px){
  /* NOT the full --maxw (1180): the brand column is only ~380px of content, so the header's grid
     leaves a 300px hole between the columns. Other scenes don't span it either (FAQ caps at 720). */
  .lp .foot .foot-wrap{max-width:min(var(--maxw),1010px);padding-inline:var(--gutter);}
  .lp .foot .foot-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
    grid-template-areas:"brand contacts" "brand orgs";
    column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start;align-content:center;}
  .lp .foot .foot-brand{grid-area:brand;align-items:flex-start;text-align:left;align-self:center;gap:.55rem;}
  /* PC: same size as .cta-peek on the «Один помощник» scene (158px) — bigger read as a wall, not a
     peek. Left edge, because the right one is taken by the contact cards.
     He lives in the margin beside .foot-wrap, and that margin is not a constant: 215px at 1440 but
     ZERO at 920, where a fixed width drove him straight through the headline. So the width tracks
     the margin — 62px of overhang + half of whatever the viewport has spare over the 1010px wrap —
     and never exceeds the 158px reference. Clears the headline at every width from 920 up. */
  /* the hidden state has to be restated here (the base one slides him off the RIGHT) and so does the
     rest state — `.foot.deck-on ~ .foot-peek` outranks a bare `.foot-peek` no matter which comes last. */
  .foot-peek{right:auto;left:-76px;top:50%;bottom:auto;
    width:clamp(96px,calc(76px + (100vw - 1010px)/2),158px);
    transform:translate(-122%,-50%) rotate(9deg);}
  .foot.deck-on ~ .foot-peek{transform:translate(0,-50%) rotate(9deg);}
  .lp .foot .foot-tag{font-size:clamp(2rem,3vw,2.7rem);line-height:1.1;max-width:13ch;}
  .lp .foot .foot-sec--contacts{grid-area:contacts;margin-top:0;}
  .lp .foot .foot-sec--orgs{grid-area:orgs;margin-top:1.6rem;}
  .lp .foot .foot-legal{justify-content:flex-start;margin-top:2.6rem;}
  /* PC reads «Статьи · Политика конфиденциальности · © 2026 tuto» (mobile keeps © first).
     Orders are per-item, not per-type: `a{order:0} .sep{order:1} .copy{order:2}` worked only while
     there was ONE link — with two, both links jump to the front and the two separators collapse
     into «· ·». Each item gets its own slot instead. */
  .lp .foot .foot-legal .foot-legal-blog{order:0;}
  .lp .foot .foot-legal-sep:nth-child(2){order:1;}
  .lp .foot .foot-legal .foot-legal-privacy{order:2;}
  .lp .foot .foot-legal-sep:nth-child(4){order:3;}
  .lp .foot .foot-legal .foot-legal-copy{order:4;}
}

/* short screens: the closing scene must still fit one screen */
@media (max-height:760px){
  .lp .foot .foot-sec{margin-top:clamp(.9rem,2.4vh,1.3rem);}
  .lp .foot .foot-legal{margin-top:clamp(.9rem,2.4vh,1.3rem);}
  .lp .foot .foot-row{padding:9px 13px;}
  .lp .foot .foot-row-ic{width:35px;height:35px;border-radius:11px;}
  /* the tagline is the scene's headline now — shrink it, never hide it (it used to be body copy
     and could be dropped; a scene with no title cannot) */
  .lp .foot .foot-tag{font-size:clamp(1.25rem,5vw,1.5rem);}
  .foot-peek{width:clamp(104px,30vw,132px);}
}
@media (max-height:640px){
  .lp .foot .foot-tag{font-size:1.15rem;}
  .foot-peek{width:96px;}
}

/* grant / partner logos (FASIE + Skolkovo) — the only survivors of the pre-redesign footer that is
   now #footer / .foot-*. Everything else it carried (.site-footer, .footer-brand, .fb-*, .footer-bar,
   .fbar-*, .foot-links, .foot-ic) had no markup left and was removed 16.07. */
.fs-logo{display:block;width:auto;object-fit:contain;opacity:.92;transition:opacity .25s var(--ease);}
.fs-fasie{height:30px;}
.fs-sk{height:34px;}   /* stacked Sk+Участник — taller px than FASIE to read as equal visual size */

/* anchor links land below the fixed header */
html{scroll-padding-top:78px;}

/* header MENU — big «Меню» word → minimalist dropdown that is part of the header
   (same cream, no shadow, no overlay/dim; just a hairline under the panel) */
/* NB: this size was picked for the short word «Меню», but JS swaps the label to the CURRENT SECTION
   name — «Какие есть функции» is 203px at 1.32rem. nowrap is the hard guard: two lines inside a
   72px header is the ugliest failure, and it collided with the logo at 320px. */
.lp-menu-btn{background:none;border:0;font-family:'Sansation',sans-serif;font-weight:700;font-size:1.32rem;
  letter-spacing:-.01em;color:var(--ink);cursor:pointer;padding:.2em .15em;line-height:1;white-space:nowrap;}
.site-header .brand{font-size:1.32rem;}   /* match the «Меню» word */
/* narrowest phones (320px и уже): the longest label + logo + padding = 323px > 320 → step it down.
   360px+ fits at full size, so it is untouched there. */
@media (max-width:359px){
  .lp-menu-btn{font-size:1.02rem;}
}
.site-header.menu-open{background:var(--bg);}
.site-header.menu-open .lp-menu-btn{color:var(--accent);}
.lp-menu{overflow:hidden;max-height:0;transition:max-height .4s var(--ease);background:var(--bg);}
.site-header.menu-open .lp-menu{max-height:440px;border-bottom:1px solid var(--outline);}
.lp-menu a{display:block;text-align:right;padding:12px clamp(1.15rem,4vw,2.6rem);font-family:'Sansation',sans-serif;font-weight:700;
  font-size:clamp(1.5rem,6.5vw,2rem);letter-spacing:-.02em;color:var(--ink);line-height:1.14;transition:color .18s var(--ease);}
.lp-menu a:hover{color:var(--accent);}
.lp-menu a.lp-menu-cta{color:var(--accent);}
/* which section am I on. Before this the CTA was the only coloured line, so «Получить доступ» read
   as the current page on every scene — including «Частые вопросы». The dot marks the real one and
   keeps the CTA's own colour meaning «action», not «you are here». */
.lp-menu a.is-active{color:var(--ink);}
.lp-menu a.is-active::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:.5rem;vertical-align:middle;}
.lp-menu a:first-child{padding-top:8px;}
.lp-menu a:last-child{padding-bottom:24px;}

/* store badges — match :8091 exactly: two pill-buttons, no «Скоро в», no separator */
.lp .stores-line{gap:.5rem;justify-content:center;font-size:.82rem;margin-top:1.3rem;}
.lp .stores-line .sl-lead,.lp .stores-line .sl-sep{display:none;}
.lp .stores-line .sl-store{display:inline-flex;align-items:center;gap:.45rem;padding:.46rem .82rem;border-radius:12px;
  background:var(--surface-muted);color:var(--ink-muted);font-weight:600;transition:background .2s var(--ease);}
.lp .stores-line .sl-store:hover{background:var(--surface-hover);}
.lp .stores-line .sl-ic{width:17px;height:17px;flex:none;background:var(--ink-muted);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}

/* how-steps: parallel 2-line title + huge step number (1·2·3) to the right, ~2 lines tall */
.lp .pz-titlerow{display:flex;align-items:center;justify-content:space-between;gap:.7rem;}
.lp .pz-titlerow h1,.lp .pz-titlerow h2{flex:1 1 auto;min-width:0;}
.lp .pz-step-num{flex:none;font-family:'Sansation',sans-serif;font-weight:700;line-height:.82;
  font-size:clamp(3.6rem,17vw,5rem);color:var(--accent);letter-spacing:-.03em;}

/* voice input chip — balanced play button (was: huge button + tiny glyph → tall chip) */
.lp .pz-chipunit .req-voice{padding:11px 20px 11px 11px;gap:12px;}
.lp .pz-chipunit .req-voice .vplay{width:40px;height:40px;}
.lp .pz-chipunit .req-voice .vplay svg{width:15px;height:15px;margin-left:2px;}

/* ---------- mobile sphere + mascot flight layer (flight-mobile.js) ----------
   One persistent fixed layer above the deck sections (below the header) that
   carries the spheres + Zeno through the sections. Opacity is toggled by JS;
   spheres/Zeno are positioned per frame via transform. Colored ring look
   (tint bg + coloured icon) matches scene-hero's .psph.premorph so the
   hero→flight handoff is pixel-identical. */
#flight{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;}
#flight .flight-bg{position:absolute;inset:0;background:var(--bg,#EFEEE9);opacity:0;pointer-events:none;}
#flight .fsph{position:absolute;left:0;top:0;width:52px;height:52px;display:grid;place-items:center;
  border-radius:16px;background:color-mix(in srgb,var(--c) 16%,#fff);
  box-shadow:0 12px 26px -12px rgba(43,41,56,.30);will-change:transform,opacity;}
#flight .fsph .fpi{width:52%;height:52%;background:var(--c);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
#flight .fzeno{position:absolute;left:0;top:0;z-index:3;
  filter:drop-shadow(0 14px 22px rgba(43,41,56,.15));will-change:transform;}
/* while the flight layer drives, hide scene-hero's in-section orbit (no doubling) */
#scene.flight-hero-off #sceneOrbit{opacity:0;transition:opacity .12s linear;}

/* ---------- §how→§structure chip→card morph overlay (morph-how.js) ----------
   Above the sections, below the flight layer (Zeno stays on top). Clones of the
   input chips fly to their paired widget slots and dissolve as the cards grow in. */
#morph{position:fixed;inset:0;z-index:30;pointer-events:none;display:none;}
#morph .morph-clone{position:fixed;margin:0;transform-origin:center;will-change:transform,opacity;}

/* ---------- §mind: connections wait for the spheres ----------
   The web lines stay hidden until the spheres have flown in and settled (.mind-live is added by
   mind.js past scene+0.34); then they fade in and the insight pulses begin. So the sphere fly-in
   and the connection reveal never overlap — no half-played, jumpy transition on a slow scroll. */
body.deck-mode .lp .why .mind-web{ opacity:0; transition:opacity .55s var(--ease); }
body.deck-mode .lp .why.mind-live .mind-web{ opacity:1; }

/* ---------- DESKTOP rz sphere cluster (flight-desktop.js) ----------
   One persistent, stationary right-side cluster (Zeno + tiles) across scenes 4-7. The active
   section's icon is pulled to the left title (.rz-ic); the rest sit in the cluster; on a transition
   they swap from their own places. This overlay OWNS all the icons → hide the per-section title icon
   and the old per-section россыпь so nothing is duplicated. Desktop only. */
@media (min-width:920px){
  #rzdesk{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;}
  #rzdesk .rzd-sph{position:absolute;left:0;top:0;border-radius:17px;display:grid;place-items:center;
    background:color-mix(in srgb,var(--ink-faint) 14%,#fff);box-shadow:0 12px 26px -14px rgba(43,41,56,.28);
    will-change:transform;transition:background .4s var(--ease);}
  #rzdesk .rzd-sph i{width:52%;height:52%;background:var(--ink-faint);transition:background .4s var(--ease);
    -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
  #rzdesk .rzd-sph.on{background:color-mix(in srgb,var(--c) 16%,#fff);}
  #rzdesk .rzd-sph.on i{background:var(--c);}
  #rzdesk .rzd-zeno{position:absolute;left:0;top:0;filter:drop-shadow(0 14px 22px rgba(43,41,56,.15));}
  body.rzdesk-on .lp .rz .rz-ic{visibility:hidden;}   /* overlay draws the title icon */
  /* .rz-orbit is now an EMPTY (invisible) box — kept in layout so the overlay can measure it
     for the cluster position (display:none would zero its getBoundingClientRect). */
}

/* ---------- ambient life — when a data section becomes the ACTIVE deck scene (.deck-on, set by
   motion.js) it PLAYS a short, coordinated intro rather than sitting static: bars fill, checkmarks
   tick down the list in sequence, the 3/5 chips fill in step with them, rings draw, and the numbers
   count up (ambient-rz.js). While a health section is live its analysis markers keep a calm left↔right
   "scan". Gated on body.deck-mode (added only when motion runs → reduced-motion keeps the static full
   state) and on .deck-on so nothing animates off-screen. --w/--h/--p are each element's own target. */
@media (prefers-reduced-motion: no-preference){
  /* resting (section not yet active): widgets sit EMPTY, primed to fill */
  body.deck-mode .lp .rz .mac-bar i, body.deck-mode .lp .rz .track i, body.deck-mode .lp .rz .cat-bar i,
  body.deck-mode .lp .pz-cardscatter .cat-bar i{ width:0; transition:width .75s var(--ease); }
  body.deck-mode .lp .rz .vweek .wb i, body.deck-mode .lp .pz-cardscatter .pz-col .bar i{ height:0; transition:height .7s var(--backout); }
  body.deck-mode .lp .rz .ring .rg-a, body.deck-mode .lp .pz-cardscatter .pz-cring .a{ stroke-dashoffset:100; transition:stroke-dashoffset .9s var(--ease); }
  body.deck-mode .lp .rz .titem.done .cb{ background:var(--surface); border-color:var(--outline); transition:background .32s var(--ease), border-color .32s var(--ease); }
  body.deck-mode .lp .rz .titem.done .cb::after{ transform:rotate(43deg) scale(0); transition:transform .34s var(--backout); }
  body.deck-mode .lp .rz .segprog i.on{ background:var(--surface-muted); transition:background .3s var(--ease); }

  /* active (section is the live scene): fill everything, staggered into a top-down sweep */
  body.deck-mode .lp .rz.deck-on .mac-bar i, body.deck-mode .lp .rz.deck-on .track i, body.deck-mode .lp .rz.deck-on .cat-bar i,
  body.deck-mode .lp .pz-cardscatter.deck-on .cat-bar i, body.deck-mode .lp .pz-page.deck-on .cat-bar i{ width:var(--w); }
  body.deck-mode .lp .rz.deck-on .vweek .wb i, body.deck-mode .lp .pz-page.deck-on .pz-col .bar i{ height:var(--h); }
  body.deck-mode .lp .rz.deck-on .ring .rg-a, body.deck-mode .lp .pz-page.deck-on .pz-cring .a{ stroke-dashoffset:calc(100 - var(--p,60)); }
  body.deck-mode .lp .rz.deck-on .titem.done .cb{ background:#81B52C; border-color:#81B52C; }
  body.deck-mode .lp .rz.deck-on .titem.done .cb::after{ transform:rotate(43deg) scale(1); }
  body.deck-mode .lp .rz.deck-on .segprog i.on{ background:var(--c,#EF7E2C); }

  /* stagger: bars by widget order; checkmarks + 3/5 chips tick down the list in step */
  body.deck-mode .lp .rz .mac-bar i, body.deck-mode .lp .rz .track i, body.deck-mode .lp .rz .cat-bar i{ transition-delay:.14s; }
  body.deck-mode .lp .rz .macros .mac:nth-child(2) .mac-bar i, body.deck-mode .lp .rz .cat:nth-child(3) .cat-bar i{ transition-delay:.26s; }
  body.deck-mode .lp .rz .macros .mac:nth-child(3) .mac-bar i{ transition-delay:.38s; }
  body.deck-mode .lp .rz .titem.done:nth-child(1) .cb, body.deck-mode .lp .rz .titem.done:nth-child(1) .cb::after{ transition-delay:.18s; }
  body.deck-mode .lp .rz .titem.done:nth-child(2) .cb, body.deck-mode .lp .rz .titem.done:nth-child(2) .cb::after{ transition-delay:.30s; }
  body.deck-mode .lp .rz .titem.done:nth-child(3) .cb, body.deck-mode .lp .rz .titem.done:nth-child(3) .cb::after{ transition-delay:.42s; }
  body.deck-mode .lp .rz .titem.done:nth-child(4) .cb, body.deck-mode .lp .rz .titem.done:nth-child(4) .cb::after{ transition-delay:.54s; }
  body.deck-mode .lp .rz .titem.done:nth-child(5) .cb, body.deck-mode .lp .rz .titem.done:nth-child(5) .cb::after{ transition-delay:.66s; }
  body.deck-mode .lp .rz .segprog i.on:nth-child(1){ transition-delay:.22s; }
  body.deck-mode .lp .rz .segprog i.on:nth-child(2){ transition-delay:.34s; }
  body.deck-mode .lp .rz .segprog i.on:nth-child(3){ transition-delay:.46s; }

  /* analyses — calm left↔right scan of the value marker while the section is live (the "скролл анализов") */
  @keyframes lpLabScan{ 0%,100%{ margin-left:-7px } 50%{ margin-left:7px } }
  body.deck-mode .lp .rz.deck-on .lab-scale i{ animation:lpLabScan 3.4s ease-in-out infinite; animation-delay:.5s; }
  body.deck-mode .lp .rz.deck-on .lab-row:nth-child(3) .lab-scale i{ animation-duration:3.9s; }
}