
/* SEO landing pages: isolated styles, no changes to existing main/business layouts. */
body[data-page="seo"],body[data-page="seo-city"]{background:#f3f5f7;color:#0b1721}
.seo-hero{position:relative;overflow:hidden;background:#07111c;color:#fff;padding:68px 0 58px;border-bottom:1px solid rgba(255,255,255,.08)}
.seo-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,20,.97),rgba(4,12,20,.84) 55%,rgba(4,12,20,.45)),url('assets/hero-wide.jpg') center/cover no-repeat;opacity:.74}
.seo-hero>.container{position:relative;z-index:1}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:20px;color:#aeb9c2;font-size:.77rem}
.breadcrumbs a{color:#d8e0e6}.breadcrumbs a:hover{color:var(--yellow)}
.seo-hero h1{max-width:920px;margin:0 0 18px;font-size:clamp(2.35rem,5vw,4.45rem);line-height:.98;letter-spacing:-.055em}
.seo-hero h1 span{color:var(--yellow)}
.seo-hero p{max-width:760px;margin:0;color:#dbe4ea;font-size:1.06rem;line-height:1.65}
.seo-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.seo-hero-actions .button.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:none}
.seo-section{padding:58px 0}.seo-section.alt{background:#fff}.seo-section.dark{background:#07111c;color:#fff}
.seo-heading{max-width:790px;margin-bottom:26px}.seo-heading h2{margin:6px 0 10px;font-size:clamp(1.8rem,3vw,2.65rem);letter-spacing:-.035em}.seo-heading p{margin:0;color:#61707c;line-height:1.65}.seo-section.dark .seo-heading p{color:#acb8c2}
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-card{padding:22px;border:1px solid #dfe5e9;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(9,24,36,.05)}
.seo-card b{display:block;margin-bottom:8px;color:#0b1721;font-size:1.04rem}.seo-card p{margin:0;color:#61707c;line-height:1.58;font-size:.92rem}.seo-card .num{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:15px;border-radius:10px;background:#07111c;color:var(--yellow);font-weight:950}
.seo-section.dark .seo-card{background:#0d1d2a;border-color:#203342}.seo-section.dark .seo-card b{color:#fff}.seo-section.dark .seo-card p{color:#b4c0c9}
.seo-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px;align-items:start}
.seo-copy{padding:26px;border-radius:20px;background:#fff;border:1px solid #e0e6ea}.seo-copy h2,.seo-copy h3{letter-spacing:-.025em}.seo-copy h2{margin-top:0}.seo-copy p,.seo-copy li{color:#53636f;line-height:1.7}.seo-copy ul{padding-left:20px}
.seo-form-wrap{position:sticky;top:96px}.seo-form-wrap .lead-form{background:#07111c;color:#fff;box-shadow:0 18px 50px rgba(7,17,28,.14)}.seo-form-wrap .lead-form p{color:#b8c4cd}.seo-form-wrap .lead-form label{color:#fff}.seo-form-wrap .lead-form input,.seo-form-wrap .lead-form select{background:#fff;color:#111}
.seo-faq{display:grid;gap:10px}.seo-faq details{border:1px solid #dfe6ea;border-radius:14px;background:#fff;padding:0 18px}.seo-faq summary{cursor:pointer;padding:17px 0;font-weight:850;color:#142330}.seo-faq p{margin:0;padding:0 0 18px;color:#5b6a75;line-height:1.65}
.city-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.city-link{display:flex;align-items:center;min-height:54px;padding:13px 14px;border:1px solid #dfe6ea;border-radius:13px;background:#fff;font-weight:800;transition:transform .2s,border-color .2s,box-shadow .2s}.city-link:hover{transform:translateY(-2px);border-color:rgba(255,212,0,.7);box-shadow:0 10px 24px rgba(8,20,30,.08)}
.topic-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.topic-links a{padding:10px 13px;border-radius:999px;background:#f0f3f5;color:#1c2d39;font-size:.84rem;font-weight:800}.topic-links a:hover{background:#07111c;color:var(--yellow)}
.location-note{margin-top:18px;padding:14px 16px;border-left:3px solid var(--yellow);border-radius:0 10px 10px 0;background:rgba(255,212,0,.08);color:#33434f;font-size:.9rem;line-height:1.55}
.seo-callout{padding:20px;border-radius:16px;background:#fff7cf;border:1px solid #f4dfa0;color:#41380c;line-height:1.6}
.seo-mini-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.seo-mini-meta span{padding:8px 10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(7,17,28,.58);color:#d9e1e7;font-size:.76rem;font-weight:800}
@media(max-width:900px){.seo-grid{grid-template-columns:1fr 1fr}.city-grid{grid-template-columns:1fr 1fr}.seo-layout{grid-template-columns:1fr}.seo-form-wrap{position:static}}
@media(max-width:700px){body[data-page="seo"] .mobile-quick-actions,body[data-page="seo-city"] .mobile-quick-actions{display:flex;align-items:center;margin-left:auto}body[data-page="seo"] .mobile-business-pill,body[data-page="seo-city"] .mobile-business-pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border-radius:999px;background:var(--yellow);color:#111;font-weight:900;font-size:.78rem;white-space:nowrap}body[data-page="seo"] .main-nav .nav-business,body[data-page="seo-city"] .main-nav .nav-business{display:none!important}.seo-hero{padding:44px 0 40px}.seo-hero h1{font-size:2.55rem}.seo-section{padding:44px 0}.seo-grid{grid-template-columns:1fr}.city-grid{grid-template-columns:1fr 1fr;gap:8px}.city-link{min-height:50px;padding:11px 12px;font-size:.88rem}.seo-copy{padding:20px}.seo-form-wrap .lead-form{padding:18px}.seo-hero p{font-size:.96rem}}
@media(max-width:420px){.city-grid{grid-template-columns:1fr}.seo-hero h1{font-size:2.25rem}.seo-hero-actions{display:grid}.seo-hero-actions .button{width:100%}}

.city-network{background:#f7f9fa}.city-grid-related{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.city-grid-related{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.city-grid-related{grid-template-columns:1fr}}


/* v7 — internal hero uses the same integrated full-background feel as the main page */
body[data-page="seo"] .seo-hero,
body[data-page="seo-city"] .seo-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#07111c;
  min-height:520px;
  padding:72px 0 68px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body[data-page="seo"] .seo-hero::before,
body[data-page="seo-city"] .seo-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background:
    linear-gradient(90deg, rgba(4,12,20,.90) 0%, rgba(4,12,20,.72) 30%, rgba(4,12,20,.40) 52%, rgba(4,12,20,.12) 72%, transparent 100%),
    linear-gradient(0deg, rgba(7,17,28,.42), transparent 28%),
    url("assets/hero-panorama.webp") 62% center / cover no-repeat;
}
body[data-page="seo"] .seo-hero::after,
body[data-page="seo-city"] .seo-hero::after{
  display:none !important;
}
body[data-page="seo"] .seo-hero > .container,
body[data-page="seo-city"] .seo-hero > .container{
  position:relative;
  z-index:1;
}
body[data-page="seo"] .seo-hero .breadcrumbs,
body[data-page="seo-city"] .seo-hero .breadcrumbs,
body[data-page="seo"] .seo-hero h1,
body[data-page="seo-city"] .seo-hero h1,
body[data-page="seo"] .seo-hero p,
body[data-page="seo-city"] .seo-hero p,
body[data-page="seo"] .seo-hero .seo-hero-actions,
body[data-page="seo-city"] .seo-hero .seo-hero-actions,
body[data-page="seo-city"] .seo-hero .seo-mini-meta{
  position:relative;
  z-index:2;
}
body[data-page="seo"] .seo-hero h1,
body[data-page="seo-city"] .seo-hero h1{
  max-width:56%;
}
body[data-page="seo"] .seo-hero p,
body[data-page="seo-city"] .seo-hero p{
  max-width:52%;
}
body[data-page="seo"] .seo-hero .seo-hero-actions,
body[data-page="seo-city"] .seo-hero .seo-hero-actions,
body[data-page="seo-city"] .seo-hero .seo-mini-meta{
  max-width:56%;
}

@media (max-width: 1200px){
  body[data-page="seo"] .seo-hero h1,
  body[data-page="seo-city"] .seo-hero h1{max-width:60%}
  body[data-page="seo"] .seo-hero p,
  body[data-page="seo-city"] .seo-hero p{max-width:56%}
  body[data-page="seo"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-mini-meta{max-width:60%}
}

@media (max-width: 900px){
  body[data-page="seo"] .seo-hero,
  body[data-page="seo-city"] .seo-hero{
    min-height:470px;
    padding:60px 0 54px;
  }
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    background:
      linear-gradient(90deg, rgba(4,12,20,.94) 0%, rgba(4,12,20,.80) 38%, rgba(4,12,20,.52) 58%, rgba(4,12,20,.18) 80%, transparent 100%),
      linear-gradient(0deg, rgba(7,17,28,.42), transparent 28%),
      url("assets/hero-panorama.webp") 66% center / cover no-repeat;
  }
  body[data-page="seo"] .seo-hero h1,
  body[data-page="seo-city"] .seo-hero h1{max-width:66%}
  body[data-page="seo"] .seo-hero p,
  body[data-page="seo-city"] .seo-hero p{max-width:62%}
  body[data-page="seo"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-mini-meta{max-width:66%}
}

@media (max-width: 700px){
  body[data-page="seo"] .seo-hero,
  body[data-page="seo-city"] .seo-hero{
    min-height:430px;
    padding:36px 0 38px;
  }
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    background:
      linear-gradient(90deg, rgba(4,12,20,.96) 0%, rgba(4,12,20,.86) 46%, rgba(4,12,20,.60) 66%, rgba(4,12,20,.24) 88%, transparent 100%),
      linear-gradient(0deg, rgba(7,17,28,.34), transparent 24%),
      url("assets/hero.jpg") 74% center / cover no-repeat;
  }
  body[data-page="seo"] .seo-hero h1,
  body[data-page="seo-city"] .seo-hero h1{max-width:84%}
  body[data-page="seo"] .seo-hero p,
  body[data-page="seo-city"] .seo-hero p{max-width:80%}
  body[data-page="seo"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-mini-meta{max-width:84%}
}

@media (max-width: 420px){
  body[data-page="seo"] .seo-hero,
  body[data-page="seo-city"] .seo-hero{
    min-height:400px;
    padding:32px 0 34px;
  }
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    background:
      linear-gradient(90deg, rgba(4,12,20,.97) 0%, rgba(4,12,20,.88) 50%, rgba(4,12,20,.66) 72%, rgba(4,12,20,.28) 92%, transparent 100%),
      linear-gradient(0deg, rgba(7,17,28,.34), transparent 24%),
      url("assets/hero.jpg") 76% center / cover no-repeat;
  }
  body[data-page="seo"] .seo-hero h1,
  body[data-page="seo-city"] .seo-hero h1{max-width:88%}
  body[data-page="seo"] .seo-hero p,
  body[data-page="seo-city"] .seo-hero p{max-width:84%}
  body[data-page="seo"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-mini-meta{max-width:88%}
}


/* v8 mobile SEO/internal hero: lower the girl and match the main-page mobile feeling */
@media (max-width:700px){
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    background:
      linear-gradient(90deg, rgba(4,12,20,.96) 0%, rgba(4,12,20,.86) 46%, rgba(4,12,20,.60) 66%, rgba(4,12,20,.24) 88%, transparent 100%),
      linear-gradient(0deg, rgba(7,17,28,.34), transparent 24%),
      url("assets/hero-mobile-shifted.webp") 76% bottom / cover no-repeat;
  }
}
@media (max-width:420px){
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    background:
      linear-gradient(90deg, rgba(4,12,20,.97) 0%, rgba(4,12,20,.88) 50%, rgba(4,12,20,.66) 72%, rgba(4,12,20,.28) 92%, transparent 100%),
      linear-gradient(0deg, rgba(7,17,28,.34), transparent 24%),
      url("assets/hero-mobile-shifted.webp") 77% bottom / cover no-repeat;
  }
}


/* v9 — on mobile internal pages, place the girl lower as a dedicated image block like on the main page */
@media (max-width:700px){
  body[data-page="seo"] .seo-hero,
  body[data-page="seo-city"] .seo-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:34px 0 0;
    background:#07111c;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body[data-page="seo"] .seo-hero::before,
  body[data-page="seo-city"] .seo-hero::before{
    display:none !important;
    content:none !important;
  }
  body[data-page="seo"] .seo-hero > .container,
  body[data-page="seo-city"] .seo-hero > .container{
    position:relative;
    z-index:1;
    padding-bottom:24px;
  }
  body[data-page="seo"] .seo-hero h1,
  body[data-page="seo-city"] .seo-hero h1,
  body[data-page="seo"] .seo-hero p,
  body[data-page="seo-city"] .seo-hero p,
  body[data-page="seo"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-hero-actions,
  body[data-page="seo-city"] .seo-hero .seo-mini-meta{
    max-width:100%;
  }
  body[data-page="seo"] .seo-hero::after,
  body[data-page="seo-city"] .seo-hero::after{
    content:"";
    display:block !important;
    width:100%;
    height:520px;
    background:
      linear-gradient(180deg,#07111c 0%, rgba(7,17,28,.82) 13%, rgba(7,17,28,.28) 26%, transparent 38%),
      url("assets/hero-mobile-clean.webp") 52% top / cover no-repeat;
  }
}
@media (max-width:420px){
  body[data-page="seo"] .seo-hero::after,
  body[data-page="seo-city"] .seo-hero::after{
    height:500px;
    background:
      linear-gradient(180deg,#07111c 0%, rgba(7,17,28,.84) 14%, rgba(7,17,28,.30) 28%, transparent 40%),
      url("assets/hero-mobile-clean.webp") 53% top / cover no-repeat;
  }
}


/* About page brand title colors — match the header logo */
.about-brand-title{
  display:inline;
}
.about-brand-title .about-brand-avto{
  color:#fff !important;
}
.about-brand-title .about-brand-pts{
  color:var(--yellow) !important;
}
