:root {
 --blue: #0c3d6e;
 --blue-dark: #082847;
 --green: #7cb342;
 --green-bright: #8bc34a;
 --green-cta: #9ccc65;
 --red-accent: #e53935;
 --white: #ffffff;
 --gray-50: #f7f9fb;
 --gray-100: #eef2f6;
 --gray-600: #5f6b7a;
 --gray-800: #263238;
 --shadow: 0 8px 32px rgba(12, 61, 110, 0.12);
 --radius: 8px;
 --container: 1180px;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 margin: 0;
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 color: var(--gray-800);
 line-height: 1.6;
 background: var(--white);
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
}

.container {
 width: min(100% - 2rem, var(--container));
 margin-inline: auto;
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

/* Header */
.site-header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: var(--white);
 box-shadow: 0 1px 0 rgba(12, 61, 110, 0.08);
}

.site-header__inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 0.85rem 0;
}

.site-logo {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 min-width: 0;
}

.site-logo img {
 width: 52px;
 height: 52px;
 flex-shrink: 0;
}

.site-logo__text strong {
 display: block;
 font-size: 1.35rem;
 color: var(--blue);
 line-height: 1.1;
}

.site-logo__text span {
 font-size: 0.68rem;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 color: var(--gray-600);
}

.site-nav {
 display: none;
}

.site-nav ul {
 display: flex;
 flex-wrap: wrap;
 gap: 0.15rem 1.1rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.site-nav a {
 font-size: 0.78rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 color: var(--gray-800);
 transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a.is-active {
 color: var(--blue);
}

.site-header__phone {
 font-size: 1.1rem;
 font-weight: 800;
 color: var(--green);
 white-space: nowrap;
}

.menu-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
 background: var(--white);
 cursor: pointer;
}

.mobile-nav {
 display: none;
 border-top: 1px solid var(--gray-100);
 padding: 0.5rem 0 1rem;
}

.mobile-nav.is-open {
 display: block;
}

.mobile-nav a {
 display: block;
 padding: 0.75rem 0;
 border-bottom: 1px solid var(--gray-100);
 font-weight: 600;
 font-size: 0.9rem;
}

@media (min-width: 992px) {
 .site-nav {
 display: block;
 }

 .menu-toggle {
 display: none;
 }

 .site-header__phone {
 font-size: 1.25rem;
 }
}

/* Hero */
.hero {
 position: relative;
 min-height: 560px;
 display: grid;
 align-items: center;
 overflow: hidden;
}

.hero__bg {
 position: absolute;
 inset: 0;
 z-index: 0;
}

.hero__bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.hero__bg::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(105deg, rgba(8, 40, 71, 0.82) 0%, rgba(8, 40, 71, 0.45) 55%, rgba(8, 40, 71, 0.25) 100%);
}

.hero__grid {
 position: relative;
 z-index: 1;
 display: grid;
 gap: 2rem;
 padding: 3rem 0 4rem;
}

.hero__anon {
 font-size: clamp(3.5rem, 12vw, 7.5rem);
 font-weight: 900;
 line-height: 0.95;
 letter-spacing: -0.03em;
 color: var(--white);
 text-transform: uppercase;
 text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
 margin: 0;
}

.hero__card {
 display: grid;
 gap: 1.5rem;
 max-width: 920px;
}

.hero__panel {
 background: rgba(255, 255, 255, 0.94);
 border-radius: calc(var(--radius) + 4px);
 padding: 1.75rem;
 box-shadow: var(--shadow);
}

.hero__eyebrow {
 color: var(--green);
 font-weight: 700;
 font-size: 0.9rem;
 margin: 0 0 0.5rem;
}

.hero__title {
 margin: 0;
 font-size: clamp(1.5rem, 3vw, 2.2rem);
 color: var(--blue);
 text-transform: uppercase;
 line-height: 1.15;
}

.hero__phones {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem 1.25rem;
 margin: 1rem 0 0.35rem;
}

.hero__phones a {
 font-size: clamp(1.25rem, 2.5vw, 1.75rem);
 font-weight: 800;
 color: var(--green);
}

.hero__sub {
 margin: 0;
 color: var(--gray-600);
 font-size: 0.92rem;
}

.hero__desc {
 margin: 1rem 0 0;
 font-style: italic;
 color: var(--gray-800);
}

.hero__list {
 margin: 1.25rem 0 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 0.55rem;
}

.hero__list li {
 display: flex;
 align-items: flex-start;
 gap: 0.6rem;
 font-size: 0.95rem;
}

.hero__list li::before {
 content: "";
 width: 10px;
 height: 10px;
 margin-top: 0.45rem;
 border-radius: 50%;
 background: var(--green);
 flex-shrink: 0;
}

.hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin-top: 1.5rem;
}

.hero__visual {
 display: none;
 align-self: end;
 justify-self: end;
 width: min(100%, 320px);
 border-radius: calc(var(--radius) + 4px);
 overflow: hidden;
 box-shadow: var(--shadow);
 border: 4px solid rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
 .hero__grid {
 grid-template-columns: 1fr auto;
 align-items: end;
 }

 .hero__visual {
 display: block;
 }
}

/* Buttons */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 min-height: 48px;
 padding: 0.75rem 1.5rem;
 border: 0;
 border-radius: 999px;
 font-weight: 700;
 font-size: 0.95rem;
 cursor: pointer;
 transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.btn:active {
 transform: scale(0.98);
}

.btn--primary {
 background: var(--blue);
 color: var(--white);
 box-shadow: 0 4px 16px rgba(12, 61, 110, 0.25);
}

.btn--primary:hover {
 background: var(--blue-dark);
}

.btn--outline {
 background: transparent;
 color: var(--blue);
 border: 2px solid var(--blue);
}

.btn--white {
 background: var(--white);
 color: var(--blue);
}

/* CTA band */
.cta-band {
 position: relative;
 overflow: hidden;
 background: linear-gradient(135deg, var(--green-cta) 0%, var(--green) 100%);
 color: var(--white);
 padding: 2.5rem 0;
}

.cta-band::before {
 content: "";
 position: absolute;
 inset: 0;
 background: url("/images/logo.svg") center / 420px no-repeat;
 opacity: 0.08;
}

.cta-band__inner {
 position: relative;
 text-align: center;
}

.cta-band h2 {
 margin: 0;
 font-size: clamp(1.2rem, 3vw, 2rem);
 text-transform: uppercase;
 line-height: 1.25;
 max-width: 900px;
 margin-inline: auto;
}

.cta-band__contacts {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 1.5rem 2.5rem;
 margin-top: 1.5rem;
}

.cta-band__item strong {
 display: block;
 font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cta-band__item span {
 font-size: 0.85rem;
 opacity: 0.9;
}

.cta-band .btn {
 margin-top: 1.5rem;
}

/* Section */
.section {
 padding: 4rem 0;
}

.section--gray {
 background: var(--gray-50);
}

.section__title {
 margin: 0;
 font-size: clamp(1.5rem, 3vw, 2rem);
 color: var(--blue);
 text-transform: uppercase;
}

.section__title::after {
 content: "";
 display: block;
 width: 72px;
 height: 3px;
 background: var(--red-accent);
 margin-top: 0.65rem;
}

.section__lead {
 margin: 1rem 0 0;
 max-width: 720px;
 color: var(--gray-600);
}

/* Service cards */
.services-grid {
 display: grid;
 gap: 2rem;
 margin-top: 2.5rem;
}

@media (min-width: 768px) {
 .services-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.service-card {
 background: var(--white);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.service-card__thumb {
 position: relative;
 margin: -40px auto 0;
 width: 120px;
 height: 120px;
 border-radius: 50%;
 overflow: hidden;
 border: 5px solid var(--white);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 background: var(--gray-100);
}

.service-card__thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}

.service-card__head {
 margin-top: 3.5rem;
 background: var(--green);
 color: var(--white);
 padding: 1rem 1.25rem;
 min-height: 88px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.service-card__head h3 {
 margin: 0;
 font-size: 0.82rem;
 text-transform: uppercase;
 line-height: 1.3;
}

.service-card__body {
 padding: 1.25rem 1.5rem 1.5rem;
 flex: 1;
}

.service-card__body ul {
 margin: 0;
 padding: 0;
 list-style: none;
 display: grid;
 gap: 0.75rem;
}

.service-card__body li {
 display: flex;
 gap: 0.6rem;
 font-size: 0.9rem;
 color: var(--gray-800);
}

.service-card__body li::before {
 content: "+";
 color: var(--green);
 font-weight: 800;
 flex-shrink: 0;
}

.service-card__price {
 margin-top: 1rem;
 padding-top: 1rem;
 border-top: 2px solid var(--red-accent);
 font-weight: 700;
 color: var(--blue);
}

.services-grid > .service-card:first-child {
 padding-top: 40px;
}

.services-grid > .service-card:not(:first-child) {
 padding-top: 40px;
}

/* About */
.about-grid {
 display: grid;
 gap: 2rem;
 margin-top: 2rem;
 align-items: start;
}

@media (min-width: 900px) {
 .about-grid {
 grid-template-columns: 1fr 1fr;
 }
}

.about-media {
 position: relative;
 border-radius: calc(var(--radius) + 4px);
 overflow: hidden;
 box-shadow: var(--shadow);
}

.about-media img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
}

.about-address {
 position: absolute;
 left: 1rem;
 bottom: 1rem;
 background: rgba(12, 61, 110, 0.92);
 color: var(--white);
 padding: 0.75rem 1rem;
 border-radius: var(--radius);
 font-size: 0.9rem;
 max-width: calc(100% - 2rem);
}

.about-text p {
 margin: 0 0 1rem;
 color: var(--gray-800);
}

.about-features {
 display: grid;
 gap: 0.75rem;
 margin-top: 1.25rem;
}

.about-features div {
 padding: 0.85rem 1rem;
 background: var(--gray-50);
 border-left: 4px solid var(--green);
 border-radius: 0 var(--radius) var(--radius) 0;
 font-weight: 600;
 font-size: 0.92rem;
}

/* Benefits */
.benefits-grid {
 display: grid;
 gap: 1rem;
 margin-top: 2rem;
}

@media (min-width: 600px) {
 .benefits-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 992px) {
 .benefits-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.benefit-card {
 background: var(--white);
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
 padding: 1.25rem;
 box-shadow: 0 2px 12px rgba(12, 61, 110, 0.05);
}

.benefit-card h3 {
 margin: 0 0 0.5rem;
 color: var(--blue);
 font-size: 1rem;
}

.benefit-card p {
 margin: 0;
 font-size: 0.9rem;
 color: var(--gray-600);
}

/* FAQ */
.faq-grid {
 display: grid;
 gap: 2rem;
 margin-top: 2rem;
}

@media (min-width: 900px) {
 .faq-grid {
 grid-template-columns: 1.1fr 0.9fr;
 align-items: start;
 }
}

.faq-list {
 display: grid;
 gap: 0.5rem;
}

.faq-item {
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--white);
}

.faq-item button {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 padding: 1rem 1.1rem;
 border: 0;
 background: var(--white);
 color: var(--blue);
 font-weight: 700;
 font-size: 0.92rem;
 text-align: left;
 cursor: pointer;
}

.faq-item.is-open button {
 background: var(--blue);
 color: var(--white);
}

.faq-item__icon {
 flex-shrink: 0;
 transition: transform 0.2s;
}

.faq-item.is-open .faq-item__icon {
 transform: rotate(180deg);
}

.faq-item__answer {
 display: none;
 padding: 0 1.1rem 1rem;
 color: var(--gray-800);
 font-size: 0.92rem;
 background: var(--gray-50);
}

.faq-item.is-open .faq-item__answer {
 display: block;
 padding-top: 1rem;
}

.faq-visual {
 border-radius: calc(var(--radius) + 4px);
 overflow: hidden;
 box-shadow: var(--shadow);
 background: var(--gray-100);
}

.faq-visual img {
 width: 100%;
 aspect-ratio: 4 / 5;
 object-fit: cover;
 object-position: center;
 background: var(--gray-100);
}

/* News */
.news-grid {
 display: grid;
 gap: 1.25rem;
 margin-top: 2rem;
}

@media (min-width: 600px) {
 .news-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 992px) {
 .news-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.news-card {
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--white);
 transition: box-shadow 0.2s, transform 0.2s;
}

.news-card:hover {
 box-shadow: var(--shadow);
 transform: translateY(-2px);
}

.news-card__img {
 aspect-ratio: 16 / 10;
 background: var(--gray-100);
 overflow: hidden;
}

.news-card__img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}

.news-card__body {
 padding: 1rem 1.1rem 1.25rem;
}

.news-card__date {
 font-size: 0.78rem;
 color: var(--gray-600);
}

.news-card h3 {
 margin: 0.4rem 0 0.5rem;
 font-size: 0.98rem;
 color: var(--blue);
 line-height: 1.35;
}

.news-card p {
 margin: 0;
 font-size: 0.85rem;
 color: var(--gray-600);
}

.section__head-row {
 display: flex;
 flex-wrap: wrap;
 align-items: end;
 justify-content: space-between;
 gap: 1rem;
}

.link-more {
 color: var(--blue);
 font-weight: 700;
 font-size: 0.9rem;
}

/* Documents */
.docs-grid {
 display: grid;
 gap: 1rem;
 margin-top: 2rem;
}

@media (min-width: 600px) {
 .docs-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

.doc-card {
 display: flex;
 gap: 1rem;
 align-items: center;
 padding: 1.25rem;
 background: var(--white);
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
}

.doc-card img {
 width: 56px;
 height: 56px;
 object-fit: contain;
}

.doc-card h3 {
 margin: 0 0 0.25rem;
 font-size: 0.95rem;
 color: var(--blue);
}

.doc-card p {
 margin: 0;
 font-size: 0.85rem;
 color: var(--gray-600);
}

.doc-card a {
 margin-left: auto;
 color: var(--green);
 font-weight: 700;
 font-size: 0.85rem;
 white-space: nowrap;
}

/* Contact */
.contact-grid {
 display: grid;
 gap: 2rem;
 margin-top: 2rem;
}

@media (min-width: 900px) {
 .contact-grid {
 grid-template-columns: 1fr 1fr;
 }
}

.contact-info {
 display: grid;
 gap: 1.25rem;
}

.contact-block h3 {
 margin: 0 0 0.35rem;
 color: var(--blue);
 font-size: 1rem;
}

.contact-block p,
.contact-block a {
 margin: 0;
 color: var(--gray-800);
}

.contact-block a:hover {
 color: var(--blue);
}

.contact-form {
 background: var(--white);
 border: 1px solid var(--gray-100);
 border-radius: calc(var(--radius) + 4px);
 padding: 1.5rem;
 box-shadow: var(--shadow);
}

.contact-form h3 {
 margin: 0 0 0.35rem;
 color: var(--blue);
}

.contact-form > p {
 margin: 0 0 1.25rem;
 color: var(--gray-600);
 font-size: 0.9rem;
}

.form-field {
 margin-bottom: 1rem;
}

.form-field label {
 display: block;
 margin-bottom: 0.35rem;
 font-weight: 600;
 font-size: 0.9rem;
}

.form-field input,
.form-field textarea {
 width: 100%;
 min-height: 44px;
 padding: 0.65rem 0.85rem;
 border: 1px solid var(--gray-100);
 border-radius: var(--radius);
 font: inherit;
 font-size: 16px;
}

.form-field textarea {
 min-height: 110px;
 resize: vertical;
}

.form-note {
 margin: 0.75rem 0 0;
 font-size: 0.78rem;
 color: var(--gray-600);
}

.form-message {
 margin-top: 0.75rem;
 font-size: 0.9rem;
}

/* Footer */
.site-footer {
 background: var(--blue-dark);
 color: rgba(255, 255, 255, 0.85);
 padding: 3rem 0 1.5rem;
}

.footer-grid {
 display: grid;
 gap: 2rem;
}

@media (min-width: 768px) {
 .footer-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 992px) {
 .footer-grid {
 grid-template-columns: 1.4fr 1fr 1fr 1fr;
 }
}

.footer-grid h4 {
 margin: 0 0 0.75rem;
 color: var(--white);
}

.footer-grid p,
.footer-grid li,
.footer-grid a {
 font-size: 0.88rem;
 color: rgba(255, 255, 255, 0.78);
}

.footer-grid ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.45rem;
}

.footer-grid a:hover {
 color: var(--white);
}

.footer-bottom {
 margin-top: 2rem;
 padding-top: 1.25rem;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 text-align: center;
 font-size: 0.82rem;
 color: rgba(255, 255, 255, 0.65);
}

/* Mobile CTA */
.mobile-cta {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 90;
 display: flex;
 gap: 0.5rem;
 padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
 background: rgba(255, 255, 255, 0.97);
 border-top: 1px solid var(--gray-100);
 box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.mobile-cta a {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 border-radius: var(--radius);
 font-weight: 700;
 font-size: 0.88rem;
}

.mobile-cta__call {
 background: var(--blue);
 color: var(--white) !important;
}

.mobile-cta__form {
 border: 1px solid var(--gray-100);
 color: var(--blue) !important;
}

@media (min-width: 768px) {
 .mobile-cta {
 display: none;
 }
}

body.has-mobile-cta {
 padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.back-top {
 position: fixed;
 right: 1rem;
 bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 z-index: 80;
 width: 44px;
 height: 44px;
 border: 0;
 border-radius: 50%;
 background: var(--white);
 color: var(--blue);
 box-shadow: var(--shadow);
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s, visibility 0.2s;
}

.back-top.is-visible {
 opacity: 1;
 visibility: visible;
}

body.has-mobile-cta .back-top {
 bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.appeal-block {
 margin-top: 2rem;
 display: grid;
 gap: 1.5rem;
 align-items: center;
 padding: 1.5rem;
 background: var(--gray-50);
 border-radius: calc(var(--radius) + 4px);
 border: 1px solid var(--gray-100);
}

@media (min-width: 768px) {
 .appeal-block {
 grid-template-columns: 120px 1fr auto;
 }
}

.appeal-block img {
 width: 100px;
 margin-inline: auto;
}

.appeal-block h3 {
 margin: 0 0 0.35rem;
 color: var(--blue);
}

.appeal-block p {
 margin: 0;
 color: var(--gray-600);
 font-size: 0.92rem;
}
