/* ============================================================ tuto — landing · Slide 1 (reveal cinematic + hero orbit) Tokens mirror mobile/lib/core/theme/tokens.dart 1:1. The reveal + orbit physics live in app.js; CSS owns chrome, layout, the reveal handoff states and reduced-motion fallback. ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family:'Sansation'; src:url('fonts/Sansation-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'Sansation'; src:url('fonts/Sansation-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } @font-face { font-family:'Onest'; src:url('fonts/Onest-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'Onest'; src:url('fonts/Onest-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; } @font-face { font-family:'Onest'; src:url('fonts/Onest-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } /* ---------- Tokens ---------- */ :root{ --accent:#BD3E0F; --accent-hover:#B13B10; --accent-pressed:#AA350A; --accent-halo:rgba(189,62,15,.12); --navy:#2B2938; --navy-hover:#3B3948; --bg:#EFEEE9; --surface:#FFFFFF; --surface-muted:#E8E6E3; --surface-hover:#E5E2DE; --outline:#DBD8D2; --ink:#1C1B1F; --ink-muted:#717178; --ink-faint:#9E9DA5; --on-accent:#FFFFFF; /* sphere colours (ObSphere) */ --sph-health:#81B52C; --sph-finance:#666EFA; --sph-sleep:#F2C94C; --sph-tasks:#EF7E2C; --sph-wellbeing:#EF7E2C; --sph-meds:#D85464; /* status tints (AppStatusColors) */ --pos-light:#ECF5DA; --neg-light:#FFCECF; --caution:#F2C94C; --maxw:1180px; --gutter:clamp(1.15rem,4vw,2.5rem); --sec-pad-y:clamp(76px,9vh,112px); /* единый вертикальный ритм секций */ --bg-alt:var(--surface-muted); /* альт-полоса чередования = системный surfaceMuted (#E8E6E3), не выдуманный hex */ --r-sm:14px; --r:20px; --r-lg:28px; --r-pill:100px; --shadow-sm:0 2px 10px rgba(43,41,56,.06); --shadow:0 16px 44px -20px rgba(43,41,56,.24); --ease:cubic-bezier(.2,.8,.2,1); --emph:cubic-bezier(.2,0,0,1); --backout:cubic-bezier(.34,1.4,.5,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} *{margin:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px;} /* якоря учитывают фикс-хедер (72px) */ /* overflow-x:clip (not hidden) so it doesn't turn into a scroll container — the snap scroller must stay the document root (html). */ body{font-family:'Onest',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;} /* Scroll-lock while the reveal cinematic plays. */ body.revealing{overflow:hidden;height:100svh;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;} /* ---------- Section snap ---------- Each top-level section fills the viewport and snaps point-to-point. Enabled on desktop with enough height (where sections fit one screen); phones scroll normally (stacked content can exceed a screen). */ @media(min-width:860px) and (min-height:640px){ html{scroll-snap-type:y proximity;} .hero,.pitch,.mods,.why,.privacy,.talk,.cta{scroll-snap-align:start;} } /* ---------- Type ---------- */ h1,h2,h3,.display{font-family:'Sansation',sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.01em;color:var(--ink);} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);} /* ---------- Buttons (app AppButton 8:61 — FLAT, r16, Onest; no shadow/glow) ---------- AppButton's BoxDecoration carries only color + radius + optional 1px border — zero BoxShadow. State tints are colour swaps, not elevation: Primary filled normal accent → hover #B13B10 → pressed accentPressed Secondary outl. transparent + 1px outline → hover surfaceHoverHalo fill */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Onest',sans-serif;font-weight:700;font-size:1rem;line-height:1;letter-spacing:-.005em;border-radius:16px;padding:0 1.5em;min-height:48px;transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap;} .btn:active{transform:scale(.97);} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .btn-primary{background:var(--accent);color:var(--on-accent);} .btn-primary:hover{background:var(--accent-hover);} .btn-primary:active{background:var(--accent-pressed);} /* Secondary · Outlined (8:61): transparent / 1px outline / muted text (#717178). Hover = surfaceHoverHalo fill. Verbatim system variant — no white fill, no ink text. */ .btn-ghost{background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--outline);} .btn-ghost:hover{background:var(--surface-hover);} .btn-ghost:active{background:var(--surface-muted);} .btn-secondary{background:var(--navy);color:#fff;} .btn-secondary:hover{background:var(--navy-hover);} .btn-lg{min-height:56px;padding:0 1.9em;font-size:1.06rem;} /* ============================================================ Header ============================================================ */ .site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s,opacity .5s var(--ease),transform .5s var(--ease);} .site-header.scrolled{background:rgba(239,238,233,.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);box-shadow:var(--shadow-sm);} .nav{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand{display:flex;align-items:center;gap:10px;font-family:'Sansation',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:-.02em;} .brand img{width:34px;height:34px;} /* хедер: не залитая кнопка, а лёгкий бейдж — светло-оранжевый фон + акцентный текст (не конкурирует с CTA) */ .nav-cta{display:inline-flex;min-height:40px;padding:0 1em;font-size:.92rem;font-weight:700;border-radius:12px; background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);box-shadow:none;} .nav-cta:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface));transform:none;} @media(max-width:719px){.nav-cta{min-height:38px;padding:0 .9em;font-size:.88rem;}} /* Header hidden during the cinematic, fades down→in on reveal. */ body.revealing .site-header{opacity:0;transform:translateY(-12px);pointer-events:none;} /* ============================================================ Hero ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(72px + 1.4rem) 0 3.4rem;overflow:hidden;} .hero-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,3.5vw,1.4rem);width:100%;} /* orbit slot — engine renders/docks into this box */ .hero-stage{position:relative;width:min(66vw,288px);aspect-ratio:1;flex:none;} /* copy */ .hero-copy{text-align:center;max-width:min(94vw,440px);} .hero h1{font-size:clamp(2.5rem,8.5vw,4.4rem);} .hero h1 .accent{color:var(--accent);} .hero-sub{font-size:clamp(1.04rem,3.3vw,1.28rem);color:var(--ink-muted);margin-top:.95rem;max-width:33ch;margin-inline:auto;} .hero-actions{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1.5rem;width:100%;margin-inline:auto;} /* главная кнопка: не на всю ширину — с большими полями (~86vw), мягкий тёмный, крупный радиус, стрелка справа */ .hero-actions .btn{width:min(86vw,360px);min-height:58px;border-radius:22px;} /* вторичная hero-кнопка = базовый .btn-secondary (surfaceDark #2B2938 токен), без кастомного hex */ .btn-arr{width:1.05em;height:1.05em;flex:none;margin-left:.05em;} /* доступность в сторах — лёгкая строка (не тяжёлые плашки), вторична к главной кнопке */ .stores-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .5rem;margin-top:1.1rem;font-family:'Onest',sans-serif;font-size:.9rem;color:var(--ink-faint);} .stores-line .sl-lead{color:var(--ink-faint);} .stores-line .sl-store{display:inline-flex;align-items:center;gap:.32rem;color:var(--ink-muted);font-weight:600;} .stores-line .sl-ic{width:15px;height:15px;flex:none;background:var(--ink-muted);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .stores-line .sl-sep{color:var(--ink-faint);} /* hero copy + chrome: hidden until the reveal hands off */ .reveal-fade{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease);} body.revealed .reveal-fade{opacity:1;transform:none;} body.revealed .reveal-fade.d1{transition-delay:.05s;} body.revealed .reveal-fade.d2{transition-delay:.14s;} body.revealed .reveal-fade.d3{transition-delay:.23s;} body.revealed .reveal-fade.d4{transition-delay:.32s;} /* scroll cue — out of flow so it never crowds the stacked hero copy */ /* центрируем auto-полями, НЕ transform: reveal-fade владеет transform и сбивал translateX(-50%) */ .scroll-cue{position:absolute;left:0;right:0;bottom:1rem;margin-inline:auto;width:-moz-max-content;width:max-content;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.76rem;} .scroll-cue .chev{width:22px;height:22px;animation:bob 1.8s var(--ease) infinite;} @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}} /* ============================================================ Reveal stage (full-viewport cinematic layer) ============================================================ */ .reveal{position:fixed;inset:0;z-index:90;pointer-events:none;contain:strict;} .reveal.done{display:none;} /* the orbit stage — engine writes left/top px transforms on its children */ .stage{position:absolute;inset:0;} .reveal .stage{position:absolute;inset:0;} .hero-stage .stage{position:absolute;inset:0;} /* one sphere chip — flat tinted plate + masked sphere icon (app _SphereChip) */ .chip{position:absolute;left:0;top:0;display:grid;place-items:center;border-radius:16px; background:color-mix(in srgb,var(--c) 16%,#fff);will-change:transform,opacity;} .chip .ci{width:54%;height:54%;background:var(--c); -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* the mascot — live vector rig drawn to canvas (assets/zeno.js) */ .mascot-canvas{position:absolute;left:0;top:0; filter:drop-shadow(0 12px 18px rgba(43,41,56,.14));will-change:transform;} /* ============================================================ Reduced motion: no cinematic, resting orbit + visible copy ============================================================ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:smooth;} .scroll-cue .chev{animation:none;} .reveal-fade{opacity:1!important;transform:none!important;transition:none;} } /* Телефон: контент к верху, но с ЯВНЫМ зазором под хедер (72px), чтобы он не перекрывал орбиту. Cue остаётся absolute у нижней кромки — нижнее пространство читается как scroll-аффорданс. */ @media(max-width:759px){ .hero{align-items:flex-start;padding-top:calc(72px + 1.5rem);} .hero-stage{width:min(66vw,272px);} /* крупнее — чтобы анимация не терялась рядом с большим h1 */ .hero-inner{gap:.5rem;} } /* высокие телефоны: приподнять «Листай вниз» от нижней кромки; на низких (≤760) оставить внизу — иначе наедет на бейджи */ @media(max-width:759px) and (min-height:760px){.scroll-cue{bottom:3rem;}} /* низкие телефоны (SE и т.п.): 2 кнопки + строка + cue не влезают → поджимаем орбиту и отступы */ @media(max-width:759px) and (max-height:759px){ .hero{padding-top:calc(72px + .7rem);} .hero-stage{width:min(48vw,178px);} .hero-inner{gap:.3rem;} } /* ============================================================ Responsive — desktop: copy left, orbit right ============================================================ */ @media(min-width:960px){ .hero{padding-top:0;} .hero-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(2rem,5vw,4rem);} .hero-copy{order:1;text-align:left;flex:1 1 0;max-width:560px;margin-inline:0;} .hero-stage{order:2;flex:none;width:min(40vw,460px);} .hero-sub{margin-inline:0;} .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;margin-inline:0;} .hero-actions .btn{width:auto;min-width:0;} .stores-line{justify-content:flex-start;} .scroll-cue{bottom:1.4rem;} } /* ============================================================ Slide 2 — Любой запрос → понятный ответ (living units, scatter). Six units scattered chaotically (absolute positions, varied tilt). Each loops a slow processing→feedback action: the food PHOTO and the BANK STATEMENT get a scan beam ("обрабатываю", onboarding-style), the TEXT request types itself out, the VOICE waveform plays, then the tuto reply pulses. Two units are proactive (tuto notices on its own, spark glows). Staggered via --d so nothing syncs. Flat surfaces / soft shadows. ============================================================ */ .how{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(74px,8vh,94px) 0 clamp(22px,3vh,38px);} .how-head{text-align:center;max-width:680px;margin-inline:auto;} .how h2{font-size:clamp(1.9rem,6vw,2.6rem);} .how h2 .accent{color:var(--accent);} .how-sub{font-size:clamp(1rem,2.6vw,1.14rem);color:var(--ink-muted);margin-top:.8rem;max-width:52ch;margin-inline:auto;} .reveal-up{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .how.in .reveal-up{opacity:1;transform:none;} .how.in .u1{transition-delay:.02s;} .how.in .u2{transition-delay:.12s;} /* ---- chaotic scatter field ---- */ .field{position:relative;margin:clamp(1.4rem,3vw,2.4rem) auto 0;width:100%;max-width:1080px;height:clamp(450px,54vh,538px);--cyc:12s;} .unit{position:absolute;opacity:0;transition:opacity .6s var(--ease);} .how.in .unit{opacity:1;} @media(max-width:760px){ .field{position:static;height:auto;display:flex;flex-direction:column;gap:clamp(2.6rem,9vw,3.4rem);align-items:center;max-width:340px;} .unit{position:static;transform:none;} } /* ---- request bubbles (your input — muted, varied shapes) ---- */ .req-text{position:relative;max-width:260px;background:var(--surface-muted);color:var(--ink);padding:13px 17px;border-radius:22px 22px 22px 7px;font-size:.97rem;line-height:1.4;box-shadow:0 10px 26px -15px rgba(43,41,56,.26);min-height:1.4em;} /* caret = blinking right border on the text itself → always hugs the end of the last line, never wraps onto a new line as a lone bar */ .req-text .typed{white-space:pre-wrap;border-right:2px solid var(--ink-muted);} .how.in .req-text .typed{animation:caret 1s steps(1) infinite;} @keyframes caret{50%{border-right-color:transparent;}} .req-voice{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:var(--surface-muted);border-radius:100px;padding:9px 17px 9px 9px;box-shadow:0 10px 26px -15px rgba(43,41,56,.26);} .req-file{position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--outline);border-radius:14px;padding:10px 16px 10px 11px;box-shadow:0 12px 28px -16px rgba(43,41,56,.24);overflow:hidden;} /* real food photo + scan beam */ .req-photo{position:relative;width:154px;border-radius:14px;overflow:hidden;box-shadow:0 16px 34px -16px rgba(43,41,56,.42);} .req-photo img{display:block;width:100%;height:154px;object-fit:cover;} /* clean scanner line: thin white edge + soft accent glow trailing it, no big tinted block */ .scan-line{position:absolute;left:6px;right:6px;top:0;height:2px;border-radius:2px;background:#fff; box-shadow:0 0 9px 1px color-mix(in srgb,var(--accent) 55%,transparent),0 6px 12px -2px color-mix(in srgb,var(--accent) 40%,transparent);opacity:0;} .scan-tag{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(28,27,31,.6);color:#fff;font-size:.66rem;font-weight:500;padding:3px 9px;border-radius:100px;opacity:0;} .scan-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);} .how.in .req-photo .scan-line{animation:scanLine var(--cyc) var(--ease) infinite var(--d,0s);} .how.in .req-photo .scan-tag{animation:scanTag var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes scanLine{0%,28%{opacity:0;transform:translateY(4px);}31%{opacity:1;transform:translateY(4px);}45%{opacity:1;transform:translateY(150px);}48%,100%{opacity:0;transform:translateY(150px);}} @keyframes scanTag{0%,29%{opacity:0;}33%,45%{opacity:1;}48%,100%{opacity:0;}} /* voice waveform — plays continuously, then a recognise pass sweeps across */ .vplay{width:30px;height:30px;flex:none;border-radius:50%;background:var(--accent);display:grid;place-items:center;} .vplay svg{width:11px;height:11px;fill:#fff;margin-left:2px;} .wave{display:inline-flex;align-items:center;gap:2.5px;height:24px;} .wave i{width:2.5px;border-radius:2px;background:color-mix(in srgb,var(--accent) 60%,var(--surface-muted));transform-origin:center;} .how.in .wave i{animation:wv 1.6s ease-in-out infinite;} @keyframes wv{0%,100%{transform:scaleY(.5);}50%{transform:scaleY(1);}} /* status swaps 0:11 → "распознаю" during the recognise window */ .vstat{position:relative;display:inline-grid;font-size:.78rem;line-height:1.05;} .vdur,.vscan{grid-area:1/1;white-space:nowrap;} .vdur{color:var(--ink-muted);} .vscan{color:var(--accent);font-weight:600;opacity:0;} .how.in .vdur{animation:vdurCyc var(--cyc) var(--ease) infinite var(--d,0s);} .how.in .vscan{animation:vscanCyc var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes vdurCyc{0%,28%{opacity:1;}32%,45%{opacity:0;}49%,100%{opacity:1;}} @keyframes vscanCyc{0%,28%{opacity:0;}32%,45%{opacity:1;}49%,100%{opacity:0;}} .v-beam{position:absolute;top:0;bottom:0;width:38px;left:-46px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 32%,transparent),transparent);opacity:0;pointer-events:none;} .how.in .v-beam{animation:vBeam var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes vBeam{0%,28%{opacity:0;left:-46px;}31%{opacity:1;}45%{opacity:1;left:100%;}49%,100%{opacity:0;left:100%;}} /* file (statement) + scan beam sweeping across it */ /* little document with a colour header, content lines + folded corner */ .file-doc{position:relative;width:39px;height:49px;flex:none;background:#fff;border:1.5px solid var(--outline);border-radius:6px;overflow:hidden;box-shadow:0 3px 9px -3px rgba(43,41,56,.22);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);} .file-doc .hd{position:absolute;top:0;left:0;right:0;height:13px;background:color-mix(in srgb,var(--fc) 80%,#fff);} .file-doc .fold{position:absolute;top:0;right:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent color-mix(in srgb,var(--fc) 30%,#fff) transparent transparent;} .file-doc .ln{position:absolute;left:6px;height:2.4px;border-radius:2px;background:color-mix(in srgb,var(--ink-muted) 30%,transparent);} .file-doc .l1{top:21px;right:7px;} .file-doc .l2{top:28px;right:12px;} .file-doc .l3{top:35px;right:17px;} .file-meta{display:flex;flex-direction:column;gap:3px;min-width:0;} .file-name{font-size:.88rem;font-weight:500;color:var(--ink);white-space:nowrap;} .file-sub{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-muted);} .file-badge{font-size:.6rem;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--sph-meds);padding:1.5px 6px;border-radius:5px;} .file-beam{position:absolute;top:0;bottom:0;width:3px;left:0;background:color-mix(in srgb,var(--accent) 85%,#fff);box-shadow:0 0 14px 4px color-mix(in srgb,var(--accent) 70%,transparent);opacity:0;} .how.in .file-beam{animation:fileBeam var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes fileBeam{0%,28%{opacity:0;left:0;}31%{opacity:1;left:0;}45%{opacity:1;left:100%;}48%,100%{opacity:0;left:100%;}} /* ---- tuto reply on the request corner (two lines: action + a noticed insight) ---- */ .ans{position:absolute;right:-14px;bottom:-20px;z-index:3;display:inline-flex;align-items:flex-start;gap:8px; background:var(--surface);border-radius:15px;padding:8px 13px 8px 9px;white-space:nowrap;box-shadow:0 12px 26px -10px rgba(43,41,56,.34);} .ans .who{width:22px;height:22px;flex:none;border-radius:50%;object-fit:cover;margin-top:1px;} .ans-body{display:flex;flex-direction:column;gap:2px;} .ans-txt{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.2;} .ans-txt .hot{color:var(--c);font-weight:700;} .ans-note{font-size:.735rem;font-weight:500;color:var(--ink-muted);line-height:1.2;} /* two equal items pulled from one input (e.g. voice → log + reminder) */ .ans--list .ans-body{gap:5px;} .ans-li{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap;} .ans-li .ck{width:13px;height:13px;flex:none;background:var(--c);-webkit-mask:url(/assets/icons/check.svg) center/contain no-repeat;mask:url(/assets/icons/check.svg) center/contain no-repeat;} .ans-li .hot{color:var(--c);font-weight:700;} /* photo/voice/file replies: hidden during the scan, then appear once the analysis finishes (~48%), hold, then reset before the next pass. */ .how.in .ans:not(.ans-typed){animation:ansReveal var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes ansReveal{0%,46%{opacity:0;transform:scale(.62) translateY(6px);}52%{opacity:1;transform:scale(1.06) translateY(0);}58%{transform:scale(1);}93%{opacity:1;transform:none;}100%{opacity:0;transform:scale(.62) translateY(6px);}} /* text reply: appears once the typing finishes (driven by JS .on) */ .ans-typed{opacity:0;transform:scale(.6) translateY(5px);transition:opacity .35s var(--ease),transform .45s var(--backout);} .ans-typed.on{opacity:1;transform:none;} /* ---- proactive bubble (tuto notices on its own) ---- */ /* Loops an "arrival": the insight lifts in like a fresh notification and a soft detection sheen sweeps across it — the noticing equivalent of the request bubbles' scan pass. Staggered via --d so the two never sync. */ .pro{position:relative;overflow:hidden;display:flex;gap:10px;align-items:flex-start;max-width:250px; background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); border-radius:8px 18px 18px 18px;padding:12px 14px;} .how.in .pro{animation:proArrive var(--cyc) var(--emph) infinite var(--d,0s);} @keyframes proArrive{ 0%{opacity:.5;transform:translateY(9px) scale(.95);} 8%{opacity:1;transform:translateY(-1px) scale(1.02);} 14%,92%{opacity:1;transform:none;} 100%{opacity:.5;transform:translateY(9px) scale(.95);} } .pro::before{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%); background:linear-gradient(105deg,transparent 34%,color-mix(in srgb,var(--accent) 15%,transparent) 50%,transparent 66%);} .how.in .pro::before{animation:proSheen var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes proSheen{0%,2%{transform:translateX(-120%);}13%{transform:translateX(120%);}14%,100%{transform:translateX(120%);}} .pro .who{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;margin-top:1px;position:relative;z-index:1;} .pro-body{min-width:0;position:relative;z-index:1;} .pro-tag{display:flex;width:fit-content;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--accent);margin-bottom:3px;} .pro-tag .sp{width:12px;height:12px;flex:none;background:var(--accent);-webkit-mask:url(/assets/icons/insight.svg) center/contain no-repeat;mask:url(/assets/icons/insight.svg) center/contain no-repeat;} .how.in .pro-tag .sp{animation:sparkPulse var(--cyc) var(--ease) infinite var(--d,0s);} @keyframes sparkPulse{0%,58%{transform:scale(1);opacity:.8;}66%{transform:scale(1.45);opacity:1;}78%,100%{transform:scale(1);opacity:.8;}} .pro-txt{font-size:.9rem;line-height:1.42;color:var(--ink);} .pro-txt .hot{color:var(--accent);font-weight:600;} @media(prefers-reduced-motion:reduce){ .reveal-up,.unit{opacity:1!important;transition:none;} .scan-line,.scan-tag,.file-beam,.v-beam,.vdur,.vscan,.wave i,.ans,.pro,.pro::before,.pro-tag .sp,.req-text .typed{animation:none!important;} .req-text .typed{border-right-color:transparent;} .vscan{display:none;} .ans-typed{opacity:1;transform:none;} .pro{opacity:1;transform:none;} } /* ============================================================ Slide 3 — Модули: по секции-ленте на каждый модуль. Alternating band — big graphic visual on one side, a punchy pitch on the other; reveals on scroll (.mod.in). Sphere colour via --c; watercolor edge on rings/bars via SVG #wc. ============================================================ */ .mod{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(80px,10vh,120px) 0;} .mod-inner{display:flex;align-items:center;gap:clamp(2rem,6vw,6rem);width:100%;} .mod--flip .mod-inner{flex-direction:row-reverse;} /* copy side */ .mod-copy{flex:1 1 46%;max-width:520px;} .mod-tag{display:inline-block;font-family:'Onest',sans-serif;font-size:.8rem;font-weight:700; padding:5px 13px;border-radius:100px;margin-bottom:1.1rem; background:color-mix(in srgb,var(--c) 16%,#fff);color:color-mix(in srgb,var(--c) 62%,#000);} .mod-h{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.01em;} .mod-accent{color:var(--accent);} .mod-p{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.5;color:var(--ink-muted);margin-top:1rem;max-width:42ch;} .mod-pts{list-style:none;margin-top:1.5rem;display:flex;flex-direction:column;gap:.7rem;} .mod-pts li{display:flex;align-items:center;gap:10px;font-size:clamp(.98rem,1.3vw,1.08rem);color:var(--ink);font-weight:500;} .mod-pts b{font-weight:700;color:color-mix(in srgb,var(--c) 68%,#000);} .mod-pts .ck{width:20px;height:20px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--c) 16%,#fff);position:relative;} .mod-pts .ck::after{content:"";position:absolute;inset:0;background:var(--c); -webkit-mask:url(/assets/icons/check.svg) center/12px no-repeat;mask:url(/assets/icons/check.svg) center/12px no-repeat;} /* visual side */ .mod-viz{flex:1 1 54%;display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,2.5vw,2rem);min-width:0;} .mod-viz--stack{flex-direction:column;align-items:flex-start;gap:14px;} /* reveal on scroll */ .mod-copy,.mod-viz>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--emph);} .mod.in .mod-copy{opacity:1;transform:none;transition-delay:.05s;} .mod.in .mod-viz>*{opacity:1;transform:none;} .mod.in .mod-viz>*:nth-child(2){transition-delay:.16s;} /* --- big ring (nutrition / activity) --- */ .ring-xl{position:relative;width:clamp(168px,17vw,206px);aspect-ratio:1;flex:none;} .ring-xl svg{width:100%;height:100%;} .rgx-t{fill:none;stroke:var(--surface-muted);stroke-width:13;} .rgx-a{fill:none;stroke:var(--c);stroke-width:13;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;filter:url(#wc);} .ring-xl-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;} .ring-xl-mid b{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--ink);font-feature-settings:'tnum';line-height:1;} .ring-xl-mid span{font-size:.82rem;color:var(--ink-muted);font-weight:500;} /* macro mini-bars (nutrition) */ .macro{display:flex;flex-direction:column;gap:12px;min-width:150px;} .macro-r{display:flex;flex-direction:column;gap:5px;} .macro-r span{font-size:.82rem;color:var(--ink-muted);font-weight:500;} .mbar{height:8px;border-radius:100px;background:var(--surface-muted);overflow:hidden;} .mbar i{display:block;height:100%;width:var(--w);border-radius:100px;background:var(--c);} /* big number + bar (finance / sleep / meds) */ .viz-cap{font-size:.94rem;color:var(--ink-muted);font-weight:500;} .viz-num{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--ink);line-height:1;font-feature-settings:'tnum';display:flex;align-items:baseline;gap:8px;} .viz-num i{font-style:normal;font-family:'Onest',sans-serif;font-size:.4em;font-weight:600;color:var(--ink-muted);} .viz-foot{font-size:.92rem;color:var(--ink-muted);font-weight:500;} .viz-foot b{color:color-mix(in srgb,var(--c) 68%,#000);font-weight:700;} .bar-xl{position:relative;width:clamp(240px,30vw,384px);height:16px;border-radius:100px;background:var(--surface-muted);overflow:hidden;filter:url(#wc);} .bar-xl-fill{position:absolute;inset:0 auto 0 0;width:var(--p,60%);border-radius:100px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 74%,#fff),var(--c));} .bar-xl--warn .bar-xl-fill{background:linear-gradient(90deg,#F2C94C,#EAA753);} .bar-xl--red .bar-xl-fill{background:linear-gradient(90deg,#E0857A,#D85464);} /* subscription chips (finance) */ .chips{display:flex;gap:10px;flex-wrap:wrap;} .chip2{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border-radius:100px;padding:8px 14px 8px 10px; font-size:.9rem;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1px var(--outline);} .chip2 i{width:16px;height:16px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* checklist (tasks) */ .checks{display:flex;flex-direction:column;gap:13px;width:clamp(264px,29vw,350px); background:var(--surface);border-radius:22px;padding:20px 22px;box-shadow:0 34px 64px -42px rgba(43,41,56,.32),inset 0 0 0 1px var(--outline);} .chk{display:flex;align-items:center;gap:12px;font-size:1rem;font-weight:500;color:var(--ink);} .chk-b{width:22px;height:22px;flex:none;border-radius:7px;box-shadow:inset 0 0 0 2px var(--outline);position:relative;} .chk.done .chk-b{background:var(--c);box-shadow:none;} .chk.done .chk-b::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url(/assets/icons/check.svg) center/14px no-repeat;mask:url(/assets/icons/check.svg) center/14px no-repeat;} .chk.done{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-muted) 55%,transparent);} /* streak dots (habits) */ .streak{display:flex;gap:9px;flex-wrap:wrap;max-width:322px;} .streak i{width:27px;height:27px;border-radius:9px;background:var(--surface-muted);} .streak i.on{background:var(--c);box-shadow:0 5px 12px -5px color-mix(in srgb,var(--c) 70%,transparent);} /* week bars (activity) — each bar has a weekday label below */ .week{display:flex;align-items:stretch;gap:clamp(8px,1vw,11px);height:120px;} .week span{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%;} .week i{width:16px;border-radius:6px 6px 3px 3px;height:var(--h);background:color-mix(in srgb,var(--c) 74%,#fff);} .week em{font-style:normal;font-size:.68rem;color:var(--ink-muted);font-weight:500;} .week .wk-now i{background:var(--c);} /* timeline (meds) */ .timeline{position:relative;width:clamp(260px,30vw,360px);height:52px;} .tl-line{position:absolute;left:11px;right:11px;top:11px;height:3px;border-radius:3px;background:var(--surface-muted);} .tl-p{position:absolute;top:0;left:var(--x);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;} .tl-p i{width:22px;height:22px;border-radius:50%;background:var(--surface-muted);box-shadow:0 0 0 4px var(--bg);} .tl-p em{font-style:normal;font-size:.78rem;color:var(--ink-muted);font-weight:500;} .tl-p.done i{background:var(--c);} .tl-p.now i{background:#fff;box-shadow:0 0 0 3px var(--c),0 0 0 7px var(--bg);} .tl-p.now em{color:color-mix(in srgb,var(--c) 68%,#000);font-weight:700;} /* note → result transform (notes) */ .tf{display:flex;align-items:center;gap:12px;} .tf-note,.tf-out{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:11px 15px;font-size:.95rem;font-weight:500;white-space:nowrap;} .tf-note{background:var(--surface);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--outline);} .tf-note i{width:17px;height:17px;background:var(--ink-faint);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .tf-out{background:color-mix(in srgb,var(--c) 13%,#fff);color:color-mix(in srgb,var(--c) 66%,#000);font-weight:600;} .tf-out i{width:17px;height:17px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .tf-arr{width:28px;height:10px;flex:none;position:relative;} .tf-arr::before{content:"";position:absolute;left:0;right:6px;top:4px;height:2px;background:color-mix(in srgb,var(--c) 55%,transparent);} .tf-arr::after{content:"";position:absolute;right:2px;top:1px;width:8px;height:8px;border-top:2px solid;border-right:2px solid;border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:rotate(45deg);} /* mobile: stack copy over visual, natural height */ @media(max-width:780px){ .mod{min-height:auto;padding:clamp(54px,11vw,80px) 0;} .mod-inner,.mod--flip .mod-inner{flex-direction:column;gap:2rem;} .mod-copy{flex:none;max-width:none;width:100%;order:1;} .mod-viz{flex:none;width:100%;order:2;} .mod-p{max-width:none;} } @media(prefers-reduced-motion:reduce){ .mod-copy,.mod-viz>*{opacity:1!important;transform:none!important;transition:none;} } /* ============================================================ Slide 3 polish — shared rail menu + richer block visuals ============================================================ */ .mods{position:relative;} /* shared module rail: active item + scroll indicator (fixed, right) */ .mod-rail{position:fixed;right:clamp(16px,2.4vw,44px);top:50%;transform:translateY(-50%);z-index:40; display:flex;flex-direction:column;gap:clamp(10px,1.6vh,17px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease);} .mod-rail.on{opacity:1;pointer-events:auto;} .mr-i{display:flex;align-items:center;justify-content:flex-end;gap:11px;cursor:pointer;height:34px;} .mr-lb{font-family:'Onest',sans-serif;font-size:.92rem;font-weight:600;color:var(--ink-muted);white-space:nowrap; opacity:0;transform:translateX(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);} .mr-dot{position:relative;width:12px;height:12px;flex:none;border-radius:50%;background:var(--outline);display:grid;place-items:center; transition:width .35s var(--backout),height .35s var(--backout),border-radius .35s,background .35s;} .mr-dot i{width:0;height:0;opacity:0;background:#fff;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;transition:.3s;} .mr-i.active .mr-dot{width:34px;height:34px;border-radius:12px;background:var(--c);box-shadow:0 8px 18px -6px color-mix(in srgb,var(--c) 60%,transparent);} .mr-i.active .mr-dot i{width:56%;height:56%;opacity:1;} .mr-i.active .mr-lb{opacity:1;transform:none;color:color-mix(in srgb,var(--c) 64%,#000);font-weight:700;} @media(hover:hover){.mr-i:not(.active):hover .mr-lb{opacity:.55;}.mr-i:not(.active):hover .mr-dot{background:var(--ink-faint);}} @media(max-width:900px){.mod-rail{display:none;}} /* macro rows with values (nutrition) */ .macro-r{display:flex;flex-direction:column;gap:6px;} .mc-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--ink-muted);font-weight:500;} .mc-top b{color:var(--ink);font-weight:600;} /* finance groups + polished subscription chips */ .fin-g{display:flex;flex-direction:column;gap:10px;} .fin-g+.fin-g{margin-top:16px;} .chips{display:flex;gap:11px;flex-wrap:wrap;} .chip2{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border-radius:14px;padding:8px 15px 8px 8px; font-size:.94rem;font-weight:600;color:var(--ink);box-shadow:0 10px 22px -14px rgba(43,41,56,.4),inset 0 0 0 1px var(--outline);} .c2-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);} .c2-ic i{width:15px;height:15px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .chip2 b{color:var(--ink-muted);font-weight:500;margin-left:1px;} /* checklist header (tasks) */ .checks-h{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:3px;} /* ============================================================ Slide 3 v6 — 5 hero modules (bespoke visuals) + «и ещё» marquee ============================================================ */ /* 1 · Ассистент — one message → many captured cards */ .asst-viz{flex-direction:column;align-items:flex-start;gap:14px;max-width:460px;} .asst-msg{align-self:flex-start;background:var(--surface-muted);border-radius:20px 20px 20px 7px;padding:14px 18px; font-size:1.02rem;line-height:1.42;color:var(--ink);box-shadow:0 12px 26px -16px rgba(43,41,56,.25);} .asst-lead{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-muted);font-weight:500;} .asst-av{width:26px;height:26px;flex:none;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--c) 16%,#fff);} .asst-av img{width:100%;height:100%;object-fit:cover;} .asst-out{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;} .asst-card{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:14px;padding:11px 13px; box-shadow:0 12px 26px -18px rgba(43,41,56,.34),inset 0 0 0 1px var(--outline);} .ac-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--cc) 15%,#fff);} .ac-ic i{width:52%;height:52%;background:var(--cc);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .ac-tx{display:flex;flex-direction:column;min-width:0;} .ac-tx b{font-size:.85rem;font-weight:700;color:var(--ink);white-space:nowrap;} .ac-tx small{font-size:.75rem;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 2 · Финансы — honest «Свободно» breakdown */ .fin-viz{flex-direction:column;align-items:flex-start;gap:13px;max-width:420px;width:100%;} .fin-eq{width:100%;background:var(--surface);border-radius:20px;padding:20px 22px;box-shadow:0 34px 64px -42px rgba(43,41,56,.3),inset 0 0 0 1px var(--outline);} .fe-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;font-size:.96rem;color:var(--ink-muted);} .fe-row b{font-weight:600;color:var(--ink);font-feature-settings:'tnum';white-space:nowrap;} .fe-row b.pos{color:#5E8A1E;} .fe-sum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:6px;padding-top:13px;border-top:2px solid color-mix(in srgb,var(--c) 28%,transparent);} .fe-sum span{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);} .fe-sum b{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.75rem;color:var(--c);font-feature-settings:'tnum';} .fin-note{display:flex;flex-direction:column;gap:7px;} .fin-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,#81B52C 15%,transparent);color:#5E8A1E;font-size:.82rem;font-weight:600;padding:4px 13px;border-radius:100px;} .fin-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#81B52C;} .fin-sub{font-size:.83rem;line-height:1.35;color:var(--ink-muted);max-width:36ch;} /* 3 · Сон — week with bad nights + the cause tuto found */ .sleep-viz{flex-direction:column;align-items:flex-start;gap:14px;max-width:450px;width:100%;} .sleep-h{font-size:.95rem;color:var(--ink-muted);} .sleep-h b{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink);margin-right:5px;} .sleep-week{display:flex;flex-direction:column;gap:9px;width:100%;} .sw{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:13px;} .sw em{font-style:normal;font-size:.85rem;color:var(--ink-muted);font-weight:500;} .sw-b{height:12px;border-radius:100px;width:var(--w);filter:url(#wc);background:linear-gradient(90deg,#AFC23F,#81B52C);} .sw b{font-weight:600;font-size:.86rem;color:var(--ink);font-feature-settings:'tnum';white-space:nowrap;} .sw.warn .sw-b{background:linear-gradient(90deg,#F2C94C,#EAA753);} .sw.warn b{color:#A77C18;}.sw.warn b::after{content:" ⚠";} .sw.bad .sw-b{background:linear-gradient(90deg,#E0857A,#D85464);} .sw.bad b{color:#C23B49;}.sw.bad b::after{content:" ⚠";} .sleep-cause{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--c) 13%,var(--surface));border-radius:16px;padding:12px 14px;} .sc-av{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--c) 22%,#fff);} .sc-av img{width:100%;height:100%;object-fit:cover;} .sleep-cause p{font-size:.92rem;line-height:1.38;color:var(--ink);} .sleep-cause b{color:#8A6D12;font-weight:700;} /* 4 · Питание — photo → calories + safety warnings */ .nutr-viz{flex-direction:column;align-items:flex-start;gap:15px;max-width:430px;} .nutr-card{display:flex;align-items:center;gap:17px;} .nutr-photo{width:118px;height:118px;flex:none;border-radius:18px;overflow:hidden;box-shadow:0 20px 38px -18px rgba(43,41,56,.42);} .nutr-photo img{width:100%;height:100%;object-fit:cover;} .nutr-info{display:flex;flex-direction:column;gap:3px;} .nutr-info b{font-family:'Sansation',sans-serif;font-weight:700;font-size:2rem;color:var(--ink);line-height:1;} .nutr-info small{font-size:.95rem;color:var(--ink-muted);} .nutr-warns{display:flex;flex-direction:column;gap:9px;width:100%;} .nw{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,#D85464 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#D85464 22%,transparent); border-radius:13px;padding:11px 14px;font-size:.92rem;font-weight:500;color:var(--ink);} .nw-ic{width:20px;height:20px;flex:none;border-radius:50%;background:#D85464;position:relative;} .nw-ic::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;} /* 5 · Ритуалы — evening "close the loose ends" digest */ .ritual-viz{flex-direction:column;align-items:flex-start;max-width:400px;width:100%;} .rit-card{width:100%;background:var(--surface);border-radius:20px;padding:19px 21px;display:flex;flex-direction:column;gap:13px; box-shadow:0 34px 64px -42px rgba(43,41,56,.3),inset 0 0 0 1px var(--outline);} .rit-cap{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);} .rit-i{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--ink);} .rit-b{width:22px;height:22px;flex:none;border-radius:7px;box-shadow:inset 0 0 0 2px var(--outline);position:relative;} .rit-i.done .rit-b{background:var(--c);box-shadow:none;} .rit-i.done .rit-b::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url(/assets/icons/check.svg) center/14px no-repeat;mask:url(/assets/icons/check.svg) center/14px no-repeat;} .rit-i.done{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-muted) 55%,transparent);} .rit-foot{margin-top:3px;font-size:.9rem;font-weight:600;color:color-mix(in srgb,var(--c) 62%,#000);} /* 6 · «И ещё» — moving marquee of other + future modules */ .more{position:relative;padding:clamp(72px,10vh,120px) 0;overflow:hidden;} .more-head{text-align:center;max-width:680px;margin-inline:auto;} .more-h{font-size:clamp(1.9rem,5vw,2.8rem);} .more-p{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.5;color:var(--ink-muted);margin-top:.9rem;} .more.in .reveal-up{opacity:1;transform:none;} .more.in .m1{transition-delay:.03s;}.more.in .m2{transition-delay:.12s;} .marquee{margin-top:clamp(2rem,4.5vw,3.4rem);display:flex;flex-direction:column;gap:16px; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .mq-row{display:flex;gap:16px;width:max-content;will-change:transform;} .mq-a{animation:marqA 96s linear infinite;} .mq-b{animation:marqB 112s linear infinite;} @keyframes marqA{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes marqB{from{transform:translateX(-50%);}to{transform:translateX(0);}} .marquee:hover .mq-row{animation-play-state:paused;} .mq-t{display:flex;align-items:center;gap:13px;flex:none;background:var(--surface);border-radius:16px;padding:14px 19px 14px 14px; box-shadow:0 16px 32px -22px rgba(43,41,56,.32),inset 0 0 0 1px var(--outline);} .mq-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,#fff);} .mq-ic i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .mq-tx{display:flex;flex-direction:column;gap:1px;} .mq-tx b{font-size:1rem;font-weight:700;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:8px;} .mq-tx small{font-size:.82rem;color:var(--ink-muted);white-space:nowrap;} @media(max-width:780px){ .asst-out{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){ .mq-row{animation:none!important;} .more.in .reveal-up{opacity:1;transform:none;} } /* ============================================================ Slide 3 v7 — living chat scenes (section-2 style, no static tables) ============================================================ */ .scene{display:flex;flex-direction:column;gap:13px;max-width:456px;width:100%;align-items:stretch;} /* chat-cascade arrival: bubbles pop in one after another */ .scene>*{transform:translateY(16px) scale(.96);transition:opacity .55s var(--ease),transform .6s var(--backout);} .mod.in .scene>*:nth-child(1){transition-delay:.05s;} .mod.in .scene>*:nth-child(2){transition-delay:.32s;} .mod.in .scene>*:nth-child(3){transition-delay:.58s;} .cq{align-self:flex-end;max-width:88%;background:var(--surface-muted);color:var(--ink);border-radius:20px 20px 7px 20px; padding:13px 17px;font-size:1rem;line-height:1.4;box-shadow:0 12px 26px -18px rgba(43,41,56,.26);} .ca{align-self:flex-start;max-width:94%;display:flex;gap:10px;align-items:flex-start;} .ca-av{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--c) 18%,#fff);margin-top:2px;} .ca-av img{width:100%;height:100%;object-fit:cover;} .ca-bub{background:var(--surface);border-radius:7px 20px 20px 20px;padding:13px 16px;font-size:1rem;line-height:1.42;color:var(--ink); box-shadow:0 14px 30px -18px rgba(43,41,56,.32),inset 0 0 0 1px var(--outline);} .ca-bub b{color:color-mix(in srgb,var(--c) 58%,#000);font-weight:700;} .ca-bub .warn{color:#C23B49;font-weight:700;} .ca--warn .ca-bub{background:color-mix(in srgb,#D85464 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#D85464 24%,transparent);} .ca--warn .ca-bub b{color:inherit;} .ca--story .ca-bub{background:color-mix(in srgb,var(--c) 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent);} .story-cap{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:color-mix(in srgb,var(--c) 58%,#000);margin-bottom:3px;} /* spark on proactive bubbles */ .spark{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:5px;background:var(--c); -webkit-mask:url(/assets/icons/insight.svg) center/contain no-repeat;mask:url(/assets/icons/insight.svg) center/contain no-repeat;} .mod.in .ca--pro .spark{animation:sparkP 2.6s var(--ease) infinite;} @keyframes sparkP{0%,60%{transform:scale(1);opacity:.85;}70%{transform:scale(1.4);opacity:1;}82%,100%{transform:scale(1);opacity:.85;}} /* photo request bubble + scanner */ .cq-photo{position:relative;align-self:flex-end;width:182px;padding:0;border-radius:20px 20px 7px 20px;overflow:hidden;box-shadow:0 20px 40px -18px rgba(43,41,56,.42);} .cq-photo img{display:block;width:100%;height:150px;object-fit:cover;} .cq-photo .cq-tag{position:absolute;left:9px;top:9px;background:rgba(28,27,31,.62);color:#fff;font-size:.68rem;font-weight:500;padding:3px 9px;border-radius:100px;} .hscan{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:#fff;opacity:0; box-shadow:0 0 9px 1px color-mix(in srgb,var(--c) 60%,transparent),0 6px 12px -2px color-mix(in srgb,var(--c) 45%,transparent);} .mod.in .cq-photo .hscan{animation:hscan 3.6s var(--ease) infinite;} @keyframes hscan{0%,8%{opacity:0;transform:translateY(2px);}14%{opacity:1;}46%{opacity:1;transform:translateY(146px);}52%,100%{opacity:0;transform:translateY(146px);}} /* voice request bubble + waveform */ .cq-voice{align-self:flex-end;display:inline-flex;align-items:center;gap:11px;background:var(--surface-muted);border-radius:100px;padding:9px 18px 9px 9px;box-shadow:0 12px 26px -18px rgba(43,41,56,.26);} .v-play{width:32px;height:32px;flex:none;border-radius:50%;background:var(--c);display:grid;place-items:center;} .v-play svg{width:12px;height:12px;fill:#fff;margin-left:2px;} .wave{display:inline-flex;align-items:center;gap:2.5px;height:24px;} .wave i{width:2.5px;height:var(--h);border-radius:2px;background:color-mix(in srgb,var(--c) 62%,var(--surface-muted));transform-origin:center;} .mod.in .wave i{animation:wv 1.5s ease-in-out infinite;} .v-dur{font-size:.8rem;color:var(--ink-muted);font-weight:500;} /* challenge card */ .cq-chal{align-self:flex-end;display:flex;flex-direction:column;gap:12px;background:var(--surface);border-radius:18px;padding:15px 18px; box-shadow:0 18px 34px -22px rgba(43,41,56,.3),inset 0 0 0 1px var(--outline);} .ch-h{font-family:'Sansation',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);} .ch-streak{display:flex;gap:6px;flex-wrap:wrap;} .ch-streak i{width:18px;height:18px;border-radius:6px;background:var(--surface-muted);} .ch-streak i.on{background:var(--c);box-shadow:0 4px 9px -4px color-mix(in srgb,var(--c) 65%,transparent);} .ch-d{font-size:.82rem;color:var(--ink-muted);font-weight:500;} /* cross-sphere task list */ .cq-tasks{align-self:stretch;display:flex;flex-direction:column;gap:2px;background:var(--surface);border-radius:18px;padding:8px 6px; box-shadow:0 18px 34px -22px rgba(43,41,56,.3),inset 0 0 0 1px var(--outline);} .tk{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;font-size:.95rem;color:var(--ink);} .tk-b{width:20px;height:20px;flex:none;border-radius:6px;box-shadow:inset 0 0 0 2px var(--outline);position:relative;} .tk.done .tk-b{background:var(--c);box-shadow:none;} .tk.done .tk-b::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url(/assets/icons/check.svg) center/13px no-repeat;mask:url(/assets/icons/check.svg) center/13px no-repeat;} .tk.done{color:var(--ink-muted);} .tk-sph{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:600;color:color-mix(in srgb,var(--s) 66%,#000);background:color-mix(in srgb,var(--s) 14%,transparent);padding:2px 9px;border-radius:100px;} /* applied tags (notes) */ .ca--tags .ca-bub{display:block;} .tag2{display:inline-flex;align-items:center;gap:6px;margin:8px 7px 0 0;background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 64%,#000); font-size:.82rem;font-weight:600;padding:5px 11px;border-radius:100px;} .tag2 i{width:14px;height:14px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} @media(prefers-reduced-motion:reduce){ .scene>*{transform:none!important;} .hscan,.wave i,.ca--pro .spark{animation:none!important;} } /* ============================================================ Питание — beautiful animated meal card (self-contained, no chat) photo shimmer → calorie ring draws → macro bars fill → warnings slide ============================================================ */ .nutri-viz{align-items:center;justify-content:center;} .nutri-card{width:min(100%,420px);background:var(--surface);border-radius:26px;overflow:hidden; box-shadow:0 44px 84px -48px rgba(43,41,56,.42),inset 0 0 0 1px var(--outline);} .nutri-photo{position:relative;height:152px;overflow:hidden;} .nutri-photo img{width:100%;height:100%;object-fit:cover;display:block;} .np-meal{position:absolute;left:14px;bottom:12px;background:rgba(28,27,31,.6);color:#fff;font-size:.8rem;font-weight:600;padding:5px 13px;border-radius:100px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);} .np-shine{position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);} .mod.in .np-shine{animation:npShine 1.5s var(--ease) .25s;} @keyframes npShine{to{transform:translateX(130%);}} .nutri-body{padding:clamp(18px,2vw,22px) clamp(18px,2vw,24px) clamp(20px,2.2vw,24px);} .nutri-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;} .nutri-kcal{display:flex;flex-direction:column;gap:3px;min-width:0;} .nk-cap{font-size:.82rem;color:var(--ink-muted);font-weight:500;} .nk-num{display:flex;align-items:baseline;gap:6px;font-family:'Sansation',sans-serif;line-height:1;} .nk-num b{font-size:clamp(2rem,3.6vw,2.6rem);font-weight:700;color:var(--ink);font-feature-settings:'tnum';} .nk-num i{font-style:normal;font-family:'Onest',sans-serif;font-size:.92rem;font-weight:500;color:var(--ink-muted);} .nk-sub{font-size:.8rem;color:var(--ink-faint);} .nutri-ring{position:relative;width:74px;height:74px;flex:none;} .nutri-ring svg{width:100%;height:100%;} .nr-t{fill:none;stroke:var(--surface-muted);stroke-width:11;} .nr-a{fill:none;stroke:var(--c);stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;filter:url(#wc);stroke-dasharray:100;stroke-dashoffset:100;} .mod.in .nutri-ring .nr-a{animation:nrDraw 1.3s var(--emph) .35s forwards;} @keyframes nrDraw{to{stroke-dashoffset:46;}} .nr-mid{position:absolute;inset:0;display:grid;place-items:center;font-family:'Sansation',sans-serif;font-weight:700;font-size:.86rem;color:var(--c);font-feature-settings:'tnum';opacity:0;} .mod.in .nr-mid{animation:nrFade .5s var(--ease) 1.05s forwards;} @keyframes nrFade{to{opacity:1;}} .nutri-macros{display:flex;flex-direction:column;gap:11px;margin-top:clamp(15px,1.8vw,20px);} .nm{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;} .nm-l{font-size:.85rem;color:var(--ink-muted);font-weight:500;} .nm-bar{height:8px;border-radius:100px;background:var(--surface-muted);overflow:hidden;} .nm-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--c);transition:width 1s var(--emph);} .mod.in .nm:nth-child(1) .nm-bar i{width:var(--w);transition-delay:.5s;} .mod.in .nm:nth-child(2) .nm-bar i{width:var(--w);transition-delay:.62s;} .mod.in .nm:nth-child(3) .nm-bar i{width:var(--w);transition-delay:.74s;} .nm-v{font-family:'Onest',sans-serif;font-size:.86rem;font-weight:600;color:var(--ink);font-feature-settings:'tnum';} .nutri-warns{display:flex;flex-direction:column;gap:9px;margin-top:clamp(15px,1.8vw,20px);} .nwc{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,#D85464 8%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#D85464 22%,transparent); border-radius:13px;padding:11px 14px;font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.3; opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .55s var(--backout);} .nwc b{color:#C23B49;font-weight:700;} .nwc-i{width:20px;height:20px;flex:none;border-radius:50%;background:#D85464;position:relative;} .nwc-i::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;} .mod.in .nutri-warns .nwc:nth-child(1){opacity:1;transform:none;transition-delay:.98s;} .mod.in .nutri-warns .nwc:nth-child(2){opacity:1;transform:none;transition-delay:1.12s;} @media(prefers-reduced-motion:reduce){ .np-shine{display:none;} .nr-a{stroke-dashoffset:46;animation:none;} .nr-mid{opacity:1;animation:none;} .nm-bar i{width:var(--w)!important;transition:none;} .nwc{opacity:1!important;transform:none!important;transition:none;} } /* ============================================================ Питание — FLOATING connected plashки (section-2 scatter, not one card) ============================================================ */ .nutri-scatter{position:relative;width:100%;height:clamp(360px,47vh,432px);} .nu{position:absolute;opacity:0;transform:translateY(16px) scale(.94) rotate(var(--r,0deg)); transition:opacity .55s var(--ease),transform .6s var(--backout);} .mod.in .nu{opacity:1;transform:rotate(var(--r,0deg));} .mod.in .nu:nth-child(1){transition-delay:.06s;} .mod.in .nu:nth-child(2){transition-delay:.5s;} .mod.in .nu:nth-child(3){transition-delay:.82s;} .mod.in .nu:nth-child(4){transition-delay:.98s;} /* photo + result plashka stuck on its corner */ .nu-photo{left:0;top:1%;--r:-3deg;width:156px;} .nu-pimg{position:relative;width:156px;border-radius:16px;overflow:hidden;box-shadow:0 22px 42px -18px rgba(43,41,56,.46);} .nu-pimg img{display:block;width:100%;height:152px;object-fit:cover;} .nu-tag{position:absolute;left:8px;top:8px;background:rgba(28,27,31,.6);color:#fff;font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:100px;} .nu-scan{position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:#fff;opacity:0; box-shadow:0 0 9px 1px color-mix(in srgb,var(--c) 60%,transparent),0 6px 12px -2px color-mix(in srgb,var(--c) 45%,transparent);} .mod.in .nu-photo .nu-scan{animation:nuScan 3.6s var(--ease) 1s infinite;} @keyframes nuScan{0%,6%{opacity:0;transform:translateY(2px);}12%{opacity:1;}42%{opacity:1;transform:translateY(148px);}48%,100%{opacity:0;transform:translateY(148px);}} .nu-res{position:absolute;right:-34px;bottom:-16px;background:var(--surface);border-radius:13px;padding:8px 13px;white-space:nowrap; font-size:.82rem;font-weight:500;color:var(--ink);box-shadow:0 13px 28px -10px rgba(43,41,56,.36);} .nu-res b{color:color-mix(in srgb,var(--c) 58%,#000);font-weight:700;} /* floating calorie-ring plashka */ .nu-ring{right:0;top:3%;--r:2.5deg;display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:18px;padding:12px 16px 12px 12px; box-shadow:0 20px 38px -18px rgba(43,41,56,.34),inset 0 0 0 1px var(--outline);} .nutri-ring{position:relative;width:56px;height:56px;flex:none;} .nutri-ring svg{width:100%;height:100%;} .nr-t{fill:none;stroke:var(--surface-muted);stroke-width:11;} .nr-a{fill:none;stroke:var(--c);stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;filter:url(#wc);stroke-dasharray:100;stroke-dashoffset:100;} .mod.in .nu-ring .nr-a{animation:nrDraw 1.3s var(--emph) .85s forwards;} @keyframes nrDraw{to{stroke-dashoffset:46;}} .nr-mid{position:absolute;inset:0;display:grid;place-items:center;font-family:'Sansation',sans-serif;font-weight:700;font-size:.78rem;color:var(--c);opacity:0;} .mod.in .nu-ring .nr-mid{animation:nrFade .5s var(--ease) 1.55s forwards;} @keyframes nrFade{to{opacity:1;}} .nu-ring-tx{display:flex;flex-direction:column;} .nu-ring-tx b{font-family:'Sansation',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);} .nu-ring-tx small{font-size:.76rem;color:var(--ink-muted);} /* floating warning plashки */ .nu-warn{display:flex;align-items:center;gap:10px;max-width:272px;background:color-mix(in srgb,#D85464 9%,var(--surface)); box-shadow:0 18px 34px -18px rgba(216,84,100,.42),inset 0 0 0 1px color-mix(in srgb,#D85464 24%,transparent); border-radius:14px;padding:11px 15px;font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.3;} .nu-warn b{color:#C23B49;font-weight:700;} .nu-warn:nth-child(3){left:2%;top:60%;--r:-1.5deg;} .nu-warn:nth-child(4){right:0;top:74%;--r:2deg;} .nwc-i{width:20px;height:20px;flex:none;border-radius:50%;background:#D85464;position:relative;} .nwc-i::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;} .mod.in .nu-warn .nwc-i{animation:warnPulse 2.6s var(--ease) infinite;} @keyframes warnPulse{0%,70%{transform:scale(1);}78%{transform:scale(1.18);}88%,100%{transform:scale(1);}} @media(max-width:780px){ .nutri-scatter{height:auto;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;padding-top:.4rem;} .nu{position:static!important;transform:none!important;--r:0deg;width:auto;} .nu-res{position:static;display:inline-block;margin-top:12px;} .nu-warn{max-width:none;} } @media(prefers-reduced-motion:reduce){ .nu-scan,.nu-warn .nwc-i{animation:none!important;} .nr-a{stroke-dashoffset:46;animation:none;} .nr-mid{opacity:1;animation:none;} } /* nutrition — decomposition list plashka (items detected on the plate) */ .nu-items{right:0;top:2%;--r:2.5deg;display:flex;flex-direction:column;gap:8px;width:222px;background:var(--surface);border-radius:18px;padding:14px 17px; box-shadow:0 24px 44px -18px rgba(43,41,56,.38),inset 0 0 0 1px var(--outline);} .ni-h{font-size:.84rem;color:var(--ink-muted);font-weight:500;margin-bottom:3px;} .ni-h b{font-family:'Sansation',sans-serif;color:var(--ink);font-weight:700;} .ni{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink); opacity:0;transform:translateX(7px);transition:opacity .4s var(--ease),transform .45s var(--emph);} .ni-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--d);} .ni b{margin-left:auto;font-weight:600;color:var(--ink);font-feature-settings:'tnum';} .ni b::after{content:" ккал";font-size:.68rem;color:var(--ink-faint);font-weight:500;} .mod.in .nu-items .ni{opacity:1;transform:none;} .mod.in .nu-items .ni:nth-child(2){transition-delay:.72s;} .mod.in .nu-items .ni:nth-child(3){transition-delay:.84s;} .mod.in .nu-items .ni:nth-child(4){transition-delay:.96s;} .mod.in .nu-items .ni:nth-child(5){transition-delay:1.08s;} .mod.in .nu-items .ni:nth-child(6){transition-delay:1.2s;} @media(prefers-reduced-motion:reduce){.nu-items .ni{opacity:1!important;transform:none!important;transition:none;}} /* ============================================================ Главный тезис — tuto в центре, сферы по кругу (JS: assets/pitch.js). Сфера серая, пока не её ход; поочерёдно шлёт пакет данных в tuto (глаза следят), tuto реагирует и под мордочкой всплывает короткая плашка. Медленно, по одной. Ничего лишнего. ============================================================ */ .pitch{position:relative;min-height:100svh;display:flex;align-items:center;padding:var(--sec-pad-y) 0;} .pitch-inner{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);} .pitch-copy{flex:1 1 40%;min-width:0;} .pitch-h{font-size:clamp(2rem,4.4vw,3rem);line-height:1.07;} .pitch-h .accent{color:var(--accent);} .pitch-sub{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.5;color:var(--ink-muted);margin-top:1rem;max-width:44ch;} .pitch.in .reveal-up{opacity:1;transform:none;} .pitch.in .p1{transition-delay:.03s;}.pitch.in .p2{transition-delay:.12s;} .pitch-orbit{position:relative;flex:0 0 clamp(320px,52%,560px);aspect-ratio:1;} /* the mascot (canvas rig, tracking eyes) */ .po-mascot{position:absolute;left:0;top:0;z-index:3;filter:drop-shadow(0 14px 22px rgba(43,41,56,.15));will-change:transform;} /* sphere tiles — grey until their turn, then bloom to their colour */ .psph{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;border-radius:16px; background:color-mix(in srgb,var(--ink-faint) 14%,#fff); opacity:0;transform:scale(.5); transition:opacity .55s var(--ease),transform .6s var(--backout),background .45s var(--ease);} .pitch-orbit.go .psph{opacity:1;transform:scale(1);transition-delay:calc(var(--i)*45ms);} .psph .pi{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;} .pitch-orbit.go .psph.on{background:color-mix(in srgb,var(--c) 16%,#fff);transform:scale(1.08);transition-delay:0s;} .psph.on .pi{background:var(--c);} /* the data packet that flies into tuto */ .pkt-layer{position:absolute;inset:0;z-index:2;pointer-events:none;} .pkt{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;will-change:transform,opacity; background:color-mix(in srgb,var(--c) 22%,#fff);box-shadow:0 0 18px 2px color-mix(in srgb,var(--c) 50%,transparent);} .pkt i{width:56%;height:56%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* the persistent plashka under tuto — always on; the message inside is a vertical ticker: the old line slides up and dissolves past the top fade, the new rises in. */ .po-say{position:absolute;left:0;top:0;z-index:4;transform:translateX(-50%);pointer-events:none; width:min(74vw,352px);height:3.4rem;overflow:hidden; background:var(--surface);border-radius:15px;box-shadow:var(--shadow);opacity:0;transition:opacity .5s var(--ease);} .po-say.on{opacity:1;} .say-line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:0 18px;text-align:center;font-size:1.04rem;font-weight:500;color:var(--ink);line-height:1.3; opacity:0;transform:translateY(-34%);transition:opacity .42s var(--ease),transform .5s var(--emph);} .say-line.show{opacity:1;transform:translateY(0);} .say-line.gone{opacity:0;transform:translateY(34%);} @media(max-width:820px){ .pitch-inner{flex-direction:column;gap:1.5rem;text-align:center;} .pitch-copy{flex:none;} .pitch-sub{margin-inline:auto;} .pitch-orbit{flex:none;width:min(94vw,440px);} } /* ============================================================ Slide 3 v9 — модули в ТАБАХ (переиспользуют живые юниты секции 2). Одна секция, переключение кнопками — не 5 скроллящихся экранов. ============================================================ */ .mods{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--sec-pad-y) 0;} .mods-head{text-align:center;max-width:700px;margin-inline:auto;} .mods-head h2{font-size:clamp(1.9rem,6vw,2.6rem);} .mods-head h2 .accent{color:var(--accent);} .mods-sub{font-size:clamp(1rem,2.6vw,1.14rem);color:var(--ink-muted);margin-top:.8rem;max-width:52ch;margin-inline:auto;} .mods.in .reveal-up{opacity:1;transform:none;} .mods.in .m1{transition-delay:.02s;}.mods.in .m2{transition-delay:.12s;} /* tab bar */ .tabbar{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:clamp(1.5rem,3vw,2.2rem) auto 0;} .tab{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit; background:var(--surface-muted);color:var(--ink-muted);font-size:.98rem;font-weight:600;padding:10px 18px;border-radius:100px; transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);} .tab i{width:17px;height:17px;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .tab:hover{background:var(--surface-hover);color:var(--ink);} .tab.active{background:var(--navy);color:#fff;box-shadow:0 12px 26px -12px rgba(43,41,56,.5);} /* panels — one visible at a time, fades in on switch */ .tabpanels{position:relative;margin-top:clamp(1.2rem,2.4vw,1.9rem);} .tabpanel{display:none;} .tabpanel.active{display:block;animation:tabIn .4s var(--ease);} @keyframes tabIn{from{opacity:0;}to{opacity:1;}} /* reuse the section-2 unit engine: give the stage `.how.in` for the animations, but strip the section-2 full-height layout */ .unitstage.how{min-height:0;padding:0;display:block;justify-content:normal;} /* ============================================================ Slide 4 — Ум: почему tuto (bento с кросс-доменными инсайтами) ============================================================ */ .why{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--sec-pad-y) 0;} .why-inner{display:flex;align-items:center;gap:clamp(2rem,6vw,5rem);} .why-copy{flex:1 1 44%;min-width:0;max-width:480px;} .why-copy h2{font-size:clamp(1.9rem,4.4vw,2.7rem);} .why-copy h2 .accent{color:var(--accent);} .why-sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-muted);margin-top:1rem;max-width:40ch;} .why-egs{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.7rem;} .why-eg{display:inline-flex;align-items:center;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--surface);border-radius:100px;padding:8px 15px;box-shadow:var(--shadow-sm);white-space:nowrap;} .why.in .reveal-up{opacity:1;transform:none;} .why.in .w1{transition-delay:.02s;}.why.in .w2{transition-delay:.1s;}.why.in .w3{transition-delay:.16s;} .why.in .w4{transition-delay:.24s;}.why.in .w5{transition-delay:.32s;}.why.in .w6{transition-delay:.4s;} .why-bento{display:grid;grid-template-columns:1.15fr 1fr;grid-auto-rows:1fr;gap:14px;margin-top:clamp(1.6rem,3vw,2.6rem);} .wc{background:var(--surface);border-radius:20px;padding:clamp(20px,2vw,26px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;} .wc-h{font-size:1.16rem;font-weight:700;color:var(--ink);line-height:1.2;} .wc-p{font-size:.98rem;line-height:1.45;color:var(--ink-muted);margin-top:.4rem;} .wc-ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);margin-bottom:14px;} .wc-ic i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .wc--hero{grid-column:1;grid-row:1/4;position:relative;overflow:hidden;} .wc-badge{align-self:flex-start;font-size:.74rem;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);padding:5px 12px;border-radius:100px;} .wc--hero .wc-h{margin-top:14px;font-size:clamp(1.25rem,1.9vw,1.55rem);} .xdom{position:relative;flex:1 1 auto;min-height:150px;margin:16px 0 8px;} .xrow{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(8px);} .why.in .xrow{animation:xrowCyc 11s var(--ease) infinite;} .why.in .xrow:nth-child(2){animation-delay:-3.67s;} .why.in .xrow:nth-child(3){animation-delay:-7.34s;} @keyframes xrowCyc{0%{opacity:0;transform:translateY(8px);}4%{opacity:1;transform:none;}30%{opacity:1;transform:none;}35%{opacity:0;transform:translateY(-8px);}100%{opacity:0;transform:translateY(-8px);}} .xpair{display:flex;align-items:center;} .xsph{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--c) 55%,#000);} .xsph i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .xline{position:relative;width:60px;height:2px;background:var(--outline);overflow:hidden;} .xline::after{content:"";position:absolute;top:0;left:-16px;width:16px;height:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);} .why.in .xline::after{animation:xpulse 1.5s linear infinite;} @keyframes xpulse{to{left:60px;}} .xtext{text-align:center;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.4;color:var(--ink);max-width:26ch;} .xtext b{color:var(--accent);font-weight:700;} @media(max-width:820px){ .why-bento{grid-template-columns:1fr;} .wc--hero{grid-column:1;grid-row:auto;} } /* ============================================================ Slide 5 — Ранний доступ / CTA ============================================================ */ .cta{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sec-pad-y) 0;} .cta-inner{max-width:620px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;} .cta-mascot{width:clamp(96px,12vw,130px);height:auto;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 16px 24px rgba(43,41,56,.16));} .cta.in .cta-mascot{animation:ctaBob 4.2s ease-in-out infinite;} @keyframes ctaBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} .cta h2{font-size:clamp(2rem,6vw,3rem);} .cta h2 .accent{color:var(--accent);} .cta-sub{font-size:clamp(1.04rem,2vw,1.24rem);line-height:1.5;color:var(--ink-muted);margin-top:.9rem;max-width:46ch;} .cta-form{display:flex;gap:10px;margin-top:1.6rem;width:100%;max-width:470px;} .cta-form input{flex:1 1 auto;min-width:0;font-family:inherit;font-size:1rem;padding:14px 18px;border-radius:16px;border:1.5px solid var(--outline);background:var(--surface);color:var(--ink);transition:border-color .2s var(--ease);} .cta-form input::placeholder{color:var(--ink-faint);} .cta-form input:focus-visible{outline:none;border-color:var(--accent);} .cta-form .btn{flex:none;} .cta-ok{margin-top:1.5rem;font-size:1.06rem;font-weight:600;color:var(--sph-health);} .cta .stores-line{margin-top:1.6rem;} .cta.in .reveal-up{opacity:1;transform:none;} .cta.in .g0{transition-delay:0s;}.cta.in .g1{transition-delay:.08s;}.cta.in .g2{transition-delay:.16s;} .cta.in .g3{transition-delay:.24s;}.cta.in .g4{transition-delay:.32s;} @media(max-width:520px){.cta-form{flex-direction:column;}.cta-form .btn{width:100%;}} /* ============================================================ Footer ============================================================ */ .site-footer{background:var(--surface-muted);padding:clamp(2.6rem,5vw,3.6rem) 0 clamp(1.6rem,3vw,2rem);} .footer-inner{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3rem);align-items:flex-start;justify-content:space-between;} .footer-brand{max-width:320px;} .fb-logo{display:inline-flex;align-items:center;gap:8px;font-family:'Sansation',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);} .fb-logo img{width:30px;height:30px;object-fit:contain;} .footer-brand p{margin-top:.7rem;font-size:.95rem;line-height:1.5;color:var(--ink-muted);} .footer-meta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .footer-mail{font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none;transition:color .2s var(--ease);} .footer-mail:hover{color:var(--accent);} .footer-stores{margin:0;justify-content:flex-start;} /* переиспользуем .stores-line, без верхнего отступа */ .footer-bottom{margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.4rem;border-top:1px solid var(--outline);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.86rem;color:var(--ink-faint);} @media(max-width:640px){.footer-inner{flex-direction:column;gap:1.8rem;}} /* header nav links */ .nav-links{display:none;} @media(min-width:880px){.nav-links{display:flex;gap:clamp(1.4rem,2.4vw,2.4rem);}} .nav-links a{font-size:.98rem;font-weight:500;color:var(--ink-muted);text-decoration:none;transition:color .2s var(--ease);} .nav-links a:hover{color:var(--ink);} /* Мини-лента «и ещё десятки сфер» (между табами и Ум) */ .reel{position:relative;padding:var(--sec-pad-y) 0;overflow:hidden;} .reel-head{text-align:center;max-width:640px;margin-inline:auto;} .reel-head h2{font-size:clamp(1.5rem,4vw,2.1rem);} .reel-head h2 .accent{color:var(--accent);} .reel-sub{font-size:clamp(.98rem,2vw,1.1rem);color:var(--ink-muted);margin-top:.6rem;} .reel.in .reveal-up{opacity:1;transform:none;} .reel.in .r1{transition-delay:.02s;}.reel.in .r2{transition-delay:.1s;} .reel .marquee{margin-top:clamp(1.6rem,3.5vw,2.4rem);} /* ============================================================ Slide 3 v10 — богатые табы (как слайды-ценности онбординга): слева крупный связанный обмен запрос→ответ + проактив-инсайт, справа колонка фактов-чипов. Юниты секции-2 переиспользованы. ============================================================ */ .tabscene{--cyc:9s;display:grid;grid-template-columns:1.2fr .92fr;gap:clamp(1.6rem,4vw,3.4rem);max-width:1000px;margin:0 auto;align-items:center;} .ts-main{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);min-width:0;} .ts-main .unit{position:static;transform:none;width:100%;} .ts-x{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} /* bigger request bubbles inside tabs */ .tb-photo{width:clamp(190px,17vw,230px);} .tb-photo img{height:clamp(150px,13vw,180px);} .tb-text{max-width:320px;font-size:1.06rem;padding:15px 19px;} .tb-voice{padding:11px 20px 11px 11px;} .tb-voice .vplay{width:34px;height:34px;} .tb-voice .wave{height:28px;} /* tuto reply — clearly attached under the request (chat pair) */ .ts-reply{display:inline-flex;gap:11px;align-items:flex-start;margin-left:20px;max-width:360px; background:var(--surface);border-radius:6px 17px 17px 17px;padding:12px 16px;box-shadow:0 14px 30px -16px rgba(43,41,56,.3);} .ts-reply .who{width:30px;height:30px;flex:none;border-radius:50%;object-fit:cover;margin-top:1px;} .ts-rbody{display:flex;flex-direction:column;gap:3px;min-width:0;} .ts-rt{font-size:1.04rem;font-weight:600;color:var(--ink);line-height:1.28;} .ts-rt .hot{color:var(--c);font-weight:700;} .ts-rn{font-size:.9rem;color:var(--ink-muted);line-height:1.32;} .ts-rn .hot{color:var(--c);font-weight:700;} .ans-typed.ts-reply{transform:scale(.6) translateY(6px);} .ans-typed.ts-reply.on{transform:none;} /* proactive insight — a touch bigger in tabs */ .ts-main .pro{max-width:none;padding:14px 17px;border-radius:8px 18px 18px 18px;} .ts-main .pro-txt{font-size:.98rem;} /* right column — fact chips */ .ts-side{display:flex;flex-direction:column;gap:11px;min-width:0;} .ts-side-h{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;} .fact{display:flex;align-items:center;gap:13px;background:var(--surface);border-radius:15px;padding:13px 16px;box-shadow:var(--shadow-sm); opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .55s var(--backout);} .how.in .fact{opacity:1;transform:none;} .how.in .ts-side .fact:nth-child(2){transition-delay:.06s;} .how.in .ts-side .fact:nth-child(3){transition-delay:.13s;} .how.in .ts-side .fact:nth-child(4){transition-delay:.2s;} .how.in .ts-side .fact:nth-child(5){transition-delay:.27s;} .fact-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,#fff);} .fact-ic i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .fact-tx{display:flex;flex-direction:column;gap:1px;min-width:0;} .fact-tx b{font-size:1rem;font-weight:700;color:var(--ink);} .fact-tx small{font-size:.82rem;color:var(--ink-muted);} @media(max-width:860px){ .tabscene{grid-template-columns:1fr;gap:1.8rem;max-width:440px;} .ts-reply{max-width:none;} } /* ============================================================ Slide 4 v2 — живой ГРАФ связей (сферы соединены, инсайт «стреляет» по связи). Плоский фон, без белых карточек. ============================================================ */ .mind-stage{position:relative;flex:1 1 56%;min-width:0;max-width:560px;margin:0;height:clamp(360px,38vw,470px);} .mind-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} .ml{stroke:var(--outline);fill:none;vector-effect:non-scaling-stroke;stroke-width:1.4;transition:stroke .5s var(--ease),stroke-width .5s var(--ease);} .ml-dim{stroke:color-mix(in srgb,var(--outline) 48%,transparent);} .why.in .ml-dim{animation:webBreathe 5s var(--ease) infinite;} .why.in .ml-dim:nth-of-type(even){animation-delay:-2.5s;} @keyframes webBreathe{0%,100%{opacity:.45;}50%{opacity:.95;}} .ml.on{stroke:color-mix(in srgb,var(--accent) 52%,var(--outline));stroke-width:2.2;} /* летящий по связи «пакет данных» */ .ml-pkt{stroke:transparent;fill:none;stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke;} /* плавный непрерывный поток данных: два мягких дота едут с ПОСТОЯННОЙ скоростью, dash+gap = pathLength → бесшовный loop (без ease-рывков и без свечения) */ /* одиночный световой импульс: короткий яркий сегмент перетекает от источника ко второй сфере */ .why.in .ml-pkt.run{stroke:var(--accent);stroke-dasharray:11 140;stroke-linecap:round; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)); animation:pktRun 1.5s var(--ease) forwards;} @keyframes pktRun{from{stroke-dashoffset:118;}to{stroke-dashoffset:-100;}} .ms{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2; opacity:0;transition:opacity .55s var(--ease);} .why.in .ms{opacity:1;} .ms.dim{opacity:.4;} .ms-ic{width:clamp(48px,5.2vw,60px);height:clamp(48px,5.2vw,60px);border-radius:17px;display:grid;place-items:center; background:color-mix(in srgb,var(--ink-faint) 12%,#fff);box-shadow:var(--shadow-sm); transition:background .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--backout),opacity .45s var(--ease);} .ms-ic i{width:50%;height:50%;background:var(--ink-faint);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;transition:background .45s var(--ease);} .ms b{font-size:.84rem;font-weight:600;color:var(--ink-faint);transition:color .35s var(--ease);} .ms.on .ms-ic{background:color-mix(in srgb,var(--c) 16%,#fff);transform:scale(1.12);} .ms.on .ms-ic i{background:var(--c);} .ms.on b{color:var(--ink);} /* активная сфера — только tint-подложка + лёгкий scale, без свечения/цветной тени (нейтральный shadow-sm остаётся из базового .ms-ic) */ .mind-say{position:absolute;z-index:4;pointer-events:none;text-align:center;width:-moz-max-content;width:max-content;max-width:min(21vw,196px); transform:translate(-50%,-50%) rotate(var(--ang,0deg));transform-origin:center; opacity:0;transition:opacity .4s var(--ease);} .mind-say.show{opacity:1;} .mind-say p{font-size:clamp(.9rem,1.45vw,1.05rem);line-height:1.26;color:var(--ink);font-weight:700;letter-spacing:-.01em; text-shadow:0 0 5px var(--bg),0 0 5px var(--bg),0 0 10px var(--bg),0 0 10px var(--bg);} .mind-say p b{color:var(--accent);font-weight:800;} .mind-say .ch{opacity:0;transition:opacity .22s var(--ease);} /* подпись проявляется по буквам вместе с импульсом */ .mind-say .ch.in{opacity:1;} .mind-adv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.8rem);max-width:920px;margin:clamp(2.2rem,4vw,3.2rem) auto 0;} .adv{display:flex;flex-direction:column;gap:6px;} .adv-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);margin-bottom:6px;} .adv-ic i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .adv b{font-size:1.1rem;font-weight:700;color:var(--ink);} .adv span{font-size:.95rem;line-height:1.45;color:var(--ink-muted);} @media(max-width:760px){.mind-adv{grid-template-columns:1fr;gap:1.5rem;}.ms b{display:none;}.mind-stage{height:clamp(300px,66vw,360px);}} /* ============================================================ Slide 3 v11 — табы = хаотичный scatter живых мини-функций (стиль удалённой секции «Любой запрос»); 5 функций на сферу, ответы-плашки РЯДОМ с запросом, всегда видимы. Не стек-карточки. ============================================================ */ .field--tab{height:clamp(520px,64vh,660px);max-width:1240px;--cyc:12s;} .field--tab .unit{position:absolute;width:-moz-fit-content;width:fit-content;max-width:420px;display:flex;flex-direction:column;align-items:flex-start;} @media(min-width:761px){ /* у каждой сферы своя раскладка — чтобы табы не читались одинаково */ /* раскладка: столбцы L / C / R, но верхи РАЗНЕСЕНЫ по всей высоте (мелкие юниты pro/voice/text на средних высотах закрывают центр — без пустой «дыры» по середине). У каждой сферы свой рисунок. */ [data-tab='health'] .field--tab .unit:nth-child(1){left:0%;top:5%;transform:rotate(-2.5deg);--d:-2.8s;} [data-tab='health'] .field--tab .unit:nth-child(2){right:2%;top:2%;transform:rotate(2deg);--d:-8.5s;} [data-tab='health'] .field--tab .unit:nth-child(3){left:37%;top:22%;transform:rotate(-1.5deg);--d:-0.8s;} [data-tab='health'] .field--tab .unit:nth-child(4){right:0%;top:50%;transform:rotate(1.5deg);--d:-6.8s;} [data-tab='health'] .field--tab .unit:nth-child(5){left:4%;top:44%;transform:rotate(-1deg);--d:-4.8s;} [data-tab='health'] .field--tab .unit:nth-child(6){left:36%;top:58%;transform:rotate(1.5deg);--d:-10.8s;} [data-tab='finance'] .field--tab .unit:nth-child(1){left:0%;top:4%;transform:rotate(-2deg);--d:-3.2s;} [data-tab='finance'] .field--tab .unit:nth-child(2){left:36%;top:22%;transform:rotate(1.5deg);--d:-7.5s;} [data-tab='finance'] .field--tab .unit:nth-child(3){right:0%;top:3%;transform:rotate(2deg);--d:-1.8s;} [data-tab='finance'] .field--tab .unit:nth-child(4){left:35%;top:54%;transform:rotate(1.5deg);--d:-5.8s;} [data-tab='finance'] .field--tab .unit:nth-child(5){left:3%;top:40%;transform:rotate(-1.5deg);--d:-9.8s;} [data-tab='finance'] .field--tab .unit:nth-child(6){right:1%;top:46%;transform:rotate(-2deg);--d:-4.2s;} [data-tab='tasks'] .field--tab .unit:nth-child(1){left:0%;top:5%;transform:rotate(-2.2deg);--d:-2.4s;} [data-tab='tasks'] .field--tab .unit:nth-child(2){left:36%;top:28%;transform:rotate(2deg);--d:-6.5s;} [data-tab='tasks'] .field--tab .unit:nth-child(3){right:0%;top:4%;transform:rotate(1.5deg);--d:-0.6s;} [data-tab='tasks'] .field--tab .unit:nth-child(4){left:35%;top:56%;transform:rotate(-1deg);--d:-8.8s;} [data-tab='tasks'] .field--tab .unit:nth-child(5){left:3%;top:56%;transform:rotate(-1deg);--d:-5.2s;} [data-tab='tasks'] .field--tab .unit:nth-child(6){right:2%;top:40%;transform:rotate(1.5deg);--d:-10.2s;} [data-tab='notes'] .field--tab .unit:nth-child(1){left:0%;top:4%;transform:rotate(-2.5deg);--d:-3.6s;} [data-tab='notes'] .field--tab .unit:nth-child(2){left:36%;top:26%;transform:rotate(1.5deg);--d:-7.2s;} [data-tab='notes'] .field--tab .unit:nth-child(3){right:0%;top:3%;transform:rotate(2deg);--d:-1.2s;} [data-tab='notes'] .field--tab .unit:nth-child(4){left:0%;top:54%;transform:rotate(1.5deg);--d:-5.6s;} [data-tab='notes'] .field--tab .unit:nth-child(5){right:2%;top:44%;transform:rotate(-1.5deg);--d:-9.2s;} [data-tab='notes'] .field--tab .unit:nth-child(6){left:35%;top:56%;transform:rotate(-2deg);--d:-4.6s;} } /* replies stay put (connected pair), no scan-hide loop inside tabs */ .field--tab .ans:not(.ans-typed){animation:none!important;opacity:1!important;} /* reply flows just below its request inside the unit (deterministic, no overlap) */ .field--tab .ans{position:static;top:auto;right:auto;bottom:auto;left:auto;align-self:flex-end;margin:-18px -8px 0 0;transform:none;z-index:3;} .field--tab .ans-typed{opacity:0;transform:translateY(6px) scale(.92);} .field--tab .ans-typed.on{opacity:1;transform:none;} /* Slide 3 v11 — mobile: scatter → аккуратный вертикальный стек функций */ @media(max-width:760px){ .field--tab{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:30px;max-width:340px;margin:0 auto;padding:6px 0;} .field--tab .unit{position:static!important;transform:none!important;width:100%;display:flex;flex-direction:column;align-items:flex-start;opacity:1;} .field--tab .ans{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;align-self:flex-end!important;margin:-16px -2px 0 0!important;} .field--tab .pro,.field--tab .req-text,.field--tab .req-file,.field--tab .req-photo{max-width:100%;} .field--tab .req-voice{max-width:100%;box-sizing:border-box;} } /* ============================================================ Slide 3 v12 — богатые per-sphere data-viz (как слайды-ценности онбординга): кольца, бары, диаграммы, чек-листы, шкалы анализов. Разные визуалы на сферу — не повтор одинаковых плашек. ============================================================ */ .vcard{background:var(--surface);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-sm);width:clamp(224px,20vw,264px);box-sizing:border-box;} .vcard .v-h{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;} .vcard .v-h .v-sub{margin-left:auto;font-size:.74rem;font-weight:600;color:var(--ink-faint);} .vcard .v-h .v-ic{width:17px;height:17px;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;flex:none;} /* donut ring — app CalorieRing idiom: full track circle + round-cap arc + watercolor edge. SVG viewBox 0..40, r=15.9155 → circumference = 100, so stroke-dashoffset = 100 − percent. */ .ring{--p:60;position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center;} .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;} .ring .rg-t{fill:none;stroke:var(--surface-muted);stroke-width:4.4;} .ring .rg-a{fill:none;stroke:var(--c);stroke-width:4.4;stroke-linecap:round;filter:url(#wcr); stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p));} .ring b{position:relative;z-index:1;font-size:1.02rem;font-weight:800;color:var(--ink);line-height:1;font-feature-settings:'tnum';} .ring small{position:relative;z-index:1;font-size:.58rem;color:var(--ink-faint);margin-top:1px;} .ring--sm{width:44px;height:44px;} .ring--sm .rg-t,.ring--sm .rg-a{stroke-width:5.4;} .ring--sm b{font-size:.74rem;} /* nutrition */ .vcal-top{display:flex;align-items:center;gap:13px;margin-bottom:13px;} .vcal-ph{width:54px;height:54px;border-radius:13px;object-fit:cover;flex:none;} .vcal-tt{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.2;} .vcal-tt small{display:block;font-size:.75rem;font-weight:500;color:var(--ink-muted);margin-top:3px;} .macros{display:flex;flex-direction:column;gap:9px;} .mac{display:flex;align-items:center;gap:10px;} .mac-l{width:12px;font-size:.72rem;font-weight:800;color:var(--c);} .mac-bar{flex:1;height:9px;border-radius:100px;background:var(--surface-muted);overflow:visible;filter:url(#wcb);} .mac-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--c);transition:width .8s var(--ease) .15s;} .mac-v{font-size:.71rem;color:var(--ink-muted);min-width:46px;text-align:right;} /* generic progress bar */ .track{height:11px;border-radius:100px;background:var(--surface-muted);overflow:visible;filter:url(#wcb);} .track i{display:block;height:100%;width:0;border-radius:100px;background:var(--c,#81B52C);transition:width .85s var(--ease) .12s;} .tabpanel.active .mac-bar i,.tabpanel.active .track i,.tabpanel.active .cat-bar i{width:var(--w);} /* steps / workouts */ .vsteps .track{margin-bottom:14px;} .wchips{display:flex;gap:7px;flex-wrap:wrap;} .wchip{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--ink);background:var(--surface-muted);border-radius:10px;padding:6px 10px;} .wchip i{width:13px;height:13px;background:var(--c,#EF7E2C);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* lab ranges */ .lab-row{display:flex;align-items:center;gap:10px;margin-bottom:11px;} .lab-row:last-child{margin-bottom:0;} .lab-n{font-size:.78rem;color:var(--ink);width:82px;} .lab-scale{flex:1;height:7px;position:relative;} /* flat neutral track with a token-green «norma» zone (hard blocks — not a gradient) */ .lab-scale::before{content:"";position:absolute;inset:0;border-radius:100px;filter:url(#wcb); background:linear-gradient(90deg,var(--surface-muted) 0 34%,var(--pos-light) 34% 74%,var(--surface-muted) 74%);} .lab-scale i{position:absolute;top:50%;z-index:1;width:11px;height:11px;border-radius:50%;background:var(--surface);transform:translate(-50%,-50%);box-shadow:0 0 0 2.5px var(--navy);} .lab-v{font-size:.78rem;font-weight:700;min-width:36px;text-align:right;} .lab-v.low{color:var(--accent);}.lab-v.ok{color:var(--sph-health);} /* week bars (sleep) */ .vweek{display:flex;align-items:flex-end;gap:9px;height:66px;} .vweek .wb{flex:1;height:100%;background:var(--surface-muted);border-radius:100px;position:relative;overflow:visible;filter:url(#wcv);} /* flat token fills: хорошие ночи — зелёный, плохие — красный (negative) */ .vweek .wb i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:100px;background:var(--sph-health);} .vweek .wb.bad i{background:var(--sph-meds);} .vweek-x{display:flex;gap:7px;margin-top:7px;} .vweek-x span{flex:1;text-align:center;font-size:.62rem;color:var(--ink-faint);} /* free money */ .vfree-lab{font-size:.86rem;color:var(--ink-muted);} .vfree-big{font-size:1.55rem;font-weight:800;color:var(--ink);line-height:1.1;margin-top:1px;} .vfree-bar{display:flex;height:13px;border-radius:100px;overflow:hidden;margin:13px 0 11px;background:var(--surface-muted);filter:url(#wcb);} .vfree-bar i{height:100%;} .vfree-bar .obl{background:var(--sph-finance);} .vfree-bar .free{background:var(--sph-health);} .vfree-leg{display:flex;flex-direction:column;gap:6px;} .vfree-leg span{display:flex;align-items:center;gap:8px;font-size:.77rem;color:var(--ink-muted);} .vfree-leg b{margin-left:auto;color:var(--ink);font-weight:700;} .vfree-leg em{width:9px;height:9px;border-radius:3px;} /* category spend bars */ .cat{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .cat:last-child{margin-bottom:0;} .cat-n{font-size:.78rem;color:var(--ink);width:84px;} .cat-bar{flex:1;height:10px;border-radius:100px;background:var(--surface-muted);overflow:visible;filter:url(#wcb);} .cat-bar i{display:block;height:100%;width:0;border-radius:100px;background:var(--c,#666EFA);transition:width .85s var(--ease) .12s;} .cat-v{font-size:.74rem;font-weight:700;color:var(--ink-muted);min-width:44px;text-align:right;} .cat-v.up{color:var(--accent);} /* checklist */ .tlist{display:flex;flex-direction:column;gap:9px;} .titem{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--ink);} .titem .cb{width:17px;height:17px;border-radius:6px;border:1.6px solid var(--outline);flex:none;position:relative;} .titem .tag{margin-left:auto;font-size:.64rem;font-weight:700;color:var(--tc);background:color-mix(in srgb,var(--tc) 13%,#fff);border-radius:6px;padding:2px 6px;} .titem.done{color:var(--ink-faint);} .titem.done .cb{background:#81B52C;border-color:#81B52C;} .titem.done .cb::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg);} /* budget / trip */ .vbud{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.78rem;color:var(--ink-muted);} .vbud b{color:var(--ink);font-weight:700;} .vbud .track{flex:1;--c:#81B52C;} .chipline{display:flex;flex-wrap:wrap;gap:6px;} .chipline .cl{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:var(--ink);background:var(--surface-muted);border-radius:9px;padding:5px 9px;} .chipline .cl i{width:12px;height:12px;background:var(--c,#666EFA);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* life-event cascade (branch) */ .casc-h{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:10px;} .casc-h .ce{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);} .casc-h .ce i{width:56%;height:56%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .casc-b{display:flex;flex-direction:column;gap:8px;padding-left:14px;border-left:2px solid var(--outline);} .casc-b span{display:flex;align-items:center;gap:8px;font-size:.79rem;color:var(--ink-muted);position:relative;} .casc-b span::before{content:"";position:absolute;left:-15px;top:50%;width:8px;height:2px;background:var(--outline);} .casc-b span em{width:15px;height:15px;flex:none;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;background:var(--ce,#EF7E2C);font-style:normal;} /* mobile: vcards full-width in the stack */ @media(max-width:760px){.vcard{width:100%;max-width:340px;}} /* ============================================================ Slide 3 v12 polish — постановочная анимация входа (keyframe-based, чтобы играла ЗАНОВО при каждом переключении таба, а не только при въезде секции). Карточки поднимаются → бары растут → недельные бары встают с пола → кольцо заполняется → маркеры «щёлкают» → галочки ставятся. Всё подстать живым юнитам секции. ============================================================ */ @property --pfill{syntax:'';inherits:false;initial-value:0;} /* карточки/плашки поднимаются со стаггером */ .tabpanel .unit>*:not(.ans-typed){will-change:transform,opacity;} .mods.in .tabpanel.active .unit>*:not(.ans-typed){animation:vRise .55s var(--ease) both;} .mods.in .tabpanel.active .unit:nth-child(1)>*{animation-delay:.04s;} .mods.in .tabpanel.active .unit:nth-child(2)>*{animation-delay:.12s;} .mods.in .tabpanel.active .unit:nth-child(3)>*{animation-delay:.2s;} .mods.in .tabpanel.active .unit:nth-child(4)>*{animation-delay:.28s;} .mods.in .tabpanel.active .unit:nth-child(5)>*{animation-delay:.36s;} .mods.in .tabpanel.active .unit:nth-child(6)>*{animation-delay:.44s;} @keyframes vRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} /* бары растут после приземления карточки */ .field--tab .mac-bar i,.field--tab .track i,.field--tab .cat-bar i{width:0;} .mods.in .tabpanel.active .mac-bar i, .mods.in .tabpanel.active .track i, .mods.in .tabpanel.active .cat-bar i{animation:barGrow .9s var(--ease) .45s both;} @keyframes barGrow{from{width:0;}to{width:var(--w);}} /* недельные бары встают с пола, по очереди */ .vweek .wb i{height:0;} .mods.in .tabpanel.active .vweek .wb i{animation:barRise .6s var(--backout) both;} .mods.in .tabpanel.active .vweek .wb:nth-child(1) i{animation-delay:.46s;} .mods.in .tabpanel.active .vweek .wb:nth-child(2) i{animation-delay:.52s;} .mods.in .tabpanel.active .vweek .wb:nth-child(3) i{animation-delay:.58s;} .mods.in .tabpanel.active .vweek .wb:nth-child(4) i{animation-delay:.64s;} .mods.in .tabpanel.active .vweek .wb:nth-child(5) i{animation-delay:.7s;} .mods.in .tabpanel.active .vweek .wb:nth-child(6) i{animation-delay:.76s;} .mods.in .tabpanel.active .vweek .wb:nth-child(7) i{animation-delay:.82s;} @keyframes barRise{from{height:0;}to{height:var(--h);}} /* кольцо прогресса «прорисовывается» — дуга ползёт от 12 часов, round-cap */ .mods.in .tabpanel.active .ring .rg-a{animation:ringFill 1.05s var(--ease) .5s both;} @keyframes ringFill{from{stroke-dashoffset:100;}to{stroke-dashoffset:calc(100 - var(--p));}} /* маркеры анализов «щёлкают» на место */ .lab-scale i{opacity:0;transform:translate(-50%,-50%) scale(.3);} .mods.in .tabpanel.active .lab-scale i{animation:markPop .55s var(--backout) both;} .mods.in .tabpanel.active .lab-row:nth-child(2) .lab-scale i{animation-delay:.5s;} .mods.in .tabpanel.active .lab-row:nth-child(3) .lab-scale i{animation-delay:.62s;} .mods.in .tabpanel.active .lab-row:nth-child(4) .lab-scale i{animation-delay:.74s;} @keyframes markPop{from{opacity:0;transform:translate(-50%,-50%) scale(.3);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}} /* галочки в чек-листе ставятся */ .titem.done .cb::after{transform:rotate(43deg) scale(0);} .mods.in .tabpanel.active .titem.done .cb::after{animation:checkPop .4s var(--backout) .55s both;} .mods.in .tabpanel.active .titem:nth-child(2).done .cb::after{animation-delay:.66s;} @keyframes checkPop{from{transform:rotate(43deg) scale(0);}to{transform:rotate(43deg) scale(1);}} @media(prefers-reduced-motion:reduce){ .mods.in .tabpanel.active .unit>*,.mods.in .tabpanel.active .mac-bar i,.mods.in .tabpanel.active .track i, .mods.in .tabpanel.active .cat-bar i,.mods.in .tabpanel.active .vweek .wb i,.mods.in .tabpanel.active .ring .rg-a, .mods.in .tabpanel.active .lab-scale i, .mods.in .tabpanel.active .titem.done .cb::after{animation:none!important;} .field--tab .mac-bar i,.field--tab .track i,.field--tab .cat-bar i{width:var(--w);} .vweek .wb i{height:var(--h);} .lab-scale i{opacity:1;transform:translate(-50%,-50%) scale(1);} .titem.done .cb::after{transform:rotate(43deg) scale(1);} } /* Slide 3 v12.3 — Копилка: одна диаграмма + прогноз (без дубля) */ .vcard{position:relative;} .vgoal-foot{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-muted);padding-top:12px;border-top:1px solid var(--outline);} .vgoal-foot i{width:15px;height:15px;flex:none;background:var(--ink-faint);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} /* плашки-заметки ассистента на бордерах карточек (хаотичные стикеры) */ .vnote{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;max-width:162px; background:var(--surface);box-shadow:0 13px 28px -10px rgba(43,41,56,.32);border-radius:12px;padding:6px 11px 6px 7px; font-size:.75rem;font-weight:600;color:var(--ink);line-height:1.22;} .vnote .who{width:19px;height:19px;border-radius:50%;flex:none;object-fit:cover;} .vnote--warn{background:color-mix(in srgb,var(--accent) 8%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 13px 28px -10px rgba(43,41,56,.26);} .vnote--warn span{color:var(--accent);} .vnote--tl{bottom:calc(100% - 9px);left:8px;transform:rotate(-3deg);} .vnote--tr{bottom:calc(100% - 9px);right:8px;transform:rotate(3deg);} .vnote--bl{top:calc(100% - 9px);left:8px;transform:rotate(-3deg);} .vnote--br{top:calc(100% - 9px);right:8px;transform:rotate(3deg);} .vnote{transform-origin:bottom left;} .vnote{opacity:0;} .mods.in .tabpanel.active .vnote{animation:notePop .5s var(--backout) .72s both;} @keyframes notePop{from{opacity:0;transform:scale(.4);}to{opacity:1;}} @media(max-width:760px){.vnote{display:none;}} /* trip note — план vs факт (две мини-статистики, без фиктивного %-бара) */ .vtrip-stats{display:flex;gap:26px;margin-top:2px;} .vtrip-stats small{display:block;font-size:.72rem;color:var(--ink-faint);margin-bottom:1px;} .vtrip-stats b{font-size:1rem;font-weight:700;color:var(--ink);} /* mind graph — mobile: компактнее, чтобы плашка не накрывала боковые сферы */ @media(max-width:760px){ .mind-stage{height:clamp(330px,84vw,400px);max-width:360px;} .mind-say{max-width:min(48vw,190px);} .mind-say p{font-size:.82rem;} .ms-ic{width:46px !important;height:46px !important;border-radius:14px;} .ms b{font-size:.72rem;} } /* ============================================================ Slide 5 — Приватность / Безопасность ============================================================ */ .privacy{padding:var(--sec-pad-y) 0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;} /* текст справа, графика слева (чередование ритма с соседними секциями) */ .privacy-inner{display:flex;flex-direction:row-reverse;align-items:center;gap:clamp(2rem,6vw,5rem);} .privacy-copy{flex:1 1 42%;min-width:0;max-width:470px;} .privacy-copy h2{font-size:clamp(1.9rem,4.4vw,2.7rem);} .privacy-copy h2 .accent{color:var(--accent);} .privacy-sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-muted);margin-top:1rem;max-width:40ch;} .privacy.in .reveal-up{opacity:1;transform:none;} .privacy.in .pr1{transition-delay:.02s}.privacy.in .pr2{transition-delay:.1s} /* --- privacy scatter: плашки-«поля» с анимацией действия (как «Каждая сфера») --- */ .privacy-viz{flex:1 1 58%;min-width:0;display:flex;justify-content:center;} .pscatter{position:relative;width:100%;max-width:540px;height:clamp(410px,44vw,480px);} .ps{position:absolute;width:252px;max-width:82%;background:var(--surface);border-radius:16px;padding:12px 13px 13px;box-shadow:0 22px 44px -26px rgba(43,41,56,.36),inset 0 0 0 1px var(--outline);} .ps-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .ps-ic{width:34px;height:34px;flex:none;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,#fff);display:grid;place-items:center;color:var(--accent);font-size:.74rem;font-weight:800;letter-spacing:.01em;} .ps-head b{flex:1;min-width:0;font-size:.92rem;font-weight:700;color:var(--ink);white-space:nowrap;} .ps-ck{width:22px;height:22px;flex:none;border-radius:50%;background:var(--sph-health);position:relative;} .ps-ck::after{content:"";position:absolute;left:8px;top:5px;width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg);} /* поле данных — «сцена» действия */ .pf{position:relative;overflow:hidden;height:38px;border-radius:10px;background:var(--bg);display:flex;align-items:center;padding:0 12px;font-size:.9rem;font-weight:600;letter-spacing:.01em;color:var(--ink);font-feature-settings:'tnum';white-space:nowrap;} /* 1 · Шифрование: телефон затягивается маской слева-направо */ .pf-mask{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;display:flex;align-items:center;padding-left:12px;background:var(--bg);color:var(--accent);letter-spacing:.06em;} .privacy.in .pf-enc .pf-mask{animation:encMask 4.6s var(--ease) infinite;} @keyframes encMask{0%,26%{width:0;}46%,74%{width:100%;}92%,100%{width:0;}} /* 2 · Хранение в РФ: пакет данных «пришвартовывается» к серверу РФ */ .pf-store{justify-content:space-between;} .pf-data{color:var(--ink);} .pf-srv{display:inline-flex;align-items:center;gap:7px;color:var(--ink-muted);} .pf-flag{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent);font-size:.72rem;font-weight:800;} .pf-dock{position:absolute;left:26%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 0 2px var(--bg);opacity:0;} .privacy.in .pf-store .pf-dock{animation:storeDock 3.6s var(--ease) infinite;} @keyframes storeDock{0%{left:26%;opacity:0;}14%{opacity:1;}56%{left:62%;opacity:1;}66%{left:59%;}76%{left:62%;}88%,100%{left:62%;opacity:0;}} /* 3 · Обезличивание: имя → «Пользователь», атрибуты остаются */ .pf-nm-a,.pf-nm-b{position:absolute;left:12px;top:50%;transform:translateY(-50%);} .pf-nm-a{color:var(--ink);} .pf-nm-b{color:var(--ink-muted);opacity:0;} .privacy.in .pf-anon .pf-nm-a{animation:anonOut 4.2s var(--ease) infinite;} .privacy.in .pf-anon .pf-nm-b{animation:anonIn 4.2s var(--ease) infinite;} @keyframes anonOut{0%,28%{opacity:1;}48%,78%{opacity:0;}92%,100%{opacity:1;}} @keyframes anonIn{0%,34%{opacity:0;}52%,74%{opacity:1;}88%,100%{opacity:0;}} /* seal — тёмная «печать» защиты (акцент-щит) */ .ps-seal{position:absolute;display:flex;align-items:center;gap:11px;width:-moz-max-content;width:max-content;max-width:250px;background:var(--navy);border-radius:16px;padding:12px 16px 12px 12px;box-shadow:0 26px 50px -24px rgba(43,41,56,.5);z-index:4;} .ps-shield{width:44px;height:44px;flex:none;border-radius:13px;background:var(--accent);display:grid;place-items:center;} .ps-shield i{width:54%;height:54%;background:var(--on-accent);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .ps-seal-tx{display:flex;flex-direction:column;gap:1px;} .ps-seal-tx b{font-size:.98rem;font-weight:700;color:#fff;white-space:nowrap;} .ps-seal-tx small{font-size:.76rem;color:rgba(255,255,255,.66);white-space:nowrap;} /* scatter positions (3 плашки + печать) */ .ps-seal{left:20%;top:2%;transform:rotate(-3deg);} .ps-2{right:0;top:15%;transform:rotate(-2deg);} .ps-1{left:0;top:41%;transform:rotate(2deg);} .ps-3{right:5%;top:64%;transform:rotate(1.5deg);} /* arrival: плашки всплывают по очереди */ .ps,.ps-seal{opacity:0;} .privacy.in .ps-seal{animation:psIn .5s var(--ease) .14s both;} .privacy.in .ps-2{animation:psIn .5s var(--ease) .26s both;} .privacy.in .ps-1{animation:psIn .5s var(--ease) .38s both;} .privacy.in .ps-3{animation:psIn .5s var(--ease) .5s both;} @keyframes psIn{to{opacity:1;}} /* padlock glyph (иконка ps-1) */ .pg-lock{position:relative;width:16px;height:18px;color:var(--accent);} .pg-lock::before{content:"";position:absolute;bottom:0;left:0;right:0;height:10px;border-radius:3px;background:currentColor;} .pg-lock::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:11px;height:11px;border:2.5px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0;} @media(prefers-reduced-motion:reduce){ .privacy.in .ps,.privacy.in .ps-seal, .privacy.in .pf-enc .pf-mask,.privacy.in .pf-store .pf-dock, .privacy.in .pf-anon .pf-nm-a,.privacy.in .pf-anon .pf-nm-b{animation:none!important;opacity:1;} .pf-mask,.pf-dock,.pf-nm-b{display:none;} .ps-seal{transform:rotate(-3deg);}.ps-1{transform:rotate(2deg);}.ps-2{transform:rotate(-2deg);}.ps-3{transform:rotate(1.5deg);} } @media(max-width:760px){ .pscatter{height:auto;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:360px;} .ps,.ps-seal{position:relative;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%;max-width:330px;opacity:1!important;animation:none!important;} } /* ============================================================ Slide 6 — Удобство / Чат с tuto ============================================================ */ .talk{padding:var(--sec-pad-y) 0;} .talk-inner{display:flex;align-items:center;gap:clamp(2rem,6vw,5rem);} .talk-copy{flex:1;min-width:0;max-width:500px;} .talk-copy h2{font-size:clamp(1.9rem,4.4vw,2.9rem);} .talk-copy h2 .accent{color:var(--accent);} .talk-sub{font-size:clamp(1.05rem,2vw,1.24rem);color:var(--ink-muted);margin-top:1rem;max-width:38ch;} .talk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.9rem;} .tchip{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--ink);background:var(--surface);border-radius:12px;padding:9px 15px;box-shadow:var(--shadow-sm);} .tchip i{width:17px;height:17px;flex:none;background:var(--accent);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;} .talk.in .reveal-up{opacity:1;transform:none;} .talk.in .tk1{transition-delay:.02s}.talk.in .tk2{transition-delay:.09s}.talk.in .tk3{transition-delay:.16s} .talk.in .tk4{transition-delay:.23s}.talk.in .tk5{transition-delay:.3s}.talk.in .tk6{transition-delay:.37s} .talk-chat{flex:1;min-width:0;display:flex;justify-content:center;} .stream{position:relative;width:min(100%,404px);height:clamp(430px,58vh,510px);overflow:hidden; -webkit-mask:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%); mask:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);} .stream-flow{display:flex;flex-direction:column;gap:20px;will-change:transform;} .stream.go .stream-flow{animation:streamUp 30s linear infinite;} @keyframes streamUp{from{transform:translateY(0)}to{transform:translateY(-50%)}} .sx{display:flex;flex-direction:column;gap:8px;} .sx-me{align-self:flex-end;max-width:82%;background:var(--navy);color:#fff;padding:10px 15px;border-radius:17px 17px 5px 17px;font-size:.94rem;line-height:1.32;box-shadow:0 12px 26px -15px rgba(43,41,56,.5);} .sx-tuto{align-self:flex-start;max-width:85%;background:var(--surface);color:var(--ink);padding:10px 15px;border-radius:17px 17px 17px 5px;font-size:.94rem;line-height:1.32;box-shadow:var(--shadow-sm);} .sx-tuto b{color:var(--accent);font-weight:800;} @media(max-width:860px){ .why-inner,.privacy-inner,.talk-inner{flex-direction:column;gap:2.4rem;} .why-copy,.privacy-copy,.talk-copy{max-width:none;text-align:center;} .why-egs,.talk-chips{justify-content:center;} .why-copy h2,.privacy-copy h2,.talk-copy h2{font-size:clamp(1.7rem,7vw,2.3rem);} .mind-stage{flex:none;width:100%;max-width:460px;} .privacy-viz{flex:none;width:100%;} .stream{height:clamp(400px,110vw,470px);} } /* ============================================================ Мобайл: единый ритм секций — средние секции по высоте контента (не форсим 100svh), чтобы «воздушные» визуалы не плавали в пустоте. Правило в КОНЦЕ файла, чтобы победить базовые .pitch/.why{min-height:100svh} по порядку источника. Hero и финальный CTA — полноэкранные «буки-энды». ============================================================ */ @media(max-width:759px){ .pitch,.mods,.why,.privacy,.talk,.cta{min-height:auto;} } /* ============================================================ Разделение секций (мобайл) — ЧИСТАЯ whitespace-версия (SOTA-минимал). Без полос и стека: секции разделяет щедрый ровный воздух + сильные заголовки + уникальные визуалы. Все секции на базовом креме. Ритм просторнее (воздух = разделитель); reel примыкает к «Каждой сфере». ============================================================ */ @media(max-width:759px){ .pitch,.mods,.reel,.why,.privacy,.talk,.cta{--sec-pad-y:clamp(56px,7.5vh,80px);} .reel{padding-top:clamp(20px,4vh,34px);} /* «И ещё десятки сфер» примыкает к модулям */ } /* Мобайл: поджать отступ «заголовок → контент» (был заточен под старую воздушную вёрстку) */ @media(max-width:759px){ .mods-sub,.pitch-sub,.why-sub,.privacy-sub,.talk-sub{margin-top:.55rem;} .why-inner,.privacy-inner,.talk-inner{gap:1rem;} .pitch-inner{gap:.5rem;} .tabbar{margin-top:.9rem;} .talk-chips{margin-top:.9rem;} } /* ============================================================ «Каждая сфера» (мобайл): переключатель + «экран приложения». Табы = канон AppSegmented (трек surfaceMuted, активный = пилюля surface + мягкая тень). Контент табов = одна лёгкая рамка-«экран» (в токенах: bg background + 1px outline + shadow-sm), чтобы читалось как функционал ИЗ приложения, но без лишних разделителей. ============================================================ */ @media(max-width:759px){ .tabbar{flex-wrap:nowrap;gap:3px;padding:4px;margin:.7rem auto 0; background:var(--surface-muted);border-radius:14px;width:100%;max-width:none;box-shadow:none;} .tab{flex:1;justify-content:center;gap:0;padding:9px 4px;border-radius:10px; background:transparent;color:var(--ink-muted);font-size:.9rem;font-weight:600;box-shadow:none;} .tab i{display:none;} /* иконки не влезают в 4 равных сегмента — только лейблы */ .tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);} .tabpanels{margin-top:.7rem;padding:16px 12px; background:var(--bg);border:1px solid var(--outline);border-radius:20px;box-shadow:var(--shadow-sm);} } /* ============================================================ МОБИЛЬНАЯ единая сцена: hero ⇄ «Один помощник» — закреплена (sticky), трансформируется на месте при прокрутке. Показана только <760px; на десктопе — исходные раздельные hero + pitch (app.js + pitch.js). ============================================================ */ @media(min-width:760px){ .hero-scene{display:none!important;} } @media(max-width:759px){ .hero, .pitch, #reveal{display:none!important;} } .hero-scene{position:relative;height:220vh;} .scene-pin{position:sticky;top:0;height:100svh;overflow:hidden;} .scene-inner{display:contents;} .scene-orbit.pitch-orbit{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:min(86vw,380px);aspect-ratio:1;} .scene-orbit .psph{transition:background .45s var(--ease);} /* opacity/scale ведёт JS покадрово (reveal-влёт) */ .scene-orbit .psph.premorph{background:color-mix(in srgb,var(--c) 16%,#fff);} /* первичные цветные в hero → серые на морфе */ .scene-orbit .psph.premorph .pi{background:var(--c);} .scene-state{position:absolute;left:50%;transform:translateX(-50%);width:min(94vw,440px);text-align:center;} .scene-state--a{top:52%;} /* hero-текст под орбитой (орбита сверху) */ .scene-state--b{top:13%;opacity:0;} /* тезис-текст сверху, с воздухом под хедером (орбита опустилась ниже) */ .scene-state h1{font-size:clamp(2.4rem,8vw,4.2rem);} .scene-state .accent{color:var(--accent);} .scene-state--b .pitch-h{font-size:clamp(1.9rem,6vw,2.6rem);} @media(prefers-reduced-motion:reduce){ .hero-scene{height:auto;} .scene-pin{position:static;height:auto;min-height:100svh;display:flex;align-items:center;} .scene-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;padding:0 20px;} .scene-orbit.pitch-orbit{position:relative;left:auto;top:auto;transform:none;} .scene-state{position:relative;left:auto;top:auto;bottom:auto;transform:none;opacity:1;} .scene-state--b{display:none;} .scene-cue{display:none;} } /* ============================================================ #mods — МОБИЛЬНЫЕ правки (только <760px; десктоп не трогаем): компактнее, единый разворот по всем сферам. ============================================================ */ .mods-h--mob{display:none;} .vfree-calc{display:none;} /* калькулятор «Свободных» — только мобилка */ @media(max-width:759px){ .mods-h--desk{display:none;} .mods-h--mob{display:block;} .mods-sub{display:none;} .field--tab{gap:clamp(1rem,4vw,1.35rem);} /* меньше зазор между плашками */ .tabpanels{padding:10px 12px;margin-top:.45rem;} /* меньше воздуха вокруг вкладки — влезть в разворот */ .tabbar{margin-top:.5rem;} .unit--m-hide{display:none!important;} /* сфера-кандидат убрана с мобилки (Сон и т.п.) */ /* БЖУ — компактные чипы в один ряд вместо трёх баров */ .macros{flex-direction:row;gap:8px;} .macros .mac{flex:1;justify-content:center;gap:5px;background:var(--surface-muted);border-radius:12px;padding:7px 4px;} .macros .mac-bar{display:none;} .macros .mac-l{width:auto;} .macros .mac-v{min-width:0;font-weight:600;color:var(--ink);} /* Финансы: «Свободно» = формула приложения (Сейчас + Поступит − Спишется = Свободно) */ .vfree-lab,.vfree-big,.vfree-bar,.vfree-leg{display:none;} .vfree-calc{display:block;} .vfree-lab2{display:block;font-size:.82rem;color:var(--ink-muted);} .vfree-res{display:flex;align-items:center;gap:10px;margin:3px 0 13px;font-size:2rem;font-weight:800;color:var(--ink);line-height:1;} .vfree-form{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--outline);padding-top:11px;} .vfree-form .ff{display:flex;flex-direction:column;gap:2px;} .vfree-form .ff b{font-size:.84rem;font-weight:700;color:var(--ink);white-space:nowrap;} .vfree-form .ff b.pos{color:var(--sph-health);} .vfree-form .ff span{font-size:.66rem;color:var(--ink-muted);} .vfree-chip{font-size:.6rem;font-weight:700;color:var(--sph-health);background:var(--pos-light);border-radius:100px;padding:3px 9px;} /* Задачи: убрать круговой чарт 3/5 сверху «Сегодня» (занимал много места) */ [data-tab='tasks'] .vcheck .v-h .v-sub{display:none;} /* компактнее списки/категории — унификация высоты вкладок */ .tlist{gap:4px;} .cat{margin-bottom:5px;} .vtrip-stats{display:none;} /* Заметки: доп-строка бюджета поездки — под унификацию */ .m-hide{display:none!important;} /* точечное скрытие строк на мобилке (унификация) */ .vfree{padding-bottom:9px;} /* меньше воздуха снизу формулы */ /* «Копилка на отпуск» — компактнее */ .vgoal .ring{width:50px;height:50px;} .vgoal .ring b{font-size:.72rem;} .vgoal .vcal-top{margin-bottom:9px!important;} .vgoal .vgoal-foot{padding-top:9px;} /* ответ tuto появляется ПОСЛЕ обработки (волна/скан) — не мгновенно. Текстовый уже отложен через .on (tabs.js) */ .field--tab .ans:not(.ans-typed){opacity:0!important;transform:translateY(8px) scale(.92)!important;transition:opacity .45s var(--ease),transform .5s var(--backout);animation:none!important;} .mods.in .tabpanel.active .field--tab .ans:not(.ans-typed){opacity:1!important;transform:none!important;transition-delay:1.7s;} /* реордер плашек: голос/текст → на место инсайта, инсайт → ниже (десктоп-scatter на absolute nth-child не трогается) */ [data-tab='health'] .field--tab .unit:nth-child(1), [data-tab='tasks'] .field--tab .unit:nth-child(1), [data-tab='notes'] .field--tab .unit:nth-child(1){order:1;} [data-tab='health'] .field--tab .unit:nth-child(5), [data-tab='tasks'] .field--tab .unit:nth-child(5), [data-tab='notes'] .field--tab .unit:nth-child(5){order:2;} [data-tab='health'] .field--tab .unit:nth-child(3), [data-tab='tasks'] .field--tab .unit:nth-child(3), [data-tab='notes'] .field--tab .unit:nth-child(3){order:3;} [data-tab='health'] .field--tab .unit:nth-child(2), [data-tab='tasks'] .field--tab .unit:nth-child(2), [data-tab='notes'] .field--tab .unit:nth-child(2){order:4;} [data-tab='health'] .field--tab .unit:nth-child(4), [data-tab='tasks'] .field--tab .unit:nth-child(4), [data-tab='notes'] .field--tab .unit:nth-child(4){order:5;} }