:root {
  --navy: #111c2d;
  --navy-soft: #1d2a3d;
  --wine: #8d2032;
  --wine-dark: #711827;
  --ivory: #f5f2ed;
  --paper: #fbfaf8;
  --white: #ffffff;
  --ink: #17202d;
  --muted: #606875;
  --line: #d7d4cf;
  --page: min(1280px, calc(100vw - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 30; background: white; padding: 10px 14px; }
.skip-link:focus { left: 12px; }

.site-header { min-height: 72px; display: flex; align-items: center; gap: 38px; padding: 0 max(28px, calc((100vw - 1280px) / 2)); background: var(--navy); color: white; position: sticky; top: 0; z-index: 10; }
.brand { color: white; font: 500 28px/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; text-decoration: none; }
.site-header nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.site-header nav a, footer nav a { color: #f2f3f5; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover, footer nav a:hover { color: #edc7cd; }

.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wine); border-radius: 0; background: var(--wine); color: white; padding: 12px 21px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .055em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.button:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.button-small { min-height: 38px; padding: 9px 18px; font-size: 10px; }
.button-telegram { gap: 9px; border-color: #229ed9; background: #229ed9; color: white; }
.button-telegram img { width: 22px; height: 22px; }
.button-telegram:hover { border-color: #1688bd; background: #1688bd; color: white; }
.text-link, .service-item > a { color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.text-link:hover, .service-item > a:hover { text-decoration: underline; text-underline-offset: 5px; }

.hero { min-height: 590px; display: grid; grid-template-columns: minmax(0, .96fr) minmax(480px, 1.04fr); background: var(--paper); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 74px max(48px, calc((100vw - 1280px) / 2)) 76px; padding-right: clamp(54px, 7vw, 110px); }
.section-label { margin: 0 0 22px; color: var(--wine); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { max-width: 690px; margin: 0; color: var(--navy); font: 500 clamp(54px, 5.7vw, 82px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.hero h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 32px; background: var(--wine); }
.hero-lede { max-width: 560px; margin: 26px 0 0; color: #4f5762; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.hero-image { min-width: 0; min-height: 590px; margin: 0; position: relative; overflow: hidden; background: #d7d0c6; }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 62%; filter: saturate(.72) contrast(.94); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 28, 45, .04), transparent 55%); pointer-events: none; }
.hero-image figcaption { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 12px; min-width: 205px; padding: 62px 42px; background: rgba(245, 242, 237, .89); color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-image figcaption::after { content: ""; width: 36px; height: 2px; margin-top: 10px; background: var(--wine); }

.section { width: var(--page); margin: 0 auto; padding: 96px 0; }
.section-intro { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(260px, .65fr); gap: 34px; align-items: start; }
.section-intro .section-label { padding-top: 10px; }
.section h2 { margin: 0; color: var(--navy); font: 500 clamp(38px, 4.3vw, 60px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.section-intro > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

.services { padding-top: 82px; }
.service-list { margin-top: 54px; border-top: 1px solid var(--navy); }
.service-item, .service-item-primary { min-height: 106px; display: grid; grid-template-columns: 74px minmax(250px, .64fr) minmax(320px, 1.1fr) 130px; gap: 30px; align-items: center; padding: 23px 18px; border-bottom: 1px solid var(--line); }
.service-item-primary { min-height: 145px; }
.service-index { margin: 0; color: var(--wine); font: 500 19px Georgia, "Times New Roman", serif; }
.service-item h3 { margin: 0; color: var(--navy); font: 500 25px/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.service-item p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.service-kicker { display: none; }
.service-item ul { margin: 0; padding: 0; list-style: none; }
.service-item li { color: #505866; font-size: 12px; line-height: 1.7; }
.service-item:not(.service-item-primary) > div { grid-column: 2 / 4; }
.service-item > a { justify-self: end; }

.process { width: 100%; padding: 67px max(28px, calc((100vw - 1280px) / 2)); background: var(--navy); color: white; }
.process .section-label { color: #df9daa; }
.process h2 { color: white; }
.section-intro.compact { grid-template-columns: 110px minmax(0, 760px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 54px 0 0; padding: 0; border-top: 1px solid #536072; list-style: none; }
.steps li { min-height: 165px; padding: 26px 34px 0 0; border-right: 1px solid #536072; }
.steps li:not(:first-child) { padding-left: 34px; }
.steps li:last-child { border-right: 0; }
.steps span { color: #df9daa; font: 500 22px Georgia, serif; }
.steps h3 { margin: 19px 0 7px; color: white; font: 500 24px Georgia, serif; }
.steps p { margin: 0; max-width: 310px; color: #c1c9d3; font-size: 12px; }

.fit { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(72px, 10vw, 148px); }
.fit-copy > p:first-child { margin-top: 5px; color: var(--muted); font-size: 16px; }
.fit-copy ul { margin: 31px 0; padding: 0; border-top: 1px solid var(--navy); list-style: none; }
.fit-copy li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 14px; font-weight: 700; }
.fit-note { border-left: 3px solid var(--wine); padding-left: 16px; color: var(--muted); font-size: 11px; }

.consultation { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(58px, 8vw, 110px); border-top: 1px solid var(--navy); }
.form-intro { position: sticky; top: 108px; }
.form-intro > p:nth-of-type(2) { color: var(--muted); }
.telegram-contact { display: inline-flex; align-items: center; gap: 9px; margin-top: 15px; color: #157da9; font-size: 11px; font-weight: 800; letter-spacing: .055em; text-decoration: none; text-transform: uppercase; }
.telegram-contact img { width: 25px; height: 25px; }
.telegram-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.form-expectations { margin: 34px 0 0; }
.form-expectations div { display: grid; grid-template-columns: 78px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.form-expectations dt { color: var(--wine); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.form-expectations dd { margin: 0; color: var(--muted); font-size: 11px; }
.lead-form { background: var(--white); border-top: 4px solid var(--navy); padding: clamp(28px, 4vw, 42px); }
.form-head { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-head p { margin: 0 0 5px; color: var(--wine); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.form-head h3 { margin: 0; color: var(--navy); font: 500 27px Georgia, serif; }
.form-head > span { max-width: 150px; color: var(--muted); font-size: 10px; text-align: right; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.lead-form label, .lead-form legend { color: #39414c; font-size: 11px; font-weight: 700; }
.lead-form label > span, .lead-form legend > span { color: var(--wine); }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; margin-top: 7px; border: 1px solid #c6c7c8; border-radius: 0; background: white; padding: 12px; color: var(--ink); font: inherit; font-size: 13px; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: 2px solid rgba(141, 32, 50, .16); outline-offset: 1px; border-color: var(--wine); }
.lead-form fieldset { margin: 26px 0; padding: 0; border: 0; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.check-grid label { min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.check-grid input, .consent input { width: 15px; flex: 0 0 auto; margin: 0; accent-color: var(--wine); }
.check-grid label > span { color: #434b56; font-weight: 500; }
.message-field { display: block; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 21px 0; color: var(--muted) !important; font-weight: 400 !important; line-height: 1.45; }
.consent span { color: inherit !important; }
.website-field { position: absolute !important; left: -9999px !important; }
.security-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.security-row > span { color: var(--muted); font-size: 10px; }
.submit-button { width: 100%; margin-top: 20px; }
.form-status { display: none; margin-top: 15px; padding: 12px; font-size: 13px; }
.form-status.error { display: block; background: #fff1ee; color: #8d2e1d; }
.form-status.success { display: block; background: #eaf7f1; color: #175b43; }
.form-legal { color: #747d86; font-size: 10px; text-align: center; }
.form-legal a { font-weight: 700; }
.error-outline { outline: 2px solid #b44c38 !important; outline-offset: 3px; }

footer { display: grid; grid-template-columns: 1fr auto; gap: 28px 60px; padding: 50px max(28px, calc((100vw - 1280px) / 2)); background: #0a1320; color: #cad1db; }
.footer-brand { color: white; }
footer > div > p { margin: 12px 0 0; color: #99a4b2; font-size: 12px; }
footer nav { display: flex; gap: 24px; align-items: start; }
footer > small { color: #7e8999; }
.disclaimer { max-width: 760px; margin: 0; color: #7e8999; font-size: 10px; line-height: 1.55; text-align: right; }

.legal-page main { max-width: 880px; margin: 70px auto; padding: 0 24px; }
.legal-card { background: white; border-top: 4px solid var(--wine); padding: clamp(30px, 6vw, 68px); }
.legal-card h1 { margin: 8px 0 12px; color: var(--navy); font: 500 56px/1 Georgia, serif; }
.legal-card h2 { margin-top: 34px; color: var(--navy); font: 500 24px Georgia, serif; }
.legal-card p { color: #4f5a66; }
.legal-date { font-size: 13px; }
.legal-page footer { display: block; text-align: center; }

@media (max-width: 1020px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 560px; padding-left: max(28px, calc((100vw - 900px) / 2)); }
  .hero-image { min-height: 480px; }
  .section-intro { grid-template-columns: 100px 1fr; }
  .section-intro > p:last-child { grid-column: 2; }
  .service-item, .service-item-primary { grid-template-columns: 58px 1fr 120px; }
  .service-item > div, .service-item:not(.service-item-primary) > div { grid-column: 2; }
  .service-item ul { grid-column: 2; }
  .service-item-primary > a { grid-column: 3; grid-row: 1 / 3; }
  .fit, .consultation { grid-template-columns: 1fr; }
  .form-intro { position: static; }
  footer { grid-template-columns: 1fr; }
  .disclaimer { text-align: left; }
}

@media (max-width: 680px) {
  :root { --page: calc(100vw - 36px); }
  .site-header { min-height: 64px; padding: 0 18px; }
  .brand { font-size: 24px; }
  .site-header .button-small { display: none; }
  .hero-copy { min-height: auto; padding: 67px 20px 62px; }
  .hero h1 { font-size: clamp(48px, 14vw, 64px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-image { min-height: 390px; }
  .hero-image figcaption { min-width: 154px; padding: 35px 25px; font-size: 9px; }
  .section { padding: 72px 0; }
  .section-intro, .section-intro.compact { display: block; }
  .section-intro > p:last-child { margin-top: 22px; }
  .service-list { margin-top: 40px; }
  .service-item, .service-item-primary { grid-template-columns: 40px 1fr; gap: 20px 12px; padding: 26px 0; }
  .service-item > div, .service-item:not(.service-item-primary) > div { grid-column: 2; }
  .service-item ul, .service-item-primary > a, .service-item > a { grid-column: 2; grid-row: auto; justify-self: start; }
  .process { padding: 58px 18px; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li:not(:first-child) { min-height: 0; padding: 25px 0 29px; border-right: 0; border-bottom: 1px solid #536072; }
  .fit { gap: 40px; }
  .consultation { gap: 42px; }
  .field-grid, .check-grid { grid-template-columns: 1fr; }
  .form-head > span { display: none; }
  .security-row { align-items: flex-start; flex-direction: column; }
  footer { padding: 43px 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
