:root {
   --ink: #1b1f24;
   --muted: #5a6a79;
   --accent: #1f6feb;
   --accent-2: #0b5ed7;
   --paper: #ffffff;
   --mist: #f4f6f9;
   --sand: #f7f0e9;
   --sage: #eef6f2;
   --shadow: 0 16px 40px rgba(10, 20, 30, 0.08);
 }

 * {
   box-sizing: border-box;
 }

 body {
   margin: 0;
   font-family: "Inter", "Segoe UI", Arial, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.6;
 }

 a {
   color: var(--accent);
   text-decoration: none;
 }

 a:focus,
 button:focus,
 select:focus,
 input:focus,
 textarea:focus {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }

 header {
   padding: 24px 6vw 8px;
 }

 .nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   border-bottom: 1px solid #e5eaf0;
   padding-bottom: 16px;
 }

 .brand {
   font-weight: 700;
   letter-spacing: 0.02em;
 }

 .nav-links {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   align-items: center;
   font-size: 0.95rem;
 }

 .ad-label {
   font-size: 0.85rem;
   color: var(--muted);
 }

 main {
   display: flex;
   flex-direction: column;
   gap: 48px;
   padding: 24px 6vw 80px;
 }

 .magazine-row {
   display: flex;
   gap: 28px;
   flex-wrap: wrap;
 }

 .magazine-row.reverse {
   flex-direction: row-reverse;
 }

 .panel {
   background: var(--mist);
   padding: 24px;
   border-radius: 18px;
   flex: 1 1 280px;
   box-shadow: var(--shadow);
 }

 .panel.light {
   background: var(--paper);
 }

 .panel.sand {
   background: var(--sand);
 }

 .panel.sage {
   background: var(--sage);
 }

 .panel h2,
 .panel h3 {
   margin-top: 0;
 }

 .hero {
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
   align-items: stretch;
 }

 .hero-copy {
   flex: 1 1 320px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 18px;
 }

 .hero-image {
   flex: 1 1 320px;
   border-radius: 20px;
   overflow: hidden;
   background: #dfe7f2;
   box-shadow: var(--shadow);
 }

 .hero-image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
 }

 .cta-row {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 20px;
   border-radius: 999px;
   border: none;
   background: var(--accent);
   color: #ffffff;
   cursor: pointer;
   font-weight: 600;
   transition: transform 0.2s ease, background 0.2s ease;
 }

 .btn.secondary {
   background: #eef1f6;
   color: var(--ink);
 }

 .btn:hover {
   transform: translateY(-1px);
   background: var(--accent-2);
 }

 .btn.secondary:hover {
   background: #dfe6ef;
 }

 .image-card {
   background: #e7ecf2;
   border-radius: 16px;
   overflow: hidden;
   min-height: 180px;
 }

 .image-card img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
 }

 .service-list {
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

 .service-item {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 16px;
   border-radius: 14px;
   background: var(--paper);
   border: 1px solid #e3e8ef;
 }

 .service-price {
   font-weight: 700;
   color: var(--accent);
 }

 .inline-cta {
   font-weight: 600;
 }

 .sticky-cta {
   position: sticky;
   top: 24px;
   align-self: flex-start;
 }

 form {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 label {
   font-weight: 600;
 }

 input,
 select,
 textarea {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid #d6dde6;
   font-size: 1rem;
 }

 .form-note {
   font-size: 0.9rem;
   color: var(--muted);
 }

 .form-error {
   color: #b42318;
   font-weight: 600;
 }

 .footer {
   padding: 32px 6vw 48px;
   background: #101622;
   color: #e5eaf0;
   display: flex;
   flex-direction: column;
   gap: 18px;
 }

 .footer a {
   color: #9cc3ff;
 }

 .footer-columns {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
 }

 .footer-column {
   flex: 1 1 220px;
 }

 .cookie-banner {
   position: fixed;
   left: 24px;
   bottom: 24px;
   background: #ffffff;
   border-radius: 14px;
   box-shadow: var(--shadow);
   padding: 16px;
   max-width: 320px;
   display: none;
   flex-direction: column;
   gap: 12px;
   z-index: 50;
 }

 .cookie-actions {
   display: flex;
   gap: 12px;
 }

 .content-grid {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }

 .content-grid > div {
   flex: 1 1 240px;
 }

 .hero-micro {
   font-size: 0.95rem;
   color: var(--muted);
 }

 .section-title {
   font-size: 1.6rem;
   margin: 0 0 12px;
 }

 .split-note {
   font-size: 0.95rem;
   color: var(--muted);
   margin-top: 8px;
 }

 .legal-block {
   background: var(--mist);
   padding: 20px;
   border-radius: 14px;
 }

 .contact-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }

 .contact-grid > div {
   flex: 1 1 250px;
 }

 .reference-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   font-size: 0.9rem;
 }