/* Design contract: docs/landing-style.md. White canvas, Dipneo blue accents.
   Read order: bold title → supporting line → small secondary label.
   Product screenshots never exceed their native Retina budget, including zoom. */
:root {
  color-scheme: light;
  --page: #fff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #e5e7eb;
  --panel: #f5f7fa;
  --accent: #2fc8dd;
  --accent-2: #4a7cf3;
  --accent-3: #8f63ff;
  --link: #1769cf;
  --brand-gradient: linear-gradient(110deg, #25b6d0, #4a7cf3 58%, #8563f5);
  --ease: cubic-bezier(.2,.7,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
html.modal-open { overflow: hidden; }
/* Блокировка прокрутки следует за фактическим состоянием диалога, а не только за классом. */
html:has(dialog[open]),body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button,a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1,h2,h3,h4,p { margin: 0; }
h1,h2,h3 { font-weight: 700; }
h1,h2 { letter-spacing: -.045em; line-height: 1.08; }
h2 { font-size: clamp(40px,4.5vw,64px); }
h3 { letter-spacing: -.025em; line-height: 1.2; }
p { line-height: 1.55; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }
::selection { background: #d8edff; color: #163768; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 14px; background: #e3f4ff; z-index: 200; }
.skip-link:focus { top: 10px; }
.section-shell { width: min(1120px,calc(100% - 96px)); margin-inline: auto; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .03em; line-height: 1.6; text-transform: none; color: var(--muted); }
.accent-text { color: var(--link); }
.muted-text { color: #6e6e73; }
.section-top { display: flex; align-items: center; gap: 20px; margin: 24px 0 40px; }
.section-number { font: 10px ui-monospace,SFMono-Regular,monospace; color: #96969b; margin-left: auto; }
.section-lead { color: var(--muted); font-size: 20px; margin-top: 24px; max-width: 640px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 0; border-radius: 999px; padding: 15px 24px; font-size: 14px; font-weight: 600; line-height: 1.4; transition: transform .25s,box-shadow .25s,background .25s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 19px; font-weight: 400; }
.button-accent { background: var(--brand-gradient); color: #fff; }
.button-accent:hover { box-shadow: 0 8px 28px #4a7cf32b; }
.button-dark { background: #1d1d1f; color: #fff; }
.live-dot { width: 5px; height: 5px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: var(--accent-2); }
.site-header { position: sticky; top: 0; z-index: 50; height: 72px; padding: 0 max(32px,calc((100vw - 1200px)/2)); display: flex; align-items: center; gap: 24px; background: #ffffffed; backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 700; letter-spacing: -.045em; flex-shrink: 0; }
.brand img { border-radius: 9px; }
/* Чёрная подложка переключателя; активная вкладка — светлая плашка с чёрным текстом. */
.audience-switch { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: #111113; }
.audience-switch button { border: 0; background: none; color: #b9bac4; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 8px 15px; white-space: nowrap; transition: background-color .34s var(--ease),color .34s var(--ease),box-shadow .34s var(--ease); }
.audience-switch button:not([aria-pressed=true]):hover { color: #ffffff; }
.audience-switch button[aria-pressed=true] { color: #111113; background: #f5f5f7; font-weight: 750; box-shadow: 0 1px 6px #00000059; }
@keyframes audience-switch-pop { 0% { transform: scale(.9); } 62% { transform: scale(1.04); } 100% { transform: scale(1); } }
.audience-switch.is-switching button[aria-pressed=true] { animation: audience-switch-pop .42s var(--ease); }
.site-header nav { display: flex; gap: 24px; font-size: 12px; margin-left: auto; }
.site-header nav a:hover,.role-links a:hover { color: var(--link); }
.header-download { flex-shrink: 0; border: 1px solid var(--line); font-size: 12px; padding: 10px 17px; gap: 15px; }
.header-download:hover { background: #f3f8ff; }
.menu-button { display: none; background: none; border: 0; padding: 8px; }
.menu-button span { display: block; width: 21px; height: 1px; margin: 6px 0; background: var(--ink); }
.mobile-nav { position: fixed; top: 72px; left: 0; right: 0; padding: 15px 24px; background: #fff; border-bottom: 1px solid var(--line); z-index: 49; }
.mobile-nav a,.mobile-nav>button { display: block; font-size: 14px; padding: 12px 0; }
.hero { position: relative; min-height: 690px; max-width: 1440px; margin: auto; overflow: hidden; background: #fff; }
.hero-grid { position: absolute; width: 50%; height: 100%; right: 0; background: radial-gradient(ellipse at 55% 50%,#e6f4ff 0%,#f7faff 40%,#fff 70%); }
.hero-content { position: relative; z-index: 3; padding: 80px 0 110px max(48px,calc((100vw - 1120px)/2)); width: 66%; }
.hero h1 { font-size: clamp(52px,5.55vw,82px); white-space: nowrap; }
.hero h1>span { color: #6e6e73; }
.hero-lead { font-size: 24px; color: var(--muted); margin-top: 14px; max-width: 600px; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; margin-top: 19px; color: #85858a; }
/* Технологическая плашка: чёрная, с белым текстом, без маркера — коротко называет основу продукта. */
.hero-badge { display: inline-flex; align-items: center; margin-top: 22px; padding: 6px 12px; border: 1px solid #0f0f11; border-radius: 999px; background: #111113; color: #ffffff; font-size: 11px; font-weight: 650; letter-spacing: .005em; line-height: 1.15; }
/* Описание продукта использует общую плашку с мягкой фирменной заливкой и обводкой. */
.hero .hero-badge.hero-intro {
  justify-content: center; max-width: 100%; margin: 0 0 24px; padding: 10px 20px;
  border-color: transparent; color: #3d527c; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; line-height: 1.4; text-wrap: balance;
  background: linear-gradient(110deg,#f0fbfd,#f1f5fe 58%,#f7f2ff) padding-box,
    linear-gradient(110deg,#2fc8dd4d,#4a7cf33d 58%,#8f63ff3d) border-box;
  box-shadow: inset 0 1px 0 #ffffffcc;
}
/* Платформы установки стоят под основной кнопкой — рядом с действием, к которому относятся.
   Отступы первого экрана задаёт flex-раскладка .hero-content, поэтому margin здесь не нужен. */
.hero-platforms { font-size: 11px; font-weight: 650; letter-spacing: .08em; color: #6e6e73; }
#first-task { text-align: center; border-top: 0; }
#first-task .section-lead { max-width: 640px; margin: 22px auto 0; }
#first-task .workflow-prompt { margin: 34px auto; text-align: left; }
#first-task .tech-tags { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 800px; gap: 8px; margin: 22px auto 0; }
#first-task .tech-tags button { padding: 8px 11px; border: 1px solid transparent; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; color: #58677d; background: #f5f7fb; border-radius: 8px; }
#first-task .tech-tags button:hover { color: #3f6fc4; background: #eef4fd; }
#first-task .tech-tags button[aria-pressed=true] { color: #3f6fc4; background: #eaf0fd; border-color: #4a7cf366; }
#first-task .tech-tags button:focus-visible { outline: 2px solid #4a7cf3; outline-offset: 3px; }
.button-hero { margin-top: 22px; min-width: 300px; padding: 19px 28px; font-size: 17px; }
.hero-meta { margin-top: 16px; font-size: 10px; color: #85858a; }
.paper-orbit { position: absolute; right: 2%; top: 100px; width: 40%; height: 490px; pointer-events: none; }
.orbit-line { position: absolute; width: 480px; height: 480px; border: 1px solid #5ca1e510; border-radius: 50%; top: 10px; left: 0; }
.orbit-two { width: 330px; height: 330px; top: 80px; left: 75px; }
.paper { position: absolute; padding: 22px; width: 200px; border: 1px solid #dbe6f2; border-radius: 7px; background: #fff; color: #23364c; box-shadow: 0 20px 45px #163a6514; transform: translate3d(0,var(--drift,0px),0) rotate(var(--rotate)); }
.paper-label { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; margin-bottom: 17px; border-bottom: 1px solid #e2e9f2; font-size: 10px; color: #8a99aa; }
.file-symbol { display: grid; place-items: center; width: 23px; height: 27px; border-radius: 3px; font-weight: 700; font-size: 10px; }
.blue { color: #397aca; background: #e5f0fc; }
.green { color: #438b85; background: #e5f3f2; }
.coral { color: #8c75c5; background: #eee9fb; }
.paper h3 { font-size: 20px; }
.paper-sheet { top: 20px; left: 0; width: 195px; --rotate: -13deg; background: #f5faff; }
.paper-report { z-index: 3; top: 140px; left: 40%; width: 220px; --rotate: 9deg; }
.paper-pdf { z-index: 2; top: 300px; left: 0; width: 200px; --rotate: -7deg; }
.paper-lines { display: grid; gap: 7px; margin: 20px 0; }
.paper-lines i { height: 3px; background: #d9e2ed; border-radius: 3px; }
.paper-lines i:last-child { width: 65%; }
.mini-table { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid #c5dcef; background: #c5dcef; }
.mini-table i { height: 19px; background: #f5faff; }
.mini-table i:nth-child(-n+3) { background: #d9eaf9; }
.paper-total { margin-top: 15px; font-size: 9px; display: flex; justify-content: space-between; }
.paper-total b { color: var(--link); font-weight: 500; }
.mini-chart { display: flex; gap: 7px; align-items: end; height: 64px; margin: 22px 0; }
.mini-chart i { width: 22px; height: 35%; background: #69b7e3; }
.mini-chart i:nth-child(2) { height: 65%; background: #8fb6f2; }
.mini-chart i:nth-child(3) { height: 45%; }
.mini-chart i:nth-child(4) { height: 80%; background: #8a8ee9; }
.mini-chart i:nth-child(5) { height: 100%; background: #4a7cf3; }
.paper-annotation { margin-top: 20px; padding: 9px 7px; font-size: 9px; background: #eaf1ff; border-left: 2px solid #4a7cf3; }
.orbit-result { position: absolute; z-index: 4; top: 465px; left: 30%; padding: 14px 17px; background: #ffffffed; border: 1px solid #dce7f5; border-radius: 12px; box-shadow: 0 8px 25px #214a7814; display: flex; gap: 11px; align-items: center; white-space: nowrap; transform: translateY(var(--drift,0px)); }
.orbit-result b { display: block; font-size: 11px; font-weight: 600; }
.orbit-result div>span { display: block; font-size: 9px; color: #8191a3; margin-top: 4px; }
.result-check { display: grid; place-items: center; border: 1px solid #c9dff6; border-radius: 50%; width: 31px; height: 31px; background: #ecf5ff; color: var(--link); flex-shrink: 0; }
.intro { padding: 115px 0 50px; }
.intro-head,.knowledge-head,.edition-heading { display: block; }
.intro-head>p,.knowledge-head>p,.edition-heading>p { font-size: 20px; color: var(--muted); max-width: 690px; margin-top: 24px; }
.intro .prompt-card { max-width: 690px; }
.intro .toolkit .prompt-card { margin-top: 24px; }
.role-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; border-top: 1px solid var(--line); margin-top: 50px; }
.role-links a { padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.role-links span { font-size: 19px; color: var(--link); }
.showcase { padding: 20px 0 60px; }
.showcase-caption { display: flex; justify-content: space-between; margin-bottom: 20px; }
.showcase-caption>span:last-child { font-size: 11px; color: var(--muted); }
.showcase>.carousel { max-width: 800px; margin-inline: auto; padding: 24px; background: var(--panel); border-radius: 20px; }
.carousel { min-width: 0; }
.carousel-slide { margin: 0; }
.screenshot-button { display: block; width: 100%; max-width: var(--retina-width,740px); margin-inline: auto; padding: 0; background: transparent; border: 0; overflow: hidden; cursor: zoom-in; text-align: initial; border-radius: 8px; }
.screenshot-button img { width: 100%; height: auto; object-fit: contain; image-rendering: auto; filter: none; }
.carousel-slide .screenshot-button { height: auto; }
.carousel-slide figcaption { text-align: center; font-size: 11px; color: var(--muted); margin-top: 18px; }
.carousel-controls { display: flex; gap: 18px; align-items: center; padding-top: 20px; }
.carousel-controls>div:last-child { margin-left: auto; display: flex; gap: 6px; }
.carousel-controls button { background: #e7ebf1; border: 0; border-radius: 50%; color: #5c6676; width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px; }
.carousel-controls button:hover { background: #dce9fb; color: var(--link); }
.carousel-dots { display: flex; gap: 5px; }
.carousel-dots button { font: 10px ui-monospace,monospace; background: transparent; }
.carousel-dots button[aria-pressed=true] { background: #dce9fb; color: var(--link); }
.carousel-counter { font: 10px ui-monospace,monospace; color: #959ba5; }
.office-story { height: 220svh; min-height: 1350px; padding-top: 70px; }
.story-sticky { position: sticky; top: 96px; padding-bottom: 20px; }
.story-heading { display: flex; gap: 25px; justify-content: space-between; align-items: end; margin-bottom: 38px; }
.story-heading h2 { font-size: clamp(40px,4vw,56px); }
.story-heading .section-lead { margin-top: 20px; font-size: 18px; max-width: 620px; }
.story-heading .eyebrow { margin-top: 18px; }
.story-desktop-note { font-size: 10px; color: #96969b; white-space: nowrap; }
.story-body { display: grid; grid-template-columns: 34% 1fr; gap: 60px; align-items: center; }
.story-copy { height: 376px; position: relative; }
.story-step { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s,transform .5s var(--ease); }
.story-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.step-number { display: block; font: 11px ui-monospace,monospace; color: var(--link); margin-bottom: 18px; }
.story-step h3 { font-size: 23px; }
.story-step>p { font-size: 15px; color: var(--muted); margin-top: 15px; }
.story-step .prompt-card { margin-top: 22px; padding: 15px; }
.story-step .prompt-text { font-size: 13px; }
.story-progress { position: absolute; bottom: -10px; left: 0; display: flex; gap: 7px; }
.story-progress i { height: 3px; width: 30px; background: #e5e9ee; border-radius: 2px; }
.story-progress i.active { background: var(--accent-2); }
.story-media { position: relative; min-width: 0; padding: 20px; border-radius: 18px; background: var(--panel); display: grid; place-items: center; min-height: 290px; }
.story-screen { max-width: var(--retina-width,320px); transform: scale(var(--zoom,1)); transform-origin: center; transition: transform .3s linear; }
.story-screen img { transform: none; }
.screen-callout { position: absolute; bottom: -18px; left: 20px; display: flex; align-items: center; gap: 11px; padding: 13px 17px; background: #fff; border: 1px solid #e1e8f2; border-radius: 12px; box-shadow: 0 9px 25px #224e7710; }
.screen-callout b { font-size: 11px; display: block; font-weight: 600; }
.screen-callout div>span { display: block; font-size: 9px; color: #8a94a0; margin-top: 4px; }
.screenshot-caption { font-size: 10px; color: #8a8f98; margin-top: 35px; text-align: right; }
/* Скрытый текст для скринридера: название навыка остаётся коротким, а описание доступно. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.formats { padding: 60px 0 100px; border-bottom: 1px solid var(--line); }
.formats-heading { margin-bottom: 45px; }
.formats-heading h2 { font-size: 38px; }
.formats-heading .section-lead { font-size: 18px; }
.formats-heading .eyebrow { margin-top: 20px; }
.formats-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.format-code { font: 29px ui-monospace,SFMono-Regular,monospace; letter-spacing: -.04em; }
.formats-list p { margin-top: 15px; font-size: 12px; color: var(--muted); }
.format-family { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; font: 10.5px/1.6 ui-monospace,SFMono-Regular,monospace; color: #9a9ca3; letter-spacing: -.01em; margin-top: 12px !important; }
.format-family>span { white-space: nowrap; }
.format-family>span:not(:last-child)::after { content: "·"; margin-left: 7px; color: #c3c6cd; }
.formats .prompt-card { margin-top: 40px; max-width: 690px; }
.format-modes { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 900px; }
.format-modes-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 0; }
.format-modes-list li { flex: 1 1 220px; max-width: 300px; }
.format-modes-list b { display: block; font-size: 11px; font-weight: 650; letter-spacing: .01em; color: #5c6068; }
.format-modes-list span { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.6; color: #8a8f98; }
.format-note { margin-top: 26px; font-size: 10.5px; line-height: 1.65; color: #8a8f98; }
.format-note a { color: #8a8f98; border-bottom: 1px solid #d9dde4; }
.format-note a:hover, .format-note a:focus-visible { color: var(--link); border-bottom-color: currentColor; }
.knowledge { padding: 110px 0; }
.knowledge-stage { display: grid; grid-template-columns: 40% 1fr; gap: 45px; align-items: center; }
.source-chip { display: grid; grid-template-columns: 25px 1fr; gap: 4px 8px; border: 1px solid #e1e8f2; border-radius: 9px; padding: 17px 20px; margin-bottom: 10px; background: #f7faff; }
.source-chip span { font: 10px ui-monospace,monospace; color: #9aaabe; grid-row: span 2; padding-top: 2px; }
.source-chip b { font-size: 12px; font-weight: 600; }
.source-chip em { font-style: normal; font-size: 10px; color: #8896a6; }
.source-chip:nth-child(2) { margin-left: 12px; }
.source-chip:nth-child(3) { margin-left: 24px; }
.knowledge .prompt-card { margin-top: 25px; }
.kb-image { min-width: 0; padding: 20px; border-radius: 18px; background: var(--panel); }
.knowledge-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; margin-top: 50px; }
.knowledge-benefits>div>span { display: block; font-size: 26px; color: var(--link); margin-bottom: 15px; }
.knowledge-benefits h3 { font-size: 17px; margin-bottom: 13px; }
.knowledge-benefits p { font-size: 14px; color: var(--muted); }
.module-note { font-size: 11px; color: #8a8f98; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 22px; }
.analytics { padding: 100px 0; border-top: 1px solid var(--line); }
.analytics-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.analytics .section-top { margin-bottom: 24px; }
.analytics-copy .prompt-card { margin: 24px 0; }
.check-list { list-style: none; padding: 0; margin: 26px 0; }
.check-list li { position: relative; font-size: 14px; line-height: 1.5; padding-left: 23px; margin: 14px 0; }
.check-list li:before { content: '✓'; position: absolute; left: 0; color: var(--link); }
.code-note { display: flex; gap: 16px; font-size: 11px; color: #8a8f98; line-height: 1.6; padding-top: 20px; border-top: 1px solid var(--line); }
.code-note>span { font: 20px ui-monospace,monospace; color: var(--link); }
.analytics-media { padding: 22px; background: var(--panel); border-radius: 18px; min-width: 0; }
.metric-strip { font-size: 12px; color: #768398; display: flex; justify-content: space-between; margin-bottom: 25px; }
.metric-strip b { font-size: 20px; font-weight: 600; }
.analytics-media .screenshot-caption { margin: 20px 0 0; text-align: center; }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 60px 0 120px; }
.team-copy>p:not(.eyebrow) { margin-top: 24px; font-size: 18px; color: var(--muted); }
.team-copy .eyebrow { margin-top: 18px; }
.team-copy .prompt-card { margin-top: 28px; }
.agent-diagram { text-align: center; }
.agent-root { background: #f3f7fd; border: 1px solid #dce6f4; border-radius: 12px; padding: 20px 34px; display: grid; grid-template-columns: 48px auto; gap: 0 12px; align-items: center; text-align: left; width: max-content; margin: auto; }
.agent-root img { grid-row: span 2; border-radius: 10px; }
.agent-root>span { font-size: 20px; font-weight: 700; }
.agent-root small { font-size: 11px; color: #8191a7; }
.agent-connectors { width: 68%; height: 64px; border-bottom: 1px solid #bed3ed; position: relative; margin: auto; }
.agent-connectors:before { content: ''; position: absolute; left: 50%; width: 1px; height: 64px; background: #bed3ed; }
.agent-children { display: flex; gap: 10px; }
.agent-children>div { flex: 1; position: relative; border: 1px solid #e1e7f1; background: #fafbfe; padding: 25px 10px 20px; border-radius: 10px; }
.agent-children>div:before { content: ''; position: absolute; width: 1px; height: 18px; top: -18px; left: 50%; background: #bed3ed; }
.agent-children b { display: block; font-size: 12px; font-weight: 600; margin-top: 12px; }
.agent-children small { display: block; font-size: 10px; color: #8c98ab; margin-top: 6px; }
.agent-pulse { display: inline-block; width: 6px; height: 6px; background: var(--accent-2); border-radius: 50%; animation: pulse 3s infinite; }
.agent-children>div:nth-child(2) .agent-pulse { animation-delay: 1s; }
.agent-children>div:nth-child(3) .agent-pulse { animation-delay: 2s; }
.shared-files { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; color: #6b7e97; padding: 18px; margin-top: 25px; border: 1px dashed #ccdaef; border-radius: 10px; }
.shared-files>span { font-size: 20px; }
.diagram-caption { font-size: 10px; color: #99a3b2; margin-top: 15px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #4a7cf310; } }
.developers { padding: 100px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.developer-heading { display: block; }
.developer-heading>div>p { margin-top: 24px; font-size: 20px; color: var(--muted); max-width: 650px; }
.text-link { display: inline-block; font-size: 14px; color: var(--link); margin-top: 20px; }
.dev-prompt { max-width: 740px; margin: 30px auto; }
.dev-screenshot { max-width: 800px; margin-inline: auto; padding: 12px 22px 20px; background: #101b2a; color: #e5f0ff; border-radius: 20px; }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 18px; font: 10px ui-monospace,monospace; color: #8c9fb8; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #435772; }
.dev-screenshot .carousel-slide figcaption { color: #9aaec8; }
.dev-screenshot .carousel-controls button { background: #22354d; color: #96adcb; }
.dev-screenshot .carousel-dots button[aria-pressed=true] { background: #375986; color: #fff; }
.dev-screenshot .carousel-counter { color: #7b92b0; }
.toolkit { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 70px; }
.toolkit h3 { font-size: 28px; margin-bottom: 20px; }
.toolkit>div>p { font-size: 16px; color: var(--muted); }
.tech-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.tech-tags span { padding: 7px 10px; background: #f0f5fc; color: #6984a6; font: 10px ui-monospace,monospace; border-radius: 6px; }
.tool-details { margin-top: 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tool-details summary { display: flex; justify-content: space-between; padding: 24px 0; font-size: 14px; cursor: pointer; list-style: none; }
.tool-details summary::-webkit-details-marker { display: none; }
.tool-details summary>span { font-size: 23px; color: var(--link); transition: transform .3s; }
.tool-details[open] summary>span { transform: rotate(45deg); }
.tool-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 50px; padding: 15px 0 30px; }
.tool-groups h4 { font-size: 14px; margin-bottom: 12px; font-weight: 600; }
.tool-groups p { font-size: 12px; color: #788595; overflow-wrap: anywhere; }
.tool-groups p:nth-child(2) { font: 11px/1.7 ui-monospace,monospace; color: #6684b3; margin-bottom: 8px; }
.tool-availability { font-size: 11px; color: #9099a6; margin-bottom: 30px; max-width: 800px; }
.editions { padding: 120px 0; }
.edition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edition { border: 1px solid var(--line); border-radius: 20px; padding: 36px; background: #fafbfc; display: flex; flex-direction: column; }
.business { background: #f6f9ff; border-color: #dbe6fb; }
.edition-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 11px; color: #8792a4; margin-bottom: 25px; }
.edition-badge { background: #ecf1f8; border-radius: 999px; padding: 7px 10px; font-size: 10px; }
.business .edition-badge { color: #6684bb; background: #e9f0ff; }
.edition h3 { font-size: 29px; }
.price { font-size: 46px; letter-spacing: -.04em; font-weight: 700; margin: 28px 0 24px; line-height: 1.2; }
.price span { display: block; margin-top: 12px; font-size: 11px; color: #8792a4; font-weight: 400; letter-spacing: 0; }
.edition-description { font-size: 15px; color: var(--muted); }
.edition .check-list { flex: 1; }
.edition .check-list li { font-size: 13px; }
.edition .prompt-card { margin: 15px 0 22px; }
.edition .prompt-text { font-size: 13px; }
.edition .button { width: 100%; font-size: 13px; }
.edition-footnote { font-size: 10px; color: #8b94a2; margin-top: 18px; min-height: 50px; }
.business-note { font-size: 11px; line-height: 1.6; color: #8c96a5; max-width: 850px; margin: 25px auto 0; text-align: center; }
body[data-audience=business] .edition.business { outline: 2px solid #4a7cf340; outline-offset: 4px; }
.final-cta { position: relative; overflow: hidden; text-align: center; padding: 75px 20px 95px; }
.final-cta h2 { font-size: clamp(55px,6.5vw,88px); }
.final-cta .accent-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-cta .section-lead { margin: 24px auto 0; }
.final-cta .prompt-card { max-width: 500px; margin: 30px auto; text-align: left; }
.final-cta .button { min-width: 280px; }
.final-cta>p:last-child { font-size: 11px; color: #8d95a0; margin-top: 22px; }
.cta-orbit { display: none; }
.site-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 25px; align-items: center; padding: 40px 0 25px; border-top: 1px solid var(--line); }
.site-footer>.brand { font-size: 21px; }
.site-footer>span { font-size: 11px; color: #8e949e; }
.site-footer>div { display: flex; gap: 20px; font-size: 11px; }
.site-footer>.footer-legal { grid-column: 1/-1; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; font-size: 10px; }
.site-footer>.footer-legal a { color: #8e949e; }
.site-footer>.footer-legal a:hover { color: var(--ink); }
.site-footer button { border: 0; background: none; padding: 0; color: inherit; font-size: inherit; }
.site-footer small { grid-column: 1/-1; font-size: 10px; color: #a0a6b0; margin-top: 15px; }
/* Компания в подвале: сведения об ИП компактной группой, без карточки. */
.site-footer>.footer-company { grid-column: 1/-1; display: block; margin-top: 10px; max-width: 980px; font-size: 10px; line-height: 1.65; color: #8e949e; }
.site-footer>.footer-company h2 { margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; color: #6e6e73; }
.site-footer>.footer-company p { margin: 0; }
.site-footer>.footer-company a { color: inherit; text-decoration: underline; text-decoration-color: #c9ccd2; text-underline-offset: 2px; }
.site-footer>.footer-company a:hover { color: var(--ink); }
@media (max-width:700px) {
  .site-footer>.footer-company { font-size: 11px; line-height: 1.6; }
  .site-footer>.footer-company h2 { font-size: 11px; }
}
/* One prompt component in every section; the role is supporting metadata. */
.prompt-card { border: 1px solid #dce7f5; border-radius: 12px; padding: 18px 20px; background: #f6f9fe; color: #314a70; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.prompt-head>span { font: 9px ui-monospace,SFMono-Regular,monospace; color: #8095b3; display: flex; align-items: center; gap: 8px; }
.prompt-head>span:before { content: '>_'; color: #4a7cf3; font-size: 12px; }
.copy-prompt { background: none; border: 0; padding: 3px 0 3px 8px; font-size: 9px; color: #8698b1; min-height: 25px; flex-shrink: 0; }
.copy-prompt:before { content: '⧉'; font-size: 15px; margin-right: 5px; }
.copy-prompt:hover { color: var(--link); }
.prompt-text { font-size: 14px; line-height: 1.6; user-select: text; white-space: pre-line; }
.prompt-choices { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 12px; margin-top: 15px; border-top: 1px solid #e0e9f6; }
.prompt-choices button { border: 0; background: none; border-radius: 999px; padding: 6px 10px; color: #879ab6; font-size: 10px; }
.prompt-choices button[aria-pressed=true] { color: #4775bc; background: #e6eefc; }
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease),transform .7s var(--ease); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
dialog { border: 0; border-radius: 18px; color: var(--ink); max-height: 90svh; overscroll-behavior: contain; }
dialog::backdrop { background: #182339d9; backdrop-filter: blur(12px); }
/* Полноэкранный просмотр снимков: кадр показывается целиком, до 1:1 без апскейла. */
.lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border-radius: 0; background: #080d15; color: #f5f5f7; display: none; grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: 'top' 'stage' 'bottom'; overflow: hidden; }
.lightbox[open] { display: grid; }
.lightbox:focus,.lightbox:focus-visible { outline: none; }
.lightbox::backdrop { background: #080d15; backdrop-filter: none; }
.lightbox-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 4px 18px; }
.lightbox-counter { font: 11px/1 ui-monospace,SFMono-Regular,monospace; letter-spacing: .09em; color: #8fa3c0; }
.lightbox-tools { display: flex; align-items: center; gap: 8px; }
.lightbox-zoom { height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid #ffffff26; background: #ffffff10; color: #e8eefb; font-size: 11px; letter-spacing: .01em; }
.lightbox-zoom:hover { background: #ffffff20; }
.lightbox-zoom[hidden] { display: none; }
.lightbox-close.dialog-close { position: static; width: 40px; height: 40px; font-size: 24px; line-height: 1; background: #ffffff14; color: #fff; }
.lightbox-close.dialog-close:hover { background: #ffffff26; }
.lightbox-stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 8px; overflow: hidden; }
.lightbox-stage.is-zoomed { overflow: auto; overscroll-behavior: contain; padding: 0; align-items: flex-start; justify-content: flex-start; }
.lightbox-stage img { display: block; width: auto; height: auto; max-width: min(100%,var(--shot-width,100%)); max-height: 100%; margin: auto; object-fit: contain; border-radius: 10px; background: #0c1420; box-shadow: 0 28px 80px #000000b3; opacity: 0; transition: opacity .18s var(--ease); touch-action: manipulation; }
.lightbox-stage img.is-ready { opacity: 1; }
.lightbox-stage.is-zoomed img { max-width: none; max-height: none; width: var(--shot-width,auto); margin: 0; border-radius: 0; box-shadow: none; cursor: grab; }
.lightbox-stage.is-panning img { cursor: grabbing; }
.lightbox-bottom { grid-area: bottom; display: flex; align-items: center; justify-content: center; padding: 8px 18px 14px; }
.lightbox-meta { max-width: min(760px,70vw); text-align: center; }
.lightbox-title { font-size: 13px; line-height: 1.4; color: #eef2f9; }
.lightbox-title:empty { display: none; }
.lightbox-note { font-size: 10px; line-height: 1.4; color: #8fa3c0; margin-top: 4px; }
.lightbox-hint { font-size: 10px; line-height: 1.4; color: #7f93b0; margin-top: 5px; }
.lightbox-hint[hidden] { display: none; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff2b; background: #0b1521cc; backdrop-filter: blur(8px); color: #fff; font-size: 17px; opacity: .82; transition: opacity .2s var(--ease),background .2s var(--ease); z-index: 3; }
.lightbox-stage:hover .lightbox-nav,.lightbox-nav:focus-visible { opacity: 1; }
.lightbox-nav:hover { background: #1b2a40; }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
@media (max-width:700px) {
  .lightbox-top { padding: 6px 8px 2px 12px; }
  .lightbox-stage { padding: 4px 8px; }
  .lightbox-stage img { border-radius: 6px; }
  .lightbox-bottom { gap: 8px; padding: 4px 10px 10px; }
  .lightbox-nav { position: static; transform: none; width: 42px; height: 42px; background: #ffffff12; }
  .lightbox-meta { flex: 1; max-width: none; min-width: 0; text-align: left; }
  .lightbox-title { font-size: 11px; }
  .lightbox-note { font-size: 9px; }
  .lightbox-hint { font-size: 9px; margin-top: 3px; }
  .lightbox-zoom { height: 34px; padding: 0 12px; font-size: 10px; }
  .lightbox-close.dialog-close { width: 36px; height: 36px; }
}
.dialog-close { position: absolute; top: 10px; right: 12px; border: 0; background: #00000008; color: inherit; width: 33px; height: 33px; border-radius: 50%; font-size: 23px; }
.consultation { width: min(580px,calc(100vw - 30px)); padding: 50px 38px 32px; background: #fff; }
.consultation h2 { font-size: 40px; margin-bottom: 23px; }
.consultation h2:focus { outline: none; }
.consultation>p { font-size: 16px; color: var(--muted); }
.consultation .button { width: 100%; margin-top: 25px; }
/* Короткая форма: почта и вопрос. Согласие подтверждается здесь,
   остальное человек допишет в ответе на письмо. */
.contact-form { display: grid; gap: 14px; margin-top: 22px; }
.contact-field { display: grid; gap: 6px; min-width: 0; }
/* Почта и организация — одна строка: так форма остаётся компактной. */
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-field label { font-size: 11px; color: #7a7a80; }
.contact-field input,
.contact-field textarea { width: 100%; border: 1px solid #dce7f5; border-radius: 10px; padding: 12px 13px; font: inherit; font-size: 16px; color: var(--ink); background: #fbfcff; transition: border-color .2s,box-shadow .2s; }
/* Высоту поля задаёт autosizeMessage(): прокрутка остаётся одна — у окна. */
.contact-field textarea { resize: none; min-height: 120px; line-height: 1.5; overflow-y: hidden; }
.contact-field input:focus,
.contact-field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px #4a7cf31f; }
/* Ловушка для автоматических отправок: человек её не видит и не заполняет. */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-consent-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 12px; line-height: 1.55; color: #6e6e73; }
.contact-consent-check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent-2); flex-shrink: 0; }
.contact-consent-check a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.contact-consent-check a:hover { text-decoration: none; }
.contact-form .contact-submit { width: 100%; margin-top: 0; }
.contact-form.is-sent .contact-field,
.contact-form.is-sent .contact-consent-check,
.contact-form.is-sent .contact-submit,
.contact-form.is-sent .contact-trap,
.contact-form.is-sent .contact-fallback { display: none; }
/* Подтверждение отправки: в окне остаётся результат и выход. */
.consultation .contact-close { display: none; width: 100%; margin-top: 4px; }
.contact-form.is-sent .contact-close { display: inline-flex; }
.consultation.is-sent #consultation-description { display: none; }
/* Место под результат отправки зарезервировано: появление ошибки
   не сдвигает поля и не добавляет прокрутку окну. */
.contact-notes { display: grid; align-content: start; gap: 4px; min-height: 39px; }
.contact-status { font-size: 13px; line-height: 1.5; color: #6e6e73; }
.contact-status:empty { display: none; }
.contact-form.has-status .contact-fallback { display: none; }
.contact-status[data-tone=error] { color: #b42318; }
.contact-status[data-tone=success] { color: #1a7f4b; }
.contact-status[data-tone=pending] { color: #6e6e73; }
.contact-fallback { font-size: 11px; line-height: 1.5; color: #8e949e; }
.contact-fallback a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width:1100px) {
  .site-header { padding-inline: 14px; gap: 12px; }
  .site-header nav { gap: 7px; font-size: 11px; }
  .header-download { padding: 8px 11px; gap: 9px; font-size: 11px; }
  .audience-switch button { padding: 7px 12px; }
  .audience-switch button { padding-inline: 12px; }
  .hero-content { padding-left: 48px; }
  .hero h1 { font-size: 5.5vw; }
  .hero-lead { max-width: 500px; font-size: 21px; }
  .paper-orbit { right: 0; transform: scale(.85); transform-origin: right center; }
  .story-body { gap: 35px; }
  .story-desktop-note { display: none; }
  .knowledge-stage { gap: 30px; }
  .analytics-layout,.team { gap: 45px; }
  .edition { padding: 28px; }
}
@media (max-height:800px) and (min-width:901px) {
  .story-heading h2 { font-size: 44px; }
  .story-heading .section-lead { font-size: 15px; max-width: 620px; margin-top: 14px; }
  .story-heading .eyebrow { margin-top: 12px; }
  .story-heading { margin-bottom: 30px; }
  .story-copy { height: 300px; }
  .story-step h3 { font-size: 20px; }
  .story-step>p { font-size: 13px; }
  .story-step .prompt-text { font-size: 12px; }
  .story-media { min-height: 250px; }
}
@media (max-width:900px) {
  .section-shell { width: calc(100% - 56px); }
  .site-header nav { display: none; }
  .menu-button { display: block; }
  .header-download { margin-left: auto; }
  .hero { min-height: 950px; }
  .hero-content { width: 100%; padding: 65px 28px 440px; text-align: center; }
  .hero h1 { font-size: clamp(40px,7.3vw,65px); }
  .hero-lead { margin-inline: auto; max-width: 550px; }
  .hero .eyebrow { justify-content: center; }
  .paper-orbit { top: auto; bottom: 70px; width: 470px; right: calc(50% - 220px); transform: scale(.65); transform-origin: bottom center; }
  .paper-sheet { left: 5%; }
  .paper-pdf { left: 5%; }
  .paper-report { left: 50%; }
  .hero-grid { width: 100%; height: 450px; bottom: 20px; }
  .intro { padding-top: 80px; }
  .intro-head>p,.knowledge-head>p,.edition-heading>p,.developer-heading>div>p { font-size: 18px; }
  .role-links { grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .office-story { height: auto; min-height: 0; padding: 50px 0; }
  .story-sticky { position: relative; top: auto; }
  .story-heading h2 { font-size: 42px; }
  .story-body { display: flex; flex-direction: column; align-items: start; gap: 30px; }
  .story-copy { height: auto; }
  .story-step { position: relative; display: none; opacity: 1; transform: none; pointer-events: auto; }
  .story-step:first-child { display: block; }
  .story-progress { display: none; }
  .story-media { margin-top: 5px; min-height: 200px; }
  .story-step .prompt-card { max-width: 550px; }
  .formats { padding: 50px 0 75px; }
  .formats-list { grid-template-columns: 1fr 1fr; gap: 30px; }
  .knowledge { padding: 80px 0; }
  .knowledge-stage { grid-template-columns: 1fr; }
  .source-stack { max-width: 550px; }
  .knowledge-benefits { gap: 25px; }
  .analytics-layout,.team { grid-template-columns: 1fr; }
  .analytics { padding: 75px 0; }
  .analytics-media { max-width: 600px; width: 100%; margin-inline: auto; }
  .team { padding: 40px 0 85px; }
  .team-copy>p:not(.eyebrow) { max-width: 600px; }
  .agent-diagram { max-width: 550px; width: 100%; margin: auto; }
  .developers { padding: 80px 0; }
  .toolkit { gap: 30px; }
  .toolkit h3 { font-size: 25px; }
  .toolkit>div>p { font-size: 14px; }
  .editions { padding: 85px 0; }
  .edition-grid { gap: 16px; }
  .price { font-size: 37px; }
  .edition h3 { font-size: 26px; }
  .edition-top { font-size: 10px; }
  .edition-badge { font-size: 8px; padding: 6px 8px; }
  .site-footer { grid-template-columns: auto 1fr; }
  .site-footer>span { justify-self: end; }
  .site-footer>div { grid-column: 1/-1; flex-wrap: wrap; }
}
/* Keep the header action at its full width before the single row runs out of room. */
@media (max-width:700px) {
  html { scroll-padding-top: 120px; }
  .site-header { height: 104px; padding: 12px 17px 10px; flex-wrap: wrap; align-content: center; gap: 8px; }
  .brand { font-size: 21px; }
  .brand img { width: 29px; height: 29px; }
  .audience-switch { order: 4; width: 100%; margin: 0; padding: 3px; }
  .audience-switch button { width: 50%; padding: 7px; font-size: 10px; }
  .header-download { font-size: 9px; padding: 7px 10px; gap: 8px; }
  .header-download span { font-size: 15px; }
  .menu-button { padding: 5px; }
  .menu-button span { width: 18px; }
  .mobile-nav { top: 104px; }
}
@media (max-width:360px) {
  .site-header { padding-inline: 12px; }
  .brand { font-size: 19px; gap: 6px; }
}
@media (max-width:560px) {
  .section-shell { width: calc(100% - 40px); }
  h2 { font-size: 37px; }
  .hero { min-height: 840px; }
  .hero-content { padding: 45px 20px 340px; }
  .hero h1 { font-size: clamp(32px,8.8vw,49px); white-space: normal; }
  .hero-lead { font-size: 18px; margin-top: 12px; }
  .desktop-break { display: none; }
  .hero .eyebrow { font-size: 9px; }
  .hero-badge { margin-top: 18px; padding: 6px 11px; font-size: 10px; }
  .hero .hero-badge.hero-intro { margin-bottom: 22px; padding: 9px 16px; font-size: 13px; }
  .hero-platforms { font-size: 10px; }
  #first-task .tech-tags { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #first-task .tech-tags button { padding: 8px; font-size: 11px; }
  #first-task .prompt-pager { flex-wrap: wrap; gap: 12px; }
  #first-task .prompt-example-title { flex-basis: 100%; }
  #first-task .prompt-nav { margin-left: auto; }
  .button-hero { font-size: 15px; min-width: 0; width: 100%; padding: 18px 22px; }
  .hero-meta { font-size: 9px; }
  .paper-orbit { transform: scale(.54); bottom: 60px; }
  .intro { padding-top: 65px; }
  .intro-head>p,.knowledge-head>p,.edition-heading>p,.developer-heading>div>p { font-size: 17px; margin-top: 22px; }
  .section-top { margin: 20px 0 30px; gap: 15px; align-items: start; }
  .section-top .eyebrow { font-size: 10px; }
  .section-number { font-size: 8px; white-space: nowrap; }
  .role-links a { font-size: 11px; padding: 18px 0; }
  .showcase { padding-bottom: 30px; }
  .showcase-caption .eyebrow { font-size: 9px; }
  .showcase-caption>span:last-child { display: none; }
  .showcase>.carousel { padding: 12px; border-radius: 14px; }
  .carousel-controls { gap: 8px; padding-top: 14px; }
  .carousel-controls button { width: 29px; height: 29px; }
  .carousel-slide figcaption { font-size: 9px; margin-top: 13px; }
  .story-heading h2 { font-size: 35px; }
  .story-heading .section-lead { font-size: 16px; }
  .story-heading .eyebrow { font-size: 10px; }
  .story-step h3 { font-size: 22px; }
  .story-step>p { font-size: 15px; }
  .step-number { display: none; }
  .story-step .prompt-text { font-size: 13px; }
  .story-media { padding: 18px; }
  .screen-callout { left: 10px; padding: 11px 13px; max-width: calc(100% - 20px); }
  .screen-callout b { font-size: 10px; }
  .screen-callout div>span { font-size: 8px; }
  .screenshot-caption { font-size: 9px; }
  .formats-heading h2 { font-size: 32px; }
  .formats-heading .section-lead { font-size: 16px; }
  .format-code { font-size: 26px; }
  .formats-list p { font-size: 11px; }
  .format-family { font-size: 10px; }
  .format-modes { margin-top: 30px; }
  .format-modes-list { gap: 13px; }
  .format-modes-list li { flex-basis: 100%; max-width: none; }
  .format-note { font-size: 10px; }
  .knowledge-benefits { grid-template-columns: 1fr; gap: 28px; }
  .knowledge-benefits h3 { font-size: 17px; }
  .knowledge-benefits p { font-size: 14px; }
  .module-note { font-size: 10px; }
  .section-lead { font-size: 17px; }
  .check-list li { font-size: 13px; }
  .analytics-media { padding: 18px; }
  .metric-strip { font-size: 10px; }
  .team-copy>p:not(.eyebrow) { font-size: 17px; }
  .agent-children { gap: 7px; }
  .agent-children>div { padding: 22px 6px 16px; }
  .agent-children b { font-size: 10px; }
  .agent-children small { font-size: 8px; }
  .shared-files { font-size: 10px; }
  .dev-screenshot { padding: 12px; border-radius: 14px; }
  .window-bar { font-size: 8px; }
  .window-bar>span:last-child { display: none; }
  .toolkit { grid-template-columns: 1fr; gap: 35px; }
  .tool-groups { grid-template-columns: 1fr; }
  .tool-details summary { font-size: 12px; }
  .edition-grid { grid-template-columns: 1fr; gap: 20px; }
  .edition { padding: 28px; }
  .edition h3 { font-size: 29px; }
  .price { font-size: 43px; }
  .edition-footnote { min-height: 0; }
  .business-note { text-align: left; font-size: 10px; }
  .final-cta { padding: 45px 0 65px; }
  .final-cta h2 { font-size: 56px; }
  .final-cta .button { width: 100%; min-width: 0; }
  .site-footer>span { max-width: 135px; font-size: 9px; text-align: right; }
  .site-footer>div { font-size: 10px; gap: 16px; }
  .consultation { padding: 45px 25px 30px; }
  .contact-row { grid-template-columns: 1fr; gap: 14px; }
  .consultation h2 { font-size: 34px; }
  .consultation>p { font-size: 15px; }
  .prompt-card { padding: 16px; }
  .prompt-text { font-size: 13px; }
  .prompt-head>span,.copy-prompt { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  .paper,.orbit-result,.screenshot-button,.screenshot-button img { transform: none !important; }
  .agent-pulse { animation: none; }
  .office-story { height: auto; min-height: 0; padding: 55px 0; }
  .story-sticky { position: relative; top: auto; }
  .story-copy { height: auto; }
  .story-step { position: relative; display: block; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 28px; transition: none; }
  .story-progress,.story-desktop-note { display: none; }
  .button { transition: none; }
}
/* Distinct stories: product overview for a person; business starts with the organization. */
.company-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 55px; align-items: center; padding-block: 80px 100px; }
.company-hero h1 { font-size: clamp(42px,4.4vw,64px); }
.company-hero .section-lead { font-size: 20px; }
.company-hero .eyebrow { margin-top: 20px; }
.company-hero .prompt-card { margin-top: 28px; }
.company-hero-cta { margin-top: 24px; padding: 18px 28px; font-size: 16px; }
.company-price-preview { font-size: 12px; color: #64799a; margin-top: 18px; }
.company-price-preview>span { display: block; color: #8b95a4; font-size: 10px; margin-top: 5px; }
.company-system { border: 1px solid #e2eaf6; background: linear-gradient(160deg,#f5faff,#faf8ff); border-radius: 24px; padding: 30px; }
.system-company { display: flex; gap: 13px; align-items: center; margin-bottom: 30px; }
.system-company img { border-radius: 11px; }
.system-company b { display: block; font-size: 20px; letter-spacing: -.02em; }
.system-company div>span { font-size: 10px; color: #8c9bb0; display: block; margin-top: 5px; }
.system-inputs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; position: relative; }
.system-inputs>div { padding: 17px 10px; border: 1px solid #e0e9f6; background: #fff; border-radius: 10px; text-align: center; }
.system-inputs b { display: block; font-size: 12px; }
.system-inputs span { display: block; font-size: 9px; color: #92a0b4; margin-top: 7px; }
.system-agent { margin: 36px auto; padding: 20px; background: #fff; border: 1px solid #cbdcf6; border-radius: 12px; display: grid; grid-template-columns: 8px 1fr; gap: 6px 10px; align-items: center; position: relative; box-shadow: 0 8px 25px #4a7cf30b; }
.system-agent:before,.system-agent:after { content: ''; width: 1px; height: 36px; position: absolute; left: 50%; background: #cfddf3; }
.system-agent:before { top: -37px; }
.system-agent:after { bottom: -37px; }
.system-agent b { font-size: 19px; letter-spacing: -.02em; }
.system-agent>span:last-child { grid-column: 2; font-size: 10px; color: #8d9db6; }
.system-teams { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.system-teams span { background: #e9f0fd; color: #7089b1; border-radius: 999px; padding: 8px 10px; font-size: 9px; }
.system-result { display: flex; align-items: center; gap: 12px; padding: 18px; margin-top: 25px; border: 1px solid #e1e8f5; border-radius: 12px; background: #ffffffc4; }
.system-result b { font-size: 12px; display: block; }
.system-result div>span { display: block; color: #8b9ab1; font-size: 9px; margin-top: 6px; }
.company-system .diagram-caption { font-size: 9px; text-align: center; margin-top: 20px; }
.company-section { padding-block: 90px; border-top: 1px solid var(--line); }
.company-heading { margin-bottom: 45px; }
.company-heading .section-lead { max-width: 800px; }
.company-heading .eyebrow { margin-top: 20px; }
.company-value-grid,.integration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.company-card { border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: #fafbfd; }
.company-card h3 { font-size: 23px; }
.company-card p { font-size: 15px; color: var(--muted); margin-top: 20px; }
.company-wide-prompt { margin-top: 30px; max-width: 780px; }
.company-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.company-role-copy h3 { font-size: 28px; }
.company-role-copy>p { font-size: 16px; color: var(--muted); margin-top: 20px; }
.company-role-copy .company-role-value { color: #3c5376; }
.company-role-copy .prompt-card { margin-top: 26px; }
.company-role-visual { min-width: 0; margin: 0; padding: 22px; border-radius: 18px; background: var(--panel); min-height: 260px; display: flex; justify-content: center; flex-direction: column; }
.company-role-visual figcaption { font-size: 10px; color: #8c96a6; text-align: center; margin-top: 20px; }
.company-role-visual.is-development { background: #101b2a; }
.company-role-visual.is-development figcaption { color: #8d9fba; }
.company-module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.company-module-grid .company-card { display: flex; flex-direction: column; }
.company-module-grid .company-card p { flex: 1; }
.module-status { align-self: start; font-size: 10px; color: #6e89b2; background: #edf3fd; border-radius: 999px; padding: 7px 10px; margin-top: 23px; }
.company-small-note { font-size: 11px; color: #8e99ab; margin-top: 24px; max-width: 790px; }
.company-license { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; background: #f5f8fe; border: 1px solid #dce7f8; border-radius: 22px; padding: 45px; }
.company-license h3 { font-size: 24px; }
.company-license .price { font-size: 57px; margin: 28px 0 35px; }
.company-license .price span { font-size: 11px; }
.company-license-details .check-list { margin: 23px 0; }
.company-license-details>p { font-size: 14px; color: #778398; }
.company-license-details>p.company-small-note { font-size: 11px; color: #8e99ab; margin-top: 22px; }
.company-rollout-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.company-rollout-grid article { border-top: 2px solid #dce8fa; padding-top: 23px; }
.company-rollout-grid article>span { font: 11px ui-monospace,monospace; color: #84a2ca; }
.company-rollout-grid h3 { font-size: 20px; margin-top: 18px; }
.company-rollout-grid p { font-size: 14px; color: var(--muted); margin-top: 18px; }
.company-final .section-lead { max-width: 770px; }
.company-final>.button { margin-top: 30px; }
.company-individual-note { margin-top: 35px !important; font-size: 10px !important; color: #939cab !important; }
.company-individual-note button,.product-company-link button { background: none; color: var(--link); font-size: inherit; padding: 0; border: 0; }
.individual-install-card { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; background: #f6f9fe; border: 1px solid #e0e9f6; padding: 38px; border-radius: 20px; margin-top: 42px; }
.individual-install-card h3 { font-size: 26px; }
.individual-install-card .edition-footnote { min-height: 0; }
.individual-install-action .prompt-card { background-color: #fff; }
.individual-install-action>.button { margin-top: 23px; width: 100%; }
.product-company-link { font-size: 12px; color: #8693a7; margin-top: 28px; }
@media(max-width:1100px) {
  .company-hero { gap: 35px; }
  .company-hero h1 { font-size: 46px; }
  .company-hero .section-lead { font-size: 18px; }
  .company-system { padding: 24px; }
  .company-value-grid,.company-module-grid,.integration-grid { gap: 15px; }
  .company-card { padding: 23px; }
  .company-card h3 { font-size: 21px; }
  .company-card p { font-size: 14px; }
  .company-license { gap: 40px; padding: 35px; }
  .company-role-grid { gap: 35px; }
}
@media(max-width:900px) {
  .company-hero { grid-template-columns: 1fr; padding-block: 65px 80px; gap: 45px; }
  .company-hero-copy { max-width: 650px; }
  .company-hero h1 { font-size: 56px; }
  .company-system { max-width: 600px; width: 100%; margin-inline: auto; }
  .company-section { padding-block: 70px; }
  .company-heading .section-lead { font-size: 18px; }
  .company-value-grid,.company-module-grid,.integration-grid { grid-template-columns: 1fr 1fr; }
  .company-role-grid { grid-template-columns: 1fr; }
  .company-role-copy { max-width: 650px; }
  .company-role-visual { max-width: 650px; width: 100%; margin-inline: auto; }
  .company-rollout-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .individual-install-card { gap: 35px; padding: 28px; }
  .individual-install-card h3 { font-size: 23px; }
}
@media(max-width:560px) {
  .company-hero { padding-block: 45px 65px; gap: 35px; }
  .company-hero h1 { font-size: 37px; }
  .company-hero .section-lead { font-size: 17px; }
  .company-hero .eyebrow { font-size: 10px; }
  .company-hero-cta { width: 100%; font-size: 14px; }
  .company-price-preview { font-size: 11px; }
  .company-system { border-radius: 18px; padding: 20px; }
  .system-company b { font-size: 18px; }
  .system-inputs { gap: 5px; }
  .system-inputs>div { padding: 14px 5px; }
  .system-inputs b { font-size: 11px; }
  .system-inputs span { font-size: 8px; }
  .system-result { padding: 13px; }
  .system-result b { font-size: 11px; }
  .company-section { padding-block: 60px; }
  .company-heading { margin-bottom: 30px; }
  .company-heading .section-lead { font-size: 17px; }
  .company-heading .eyebrow { font-size: 10px; }
  .company-value-grid,.company-module-grid,.integration-grid { grid-template-columns: 1fr; gap: 16px; }
  .company-card { padding: 26px; }
  .company-card h3 { font-size: 24px; }
  .company-card p { font-size: 15px; }
  .company-role-copy h3 { font-size: 26px; }
  .company-role-copy>p { font-size: 16px; }
  .company-role-visual { padding: 18px; min-height: 200px; }
  .company-license { grid-template-columns: 1fr; gap: 35px; padding: 28px; border-radius: 18px; }
  .company-license .price { font-size: 53px; }
  .company-license .button { width: 100%; font-size: 13px; }
  .company-license h3 { font-size: 23px; }
  .company-rollout-grid { grid-template-columns: 1fr; gap: 27px; }
  .company-rollout-grid h3 { font-size: 23px; }
  .company-small-note { font-size: 10px; }
  .company-final h2 { font-size: 40px; }
  .company-final>.button { font-size: 13px; padding-inline: 18px; }
  .individual-install-card { grid-template-columns: 1fr; gap: 25px; padding: 26px; }
  .individual-install-card h3 { font-size: 25px; }
  .product-company-link { font-size: 11px; }
  .company-individual-note { line-height: 1.8; }
}

.mobile-nav>button { width: 100%; border: 0; background: transparent; text-align: left; color: inherit; }

/* The same manual prompt rotation control in every product and company section.
   Position is shown with dots; arrows step through the examples. */
.prompt-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 15px; border-top: 1px solid #e0e9f6; }
.prompt-example-title { font-size: 10px; color: #7890b2; min-width: 0; }
.prompt-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.prompt-nav>button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #e0e9f6; border-radius: 50%; background: #fff; color: #4775bc; font-size: 13px; }
.prompt-dots { display: flex; align-items: center; gap: 7px; }
.prompt-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d3dcea; }
[data-prompts] .prompt-text { min-height: 4.8em; }
.prompt-choices:has(+.prompt-pager) { border-top: 0; padding-top: 0; margin-top: 12px; }
@media(max-width:560px) {
  .prompt-example-title { font-size: 9.5px; }
  .prompt-nav { gap: 8px; }
  .prompt-nav>button { width: 30px; height: 30px; font-size: 14px; }
  [data-prompts] .prompt-text { min-height: 8em; }
}
@media(min-width:901px) { .story-copy { height: 424px; } }
@media(max-height:800px) and (min-width:901px) { .story-copy { height: 408px; } .story-step .prompt-card { padding: 12px; } }
@media(max-height:740px) and (min-width:901px) { .story-copy { height: 400px; } }

/* Coherent screenshots keep their whole frame; never crop them with max-height. */
.workflow-section { padding: 100px 0; border-top: 1px solid var(--line); }
.workflow-heading h2 { font-size: clamp(36px,4.5vw,60px); line-height: 1.08; letter-spacing: -.045em; }
.workflow-heading .eyebrow { margin-top: 22px; }
.workflow-prompt { max-width: 740px; margin: 34px 0; }
.wide-media { width: min(100%,780px); margin: 42px auto 0; padding: 18px; border: 1px solid #e8ebf0; border-radius: 18px; background: #f7f8fa; }
.knowledge-stage { display: block; }
.source-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; align-items: start; }
.source-stack .source-chip { margin: 0; grid-column: 1; }
.source-stack .prompt-card { grid-column: 2; grid-row: 1 / 4; margin: 0; }
.analytics-layout { display: block; }
.analytics-copy { max-width: 760px; }
.analytics-copy .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.analytics .code-note { max-width: 740px; }
.dev-screenshot { max-width: 780px; padding: 18px; background: #101b2a; }
.process-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 780px; margin: 32px auto 0; }
.process-notes h3 { font-size: 18px; margin-bottom: 12px; }
.process-notes p { color: var(--muted); font-size: 15px; }
@media(max-width:700px) {
 .workflow-section { padding: 64px 0; }
 .source-stack { display: block; }
 .source-stack .source-chip { margin: 12px 0; }
 .source-stack .prompt-card { margin-top: 24px; }
 .wide-media,.dev-screenshot { padding: 10px; border-radius: 14px; }
 .process-notes,.analytics-copy .check-list { grid-template-columns: 1fr; gap: 20px; }
}

/* О компании: общая секция для «О продукте» и «Для бизнеса».
   Порядок сохранён: заголовок → подстрочник → метка. Прямая речь выделена
   фирменной линией, факты — второстепенными метками. */
.about-company { padding: 104px 0 112px; background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
/* В тёмной бизнес-теме раздел становится светлой вставкой, как остальные полосы. */
body[data-audience=business] .about-company { width: calc(100% - 40px); max-width: 1440px; margin: 20px auto; padding: 96px 0 100px; border-top: 0; border-radius: 32px; background: #fff; color: #202023; }
.about-heading { max-width: 800px; }
.about-heading .section-lead { max-width: 660px; }
.about-heading .eyebrow { margin-top: 18px; }
.people-list { display: grid; gap: 26px; margin-top: 52px; }
.person { display: grid; grid-template-columns: 296px minmax(0,1fr); gap: 38px; align-items: start; padding: 26px; border: 1px solid #edf0f6; border-radius: 28px; background: #f7f9fc; }
.person.is-agent { border-color: #dbe6fb; background: #f4f8ff; }
.person-photo { position: relative; width: 100%; aspect-ratio: 296/510; margin: 0; overflow: hidden; border-radius: 22px; background: #e9eef6; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.person:nth-of-type(2) .person-photo img { object-position: 50% 28%; }
.person-copy { padding: 4px 0 2px; }
.person-role { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.person h3 { margin-top: 6px; font-size: clamp(26px,2.4vw,34px); letter-spacing: -.03em; }
.person-quote { position: relative; margin-top: 18px; padding-left: 18px; font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.person-quote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--brand-gradient); }
.person-text { display: grid; gap: 12px; margin-top: 16px; font-size: 16px; line-height: 1.6; color: #515158; }
.person-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.person-facts li { padding: 6px 10px; border: 1px solid #e4e9f2; border-radius: 8px; background: #fff; color: #5b6472; font-size: 11px; line-height: 1.35; }
.person-photo.is-agent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(145deg,#e8f7fb,#eef3ff 54%,#f4efff); }
.person-photo.is-agent::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#4a7cf31f 1px,transparent 1px); background-size: 16px 16px; }
.agent-emblem { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px; background: #fff; box-shadow: 0 14px 38px #4a7cf32e; }
.agent-emblem img { width: 76px; height: 76px; border-radius: 18px; }
.person-photo.is-agent figcaption { position: relative; display: grid; gap: 2px; text-align: center; font-size: 11px; font-weight: 650; color: #5b6b86; }
.person-photo.is-agent figcaption span { font-size: 10px; font-weight: 500; color: #8493ab; }
.about-partners { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; margin-top: 26px; padding: 38px 40px; border-radius: 28px; background: #0b0c10; color: #f5f5f7; overflow: hidden; isolation: isolate; }
.about-partners::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -70% 30%; height: 340px; background: radial-gradient(ellipse at 50% 50%,#4a7cf330,transparent 70%); }
.about-partners h3 { font-size: clamp(24px,2.2vw,30px); letter-spacing: -.03em; }
.about-partners p { margin-top: 14px; max-width: 640px; font-size: 15.5px; color: #b9bcc7; }
.about-partners .about-partners-note { margin-top: 10px; font-size: 13px; color: #8f94a3; }
.about-partners-side { align-self: start; justify-self: stretch; }
.about-partners-label { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: #7f8a9e; text-align: left; }
.about-partners-tags { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-partners-tags li { padding: 7px 11px; border: 1px solid #ffffff1f; border-radius: 999px; background: #ffffff0d; color: #cfd8ea; font-size: 11px; line-height: 1.3; }
@media(max-width:1100px) {
  .person { grid-template-columns: 250px minmax(0,1fr); gap: 30px; }
  .person-quote { font-size: 18px; }
}
@media(max-width:900px) {
  .about-company { padding: 76px 0 84px; }
}
@media(max-width:760px) {
  .person { grid-template-columns: 1fr; gap: 24px; padding: 18px; border-radius: 22px; }
  .person-photo { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4/5; margin-inline: auto; border-radius: 18px; }
  .person-photo.is-agent { height: 240px; aspect-ratio: auto; }
  .about-partners { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .about-partners-side { justify-self: start; }
  .about-partners-label { text-align: left; }
}
@media(max-width:560px) {
  .about-company { padding: 58px 0 68px; }
  .person { padding: 14px; border-radius: 20px; }
  .person-photo { max-width: none; border-radius: 16px; }
  .person-photo.is-agent { height: 200px; }
  .person h3 { font-size: 25px; }
  .person-quote { font-size: 17px; padding-left: 14px; }
  .person-text { font-size: 15px; }
  .person-facts li { font-size: 10.5px; }
  .about-partners { padding: 24px 20px; border-radius: 22px; }
}