/* Shared interaction fixes; preserve each page's existing visual system. */
.referral-section { border-block: 1px solid var(--grey2); background: #181611; }
.referral-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.referral-intro { max-width: 62ch; color: #c7c1b8; margin: 20px 0; }
.referral-steps { padding-left: 24px; display: grid; gap: 12px; }
.referral-steps li { padding-left: 8px; }
.referral-steps li::marker { color: var(--orange2); font-weight: 800; }
.referral-example { font-size: 22px; font-weight: 800; line-height: 1.5; margin-bottom: 20px; }
.referral-note { font-size: 13px; color: #c7c1b8; margin-top: 16px; max-width: 45ch; }
.home-page .float-phone { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.quick-viber { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 15px; border: 1px solid #a595ed; border-radius: 24px; background: #30264c; color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; }
.quick-viber:hover { background: #46366e; }
@media (max-width: 768px) {
  .referral-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page .referral-section .title { font-size: clamp(27px, 8vw, 42px); overflow-wrap: normal; }
  .referral-action .btn { width: 100%; text-align: center; justify-content: center; }
}
html { scroll-padding-top: 110px; }
:focus-visible { outline: 3px solid #ff7733; outline-offset: 4px; }
.form-group { min-width: 0; }
.form-group input, .form-group select, .form-group textarea { min-width: 0; max-width: 100%; font-size: 16px; }
.form-status { margin-top: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.form-status:empty { margin-top: 0; }
.form-status[data-state="error"] { color: #ffb4a9; }
.form-status[data-state="success"] { color: #87e8ad; }
.form-input + .field-help, .field-help { font-size: 13px; margin: 8px 0 16px; }
.form-input[aria-invalid="true"], [name="contact"] [aria-invalid="true"] { border-color: #d72e24; outline: 2px solid #d72e24; outline-offset: 2px; }
.form-input::placeholder { color: #666662; }
body:not(.home-page) .form-status[data-state="error"] { color: #a32119; }
body:not(.home-page) .form-status[data-state="success"] { color: #166235; }
button:disabled { cursor: wait; opacity: .7; }
.home-page .grid-2 > *, .home-page .grid-3 > *, .home-page .grid-4 > *,
.home-page .contact-grid > *, .home-page .hero__inner > *, .home-page .calc-row > * { min-width: 0; }
.home-page .btn-primary { color: #0d0d0d; }
.home-page .burger { background: transparent; border: 1px solid var(--grey2); border-radius: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.home-page .lead-card { padding: 32px; border-radius: 20px; }
.home-page .hero__price-note { color: var(--white); font-weight: 700; margin: -12px 0 28px; }
.home-page .form-group input, .home-page .form-group select, .home-page .form-group textarea { border-color: #787878; }
.home-page .form-group input::placeholder, .home-page .form-group textarea::placeholder { color: #aaa; }
.home-page .form-group :focus-visible { outline: 3px solid var(--orange2); outline-offset: 3px; }
.home-page .hero__cta .btn { white-space: normal; text-align: center; justify-content: center; }
@media (max-width: 768px) {
  body:not(.home-page) .header__inner { gap: 10px; flex-wrap: wrap; }
  body:not(.home-page) .header__right { gap: 10px; margin-left: auto; }
  body:not(.home-page) .header__phone { display: none; }
  body:not(.home-page) .burger-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .home-page .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .home-page .synergy-box > div { width: 100%; }
  .home-page .synergy-badge { max-width: 100%; white-space: normal; }
  .home-page .synergy-title { overflow-wrap: anywhere; }
  .home-page .partner-block { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .home-page .partner-block > div { min-width: 0 !important; width: 100%; }
  .home-page .bot-badge { flex-wrap: wrap; }
  .home-page .bot-promo-cta > span { flex-wrap: wrap; overflow-wrap: anywhere; }
  .home-page .bot-badge-pill { max-width: 100%; white-space: normal; }
  .home-page .volume-scale { flex-wrap: wrap; gap: 8px 12px; }
  .home-page .journal-grid { grid-template-columns: minmax(0, 1fr); }
  .home-page .article-card { min-width: 0; overflow-wrap: anywhere; }
  .home-page .article-meta { flex-wrap: wrap; }
  .home-page .ai-estimate-card { grid-template-columns: minmax(0, 1fr) !important; padding: 24px 20px !important; gap: 24px !important; }
  .home-page .ai-estimate-card > * { min-width: 0; }
  .home-page .ai-estimate-card .btn { white-space: normal; text-align: center; justify-content: center; }
  .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .home-page .container { width: 100%; padding-inline: 20px; }
  .home-page .nav__inner { position: relative; flex-wrap: nowrap; gap: 10px; padding: 10px 16px; }
  .home-page .nav__logo { font-size: 25px; }
  .home-page .nav__cta { min-width: 0; margin-left: auto; gap: 0; flex-shrink: 1; }
  .home-page .nav__cta > .btn, .home-page .nav__phone { display: none; }
  .home-page .lang-switcher a { display: inline-flex; min-width: 40px; min-height: 44px; align-items: center; justify-content: center; padding: 8px; }
  .home-page .nav__links.open { display: flex; position: absolute; top: 100%; inset-inline: 0; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px; background: #141414; border-bottom: 1px solid #787878; }
  .home-page .nav__links a { display: block; min-height: 44px; padding: 10px 4px; color: var(--white); }
  .home-page .hero { min-height: auto; padding: 36px 0 40px; }
  .home-page .hero__inner { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page .hero__title { font-size: clamp(36px, 10vw, 64px); overflow-wrap: anywhere; }
  .home-page .hero__desc { font-size: 16px; margin-bottom: 24px; }
  .home-page .hero__cta { flex-direction: column; gap: 12px; margin-bottom: 28px; }
  .home-page .hero__cta .btn { width: 100%; min-height: 52px; }
  .home-page .hero__badge { max-width: 100%; white-space: normal; }
  .home-page .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .home-page .hero__card-header { flex-wrap: wrap; gap: 12px; }
  .home-page .hero__card-body, .home-page .hero__card-header { padding: 20px; }
  .home-page .price-row { gap: 12px; flex-wrap: wrap; }
  .home-page .price-row__name { min-width: 0; flex: 1 1 150px; }
  .home-page .price-row__val { white-space: normal; }
  .home-page .calc-mode-switcher { display: flex; flex-direction: column; width: 100%; }
  .home-page .calc-mode-btn { width: 100%; white-space: normal; }
  .home-page .synergy-box > *, .home-page .bot-promo-wrap > *, .home-page .step > * { min-width: 0; }
  .home-page .title { overflow-wrap: anywhere; }
  .home-page .calc-title { overflow-wrap: anywhere; }
  .home-page .bot-promo-wrap { overflow-wrap: anywhere; }
  .home-page .lead-card { padding: 24px 20px; }
  .home-page .contact-item-text { min-width: 0; overflow-wrap: anywhere; }
  .home-page .float-phone { bottom: 16px; right: 16px; }
  .home-page .float-phone__main { min-width: 48px; min-height: 48px; padding: 12px; }
  .home-page .float-phone__main span { display: inline; }
  .home-page .float-phone__main span:not(.float-phone__icon) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Fixed navigation and a restrained, locally drawn background inspired by Floating Paths. */
html:has(.home-page) { scroll-padding-top: calc(var(--site-header-height, 124px) + 16px); }
.home-page { padding-top: 0; }
.home-page .nav { position: sticky; top: 0; z-index: 1000; background: #111110; backdrop-filter: none; }
.home-page .nav__phone { display: inline-flex; width: 44px; height: 44px; min-width: 44px; align-items: center; justify-content: center; border: 1px solid #787878; border-radius: 10px; color: var(--white); }
.home-page .nav__phone::before { content: none; }
.home-page .nav__phone:hover { background: #30251c; border-color: var(--orange2); }
.home-page .nav__ai { display: inline-flex; gap: 8px; min-height: 44px; padding: 10px 14px; font-size: 13px; justify-content: center; white-space: nowrap; }
.home-page .nav__ai svg { flex-shrink: 0; transition: transform 180ms ease-out; }
.home-page .nav__ai:hover svg { transform: rotate(45deg); }
.home-page .hero__bg { background: #10100f; pointer-events: none; }
.home-page .hero__grid-lines { display: none; }
.route-background { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #a75228; stroke-width: 1; opacity: .38; animation: route-arrive 2.8s cubic-bezier(.16,1,.3,1) 1; }
@keyframes route-arrive { from { opacity: .12; transform: translateX(24px); } to { opacity: .38; transform: translateX(0); } }
@media (max-width: 768px) {
  .home-page .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding: 8px 16px; }
  .home-page .nav__logo { grid-column: 1; grid-row: 1; font-size: 23px; }
  .home-page .nav__cta { display: contents; }
  .home-page .lang-switcher { grid-column: 2; grid-row: 1; }
  .home-page .lang-switcher a { min-width: 36px; padding: 6px; }
  .home-page .burger { grid-column: 3; grid-row: 1; margin: 0; }
  .home-page .nav__cta > .nav__ai { display: inline-flex; grid-column: 1 / 3; grid-row: 2; width: 100%; }
  .home-page .nav__phone { grid-column: 3; grid-row: 2; }
  .home-page .nav__links.open { margin: 0; max-height: calc(100dvh - var(--site-header-height, 112px)); }
  .route-background { opacity: .28; animation: none; }
}

.home-page { --grey: #b3aca4; --green: #87e8ad; }
.home-page .reveal { opacity: 1; transform: none; }
.home-page .btn-primary { box-shadow: 0 5px 16px rgba(0,0,0,.25); }
.home-page input[type=range] { min-height: 44px; }
.home-page main > * { position: relative; z-index: 1; }
.home-page .range-wrap { position: relative; }
.home-page label:has(.range-val) { position: relative; display: block; padding-right: 76px; }
.home-page .lang-switcher a.active, .home-page .synergy-badge, .home-page .tab-btn.active,
.home-page .service-card__tag, .home-page .calc-mode-btn.active, .home-page .range-bubble,
.home-page .msg-tg { color: #111; }
.home-page .msg-vb { background: #5140a8; color: #fff; }

/* Mobile audit: comfortably tappable calculator controls. */
.home-page .q-btn,.home-page .calc-mode-btn,.dark-services button.btn{min-height:44px;min-width:44px}
.dark-services .faq-item.open .faq-body{max-height:none}

@media(max-width:600px){
 .home-page .section{padding-block:40px}
 .home-page .section--sm{padding-block:32px}
 .home-page .title{font-size:clamp(28px,8vw,40px);line-height:1.15}
 .home-page .subtitle{font-size:15px;line-height:1.65;margin-top:14px}
 .home-page .service-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px}
 .home-page .service-tabs .tab-btn{min-height:48px;font-size:13px;padding:10px 8px;line-height:1.4}
 .home-page #services .grid-3{gap:0}
 .home-page #services .service-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 12px;padding:20px 0;background:transparent;border:0;border-top:1px solid #51483e;border-radius:0}
 .home-page #services .service-card__tag{display:none}
 .home-page #services .service-card__icon{grid-column:1;grid-row:1;width:40px;height:40px;font-size:23px;margin:0}
 .home-page #services .service-card__title{grid-column:2;grid-row:1;align-self:center;font-size:19px;line-height:1.3;margin:0}
 .home-page #services .service-card__desc{grid-column:2;font-size:14px;line-height:1.65;margin:0}
 .home-page #services .service-card__price{grid-column:2;font-size:23px;margin:4px 0 0;line-height:1.5}
 .home-page #services .service-card__price small{font-size:12px}
 .home-page .trust-bar{padding-block:20px}
 .home-page .trust-bar__inner{gap:16px}
 .home-page .trust-icon{width:36px;height:36px;min-width:36px;font-size:21px}
 .home-page .trust-text strong{font-size:14px}
 .home-page .trust-text span{font-size:12px}
 .home-page .calc-wrap{padding:22px 16px}
 .home-page .volume-examples{margin:18px 0;padding:16px 0}
 .home-page .volume-examples button{margin:4px 4px 4px 0;padding:8px 10px;font-size:13px}
 .home-page .calc-result{align-items:stretch;gap:18px}
 .home-page .calc-result>.btn{width:100%;padding:14px 18px!important}
 .home-page #reading .reading-link p{display:none}
 .home-page #reading .reading-link{gap:10px;padding-block:20px}
 .home-page #reading .reading-link h3{font-size:20px}
}

/* Keep content readable throughout tab changes; remove decorative CTA glare. */
.home-page .tab-pane,.dark-services .tab-pane{animation:none;opacity:1}
.home-page .float-phone__main{animation:none;box-shadow:0 5px 16px rgba(0,0,0,.3);color:#111}
.home-page .telegram-cta,.home-page .telegram-cta:hover{box-shadow:0 5px 16px rgba(0,0,0,.3)}

.home-page .bot-badge-pill{color:#111}

.viber-mark{display:block;width:24px;height:24px;object-fit:contain;flex-shrink:0}
.home-page .msg-btn.msg-vb,.home-page .quick-viber{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:12px;border-radius:12px;flex:0 0 48px}
.home-page .messengers{align-items:center}
.home-page .telegram-title{font-family:Manrope,Arial,sans-serif;font-size:clamp(20px,4.5vw,36px);line-height:1.3;letter-spacing:-.025em;white-space:nowrap;text-transform:none;text-align:center;margin:0 0 16px}
.home-page .bot-promo-header{text-align:center}
.home-page .bot-badge{justify-content:center}
@media(max-width:600px){
 .home-page :is(#services,.seo-links,.visual-case,#areas,#how,#faq,#reading) :is(h2.title,h2.calc-title,p.subtitle){text-align:center;margin-inline:auto;text-wrap:balance}
 .home-page #partners :is(h2.title,.referral-intro){text-align:center;margin-inline:auto;text-wrap:balance}
 .home-page #calculator :is(.calc-title,.calc-sub,.volume-examples){text-align:center;text-wrap:balance}
 .home-page #contact .contact-grid>div>.title,.home-page #contact .contact-grid>div>p{text-align:center;text-wrap:balance}
 .home-page #ai-estimate .ai-demo>div:first-child>h2,.home-page #ai-estimate .ai-demo>div:first-child>p{text-align:center;text-wrap:balance}
 .home-page .bot-promo-wrap{padding:28px 16px}
 .home-page .bot-promo-header>p{text-wrap:pretty}
 .home-page .bot-promo-cta{flex-direction:column;text-align:center}
 .home-page .bot-promo-cta .btn-tg-large{justify-content:center;width:100%;padding-inline:16px;font-size:14px}
}
.home-page .bot-feature-card:hover,.home-page .msg-tg:hover,.home-page .msg-vb:hover{box-shadow:0 5px 16px rgba(0,0,0,.3)}

.home-page h2.title .heading-word{display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;hyphens:none;color:inherit}
.home-page #contact h2.title{font-size:clamp(24px,4vw,42px)}
.home-page .float-phone .quick-viber,.home-page .float-phone .float-phone__main{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;min-width:56px;min-height:56px;padding:13px;border-radius:50%;box-sizing:border-box}
.home-page .float-phone .float-phone__main>span{display:none}
.home-page .float-phone .viber-mark,.home-page .float-phone .float-phone__icon{display:block;width:28px;height:28px;flex:0 0 28px}
.home-page .bot-promo-header p a{color:var(--white);font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:768px){.home-page .float-phone{display:flex;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:10px}}

/* Wrap headings between words, never through Ukrainian or Russian words. */
@media(max-width:768px){
 .home-page h1.hero__title,.home-page h2.title,.home-page h2.calc-title,.home-page h3{overflow-wrap:normal;word-break:normal;hyphens:none}
 .home-page h2.title:not(.telegram-title){font-size:clamp(24px,6.2vw,34px)!important;line-height:1.25;text-wrap:balance}
 .home-page .visual-case h2.title{font-size:clamp(22px,5.5vw,30px)!important;max-width:none;text-align:center}
 .home-page .visual-case h2.title span{display:block}
 .home-page #faq h2.title span{display:block}
 .home-page h2.telegram-title{font-size:clamp(18px,4.7vw,28px);line-height:1.35;white-space:normal;overflow-wrap:normal;text-wrap:balance}
 .home-page #contact h2.title{font-size:clamp(24px,6vw,30px)!important;text-align:center}
 .home-page #contact h2.title span{display:block}
 .home-page .referral-calculator p:has(#ref-reward){display:flex;align-items:baseline;justify-content:center;gap:8px;white-space:nowrap;font-size:18px;margin:8px 0}
 .home-page .referral-calculator #ref-reward{font-size:22px;white-space:nowrap}
}
/* One consistent list of districts and nearby towns. */
.home-page #areas .subtitle { font-weight: 700; }
.home-page #areas .area-tag { max-width: 100%; color: var(--white); font-weight: 700; line-height: 1.5; }
/* FAQ answers grow with their copy and the visitor's font size. */
.home-page #faq .faq-item.open .faq-a { max-height: none; }
.home-page #faq .faq-a[hidden] { display: none; }
.home-page #faq .faq-a a { color: #ff9b62; text-underline-offset: 3px; }
/* Scenario links lead to the full service pages without adding another card grid. */
.home-page .service-scenario-directions h2 { font-size: clamp(26px,4vw,36px); line-height: 1.25; margin-bottom: 24px; }
.home-page .service-scenario-directions ul { list-style: none; padding: 0; }
.home-page .service-scenario-directions li { border-top: 1px solid var(--grey2); }
.home-page .service-scenario-directions a { display: block; padding: 16px 0; color: #ff9b62; font-weight: 700; line-height: 1.6; text-underline-offset: 4px; }
.home-page #repair-tools { border-top: 1px solid var(--grey2); }
.home-page .repair-tools-layout { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 32px; }
.home-page #repair-tools h2 { font-size: clamp(26px,3.5vw,38px); line-height: 1.25; font-weight: 800; max-width: 28ch; text-wrap: balance; margin-bottom: 16px; }
.home-page #repair-tools p { color: var(--grey); line-height: 1.75; max-width: 65ch; }
@media(max-width:768px) {
 .home-page .repair-tools-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .home-page #repair-tools .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}