/* ANT identity. Local font, shared palette and component treatments. */
@font-face {
  font-family: Onest;
  src: url('assets/fonts/Onest-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --ant-bg: #f7f7f2;
  --ant-surface: #fff;
  --ant-text: #171917;
  --ant-text-muted: #656b66;
  --ant-accent: #ff7900;
  --ant-accent-dark: #b94700;
  --ant-border: #e1e3dc;
  --ant-dark: #171917;
  --ant-font: 'Onest', sans-serif;
  --ant-radius: 12px;
  --color-primary: var(--ant-accent);
  --color-primary-hover: var(--ant-accent-dark);
  --color-primary-deep: #943900;
  --color-ink: var(--ant-text);
  --color-muted: var(--ant-text-muted);
  --color-white: var(--ant-surface);
  --color-hero: #eeefe8;
  --color-surface-soft: #f1f2eb;
  --color-surface-neutral: var(--ant-bg);
  --color-border: var(--ant-border);
  --color-border-soft: #eceee7;
  --color-footer: var(--ant-dark);
  --color-footer-text: #d0d4cd;
  --color-inverse-accent: #ffd4ad;
  --color-focus-ring: rgba(185,71,0,.18);
  --font-ui: var(--ant-font);
  --font-body: var(--ant-font);
  --ant-heading-font: 'RoadRadio', 'Onest', sans-serif;
  --font-heading: var(--ant-heading-font);
  --font-h1: 64px;
  --font-h2: 44px;
  --text-body: 18px;
  --text-card: 24px;
  --line-body: 1.6;
  --radius-card: var(--ant-radius);
  --radius-section: var(--ant-radius);
  --button-font: 16px;
  --button-line: 24px;
  --control-height: 48px;
}
body { font-family: var(--ant-font); font-size: 18px; line-height: 1.6; background: var(--ant-bg); background-image: none; }
h1, h2, h3 { color: var(--ant-text); font-family: var(--ant-heading-font); font-weight: 700; letter-spacing: -.035em; }
.hero h1 { font-size: 64px; line-height: 1.1; font-weight: 700; letter-spacing: -.045em; }
h2, .contact-copy h2 { font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -.035em; }
h3, .pricing-packages .price-card h3, .services-section .service-card h3, .process-cards h3, .advantage-card h3, .blog-card h3, .marketing-offer h3 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.hero-description, .service-card > p, .price-card > p:not(.price,.price-type,.package-timeline), .pricing-packages .price-card ul, .section-intro, .contact-copy > p:not(.eyebrow), .process-cards p, .advantage-card p, .blog-excerpt, .faq-cards .faq-list details > p, .marketing-offer-intro p, .custom-project p { font-size: 18px; line-height: 1.6; font-weight: 400; }
.eyebrow, .hero .eyebrow, .contact-copy .eyebrow { color: var(--ant-text-muted); font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: .04em; }
.header { background: rgba(247,247,242,.97); border-bottom-color: var(--ant-border); }
.navigation, .header .navigation > a, .nav-trigger { font-family: var(--ant-font); font-size: 16px; font-weight: 500; }
.topbar { background: var(--ant-dark); color: var(--ant-surface); }
.topbar .icon { color: var(--ant-accent); }
.hero-reference { background-color: #eeefe8; background-image: none; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); min-height: 0; }
.hero-reference .hero-content, .hero-reference h1, .hero-reference .hero-description { max-width: 580px; }
.hero-reference h1 .blue, .hero-reference h1 span { color: var(--ant-text); }
.hero-reference .hero-eyebrow .icon { color: var(--ant-accent-dark); }
.hero-reference .hero-photo { height: 600px; border-radius: var(--ant-radius); }
.section-band--neutral, .section-band--about { background: var(--ant-bg); background-image: none; }
.section-band--blue { background: #eeefe8; background-image: none; }
.price-card, .process-cards > li, .service-card--outlined, .advantage-card, .blog-card, .custom-project, .marketing-offer, .hosting-help-panel { border-radius: var(--ant-radius); border-color: var(--ant-border); background-color: var(--ant-surface); }
.pricing-packages .price-card { padding: 16px; }
.pricing-packages .price .price-amount { font-family: var(--ant-font); font-weight: 700; font-size: 52px; color: var(--ant-text); }
.pricing-packages .price .price-value { font-weight: 700; }
.pricing-packages .price .price-currency { font-weight: 600; }
.price-type, .service-meta, .blog-category { color: var(--ant-text-muted); font-weight: 500; }
.package-heading-icon, .service-card--outlined .service-icon, .process-card-icon, .brief-heading-icon { background: #fff0e3; color: var(--ant-accent); border-radius: 12px; }
.pricing-packages .price-card li > .icon, .package-timeline .icon, .marketing-offer-features .icon { color: var(--ant-accent); }
.step-number { color: var(--ant-accent-dark); font-weight: 700; }
.advantage-icon { background: var(--ant-accent); color: var(--ant-text); border-radius: 12px; }
/* All action buttons share geometry; only primary/secondary emphasis differs. */
:root { --control-height: 48px; --button-font: 16px; --button-line: 24px; --button-circle: 20px; --button-leading: 18px; --button-trailing: 18px; --button-gap: 10px; --outline-padding: 18px; --arrow-size: 20px; }
.button, .header .header-cta, .pricing-packages .price-card .button, .brief-card .button, .hero .hero-actions .button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; min-height: 48px; padding: 0 18px; gap: 10px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--ant-accent); color: var(--ant-surface);
  font-family: var(--ant-font); font-size: 16px; line-height: 24px; font-weight: 600;
}
.button:hover, .header .header-cta:hover, .pricing-packages .price-card .button:hover, .brief-card .button:hover, .hero .hero-actions .button:hover { background: #943900; color: var(--ant-surface); }
.button .button-circle, .header .header-cta .button-circle, .price-card .button-circle {
  width: 20px; height: 20px; min-width: 20px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit;
}
.button .button-circle .icon, .hero .hero-actions .button > .icon { width: 20px; height: 20px; color: inherit; }
.button .button-label { padding: 0; }
.button-outline, .price-card .button-outline, .hero .hero-actions .button.button-outline {
  background: transparent; border-color: var(--ant-border); color: var(--ant-text);
}
.button-outline:hover, .price-card .button-outline:hover, .hero .hero-actions .button.button-outline:hover { background: #eeefe8; border-color: var(--ant-text-muted); color: var(--ant-text); }
.button:disabled, .button[aria-disabled=true], .hero .hero-actions .button:disabled, .hero .hero-actions .button:disabled:hover {
  background: transparent; color: var(--ant-text-muted); border-color: var(--ant-border); opacity: .65; box-shadow: none; transform: none;
}
.pricing-packages .package-details-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; min-height: 48px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--ant-border); background: transparent;
  font-family: var(--ant-font); font-size: 16px; line-height: 24px; font-weight: 600;
}
.text-link, .service-action, .hosting-help summary, .footer-project-link { font-weight: 600; }
.text-link, .service-card .service-action, .hosting-help summary { color: var(--ant-accent-dark); }
.text-link .icon, .service-card--outlined .service-link-icon { color: var(--ant-accent-dark); }
.service-card--outlined > a:hover .service-link-icon { color: var(--ant-text); }
.pricing-packages .package-details-link { border-color: var(--ant-border); color: var(--ant-text-muted); }
.marketing-offer { background: #fff0e3; }
.marketing-offer-action > p { color: var(--ant-text); font-size: 24px; line-height: 1.2; font-weight: 700; }
.faq-cards { background: #eeefe8; background-image: none; }
.faq-cards .faq-list details { border: 1px solid var(--ant-border); border-radius: 12px; }
.faq-cards .faq-list summary { font-size: 18px; line-height: 1.5; font-weight: 500; }
.faq-cards .faq-list summary::after { color: var(--ant-accent-dark); }
.image-slot--faq { border-color: var(--ant-border); }
.contact-section { background: #eeefe8; background-image: none; color: var(--ant-text); }
.contact-copy .contact-detail, .contact-copy p, .contact-copy h2, .contact-copy .eyebrow { color: var(--ant-text); }
.image-slot--contact { background: rgba(255,255,255,.65); color: var(--ant-text-muted); border-color: var(--ant-border); }
.brief-card--enhanced { background: var(--ant-surface); border: 1px solid var(--ant-border); border-radius: 12px; }
.brief-card-heading h3 { font-size: 24px; line-height: 1.2; font-weight: 700; }
.brief-card-heading p, .brief-card .form-hint, .brief-privacy { color: var(--ant-text-muted); }
.form-field label, .field-label-row { color: var(--ant-text); font-weight: 500; }
.field-control input, .field-control select, .field-control textarea { font-family: var(--ant-font); color: var(--ant-text); background: var(--ant-bg); border-color: var(--ant-border); }
.field-control .field-icon, .select-chevron { color: var(--ant-text-muted); }
#brief-form .field-control input:focus, #brief-form .field-control select:focus, #brief-form .field-control textarea:focus { border-color: var(--ant-accent-dark); box-shadow: 0 0 0 4px var(--color-focus-ring); }
#brief-form .field-control [aria-invalid=true], #brief-form .field-control [aria-invalid=true]:focus { border-color: var(--color-error); box-shadow: 0 0 0 4px rgba(180,35,24,.12); }
.field-control:focus-within .field-icon, .field-control:focus-within .select-chevron { color: var(--ant-accent-dark); }
.blog-section { background: var(--ant-bg); background-image: none; }
.blog-card { border: 1px solid var(--ant-border); }
.blog-card-cover { background: #eeefe8; }
.blog-card .blog-category { color: var(--ant-accent-dark); }
.site-footer { background: var(--ant-dark); border-radius: 12px 12px 0 0; color: #d0d4cd; }
.site-footer h2 { color: var(--ant-surface); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.footer-nav a, .footer-contact-row, .footer-description { font-size: 15px; line-height: 1.6; }
.footer-brand-image { width: 160px; height: 80px; object-fit: contain; filter: brightness(0) invert(1); }
.footer-brand-caption { font-weight: 500; font-size: 11px; letter-spacing: .04em; }
.site-footer .footer-contact-row > .icon, .site-footer a:hover { color: var(--ant-accent); }
.site-footer :focus-visible { outline-color: var(--ant-accent); }
@media (max-width: 1100px) {
  .hero h1 { font-size: 52px; }
  .hero-reference { grid-template-columns: 1fr; }
  .hero-reference .hero-photo { height: 420px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 38px; line-height: 1.1; }
  h2, .contact-copy h2 { font-size: 30px; line-height: 1.15; }
  h3, .pricing-packages .price-card h3, .services-section .service-card h3, .process-cards h3, .advantage-card h3, .blog-card h3, .marketing-offer h3, .brief-card-heading h3 { font-size: 22px; line-height: 1.2; }
  .hero-description, .service-card > p, .price-card > p:not(.price,.price-type,.package-timeline), .pricing-packages .price-card ul, .section-intro, .contact-copy > p:not(.eyebrow), .process-cards p, .advantage-card p, .blog-excerpt, .faq-cards .faq-list details > p, .marketing-offer-intro p, .custom-project p { font-size: 16px; line-height: 1.6; }
  .pricing-packages .price-card { padding: 16px; }
  .hero-reference .hero-photo { height: 300px; }
  .hero-reference .hero-actions { grid-template-columns: 1fr; }
  .faq-cards .faq-list summary { font-size: 16px; }
  .marketing-offer-action > p { font-size: 22px; }
  .site-footer h2 { font-size: 16px; }
  .footer-brand-image { width: 144px; height: 72px; }
}
@media (max-width: 360px) {
  main > .hero-reference, main > .contact-section, main > .faq-cards { padding: 20px; }
  .hero h1 { font-size: 38px; overflow-wrap: anywhere; }
  .hero-reference .hero-photo { height: 260px; }
}


.site-footer .footer-legal-row { justify-content: center; text-align: center; }
.site-footer .footer-legal-row > p { margin-inline: auto; }

.icon-telegram { --icon-source: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+VGVsZWdyYW08L3RpdGxlPjxwYXRoIGQ9Ik0xMS45NDQgMEExMiAxMiAwIDAgMCAwIDEyYTEyIDEyIDAgMCAwIDEyIDEyIDEyIDEyIDAgMCAwIDEyLTEyQTEyIDEyIDAgMCAwIDEyIDBhMTIgMTIgMCAwIDAtLjA1NiAwem00Ljk2MiA3LjIyNGMuMS0uMDAyLjMyMS4wMjMuNDY1LjE0YS41MDYuNTA2IDAgMCAxIC4xNzEuMzI1Yy4wMTYuMDkzLjAzNi4zMDYuMDIuNDcyLS4xOCAxLjg5OC0uOTYyIDYuNTAyLTEuMzYgOC42MjctLjE2OC45LS40OTkgMS4yMDEtLjgyIDEuMjMtLjY5Ni4wNjUtMS4yMjUtLjQ2LTEuOS0uOTAyLTEuMDU2LS42OTMtMS42NTMtMS4xMjQtMi42NzgtMS44LTEuMTg1LS43OC0uNDE3LTEuMjEuMjU4LTEuOTEuMTc3LS4xODQgMy4yNDctMi45NzcgMy4zMDctMy4yMy4wMDctLjAzMi4wMTQtLjE1LS4wNTYtLjIxMnMtLjE3NC0uMDQxLS4yNDktLjAyNGMtLjEwNi4wMjQtMS43OTMgMS4xNC01LjA2MSAzLjM0NS0uNDguMzMtLjkxMy40OS0xLjMwMi40OC0uNDI4LS4wMDgtMS4yNTItLjI0MS0xLjg2NS0uNDQtLjc1Mi0uMjQ1LTEuMzQ5LS4zNzQtMS4yOTctLjc4OS4wMjctLjIxNi4zMjUtLjQzNy44OTMtLjY2MyAzLjQ5OC0xLjUyNCA1LjgzLTIuNTI5IDYuOTk4LTMuMDE0IDMuMzMyLTEuMzg2IDQuMDI1LTEuNjI3IDQuNDc2LTEuNjM1eiIvPjwvc3ZnPg=="); }

/* Alternating full-width white / warm-neutral section backgrounds. */
body { background-color: var(--ant-surface); }
.header { background-color: rgba(255,255,255,.97); }
.section-band--neutral, .section-band--muted, .section-band--blue, .section-band--contact { background-color: var(--ant-bg); background-image: none; }
.section-band--about, .advantages-section, .blog-section, .faq-cards { background-color: var(--ant-surface); background-image: none; }
.section-band--contact .contact-section { background-color: transparent; }
.section-band--muted .process-cards > li { background-color: var(--ant-surface); }
/* Transparent hero artwork stays fully visible at every breakpoint. */
.hero-reference .hero-photo { height: auto; min-height: 0; align-self: center; aspect-ratio: auto; overflow: visible; border-radius: 0; background: transparent; }
.hero-reference .hero-photo img { height: auto; width: 100%; object-fit: contain; object-position: center; }
@media (max-width: 1100px) { .hero-reference .hero-photo { width: min(100%, 520px); justify-self: center; } }
@media (max-width: 767px) { .hero-reference .hero-photo { width: min(100%, 380px); } }
/* Pricing header: panoramic cover, title left, price right, plain metadata row. */
.pricing-packages .package-price-hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.pricing-packages .package-cover { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; height: 160px; margin: 0 0 24px; padding: 8px 16px; border-radius: 12px; background: #fff0df; overflow: hidden; }
.pricing-packages .package-cover .package-heading-art { display: block; width: 100%; height: 100%; max-width: 280px; object-fit: contain; object-position: center; margin: 0; }
.pricing-packages .package-cover .package-heading-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0; border-radius: 16px; background: rgba(255,255,255,.7); }
.pricing-packages .package-cover .package-heading-icon .icon { width: 36px; height: 36px; }
.pricing-packages .package-price-hero > .price-type { grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 8px; color: var(--ant-text-muted); font-size: 12px; line-height: 18px; font-weight: 500; }
.pricing-packages .package-price-hero > h3 { grid-column: 1; grid-row: 3; align-self: start; min-height: 58px; margin: 0; font-size: clamp(20px, 6.4cqw, 24px); line-height: 1.2; font-weight: 700; }
.pricing-packages .package-price-hero > .price { grid-column: 2; grid-row: 2 / 4; grid-template-columns: max-content; justify-items: end; justify-content: end; align-content: center; min-height: 96px; margin: 0; column-gap: 0; row-gap: 4px; }
.pricing-packages .package-price-hero .price .price-amount { font-size: clamp(36px, 13cqw, 48px); line-height: 1; letter-spacing: -2px; }
.pricing-packages .package-price-hero .price .price-currency { font-size: .72em; }
.pricing-packages .package-price-hero .price-caption { grid-column: 1; grid-row: 2; color: var(--ant-text-muted); font-size: 13px; line-height: 20px; }
.pricing-packages .package-price-meta { grid-column: 1 / -1; grid-row: 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ant-border); }
.pricing-packages .package-price-meta > .price-uah { margin: 0; color: var(--ant-text-muted); font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; }
.pricing-packages .package-price-meta > .package-timeline { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ant-text-muted); font-size: 12px; line-height: 20px; }
.pricing-packages .package-price-meta .icon { width: 20px; height: 20px; color: var(--ant-accent); }
@media (max-width: 767px) {
  .pricing-packages .package-cover { margin: 0 0 24px; height: 150px; }
  .pricing-packages .package-price-hero { column-gap: 12px; }
  .pricing-packages .package-price-meta { flex-wrap: wrap; gap: 8px 12px; }
}
@media (max-width: 360px) {
  .pricing-packages .package-price-hero > .price-type { grid-column: 1 / -1; }
  .pricing-packages .package-price-hero > h3 { grid-column: 1 / -1; min-height: 0; margin-bottom: 12px; }
  .pricing-packages .package-price-hero > .price { grid-column: 1 / -1; grid-row: 4; justify-self: end; min-height: 0; }
  .pricing-packages .package-price-meta { grid-row: 5; }
}
/* Shared card inset and 24px rhythm between pricing content groups. */
.pricing-packages .price-card > p { margin: 0; }
.pricing-packages .price-card > ul { margin: 24px 0 0; padding: 24px 0; }

/* Compact package descriptions share a two-line minimum height. */
.pricing-packages .price-card > p:not(.price, .price-type, .package-timeline) { font-size: 16px; line-height: 1.5; color: var(--ant-text-muted); min-height: 48px; }

/* Custom development illustration. */
.custom-project { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; }
.custom-project-art { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1100px) {
  .custom-project { grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
  .custom-project-art { grid-row: 1 / 3; }
  .custom-project > .button { grid-column: 2; justify-self: start; }
}
@media (max-width: 767px) {
  .custom-project { grid-template-columns: minmax(0, 1fr); }
  .custom-project-art { grid-row: auto; max-width: 260px; justify-self: center; }
  .custom-project > .button { grid-column: 1; justify-self: stretch; }
}

/* Decorative ant perched on the budget card. */
.advantage-card--budget { position: relative; overflow: visible; }
.advantage-ant { position: absolute; width: 180px; height: auto; right: 16px; bottom: calc(100% - 16px); pointer-events: none; }
@media (max-width: 767px) { .advantage-card--budget { margin-top: 96px; } }

/* FAQ illustration replaces the image placeholder. */
.image-slot--faq { padding: 0; border: 0; background: transparent; }
.image-slot--faq img { width: 100%; height: 100%; object-fit: contain; }

/* Contact illustration replaces the image placeholder. */
.image-slot--contact { padding: 0; border: 0; background: transparent; }
.image-slot--contact img { width: 100%; height: 100%; object-fit: contain; }

/* Four-step project inquiry. */
#brief-form .wizard-step[hidden], #brief-form [hidden] { display: none !important; }
.wizard-progress { display: grid; gap: 10px; color: var(--ant-text-muted); font-size: 14px; margin-bottom: 24px; }
.wizard-progress progress { width: 100%; height: 6px; accent-color: var(--ant-accent); border: 0; border-radius: 8px; overflow: hidden; }
.wizard-progress progress::-webkit-progress-bar { background: var(--ant-border); }
.wizard-progress progress::-webkit-progress-value { background: var(--ant-accent); }
.wizard-step { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 20px; }
.wizard-step legend { float: left; width: 100%; margin-bottom: 20px; font-size: 22px; line-height: 1.3; font-weight: 700; }
.wizard-step legend:focus { outline: none; }
#brief-form .wizard-control input, #brief-form .wizard-control select, #brief-form .wizard-control textarea { padding: 12px 14px; width: 100%; }
.wizard-note { padding: 14px; background: #fff0df; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.wizard-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.wizard-buttons .button { flex: 1; width: auto; }
.wizard-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.wizard-consent input { margin-top: 4px; accent-color: var(--ant-accent); flex-shrink: 0; }
@media (max-width: 400px) { .wizard-buttons { flex-direction: column; } }

#brief-form .wizard-step .form-field { margin-bottom: 0; }
#brief-form .wizard-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
#brief-form .wizard-consent input { appearance: auto; width: 18px; height: 18px; min-height: 18px; min-width: 18px; padding: 0; margin: 2px 0 0; border-radius: 4px; }
#brief-form .wizard-control select { appearance: auto; padding-right: 14px; }
#brief-form #wizard-back { background: transparent; color: var(--ant-text); border: 1px solid var(--ant-border); }
#brief-form > .form-hint { font-size: 13px; line-height: 1.5; }

/* Contact channels use native radios styled as selectable buttons. */
#brief-form .contact-method-group { border: 0; padding: 0; margin: 0; min-width: 0; }
#brief-form .contact-method-group legend { float: none; font-size: 14px; line-height: 22px; font-weight: 500; margin: 0 0 10px; }
.contact-method-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#brief-form .contact-method-option { position: relative; cursor: pointer; margin: 0; }
#brief-form .contact-method-option input { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: 0; padding: 0; opacity: 0; }
.contact-method-option span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; border: 1px solid var(--ant-border); border-radius: 12px; color: var(--ant-text); font-size: 14px; font-weight: 600; }
.contact-method-option input:checked + span { border-color: var(--ant-accent); background: #fff0df; box-shadow: inset 0 0 0 1px var(--ant-accent); }
.contact-method-option input:focus-visible + span { outline: 2px solid var(--ant-accent-dark); outline-offset: 3px; }
.contact-method-option:hover span { border-color: var(--ant-accent); }

.contact-method-option > span { gap: 8px; }
.contact-method-option > span > .icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 480px) { .contact-method-option > span { flex-direction: column; gap: 6px; min-height: 68px; padding: 8px 4px; } }

/* Blog retained for future publication. */
#blog[hidden] { display: none; }

/* Named steps make the whole inquiry path visible. */
.wizard-progress-status { font-size: 13px; }
.wizard-step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.wizard-step-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 8px; border-top: 3px solid var(--ant-border); color: var(--ant-text-muted); min-width: 0; }
.wizard-step-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #eeefe8; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.wizard-step-label { font-size: 12px; line-height: 1.4; font-weight: 500; }
.wizard-step-list li[aria-current="step"] { border-color: var(--ant-accent); background: #fff0df; border-radius: 0 0 8px 8px; color: var(--ant-text); }
.wizard-step-list li[aria-current="step"] .wizard-step-number { background: var(--ant-accent); color: var(--ant-text); }
.wizard-step-list li[aria-current="step"] .wizard-step-label { font-weight: 700; }
.wizard-step-list li.is-complete { border-color: var(--ant-accent); color: var(--ant-text); }
.wizard-step-list li.is-complete .wizard-step-number { background: #fff0df; color: var(--ant-accent-dark); }
@media (max-width: 480px) { .wizard-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wizard-step-list li { flex-direction: row; align-items: center; } }

/* Fixed UAH package prices. */
.pricing-packages .package-price-hero .price .price-amount { display: inline-flex; align-items: baseline; gap: 6px; font-size: clamp(28px, 9cqw, 40px); letter-spacing: -1.5px; white-space: nowrap; }
.pricing-packages .package-price-hero .price .price-currency { font-size: 14px; letter-spacing: 0; }
.pricing-packages .package-price-meta { justify-content: flex-start; }

/* Space for package scope descriptions while keeping feature lists aligned. */
.pricing-packages .price-card > p:not(.price, .price-type, .package-timeline) { min-height: 96px; }
@media (max-width: 767px) { .pricing-packages .price-card > p:not(.price, .price-type, .package-timeline) { min-height: 0; } }

@font-face {
  font-family: Manrope;
  src: url('assets/fonts/Manrope-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: RoadRadio; src: url("assets/fonts/RoadRadio.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: RoadRadio; src: url("assets/fonts/RoadRadio-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Road Radio headings; Onest remains the interface and reading font. */
h1, h2, h3 { font-family: var(--ant-heading-font); font-synthesis: none; }

@media (min-width: 768px) and (max-width: 1200px) {
  .pricing-packages .package-price-hero > .price-type { grid-column: 1 / -1; }
  .pricing-packages .package-price-hero > h3 { grid-column: 1 / -1; }
  .pricing-packages .package-price-hero > .price { grid-column: 1 / -1; grid-row: 4; justify-self: end; min-height: 0; margin-top: 12px; }
  .pricing-packages .package-price-meta { grid-row: 5; }
}

/* Three deliberate hero lines with smaller supporting copy. */
.hero-reference .hero-content { container-type: inline-size; }
.hero-reference h1 { width: 100%; max-width: none; font-size: clamp(20px, 9cqw, 54px); }
.hero-reference h1 .hero-heading-line { display: block; white-space: nowrap; color: var(--ant-text); }
.hero-reference .hero-description { font-size: 16px; line-height: 1.6; }

/* Seamless client strip: fixed visual speed, independent of logo count. */
.clients-marquee { overflow: hidden; width: 100%; }
.clients-track { display: flex; width: max-content; }
#clients .client-logos { display: flex; flex: 0 0 auto; width: max-content; gap: 24px; padding: 0 24px 0 0; margin: 0; }
#clients .client-logo { flex: 0 0 180px; width: 180px; height: 104px; min-height: 104px; }
.clients-copy { display: none !important; }
.clients-motion .clients-copy { display: flex !important; }
#clients.clients-motion .clients-track { animation: clients-scroll var(--clients-duration, 90s) linear infinite !important; will-change: transform; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  #clients .client-logo { flex-basis: 144px; width: 144px; }
  #clients .client-logos { gap: 20px; padding-right: 20px; }
}

#clients:not(.clients-motion) .clients-marquee { overflow-x: auto; }

/* Service choices with visible scope and price. */
.project-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#brief-form .project-choice { position: relative; cursor: pointer; margin: 0; }
#brief-form .project-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; min-width: 0; padding: 0; margin: 0; }
.project-choice-face { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: 100%; min-height: 88px; padding: 16px; border: 1px solid var(--ant-border); border-radius: 12px; background: var(--ant-surface); }
.project-choice-title { font-family: var(--ant-font); color: var(--ant-text); font-size: 16px; font-weight: 600; line-height: 1.35; }
.project-choice-price { color: var(--ant-accent-dark); font-size: 16px; line-height: 1.3; font-weight: 700; white-space: nowrap; }
.project-choice-estimate { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: #eeefe8; color: var(--ant-text-muted); }
.project-choice--wide { grid-column: 1 / -1; }
.project-choice--wide .project-choice-face { min-height: 64px; }
.project-choice input:checked + .project-choice-face { border-color: var(--ant-accent); box-shadow: inset 0 0 0 1px var(--ant-accent); background: #fff6ed; }
.project-choice input:checked + .project-choice-face .project-choice-estimate { background: var(--ant-accent); color: var(--ant-text); }
.project-choice input:focus-visible + .project-choice-face { outline: 2px solid var(--ant-accent-dark); outline-offset: 3px; }
.project-choice:hover .project-choice-face { border-color: var(--ant-accent); }
@media (max-width: 480px) { .project-choices { grid-template-columns: 1fr; } .project-choice-face { min-height: 72px; } }

/* Consistent hierarchy for every project choice. */
.project-choice-face, .project-choice--wide .project-choice-face { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; gap: 12px; min-height: 104px; padding: 16px; }
.project-choice-title { display: block; min-height: 44px; font-size: 16px; line-height: 22px; }
.project-choice-price, .project-choice-estimate { display: block; padding: 0; border-radius: 0; background: transparent; color: var(--ant-accent-dark); font-size: 15px; line-height: 20px; font-weight: 700; }
.project-choice input:checked + .project-choice-face .project-choice-estimate { background: transparent; color: var(--ant-accent-dark); }
@media (max-width: 480px) {
  .project-choice-face, .project-choice--wide .project-choice-face { min-height: 104px; }
}

/* Compact service options retain the same title / price hierarchy. */
.project-choices { gap: 10px; }
.project-choice-face, .project-choice--wide .project-choice-face { min-height: 80px; padding: 12px 14px; gap: 6px; }
.project-choice-title { min-height: 36px; font-size: 15px; line-height: 18px; }
.project-choice-price, .project-choice-estimate { font-size: 14px; line-height: 18px; }
@media (max-width: 480px) {
  .project-choice-face, .project-choice--wide .project-choice-face { min-height: 72px; padding: 12px; }
  .project-choice-title { min-height: 0; }
}

/* Tighter service cards with a comfortable touch target. */
.project-choices { gap: 8px; }
.project-choice-face, .project-choice--wide .project-choice-face { min-height: 64px; padding: 10px 12px; gap: 4px; }
.project-choice-title { min-height: 0; font-size: 14px; line-height: 18px; }
.project-choice-price, .project-choice-estimate { font-size: 13px; line-height: 18px; }
@media (max-width: 480px) {
  .project-choice-face, .project-choice--wide .project-choice-face { min-height: 60px; padding: 10px 12px; }
}

/* Quick multi-select answers for project details. */
#brief-form .brief-chip-group { border: 0; margin: 0; padding: 0; min-width: 0; }
#brief-form .brief-chip-group legend { float: none; font-size: 14px; line-height: 22px; font-weight: 500; margin: 0 0 10px; }
.brief-chip-options { display: flex; flex-wrap: wrap; gap: 8px; }
#brief-form .brief-chip { position: relative; cursor: pointer; margin: 0; }
#brief-form .brief-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: 0; padding: 0; }
.brief-chip > span { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ant-border); border-radius: 10px; color: var(--ant-text); font-size: 14px; line-height: 20px; }
.brief-chip input:checked + span { background: #fff0df; border-color: var(--ant-accent); box-shadow: inset 0 0 0 1px var(--ant-accent); }
.brief-chip input:focus-visible + span { outline: 2px solid var(--ant-accent-dark); outline-offset: 3px; }

/* Four concise goals remain in one row. */
@media (max-width: 360px) { #contact .brief-card--enhanced { padding: 16px; } }

/* Clear action labels instead of abbreviated goal names. */
.goal-choice-hint { margin: 0 0 10px; color: var(--ant-text-muted); font-size: 13px; line-height: 1.4; }
#goals-group .brief-chip-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#goals-group .brief-chip > span { height: 100%; min-height: 64px; justify-content: flex-start; padding: 10px; font-size: 14px; line-height: 20px; white-space: normal; }
@media (max-width: 600px) { #goals-group .brief-chip-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { #goals-group .brief-chip-options { grid-template-columns: 1fr; } #goals-group .brief-chip > span { min-height: 44px; } }

.budget-time-group .brief-chip-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.budget-time-group .brief-chip > span { height: 100%; min-height: 44px; padding: 10px 12px; font-size: 14px; }
@media (max-width: 480px) { .budget-time-group .brief-chip-options { grid-template-columns: 1fr; } }

.icon-viber { --icon-source: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+VmliZXI8L3RpdGxlPjxwYXRoIGQ9Ik0xMS40IDBDOS40NzMuMDI4IDUuMzMzLjM0NCAzLjAyIDIuNDY3IDEuMzAyIDQuMTg3LjY5NiA2LjcuNjMzIDkuODE3LjU3IDEyLjkzMy40ODggMTguNzc2IDYuMTIgMjAuMzZoLjAwM2wtLjAwNCAyLjQxNnMtLjAzNy45NzcuNjEgMS4xNzdjLjc3Ny4yNDIgMS4yMzQtLjUgMS45OC0xLjMwMi40MDctLjQ0Ljk3Mi0xLjA4NCAxLjM5Ny0xLjU4IDMuODUuMzI2IDYuODEyLS40MTYgNy4xNS0uNTI1Ljc3Ni0uMjUyIDUuMTc2LS44MTYgNS44OTItNi42NTcuNzQtNi4wMi0uMzYtOS44My0yLjM0LTExLjU0Ni0uNTk2LS41NS0zLjAwNi0yLjMtOC4zNzUtMi4zMjMgMCAwLS4zOTUtLjAyNS0xLjAzNy0uMDE3em0uMDU4IDEuNjkzYy41NDUtLjAwNC44OC4wMTcuODguMDE3IDQuNTQyLjAyIDYuNzE3IDEuMzg4IDcuMjIyIDEuODQ2IDEuNjc1IDEuNDM1IDIuNTMgNC44NjggMS45MDYgOS44OTd2LjAwMmMtLjYwNCA0Ljg3OC00LjE3NCA1LjE4NC00LjgzMiA1LjM5NS0uMjguMDktMi44ODIuNzM3LTYuMTUzLjUyNCAwIDAtMi40MzYgMi45NC0zLjE5NyAzLjcwNC0uMTIuMTItLjI2LjE2Ny0uMzUyLjE0NC0uMTMtLjAzMy0uMTY2LS4xODgtLjE2NS0uNDE0bC4wMi00LjAxOGMtNC43NjItMS4zMi00LjQ4NS02LjI5Mi00LjQzLTguODk1LjA1NC0yLjYwNC41NDMtNC43MzggMS45OTYtNi4xNzMgMS45Ni0xLjc3MyA1LjQ3NC0yLjAxOCA3LjExLTIuMDN6bS4zOCAyLjYwMmMtLjE2NyAwLS4zMDMuMTM1LS4zMDQuMzAyIDAgLjE2Ny4xMzMuMzAzLjMuMzA1IDEuNjI0LjAxIDIuOTQ2LjUzNyA0LjAyOCAxLjU5MiAxLjA3MyAxLjA0NiAxLjYyIDIuNDY4IDEuNjMzIDQuMzM0LjAwMi4xNjcuMTQuMy4zMDcuMy4xNjYtLjAwMi4zLS4xMzguMy0uMzA0LS4wMTQtMS45ODQtLjYxOC0zLjU5Ni0xLjgxNi00Ljc2NC0xLjE5LTEuMTYtMi42OTItMS43NTMtNC40NDctMS43NjV6bS0zLjk2LjY5NWMtLjE5LS4wMzItLjQuMDA1LS42MTYuMTE3bC0uMDEuMDAyYy0uNDMuMjQ3LS44MTYuNTYyLTEuMTQ2LjkzMi0uMDAyLjAwNC0uMDA2LjAwNC0uMDA4LjAwOC0uMjY3LjMyMy0uNDIuNjM4LS40Ni45NDgtLjAwOC4wNDYtLjAxLjA5My0uMDA3LjE0IDAgLjEzNi4wMjIuMjcuMDY1LjRsLjAxMy4wMWMuMTM1LjQ4LjQ3MyAxLjI3NiAxLjIwNSAyLjYwNC40Mi43NjguOTAzIDEuNSAxLjQ0NiAyLjE4Ni4yNy4zNDQuNTYuNjczLjg3Ljk4NGwuMTMyLjEzMmMuMzEuMzA4LjY0LjYuOTg0Ljg3LjY4Ni41NDMgMS40MTggMS4wMjcgMi4xODYgMS40NDcgMS4zMjguNzMzIDIuMTI2IDEuMDcgMi42MDQgMS4yMDZsLjAxLjAxNGMuMTMuMDQyLjI2NS4wNjQuNDAyLjA2My4wNDYuMDAyLjA5MiAwIC4xMzgtLjAwOC4zMS0uMDM2LjYyNy0uMTkuOTQ4LS40Ni4wMDQgMCAuMDAzLS4wMDIuMDA4LS4wMDUuMzctLjMzLjY4My0uNzIuOTMtMS4xNDhsLjAwMy0uMDFjLjIyNS0uNDMyLjE1LS44NDItLjE4LTEuMTItLjAwNCAwLS42OTgtLjU4LTEuMDM3LS44My0uMzYtLjI1NS0uNzMtLjQ5Mi0xLjExMy0uNzEtLjUxLS4yODUtMS4wMzItLjEwNi0xLjI0OC4xNzRsLS40NDcuNTY0Yy0uMjMuMjgzLS42NTcuMjQ2LS42NTcuMjQ2LTMuMTItLjc5Ni0zLjk1NS0zLjk1NS0zLjk1NS0zLjk1NXMtLjAzNy0uNDI2LjI0OC0uNjU2bC41NjMtLjQ0OGMuMjc3LS4yMTUuNDU2LS43MzcuMTctMS4yNDgtLjIxNy0uMzgzLS40NTQtLjc1Ni0uNzEtMS4xMTUtLjI1LS4zNC0uODI2LTEuMDMzLS44My0xLjAzNS0uMTM3LS4xNjUtLjMxLS4yNjUtLjUwMi0uMjk3em00LjQ5Ljg4Yy0uMTU4LjAwMi0uMjkuMTI0LS4zLjI4Mi0uMDEuMTY3LjExNS4zMTIuMjgyLjMyNCAxLjE2LjA4NSAyLjAxNy40NjYgMi42NDUgMS4xNS42My42ODguOTMgMS41MjQuOTA2IDIuNTctLjAwMi4xNjguMTMuMzA2LjMuMzEuMTY2LjAwMy4zMDUtLjEzLjMxLS4yOTcuMDI1LTEuMTc1LS4zMzQtMi4xOTMtMS4wNjctMi45OTQtLjc0LS44MS0xLjc3Ny0xLjI1My0zLjA1LTEuMzQ2aC0uMDI0em0uNDYzIDEuNjNjLS4xNi4wMDItLjI5LjEyNy0uMy4yODctLjAwOC4xNjcuMTIuMzEuMjg4LjMyLjUyMy4wMjguODc1LjE3NSAxLjExMy40MjIuMjQuMjQ1LjM4OC42Mi40MTYgMS4xNjQuMDEuMTY3LjE1LjI5NS4zMTguMjg3LjE2Ny0uMDA4LjI5NS0uMTUuMjg3LS4zMTctLjAzLS42NDQtLjIxNS0xLjE3OC0uNTgtMS41NTctLjM2Ny0uMzc4LS44OTMtLjU3NC0xLjUyLS42MDdoLS4wMTh6Ii8+PC9zdmc+"); }
.contact-method-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 360px) { .contact-method-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#goals-group .brief-chip-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#goals-group .brief-chip > span { min-height: 48px; }
@media (max-width: 360px) { #goals-group .brief-chip-options { grid-template-columns: 1fr; } }

#materials-group .brief-chip-options { display: flex; width: 100%; gap: 8px; }
#materials-group .brief-chip { flex: 1 1 auto; }
#materials-group .brief-chip > span { justify-content: center; }
@media (max-width: 600px) { #materials-group .brief-chip { flex: 1 1 calc(50% - 8px); } }

/* International contacts and readable contact methods on small screens. */
#brief-form #phone-format-hint { font-size: 13px; line-height: 1.5; margin-top: 8px; color: var(--ant-text-muted); }
@media (max-width: 600px) { .contact-method-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One continuous hamburger-to-cross animation. */
.header .mobile-toggle { position: relative; color: var(--ant-text); transition: background-color .25s ease, border-color .25s ease; }
.header .mobile-toggle .menu-toggle-line { position: absolute; top: 50%; left: 50%; display: block; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px; background: currentColor; transform-origin: center; transition: transform .32s cubic-bezier(.22,.8,.25,1), opacity .2s ease; }
.header .mobile-toggle .menu-toggle-line:nth-child(1) { transform: translateY(-6px); }
.header .mobile-toggle .menu-toggle-line:nth-child(2) { transform: scaleX(1); }
.header .mobile-toggle .menu-toggle-line:nth-child(3) { transform: translateY(6px); }
.header .mobile-toggle[aria-expanded="true"] { background: #fff0df; border-color: var(--ant-accent); }
.header .mobile-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) { transform: rotate(45deg); }
.header .mobile-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) { transform: scaleX(0); opacity: 0; }
.header .mobile-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) { transform: rotate(-45deg); }
.header .mobile-toggle:focus-visible { outline: 2px solid var(--ant-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .header .mobile-toggle, .header .mobile-toggle .menu-toggle-line { transition: none; } }

/* Compact landing-page footer and direct section navigation. */
.site-footer .footer-columns { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 64px; padding-bottom: 48px; }
.site-footer .footer-brand-column { grid-column: auto; max-width: 360px; }
.site-footer .footer-columns h2 { min-height: 0; margin-bottom: 20px; font-size: 16px; }
.site-footer .footer-contacts { display: block; grid-column: auto; border: 0; padding: 0; }
.site-footer .footer-contact-row { margin-bottom: 20px; }
.site-footer .footer-description { margin-top: 14px; }
@media (max-width: 800px) {
 .site-footer .footer-columns { grid-template-columns: 1fr 1fr; gap: 32px; }
 .site-footer .footer-brand-column { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 480px) {
 .site-footer .footer-columns { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
 .site-footer .footer-brand-column { grid-column: auto; }
 .site-footer .footer-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
 .site-footer .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
 .site-footer .footer-contact-row { min-height: 44px; }
 .site-footer .footer-legal-row { padding-block: 22px; }
}

/* A single page gutter for the header, content sections and footer. */
:root { --page-gutter: 40px; }
.header-container, .footer-container, main .page-shell, main .container {
 width: min(var(--container), calc(100% - 2 * var(--page-gutter)));
 margin-inline: auto;
}
main #pricing > .container { width: 100%; }
main #faq, main #contact { padding-inline: 0; }
@media (max-width: 1100px) { :root { --page-gutter: 28px; } }
@media (max-width: 767px) { :root { --page-gutter: 20px; } }