/* =========================================================
   OBRANI — design tokens & typography (from main prototype)
   ========================================================= */
:root {
	--color-bg: #0c0b09;
	--color-bg-soft: #17140f;
	--color-text: #f3efe6;
	--color-text-muted: #b8b1a6;
	--color-accent: #c9a063;
	--color-accent-soft: rgba(201, 160, 99, 0.45);
	--color-border: rgba(243, 239, 230, 0.16);
	--color-overlay: rgba(6, 5, 4, 0.55);

	--font-display: "Oswald", "Arial Narrow", sans-serif;
	--font-ui: "Manrope", "Segoe UI", Arial, sans-serif;

	--tracking-label: 0.16em;
	--tracking-caps: 0.06em;
	--radius: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-ui);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .heading-style {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.08;
	font-weight: 600;
	margin: 0;
}
/* height:auto is required now that images carry width/height attributes:
   CSS overrides the width, the attribute height stays, and the image is
   stretched (an explicit height also disables aspect-ratio). Blocks that
   need a fixed height set it themselves with higher specificity. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.eyebrow, .section-label {
	display: inline-block;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-accent);
	margin: 0 0 18px;
}
.gold, .accent { color: var(--color-accent); }
.section { padding: 120px 0; position: relative; }
.section-header { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section-title {
	font-size: clamp(32px, 4vw, 52px);
	text-transform: uppercase;
}
.rule { width: 54px; height: 2px; background: var(--color-accent); margin: 20px auto 0; }

/* buttons */
.btn {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em;
	font-size: 13px; font-weight: 500;
	padding: 17px 30px; border: 1px solid var(--color-accent);
	background: transparent; color: var(--color-text); cursor: pointer;
	border-radius: var(--radius); transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.btn:hover { background: var(--color-accent); color: #171207; transform: translateY(-1px); }
.btn--solid { background: var(--color-accent); color: #171207; }
.btn--block { width: 100%; justify-content: center; }
.btn .arw { transition: transform 0.35s ease; }
.btn:hover .arw { transform: translateX(4px); }

input[type="text"], input[type="tel"], input[type="email"], textarea {
	width: 100%; background: #0e0c0a; border: 1px solid var(--color-border);
	color: var(--color-text); padding: 16px 18px; font-family: var(--font-ui); font-size: 15px;
	border-radius: var(--radius); transition: border-color 0.3s;
}
textarea { resize: vertical; min-height: 88px; }
input::placeholder, textarea::placeholder { color: #7d7566; }
input:focus, textarea:focus { outline: none; border-color: var(--color-accent); }
.field { margin-bottom: 14px; }
.lead-card form, .contact-form form { margin-bottom: 20px; }

/* ---------- Header ---------- */
.site-header {
	position: relative; z-index: 5;
}
/* On the front page the header floats transparently over the hero image,
   exactly like the main prototype. On inner pages (no hero image behind it)
   it falls back to a solid bar so text stays readable. */
.is-home .site-header {
	position: absolute; top: 0; left: 0; right: 0; background: transparent;
}
body:not(.is-home) .site-header {
	background: var(--color-bg-soft);
	border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.brand { display: flex; align-items: center; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: 0.16em; }
.brand__logo { max-height: 48px; width: auto; }
.header-phone { font-family: var(--font-display); letter-spacing: 0.1em; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.header-phone svg { width: 16px; height: 16px; color: var(--color-accent); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; z-index: 0; }
.hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(6,5,4,0.87) 22%, rgba(6,5,4,0.57) 50%, rgba(6,5,4,0.3) 80%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-grid { display: block; }
.hero-copy { max-width: 620px; }
.hero-cta { margin-top: 36px; }
.hero-title {
	font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
	line-height: 1.08; font-size: clamp(38px, 6vw, 76px); font-weight: 700; margin: 0;
}
.hero-sub { margin: 30px 0 26px; max-width: 440px; color: var(--color-text); font-size: 17px; }
.hero-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.hero-list li { display: flex; align-items: center; gap: 14px; color: var(--color-text); font-size: 16px; }
.hero-list li::before { content: ""; width: 20px; height: 1px; background: var(--color-accent); flex: none; }
.hero-price { margin-top: 36px; display: flex; align-items: baseline; gap: 14px; }
/* "від" and "грн" share one typographic treatment so they read as a pair
   framing the price; only the colour differs. Same approach as .price-tag. */
.hero-price .lbl, .hero-price .cur {
	font-family: var(--font-display); text-transform: uppercase;
	letter-spacing: 0.2em; font-size: 13px; font-weight: 500;
}
.hero-price .lbl { color: var(--color-text-muted); }
.hero-price .cur { color: var(--color-text); }
.hero-price .val { font-family: var(--font-display); font-weight: 700; font-size: 42px; color: var(--color-accent); }

/* ---------- lead card (hero form + reused for bottom contact form) ---------- */
.lead-card, .contact-form {
	background: linear-gradient(180deg, rgb(95 85 69 / 47%), rgba(17, 14, 11, .98));
	border-radius: var(--radius);
	padding: 38px 36px 34px;
	box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
	position: relative;
}
.lead-card::before, .contact-form::before {
	content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.lead-card .card-title, .contact-form .card-title {
	font-family: var(--font-display); text-transform: uppercase;
	font-size: 26px; font-weight: 600; margin: 0;
}
.lead-card .card-title, .contact-form .card-title,
.card-sub, .cf-sub { text-align: center; }
.card-sub, .cf-sub { color: var(--color-text-muted); font-size: 14px; margin: 8px 0 26px; }

/* ---- form states: sending / error / success ---- */
form.is-sending .btn { opacity: .65; pointer-events: none; }
form.is-done { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }

.form-error {
	margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius);
	background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35);
	color: #f7b4b4; font-size: 13px; text-align: center;
}

.form-success {
	text-align: center; padding: 8px 0 4px;
	opacity: 0; transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease;
}
.form-success.is-visible { opacity: 1; transform: none; }
.form-success__icon { width: 62px; height: 62px; margin: 0 auto 16px; display: block; }
.form-success__circle,
.form-success__check {
	stroke: var(--color-accent); stroke-width: 2.5;
	stroke-linecap: round; stroke-linejoin: round;
}
.form-success__circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.form-success__check  { stroke-dasharray: 44;  stroke-dashoffset: 44;  }
.form-success.is-visible .form-success__circle { animation: obraniDraw .55s ease forwards .1s; }
.form-success.is-visible .form-success__check  { animation: obraniDraw .35s ease forwards .5s; }
@keyframes obraniDraw { to { stroke-dashoffset: 0; } }

.form-success__title {
	font-family: var(--font-display); text-transform: uppercase;
	font-size: 22px; font-weight: 600; margin: 0 0 8px;
}
.form-success__text { color: var(--color-text-muted); font-size: 14px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	form.is-done { transition: none; }
	.form-success { transition: none; opacity: 1; transform: none; }
	.form-success.is-visible .form-success__circle,
	.form-success.is-visible .form-success__check { animation: none; stroke-dashoffset: 0; }
}
.consent { font-size: 11px; color: #7d7566; margin-top: 14px; line-height: 1.5; }
.consent a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.card-divider {
	display: flex; align-items: center; gap: 16px; margin: 26px 0 18px;
	color: #7d7566; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-display);
}
.card-divider::before, .card-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.messengers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.msgr {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	padding: 14px 4px; border: 1px solid var(--color-border); border-radius: var(--radius);
	color: var(--color-text-muted); font-size: 12px; font-family: var(--font-display); letter-spacing: .06em;
	white-space: nowrap; min-width: 0;
	transition: border-color .3s, color .3s, transform .3s;
}
.msgr span { font-size: clamp(9px, 2.8vw, 12px); }
.msgr svg { width: 22px; height: 22px; flex-shrink: 0; }
.msgr:hover { border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
.msgr:hover svg { color: var(--color-accent); }
.card-phone { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; font-family: var(--font-display); font-size: 18px; letter-spacing: .08em; }
.card-phone svg { width: 16px; height: 16px; color: var(--color-accent); }
.form-note { font-size: 13px; color: var(--color-accent); margin-top: 14px; text-align: center; }

/* ---------- Philosophy ---------- */
.philosophy { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; }
.philosophy__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 0; }
.philosophy::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: radial-gradient(circle, rgba(12,11,9,0) 0%, rgba(12,11,9,0.7) 62%);
}
.philosophy-content { position: relative; z-index: 2; max-width: 760px; text-align: center; padding: 100px 40px; }
.philosophy-content .section-title { margin-top: 8px; text-wrap: balance; }
.philosophy-content .section-title .accent { color: var(--color-accent); display: block; }
.philosophy-content .section-text { margin: 28px auto 0; max-width: 640px; color: var(--color-text-muted); font-size: 18px; line-height: 1.8; }

/* ---------- Process: full-bleed photo + top vignette (main prototype),
   card proportions and number placement from the secondary prototype ---------- */
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proc-card {
	position: relative; overflow: hidden; border-radius: var(--radius);
	padding: 34px 32px 30px; min-height: 260px;
	display: flex; flex-direction: column; transition: transform .35s;
}
.proc-card:hover { transform: translateY(-4px); }
.proc-bg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.proc-card::after {
	content: ""; position: absolute; z-index: 1;
	width: 120%; height: 120%; top: -10%; left: -10%;
	background: radial-gradient(circle, rgba(12,11,9,0) 0%, rgba(12,11,9,1) 62%);
}
.proc-content { position: relative; z-index: 2; }
/* Steps that are off screen stay dimmed; .is-lit (added by ScrollTrigger)
   fades the gradient up to full strength as the step scrolls into view. */
.proc-num { filter: brightness(0.55); transition: filter .9s ease; }
.proc-num.is-lit { filter: brightness(1); }
.proc-num {
	position: relative; z-index: 2; margin-top: auto; align-self: flex-end;
	font-family: var(--font-display); font-weight: 600; font-size: 63px;
	letter-spacing: .1em; line-height: 1;
	background: linear-gradient(to top, transparent 0%, var(--color-accent) 80%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
/* Titles are paragraphs now, so they must outrank the generic `.proc-card p`
   rule below — otherwise they inherit its 14px body size. */
.proc-card .proc-title { font-size: 22px; line-height: 1.15; margin: 0 0 14px; max-width: none; color: var(--color-text); }
.proc-card p { color: #fff; font-size: 14px; max-width: 78%; margin: 0; }

/* ---------- Portfolio / works slider ---------- */
.works-swiper-wrap { position: relative; }
/* Slide widths that match the Swiper breakpoints below. Without them the
   slides are full-width until Swiper initialises, and the browser picks
   srcset candidates for that (much too large) width. */
.works-swiper .swiper-slide { width: 85%; }
@media (min-width: 640px) { .works-swiper .swiper-slide { width: 45%; } }
@media (min-width: 992px) { .works-swiper .swiper-slide { width: 31%; } }
.works-swiper { padding-bottom: 46px; }
@media (max-width: 640px) {
	.works-swiper-wrap::after {
		content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 46px; width: 60px;
		background: linear-gradient(to right, transparent, var(--color-bg));
		pointer-events: none;
	}
}
.works-swiper .swiper-slide {
	aspect-ratio: 3/4; border: 1px solid var(--color-border); border-radius: var(--radius);
	overflow: hidden; position: relative; background: var(--color-bg-soft);
}
.works-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.works-swiper .swiper-slide span {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
	background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
	font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.swiper-pagination-bullet { background: var(--color-text-muted); opacity: .6; }
.swiper-pagination-bullet-active { background: var(--color-accent); opacity: 1; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.price-card {
	position: relative; background: var(--color-bg); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: 44px 40px 40px; transition: border-color .4s, transform .4s;
}
.price-card::before {
	content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.price-card:hover { border-color: var(--color-accent-soft); transform: translateY(-4px); }
.price-card--feat { border-color: var(--color-accent-soft); }
.price-badge {
	position: absolute; top: -1px; right: 32px; transform: translateY(-50%);
	background: var(--color-accent); color: #171207; font-family: var(--font-display); font-size: 11px;
	letter-spacing: .18em; text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius); font-weight: 600;
}
.price-head-img{
	position: relative;
}
.price-head-img:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(12, 11, 9, 0) 0%, rgba(12, 11, 9, 0.99) 100%);
}
.price-head { margin-bottom: 22px; }
.price-head--split { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.price-head-img { display: flex; justify-content: flex-end; }
.price-head-img img { width: 100%; max-width: 135px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.price-kind { font-size: 12px; letter-spacing: .26em; color: var(--color-text-muted); text-transform: uppercase; font-family: var(--font-display); margin: 0 0 12px; }
.price-card .price-name { font-size: 28px; line-height: 1.1; margin: 0; color: var(--color-text); }
.price-tag { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.price-tag .from, .price-tag .cur { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); }
.price-tag .num { font-family: var(--font-display); font-weight: 700; font-size: 44px; color: var(--color-accent); line-height: 1; }
.price-note { font-size: 13px; color: var(--color-text-muted); margin-bottom: 28px; }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0 0 34px; padding: 0; }
.price-feats li { display: flex; align-items: flex-start; gap: 12px; color: var(--color-text-muted); font-size: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.price-feats li:last-child { border-bottom: none; padding-bottom: 0; }
.price-feats svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; margin-top: 2px; }

/* ---------- FAQ (from secondary prototype) ---------- */
.faq-wrap { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-q {
	width: 100%; background: none; border: none; cursor: pointer; text-align: left;
	display: flex; align-items: center; gap: 24px; padding: 28px 8px; color: var(--color-text);
	font-family: var(--font-display); font-size: clamp(16px, 2vw, 20px); font-weight: 500;
	text-transform: uppercase; letter-spacing: .02em; transition: color .3s;
}
.faq-q:hover { color: var(--color-accent); }
.faq-idx { font-family: var(--font-display); color: var(--color-accent-soft); font-size: 15px; font-weight: 600; min-width: 28px; }
.faq-q .txt { flex: 1; }
.faq-icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--color-accent); transition: transform .35s ease, opacity .35s; }
.faq-icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-item.open .faq-q { color: var(--color-accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a-inner { padding: 0 8px 30px 52px; color: var(--color-text-muted); font-size: 15.5px; max-width: 660px; }

/* ---------- Bottom contact section (proportions/styles from secondary prototype) ---------- */
.contact { position: relative; overflow: hidden; border-top: 1px solid var(--color-border); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.contact-copy .contact-title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; margin: 0; max-width: none; color: var(--color-text); }
.contact-copy p { color: var(--color-text-muted); margin: 22px 0 34px; max-width: 420px; }
.contact-info { list-style: none; display: flex; flex-direction: column; gap: 20px; margin: 0 0 34px; padding: 0; }
.contact-info li { display: flex; align-items: center; gap: 16px; }
.contact-mobile-only { display: none; }
.info-ic { width: 42px; height: 42px; border: 1px solid var(--color-accent-soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex: none; }
.info-ic svg { width: 18px; height: 18px; color: var(--color-accent); }
.info-t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); font-family: var(--font-display); }
.info-v { font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-msgr { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.cf-msgr a { width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: border-color .3s, transform .3s; }
.cf-msgr a svg { width: 20px; height: 20px; color: var(--color-text-muted); transition: color .3s; }
.cf-msgr a:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.cf-msgr a:hover svg { color: var(--color-accent); }

/* ---------- SEO text ---------- */
.seo-text { padding: 90px 0; border-top: 1px solid var(--color-border); }
.seo-text__title { font-size: clamp(24px, 3vw, 34px); margin: 0 0 28px; }

/* Collapsed by default: a fixed height plus a fade so it is obvious the text
   continues. Opening animates max-height to the measured content height. */
.seo-text__wrap { position: relative; }
.seo-text__body {
	color: var(--color-text-muted); font-size: 15.5px; line-height: 1.85;
	max-height: 280px; overflow: hidden;
	transition: max-height .5s cubic-bezier(.22,1,.36,1);
}
.seo-text__wrap::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
	background: linear-gradient(to bottom, transparent, var(--color-bg));
	pointer-events: none; opacity: 1; transition: opacity .4s ease;
}
.seo-text__wrap.is-open::after { opacity: 0; }
.seo-text__wrap.is-static::after { display: none; }

.seo-text__toggle {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
	background: none; border: none; cursor: pointer; padding: 0;
	font-family: var(--font-display); text-transform: uppercase;
	letter-spacing: .16em; font-size: 12px; color: var(--color-accent);
	transition: color .3s;
}
.seo-text__toggle:hover { color: var(--color-text); }
.seo-text__toggle svg { transition: transform .4s ease; }
.seo-text__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.seo-text__toggle .seo-text__toggle-less,
.seo-text__toggle[aria-expanded="true"] .seo-text__toggle-more { display: none; }
.seo-text__toggle[aria-expanded="true"] .seo-text__toggle-less { display: inline; }
.seo-text__body h3 {
	font-size: 20px; color: var(--color-text); margin: 32px 0 12px;
}
.seo-text__body p { margin: 0 0 16px; }
.seo-text__body ul, .seo-text__body ol { margin: 0 0 16px; padding-left: 20px; }
.seo-text__body li { margin-bottom: 8px; }
.seo-text__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.seo-text__body strong { color: var(--color-text); }
@media (max-width: 640px) {
	.seo-text { padding: 60px 0; }
}

/* ---------- Footer ---------- */
.site-footer { padding-top: 24px; border-top: 1px solid var(--color-border); }
.footer-bottom {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: 16px; padding: 24px 0;
}
.footer-links { display: flex; align-items: center; gap: 20px; }
.site-footer a { color: var(--color-text-muted); font-size: 13px; transition: color .3s; }
.site-footer a:hover { color: var(--color-accent); }
.fcopy { color: var(--color-text-muted); font-size: 13px; }
.app-develop { display: flex; align-items: center; gap: 5px; }
.app-develop img { max-width: 18px; height: auto; }

/* ---------- Privacy policy page ---------- */
.policy-content { max-width: 840px; margin: 0 auto; padding: 160px 0 100px; color: var(--color-text-muted); line-height: 1.9; }
.policy-content h1 { color: var(--color-text); margin-bottom: 30px; }
.policy-content h2 { font-size: 24px; margin: 40px 0 16px; color: var(--color-text); }
.policy-content p { margin: 0 0 16px; }

/* ---------- 404 page ---------- */
.error-404 { min-height: 100vh; display: flex; align-items: center; }
.error-404__inner { text-align: center; max-width: 640px; padding: 160px 0 100px; }
.error-404__num {
	display: block; font-family: var(--font-display); font-weight: 700;
	font-size: clamp(90px, 18vw, 180px); line-height: 1;
	background: linear-gradient(to top, transparent 0%, var(--color-accent) 80%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	margin-bottom: 8px;
}
.error-404__title { font-size: clamp(26px, 4vw, 38px); margin-bottom: 18px; }
.error-404__text { color: var(--color-text-muted); font-size: 16px; line-height: 1.8; margin: 0 0 36px; }
.error-404 .btn { margin: 0 auto; }
.error-404__phone { margin-top: 28px; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.wrap { padding: 0 24px; }
	.section { padding: 80px 0; }
	.price-grid, .proc-grid, .contact-grid, .cf-row { grid-template-columns: 1fr; }
	.proc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.header-inner { height: 76px; gap: 12px; }
	.header-phone { font-size: 13px; gap: 6px; white-space: nowrap; }
	.brand__name { font-size: 18px; }
	.hero { align-items: flex-start; padding-top: 85px; }
	.hero-cta { width: 100%; justify-content: center; }
	.proc-grid { grid-template-columns: 1fr; }
	.lead-card, .contact-form { padding: 30px 24px 44px; }
	.section-header { margin-bottom: 44px; }
	.contact-desktop-only { display: none; }
	.contact-mobile-only { display: flex; width: 100%; justify-content: center; }
	.footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
}
.brand__logo {
    max-height: 35px;

}
/* While GSAP is driving opacity/transform frame by frame, any CSS transition
   on those same properties re-animates toward each new value and produces a
   laggy, dragging reveal. Disabled for the duration of the tween only, then
   removed so hover effects keep working. */
.obrani-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.is-revealing { transition: none !important; }

/* GSAP drives `transform` on the pulsing CTA; the .btn transform transition
   would re-animate every frame and make it stutter. */
.is-pulsing { transition: none !important; }

/* Mobile: step numbers start as solid gold and fade into the gradient once
   they scroll into view (see assets/js/animations.js). Without JS they simply
   stay gold, which is still legible. */
@media (max-width: 640px) {
	.proc-num { -webkit-text-fill-color: var(--color-accent); }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Lead modal ---------- */
.modal {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center; padding: 24px;
	visibility: hidden; opacity: 0;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.modal.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.modal__overlay { position: absolute; inset: 0; background: rgba(6,5,4,.82); backdrop-filter: blur(3px); }
.modal__panel {
	position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
	transform: scale(.94) translateY(12px); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__panel { transform: scale(1) translateY(0); }
.modal__close {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius);
	color: var(--color-text-muted); cursor: pointer; transition: color .3s, border-color .3s;
}
.modal__close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.modal__card { margin: 0; }
body.modal-open { overflow: hidden; }