:root {
   --bg: #f6f5f2;
   --ink: #1b1c1e;
   --muted: #5c6066;
   --accent: #2f6f66;
   --accent-2: #c57b57;
   --panel: #ffffff;
   --soft: #ece7e1;
   --shadow: 0 18px 40px rgba(17, 20, 24, 0.12);
 }
 
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
   font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
   color: var(--ink);
   background: var(--bg);
   line-height: 1.6;
 }
 
 a {
   color: inherit;
 }
 
 .page {
   max-width: 1180px;
   margin: 0 auto;
   padding: 24px;
 }
 
 .topbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
 .brand {
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 0.6px;
 }
 
 .nav {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   align-items: center;
   font-size: 14px;
 }
 
 .nav a {
   text-decoration: none;
   padding: 6px 10px;
   border-radius: 999px;
   background: var(--panel);
   box-shadow: 0 6px 18px rgba(17, 20, 24, 0.08);
 }
 
 .ad-label {
   font-size: 12px;
   color: var(--muted);
   background: var(--soft);
   padding: 6px 12px;
   border-radius: 999px;
 }
 
 .hero {
   margin-top: 24px;
   padding: 70px 48px;
   border-radius: 28px;
   color: #fff;
   background: linear-gradient(120deg, rgba(18, 26, 32, 0.78), rgba(18, 26, 32, 0.2)),
     url("https://images.unsplash.com/photo-1516574187841-cb9cc2ca948b?w=1400&q=80") center/cover no-repeat;
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

.hero-about {
  background: linear-gradient(120deg, rgba(18, 26, 32, 0.78), rgba(18, 26, 32, 0.2)),
    url("https://images.unsplash.com/photo-1503602642458-232111445657?w=1400&q=80") center/cover no-repeat;
}

.hero-services {
  background: linear-gradient(120deg, rgba(18, 26, 32, 0.78), rgba(18, 26, 32, 0.2)),
    url("https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=1400&q=80") center/cover no-repeat;
}

.hero-contact {
  background: linear-gradient(120deg, rgba(18, 26, 32, 0.78), rgba(18, 26, 32, 0.2)),
    url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1400&q=80") center/cover no-repeat;
}
 
 .hero h1 {
   font-size: 40px;
   max-width: 560px;
   margin: 0;
 }
 
 .hero p {
   max-width: 520px;
   margin: 0;
   font-size: 18px;
 }
 
 .cta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 8px;
 }
 
 .btn {
   border: none;
   border-radius: 999px;
   padding: 12px 20px;
   background: var(--accent);
   color: #fff;
   font-weight: 600;
   cursor: pointer;
 }
 
 .btn.secondary {
   background: var(--accent-2);
 }
 
 .btn.ghost {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .magazine {
   display: flex;
   flex-direction: column;
   gap: 30px;
   margin-top: 36px;
 }
 
 .row {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
 }
 
 .col-60 {
   flex: 1 1 60%;
   min-width: 280px;
 }
 
 .col-40 {
   flex: 1 1 35%;
   min-width: 260px;
 }
 
 .panel {
   background: var(--panel);
   border-radius: 22px;
   padding: 24px;
   box-shadow: var(--shadow);
 }
 
 .panel.soft {
   background: var(--soft);
   box-shadow: none;
 }
 
 .panel h2,
 .panel h3 {
   margin-top: 0;
 }

.backdrop-section {
  flex: 1 1 100%;
  background: linear-gradient(120deg, rgba(18, 26, 32, 0.75), rgba(18, 26, 32, 0.15)),
    url("https://images.unsplash.com/photo-1518779578993-ec3579fee39f?w=1400&q=80") center/cover no-repeat;
  color: #fff;
}
 
 .media {
   border-radius: 18px;
   overflow: hidden;
   background-color: #dde2e2;
 }
 
 .media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
 .cards {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
 }
 
 .card {
   flex: 1 1 260px;
   background: #fff;
   border-radius: 18px;
   overflow: hidden;
   box-shadow: var(--shadow);
 }
 
 .card-body {
   padding: 18px;
 }
 
 .price {
   font-weight: 700;
   color: var(--accent);
 }
 
 .quote {
   font-style: italic;
   color: var(--muted);
 }
 
 .inline-link {
   color: var(--accent);
   text-decoration: underline;
 }
 
 .review-flow {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
 .form-wrap {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .form-wrap label {
   font-weight: 600;
 }
 
 .form-wrap input,
 .form-wrap select,
 .form-wrap textarea {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid #cdd1d6;
   font-size: 14px;
 }
 
 .footer {
   margin-top: 48px;
   padding: 32px 24px;
   background: #111318;
   color: #d8dbe0;
 }
 
 .footer .row {
   gap: 32px;
 }
 
 .footer a {
   color: #d8dbe0;
 }
 
 .sticky-cta {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 10;
 }
 
 .sticky-cta button {
   padding: 12px 18px;
   border-radius: 999px;
   border: none;
   background: var(--accent-2);
   color: #fff;
   cursor: pointer;
 }
 
 .cookie-banner {
   position: fixed;
   left: 18px;
   bottom: 18px;
   max-width: 320px;
   background: #fff;
   border-radius: 16px;
   padding: 16px;
   box-shadow: var(--shadow);
   display: none;
   z-index: 12;
 }
 
 .cookie-actions {
   display: flex;
   gap: 10px;
   margin-top: 10px;
 }
 
 .cookie-actions button {
   flex: 1;
   border: none;
   border-radius: 999px;
   padding: 8px 12px;
   cursor: pointer;
 }
 
 .cookie-actions .accept {
   background: var(--accent);
   color: #fff;
 }
 
 .cookie-actions .reject {
   background: #e5e8ec;
 }
 
 .legal-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 .legal-table {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .legal-table .row {
   align-items: flex-start;
 }
 
 @media (max-width: 840px) {
   .hero {
     padding: 54px 28px;
   }
 
   .hero h1 {
     font-size: 32px;
   }
 
   .topbar {
     flex-direction: column;
     align-items: flex-start;
   }
 }