/* ============================================================ MOLOKO / OS — molokogroup.ru v2 Venture-grade dev-tool aesthetic. Dark engineered + warm milk. (fonts.css is linked in before this file — no @import, для LCP) ============================================================ */ :root{ --bg:#07080B; --bg-elev:#0C0E14; --surface:#11131C; --surface-glass:rgba(20,23,34,.55); --stroke:#1E2230; --stroke-hi:#2A3042; --text:#F4F6FB; --muted:#8A91A6; --muted-2:#7E8597; --milk:#FBFAF5; --cream:#EDE7D6; --cream-panel:#F4F0E8; --accent:#FF6A2B; --accent-hi:#FF8A4C; --accent-deep:#D8470A; --accent-2:#7C5CFF; --aurora-1:#FF6A2B; --aurora-2:#7C5CFF; --aurora-3:#1B6CF0; --success:#3DDC84; --wireframe:#3A4150; --font-display:'Unbounded',system-ui,sans-serif; --font-body:'Onest','Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --maxw:1240px; --gutter:clamp(20px,5vw,64px); --ease-expo:cubic-bezier(.16,1,.3,1); --ease-ui:cubic-bezier(.22,1,.36,1); --r-lg:26px; --r-md:18px; --r-sm:12px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-body);background:var(--bg);color:var(--text); line-height:1.6;font-weight:400;font-size:clamp(15px,1.05vw,17px); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden;font-variant-numeric:tabular-nums; } body.lenis,html.lenis{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:4px} /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} section{position:relative} .sec{padding-block:clamp(72px,11vw,150px)} .sec + .sec{padding-top:0} /* uniform single gap between consecutive sections */ .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent-hi);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.2rem} .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)} h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.03;letter-spacing:-.02em} .h2{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:700} .lede{color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:54ch;line-height:1.55} .sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)} /* ---------- mono data label ---------- */ .mono{font-family:var(--font-mono);font-feature-settings:"liga" 0} .dlabel{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums} /* ---------- buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;cursor:pointer;border:0; padding:1.05em 1.7em;border-radius:14px;transition:transform .5s var(--ease-expo),box-shadow .5s var(--ease-expo),background .3s; white-space:nowrap} .btn.magnetic{will-change:transform} .btn .lbl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.5em} .btn-primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#1a0a02; box-shadow:0 10px 30px -8px rgba(255,106,43,.55),inset 0 1px 0 rgba(255,255,255,.25)} .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(120px 80px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 60%); opacity:0;transition:opacity .35s;z-index:1} .btn-primary:hover{box-shadow:0 18px 48px -10px rgba(255,106,43,.7),inset 0 1px 0 rgba(255,255,255,.3)} .btn-primary:hover::after{opacity:1} .btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--stroke-hi); backdrop-filter:blur(8px)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-hi);background:rgba(255,106,43,.06)} .btn-lg{padding:1.2em 2.1em;font-size:1.08rem} .arrow{transition:transform .4s var(--ease-expo)} .btn:hover .arrow,a.lnk:hover .arrow{transform:translateX(4px)} .lnk{color:var(--accent-hi);font-weight:600;display:inline-flex;align-items:center;gap:.4em} .lnk:hover{color:var(--accent)} /* ---------- aurora + grid bg ---------- */ .aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen; animation:drift 22s ease-in-out infinite} .aurora .a1{width:48vw;height:48vw;background:var(--aurora-1);top:-15vw;right:-6vw;animation-delay:-2s;opacity:.34} .aurora .a2{width:42vw;height:42vw;background:var(--aurora-2);bottom:-18vw;left:-8vw;animation-delay:-9s;opacity:.3} .aurora .a3{width:34vw;height:34vw;background:var(--aurora-3);top:30%;left:40%;animation-delay:-14s;opacity:.22} @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vw) scale(1.1)}66%{transform:translate(-3vw,2vw) scale(.95)}} .gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image:linear-gradient(var(--stroke) 1px,transparent 1px),linear-gradient(90deg,var(--stroke) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%); -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%)} /* ============================================================ NAVBAR */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:all .5s var(--ease-expo)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px; max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .nav.scrolled{backdrop-filter:blur(16px);background:rgba(7,8,11,.72);border-bottom:1px solid var(--stroke)} .logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em;display:flex;align-items:center} .logo b{color:var(--text)} .logo .sl{color:var(--accent);margin-left:.04em} .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--milk);margin-left:.5em; box-shadow:0 0 14px 2px rgba(251,250,245,.7);animation:pulseDot 2.6s ease-in-out infinite} @keyframes pulseDot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.5}} .nav-links{display:flex;align-items:center;gap:2rem} .nav-links a{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .3s;position:relative} .nav-links a:hover{color:var(--text)} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--accent);transition:width .35s var(--ease-expo)} .nav-links a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:1rem} .nav-cta .tg{color:var(--muted);font-family:var(--font-mono);font-size:.85rem} .nav-cta .tg:hover{color:var(--accent-hi)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .burger span{width:24px;height:2px;background:var(--text);transition:.3s} .mnav{position:fixed;inset:0;z-index:80;background:rgba(7,8,11,.97);backdrop-filter:blur(10px); display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:var(--gutter); transform:translateY(-100%);transition:transform .55s var(--ease-expo);visibility:hidden} .mnav.open{transform:translateY(0);visibility:visible} .mnav a{font-family:var(--font-display);font-size:1.8rem;color:var(--text)} .mnav .btn{margin-top:1rem} /* ============================================================ HERO */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:60px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;width:100%} .hero-badge{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-size:.76rem; letter-spacing:.04em;color:var(--muted);background:var(--surface-glass);border:1px solid var(--stroke); padding:.5em 1em;border-radius:100px;margin-bottom:1.6rem;backdrop-filter:blur(8px)} .hero-badge .pip{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success)} .hero h1{font-size:clamp(2.5rem,6.4vw,5.3rem);font-weight:800;margin-bottom:1.5rem} .hero h1 .word{display:inline-block} /* cinematic word reveal (gated by html.js so no-JS shows text immediately) */ html.js .hero h1 .word{clip-path:inset(0 0 -15% 0);transform:translateY(.5em);opacity:0; transition:transform .7s var(--ease-expo),opacity .7s var(--ease-expo)} html.js .hero h1.ready .word{transform:none;opacity:1} .hero h1.ready .word:nth-child(1){transition-delay:.05s} .hero h1.ready .word:nth-child(2){transition-delay:.11s} .hero h1.ready .word:nth-child(3){transition-delay:.17s} .hero h1.ready .word:nth-child(4){transition-delay:.26s} .hero h1.ready .word:nth-child(5){transition-delay:.32s} .hero h1.ready .word:nth-child(6){transition-delay:.38s} .hero h1.ready .word:nth-child(7){transition-delay:.44s} .hero h1.ready .word:nth-child(8){transition-delay:.50s} .hero h1 .accent{color:var(--accent);position:relative} .hero h1 .struck{position:relative;color:var(--muted);white-space:nowrap} .hero h1 .struck::after{content:"";position:absolute;left:-.02em;right:-.02em;top:52%;height:.045em;border-radius:2px; background:var(--accent);transform:scaleX(0);transform-origin:left;box-shadow:0 0 7px rgba(255,106,43,.5)} .hero h1 .struck.lined::after{transform:scaleX(1);transition:transform .8s .5s var(--ease-expo)} .hero-sub{color:var(--muted);font-size:clamp(1.05rem,1.55vw,1.28rem);max-width:42ch;margin-bottom:2.2rem;line-height:1.55} .hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.4rem} .telemetry{display:flex;align-items:center;gap:1.4rem;font-family:var(--font-mono);font-size:.92rem;color:var(--muted);flex-wrap:wrap} .telemetry b{color:var(--text);font-weight:700} .telemetry .sep{color:var(--stroke-hi)} /* hero canvas stage */ .stage{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden; background:radial-gradient(120% 120% at 70% 20%,#0e1019,#070809);border:1px solid var(--stroke); box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)} .stage canvas{position:absolute;inset:0;width:100%;height:100%} .stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(240px 240px at var(--sx,50%) var(--sy,50%),rgba(255,138,76,.18),transparent 68%);mix-blend-mode:screen} .stage.lit::before{opacity:1} .stage .hud{position:absolute;left:14px;top:14px;z-index:3;font-family:var(--font-mono);font-size:.72rem; color:var(--muted);background:rgba(7,8,11,.5);border:1px solid var(--stroke);border-radius:8px; padding:.5em .8em;backdrop-filter:blur(6px);letter-spacing:.02em} .stage .hud .ok{color:var(--success)} .stage .hud .pct{color:var(--accent-hi)} .stage .badge-live{position:absolute;right:14px;top:14px;z-index:3;font-family:var(--font-mono);font-size:.68rem; color:var(--accent-hi);display:flex;align-items:center;gap:.5em;background:rgba(255,106,43,.08); border:1px solid rgba(255,106,43,.3);border-radius:100px;padding:.4em .8em} .stage .badge-live .rec{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulseDot 1.6s infinite} .scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column; align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.68rem;color:var(--muted-2);letter-spacing:.2em} .scroll-hint .m{width:22px;height:34px;border:1px solid var(--stroke-hi);border-radius:12px;position:relative} .scroll-hint .m::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px; background:var(--accent);transform:translateX(-50%);animation:wheel 1.8s infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} /* ============================================================ TRUST BAR */ .trust{border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:var(--bg-elev)} .trust-inner{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;align-items:center} .trust-cell{padding:clamp(28px,4vw,52px) clamp(16px,2.5vw,36px);border-left:1px solid var(--stroke);position:relative} .trust-cell:first-child{border-left:0} .trust-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:-.03em} .trust-num .suf{color:var(--accent)} .trust-cell .dlabel{margin-top:.6rem;display:block} .trust-cell.note{display:flex;flex-direction:column;justify-content:center} .trust-cell.note p{color:var(--muted);font-size:1rem;line-height:1.5} .trust-cell.note b{color:var(--text);font-family:var(--font-display);font-weight:600} /* niche ticker */ .ticker{overflow:hidden;border-top:1px solid var(--stroke);background:var(--bg);padding-block:14px; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker-row{display:flex;width:max-content;animation:ticker 40s linear infinite} .ticker:hover .ticker-row{animation-play-state:paused} .ticker span{font-family:var(--font-mono);font-size:.8rem;color:var(--muted-2);white-space:nowrap;padding-inline:1.1rem;display:inline-flex;align-items:center;gap:1.1rem} .ticker span::after{content:"•";color:var(--accent);opacity:.55} @keyframes ticker{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker-row{animation:none}} /* ============================================================ HOW / DIFFERENTIATOR */ .how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start} .compare{margin-top:2rem;display:flex;flex-direction:column;gap:1.4rem} .cbar{} .cbar .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55rem} .cbar .who{font-weight:600;font-size:.98rem} .cbar .val{font-family:var(--font-mono);font-size:.85rem;color:var(--muted)} .cbar .track{height:12px;border-radius:100px;background:var(--surface);border:1px solid var(--stroke);overflow:hidden;position:relative} .cbar .fill{height:100%;width:0;border-radius:100px;transition:width 1.3s var(--ease-expo)} .cbar.slow .fill{background:linear-gradient(90deg,#3a3f52,#525873)} .cbar.fast .fill{background:linear-gradient(90deg,var(--accent),var(--accent-hi));box-shadow:0 0 18px rgba(255,106,43,.5)} .cbar .val b{color:var(--text)} .tools{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .chip{display:flex;align-items:center;gap:.7em;padding:.95em 1.1em;border-radius:var(--r-sm); background:var(--surface-glass);border:1px solid var(--stroke);backdrop-filter:blur(8px);position:relative;overflow:hidden; transition:border-color .3s,transform .4s var(--ease-expo)} .chip:hover{transform:translateY(-3px);border-color:var(--stroke-hi)} .chip .ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center; background:rgba(255,106,43,.1);color:var(--accent-hi);font-family:var(--font-mono);font-size:.8rem;font-weight:700} .chip .nm{font-weight:600;font-size:.92rem} .chip .sub{font-family:var(--font-mono);font-size:.68rem;color:var(--muted-2)} .pipeline-mini{margin-top:1.4rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; font-family:var(--font-mono);font-size:.78rem;color:var(--muted)} .pipeline-mini .step{padding:.5em .8em;border:1px dashed var(--stroke-hi);border-radius:8px;color:var(--text)} .pipeline-mini .human{border-style:solid;border-color:var(--cream);color:var(--cream);background:rgba(237,231,214,.05)} .pipeline-mini .ar{color:var(--accent)} /* ============================================================ SERVICES */ .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)} .card{position:relative;border-radius:var(--r-md);background:var(--surface-glass);border:1px solid var(--stroke); padding:clamp(24px,3vw,38px);backdrop-filter:blur(10px);overflow:hidden; transition:transform .5s var(--ease-expo),border-color .4s,box-shadow .5s var(--ease-expo); transform-style:preserve-3d} .card:hover{border-color:var(--stroke-hi);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)} .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.3rem; border:1px solid var(--stroke-hi);background:rgba(255,255,255,.02);color:var(--accent-hi)} .card h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin-bottom:.5rem;letter-spacing:-.01em} .card .price{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:1rem;letter-spacing:-.02em} .card .price .cur{color:var(--accent);font-size:.7em} .card .price.soft{color:var(--muted);font-size:1.1rem;font-weight:600;font-family:var(--font-body)} .card ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem} .card li{display:flex;gap:.6em;color:var(--muted);font-size:.95rem;line-height:1.45} .card li::before{content:"";width:16px;height:16px;flex:0 0 16px;margin-top:.2em;border-radius:50%; background:radial-gradient(circle at 50% 50%,var(--accent) 0 32%,transparent 36%);border:1px solid var(--stroke-hi)} .card .card-cta{margin-top:auto} .card.featured{border-color:transparent} .card.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:conic-gradient(from var(--ang,0deg),transparent,var(--accent),var(--accent-2),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite} @property --ang{syntax:'';inherits:false;initial-value:0deg} @keyframes spin{to{--ang:360deg}} .card.featured .tag{position:absolute;top:18px;right:18px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em; color:var(--accent-hi);border:1px solid rgba(255,106,43,.35);border-radius:100px;padding:.3em .7em;text-transform:uppercase} /* ============================================================ FLAGSHIP video */ .flagship{position:relative;border-radius:clamp(20px,3vw,32px);overflow:hidden;border:1px solid var(--stroke); background:linear-gradient(120deg,#0a0b10,#13101a 60%,#1a0f0a);padding:clamp(32px,5vw,68px)} .flag-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative;z-index:2} .flag-num{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,8vw,6.5rem);line-height:.9;letter-spacing:-.03em} .flag-num .u{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--accent-hi); text-transform:uppercase;margin-top:.6rem;font-weight:400} .filmstrip{display:flex;flex-direction:column;gap:10px;overflow:hidden;height:100%;min-height:220px; -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)} .filmrow{display:flex;gap:10px;will-change:transform} .frame{flex:0 0 auto;width:120px;height:68px;border-radius:8px;border:1px solid var(--stroke-hi); background:linear-gradient(135deg,var(--surface),#1a1d29);position:relative;overflow:hidden} .frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,106,43,.25),transparent 60%)} .frame.alt::after{background:radial-gradient(circle at 70% 60%,rgba(124,92,255,.28),transparent 60%)} /* ============================================================ PROCESS timeline */ .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:1rem} .tl-track{position:absolute;top:22px;left:6%;right:6%;height:2px;background:var(--stroke)} .tl-prog{position:absolute;top:22px;left:6%;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hi)); box-shadow:0 0 14px var(--accent);border-radius:2px} .tstep{position:relative;padding-top:54px} .tstep .node{position:absolute;top:11px;left:0;width:24px;height:24px;border-radius:50%;background:var(--bg-elev); border:2px solid var(--stroke-hi);display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;color:var(--muted); transition:.5s var(--ease-expo);z-index:2} .tstep.active .node{border-color:var(--accent);color:var(--accent-hi);background:#1a0f08;box-shadow:0 0 0 6px rgba(255,106,43,.12),0 0 18px rgba(255,106,43,.5)} .tstep h3{font-family:var(--font-display);font-weight:600;font-size:1.18rem;margin-bottom:.4rem} .tstep p{color:var(--muted);font-size:.92rem;line-height:1.5} .tstep .when{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-hi);margin-top:.6rem;display:inline-block} .tstep .free{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--success); border:1px solid rgba(61,220,132,.3);border-radius:100px;padding:.25em .6em;margin-left:.5em} /* ============================================================ CASES */ .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)} .case{border-radius:var(--r-md);background:var(--surface-glass);border:1px solid var(--stroke);padding:clamp(22px,2.6vw,34px); backdrop-filter:blur(10px);transition:transform .5s var(--ease-expo),border-color .4s;overflow:hidden;position:relative} .case:hover{transform:translateY(-5px);border-color:var(--stroke-hi)} .case .niche{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem} .case .metric{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:.95;letter-spacing:-.03em; display:flex;align-items:baseline;gap:.1em} .case .metric .s{color:var(--accent);font-size:.55em} .case .what{color:var(--muted);font-size:.95rem;line-height:1.5;margin-top:1rem} .case .spark{height:40px;margin-top:1.2rem;display:flex;align-items:flex-end;gap:4px} .case .spark i{flex:1;background:linear-gradient(180deg,var(--accent-hi),rgba(255,106,43,.15));border-radius:3px 3px 0 0; height:var(--h,30%);transform-origin:bottom;transform:scaleY(0);transition:transform .6s var(--ease-expo)} .case.in .spark i{transform:scaleY(1)} /* ============================================================ AUDIT panel */ .audit{position:relative;border-radius:clamp(22px,3vw,34px);overflow:hidden; background:linear-gradient(135deg,var(--cream-panel),#fff 70%);color:#16110a; padding:clamp(34px,5vw,70px);box-shadow:0 50px 120px -50px rgba(255,106,43,.5)} .audit::before{content:"";position:absolute;width:50vw;height:50vw;right:-15vw;top:-20vw;border-radius:50%; background:radial-gradient(circle,rgba(255,106,43,.18),transparent 65%)} .audit-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,52px);align-items:center;position:relative;z-index:2} .audit .eyebrow{color:var(--accent-deep)} .audit h2{font-size:clamp(1.9rem,4vw,3.2rem);color:#120d07} .audit p{color:#4a4034;font-size:1.08rem;margin:1.2rem 0 1.8rem;max-width:46ch} .audit ul{list-style:none;display:flex;flex-direction:column;gap:.8rem} .audit li{display:flex;gap:.6em;align-items:flex-start;color:#2a241b;font-weight:500} .audit li svg{flex:0 0 22px;margin-top:1px;color:var(--accent-deep)} .audit .btn-primary{box-shadow:0 14px 36px -10px rgba(216,71,10,.55)} .audit-card{background:#fff;border-radius:var(--r-md);padding:clamp(22px,3vw,32px);border:1px solid #efe6d6; box-shadow:0 30px 60px -30px rgba(120,80,30,.3)} .audit-card .line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid #f0e9dc;font-size:.95rem} .audit-card .line:last-child{border-bottom:0} .audit-card .line span:first-child{color:#6a5e4c;min-width:0} .audit-card .line b{font-family:var(--font-display);font-weight:700;color:#16110a;white-space:nowrap;flex:0 0 auto;text-align:right} .audit-card .head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#a08b6c;margin-bottom:.6rem} /* ============================================================ FAQ */ .faq-list{max-width:780px;margin-inline:auto;border-top:1px solid var(--stroke)} .faq-item{border-bottom:1px solid var(--stroke)} .faq-q{display:flex;align-items:flex-start;gap:.9rem;width:100%;background:none;border:0;cursor:pointer; padding:1.4rem .4rem;text-align:left;color:var(--text);font-family:var(--font-body);font-weight:600;line-height:1.35; font-size:clamp(1rem,1.4vw,1.16rem);text-wrap:balance} .faq-q .n{font-family:var(--font-mono);font-size:.8rem;color:var(--accent-hi);flex:0 0 auto;margin-top:.18em} .faq-q .ico{margin-left:auto;flex:0 0 auto;width:22px;height:22px;position:relative;margin-top:.1em;transition:transform .4s var(--ease-expo)} .faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:var(--accent);border-radius:2px; top:50%;left:50%;transform:translate(-50%,-50%)} .faq-q .ico::before{width:14px;height:2px}.faq-q .ico::after{width:2px;height:14px;transition:transform .4s var(--ease-expo)} .faq-item.open .faq-q .ico::after{transform:translate(-50%,-50%) scaleY(0)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-expo)} .faq-item.open .faq-a{grid-template-rows:1fr} .faq-a .inner{overflow:hidden;color:var(--muted);line-height:1.6;padding:0 .4rem} .faq-item.open .faq-a .inner{padding-bottom:1.4rem} /* ============================================================ FINAL CTA + FOOTER */ .final{text-align:center;position:relative;overflow:hidden} .final h2{font-size:clamp(2.4rem,7vw,6rem);font-weight:800;line-height:1;margin-bottom:1.4rem} .final h2 .accent{color:var(--accent)} .final p{color:var(--muted);font-size:1.15rem;max-width:50ch;margin:0 auto 2.2rem} .final .hero-cta{justify-content:center} .footer{border-top:1px solid var(--stroke);background:var(--bg-elev);padding-block:clamp(46px,6vw,72px) 32px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);margin-bottom:3rem} .foot-grid h3{font-family:var(--font-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.2rem} .foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:.8rem} .foot-grid a,.foot-grid li{color:var(--muted);font-size:.95rem;transition:color .3s} .foot-grid a:hover{color:var(--accent-hi)} .foot-about p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:1rem 0;max-width:34ch} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding-top:24px;border-top:1px solid var(--stroke);font-size:.84rem;color:var(--muted-2);font-family:var(--font-mono)} /* ============================================================ QUIZ MODAL */ .modal-root{position:fixed;inset:0;z-index:200;display:none} .modal-root.open{display:block} .modal-bg{position:absolute;inset:0;background:rgba(4,5,8,.78);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s} .modal-root.open .modal-bg{opacity:1} .modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);opacity:0; width:min(560px,92vw);max-height:90svh;overflow-y:auto;background:var(--surface);border:1px solid var(--stroke-hi); border-radius:var(--r-md);padding:clamp(22px,3vw,34px);transition:transform .45s var(--ease-expo),opacity .35s} .modal-root.open .modal{transform:translate(-50%,-50%) scale(1);opacity:1} .modal .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04); border:1px solid var(--stroke);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.3s} .modal .x:hover{color:var(--text);border-color:var(--stroke-hi)} .modal h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin-bottom:.4rem} .modal .msub{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem} .qbar{height:4px;border-radius:100px;background:var(--surface-glass);border:1px solid var(--stroke);overflow:hidden;margin-bottom:1.6rem} .qbar i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transition:width .5s var(--ease-expo)} .qstep{display:none;animation:fadeIn .4s var(--ease-ui)} .qstep.on{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .qstep h4{font-weight:600;font-size:1.05rem;margin-bottom:1rem} .opts{display:grid;gap:10px} .opts.two{grid-template-columns:1fr 1fr} .opt{cursor:pointer;border:1px solid var(--stroke);border-radius:12px;padding:.95em 1.1em;transition:.3s;background:rgba(255,255,255,.015)} .opt:hover{border-color:var(--stroke-hi)} .opt.sel{border-color:var(--accent);background:rgba(255,106,43,.08)} .opt .ot{font-weight:600;font-size:.98rem} .opt .od{color:var(--muted);font-size:.82rem;margin-top:.2em} .modal input,.modal select{width:100%;padding:.9em 1em;border-radius:12px;background:var(--bg-elev);border:1px solid var(--stroke); color:var(--text);font-family:var(--font-body);font-size:1rem;margin-bottom:.9rem} .modal input:focus,.modal select:focus{outline:none;border-color:var(--accent)} .modal label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem} .qnav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem} .qresult{text-align:center;padding:1rem 0} .qresult .big{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,6vw,3rem);color:var(--accent);margin:.6rem 0} .legal{font-size:.72rem;color:var(--muted-2);text-align:center;margin-top:1rem} .legal a{color:var(--muted);text-decoration:underline} /* ============================================================ REVEAL Hidden only when JS is active (html.js) — без JS контент виден. */ html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)} html.js [data-reveal].in{opacity:1;transform:none} html.js [data-reveal-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo)} html.js [data-reveal-stagger].in>*{opacity:1;transform:none} /* ============================================================ RESPONSIVE */ @media (max-width:1080px){ .hero{min-height:auto;padding-top:108px;padding-bottom:48px} .scroll-hint{display:none} .hero-grid{grid-template-columns:1fr;gap:32px} .stage{max-width:520px;margin-inline:auto;width:100%} .stage .hud{font-size:.64rem;max-width:62%} .stage .badge-live{font-size:.62rem} .how-grid{grid-template-columns:1fr} .flag-grid{grid-template-columns:1fr;gap:32px} .audit-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:820px){ .nav-links,.nav-cta{display:none} .nav-inner{height:64px} .burger{display:flex} .trust-inner{grid-template-columns:1fr 1fr} .trust-cell.note{grid-column:1/-1;border-left:0;border-top:1px solid var(--stroke)} .trust-cell:nth-child(3){border-left:0} .cards{grid-template-columns:1fr} .case-grid{grid-template-columns:1fr} .timeline{grid-template-columns:1fr;gap:0} .tl-track,.tl-prog{display:none} .tstep{padding:1.4rem 0 1.4rem 44px;border-left:2px solid var(--stroke)} .tstep .node{top:1.4rem;left:-13px} .opts.two{grid-template-columns:1fr} } @media (max-width:520px){ .tools{grid-template-columns:1fr} .chip .nm{overflow-wrap:anywhere} .trust-inner{grid-template-columns:1fr 1fr} .trust-num{font-size:clamp(2.2rem,12vw,3rem)} .trust-cell{border-left:0;border-top:1px solid var(--stroke)} .trust-cell:nth-child(odd){border-left:0} .trust-cell:nth-child(even){border-left:1px solid var(--stroke)} .trust-cell:first-child,.trust-cell:nth-child(2){border-top:0} .trust-cell.note{grid-column:1/-1;border-left:0} .foot-grid{grid-template-columns:1fr 1fr} .foot-about{grid-column:1/-1} .hero-cta .btn{width:100%} } /* ============================================================ REDUCED MOTION */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .aurora i{animation:none} [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important} .hero h1 .struck::after{transform:scaleX(1)} } /* --- ФИКС: финальный CTA центрируем по вертикали на ВСЕХ страницах. Правило `.sec + .sec{padding-top:0}` обнуляло верхний паддинг финальной секции, низ оставался полным → контент прилипал к верху. --- */ .sec.final{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:clamp(64px,9vw,116px); } /* ============================================================ SX-секции (портфолио, без риска, сравнение, sticky, форма) — 24.06 ============================================================ */ /* === sx-portfolio === */ .sx-portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(32px,4vw,52px); } .sx-case{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--stroke); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .4s var(--ease-expo),transform .4s var(--ease-expo),box-shadow .4s var(--ease-expo); will-change:transform; } .sx-case:hover,.sx-case:focus-visible{ border-color:var(--stroke-hi); transform:translateY(-4px); box-shadow:0 18px 50px -24px rgba(0,0,0,.7); outline:none; } .sx-case-shot{ position:relative; display:block; aspect-ratio:16/10; background:var(--bg-elev); overflow:hidden; } .sx-case-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s var(--ease-expo); } .sx-case:hover .sx-case-shot img{transform:scale(1.04);} .sx-case-body{ display:flex; flex-direction:column; gap:10px; padding:clamp(18px,2vw,24px); flex:1 1 auto; } .sx-case-niche{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .sx-case-niche i{ width:6px;height:6px;border-radius:50%; background:var(--accent); flex:0 0 auto; } .sx-case-name{ font-family:var(--font-display); font-size:clamp(18px,2vw,21px); line-height:1.15; color:var(--text); } .sx-case-desc{ font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--muted-2); flex:1 1 auto; } .sx-case-link{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--cream); transition:color .3s var(--ease-expo),gap .3s var(--ease-expo); } .sx-case-link b{ font-weight:400; color:var(--accent); transition:transform .3s var(--ease-expo); } .sx-case:hover .sx-case-link{color:var(--accent-hi);gap:9px;} .sx-case:hover .sx-case-link b{transform:translate(2px,-2px);} @media(max-width:1080px){ .sx-portfolio-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:520px){ .sx-portfolio-grid{grid-template-columns:1fr;} } /* ===== РАБОТАЕМ БЕЗ РИСКА ===== */ .sx-risk{padding-block:clamp(40px,7vw,72px)} .sx-risk-head{margin-bottom:clamp(22px,3vw,34px)} .sx-risk-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,3.4vw,30px); line-height:1.12; letter-spacing:-.01em; color:var(--text); margin:14px 0 0; } .sx-risk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,14px); } .sx-risk-item{ display:flex; align-items:center; gap:12px; min-height:62px; padding:16px 18px; border:1px solid var(--stroke); border-radius:var(--r-md); background:var(--surface-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color .35s var(--ease-expo),transform .35s var(--ease-expo); } .sx-risk-item:hover{ border-color:var(--stroke-hi); transform:translateY(-2px); } .sx-risk-ic{ flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(61,220,132,.12); color:var(--success); } .sx-risk-ic svg{width:16px;height:16px;display:block} .sx-risk-txt{ font-family:var(--font-body); font-size:clamp(13px,1.05vw,15px); line-height:1.32; color:var(--cream); } @media(max-width:820px){ .sx-risk-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .sx-risk-grid{grid-template-columns:1fr} .sx-risk-item{min-height:0} } /* ===== /РАБОТАЕМ БЕЗ РИСКА ===== */ /* ===== ОТСТРОЙКА — таблица сравнения (sx-vs) ===== */ .sx-vs{margin-top:clamp(28px,4vw,48px)} .sx-vs-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--stroke); border-radius:var(--r-lg); background:var(--bg-elev); } .sx-vs-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sx-vs-table{ width:100%; min-width:760px; border-collapse:collapse; font-family:var(--font-body); color:var(--text); } .sx-vs-table th, .sx-vs-table td{ padding:18px clamp(14px,1.4vw,20px); text-align:left; vertical-align:middle; border-bottom:1px solid var(--stroke); } .sx-vs-table tbody tr:last-child th, .sx-vs-table tbody tr:last-child td{border-bottom:none} /* шапка */ .sx-vs-table thead th{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--stroke-hi); background:var(--surface); white-space:nowrap; } .sx-vs-cap{color:var(--muted-2)} /* первая колонка — лейблы строк, закреплена слева */ .sx-vs-rowhead{ position:sticky; left:0; z-index:2; background:var(--surface); min-width:200px; font-weight:600; color:var(--cream); border-right:1px solid var(--stroke); } .sx-vs-table thead .sx-vs-rowhead{background:var(--surface);z-index:3} /* колонка молоко/ — акцент */ .sx-vs-us{position:relative} .sx-vs-table tbody td.sx-vs-us{ background:rgba(255,106,43,.07); } .sx-vs-table thead th.sx-vs-us{ background:rgba(255,106,43,.12); color:var(--text); border-bottom-color:var(--accent-deep); } .sx-vs-table thead th.sx-vs-us, .sx-vs-table tbody td.sx-vs-us{ border-left:1px solid rgba(255,106,43,.35); border-right:1px solid rgba(255,106,43,.35); } .sx-vs-uslabel{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--text); } .sx-vs-pip{ width:8px;height:8px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,106,43,.18); } /* ячейки */ .sx-vs-mark{ display:inline-flex; align-items:center;justify-content:center; width:22px;height:22px; border-radius:50%; font-size:.8rem; font-weight:700; margin-right:10px; flex:none; vertical-align:middle; } .sx-vs-yes{background:rgba(61,220,132,.14);color:var(--success)} .sx-vs-no{background:rgba(255,106,43,.12);color:var(--accent-hi)} .sx-vs-mid{background:var(--surface);color:var(--muted);border:1px solid var(--stroke-hi)} .sx-vs-us .sx-vs-yes{background:rgba(61,220,132,.18)} .sx-vs-txt{ font-size:.92rem; line-height:1.35; color:var(--muted); } .sx-vs-us .sx-vs-txt{color:var(--text);font-weight:500} .sx-vs-hint{ display:none; margin-top:14px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2); text-align:center; } @media(max-width:820px){ .sx-vs-hint{display:block} .sx-vs-table th,.sx-vs-table td{padding:14px 14px} .sx-vs-rowhead{min-width:170px} } @media(max-width:520px){ .sx-vs-table{min-width:680px} .sx-vs-txt{font-size:.86rem} .sx-vs-mark{width:20px;height:20px;margin-right:8px} } /* ===== STICKY-CTA (mobile bottom bar) ===== */ .sx-sticky{display:none} @media (max-width:820px){ .sx-sticky{ display:block; position:fixed; left:0;right:0;bottom:0; z-index:80; /* выше контента, ниже .modal-root (квиз) */ padding:8px var(--gutter); padding-bottom:calc(8px + env(safe-area-inset-bottom)); background:var(--surface-glass); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-top:1px solid var(--stroke); transform:translateY(120%); opacity:0; visibility:hidden; transition:transform .5s var(--ease-expo),opacity .35s ease,visibility .35s ease; pointer-events:none; } .sx-sticky.is-on{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } .sx-sticky-inner{ display:flex; align-items:stretch; gap:10px; max-width:var(--maxw); margin-inline:auto; } .sx-sticky-btn{ flex:1 1 auto; min-height:48px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; } .sx-sticky-btn--solo{flex:1 1 100%;width:100%} .sx-sticky-tg{ flex:0 0 auto; width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--stroke-hi); background:var(--surface); color:var(--text); transition:border-color .2s ease,color .2s ease,background .2s ease; } .sx-sticky-tg:hover,.sx-sticky-tg:active{ border-color:var(--accent); color:var(--accent-hi); background:var(--bg-elev); } } @media (prefers-reduced-motion:reduce){ .sx-sticky{transition:opacity .2s ease,visibility .2s ease} } /* ===== Инлайн-форма захвата (.final) ===== */ .sx-capture{ max-width:760px; margin:clamp(28px,5vw,44px) auto 0; text-align:left; } .sx-capture-micro{ margin:0 0 14px; font-family:var(--font-mono); font-size:13px; line-height:1.5; color:var(--muted); letter-spacing:.01em; } .sx-form{margin:0;} .sx-form-row{ display:grid; grid-template-columns:1fr 1.4fr auto; gap:10px; align-items:stretch; } .sx-input{ width:100%; font-family:var(--font-body); font-size:15px; color:var(--text); background:var(--surface); border:1px solid var(--stroke); border-radius:var(--r-sm); padding:14px 16px; outline:none; transition:border-color .2s var(--ease-expo), background .2s var(--ease-expo); -webkit-appearance:none; appearance:none; } .sx-input::placeholder{color:var(--muted-2);} .sx-input:hover{border-color:var(--stroke-hi);} .sx-input:focus{ border-color:var(--accent); background:var(--bg-elev); } .sx-form-btn{ white-space:nowrap; } .sx-form-btn[disabled]{ opacity:.6; pointer-events:none; } .sx-form-err{ margin:10px 2px 0; font-family:var(--font-mono); font-size:12.5px; color:var(--accent-hi); } .sx-form-ok{ margin:0; padding:18px 20px; font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--success); background:rgba(61,220,132,.08); border:1px solid rgba(61,220,132,.28); border-radius:var(--r-md); text-align:center; animation:sx-ok-in .5s var(--ease-expo) both; } @keyframes sx-ok-in{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } /* видимые каналы */ .sx-channels{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--stroke); } .sx-channels-label{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); } .sx-channel{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14.5px; color:var(--cream); text-decoration:none; transition:color .2s var(--ease-expo); } .sx-channel:hover{color:var(--accent-hi);} .sx-channel-ic{ display:inline-flex; width:24px;height:24px; align-items:center;justify-content:center; font-size:13px; color:var(--accent); background:var(--surface); border:1px solid var(--stroke); border-radius:50%; transition:border-color .2s var(--ease-expo); } .sx-channel:hover .sx-channel-ic{border-color:var(--stroke-hi);} @media(max-width:820px){ .sx-form-row{ grid-template-columns:1fr; } .sx-form-btn{width:100%;} .sx-capture{text-align:center;} .sx-channels{justify-content:center;} } @media(max-width:520px){ .sx-input{font-size:16px;} /* анти-зум iOS */ .sx-channels{gap:10px 14px;} .sx-channel{font-size:14px;} } /* ===== ОСНОВАТЕЛЬ (sx-founder) ===== */ .sx-founder-card{ display:flex; gap:clamp(24px,4vw,48px); align-items:center; max-width:940px; margin-inline:auto; background:var(--surface); border:1px solid var(--stroke); border-radius:var(--r-lg); padding:clamp(24px,3.5vw,46px); } .sx-founder-photo{margin:0; flex:0 0 auto;} .sx-founder-photo img{ display:block; width:clamp(140px,18vw,196px); height:clamp(140px,18vw,196px); object-fit:cover; object-position:50% 35%; border-radius:var(--r-md); border:1px solid var(--stroke-hi); } .sx-founder-body{min-width:0;} .sx-founder-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); line-height:1.04; margin:.55rem 0 .35rem; color:var(--text); } .sx-founder-role{color:var(--accent); font-weight:500; font-size:.96rem; margin:0 0 1rem;} .sx-founder-quote{ color:var(--muted); font-size:1.04rem; line-height:1.62; margin:0 0 1.5rem; max-width:48ch; } .sx-founder-cta{display:flex; flex-wrap:wrap; gap:.7rem;} .sx-founder .eyebrow{margin-bottom:0;} @media (max-width:720px){ .sx-founder-card{flex-direction:column; text-align:center; gap:20px;} .sx-founder-quote{margin-inline:auto;} .sx-founder-cta{justify-content:center;} .sx-founder .eyebrow{justify-content:center;} }