/* Sunroom — стили страниц поверх dia.css */

/* ---------- Логотипы нейросетей ---------- */
.ai {
  --s: 32px;
  width: var(--s); height: var(--s); flex: none;
  display: inline-grid; place-items: center;
  border-radius: 30%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ai img { width: 62%; height: 62%; display: block; }
.ai.sm { --s: 26px; }
.ai.xs { --s: 18px; border-radius: 28%; }
.ai.xs img { width: 70%; height: 70%; }
.ai.you { background: #111; color: #fff; font-family: var(--font-mono); font-size: calc(var(--s) * 0.3); letter-spacing: -0.02em; box-shadow: none; }
.stack { display: inline-flex; flex: none; }
.stack .ai { box-shadow: 0 0 0 2px var(--stack-ring, #fff), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.stack .ai + .ai { margin-left: -6px; }
.inline-ai { display: inline-flex; align-items: center; gap: 4px; vertical-align: -4px; font-weight: 500; color: var(--ink); }

.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 500; border-bottom: 1.5px solid var(--sun-500); padding-bottom: 2px; }
.text-link:hover .arrow-right { transform: translateX(3px); }
.text-link .arrow { transition: transform 0.3s var(--ease-out); }
.pill-nav a[aria-current="page"] { font-weight: 600; }

/* ---------- Герой ---------- */
.hero { padding: 132px 0 300px; text-align: center; }
.hero-inner { position: relative; z-index: 1; }
.hero-tagline { color: #fffdf3; margin-bottom: 18px; text-shadow: 0 1px 24px rgba(150, 100, 0, 0.18); }
.hero-wordmark { text-shadow: 0 2px 40px rgba(150, 100, 0, 0.15); }
.hero-tagline, .hero-wordmark { animation: rise 1.2s var(--ease-out) both; }
.hero-wordmark { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.hero-window-wrap { position: relative; z-index: 2; margin-top: -330px; max-width: 1040px; }
.hero-window { animation: window-in 1.4s 0.25s var(--ease-out) both; }
@keyframes window-in { from { opacity: 0; transform: translateY(80px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Окно приложения ---------- */
.app { display: grid; grid-template-columns: 268px 1fr; height: 620px; font-size: 13px; }
.app-side { --stack-ring: var(--window-tint); padding: 0 10px 16px; overflow: hidden; border-right: 1px solid rgba(120, 90, 20, 0.08); }
.app-side .window-bar { padding: 0 4px; }
.side-search { margin: 0 4px 10px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); color: var(--ink-3); display: flex; align-items: center; padding: 0 10px; font-size: 12px; }
.side-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 14px 10px 6px; }
.side-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; min-width: 0; }
.side-row > div { min-width: 0; flex: 1; }
.side-row b { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.3; }
.side-row small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-row.is-current { background: rgba(255, 255, 255, 0.75); box-shadow: var(--shadow-pill); --stack-ring: #fff; }
.side-row.channel { gap: 8px; }
.side-row.channel span { color: var(--ink-3); width: 18px; text-align: center; }
.side-row .stack .ai.xs + .ai.xs { margin-left: -5px; }
.folder { width: 18px; height: 14px; flex: none; border-radius: 3px; background: #e9b949; position: relative; }
.folder::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #e9b949; }
.folder.lg { width: 44px; height: 34px; border-radius: 6px; }
.folder.lg::before { top: -6px; width: 18px; height: 8px; }
.badge { font-style: normal; font-size: 10px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 9px; background: var(--sun-400); color: #3b2a00; display: grid; place-items: center; padding: 0 5px; }

.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.chat-head { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.chat-head > div { min-width: 0; }
.chat-head b { display: block; font-size: 14px; font-weight: 600; }
.chat-head small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat { flex: 1; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 12px; }
.msg > div { min-width: 0; }
.msg p { margin: 0; line-height: 1.5; color: var(--ink); }
.msg .who { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.msg time { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.role-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 1px 6px; border-radius: 5px; border: 0.5px solid var(--line-strong); }
.mention { font-weight: 600; color: #6b4d00; background: var(--sun-100); padding: 0 4px; border-radius: 4px; }
.sys { display: flex; align-items: center; gap: 6px; align-self: center; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--sun-50); box-shadow: inset 0 0 0 1px rgba(225, 183, 70, 0.45); font-size: 12px; color: var(--ink-2); }
.sys b { color: var(--ink); font-weight: 600; }
.sys-arrow { color: var(--sun-700); font-weight: 600; }
.sys .ai + span:last-child { margin-left: 4px; }
.tool { display: inline-flex; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.tool i { font-style: normal; color: var(--sun-700); }
code { font-family: var(--font-mono); font-size: 0.92em; background: rgba(242, 191, 58, 0.16); padding: 1px 5px; border-radius: 5px; }
.tool code { background: none; padding: 0; }
.tests { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.tests li { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.tests li::before { content: "✕"; color: #e0533d; margin-right: 8px; }
.typing { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; padding-left: 2px; }
.typing time { font-family: var(--font-mono); font-size: 11px; margin-left: 2px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

[data-sequence] > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
[data-sequence] > .is-shown { opacity: 1; transform: none; }

.app-status { display: flex; gap: 18px; align-items: center; height: 34px; padding: 0 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.03em; }
.app-status .wait { color: var(--sun-700); }
.app-status .ver { margin-left: auto; }
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3cbf5c; margin-right: 6px; vertical-align: 1px; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 191, 92, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(60, 191, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 191, 92, 0); } }

/* ---------- Совместимость и цифры ---------- */
.models { padding-top: 120px; text-align: center; }
.models-label { color: var(--ink-2); margin: 0 0 24px; }
.models-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.models-row li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--shadow-pill); font-weight: 500; font-size: 15px; }
.models-row .ai { --s: 30px; border-radius: 50%; box-shadow: none; background: var(--surface-2); }
.models-row li.soon { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.models-row li.soon .ai { filter: grayscale(1); opacity: 0.55; background: transparent; }
.models-row em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--chip-solid); padding: 3px 6px; border-radius: 5px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 96px 0 0; }
.stats div { border-top: 1px solid var(--line); padding-top: 18px; text-align: left; }
.stats dt { font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -0.05em; line-height: 1; }
.stats dd { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Как это работает ---------- */
.how { padding-top: 180px; }
.how-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; margin-top: 64px; }
.scenes { position: relative; height: 500px; border-radius: 24px; background: radial-gradient(120% 90% at 70% 10%, #fbe08a, #f4c84d 70%); overflow: hidden; }
.scenes::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 20% 80%, rgba(185, 138, 34, 0.35), transparent 70%), radial-gradient(30% 25% at 85% 70%, rgba(185, 138, 34, 0.25), transparent 70%); filter: blur(10px); pointer-events: none; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; z-index: 1; }
.scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
.scene-window { width: min(560px, 100%); }
.bar-title { margin: 0 auto; padding-right: 50px; font-size: 12px; color: var(--ink-3); }

.dropzone { position: relative; margin: 6px 18px 18px; height: 300px; border: 1.5px dashed rgba(0, 0, 0, 0.14); border-radius: 14px; background: var(--sun-50); }
.drop-folder { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.f1 { left: 16%; top: 36px; } .f2 { left: 43%; top: 64px; } .f3 { left: 70%; top: 32px; }
.scene.is-active .drop-folder { animation: drop 0.9s var(--ease-out) both; }
.scene.is-active .f2 { animation-delay: 0.25s; } .scene.is-active .f3 { animation-delay: 0.5s; }
@keyframes drop { from { opacity: 0; transform: translate(40px, -60px) rotate(-8deg); } to { opacity: 1; transform: none; } }
.drop-shared { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-card); font-size: 12.5px; color: var(--ink-2); }
.scene.is-active .drop-shared { animation: rise-center 0.7s 0.9s var(--ease-out) both; }
@keyframes rise-center { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Узлы-фишки для графов */
.chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card), 0 0 0 1px var(--line); font-size: 13px; white-space: nowrap; }
.chip b { font-weight: 600; }
.chip em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.chip.lead { box-shadow: var(--shadow-card), 0 0 0 1.5px var(--sun-600); }
.chip .st { width: 7px; height: 7px; border-radius: 50%; background: #cfcfcf; }
.chip .st.on { background: #3cbf5c; } .chip .st.wait { background: var(--sun-400); }
.org { height: 330px; margin: 0 14px 14px; border-radius: 12px; background: var(--sun-50); }

/* Конвейер задачи */
.pipe { list-style: none; margin: 0; padding: 6px 20px 20px; display: grid; }
.pipe li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.pipe li > div { flex: 1; min-width: 0; }
.pipe li::after { content: ""; position: absolute; left: 12.5px; top: 40px; height: calc(100% - 30px); width: 1px; background: var(--line-strong); }
.pipe li:last-child::after { display: none; }
.pipe b { display: block; font-size: 13.5px; font-weight: 600; }
.pipe small { display: block; font-size: 12px; color: var(--ink-3); }
.pipe .pipe-to { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); padding: 3px 8px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.pipe li.done > div > b::after { content: " ✓"; color: #2f9e57; }
.pipe li.now { background: var(--sun-50); margin: 0 -10px; padding: 9px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(225, 183, 70, 0.45); }
.pipe li.now::after { left: 22.5px; }
.pipe li.now .pipe-to { background: #fff; color: #7a5a10; }
.pipe li:not(.done):not(.now):not(.you) { opacity: 0.6; }
.pipe .bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(0, 0, 0, 0.06); overflow: hidden; }
.pipe .bar b { display: block; height: 100%; background: var(--sun-500); }
.scene.is-active .pipe .bar b { animation: grow-w 1.6s var(--ease-out) both; }
.scene.is-active .pipe li { animation: fade-up 0.5s var(--ease-out) both; }
.scene.is-active .pipe li:nth-child(2) { animation-delay: 0.1s; }
.scene.is-active .pipe li:nth-child(3) { animation-delay: 0.2s; }
.scene.is-active .pipe li:nth-child(4) { animation-delay: 0.3s; }
.scene.is-active .pipe li:nth-child(5) { animation-delay: 0.4s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow-w { from { width: 0; } }

/* ---------- Сплиты ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; padding-top: 200px; }
.split-reverse { grid-template-columns: 1.1fr 1fr; }
.split-reverse .split-text { order: 2; }
.kicker { color: var(--ink-3); margin: 0 0 18px; }
.split .h-section { margin-bottom: 22px; }
.split .lead { margin: 0 0 16px; }
.muted-text { color: var(--ink-2); margin: 0; }

/* Диаграмма последовательности: кто кому пишет */
.seq { padding: 22px 18px 18px; box-shadow: var(--shadow-card); }
.seq-head { display: grid; grid-template-columns: repeat(var(--lanes), 1fr); }
.seq-head > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.seq-head .ai { --s: 34px; }
.seq-body { position: relative; margin-top: 10px; padding: 8px 0 6px; }
.life { position: absolute; top: 0; bottom: 0; left: calc((var(--i) - 0.5) / var(--lanes) * 100%); border-left: 1px dashed rgba(0, 0, 0, 0.14); }
.seq-row { position: relative; height: 50px; }
.seq-arrow, .seq-label { position: absolute; left: calc((var(--a) - 0.5) / var(--lanes) * 100%); width: calc(var(--span) / var(--lanes) * 100%); }
.seq-arrow { bottom: 14px; height: 2px; background: var(--c, #1a1a1a); transform-origin: left; }
.seq-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--c, #1a1a1a); border-right: 0; }
.seq-arrow::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #1a1a1a); }
.seq-row.rtl .seq-arrow { transform-origin: right; }
.seq-row.rtl .seq-arrow::after { right: auto; left: -1px; border-left: 0; border-right: 7px solid var(--c, #1a1a1a); }
.seq-row.rtl .seq-arrow::before { left: auto; right: -4px; }
.seq-arrow.t-handoff { --c: var(--e-handoff); }
.seq-arrow.t-review { --c: var(--e-review); }
.seq-arrow.t-context { --c: var(--e-context); background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); }
.seq-label { bottom: 22px; display: flex; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.seq-row .seq-arrow { transform: scaleX(0); transition: transform 0.7s var(--ease-out); }
.seq-row .seq-label { opacity: 0; transition: opacity 0.5s 0.3s; }
.seq-row.is-shown .seq-arrow { transform: scaleX(1); }
.seq-row.is-shown .seq-label { opacity: 1; }
.seq-legend { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Память */
.report { padding: 0; box-shadow: var(--shadow-card); }
.report header { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.live-pill { margin-left: auto; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #eefbe9; color: #2a7a3a; }
.timeline { list-style: none; margin: 0; padding: 20px 22px 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 54px 1fr; column-gap: 14px; padding: 0 0 20px; }
.timeline li::before { content: ""; position: absolute; left: 66px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-500); }
.timeline li::after { content: ""; position: absolute; left: 69px; top: 18px; bottom: 2px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline time { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.timeline .tag, .timeline p { grid-column: 2; margin-left: 18px; }
.timeline .tag { justify-self: start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 0.5px solid var(--line-strong); border-radius: 6px; padding: 2px 7px; }
.timeline .tag.sun { background: var(--sun-200); border-color: transparent; color: #4a3600; }
.timeline p { grid-row: 2; font-size: 14px; line-height: 1.5; margin-top: 6px; margin-bottom: 0; }
.report-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--sun-50); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.report-foot .mono { font-size: 11px; color: var(--ink-2); white-space: nowrap; margin-right: 4px; }
.share-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-pill); font-size: 12.5px; font-weight: 500; }

/* ---------- Бенто ---------- */
.features { padding-top: 200px; }
.features .h-section-sans { margin-bottom: 64px; }
.bento .span-2 { grid-column: 1 / -1; }
.card-stage { position: relative; height: 240px; min-height: 0; }
.stage-canvas { display: block; height: 320px; background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px), linear-gradient(180deg, transparent, var(--sun-50) 60%); background-size: 16px 16px, auto; }
.canvas-graph { position: absolute; inset: 24px 40px 24px; }
.card-more { position: absolute; right: 32px; top: 32px; margin: 0; font-size: 14px; }

.stage-teams { align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; align-content: center; }
.team { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card); display: grid; gap: 10px; justify-items: start; }
.team .mono { font-size: 10px; margin: 0; color: var(--ink-3); }
.team .ai { --s: 34px; border-radius: 50%; }
.team .stack .ai + .ai { margin-left: -9px; }

.stage-channels { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding-left: 40px; padding-right: 40px; }
.ch { --stack-ring: transparent; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--ink-2); background: rgba(255, 255, 255, 0.6); }
.ch > span:first-child { color: var(--ink-3); }
.ch .stack { margin-left: auto; }
.ch em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--sun-300); color: #3b2a00; }
.ch.is-on { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }

.stage-status { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding-left: 28px; padding-right: 28px; }
.status-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-card); }
.status-card > div { flex: 1; min-width: 0; }
.status-card b { display: block; font-size: 14px; font-weight: 600; }
.status-card small { color: var(--ink-3); font-size: 12.5px; }
.ring { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.08); border-top-color: var(--sun-600); animation: spin 1s linear infinite; }

.stage-tasks { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding-left: 48px; padding-right: 48px; }
.task { display: flex; align-items: center; gap: 12px; padding: 9px 4px; font-size: 14px; border-bottom: 1px solid var(--line); }
.task > .ai { margin-left: auto; }
.task > i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(0, 0, 0, 0.25); flex: none; display: grid; place-items: center; }
.task.done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.25); }
.task.done > i { background: #000; border-color: #000; }
.task.done > i::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.task.now { font-weight: 500; }
.task.now > i { border-color: var(--sun-600); background: var(--sun-100); animation: pulse-sun 1.6s infinite; }
@keyframes pulse-sun { 50% { box-shadow: 0 0 0 4px rgba(242, 191, 58, 0.25); } }

/* ---------- Безопасность ---------- */
.security { padding-top: 200px; }
.sec-card { text-align: center; padding: 64px 0 48px; overflow: hidden; }
.lock { margin: 0 auto 20px; }
.sec-card .h-section-sans { margin-bottom: 28px; padding: 0 24px; }
.sec-card .marquee + .marquee { margin-top: 2px; }
.sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: left; padding: 48px 48px 0; }
.sec-grid .h-item { font-size: 20px; margin-bottom: 8px; }
.sec-grid .small { margin: 0; }
.soon-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 3px; padding: 2px 6px; border-radius: 5px; background: var(--chip-solid); color: var(--ink-2); }
.sec-more { margin-top: 40px; }

/* ---------- Финал ---------- */
.final { position: relative; text-align: center; padding: 200px 0 0; overflow-x: clip; }
.final .lead { margin: 16px 0 56px; color: var(--ink-2); padding: 0 var(--gutter); }
.final-arc { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px 72px; position: relative; }
.final-arc::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: max(1400px, 140vw); height: 100%; transform: translateX(-50%); background: var(--paper); border-radius: 50% 50% 0 0 / 120px 120px 0 0; box-shadow: var(--shadow-arc); }
.caption a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Внутренние страницы ---------- */
.page-hero { position: relative; padding: 150px 0 70px; text-align: center; }
.page-hero .h-section { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.055em; }
.page-hero .lead { max-width: 620px; margin: 18px auto 0; color: var(--ink-2); }
.page-hero .mono { color: var(--ink-3); margin: 0 0 18px; }
.sun-band { position: relative; overflow: hidden; isolation: isolate; color: #fffdf3; background: linear-gradient(180deg, var(--sun-500), #f7d36a); }
.sun-band .lead, .sun-band .mono { color: rgba(255, 253, 243, 0.88); }

/* Карта связей */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.map-card { position: relative; padding: 0; overflow: hidden; }
.map-graph { height: 600px; background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px); background-size: 18px 18px; background-color: #fffdf7; }
.map-graph .chip { cursor: pointer; padding: 8px 14px 8px 8px; font-size: 14px; }
.map-graph .chip .ai { --s: 30px; }
.map-graph .chip.you-node { background: #111; color: #fff; }
.map-graph .chip.you-node em { color: rgba(255, 255, 255, 0.6); }
.map-graph .chip.is-selected { box-shadow: var(--shadow-card), 0 0 0 2px #000; }
.map-legend { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.map-hint { position: absolute; right: 18px; top: 16px; z-index: 3; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.map-panel { position: sticky; top: 90px; padding: 24px; min-height: 300px; }
.map-panel .who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.map-panel .who .ai { --s: 44px; }
.map-panel h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: -0.04em; line-height: 1.1; }
.map-panel .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.map-panel p { font-size: 15px; color: var(--ink-2); margin: 0 0 18px; }
.map-panel h4 { margin: 18px 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.map-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.map-panel li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.map-panel li .verb { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 5px; background: #fff; color: var(--c, var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.map-panel .empty { color: var(--ink-3); font-size: 14px; }
.map-below { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 80px; }
.map-below .h-item { margin-bottom: 8px; }

/* Загрузка */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dl-card { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.dl-card .h-item { margin: 0; }
.dl-card p { margin: 0 0 12px; }
.dl-card .btn { margin-top: auto; align-self: flex-start; }
.dl-card.is-main { box-shadow: var(--shadow-card), 0 0 0 1.5px var(--sun-600); }
.toast { position: fixed; left: 50%; top: 84px; z-index: 60; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 12px; background: #111; color: #fff; font-size: 14px; transition: opacity 0.3s, transform 0.3s var(--ease-out); max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.req { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 90px; }
.req div { border-top: 1px solid var(--line); padding-top: 16px; font-size: 15px; }
.req b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }

/* Журнал изменений */
.log { max-width: 860px; margin: 0 auto; }
.log-entry { display: grid; grid-template-columns: 170px 1fr; gap: 32px; padding: 44px 0; border-top: 1px solid var(--line); }
.log-entry aside { position: sticky; top: 100px; align-self: start; }
.log-entry .ver { font-family: var(--font-serif); font-weight: 500; font-size: 32px; letter-spacing: -0.04em; line-height: 1; }
.log-entry time { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.log-entry h3 { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: -0.035em; }
.log-entry ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.log-entry li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.log-entry li .label { flex: none; height: 22px; font-size: 10px; min-width: 64px; justify-content: center; margin-top: 1px; }
.log-entry li .label.new { background: var(--lime); border-color: transparent; color: #3a4a00; }
.log-entry li .label.fix { background: var(--chip-solid); border-color: transparent; }
.log-entry li .label.model { background: var(--sun-100); border-color: transparent; color: #6b4d00; }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 16px 80px; }
.notfound .wordmark { color: var(--sun-600); font-size: clamp(110px, 20vw, 220px); }

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .split, .split-reverse { grid-template-columns: 1fr; gap: 48px; padding-top: 140px; }
  .split-reverse .split-text { order: 0; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-panel { position: static; }
  .dl-grid, .map-below { grid-template-columns: 1fr; }
  .req { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero { padding: 96px 0 150px; }
  .hero-window-wrap { margin-top: -150px; }
  .app { grid-template-columns: 1fr; height: 600px; }
  .app-side { display: none; }
  .app-status span:not(.wait):not(:first-child) { display: none; }
  .scenes { height: 460px; }
  .scene { padding: 14px; }
  .org { height: 320px; margin: 0 8px 8px; }
  .org .chip em { display: none; }
  .pipe { padding: 4px 12px 14px; }
  .pipe .pipe-to { display: none; }
  .how, .features, .security { padding-top: 140px; }
  .final { padding-top: 140px; }
  .sec-card { padding: 48px 0 40px; }
  .sec-grid { grid-template-columns: 1fr; padding: 36px 24px 0; }
  .seq { padding: 18px 8px 14px; }
  .seq-head > div { font-size: 10.5px; }
  .seq-head .ai { --s: 28px; }
  .seq-label { font-size: 9.5px; }
  .stage-canvas { height: 470px; }
  .canvas-graph [data-id="claude"] { left: 50% !important; top: 7% !important; }
  .canvas-graph [data-id="gemini"] { left: 20% !important; top: 30% !important; }
  .canvas-graph [data-id="qwen"] { left: 80% !important; top: 30% !important; }
  .canvas-graph [data-id="deepseek"] { left: 22% !important; top: 63% !important; }
  .canvas-graph [data-id="mistral"] { left: 82% !important; top: 70% !important; }
  .canvas-graph [data-id="gpt"] { left: 52% !important; top: 93% !important; }
  .canvas-graph { inset: 20px 8px; }
  .canvas-graph .chip { padding: 4px 8px 4px 4px; font-size: 12px; gap: 6px; }
  .canvas-graph .chip .st { display: none; }
  .canvas-graph .glabel { font-size: 9.5px; padding: 2px 6px; }
  .card-more { position: static; margin-top: 18px; }
  .stage-channels, .stage-status, .stage-tasks { padding-left: 12px; padding-right: 12px; }
  .map-graph { height: 560px; }
  .map-graph .chip { padding: 5px 9px 5px 5px; font-size: 12px; }
  .map-graph .chip em { display: none; }
  .map-graph .chip .ai { --s: 24px; }
  .map-graph .glabel { font-size: 9px; }
  .map-hint { display: none; }
  .log-entry { grid-template-columns: 1fr; gap: 14px; }
  .log-entry aside { position: static; }
  .page-hero { padding: 120px 0 50px; }
  .req { grid-template-columns: 1fr; }
}

/* Солнечная шапка внутренних страниц */
.sun-hero.page-hero { padding-bottom: 110px; margin-bottom: 64px; }
.sun-hero.page-hero .lead, .sun-hero.page-hero .mono { color: rgba(255, 253, 243, 0.92); }
.sun-hero.page-hero .h-section { color: #fffdf3; }
.sun-hero.page-hero .container { position: relative; z-index: 1; }

/* Схемы внутри доксов */
.prose .figure .graph { height: 340px; }
.prose .figure .chip em { display: inline; }
.prose .seq { box-shadow: none; padding: 6px 0 0; }
.prose .model-row { display: flex; align-items: center; gap: 10px; }
.map-graph .chip.you-node .ai { display: none; }
.map-graph .chip.you-node { padding-left: 14px; }