/* ============================================================ desktop.css — DESKTOP-ONLY layer. EVERYTHING here is wrapped in @media (min-width:920px), so below 920px nothing applies and the approved mobile version is untouched, to the pixel. ============================================================ */ @media (min-width:920px){ /* ---------- foundation ---------- */ .lp{max-width:1160px;} /* let плашки spill past their section's 1160 box instead of being clipped mid-content; the sideways-scroll guard moves up to , so the viewport itself still never scrolls horizontally (cards just meet the screen edge) */ html{overflow-x:clip;} .lp .pz-page{overflow-x:visible;} /* 🔴 A DECK SCENE MUST CLIP AT THE SCREEN, NOT AT ITS OWN COLUMN. `overflow-x:visible` above cannot win: motion.css puts `overflow:hidden` on every pinned scene with a far heavier selector, and even if it lost, `overflow-x:visible` next to `overflow-y:hidden` computes to `auto` — a scroll container, which clips just the same. So the fix is the BOX, not the overflow: the scene stops being the 1160 column and spans the whole viewport, while its single wrapper child carries the column instead. Same content geometry to the pixel (the wrapper inherits the cap and the padding the section used to hold), but the clip line moves out to the screen edge — so §how's input chips and §why's spheres fly in from OFF SCREEN instead of materialising on a border 140px in from it. */ .lp.deck > section.pz-page{max-width:none;padding-inline:0;} .lp.deck > section.pz-page > *{width:100%;max-width:1160px;margin-inline:auto; padding-inline:var(--pz-pad);} /* ---------- HEADER — inline nav like :8091 (Меню dropdown hidden) ---------- */ .site-header .wrap.nav{height:72px;display:flex;align-items:center;justify-content:space-between;} .lp-menu-btn,.lp-menu{display:none!important;} /* kill the mobile «Меню» + dropdown */ .site-header .brand{font-size:1.4rem;} /* brand | links (centred by space-between) | orange CTA — exactly like :8091 */ .nav-links{display:flex!important;gap:clamp(1.1rem,2vw,2rem);align-items:center;} .nav-links a{font-size:.96rem;font-weight:500;color:var(--ink-muted);text-decoration:none;transition:color .2s var(--ease);} .nav-links a:hover{color:var(--ink);} /* current section — set by motion.js from the active deck scene */ .nav-links a.is-active{color:var(--ink);font-weight:700;} .site-header .nav-cta{display:inline-flex!important;align-items:center; min-height:40px;padding:0 1.15em;font-size:.92rem;font-weight:700;border-radius:12px; background:var(--accent)!important;color:var(--on-accent)!important;} /* our brand button, not the ghost .nav-cta */ .site-header .nav-cta:hover{background:var(--accent-hover)!important;} /* ---------- HERO — 2-col: copy left, animated orbit right ---------- */ .lp .hero-scene{display:block!important;height:100svh;} .lp .scene-pin{position:relative;height:100svh;max-width:1160px;margin-inline:auto;overflow:visible;} /* +34px nudge centres the pair in the space BELOW the 72px fixed header (was centred in the whole viewport → top tucked under the header) */ .lp .scene-orbit{left:74%!important;top:calc(50% + 34px)!important;width:min(38vw,460px)!important;} .lp .scene-state{text-align:left!important;} .lp .scene-state--a{left:0!important;top:calc(50% + 34px)!important;transform:translateY(-50%)!important; width:min(50%,560px)!important;padding-left:clamp(1.5rem,4vw,3rem);} .lp .scene-state--a h1{font-size:clamp(2.8rem,4.6vw,4.2rem)!important;line-height:1.04;} .lp .scene-state--a .hero-sub{font-size:1.18rem;line-height:1.5;max-width:36ch;margin-top:1.1rem;color:var(--ink-muted);} .lp .scene-state--a .hero-actions{justify-content:flex-start;margin-top:1.7rem;} .lp .scene-state--a .stores-line{justify-content:flex-start;} /* ---------- HOW-STEPS — 2-col chessboard (demo L · R · L) ---------- */ /* --pz-pad is the single source of truth for the step's side gutter: on the deck the scene hands its column (and this padding) to its wrapper child — see the clip note at the top of this file. */ .lp .pz-page{--pz-pad:clamp(1.5rem,4vw,3rem); min-height:100svh;max-width:1160px;margin-inline:auto; padding:100px var(--pz-pad) 60px;justify-content:center;} .lp .pz-input,.lp .pz-flow{flex-direction:row;align-items:center;gap:clamp(2.5rem,6vw,6rem);justify-content:center;} .lp .pz-copy-col{flex:1 1 44%;max-width:520px;} .lp .pz-demo-col{flex:1 1 56%;min-width:0;} .lp #how .pz-input{flex-direction:row-reverse;} /* step 1 — demo LEFT */ .lp .pz-web .pz-flow{flex-direction:row-reverse;} /* step 3 — demo LEFT */ /* step 2 (how-collect) stays normal — demo RIGHT */ /* keep every step title on EXACTLY its two authored lines (
) — the big number was squeezing the h1 into a 3rd wrapped line; nowrap + a size that fits the column kills the auto-wrap */ .lp .pz-copy-col h1,.lp .pz-copy-col h2{font-size:clamp(2rem,2.6vw,2.5rem);white-space:nowrap;} .lp .pz-copy-col .pz-sub{font-size:1.12rem;max-width:38ch;white-space:normal;} .lp .pz-step-num{font-size:clamp(3.4rem,5vw,4.8rem);} /* step 3 (mind web) — smaller copy on the left, roomier graph on the right so the web spreads out and reads less dense (wider + taller box). */ .lp .pz-web .pz-copy-col{flex:1 1 36%;max-width:430px;} .lp .pz-web .pz-demo-col{flex:1 1 64%;} .lp .pz-web .mind-stage{min-height:clamp(440px,62vh,560px);} /* step 2 — give the demo more width so the cards spread rightward */ .lp .pz-flow:not(.pz-web){gap:clamp(1.4rem,3vw,3rem);} .lp .pz-flow:not(.pz-web) .pz-copy-col{flex:1 1 38%;max-width:430px;} .lp .pz-flow:not(.pz-web) .pz-demo-col{flex:1 1 62%;} /* cards keep their NATURAL (mobile) size & internal layout — the left card (Питание) is fixed top-left; the others cascade RIGHT (overflow ok) so nothing overlaps and nothing gets squeezed */ .lp .pz-cardscatter{width:100%;height:clamp(410px,52vh,468px);overflow:visible;} /* two narrower cards on the top line, the WIDEST (Питание) centred on the bottom line — reads as a stable base instead of poking off to a corner */ .lp .pz-cardunit:nth-child(2){left:0;right:auto;top:1%;transform:rotate(-2.5deg);} /* Расходы — top-left */ .lp .pz-cardunit:nth-child(3){left:auto;right:0;top:6%;transform:rotate(2.5deg);} /* Задачи — top-right */ .lp .pz-cardunit:nth-child(1){left:50%;right:auto;top:53%;transform:translateX(-50%) rotate(-1.5deg);} /* Питание — bottom, centred */ /* ---------- SPHERES (5-8) — widgets left, sphere-icon scatter right (current lit) ---------- */ .lp .rz{position:relative;max-width:1160px;margin-inline:auto;min-height:100svh; align-items:flex-start;justify-content:center;padding:96px clamp(1.5rem,4vw,3rem) 64px;} .lp .rz .rz-head{max-width:560px;} /* left column = compact 2-col masonry (tossed plashkas fit the section height) */ .lp .rz .rzb{display:block;columns:2;column-gap:22px;width:min(52%,600px);max-width:600px; flex:none;padding:22px 0 0;} .lp .rz .rzb-p{width:100%!important;margin:0 0 20px!important;align-self:auto; -webkit-column-break-inside:avoid;break-inside:avoid;} /* Здоровье has 5 cards (odd count) — the last one (Лекарства) spans BOTH columns and centres, instead of dangling alone in one column */ .lp .rz .rzb-p.pe{-webkit-column-span:all;column-span:all; width:min(100%,272px)!important;margin:2px auto 0!important;} /* right = the assistant (Zeno, centre) surrounded by the OTHER spheres, exactly like the hero: pastel-tinted colour tiles on a slowly-drifting ring + faint grey ones further out. The selected sphere is absent — it "flew" left. Tiles are built + positioned by the sphere-assistant script (tuto.html). */ .lp .rz-orbit{display:block;position:absolute;right:clamp(1rem,3vw,3rem);top:50%;transform:translateY(-50%); width:min(46%,500px);aspect-ratio:1;} .lp .rz-zeno{position:absolute;left:0;top:0;z-index:3;pointer-events:none; filter:drop-shadow(0 14px 22px rgba(43,41,56,.15));} /* tiles = :8091's .psph exactly — grey by default, bloom to colour when lit */ .lp .rz-sph{position:absolute;left:0;top:0;z-index:1;border-radius:16px;display:grid;place-items:center; will-change:transform;background:color-mix(in srgb,var(--ink-faint) 14%,#fff); transition:background .45s var(--ease);} .lp .rz-sph i{width:52%;height:52%;background:var(--ink-faint);transition:background .45s var(--ease); -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .lp .rz-sph.on{background:color-mix(in srgb,var(--c) 16%,#fff);} .lp .rz-sph.on i{background:var(--c);} /* ---------- PRIVACY — exactly like :8091 (copy RIGHT, card-scatter LEFT, fixed diagonal cascade — not the mobile column). Overrides full.css. ---- */ .lp .privacy{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:100px;} .lp .privacy .privacy-inner{flex-direction:row-reverse!important;align-items:center;gap:clamp(2rem,6vw,5rem);} .lp .privacy .privacy-copy{flex:1 1 42%;max-width:470px;} .lp .privacy .privacy-copy h2{font-size:clamp(1.9rem,4.4vw,2.7rem);text-align:left;} .lp .privacy .privacy-sub{text-align:left;font-size:clamp(1.05rem,2vw,1.2rem);max-width:40ch;margin-top:1rem;} .lp .privacy .privacy-viz{flex:1 1 58%;margin-top:0;display:flex;justify-content:center;} .lp .privacy .pscatter{position:relative;display:block;width:100%;max-width:540px; height:clamp(410px,44vw,480px);margin:0 auto;flex:none;padding:0;} .lp .privacy .pscatter > *{position:absolute;inset:auto;margin:0;align-self:auto;} .lp .privacy .ps{width:252px;max-width:82%;} .lp .privacy .ps-seal{left:20%;top:2%;transform:rotate(-3deg);width:-moz-max-content;width:max-content;} .lp .privacy .ps-2{right:0;left:auto;top:15%;transform:rotate(-2deg);width:252px;} .lp .privacy .ps-1{left:0;right:auto;top:41%;transform:rotate(2deg);width:252px;} .lp .privacy .ps-3{right:5%;left:auto;top:64%;transform:rotate(1.5deg);width:252px;} /* ---------- REEL — two-line moving conveyor (ported from :8091) ---------- Overrides the mobile static chip-cloud (full.css) back to the two rows that scroll in opposite directions. Tiles are cloned once by tuto.html's desktop snippet so the -50% loop is seamless. */ .lp .reel .marquee{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start; gap:16px;max-width:none;max-height:none;margin:clamp(1.6rem,3.5vw,2.4rem) auto 0;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .lp .reel .mq-row{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;will-change:transform;} .lp .reel .mq-a{animation:marqA 96s linear infinite;} .lp .reel .mq-b{animation:marqB 112s linear infinite;} .lp .reel .marquee:hover .mq-row{animation-play-state:paused;} .lp .reel .mq-t{flex:none;width:auto;align-items:center;gap:13px;padding:14px 19px 14px 14px;border-radius:16px;} .lp .reel .mq-t small{display:block;} .lp .reel .mq-ic{width:44px;height:44px;border-radius:13px;} .lp .reel .mq-tx b{font-size:1rem;} .lp .reel .reel-head{text-align:center;} .lp .reel .reel-head h2{font-size:clamp(2.2rem,3.4vw,3rem);} /* ---------- CTA — bigger, 3-col perks (like :8091) ---------- */ .lp .cta h2{font-size:clamp(2.6rem,4.2vw,3.8rem);} .lp .cta .cta-inner{max-width:1000px;} .lp .cta .cta-mascot{width:clamp(96px,12vw,130px);} .lp .cta .perks{grid-template-columns:repeat(3,1fr);gap:.9rem;width:min(980px,92vw);max-width:none;margin-top:2rem;} .lp .cta .perk{padding:15px 18px;} /* ---------- FOOTER — grant logos on desktop ---------- */ /* the two-column desktop layout now lives on #footer / .foot-* in full.css; the pre-redesign rules here (.site-footer, .footer-brand, .fb-*, .footer-bar) had no markup left → removed 16.07. */ .fs-fasie{height:34px;} .fs-sk{height:38px;} }