
:root{
  --bg:#f7f1ec;
  --bg-soft:#fbf7f3;
  --panel:#fffaf6;
  --text:#352f45;
  --muted:#6f667c;
  --line:#eadfd3;
  --gold:#c99a59;
  --gold-dark:#b58445;
  --shadow:0 14px 38px rgba(90,63,34,.08);
  --radius:22px;
  --container:min(1180px, calc(100vw - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(180deg, #f9f4ef 0%, #f6efea 100%);
  line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:var(--container); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(14px);
  background:rgba(249,244,239,.92);
  border-bottom:1px solid rgba(225,212,199,.8);
}
.header-top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 0 8px;
}
.brand img{width:260px; height:auto}
.header-contact{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;
  font-size:.96rem;
}
.header-contact a{
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  padding:11px 16px;
  border-radius:999px;
  box-shadow:var(--shadow);
}
.lang-switch{font-weight:700}
.nav{
  display:flex; gap:22px; flex-wrap:wrap;
  padding:0 0 14px;
  font-size:.98rem;
}
.nav a{color:var(--muted)}
.nav a:hover,.footer-links a:hover,.all-city-links a:hover{color:var(--gold-dark)}
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:center;
  padding:42px 0 24px;
}
.hero-copy h1,.section-head h1,.section-head h2,.legal h1{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  color:#30284b;
}
.hero-copy h1{font-size:clamp(2.7rem,6vw,4.5rem); margin:.1rem 0 1rem}
.hero-copy p{font-size:1.15rem; max-width:60ch; color:#4e465b}
.eyebrow{
  display:inline-block;
  color:var(--gold-dark);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.14em;
  margin-bottom:.8rem;
}
.badge-row,.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.soft-badge{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  font-weight:600;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 24px;
  border-radius:14px; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,#d9ad71,#bf8b47);
  color:#fff; box-shadow:0 10px 25px rgba(191,139,71,.28);
}
.btn-secondary{
  background:#fff; color:var(--text); border:1px solid var(--line);
}
.trust-line{margin-top:14px; color:var(--muted); font-size:.98rem}
.hero-visual{
  position:relative;
  min-height:420px;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual img{
  width:100%; max-width:580px; object-fit:cover;
  border-radius:28px;
  box-shadow:var(--shadow);
}
.floating-card{
  position:absolute; right:18px; top:18px;
  width:min(270px, 50%);
  background:rgba(255,250,246,.94);
  border:1px solid rgba(234,223,211,.92);
  border-radius:20px; padding:18px;
  box-shadow:var(--shadow);
}
.floating-card strong{display:block; margin-bottom:6px}
.city-reasons{padding-left:18px; color:var(--muted)}
.section{padding:52px 0}
.section.narrow{max-width:860px}
.section-head{margin-bottom:24px}
.section-head h1,.section-head h2,.legal h1{font-size:clamp(2.1rem,4vw,3.1rem); margin:.1rem 0 .8rem}
.section-head p{max-width:70ch; color:#5a5266}
.section-head.compact h2{font-size:2.2rem}
.usp-grid,.service-grid,.city-grid,.faq-list,.pricing-stack{
  display:grid; gap:18px;
}
.usp-grid{grid-template-columns:repeat(5,1fr); margin:18px auto 10px}
.service-grid{grid-template-columns:repeat(4,1fr)}
.city-grid{grid-template-columns:repeat(4,1fr)}
.pricing-stack{grid-template-columns:repeat(2,1fr)}
.faq-list{grid-template-columns:1fr 1fr}
.card{
  background:rgba(255,250,246,.9);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.usp-card,.service-card,.city-card,.price-card{padding:24px}
.usp-card h2,.service-card h3,.price-card h2,.city-card strong,.compatibility-card h2,.contact-card h2,.about-copy h2,.legal-card h2{
  font-family:Georgia,'Times New Roman',serif;
  color:#362c4b;
  margin:0 0 8px;
}
.city-card{display:flex; flex-direction:column; gap:10px}
.city-card span{color:var(--muted); font-size:.95rem}
.all-cities summary{
  cursor:pointer; margin-top:16px; font-weight:700; color:var(--gold-dark);
}
.all-city-links{
  display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:18px;
}
.all-city-links a{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font-size:.95rem;
}
.split-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.compatibility-card,.contact-card,.legal-card{padding:28px}
.compatibility-controls{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:18px 0;
}
.compatibility-controls select,.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  font:inherit;
  color:var(--text);
}
.compatibility-result{
  min-height:165px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,246,241,.96));
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  margin-bottom:14px;
}
.compatibility-result .symbol{font-size:2.4rem; line-height:1}
.compatibility-result h3{font-family:Georgia,'Times New Roman',serif; margin:8px 0 4px; font-size:1.6rem}
.compatibility-after{color:var(--muted)}
.contact-lines{
  display:flex; flex-direction:column; gap:6px; margin-bottom:16px; color:#544b61;
}
.contact-form{display:grid; gap:12px}
.flash{
  border-radius:14px; padding:14px 16px; margin-bottom:12px; font-weight:600
}
.flash-success{background:#eef8ee; color:#1d6b31; border:1px solid #c9e4cd}
.flash-error{background:#fff1ef; color:#8f2b20; border:1px solid #edc6bf}
.about-section{
  display:grid; grid-template-columns:.86fr 1.14fr; gap:28px; align-items:center;
}
.about-visual img{
  width:100%; max-width:520px; aspect-ratio:4/5; object-fit:cover;
  border-radius:28px; box-shadow:var(--shadow)
}
.price-summary{padding:24px; margin-top:18px}
.faq-item{padding:20px}
.faq-item summary{cursor:pointer; font-weight:700; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.legal{padding:58px 0 74px}
.legal-card p:last-child{margin-bottom:0}
.site-footer{
  margin-top:36px;
  background:rgba(255,248,242,.92);
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px;
  padding:26px 0;
}
.footer-grid img{width:220px; height:auto}
.footer-grid h3{font-size:1rem; margin:0 0 8px; color:#433953}
.footer-links{display:flex; flex-direction:column; gap:8px}
.compact-links{flex-direction:row; flex-wrap:wrap; gap:8px 12px}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:14px 0 24px; color:var(--muted); font-size:.94rem;
}
small{font-size:.55em; color:var(--muted)}
@media (max-width: 1080px){
  .usp-grid{grid-template-columns:repeat(3,1fr)}
  .service-grid,.city-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 860px){
  .header-top,.nav,.hero,.split-section,.about-section,.footer-grid,.pricing-stack{grid-template-columns:1fr; display:grid}
  .header-contact{justify-content:flex-start}
  .nav{gap:12px}
  .hero{padding-top:24px}
  .hero-copy h1{font-size:clamp(2.5rem,10vw,4rem)}
  .hero-visual{order:-1; min-height:auto}
  .usp-grid,.service-grid,.city-grid,.faq-list{grid-template-columns:1fr 1fr}
  .floating-card{position:static; width:100%; margin-top:14px}
}
@media (max-width: 560px){
  .container{width:min(100vw - 26px, 100%)}
  .brand img{width:240px}
  .usp-grid,.service-grid,.city-grid,.faq-list,.compatibility-controls{grid-template-columns:1fr}
  .header-contact a{padding:9px 12px}
  .btn{width:100%}
  .hero-copy p{font-size:1.03rem}
}
