:root{
  --primary:#1F2A44;
  --primary-dark:#162035;
  --accent:#C9A24D;

  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --text:#111827;
  --muted:#6B7280;

  --radius:18px;
  --radius-sm:14px;
  --shadow:0 16px 40px rgba(22,32,53,.18);
  --shadow-soft:0 10px 24px rgba(22,32,53,.10);
}

/* Merriweather as main font */
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Merriweather", ui-serif, Georgia, "Times New Roman", Times, serif;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Topbar */
.topbar{
  background: linear-gradient(#f4f4f5, #e9eaec);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
  font-size:.92rem;
  color: rgba(17,24,39,.75);
}
.topbar-left, .topbar-right{ display:flex; gap:12px; align-items:center; }
.dot{ opacity:.5; }

/* Navbar */
.navbar-main{
  background: linear-gradient(180deg, rgba(31,42,68,.96), rgba(22,32,53,.96));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width:44px; height:44px; object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.brand-text{ line-height:1.05; }
.brand-name{
  display:block;
  font-weight:900;
  color: rgba(255,255,255,.92);
  letter-spacing:.02em;
}
.brand-sub{
  display:block;
  font-size:.82rem;
  color: rgba(255,255,255,.62);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

.nav-link{
  border-radius: 0;
  padding: .9rem 1.1rem !important;
  color: rgba(255,255,255,.78);
  font-weight:700;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.nav-link:hover{ color: rgba(255,255,255,.95); text-decoration:none; }
.nav-link.active{
  color: rgba(255,255,255,.95)!important;
  position: relative;
  display: inline-block; /* underline width = text */
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom: 6px;
  height:2px;
  background: var(--accent);
  border-radius:999px;
}

.navbar-toggler{
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
}
.navbar-toggler-icon{ filter: invert(1); }

/* Buttons */
.btn{ border-radius: 6px; font-weight: 700; letter-spacing:.01em; }
.btn-cta{ padding:.75rem 1.5rem; border-radius: 6px; }

.btn-gold{
  background: linear-gradient(#d6b063, #b88e3a);
  border: 1px solid rgba(0,0,0,.25);
  color: #1a1f2a;
  box-shadow: 0 14px 26px rgba(201,162,77,.28);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.btn-gold:hover{
  background: linear-gradient(#cda655, #a57d2f);
  color:#151925;
  text-decoration:none;
}

.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.90);
  border-radius: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.btn-ghost:hover{
  background: rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
}

.btn-gold-soft{
  background: rgba(201,162,77,.18);
  border: 1px solid rgba(201,162,77,.35);
  color: var(--primary-dark);
  border-radius: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.btn-gold-soft:hover{ background: rgba(201,162,77,.28); text-decoration:none; }

/* HERO */
.hero{
  position:relative;
  padding: 72px 0 78px;
  color:#fff;
  background:
    radial-gradient(120% 120% at 75% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(90deg, rgba(22,32,53,.92) 0%, rgba(22,32,53,.86) 52%, rgba(22,32,53,.35) 100%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.18) 0, rgba(0,0,0,0) 55%),
    linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,0) 42%);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.35;
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }

.hero-kicker{
  display:flex; align-items:center; gap:12px;
  color: rgba(201,162,77,.95);
  font-weight:900;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: .92rem;
  margin-bottom: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.hero-line{ height:1px; width:58px; background: rgba(201,162,77,.85); }

.hero-title{
  font-weight: 900;
  letter-spacing: .01em;
  font-size: clamp(2.25rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 14px;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.hero-meta{
  color: rgba(255,255,255,.84);
  font-size: 1.08rem;
  display:grid; gap:8px;
  margin-bottom: 22px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-photo-wrap{
  width: min(430px, 100%);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.hero-photo{ width:100%; display:block; object-fit: cover; }

/* Section */
.section{ padding: 70px 0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; }
.section-title{ font-weight: 900; letter-spacing:.01em; color: var(--primary-dark); margin:0; }
.link-more{
  color: var(--primary-dark);
  font-weight:800;
  opacity:.9;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.link-more:hover{ opacity:1; }

.service-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 18px;
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.service-title{
  font-weight: 900;
  color: var(--primary-dark);
  margin-bottom: 6px;
}
.service-text{
  color: var(--muted);
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

/* Footer */
.footer{ background: var(--primary-dark); color: rgba(255,255,255,.72); }
.footer-title{ font-weight: 900; color: rgba(255,255,255,.92); }
.footer-sub{
  font-size: .92rem;
  color: rgba(255,255,255,.70);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.footer a{ color: rgba(255,255,255,.88); }
.footer a:hover{ text-decoration: underline; }

/* ===== Modal + Form (site style) ===== */
.modal-law{
  background:
    radial-gradient(120% 120% at 75% 40%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(31,42,68,.98), rgba(22,32,53,.98));
  color:#fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.modal-law__header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 18px 18px;
}
.modal-law__title{
  margin:0;
  font-weight: 900;
  letter-spacing:.01em;
}
.modal-law__sub{
  margin-top:6px;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.modal-law__body{ padding: 18px; }

.form-label{
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.req{ color: rgba(201,162,77,.98); }

.form-control-law{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
.form-control-law::placeholder{ color: rgba(255,255,255,.55); }
.form-control-law:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 .25rem rgba(201,162,77,.18);
  color:#fff;
}

.form-text-law{
  color: rgba(255,255,255,.65) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

.invalid-feedback{
  color: #ffd2d2;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

/* Bootstrap validation colors tweaks on dark bg */
.form-control.is-invalid{
  border-color: rgba(255, 120, 120, .85);
  box-shadow: 0 0 0 .25rem rgba(255, 120, 120, .18);
}
.form-control.is-valid{
  border-color: rgba(120, 255, 180, .65);
  box-shadow: 0 0 0 .25rem rgba(120, 255, 180, .14);
}

/* Mobile */
@media (max-width: 991.98px){
  .hero{ padding: 52px 0 58px; }
  .topbar-inner{ flex-direction:column; align-items:flex-start; }
  .nav-link{ padding:.75rem 0 !important; }
}

.hp{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* Mobile navbar: brand text overflow fix */
/* Mobile navbar: brand 2-line clamp */
@media (max-width: 991.98px){

  .brand{
    min-width: 0;
    align-items: flex-start; /* щоб текст вирівнювався красиво */
  }

  .brand-text{
    min-width: 0;
  }

  .brand-name{
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* максимум 2 рядки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.1;
    max-width: 100%;
	white-space: normal;
  }

  .brand-sub{
    font-size: .75rem;  /* трохи менший підпис */
  }
}


/* Mobile phones in navbar */
.nav-phones{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto; /* відсуває вправо */
  font-weight: 800;
  color: rgba(255,255,255,.88);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  font-size: .92rem;
  margin-right: 5px;
}

.nav-phones a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.nav-phones a:hover{
  text-decoration: underline;
}

/* Щоб телефони не налазили на бренд на дуже вузьких */
@media (max-width: 360px){
  .nav-phones{
    display:none; /* на дуже вузьких можна сховати, бо є topbar/меню */
  }
}