:root {
      --brand-dark: #3f4046;
      --brand-main: #585961;
      --brand-mid: #a7a7ae;
      --brand-light: #d2d2d7;
      --brand-soft: #f3f3f5;
      --text: #24252a;
      --text-soft: #60636d;
      --text-muted: #858892;
      --line: #dedfe4;
      --paper: #ffffff;
      --background: #f8f8fa;
      --success: #4f8f6b;
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --shadow-lg: 0 24px 70px rgba(36, 37, 42, 0.10);
      --shadow-md: 0 16px 42px rgba(36, 37, 42, 0.08);
      --shadow-sm: 0 10px 26px rgba(36, 37, 42, 0.06);
      --max-width: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      position: relative;
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 6%, rgba(88, 89, 97, 0.12), transparent 28rem),
        radial-gradient(circle at 88% 2%, rgba(167, 167, 174, 0.16), transparent 25rem),
        linear-gradient(180deg, #fbfbfc 0%, #ffffff 40%, var(--background) 100%);
      line-height: 1.6;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    .wrap { width: min(var(--max-width), calc(100% - 44px)); margin: 0 auto; }

    #bg-particles {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.82;
    }

    .site-header, main, footer { position: relative; z-index: 1; }

    @media (prefers-reduced-motion: reduce) {
      #bg-particles { display: none; }
      .label::before,
      .label::after { animation: none; }
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(222, 223, 228, 0.86);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--brand-dark);
      line-height: 1;
    }

    .logo img {
      display: block;
      width: auto;
      height: 42px;
      max-width: 230px;
      object-fit: contain;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 0.94rem;
      font-weight: 750;
      color: var(--text-soft);
    }

    .nav-links a:hover { color: var(--brand-dark); }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 0.94rem;
      font-weight: 850;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      white-space: nowrap;
    }

    .button:hover { transform: translateY(-2px); }

    .button-primary {
      color: white;
      background: linear-gradient(135deg, var(--brand-main), var(--brand-dark));
      box-shadow: 0 16px 34px rgba(63, 64, 70, 0.22);
    }

    .button-primary:hover { box-shadow: 0 18px 42px rgba(63, 64, 70, 0.28); }

    .button-secondary {
      color: var(--brand-dark);
      background: white;
      border-color: rgba(63, 64, 70, 0.18);
      box-shadow: var(--shadow-sm);
    }

    .button-light {
      color: var(--text);
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(255, 255, 255, 0.72);
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
    }

    .button-light:hover {
      background: #ffffff;
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    }

    .hero { position: relative; padding: 86px 0 38px; }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.9;
      background-image:
        linear-gradient(rgba(88, 89, 97, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 89, 97, 0.055) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(90deg, transparent, black 24%, black 78%, transparent);
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 66px;
      align-items: center;
    }

    .label {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 24px;
      padding: 8px 12px;
      border-radius: 999px;
      color: var(--brand-dark);
      background: rgba(243, 243, 245, 0.88);
      border: 1px solid rgba(222, 223, 228, 0.95);
      font-size: 0.84rem;
      font-weight: 850;
    }

    .label::before {
      content: "";
      position: relative;
      z-index: 1;
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 6px rgba(79, 143, 107, 0.13), 0 0 20px rgba(79, 143, 107, 0.35);
      animation: status-dot-breathe 2.2s ease-in-out infinite;
    }

    .label::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1px solid rgba(79, 143, 107, 0.42);
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
      pointer-events: none;
      animation: status-dot-ripple 2.2s ease-out infinite;
    }

    @keyframes status-dot-breathe {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(79, 143, 107, 0.13), 0 0 20px rgba(79, 143, 107, 0.28);
      }
      50% {
        transform: scale(1.22);
        box-shadow: 0 0 0 8px rgba(79, 143, 107, 0.18), 0 0 28px rgba(79, 143, 107, 0.44);
      }
    }

    @keyframes status-dot-ripple {
      0% {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(1);
      }
      72%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.4);
      }
    }

    @property --audit-score {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      max-width: 780px;
      margin-bottom: 24px;
      font-size: clamp(3rem, 6vw, 6rem);
      line-height: 0.92;
      letter-spacing: -0.083em;
      color: var(--text);
    }

    .highlight { color: var(--brand-main); }

    .lead {
      max-width: 660px;
      margin-bottom: 32px;
      color: var(--text-soft);
      font-size: clamp(1.05rem, 1.45vw, 1.2rem);
    }

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

    .proofs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-soft); font-size: 0.91rem; }
    .proofs span { padding: 8px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); }

    .audit-card {
      position: relative;
      padding: 24px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 248, 250, 0.96)),
        radial-gradient(circle at top right, rgba(88, 89, 97, 0.12), transparent 18rem);
      border: 1px solid rgba(222, 223, 228, 0.95);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    .audit-content { position: relative; z-index: 1; display: grid; gap: 14px; }

    .audit-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px 8px;
      color: var(--text-soft);
      font-weight: 850;
      font-size: 0.9rem;
    }

    .chip {
      flex: 0 0 auto;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--success);
      background: rgba(79, 143, 107, 0.11);
      border: 1px solid rgba(79, 143, 107, 0.16);
      font-size: 0.78rem;
      white-space: nowrap;
    }

    .score-card {
      padding: 24px;
      border-radius: 26px;
      background: white;
      border: 1px solid rgba(222, 223, 228, 0.95);
      box-shadow: var(--shadow-md);
    }

    .score-grid { display: grid; grid-template-columns: 126px 1fr; gap: 22px; align-items: center; }

    .ring {
      --audit-score: 75%;
      position: relative;
      width: 126px;
      height: 126px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--brand-main) 0 var(--audit-score), #eeeeF1 var(--audit-score) 100%);
      color: var(--text);
      font-size: 1.7rem;
      font-weight: 950;
      letter-spacing: -0.05em;
      box-shadow: 0 0 0 0 rgba(88, 89, 97, 0);
      animation:
        audit-score-fill 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both,
        audit-ring-breathe 4.8s ease-in-out 1.7s infinite;
    }

    .ring::before { content: ""; position: absolute; inset: 14px; border-radius: inherit; background: white; }
    .ring::after {
      content: "";
      position: absolute;
      inset: -5px;
      z-index: 1;
      border-radius: inherit;
      background: conic-gradient(from -90deg, transparent 0 66%, rgba(79, 143, 107, 0.34) 74%, transparent 84% 100%);
      -webkit-mask: radial-gradient(circle, transparent 0 44px, #000 45px 66px, transparent 67px 100%);
      mask: radial-gradient(circle, transparent 0 44px, #000 45px 66px, transparent 67px 100%);
      opacity: 0;
      pointer-events: none;
      animation: audit-ring-sweep 3.6s ease-out 1.35s infinite;
    }
    .ring span { position: relative; z-index: 1; }

    @keyframes audit-score-fill {
      from { --audit-score: 0%; }
      to { --audit-score: 75%; }
    }

    @keyframes audit-ring-breathe {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(88, 89, 97, 0); }
      50% { transform: scale(1.025); box-shadow: 0 10px 26px rgba(88, 89, 97, 0.13); }
    }

    @keyframes audit-ring-sweep {
      0%, 30% { opacity: 0; transform: rotate(-18deg); }
      48% { opacity: 0.82; }
      78%, 100% { opacity: 0; transform: rotate(342deg); }
    }

    .score-card h2 { margin-bottom: 9px; color: var(--text); font-size: 1.44rem; line-height: 1.16; letter-spacing: -0.04em; }
    .score-card p { margin-bottom: 0; color: var(--text-soft); font-size: 0.94rem; }

    .mini-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .mini-item { padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(222, 223, 228, 0.95); }
    .mini-item strong { display: block; margin-bottom: 7px; color: var(--brand-dark); font-size: 1.42rem; line-height: 1; letter-spacing: -0.05em; }
    .mini-item span { color: var(--text-soft); font-size: 0.88rem; }

    .strip {
      position: relative;
      z-index: 1;
      margin-top: 54px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      border: 1px solid var(--line);
      background: var(--line);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .strip-item { padding: 22px; background: rgba(255, 255, 255, 0.88); }
    .strip-item small { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; }
    .strip-item strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.25; }

    section { padding: 86px 0; }

    .section-head { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 50px; align-items: end; margin-bottom: 38px; }
    .kicker { margin-bottom: 10px; color: var(--brand-main); font-size: 0.76rem; font-weight: 950; text-transform: uppercase; letter-spacing: 0.12em; }
    h2 { margin-bottom: 0; color: var(--text); font-size: clamp(2.1rem, 3.6vw, 4rem); line-height: 1; letter-spacing: -0.07em; }
    .section-head p { max-width: 640px; margin-bottom: 0; color: var(--text-soft); font-size: 1.05rem; }

    .services { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }

    .service {
      position: relative;
      grid-column: span 4;
      min-height: 288px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 28px;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, 0.84);
      border: 1px solid rgba(222, 223, 228, 0.95);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .service.large { grid-column: span 6; }
    .service:hover { transform: translateY(-4px); border-color: rgba(88, 89, 97, 0.25); box-shadow: var(--shadow-lg); }
    
    .service::after {
      content: "";
      position: absolute;
      top: 18px;
      right: 18px;
      width: 118px;
      height: 118px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 94px 94px;
      opacity: 0.18;
      z-index: 0;
      pointer-events: none;
    }

    .service::before {
      content: "";
      position: absolute;
      top: 12px;
      right: 12px;
      width: 126px;
      height: 126px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(88, 89, 97, 0.075), transparent 68%);
      z-index: 0;
      pointer-events: none;
    }

    .service:nth-child(1)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M48 10l28 12v20c0 22-14 36-28 42-14-6-28-20-28-42V22l28-12z%27/%3E%3Cpath d=%27M36 48l8 8 18-20%27/%3E%3C/svg%3E"); }
    .service:nth-child(2)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%2712%27 y=%2716%27 width=%2724%27 height=%2724%27 rx=%276%27/%3E%3Crect x=%2760%27 y=%2716%27 width=%2724%27 height=%2724%27 rx=%276%27/%3E%3Crect x=%2736%27 y=%2756%27 width=%2724%27 height=%2724%27 rx=%276%27/%3E%3Cpath d=%27M36 28h24%27/%3E%3Cpath d=%27M48 40v16%27/%3E%3C/svg%3E"); }
    .service:nth-child(3)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M48 12l7 20 20 7-20 7-7 20-7-20-20-7 20-7 7-20z%27/%3E%3Cpath d=%27M72 58l3 9 9 3-9 3-3 9-3-9-9-3 9-3 3-9z%27/%3E%3C/svg%3E"); }
    .service:nth-child(4)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%2724%27 y=%2718%27 width=%2748%27 height=%2764%27 rx=%278%27/%3E%3Cpath d=%27M36 30h24%27/%3E%3Cpath d=%27M34 46h28%27/%3E%3Cpath d=%27M34 60h20%27/%3E%3Cpath d=%27M34 72h14%27/%3E%3C/svg%3E"); }
    .service:nth-child(5)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%2716%27 y=%2718%27 width=%2764%27 height=%2720%27 rx=%276%27/%3E%3Crect x=%2716%27 y=%2758%27 width=%2764%27 height=%2720%27 rx=%276%27/%3E%3Cpath d=%27M28 28h2%27/%3E%3Cpath d=%27M28 68h2%27/%3E%3Cpath d=%27M44 28h22%27/%3E%3Cpath d=%27M44 68h22%27/%3E%3C/svg%3E"); }
    .service:nth-child(6)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 34l36-16 36 16-36 16-36-16z%27/%3E%3Cpath d=%27M28 44v16c0 8 9 14 20 14s20-6 20-14V44%27/%3E%3Cpath d=%27M84 36v24%27/%3E%3C/svg%3E"); }
    .service:nth-child(7)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23585961%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2748%27 cy=%2748%27 r=%2734%27/%3E%3Cpath d=%27M60 36L52 60 28 68l8-24 24-8z%27/%3E%3Ccircle cx=%2748%27 cy=%2748%27 r=%273%27/%3E%3C/svg%3E"); }
.service > * { position: relative; z-index: 1; }

    .num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 22px; border-radius: 13px; color: var(--brand-dark); background: var(--brand-soft); font-weight: 950; }
    .service h3 { position: relative; z-index: 1; margin-bottom: 12px; color: var(--text); font-size: 1.34rem; line-height: 1.16; letter-spacing: -0.04em; }
    .service p { position: relative; z-index: 1; margin-bottom: 24px; color: var(--text-soft); }
    .service-link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding: 0;
      border: 0;
      color: var(--brand-dark);
      background: transparent;
      font: inherit;
      font-size: 0.92rem;
      font-weight: 900;
      cursor: pointer;
    }

    .method {
      background:
        linear-gradient(180deg, rgba(243, 243, 245, 0.62), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 70% 40%, rgba(88, 89, 97, 0.10), transparent 24rem);
    }

    .method-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 34px; align-items: stretch; }

    .quote-card {
      position: relative;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 34px;
      border-radius: var(--radius-xl);
      color: white;
      background:
        linear-gradient(135deg, rgba(88, 89, 97, 0.98), rgba(36, 37, 42, 0.98)),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 16rem);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    
    .quote-card::before {
      content: "";
      position: absolute;
      right: 22px;
      bottom: 22px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 68%);
      pointer-events: none;
      z-index: 0;
    }

    .quote-card::after {
      content: "";
      position: absolute;
      right: 32px;
      bottom: 32px;
      width: 150px;
      height: 150px;
      background-image: url("data:image/svg+xml;utf8,%0A%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 96%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%275.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%0A  %3Cpath d=%27M48 10l28 12v20c0 22-14 36-28 42-14-6-28-20-28-42V22l28-12z%27/%3E%0A  %3Cpath d=%27M36 47l8 8 18-20%27/%3E%0A%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      opacity: 0.16;
      pointer-events: none;
      z-index: 0;
    }
    .quote-card > * { position: relative; z-index: 1; }

    .quote-card blockquote { position: relative; z-index: 1; margin: 0; font-size: clamp(1.65rem, 2.8vw, 2.7rem); line-height: 1.08; letter-spacing: -0.055em; font-weight: 900; }
    .quote-card p { position: relative; z-index: 1; margin: 24px 0 0; color: rgba(255, 255, 255, 0.78); }

    .steps { display: grid; gap: 14px; }
    .step { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(222, 223, 228, 0.95); box-shadow: var(--shadow-sm); }
    .step b { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 18px; color: var(--brand-dark); background: var(--brand-soft); font-weight: 950; }
    .step strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 1.05rem; }
    .step span { color: var(--text-soft); font-size: 0.96rem; }

    .problems-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .problem { padding: 24px; border-radius: 24px; background: white; border: 1px solid rgba(222, 223, 228, 0.95); box-shadow: var(--shadow-sm); }
    .problem .icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; color: var(--brand-dark); background: var(--brand-soft); font-weight: 950; }
    .problem h3 { margin-bottom: 10px; color: var(--text); font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.025em; }
    .problem p { margin: 0; color: var(--text-soft); font-size: 0.93rem; }

    .local { padding-bottom: 44px; }
    .local-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: stretch; padding: 38px; border-radius: 36px; background: white; border: 1px solid rgba(222, 223, 228, 0.95); box-shadow: var(--shadow-md); }
    .local-panel p { color: var(--text-soft); font-size: 1.04rem; }

    .local-content { min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    .local-content .hero-actions { margin-top: auto; margin-bottom: 0; padding-top: 28px; }

    .local-visual { position: relative; min-height: 340px; border-radius: 30px; background: radial-gradient(circle at 50% 45%, rgba(88, 89, 97, 0.13), transparent 12rem), linear-gradient(135deg, var(--brand-soft), #ffffff); border: 1px solid rgba(222, 223, 228, 0.95); overflow: hidden; }
    .local-visual::before { content: "IT"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(88, 89, 97, 0.13); font-size: 9rem; font-weight: 950; letter-spacing: -0.12em; }
    .local-visual::after { content: "IT-Smart - Made in Belgium"; position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 18px; border-radius: 20px; color: var(--text); background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(222, 223, 228, 0.95); font-weight: 900; text-align: center; backdrop-filter: blur(10px); }
    #googleMap { width: 100%; height: 500px; filter: grayscale(100%); }

    .cta { padding: 42px 0 92px; }
    .cta-box { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: 36px; border-radius: var(--radius-xl); color: white; background: radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.22), transparent 18rem), linear-gradient(135deg, var(--brand-main), var(--brand-dark) 54%, var(--text)); box-shadow: var(--shadow-lg); overflow: hidden; }
    .cta-box::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, black, transparent 80%); }
    .cta-box > * { position: relative; z-index: 1; }
    .cta-box h2 { margin-bottom: 10px; color: white; }
    .cta-box p { max-width: 680px; margin-bottom: 0; color: rgba(255, 255, 255, 0.82); }

    footer { padding: 48px 0 30px; background: white; border-top: 1px solid rgba(222, 223, 228, 0.95); }
    .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; align-items: start; }
    footer h3 { margin-bottom: 12px; color: var(--text); font-size: 0.96rem; }
    footer p, footer li { color: var(--text-soft); font-size: 0.94rem; }
    footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

    .privacy-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .privacy-modal.is-open { display: flex; }

    .privacy-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(36, 37, 42, 0.52);
      backdrop-filter: blur(10px);
    }

    .privacy-modal__dialog {
      position: relative;
      z-index: 1;
      width: min(860px, 100%);
      max-height: min(88vh, 860px);
      overflow: hidden;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 250, 0.98)),
        radial-gradient(circle at top right, rgba(79, 143, 107, 0.12), transparent 18rem);
      border: 1px solid rgba(222, 223, 228, 0.95);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26);
    }

    .privacy-modal__body {
      max-height: min(88vh, 860px);
      overflow-y: auto;
      padding: 34px 44px 34px 34px;
      scrollbar-gutter: stable;
    }

    .privacy-modal__body::-webkit-scrollbar { width: 10px; }
    .privacy-modal__body::-webkit-scrollbar-track { background: transparent; }
    .privacy-modal__body::-webkit-scrollbar-thumb {
      border: 3px solid transparent;
      border-radius: 999px;
      background: rgba(88, 89, 97, 0.42);
      background-clip: padding-box;
    }

    .privacy-modal__body {
      scrollbar-width: thin;
      scrollbar-color: rgba(88, 89, 97, 0.42) transparent;
    }

    .privacy-modal__close {
      position: absolute;
      top: 26px;
      right: 26px;
      z-index: 2;
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(222, 223, 228, 0.95);
      border-radius: 999px;
      color: var(--brand-dark);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      font-size: 1.35rem;
      line-height: 1;
    }

    .privacy-modal__close:hover { background: var(--brand-soft); }

    .privacy-modal h2 {
      margin-bottom: 18px;
      padding-right: 34px;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .privacy-modal h3 {
      margin: 24px 0 8px;
      color: var(--text);
      font-size: 1.05rem;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    .privacy-modal p {
      margin-bottom: 12px;
      color: var(--text-soft);
    }

    .privacy-modal__intro {
      padding: 18px 20px;
      border-radius: 22px;
      color: var(--text);
      background: rgba(79, 143, 107, 0.09);
      border: 1px solid rgba(79, 143, 107, 0.16);
      font-weight: 750;
    }

    .privacy-modal hr {
      margin: 24px 0;
      border: 0;
      border-top: 1px solid rgba(222, 223, 228, 0.95);
    }

    .privacy-modal__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
    .privacy-modal__list li {
      padding: 12px 14px;
      border-radius: 16px;
      color: var(--text-soft);
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(222, 223, 228, 0.95);
    }
    .privacy-modal__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      min-height: 72px;
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid rgba(222, 223, 228, 0.95);
    }

    body.modal-open { overflow: hidden; }

    .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(222, 223, 228, 0.95); color: var(--text-muted); font-size: 0.9rem; }

    .consent-banner {
      position: fixed;
      left: 50%;
      bottom: 18px;
      z-index: 100;
      width: min(680px, calc(100% - 28px));
      display: none;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border-radius: 22px;
      color: var(--text);
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(222, 223, 228, 0.95);
      box-shadow: var(--shadow-lg);
      transform: translateX(-50%);
      backdrop-filter: blur(16px);
    }
    .consent-banner.is-visible { display: grid; }
    .consent-banner p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
    .consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .consent-actions .button { min-height: 42px; padding: 0 16px; font-size: 0.86rem; }

    @media (max-width: 1050px) {
      .hero-grid, .method-grid, .local-panel, .cta-box { grid-template-columns: 1fr; }
      .strip { grid-template-columns: repeat(2, 1fr); }
      .service, .service.large { grid-column: span 6; }
      .problems-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 760px) {

      .local-content { min-height: auto; }
      .local-content .hero-actions { margin-top: 24px; padding-top: 0; }


      .quote-card::before {
        width: 132px;
        height: 132px;
        right: 16px;
        bottom: 16px;
      }

      .quote-card::after {
        width: 100px;
        height: 100px;
        right: 24px;
        bottom: 24px;
      }

      .wrap { width: min(var(--max-width), calc(100% - 28px)); }
      .nav { min-height: 68px; }
      .logo img { height: 38px; }
      .nav-links, .nav > .button { display: none; }
      .hero { padding-top: 48px; }
      h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
      .hero-actions .button { width: 100%; }
      .audit-top {
        gap: 12px;
        padding-right: 0;
        padding-left: 0;
      }
      .audit-top > span:first-child { min-width: 0; }
      .chip {
        padding: 5px 8px;
        font-size: 0;
      }
      .chip::before {
        content: attr(data-short);
        font-size: 0.74rem;
      }
      .score-grid, .mini-list, .strip, .section-head, .problems-grid, .footer-grid { grid-template-columns: 1fr; }
      .services { grid-template-columns: 1fr; }
      .service, .service.large { grid-column: auto; min-height: auto; }
      section { padding: 58px 0; }
      .audit-card, .local-panel, .cta-box { padding: 22px; border-radius: 26px; }
      .privacy-modal { align-items: center; padding: 14px; }
      .privacy-modal__dialog {
        width: 100%;
        max-height: 88dvh;
        border-radius: 26px;
      }
      .privacy-modal__body {
        display: flex;
        flex-direction: column;
        max-height: 88dvh;
        padding: 24px 32px 24px 24px;
      }
      .privacy-modal__close { top: 18px; right: 18px; }
      .privacy-modal__actions {
        flex: 0 0 72px;
        position: sticky;
        bottom: -24px;
        margin: auto -32px -24px -24px;
        padding: 14px 32px 16px 24px;
        background: linear-gradient(180deg, rgba(248, 248, 250, 0.78), rgba(248, 248, 250, 0.98) 34%);
        backdrop-filter: blur(10px);
      }
      .privacy-modal__actions .button { width: 100%; }
      .consent-banner {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .consent-actions { justify-content: stretch; }
      .consent-actions .button { flex: 1 1 auto; }

      .quote-card { min-height: 340px; padding: 26px; }
      .local-visual { min-height: 260px; }
    }

    @media (max-width: 760px) and (max-height: 720px) {
      .privacy-modal { align-items: stretch; padding: 8px; }
      .privacy-modal__dialog {
        max-height: calc(100dvh - 16px);
      }
      .privacy-modal__body {
        max-height: calc(100dvh - 16px);
      }
    }
    .gmaps-bounce-marker {
      width: 48px;
      height: 48px;
      animation: gmaps-marker-bounce 1.6s ease-in-out infinite;
      transform-origin: center bottom;
    }

    @keyframes gmaps-marker-bounce {
      0%, 100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ring {
        animation: none;
      }

      .ring::after {
        animation: none;
      }
    }