/*
* razrabotchik.com — стили темы.
* Собрано tools/build-css.py из HTML-макетов (docs/redesign/mockups) и tools/css/wp-adapter.css.
* Правки дизайна вносите в макет/адаптер и пересобирайте, либо прямо здесь — но тогда
* не запускайте сборку повторно без переноса правок.
*/
/* ==== Главная и общая база (макет razrabotchik-design-preview.html) ==== */
:root {
--page: #F7F5F0;
--ink: #172421;
--pine: #173D35;
--pine-deep: #112E29;
--accent: #BEE57A;
--surface: #ECEFE8;
--sand: #EEEAE0;
--line: #D8DED4;
--muted: #5F6D66;
--white: #FFFFFF;
--container: 1220px;
--serif: 'IBM Plex Serif', Georgia, serif;
--sans: 'IBM Plex Sans', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.55 var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #598930; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 18px; z-index: 20; padding: 10px 16px; background: var(--accent); color: var(--ink); }
.skip-link:focus { top: 18px; }
.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }
.eyebrow { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; }
.arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 21px; line-height: 1; background: var(--accent); color: var(--ink); }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(247,245,240,.94); border-bottom: 1px solid rgba(23,36,33,.09); backdrop-filter: blur(18px); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; min-height: 86px; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 18px; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: var(--accent); background: var(--pine); font: 600 21px/1 var(--serif); letter-spacing: -.1em; padding-right: 3px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.desktop-nav a { transition: color .2s; }
.desktop-nav a:hover { color: #4D7F35; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.languages { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; }
.languages button { min-width: 39px; min-height: 31px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.languages button[aria-pressed="true"] { background: var(--pine); color: var(--white); }
.header-cta { display: inline-flex; align-items: center; gap: 11px; padding: 10px 11px 10px 17px; border-radius: 12px; background: var(--pine); color: var(--white); font-size: 13px; font-weight: 600; white-space: nowrap; }
.header-cta:hover, .button-dark:not(.wp-block-button):hover { background: var(--pine-deep); }
.mobile-contact { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; background: var(--pine); color: var(--white); font-size: 21px; }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; border-radius: 10px; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.mobile-nav { display: none; }
.hero { padding: 56px 0 50px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.hero .eyebrow { color: var(--pine); margin-bottom: 23px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .case-title, .contact-title { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
h1 { max-width: 760px; margin-bottom: 20px; font-size: clamp(49px, 5.2vw, 74px); line-height: 1.095; }
h1 em { color: #34785D; font-weight: 400; }
.hero-lead { max-width: 610px; margin-bottom: 24px; color: #41514B; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.6; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 11px; }
.button-dark:not(.wp-block-button), .button-soft:not(.wp-block-button) { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 24px; border-radius: 12px; padding: 9px 11px 9px 22px; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s; }
.button-dark:not(.wp-block-button) { background: var(--pine); color: var(--white); }
.button-soft:not(.wp-block-button) { background: var(--sand); color: var(--ink); padding-right: 23px; }
.button-soft:not(.wp-block-button):hover { background: #E3DDD0; }
.button-dark:not(.wp-block-button):hover, .button-soft:not(.wp-block-button):hover { transform: translateY(-2px); }
.hero-note { margin: 23px 0 0; color: var(--muted); font-size: 13px; }
.system-visual { position: relative; min-height: 495px; overflow: hidden; border: 1px solid #DFE6DB; border-radius: 27px; background: radial-gradient(circle at 30% 26%, #F9FCF5 0%, #EDF2E9 44%, #DDE6DA 100%); box-shadow: 0 24px 45px rgba(31,53,43,.09); }
.system-visual::before { content: ''; position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(#BACAB9 1px, transparent 1px), linear-gradient(90deg, #BACAB9 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(to bottom, black, transparent 94%); }
.visual-top { position: absolute; top: 30px; left: 32px; right: 32px; display: flex; align-items: center; justify-content: space-between; color: #456052; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.visual-dots { display: flex; gap: 5px; }
.visual-dots i { width: 6px; height: 6px; border-radius: 50%; background: #94AA91; }
.visual-path { position: absolute; z-index: 0; left: 50%; top: 107px; height: 290px; border-left: 2px dashed #9CAF9D; }
.visual-card { position: absolute; z-index: 1; width: 58%; padding: 17px 20px; border: 1px solid rgba(23,61,53,.12); border-radius: 16px; background: rgba(255,255,255,.93); box-shadow: 0 12px 25px rgba(31,53,43,.08); transform: rotate(var(--tilt)); transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms ease, border-color 320ms ease; }
.visual-card.one { --tilt: -3deg; top: 110px; left: 14%; }
.visual-card.two { --tilt: 3deg; top: 215px; right: 11%; background: var(--pine); color: white; }
.visual-card.three { --tilt: -2deg; top: 322px; left: 15%; }
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
.visual-card:hover { z-index: 3; transform: translate3d(0,-7px,0) rotate(var(--tilt)) scale(1.02); box-shadow: 0 22px 36px rgba(31,53,43,.16); border-color: rgba(23,61,53,.27); }
}
.visual-card .card-index { display: inline-block; margin-bottom: 8px; color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.visual-card.two .card-index { color: #B9D6BC; }
.visual-card :is(strong, .is-strong) { display: block; font: 500 clamp(20px, 2vw, 26px)/1.2 var(--serif); letter-spacing: -.035em; }
.visual-card :is(small, .is-small) { display: block; margin-top: 7px; color: #61736A; font-size: 11px; }
.visual-card.two :is(small, .is-small) { color: #BED5C8; }
.visual-tag { position: absolute; z-index: 2; right: 27px; bottom: 27px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--accent); border-radius: 9px; color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 7px 16px rgba(31,53,43,.08); }
.visual-tag::before { content: '●'; color: #317455; font-size: 13px; }
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-inner { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.4fr; align-items: center; min-height: 100px; }
.proof-inner > div { padding: 19px 28px; border-left: 1px solid var(--line); }
.proof-inner > div:first-child { padding-left: 0; border-left: 0; }
.proof-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.proof-value { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.section { padding: 114px 0; }
.section-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; align-items: start; margin-bottom: 48px; }
.section-head .eyebrow { margin-top: 16px; color: #4E6E5D; }
h2 { max-width: 840px; margin-bottom: 0; font-size: clamp(38px, 4.35vw, 62px); line-height: 1.17; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.service-card { position: relative; display: flex; flex-direction: column; min-height: 310px; padding: 30px 31px; border-radius: 19px; background: var(--surface); }
.service-card:nth-child(2) { background: var(--sand); }
.service-card:nth-child(3) { background: #E5EDE6; }
.service-card:nth-child(4) { background: #EDEDE4; }
.service-no { display: block; margin-bottom: 51px; color: #4A6354; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.service-card h3 { max-width: 430px; margin-bottom: 11px; font: 400 clamp(27px, 2.75vw, 38px)/1.15 var(--serif); letter-spacing: -.055em; }
.service-card p:where(:not([class*="is-"])) { max-width: 470px; margin-bottom: 0; color: #4B5B52; font-size: 14px; line-height: 1.55; }
.card-action { display: inline-flex; align-self: flex-start; margin-top: auto; padding-top: 22px; border-bottom: 1px solid currentColor; color: var(--pine); font-size: 13px; font-weight: 700; }
.card-action:hover { color: #4D7F35; }
.cases-section { padding: 112px 0 120px; background: var(--pine); color: var(--white); }
.cases-section .section-head { margin-bottom: 50px; }
.cases-section .eyebrow { color: var(--accent); }
.cases-section h2 { max-width: 780px; }
.case-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 15px; }
.case-card { display: flex; flex-direction: column; min-height: 415px; padding: 31px; border-radius: 20px; background: var(--page); color: var(--ink); }
.case-card:nth-child(2) { background: #DCE9D9; }
.case-top { display: flex; justify-content: space-between; gap: 12px; color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.case-card .case-title { max-width: 490px; margin: auto 0 19px; font-size: clamp(32px, 3.35vw, 48px); line-height: 1.12; }
.case-card p:where(:not([class*="is-"])) { max-width: 530px; margin-bottom: 26px; color: #4A5A52; font-size: 15px; }
.case-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid #CAD4C9; padding-top: 18px; }
.case-bottom :is(strong, .is-strong) { font-size: 14px; }
.case-bottom :is(span, .is-span) { color: var(--muted); font-size: 12px; }
.case-metric { margin-top: 12px; font: 400 clamp(29px, 3.2vw, 46px)/1.1 var(--serif); letter-spacing: -.05em; }
.cases-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 29px; font-size: 13px; color: #BDD6C9; }
.cases-foot a { color: var(--white); font-weight: 700; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.about-section { padding: 100px 0; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.about-grid > * { min-width: 0; }
.about-grid .eyebrow { color: #4E6E5D; }
.about-copy h2 { margin: 0 0 23px; }
.about-copy p:where(:not([class*="is-"])) { max-width: 690px; margin: 0 0 22px; color: #45564D; font-size: 18px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.about-tags :is(span, .is-span) { padding: 8px 12px; border: 1px solid #CAD6CA; border-radius: 99px; font-size: 12px; font-weight: 600; }
.guides-section { padding: 106px 0 112px; background: #EAEFE8; }
.guides-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 35px; }
.guides-head .eyebrow { margin-bottom: 18px; color: #4E6E5D; }
.guides-head h2 { max-width: 760px; }
.guides-all { flex: none; margin-bottom: 8px; border-bottom: 1px solid currentColor; color: var(--pine); font-size: 14px; font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.guide-grid .guide-card { display: flex; min-height: 285px; flex-direction: column; align-items: flex-start; border: 1px solid #D4DED3; border-radius: 20px; padding: 28px 30px; background: var(--page); transition: box-shadow .24s, transform .24s; }
.guide-grid .guide-card:nth-child(2) { background: #F3EEE3; }
.guide-grid .guide-card :is(small, .is-small) { margin-bottom: auto; color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.guide-grid .guide-card h3 { max-width: 530px; margin: 34px 0 10px; font: 400 clamp(26px, 2.7vw, 37px)/1.16 var(--serif); letter-spacing: -.045em; }
.guide-grid .guide-card p:where(:not([class*="is-"])) { max-width: 530px; margin-bottom: 20px; color: #4B5B52; font-size: 14px; }
.guide-grid .guide-card :is(span, .is-span):last-child { color: var(--pine); font-size: 13px; font-weight: 700; border-bottom: 1px solid currentColor; }
@media (hover: hover) and (pointer: fine) {
.guide-grid .guide-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(31,53,43,.08); } }
.contact-section { padding: 86px 0; background: var(--accent); }
.contact-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.contact-section .eyebrow { margin-bottom: 20px; }
.contact-title { max-width: 860px; margin-bottom: 18px; font-size: clamp(42px, 5vw, 70px); line-height: 1.1; }
.contact-section p:where(:not([class*="is-"])) { max-width: 640px; margin-bottom: 0; color: #344731; font-size: 16px; }
.contact-section .button-dark:not(.wp-block-button) { flex: none; }
.site-footer { background: var(--pine-deep); color: #E3EEE8; padding: 29px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; font-size: 12px; }
.footer-inner :is(span, .is-span):last-child { color: #A9C1B5; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a:hover { color: var(--accent); }
@media (max-width: 1040px) {
.desktop-nav { gap: 18px; }
.header-inner { grid-template-columns: auto 1fr auto; gap: 15px; }
.brand { font-size: 16px; }
.header-cta { display: none; }
.mobile-contact { display: inline-flex; }
.hero-grid { gap: 36px; }
.system-visual { min-height: 435px; }
.visual-card.one { top: 90px; }
.visual-card.two { top: 180px; }
.visual-card.three { top: 270px; }
}
@media (max-width: 800px) {
.container { width: min(calc(100% - 40px), var(--container)); }
.header-inner { min-height: 72px; grid-template-columns: 1fr auto; }
.desktop-nav { display: none; }
.header-actions { gap: 8px; }
.menu-button { display: inline-grid; place-items: center; }
.mobile-nav[aria-hidden="false"] { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); padding: 8px 20px 15px; }
.mobile-nav a { padding: 11px 0; font-size: 15px; font-weight: 600; }
.hero { padding: 52px 0 47px; }
.hero-grid { grid-template-columns: 1fr; }
h1 { max-width: 750px; }
.system-visual { max-width: 650px; width: 100%; min-height: 430px; }
.proof-inner { grid-template-columns: repeat(2, 1fr); }
.proof-inner > div:nth-child(3) { border-left: 0; }
.proof-inner > div { min-height: 84px; }
.section { padding: 82px 0; }
.section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
.section-head .eyebrow { margin-top: 0; }
.cases-section { padding: 82px 0; }
.about-grid { grid-template-columns: 1fr; gap: 19px; }
.guides-section { padding: 80px 0; }
.guides-head { flex-direction: column; align-items: flex-start; }
.contact-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
.container { width: min(calc(100% - 32px), var(--container)); }
.header-inner { min-height: 68px; }
.brand { font-size: 15px; }
.brand-mark { width: 28px; height: 28px; font-size: 19px; }
.languages { border: 0; padding: 0; }
.languages button { min-width: 40px; min-height: 40px; }
.menu-button { width: 42px; height: 42px; }
.mobile-contact { width: 42px; height: 42px; }
.hero { padding-top: 40px; }
.hero .eyebrow { margin-bottom: 18px; }
h1 { margin-bottom: 21px; font-size: clamp(42px, 10.5vw, 59px); }
.hero-lead { margin-bottom: 23px; font-size: 16px; }
.hero-buttons { flex-direction: column; align-items: stretch; }
.button-dark:not(.wp-block-button), .button-soft:not(.wp-block-button) { justify-content: space-between; }
.hero-note { font-size: 12px; }
.system-visual { min-height: 370px; border-radius: 20px; }
.visual-top { top: 19px; left: 20px; right: 20px; }
.visual-card { width: 68%; padding: 12px 14px; }
.visual-card.one { top: 68px; left: 8%; }
.visual-card.two { top: 148px; right: 7%; }
.visual-card.three { top: 235px; left: 10%; }
.visual-card :is(strong, .is-strong) { font-size: 18px; }
.visual-card :is(small, .is-small) { font-size: 10px; }
.visual-path { top: 74px; height: 250px; }
.visual-tag { right: 15px; bottom: 13px; font-size: 10px; padding: 7px 9px; }
.proof-inner { grid-template-columns: 1fr 1fr; }
.proof-inner > div { min-height: 85px; padding: 14px 8px 14px 15px; }
.proof-inner > div:first-child, .proof-inner > div:nth-child(3) { padding-left: 0; }
.proof-value { font-size: 13px; }
.section { padding: 70px 0; }
h2 { font-size: 40px; }
.hero .eyebrow { max-width: 100%; overflow-wrap: anywhere; }
.service-grid, .case-grid { grid-template-columns: 1fr; }
.service-card { min-height: 265px; padding: 24px; }
.service-no { margin-bottom: 40px; }
.service-card h3 { font-size: 30px; }
.cases-section { padding: 76px 0; }
.case-card { min-height: 365px; padding: 24px; }
.case-card .case-title { font-size: 36px; }
.cases-foot { flex-direction: column; align-items: flex-start; }
.about-section { padding: 76px 0; }
.about-copy p:where(:not([class*="is-"])) { font-size: 16px; }
.guide-grid { grid-template-columns: 1fr; }
.guide-grid .guide-card { min-height: 250px; padding: 24px; }
.guide-grid .guide-card h3 { font-size: 30px; }
.contact-section { padding: 67px 0; }
.contact-title { font-size: 43px; }
.contact-section .button-dark:not(.wp-block-button) { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.visual-card:hover { transform: rotate(var(--tilt)); }
.guide-grid .guide-card:hover { transform: none; }
}
@media (max-width: 360px) {
.brand > :is(span, .is-span):last-child { display: none; }
h2 { font-size: 32px; overflow-wrap: anywhere; }
}
/* ==== Внутренние страницы (razrabotchik-preview-shared.css) ==== */
.desktop-nav .is-current { color: #34785D; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding-top: 32px; color: var(--muted); font-size: 12px; }
.breadcrumbs a { border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-color: currentColor; }
.breadcrumbs .crumb-sep { color: #9EAAA0; }
.inner-hero { padding: 39px 0 86px; }
.inner-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(38px, 5vw, 77px); }
.inner-hero h1 { max-width: 780px; font-size: clamp(49px, 5.1vw, 73px); }
.inner-hero .eyebrow { margin-bottom: 23px; color: var(--pine); }
.inner-hero .hero-lead { margin-bottom: 27px; }
.hero-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.hero-detail :is(span, .is-span) { padding: 7px 11px; border: 1px solid #CBD8CA; border-radius: 999px; color: #476253; font-size: 11px; font-weight: 700; }
.visual-panel { position: relative; display: flex; flex-direction: column; min-height: 495px; overflow: hidden; border: 1px solid #D7E1D4; border-radius: 26px; padding: 28px; background: #E9EFE5; box-shadow: 0 24px 45px rgba(31,53,43,.09); }
.visual-panel::before { content: ''; position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(#B7CBB4 1px, transparent 1px), linear-gradient(90deg, #B7CBB4 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.visual-panel > * { position: relative; z-index: 1; }
.visual-panel-top { display: flex; justify-content: space-between; gap: 15px; color: #4A6354; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.visual-panel-center { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 13px; padding: 30px 13px 13px; }
.diagram-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 65px; border: 1px solid #D7E4D4; border-radius: 14px; padding: 11px 16px; background: rgba(255,255,255,.90); box-shadow: 0 10px 23px rgba(31,53,43,.07); }
.diagram-row :is(strong, .is-strong) { font: 400 21px/1.2 var(--serif); letter-spacing: -.035em; }
.diagram-row :is(small, .is-small) { color: #4A6354; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-align: right; }
.diagram-row.highlight { border-color: var(--pine); background: var(--pine); color: white; transform: translateX(18px); }
.diagram-row.highlight :is(small, .is-small) { color: #B6DAC7; }
.diagram-connector { align-self: center; width: 2px; height: 20px; margin-block: -5px; background: #9FB9A3; }
.visual-panel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #BDCFBE; padding-top: 18px; color: #4A6354; font-size: 11px; font-weight: 700; }
.visual-panel-bottom :is(span, .is-span):last-child { padding: 7px 10px; border-radius: 8px; background: var(--accent); color: var(--ink); }
.visual-panel.migration { background: #EEEAE0; border-color: #E1DACE; }
.migration .visual-panel-center { gap: 18px; }
.migration-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.migration-flow .flow-box { display: flex; flex-direction: column; justify-content: space-between; min-height: 145px; border-radius: 15px; padding: 17px; background: #FFFFFF; box-shadow: 0 12px 24px rgba(50,49,36,.07); }
.migration-flow .flow-box:last-child { background: var(--pine); color: white; }
.migration-flow .flow-box :is(small, .is-small) { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.migration-flow .flow-box :is(strong, .is-strong) { font: 400 35px/1 var(--serif); }
.migration-flow .flow-arrow { align-self: center; color: #547665; font-size: 23px; }
.migration .diagram-row.highlight { transform: none; }
.visual-panel.performance { background: #E7EDE8; border-color: #D1DDD4; }
.performance .diagram-row.highlight { transform: translateX(8px); }
.visual-panel.ai { background: #DDEADD; border-color: #C9D9C8; }
.ai .diagram-row.highlight { transform: translateX(-11px); }
.visual-panel.feature { background: #E7EDE2; border-color: #D1DCCB; }
.visual-panel.temporal { background: #E5EBE7; border-color: #D2DED6; }
.visual-panel.data { background: #EEEAE0; border-color: #E0DACC; }
.visual-panel.mcp { background: #E1EBE9; border-color: #CDDCD9; }
.visual-panel.rag { background: #E9EBDD; border-color: #D6DDC9; }
.facts-band { border-block: 1px solid var(--line); }
.facts-band-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts-band-inner > div { min-height: 94px; padding: 22px 24px; border-left: 1px solid var(--line); }
.facts-band-inner > div:first-child { border-left: 0; padding-left: 0; }
.facts-band :is(small, .is-small) { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.facts-band :is(strong, .is-strong) { font-size: 15px; line-height: 1.35; }
.intro-section { padding: 106px 0 113px; }
.intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; }
.intro-grid .eyebrow { color: #4E6E5D; }
.intro-grid h2 { margin-bottom: 23px; }
.intro-grid p:where(:not([class*="is-"])) { max-width: 800px; color: #4B5B52; font-size: 17px; }
.intro-grid p:where(:not([class*="is-"])):last-child { margin-bottom: 0; }
.situation-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 48px; }
.situation-card { min-height: 220px; padding: 27px; border-radius: 18px; background: var(--surface); }
.situation-card:nth-child(2) { background: var(--sand); }
.situation-card:nth-child(3) { background: #E1EAE0; }
.situation-card .number { display: block; margin-bottom: 35px; color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.situation-card h3 { margin-bottom: 9px; font: 400 27px/1.18 var(--serif); letter-spacing: -.045em; }
.situation-card p:where(:not([class*="is-"])) { margin: 0; color: #4C5F53; font-size: 14px; }
.method-section { padding: 102px 0 108px; background: var(--pine); color: white; }
.method-section .eyebrow { color: var(--accent); }
.method-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; margin-bottom: 42px; }
.method-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.method-card { min-height: 247px; border: 1px solid rgba(222,238,226,.2); border-radius: 17px; padding: 22px; background: rgba(255,255,255,.07); }
.method-card :is(span, .is-span) { display: inline-block; margin-bottom: 52px; color: var(--accent); font-size: 12px; font-weight: 700; }
.method-card h3 { margin-bottom: 10px; font: 400 23px/1.19 var(--serif); letter-spacing: -.04em; }
.method-card p:where(:not([class*="is-"])) { margin: 0; color: #C3D8CB; font-size: 13px; }
.evidence-section { padding: 105px 0; }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; }
.evidence-grid > * { min-width: 0; }
.evidence-grid h2 { margin-bottom: 25px; }
.evidence-grid p:where(:not([class*="is-"])) { max-width: 670px; color: #4B5B52; }
.evidence-note { color: var(--muted) !important; font-size: 12px; }
.evidence-guide { display: inline-flex; margin-top: 13px; border-bottom: 1px solid currentColor; padding-bottom: 3px; color: var(--pine); font-size: 14px; font-weight: 700; }
.evidence-guide:hover { color: #4D7F35; }
.evidence-card { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 23px; padding: 31px; background: #DEE9DB; }
.evidence-card :is(small, .is-small) { color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.evidence-card :is(strong, .is-strong) { max-width: 500px; font: 400 clamp(34px,3.7vw,52px)/1.12 var(--serif); letter-spacing: -.05em; }
.evidence-card :is(span, .is-span) { color: #456350; font-size: 13px; }
.faq-section { padding: 100px 0 109px; background: #EDEFE8; }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.faq-grid .eyebrow { color: #4E6E5D; }
.faq-item { border-bottom: 1px solid #CED8CC; }
.faq-item:first-child { border-top: 1px solid #CED8CC; }
.faq-item summary { position: relative; padding: 22px 34px 22px 0; cursor: pointer; font-size: 17px; font-weight: 600; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 3px; top: 19px; color: #4E785A; font-size: 24px; font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p:where(:not([class*="is-"])) { max-width: 680px; margin: 0 0 23px; color: #4B5B52; font-size: 15px; }
.related-section { padding: 84px 0 102px; }
.related-section h2 { margin: 14px 0 35px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.related-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; border-radius: 18px; padding: 26px; background: var(--surface); transition: transform .2s, background .2s; }
.related-card:nth-child(2) { background: var(--sand); }
.related-card:hover { transform: translateY(-3px); background: #DFE9DC; }
.related-card :is(small, .is-small) { color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.related-card :is(strong, .is-strong) { font: 400 33px/1.18 var(--serif); letter-spacing: -.045em; }
.related-card :is(span, .is-span):last-child { align-self: flex-end; font-size: 25px; }
.directory-section { padding: 94px 0 100px; border-top: 1px solid var(--line); }
.directory-section:nth-of-type(even) { background: #EDF0EA; }
.directory-section .section-head { margin-bottom: 33px; }
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.directory-card { display: flex; min-width: 0; min-height: 255px; flex-direction: column; border: 1px solid #DCE4D8; border-radius: 19px; padding: 25px; background: #FFFFFF; transition: transform .2s, box-shadow .2s, border-color .2s; }
.directory-card:hover { transform: translateY(-3px); border-color: #AFC8AD; box-shadow: 0 15px 30px rgba(31,53,43,.07); }
.directory-card :is(small, .is-small) { margin-bottom: 32px; color: #4A6354; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.directory-card h3 { margin-bottom: 9px; font: 400 clamp(25px,2.5vw,34px)/1.16 var(--serif); letter-spacing: -.045em; }
.directory-card p:where(:not([class*="is-"])) { margin-bottom: 0; color: #4C5E53; font-size: 14px; }
.directory-card .card-action { padding-top: 15px; }
.inner-footer-nav { display: flex; flex-wrap: wrap; gap: 17px; }
.inner-footer-nav a { border-bottom: 1px solid transparent; }
.inner-footer-nav a:hover { border-color: currentColor; }
@media (max-width: 1040px) {
.inner-hero-grid { gap: 32px; }
.visual-panel { min-height: 430px; }
.method-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 800px) {
.inner-hero { padding: 31px 0 70px; }
.inner-hero-grid, .intro-grid, .evidence-grid, .faq-grid { grid-template-columns: 1fr; gap: 30px; }
.visual-panel { max-width: 650px; width: 100%; }
.facts-band-inner { grid-template-columns: 1fr 1fr; }
.facts-band-inner > div:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
.intro-section, .evidence-section, .faq-section { padding: 78px 0; }
.situation-grid { grid-template-columns: 1fr; margin-top: 29px; }
.situation-card { min-height: 175px; }
.situation-card .number { margin-bottom: 22px; }
.method-section { padding: 78px 0; }
.method-head { grid-template-columns: 1fr; gap: 16px; }
.related-section { padding: 75px 0; }
.directory-section { padding: 70px 0; }
.directory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
h2 { font-size: clamp(32px, 8.8vw, 40px); overflow-wrap: anywhere; }
.breadcrumbs { padding-top: 21px; }
.inner-hero { padding-top: 28px; padding-bottom: 62px; }
.inner-hero h1 { font-size: clamp(40px,10vw,58px); }
.hero-detail { margin-top: 22px; }
.visual-panel { min-height: 360px; padding: 19px; border-radius: 20px; }
.visual-panel-center { padding: 22px 0 8px; }
.diagram-row { min-height: 56px; padding: 10px 12px; }
.diagram-row :is(strong, .is-strong) { font-size: 18px; }
.diagram-row.highlight { transform: translateX(7px); }
.ai .diagram-row.highlight { transform: translateX(-5px); }
.migration-flow .flow-box { min-height: 115px; padding: 12px; }
.migration-flow .flow-box :is(strong, .is-strong) { font-size: 28px; }
.facts-band-inner { grid-template-columns: 1fr; }
.facts-band-inner > div { min-height: 74px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
.facts-band-inner > div:first-child { border-top: 0; }
.intro-section, .evidence-section, .faq-section { padding: 69px 0; }
.intro-grid p:where(:not([class*="is-"])) { font-size: 16px; }
.situation-card { padding: 23px; }
.method-section { padding: 70px 0; }
.method-grid, .related-grid { grid-template-columns: 1fr; }
.method-card { min-height: 185px; }
.method-card :is(span, .is-span) { margin-bottom: 29px; }
.evidence-card { min-height: 250px; padding: 24px; }
.faq-item summary { font-size: 16px; }
.related-card { min-height: 185px; }
.directory-grid { grid-template-columns: 1fr; }
.directory-card { min-height: 225px; }
}
@media (max-width: 360px) {
.brand > :is(span, .is-span):last-child { display: none; }
}
/* ==== Обращение (razrabotchik-contact-preview.html) ==== */
.contact-hero { padding: 43px 0 88px; }
.contact-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(290px,.62fr); gap: clamp(34px,6vw,100px); align-items: end; }
.contact-hero .eyebrow { color: var(--pine); margin-bottom: 24px; }
.contact-hero h1 { max-width: 850px; margin-bottom: 22px; }
.contact-hero h1 em { color: #34785D; }
.contact-hero .hero-lead { max-width: 695px; margin-bottom: 0; }
.brief-card { position: relative; min-height: 264px; overflow: hidden; border: 1px solid #D4E0D3; border-radius: 22px; padding: 27px; background: #E4ECE0; box-shadow: 0 17px 35px rgba(31,53,43,.06); }
.brief-card::before { content: ''; position: absolute; width: 240px; height: 240px; right: -75px; top: -110px; border: 1px solid #C6D8C2; border-radius: 50%; box-shadow: 0 0 0 39px rgba(255,255,255,.22), 0 0 0 80px rgba(255,255,255,.16); }
.brief-card > * { position: relative; }
.brief-card :is(small, .is-small) { display: block; margin-bottom: 48px; color: #4A6354; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.brief-card :is(strong, .is-strong) { display: block; max-width: 340px; margin-bottom: 12px; font: 400 30px/1.18 var(--serif); letter-spacing: -.05em; }
.brief-card p:where(:not([class*="is-"])) { max-width: 350px; margin-bottom: 0; color: #4B6152; font-size: 14px; }
.request-section { padding: 86px 0 107px; background: #EAEFE8; }
.request-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr); gap: 18px; align-items: start; }
.request-form-card { min-width: 0; border: 1px solid #DFE7DB; border-radius: 23px; padding: clamp(27px,4vw,47px); background: #FFFFFF; box-shadow: 0 18px 48px rgba(31,53,43,.06); }
.request-form-card .eyebrow { color: #4E6E5D; margin-bottom: 18px; }
.request-form-card h2 { margin-bottom: 12px; font-size: clamp(37px,3.9vw,53px); }
.form-intro { max-width: 605px; margin-bottom: 35px; color: #526259; font-size: 15px; }
.field { min-width: 0; margin-bottom: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.field .optional { color: #4A6354; font-size: 11px; font-weight: 500; }
.field .required { color: #357252; }
.field input:not([type="file"]), .field textarea { width: 100%; border: 1px solid #D4DED2; border-radius: 11px; padding: 15px 16px; background: #F8FAF6; color: var(--ink); font: 400 15px/1.4 var(--sans); outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.field input:not([type="file"]) { min-height: 54px; }
.field textarea { min-height: 168px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7D8C80; opacity: 1; }
.field input:focus, .field textarea:focus { border-color: #5D9466; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(93,148,102,.16); }
.field-help { margin: -3px 0 0; color: #4A6354; font-size: 12px; }
.upload-box { position: relative; border: 1px dashed #A8BEA7; border-radius: 13px; padding: 21px 22px; background: #F8FAF6; transition: border-color .2s, background .2s, box-shadow .2s; }
.upload-box:focus-within, .upload-box.is-dragging { border-color: #5D9466; background: #F1F7EF; box-shadow: 0 0 0 3px rgba(93,148,102,.12); }
.upload-box input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.upload-trigger { display: inline-flex; align-items: center; gap: 9px; color: #285C3D; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-color: #9AB79B; text-underline-offset: 4px; }
.upload-trigger::before { content: '+'; display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #DFEEDD; color: #276044; font-size: 19px; font-weight: 400; text-decoration: none; }
.upload-box p:where(:not([class*="is-"])) { margin: 10px 0 0; color: #4A6354; font-size: 12px; }
.upload-error { margin: 9px 0 0; color: #A43D35; font-size: 12px; font-weight: 600; }
.upload-error:empty, .selected-files:empty { display: none; }
.selected-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.selected-files li { display: inline-flex; max-width: 100%; align-items: center; gap: 7px; border: 1px solid #D3E4D0; border-radius: 9px; padding: 4px 5px 4px 10px; background: #F0F6EE; color: #385943; font-size: 12px; }
.selected-files li :is(span, .is-span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-files button { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #466B50; cursor: pointer; font-size: 18px; }
.selected-files button:hover, .selected-files button:focus-visible { background: #DDECDD; outline: none; }
.form-divider { height: 1px; margin: 31px 0 24px; background: #E1E8DE; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.spam-protection { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; color: #4A6354; font-size: 11px; line-height: 1.4; }
.spam-protection svg { flex: none; color: #538364; }
.request-submit { min-height: 58px; border: 0; cursor: pointer; }
.request-submit:hover { transform: translateY(-2px); }
.request-submit .arrow { flex: none; }
.form-footnote { max-width: 585px; margin: 16px 0 0; color: #4A6354; font-size: 12px; }
.form-status { min-height: 1px; margin: 14px 0 0; color: #285741; font-size: 13px; font-weight: 600; }
.contact-side { min-width: 0; overflow: hidden; border-radius: 23px; background: var(--pine); color: #F4F8F2; }
.side-main { padding: clamp(29px,3.2vw,43px); }
.contact-side .eyebrow { margin-bottom: 28px; color: var(--accent); }
.contact-side h2 { margin-bottom: 36px; font-size: clamp(34px,3.4vw,46px); }
.contact-side .step { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 19px 0 20px; border-top: 1px solid rgba(236,245,233,.2); }
.contact-side .step :is(b, .is-b) { color: var(--accent); font-size: 12px; letter-spacing: .07em; }
.contact-side .step :is(strong, .is-strong) { display: block; margin-bottom: 5px; font-size: 15px; }
.contact-side .step p:where(:not([class*="is-"])) { margin: 0; color: #BDD2C4; font-size: 13px; }
.direct-email { padding: 30px clamp(29px,3.2vw,43px) 34px; background: var(--accent); color: var(--ink); }
.direct-email :is(small, .is-small) { display: block; margin-bottom: 11px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.direct-email a { display: inline-block; max-width: 100%; border-bottom: 1px solid currentColor; padding-bottom: 3px; font: 400 clamp(22px,2.45vw,32px)/1.25 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.direct-email p:where(:not([class*="is-"])) { margin: 13px 0 0; color: #3E5438; font-size: 12px; }
.privacy-note { padding: 35px 0 63px; background: #EAEFE8; }
.privacy-inner { display: flex; gap: 22px; align-items: flex-start; max-width: 820px; border-top: 1px solid #CCD8CA; padding-top: 23px; }
.privacy-inner > :is(span, .is-span) { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid #BCD1BA; border-radius: 11px; color: #3D7150; font-size: 18px; }
.privacy-inner p:where(:not([class*="is-"])) { margin: 0; color: #4F6254; font-size: 13px; }
.privacy-inner :is(strong, .is-strong) { color: var(--ink); }
@media (max-width: 1000px) {
.contact-hero-grid { grid-template-columns: 1fr; align-items: start; }
.brief-card { min-height: 205px; }
.brief-card :is(small, .is-small) { margin-bottom: 26px; }
.request-grid { grid-template-columns: 1fr; }
.contact-side { display: grid; grid-template-columns: 1fr minmax(270px,.65fr); }
.direct-email { display: flex; flex-direction: column; justify-content: flex-end; }
}
@media (max-width: 800px) {
.contact-hero { padding: 31px 0 70px; }
.request-section { padding: 68px 0 0; }
.contact-side { grid-template-columns: 1fr; }
.direct-email { min-height: 190px; }
.privacy-note { padding-bottom: 70px; }
}
@media (max-width: 600px) {
.contact-hero { padding: 28px 0 58px; }
.contact-hero .eyebrow { margin-bottom: 19px; }
.contact-hero h1 { font-size: clamp(40px,10vw,57px); overflow-wrap: anywhere; }
.contact-hero .hero-lead { font-size: 16px; }
.brief-card { min-height: 0; padding: 23px; }
.brief-card :is(strong, .is-strong) { font-size: 27px; }
.request-section { padding-top: 56px; }
.request-form-card { padding: 25px 21px 28px; border-radius: 19px; }
.request-form-card h2 { font-size: 37px; }
.form-intro { margin-bottom: 28px; }
.field textarea { min-height: 190px; }
.request-submit { width: 100%; justify-content: space-between; }
.contact-side { border-radius: 19px; }
.side-main { padding: 27px 24px; }
.contact-side h2 { margin-bottom: 20px; }
.direct-email { min-height: 165px; padding: 26px 24px 29px; }
.privacy-inner { gap: 13px; }
}
@media (max-width: 360px) {
.request-form-card h2 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
.request-submit:hover { transform: none; } }
/* ==== Материалы и статьи (razrabotchik-guides / *-guide-preview.html) ==== */
.guide-hero {padding: 65px 0 108px;}
.guide-hero-grid {display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(35px,6vw,88px);align-items:center;}
.guide-hero .eyebrow, .article-header .eyebrow {color:var(--pine);margin-bottom:22px;}
.guide-hero h1 {max-width:790px;}
.guide-hero .hero-lead {max-width:650px;}
.guide-hero .hero-buttons {margin-top:26px;}
.guide-visual {position:relative;min-height:510px;display:flex;flex-direction:column;gap:15px;justify-content:center;overflow:hidden;border:1px solid #D5E0D2;border-radius:28px;padding:44px;background:linear-gradient(145deg,#EAF1E8,#D6E4D5);box-shadow:0 24px 45px rgba(31,53,43,.09);}
.guide-visual::before {content:'';position:absolute;inset:0;background-image:linear-gradient(#B4C9B7 1px,transparent 1px),linear-gradient(90deg,#B4C9B7 1px,transparent 1px);background-size:38px 38px;opacity:.22;}
.guide-visual > * {position:relative;}
.guide-visual-label {display:flex;justify-content:space-between;margin-bottom:15px;color:#4D6A56;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.guide-visual-card {border:1px solid #D1DED0;border-radius:17px;padding:21px 23px;background:#FBFCF9;box-shadow:0 14px 30px rgba(35,66,46,.08);}
.guide-visual-card:nth-of-type(3) {margin-left:38px;background:var(--pine);color:#F5F9F4;border-color:var(--pine);}
.guide-visual-card :is(small, .is-small) {display:block;margin-bottom:11px;color:#4A6354;font-size:11px;font-weight:700;letter-spacing:.1em;}
.guide-visual-card:nth-of-type(3) :is(small, .is-small) {color:#BED5C8;}
.guide-visual-card :is(strong, .is-strong) {font:400 29px/1.15 var(--serif);letter-spacing:-.045em;}
.guide-listing {padding:105px 0;background:var(--pine);color:#fff;}
.guide-listing .eyebrow {color:var(--accent);}
.guide-listing h2 {margin:17px 0 38px;}
.guide-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.guide-cards .guide-card {display:flex;flex-direction:column;min-height:375px;padding:31px;border-radius:20px;background:#F7F5F0;color:var(--ink);transition:transform .2s,box-shadow .2s;}
.guide-cards .guide-card:nth-child(2) {background:#DEEBDA;}
.guide-cards .guide-card:hover {transform:translateY(-4px);box-shadow:0 19px 35px rgba(0,0,0,.12);}
.guide-cards .guide-card :is(small, .is-small) {color:#4A6354;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.guide-cards .guide-card h3 {margin:45px 0 14px;font:400 clamp(30px,3vw,43px)/1.13 var(--serif);letter-spacing:-.05em;}
.guide-cards .guide-card p:where(:not([class*="is-"])) {max-width:500px;color:#4B5B52;font-size:15px;}
.guide-cards .guide-card .card-action {margin-top:auto;padding-top:27px;}
.guide-principles {padding:105px 0;}
.guide-principles .section-head {margin-bottom:35px;}
.guide-principles .eyebrow {color:#4E6E5D;}
.principles-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.principle {min-height:225px;padding:27px;border-radius:17px;background:var(--surface);}
.principle:nth-child(2) {background:var(--sand);}
.principle:nth-child(3) {background:#E1EAE0;}
.principle :is(small, .is-small) {color:#4A6354;font-weight:700;font-size:11px;letter-spacing:.1em;}
.principle h3 {margin:40px 0 10px;font:400 29px/1.17 var(--serif);letter-spacing:-.04em;}
.principle p:where(:not([class*="is-"])) {margin:0;color:#4B5B52;font-size:14px;}
.article-header {padding:39px 0 72px;}
.article-header h1 {max-width:1080px;font-size:clamp(45px,5.4vw,76px);}
.article-header .hero-lead {max-width:840px;margin:24px 0 0;}
.article-tags {display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;}
.article-tags :is(span, .is-span) {border:1px solid #C9D7C8;border-radius:99px;padding:7px 11px;color:#466354;font-size:11px;font-weight:700;}
.article-rule {border-top:1px solid var(--line);}
.article-layout {display:grid;grid-template-columns:minmax(180px,245px) minmax(0,780px);justify-content:space-between;gap:60px;padding-top:76px;padding-bottom:108px;}
.article-toc {align-self:start;position:sticky;top:116px;border-top:1px solid #C9D5CA;padding-top:18px;}
.article-toc :is(strong, .is-strong) {display:block;margin-bottom:15px;color:#55705D;font-size:11px;letter-spacing:.11em;text-transform:uppercase;}
.article-toc a {display:block;padding:9px 0;color:#41554B;font-size:13px;border-bottom:1px solid #D8E0D7;}
.article-toc a:hover {color:#34785D;}
.article-body {min-width:0;}
.article-body .article-intro {padding-bottom:32px;margin-bottom:52px;border-bottom:1px solid var(--line);font-size:20px;line-height:1.6;color:#344940;}
.article-section {margin-bottom:65px;}
.article-section h2 {font-size:clamp(34px,3.4vw,48px);margin:0 0 24px;}
.article-section h3 {font:400 26px/1.24 var(--serif);letter-spacing:-.035em;margin:0 0 10px;}
.article-section p:where(:not([class*="is-"])) {color:#3F5348;font-size:16px;line-height:1.72;margin:0 0 18px;}
.article-section ul {margin:20px 0 0;padding-left:23px;color:#3F5348;}
.article-section li {padding-left:5px;margin-bottom:12px;font-size:16px;line-height:1.62;}
.article-section li::marker {color:#568A5D;}
.article-callout {border-left:4px solid #6EB279;border-radius:0 17px 17px 0;background:#E7EEE4;padding:24px 27px;margin:29px 0;}
.article-callout :is(strong, .is-strong) {display:block;margin-bottom:8px;font:400 26px/1.2 var(--serif);letter-spacing:-.035em;}
.article-callout p:where(:not([class*="is-"])) {margin:0;font-size:15px;}
.decision-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0;}
.decision-card {border-radius:15px;background:#EBEFE8;padding:20px;}
.decision-card:nth-child(2) {background:#E3EBDC;}
.decision-card:nth-child(3) {background:#EBE5D9;}
.decision-card :is(small, .is-small) {display:block;margin-bottom:26px;color:#4A6354;font-size:11px;font-weight:700;letter-spacing:.08em;}
.decision-card h3 {font-size:23px;}
.decision-card p:where(:not([class*="is-"])) {font-size:14px;line-height:1.5;margin:0;}
.step-list {display:grid;gap:11px;margin:27px 0;}
.step-list .step {display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;border-top:1px solid #D1DDD1;padding:18px 0;}
.step-list .step :is(small, .is-small) {font-size:12px;color:#4A6354;font-weight:700;}
.step-list .step h3 {font-size:24px;}
.step-list .step p:where(:not([class*="is-"])) {font-size:15px;margin:0;}
.worksheet {margin:30px 0 8px;border:1px solid #C9D9CC;border-radius:18px;padding:27px;background:#F0F3ED;}
.worksheet-kicker {display:block;margin-bottom:11px;color:#4A7658;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;}
.worksheet h3 {margin-bottom:10px;font-size:27px;}
.worksheet > p:where(:not([class*="is-"])) {margin-bottom:16px;font-size:14px;color:#506158;}
.worksheet dl {margin:0;}
.worksheet-row {display:grid;grid-template-columns:minmax(145px,.38fr) minmax(0,1fr);gap:18px;border-top:1px solid #D0DDD0;padding:15px 0;}
.worksheet-row :is(dt, .is-dt) {color:#244F3C;font-size:13px;font-weight:700;}
.worksheet-row :is(dd, .is-dd) {margin:0;color:#42554B;font-size:14px;line-height:1.55;}
@media(max-width:600px) {
.worksheet {padding:21px}
.worksheet-row {grid-template-columns:1fr;gap:5px}}
.article-cta {padding:85px 0;background:var(--pine);color:white;}
.article-cta .eyebrow {color:var(--accent);}
.article-cta h2 {max-width:850px;margin:17px 0 19px;}
.article-cta p:where(:not([class*="is-"])) {max-width:690px;color:#C8DCCF;font-size:17px;}
.article-cta .hero-buttons {margin-top:28px;}
.article-cta .button-soft:not(.wp-block-button) {background:#E9F0E7;}
.article-next {padding:85px 0;}
.article-next h2 {margin:15px 0 26px;}
.article-next .related-grid {max-width:900px;}
@media(max-width:1020px) {
.guide-hero-grid {gap:35px}
.guide-visual {min-height:420px;padding:30px}
.article-layout {gap:35px}}
@media(max-width:800px) {
.guide-hero {padding:52px 0 72px}
.guide-hero-grid {grid-template-columns:1fr}
.guide-visual {max-width:650px;min-height:390px}
.guide-listing, .guide-principles {padding:78px 0}
.article-layout {grid-template-columns:1fr;padding-top:55px;padding-bottom:73px}
.article-toc {position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.article-toc :is(strong, .is-strong) {grid-column:1/-1}
.article-header {padding-bottom:57px}}
@media(max-width:600px) {
.guide-hero {padding-top:39px}
.guide-visual {min-height:350px;padding:20px}
.guide-visual-card {padding:16px}
.guide-visual-card:nth-of-type(3) {margin-left:16px}
.guide-visual-card :is(strong, .is-strong) {font-size:24px}
.guide-cards, .principles-grid, .decision-grid {grid-template-columns:1fr}
.guide-cards .guide-card {min-height:315px;padding:24px}
.guide-cards .guide-card h3 {margin-top:35px}
.guide-principles, .guide-listing {padding:70px 0}
.principle {min-height:185px;padding:23px}
.principle h3 {margin-top:27px}
.article-header h1 {font-size:clamp(40px,10vw,56px);overflow-wrap:anywhere}
.article-header {padding-top:28px}
.article-layout {padding-top:40px}
.article-toc {grid-template-columns:1fr}
.article-body .article-intro {font-size:18px;margin-bottom:43px}
.article-section {margin-bottom:49px}
.article-section h2 {font-size:35px}
.article-callout {padding:21px}
.article-cta, .article-next {padding:70px 0}}
@media(prefers-reduced-motion:reduce) {
.guide-cards .guide-card:hover {transform:none}}
/* ==== Адаптация к разметке WordPress (tools/css/wp-adapter.css) ==== */
/* Шрифты подключаются отдельным файлом assets/css/fonts.css (локальные копии IBM Plex). */
/* Абзацы на месте span/small/strong макета: без собственных отступов,
нулевая специфичность — правила макета их переопределяют. */
:where(.is-span, .is-small, .is-strong, .is-b, .is-a, .is-dt, .is-dd, .is-label, .is-i, p.eyebrow) { margin: 0; }
:where(.is-dl) { margin: 0; }
/* strong/b макета стали абзацами — возвращаем им начертание. */
:where(.is-strong, .is-b) { font-weight: 700; }
.wp-block-group { box-sizing: border-box; }
.wp-block-heading { overflow-wrap: break-word; }
h3 { font-weight: 400; }
/* Ссылки внутри обычного текста отличаются не только цветом. */
:where(.hero-lead, .intro-grid, .evidence-grid, .about-copy, .faq-item, .article-section, .article-intro, .form-intro, .privacy-inner) p a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Кнопки (блок «Кнопки» вместо ) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 11px; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button.button-dark > .wp-block-button__link,
.wp-block-button.button-soft > .wp-block-button__link {
display: inline-flex;
min-height: 56px;
align-items: center;
justify-content: center;
gap: 24px;
border: 0;
border-radius: 12px;
padding: 9px 22px;
font: 700 14px/1.3 var(--sans);
letter-spacing: normal;
text-align: left;
text-decoration: none;
transition: transform .2s, background .2s;
}
.wp-block-button.has-arrow > .wp-block-button__link { padding-right: 11px; }
.wp-block-button.button-dark > .wp-block-button__link { background: var(--pine); color: var(--white); }
.wp-block-button.button-dark > .wp-block-button__link:hover { background: var(--pine-deep); color: var(--white); transform: translateY(-2px); }
.wp-block-button.button-soft > .wp-block-button__link { background: var(--sand); color: var(--ink); padding-right: 23px; }
.wp-block-button.button-soft.has-arrow > .wp-block-button__link { padding-right: 11px; }
.wp-block-button.button-soft > .wp-block-button__link:hover { background: #E3DDD0; color: var(--ink); transform: translateY(-2px); }
.wp-block-button.has-arrow > .wp-block-button__link::after {
content: '↗';
display: inline-grid;
flex: none;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--accent);
color: var(--ink);
font-size: 21px;
line-height: 1;
}
.article-cta .wp-block-button.button-soft > .wp-block-button__link { background: #E9F0E7; }
.contact-section .single-button { flex: none; }
.cases-section .wp-block-button__link:focus-visible,
.method-section a:focus-visible,
.article-cta a:focus-visible,
.contact-side a:focus-visible,
.site-footer a:focus-visible { outline-color: var(--accent); }
/* ---------- Карточки-ссылки: ссылка на заголовке растягивается на карточку ---------- */
.is-card-link { position: relative; }
.is-card-link :is(h3, .is-strong) a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.is-card-link :is(h3, .is-strong) a:focus-visible { outline: none; }
.is-card-link:has(a:focus-visible) { outline: 3px solid #598930; outline-offset: 4px; }
.related-card::after { content: '↗'; align-self: flex-end; font-size: 25px; line-height: 1; }
.directory-card .card-action, .guide-cards .guide-card .card-action { align-self: flex-start; }
/* Значок в примечании на странице обращения (в макете — span). */
.privacy-inner::before {
content: '↗';
flex: none;
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid #BCD1BA;
border-radius: 11px;
color: #3D7150;
font-size: 18px;
}
/* ---------- Шапка: меню и язык ссылками ---------- */
.desktop-nav a[aria-current="page"], .desktop-nav .is-current { color: #34785D; }
.mobile-nav a[aria-current="page"] { color: #34785D; }
.languages a {
display: inline-grid;
place-items: center;
min-width: 39px;
min-height: 31px;
border-radius: 7px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.languages a:hover { color: var(--ink); background: var(--surface); }
.languages [aria-current="true"] { background: var(--pine); color: var(--white); }
.languages span[aria-current] {
display: inline-grid;
place-items: center;
min-width: 39px;
min-height: 31px;
border-radius: 7px;
font-size: 12px;
font-weight: 700;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
.admin-bar .site-header { top: 0; }
.languages a, .languages span[aria-current] { min-width: 40px; min-height: 40px; }
}
.site-footer a:hover { color: var(--accent); }
.footer-inner > a { color: #A9C1B5; }
/* ---------- Форма обращения (Contact Form 7) ---------- */
/* CF7 6 кладёт служебные скрытые поля в