:root { color-scheme: dark; --bg:#202222; --bg-2:#262a27; --text:#eeeeea; --muted:#acafac; --line:#3b3e3b; --mint:#71ffa9; --header-h:76px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); line-height:1.65; font-size:16px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body { margin:0; background:var(--bg); overflow-x:hidden; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--mint); outline-offset:6px; border-radius:4px; }
.wrap { max-width:1160px; padding-inline:40px; margin-inline:auto; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:500; }
h2 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.25; letter-spacing:-.035em; margin-bottom:24px; }
h3 { font-size:1.2rem; line-height:1.4; letter-spacing:-.02em; margin-bottom:12px; }
.small-label { display:block; color:var(--muted); font-size:.9rem; margin-bottom:20px; }

/* ---------- Шапка ---------- */
.header { position:fixed; inset:0 0 auto; z-index:10; transition:background .3s ease, border-color .3s ease; border-bottom:1px solid transparent; }
.header.solid { background:#202222d9; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:#ffffff10; }
.header-inner { display:flex; align-items:center; gap:32px; min-height:var(--header-h); }
.brand { display:inline-flex; align-items:center; flex-shrink:0; color:var(--mint); }
.brand svg { display:block; fill:currentColor; }
.header-logo { transition:opacity .15s linear; }
nav { display:flex; gap:28px; font-size:.9rem; margin-left:auto; }
nav a { text-decoration:none; color:#c4c6c2; transition:color .2s ease; }
nav a:hover { color:var(--mint); }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:18px; background:#eeeeea; color:#242724; padding:13px 24px; border-radius:28px; font-size:.95rem; text-decoration:none; transition:background .2s ease,transform .2s ease,border-color .2s ease; border:1px solid transparent; }
.button:hover { background:#dff3e4; transform:translateY(-2px); }
.button span { font-size:1.15rem; }
.button.small { min-height:40px; padding:8px 18px; font-size:.88rem; }
.button.ghost { background:transparent; color:var(--text); border-color:#4a4f4a; }
.button.ghost:hover { border-color:var(--mint); background:transparent; }
.header-cta { background:var(--mint); color:#14281b; }
.header-cta:hover { background:#a4ffc7; }

/* ---------- Вступление с логотипом ---------- */
.intro { position:relative; height:100vh; height:100svh; }
.intro-sticky { position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; align-content:center; overflow:hidden; }
.intro-title { margin:0; line-height:0; }
.intro-logo { display:block; width:min(84vw,1080px); height:auto; fill:var(--mint); transform-origin:0 0; will-change:transform; }
.intro-caption { margin:6px 0 0; color:var(--muted); font-size:clamp(.95rem,1.6vw,1.2rem); text-align:center; }
.intro-glow { position:absolute; inset:-20%; background:radial-gradient(40% 35% at 50% 50%, #71ffa91f, transparent 70%); pointer-events:none; }
.chips { list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none; }
.chips li { position:absolute; left:50%; top:50%; white-space:nowrap; padding:8px 14px; border-radius:20px; background:#2b302c; border:1px solid #3f463f; color:#cfd4cc; font-size:.85rem; transform:translate(-50%,-50%) translate(var(--x),var(--y)); opacity:.85; }
.scroll-hint { position:absolute; bottom:28px; left:50%; width:26px; height:42px; margin-left:-13px; border:1.5px solid #6b716b; border-radius:14px; }
.scroll-hint span { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--mint); animation:hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(14px); opacity:0 } 100%{ opacity:0 } }

/* С JS: длинная сцена, логотип улетает в шапку, фишки разлетаются */
.js.motion .intro { height:200vh; }
/* Текст первого экрана поднимается, пока логотип ещё летит, — без пустого экрана после сцены. */
.js.motion .hero { position:relative; margin-top:-55vh; padding-top:0; }
.js.motion .header-logo { opacity:0; }
.js.motion .chips li { opacity:calc(var(--p-chips,0) * .9); transform:translate(-50%,-50%) translate(calc(var(--x) * var(--p-chips,0)),calc(var(--y) * var(--p-chips,0))) scale(calc(.6 + var(--p-chips,0) * .4)); }
.js.motion .intro-caption { opacity:var(--p-caption,1); transform:translateY(calc((1 - var(--p-caption,1)) * 20px)); }
.js.motion .intro-glow { opacity:var(--p-caption,1); }
.js.motion .scroll-hint { opacity:var(--p-caption,1); }
.js.motion .intro-logo { animation:logo-in 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes logo-in { from { clip-path:inset(0 100% 0 0); opacity:.4; } to { clip-path:inset(0 0 0 0); opacity:1; } }

/* ---------- Первый экран после логотипа ---------- */
.hero { text-align:center; padding-top:120px; padding-bottom:120px; }
.intro-label { font-size:.95rem; color:var(--muted); margin-bottom:28px; }
.hero-title { font-size:clamp(2.3rem,5.1vw,4.6rem); line-height:1.12; letter-spacing:-.048em; margin-bottom:30px; }
.lead { font-size:1.1rem; max-width:620px; margin:0 auto 36px; color:#c0c3be; line-height:1.8; }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.quiet-note { font-size:.8rem; margin:22px 0 0; color:var(--muted); }

/* ---------- Общие секции ---------- */
.section-head { max-width:640px; margin-bottom:48px; }
.section-head h2 { margin-bottom:0; }
.pains, .steps, .features, .roadmap, .faq { padding-block:110px; }

.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pain { padding:32px 28px; border-radius:22px; background:var(--bg-2); border:1px solid #363b36; }
.pain-num { display:block; font-size:.85rem; color:var(--mint); margin-bottom:40px; font-variant-numeric:tabular-nums; }
.pain p { color:var(--muted); margin:0; }

.section-intro { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; margin-bottom:38px; }
.section-intro h2 { max-width:340px; }
.section-intro p { margin:0; color:var(--muted); }
.example-section { padding-top:40px; }

/* ---------- Интерактивный пример (sim.js) ---------- */
.sim { margin:0; }
.sim-stage { position:relative; width:calc(100vw - 48px); max-width:1720px; height:min(86vh,920px); margin-inline:auto; border-radius:28px; overflow:hidden; background-color:#181b19; background-image:radial-gradient(#ffffff17 1.2px, transparent 1.4px); border:1px solid #323832; isolation:isolate; }
.sim-stage::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, #0000006b); pointer-events:none; z-index:2; }
.sim-world { position:absolute; left:0; top:0; width:1600px; height:1000px; transform-origin:0 0; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; color:#ececec; }
.sim-cursor { position:absolute; left:0; top:0; z-index:3; width:28px; height:28px; margin:-3px 0 0 -5px; pointer-events:none; opacity:0; filter:drop-shadow(0 3px 4px #0009); }
.sim-cursor svg { display:block; transform-origin:5px 3px; transition:transform .12s ease; }
.sim-cursor.down svg { transform:scale(.84); }
.sim-key { position:absolute; left:30px; top:28px; padding:4px 10px; border-radius:8px; background:#ececec; color:#1d1d1d; font-size:13px; font-weight:600; white-space:nowrap; opacity:0; transform:scale(.7); transition:opacity .2s ease, transform .2s ease; }
.sim-cursor.key .sim-key { opacity:1; transform:none; }
.sim-ripple { position:absolute; z-index:3; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:2px solid var(--mint); pointer-events:none; animation:sim-ripple .5s ease-out forwards; }
@keyframes sim-ripple { from { transform:scale(.25); opacity:1; } to { transform:scale(1.35); opacity:0; } }
.sim-caption { position:absolute; left:50%; bottom:22px; z-index:4; transform:translateX(-50%); margin:0; width:max-content; max-width:calc(100% - 32px); padding:10px 20px; border-radius:24px; background:#0f1110d9; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid #ffffff14; font-size:.95rem; text-align:center; }
.sim-caption:empty { display:none; }
.sim-caption.swap { animation:sim-caption .5s ease both; }
@keyframes sim-caption { from { opacity:0; transform:translate(-50%,10px); filter:blur(4px); } }
.sim-controls { display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap; max-width:1160px; margin:18px auto 0; padding-inline:40px; }
.sim-chapters { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.sim-chapters button { font:inherit; font-size:.85rem; color:var(--muted); background:transparent; padding:6px 14px; border-radius:20px; border:1px solid var(--line); cursor:pointer; transition:color .3s ease, background .3s ease, border-color .3s ease; }
.sim-chapters button:hover { border-color:#6b726b; color:var(--text); }
.sim-chapters button:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.sim-chapters li.soon button { border-style:dashed; border-color:#71ffa966; color:#b9ffd4; }
.sim-chapters li.done button { color:var(--text); border-color:#596059; border-style:solid; }
.sim-chapters li.active button { color:#14281b; background:var(--mint); border-color:var(--mint); border-style:solid; }
.sim-buttons { display:flex; gap:8px; }
.sim-buttons button { font:inherit; font-size:.85rem; color:var(--text); background:transparent; border:1px solid #4a4f4a; border-radius:20px; padding:6px 14px; cursor:pointer; }
.sim-buttons button:hover { border-color:var(--mint); }
.sim-buttons button:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.sim-fallback { max-width:760px; margin:0 auto; padding-inline:40px; color:var(--muted); }
.js .sim-fallback { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; padding:0; }
html:not(.js) .sim-stage, html:not(.js) .sim-controls { display:none; }

/* Телефон с мессенджером */
.sim-phone { position:absolute; left:90px; top:60px; width:430px; height:880px; display:flex; flex-direction:column; overflow:hidden; border-radius:58px; border:12px solid #0d0e0e; background:#0b141a; box-shadow:0 0 0 2px #3b413c, 0 50px 100px #000a; }
.ph-status { display:flex; justify-content:space-between; align-items:center; padding:14px 30px 8px; font-size:15px; font-weight:600; color:#e9edef; background:#1f2c33; }
.ph-icons { display:flex; align-items:end; gap:3px; }
.ph-icons i { width:4px; background:#e9edef; border-radius:1px; }
.ph-icons i:nth-child(1) { height:6px; } .ph-icons i:nth-child(2) { height:9px; } .ph-icons i:nth-child(3) { height:12px; }
.ph-icons b { width:24px; height:12px; margin-left:6px; border-radius:3px; border:1.5px solid #e9edef; box-shadow:inset -8px 0 0 #1f2c33, inset 0 0 0 1.5px #1f2c33; background:#e9edef; }
.ph-head { display:flex; align-items:center; gap:12px; padding:8px 16px 12px; background:#1f2c33; color:#e9edef; }
.ph-back { font-size:34px; line-height:1; color:#aebac1; margin-top:-4px; }
.ph-ava { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#f4b4c3; color:#6b2336; font-weight:600; }
.ph-head b { display:block; font-size:17px; font-weight:600; }
.ph-head small { display:block; font-size:13px; color:#8696a0; }
.ph-body { position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:16px 14px; background-color:#0b141a; background-image:radial-gradient(#ffffff0a 2px, transparent 2.5px), radial-gradient(#ffffff06 1.5px, transparent 2px); background-size:34px 34px, 22px 22px; background-position:0 0, 11px 17px; }
.ph-day { align-self:center; margin-bottom:10px; padding:5px 12px; border-radius:8px; background:#182229; color:#8696a0; font-size:12.5px; }
.msg { display:none; position:relative; max-width:82%; padding:7px 11px 8px; border-radius:12px; font-size:17px; line-height:1.38; color:#e9edef; box-shadow:0 1px 1px #0006; }
.msg.shown { display:block; animation:msg-pop .38s cubic-bezier(.2,.8,.25,1.15) both; }
.msg.in { align-self:flex-start; background:#202c33; border-top-left-radius:4px; transform-origin:left bottom; }
.msg.out { align-self:flex-end; background:#005c4b; border-top-right-radius:4px; transform-origin:right bottom; }
.msg time { float:right; margin:9px 0 -5px 12px; font-size:11.5px; color:#ffffff8c; }
.msg em { font-style:normal; color:#53bdeb; letter-spacing:-3px; }
.msg.sel::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#53bdeb4d; box-shadow:0 0 0 2px #53bdeb80; }
@keyframes msg-pop { from { opacity:0; transform:translateY(12px) scale(.92); } }
.typing { display:none; align-self:flex-start; gap:5px; padding:15px 16px; border-radius:12px; border-top-left-radius:4px; background:#202c33; }
.typing.shown { display:flex; animation:msg-pop .3s ease both; }
.typing i { width:8px; height:8px; border-radius:50%; background:#8696a0; animation:typing-dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typing-dot { 0%,60%,100% { transform:none; opacity:.5; } 30% { transform:translateY(-4px); opacity:1; } }
.ph-menu { position:absolute; left:150px; z-index:2; display:flex; flex-direction:column; min-width:200px; padding:6px 0; border-radius:12px; background:#233138; box-shadow:0 14px 40px #000b; opacity:0; transform:scale(.88); transform-origin:top left; transition:opacity .2s ease, transform .2s ease; }
.ph-menu.shown { opacity:1; transform:none; }
.ph-menu span { padding:10px 20px; font-size:16px; color:#e9edef; transition:background .15s ease; }
.ph-menu span.hover { background:#ffffff17; }
.ph-toast { position:absolute; left:50%; bottom:18px; z-index:2; padding:8px 16px; border-radius:20px; background:#e9edef; color:#111b21; font-size:14px; white-space:nowrap; opacity:0; transform:translate(-50%,10px); transition:opacity .25s ease, transform .25s ease; }
.ph-toast.shown { opacity:1; transform:translate(-50%,0); }
.ph-input { display:flex; align-items:center; gap:10px; padding:10px 12px 20px; background:#0b141a; }
.ph-input span { flex:1; padding:11px 18px; border-radius:24px; background:#202c33; color:#8696a0; font-size:16px; }
.ph-input i { width:46px; height:46px; border-radius:50%; background:#00a884; }

/* Окно браузера с приложением Твикли (повторяет static/app.css) */
.sim-browser { position:absolute; left:580px; top:40px; width:930px; height:920px; overflow:hidden; border-radius:18px; border:1px solid #3c3c3c; background:#212121; box-shadow:0 50px 100px #000a; }
.br-bar { display:flex; align-items:center; gap:8px; height:46px; padding:0 18px; background:#2c2c2c; border-bottom:1px solid #3a3a3a; }
.br-bar i { width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.br-bar i:nth-child(2) { background:#febc2e; } .br-bar i:nth-child(3) { background:#28c840; }
.br-url { margin:0 auto; padding:5px 70px; border-radius:8px; background:#1c1c1c; color:#bdbdbd; font-size:13.5px; }
.sim-app { position:relative; height:calc(100% - 46px); }
.ap-header { display:flex; justify-content:space-between; align-items:center; height:72px; padding:0 36px; font-size:14px; }
.ap-logo { width:120px; height:36px; fill:#71ffa9; }
.ap-account { display:flex; align-items:center; gap:22px; }
.ap-account small { display:block; color:#ababab; font-size:13px; }
.ap-page { position:absolute; inset:72px 0 0; padding:0 36px 24px; opacity:0; transform:translateY(8px); filter:blur(5px); transition:opacity .35s ease, transform .35s ease, filter .35s ease; }
.ap-page.active { opacity:1; transform:none; filter:none; }
.ap-h1 { font-size:30px; font-weight:600; letter-spacing:-.7px; line-height:1.25; }
.ap-h2 { font-size:18px; font-weight:600; margin-bottom:14px; }
.ap-h3 { font-size:16px; font-weight:550; }
.ap-count { margin-left:8px; font-size:22px; font-weight:400; color:#ababab; }
.ap-muted { color:#ababab; }
.ap-btn { display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; border-radius:24px; background:#ececec; color:#202020; font-size:14px; font-weight:550; transition:transform .15s ease, background .15s ease; }
.ap-btn.ghost { background:transparent; color:#ababab; }
.ap-btn.pressed { transform:scale(.94); background:#fff; }
.ap-heading { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
.ap-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; padding-bottom:22px; border-bottom:1px solid #393939; }
.ap-label { display:block; margin-bottom:7px; font-size:14px; font-weight:500; }
.ap-input { min-height:46px; padding:11px 14px; border-radius:12px; border:1px solid transparent; background:#303030; color:#ececec; font-size:15px; line-height:1.45; white-space:pre-line; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ap-input.ap-ph { color:#a5a5a5; }
.ap-input.pressed { background:#383838; }
.ap-input.focus { border-color:#71ffa9; box-shadow:0 0 0 3px #71ffa924; }
.ap-input.focus::after { content:""; display:inline-block; width:2px; height:1.1em; margin-left:1px; vertical-align:-3px; background:#71ffa9; animation:sim-caret 1s steps(1) infinite; }
@keyframes sim-caret { 50% { opacity:0; } }
.ap-area { min-height:96px; line-height:1.6; }
.ap-area.pasted { animation:sim-paste .8s ease; }
@keyframes sim-paste { from { background:#3b5a45; } }
.ap-found { margin:20px 0 6px; font-size:14px; color:#ababab; }
.ap-row { display:grid; grid-template-columns:110px 1.4fr 1fr .7fr; gap:18px; align-items:center; padding:20px 12px; border-bottom:1px solid #393939; font-size:14px; }
.ap-row:last-child { border-bottom-color:transparent; }
.ap-row strong { display:block; margin-bottom:4px; font-weight:500; }
.ap-back { margin:8px 0 8px; font-size:14px; color:#ababab; }
.ap-sub { margin:4px 0 14px; }
.ap-section { padding-top:14px; border-top:1px solid #393939; }
.ap-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.ap-field { position:relative; margin-bottom:12px; }
.ap-tip { position:absolute; left:0; top:calc(100% + 6px); z-index:2; padding:8px 12px; border-radius:10px; background:#71ffa9; color:#14281b; font-size:13.5px; white-space:nowrap; opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease; }
.ap-tip.shown { opacity:1; transform:none; }
.ap-save { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid #393939; font-size:14px; }
.ap-save > div { display:flex; gap:10px; }
.ap-notice { margin-top:14px; padding:12px 16px; border-radius:12px; border-left:2px solid #71ffa9; background:#2a2a2a; font-size:14px; }
.ap-inline { display:flex; gap:20px; margin:8px 0 22px; font-size:14px; }
.ap-cols { display:grid; grid-template-columns:1.7fr 1fr; gap:40px; }
.ap-hint { margin:-6px 0 16px; font-size:14px; }
.ap-dl { display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin:0 0 22px; font-size:15px; }
.ap-dl dt { margin-bottom:3px; font-size:13px; color:#ababab; }
.ap-dl dd { margin:0; }
.ap-source { line-height:1.75; white-space:pre-line; font-size:15px; }
.ap-clarify ul { margin:0; padding-left:20px; }
.ap-clarify li { margin-bottom:8px; font-size:14px; color:#ababab; transition:color .3s ease, transform .3s ease; }
.ap-clarify li.hl { color:#71ffa9; transform:translateX(4px); }

.step-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative; }
.step-list::before { content:""; position:absolute; top:7px; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--mint),#3b3e3b 70%); }
.step-list li { position:relative; padding-top:40px; counter-increment:step; }
.step-dot { position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%; background:var(--bg); border:2px solid var(--mint); }
.step-list h3::before { content:counter(step) ". "; color:var(--mint); }
.step-list p { color:var(--muted); margin:0; font-size:.95rem; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.feature { background:var(--bg); padding:34px 30px; transition:background .25s ease; }
.feature:hover { background:var(--bg-2); }
.feature svg { width:30px; height:30px; fill:none; stroke:var(--mint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:26px; }
.feature p { color:var(--muted); margin:0; font-size:.95rem; }

.story { padding-top:80px; padding-bottom:80px; display:grid; grid-template-columns:1fr 1fr; gap:70px; border-top:1px solid var(--line); }
.story-copy { color:#babeb7; padding-top:40px; }
.story-copy p { margin-bottom:24px; }

.road { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.road li { padding:26px 22px; border-radius:20px; border:1px dashed #4a4f4a; }
.road li.done { border:1px solid var(--mint); background:#71ffa90d; }
.road-tag { display:inline-block; font-size:.78rem; color:var(--muted); margin-bottom:22px; }
.done .road-tag { color:var(--mint); }
.road h3 { font-size:1.05rem; }
.road p { color:var(--muted); margin:0; font-size:.88rem; line-height:1.6; }

.demo-cta { padding-block:40px; }
.demo-card { position:relative; overflow:hidden; text-align:center; padding:90px 40px; border-radius:32px; background:radial-gradient(60% 80% at 50% 0%, #71ffa926, transparent 70%), #262a27; border:1px solid #3d453d; }
.demo-logo { position:absolute; left:50%; bottom:-18%; width:120%; transform:translateX(-50%); fill:#71ffa90a; pointer-events:none; }
.demo-card h2, .demo-card p, .demo-card .button { position:relative; }
.demo-card p { color:#c0c3be; max-width:520px; margin:0 auto 32px; }

.faq-list { max-width:820px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:1.08rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--mint); font-size:1.4rem; line-height:1; transition:transform .25s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); margin:0 0 24px; max-width:680px; }

.about { padding-top:72px; padding-bottom:88px; border-top:1px solid var(--line); }
.about-content { max-width:660px; margin-inline:auto; }
.about h2 { margin-bottom:32px; }
.about p { color:#babeb7; margin-bottom:24px; }
.about .closing { color:#dde2d8; margin-top:36px; }
.text-link { display:flex; justify-content:space-between; gap:24px; max-width:660px; margin:40px auto 0; width:100%; font-size:.9rem; text-decoration:none; }
.text-link:hover { color:var(--mint); }
.footer { display:flex; align-items:center; gap:30px; padding-block:26px; border-top:1px solid var(--line); }
.footer p { font-size:.8rem; color:var(--muted); margin:0; }
.footer-demo { font-size:.85rem; color:var(--mint); margin-left:auto; }
.footer > span { font-size:.8rem; color:var(--muted); }
.skip { position:absolute; top:-100px; left:20px; background:var(--bg); padding:12px; z-index:20; }
.skip:focus { top:10px; }

/* ---------- Появление при прокрутке ---------- */
.js.motion [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0s); }
.js.motion [data-reveal].in { opacity:1; transform:none; }

@media(max-width:1000px) {
  .road { grid-template-columns:repeat(2,1fr); }
  .road li.done { grid-column:1/-1; }
  .step-list { grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .step-list::before { display:none; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:800px) {
  :root { --header-h:64px; }
  .wrap { padding-inline:24px; }
  nav { display:none; }
  .header-cta { margin-left:auto; }
  .hero { padding-top:80px; padding-bottom:88px; }
  .pains, .steps, .features, .roadmap, .faq { padding-block:72px; }
  .pain-grid { grid-template-columns:1fr; }
  .pain-num { margin-bottom:16px; }
  .section-intro,.story { gap:32px; }
  .chips li { font-size:.75rem; padding:6px 10px; }
  .chips li:nth-child(n+5) { display:none; }
  .sim-stage { width:calc(100vw - 24px); height:78svh; border-radius:20px; }
  .sim-caption { bottom:12px; padding:8px 14px; font-size:.8rem; }
  .sim-controls, .sim-fallback { padding-inline:24px; }
}
@media(max-width:620px) {
  .wrap { padding-inline:18px; }
  .hero-title { font-size:2.35rem; letter-spacing:-.045em; }
  .lead { font-size:1rem; }
  .button { width:100%; }
  .button.small { width:auto; }
  .quiet-note { max-width:240px; margin-inline:auto; }
  .section-intro,.story { grid-template-columns:1fr; gap:8px; }
  .section-intro h2 { max-width:100%; }
  .step-list, .feature-grid, .road { grid-template-columns:1fr; }
  .story { padding-top:60px; padding-bottom:40px; }
  .story-copy { padding-top:0; }
  .demo-card { padding:64px 22px; border-radius:24px; }
  .about h2 br { display:none; }
  .footer { flex-wrap:wrap; gap:12px 24px; }
  .footer p { width:100%; order:3; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }


/* AI-помощник (глава «скоро») */
.sim-flyer { position:absolute; left:0; top:0; z-index:5; padding:4px 10px; border-radius:8px; background:#71ffa9; color:#14281b; font-size:14px; font-weight:600; white-space:nowrap; box-shadow:0 8px 22px #000a; pointer-events:none; opacity:0; }
.ap-title-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.ap-soon { padding:4px 11px; border-radius:20px; border:1px dashed #71ffa980; color:#9dffc4; font-size:12.5px; }
.ap-ai-cols { grid-template-columns:1.75fr 1fr; gap:32px; }
.ap-area { position:relative; overflow:hidden; }
.ap-area mark { padding:0 1px; border-radius:4px; background:transparent; color:inherit; transition:background .3s ease, color .3s ease; }
.ap-area mark.hit { background:#71ffa930; color:#b9ffd4; }
.ap-area mark.hit.ask { background:#ffc97830; color:#ffd9a0; }
.ap-area.scanning::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 35%, #71ffa936 50%, transparent 65%); background-size:260% 100%; animation:sim-scan 1s linear infinite; }
@keyframes sim-scan { from { background-position:130% 0; } to { background-position:-30% 0; } }
.ap-ai-btn { margin:0 0 16px; background:#71ffa914; color:#9dffc4; border:1px solid #71ffa966; }
.ap-ai-btn.pressed { background:#71ffa933; transform:scale(.96); }
.ap-ai-btn.busy { animation:sim-busy 1s ease-in-out infinite; }
@keyframes sim-busy { 50% { background:#71ffa92e; box-shadow:0 0 0 6px #71ffa912; } }
.ap-ok { display:none; position:absolute; right:9px; top:38px; width:28px; height:28px; place-items:center; border-radius:50%; background:#71ffa9; color:#14281b; font-size:15px; font-weight:700; transition:transform .15s ease; }
.ap-ok.pressed { transform:scale(.85); }
.ap-field.suggest .ap-ok { display:grid; }
.ap-field.suggest .ap-input { border:1px dashed #71ffa9aa; background:#2a352d; animation:sim-paste .8s ease; }
.ap-field.suggest .ap-label::after { content:"  ✦ AI предлагает"; color:#71ffa9; font-size:12px; font-weight:500; }
.ap-field.accepted .ap-input { border-color:#71ffa940; }
.ap-field.accepted .ap-label::after { content:"  ✓ проверено"; color:#ababab; font-size:12px; font-weight:400; }
.ap-field.ask .ap-input { border:1px dashed #ffc978aa; background:#352f24; color:#ffd9a0; }
.ap-field.ask .ap-label::after { content:"  ? уточнить"; color:#ffc978; font-size:12px; font-weight:500; }
.ap-field.locked .ap-input { color:#8d8d8d; font-style:italic; }
.ap-ai-panel { align-self:start; padding:18px 18px 14px; border-radius:16px; border:1px solid #3b4a3f; background:#252a26; }
.ap-ai-panel .ap-h2 { color:#9dffc4; }
.ap-ai-steps { list-style:none; margin:0 0 18px; padding:0; font-size:14px; }
.ap-ai-steps li { position:relative; padding:5px 0 5px 24px; color:#7d7d7d; transition:color .3s ease; }
.ap-ai-steps li::before { content:""; position:absolute; left:2px; top:12px; width:10px; height:10px; border-radius:50%; border:1.5px solid #5a5a5a; }
.ap-ai-steps li.on { color:#ececec; }
.ap-ai-steps li.on::before { border-color:#71ffa9; animation:sim-busy-dot .9s ease-in-out infinite; }
.ap-ai-steps li.done { color:#b9ffd4; }
.ap-ai-steps li.done::before { content:"✓"; border:0; top:5px; left:0; width:auto; height:auto; color:#71ffa9; font-size:14px; }
@keyframes sim-busy-dot { 50% { background:#71ffa9; } }
.ap-ai-q { margin:0 0 14px; padding-left:18px; font-size:14px; }
.ap-ai-q li { margin-bottom:8px; color:#ffd9a0; opacity:0; transform:translateX(-8px); transition:opacity .35s ease, transform .35s ease; }
.ap-ai-q li.shown { opacity:1; transform:none; }
.ap-ai-rules { margin:0; padding-top:12px; border-top:1px solid #3a3a3a; color:#9a9a9a; font-size:12.5px; line-height:1.5; }
.ap-ai-saved { position:absolute; left:36px; right:36px; top:0; z-index:3; margin:0; padding:8px 14px; font-size:13px; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; }
.ap-ai-saved.shown { opacity:1; transform:none; }