:root {
        color-scheme: light;
        --bg: #f7f9ff;
        --surface: #ffffff;
        --surface-2: #eef3fb;
        --surface-3: #e4ebf6;
        --ink: #0a1020;
        --text: #111827;
        --muted: #637084;
        --muted-2: #7b8798;
        --border: #d8e0ec;
        --border-strong: #bbc7d8;
        --lime: #d8ff64;
        --lime-ink: #111800;
        --mint: #12c7b2;
        --purple: #6d5ef8;
        --accent: #102033;
        --link: #135e55;
        --max: 1296px;
        --radius: 18px;
        --shadow: 0 24px 60px rgba(31, 41, 63, 0.13);
      }

      [data-theme="dark"] {
        color-scheme: dark;
        --bg: #07090d;
        --surface: #0d1118;
        --surface-2: #111722;
        --surface-3: #151c28;
        --ink: #f7f8fc;
        --text: #f7f8fc;
        --muted: #aab4c5;
        --muted-2: #8792a3;
        --border: #29303c;
        --border-strong: #394250;
        --mint: #5eead4;
        --accent: #151c28;
        --link: #d8ff64;
        --shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background:
          radial-gradient(
            circle at 82% 6%,
            rgba(109, 94, 248, 0.13),
            transparent 28%
          ),
          radial-gradient(
            circle at 10% 28%,
            rgba(18, 199, 178, 0.12),
            transparent 24%
          ),
          var(--bg);
        color: var(--text);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        text-rendering: optimizeLegibility;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        display: block;
      }
      button,
      input,
      textarea {
        font: inherit;
      }

      :focus-visible {
        outline: 3px solid rgba(18, 199, 178, 0.55);
        outline-offset: 3px;
      }

      .container {
        width: min(calc(100% - 40px), var(--max));
        margin-inline: auto;
      }

      .skip {
        position: fixed;
        left: 16px;
        top: -60px;
        z-index: 9999;
        padding: 10px 14px;
        background: var(--lime);
        color: #111;
        border-radius: 10px;
      }
      .skip:focus {
        top: 16px;
      }

      .header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(247, 249, 255, 0.86);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(187, 199, 216, 0.58);
      }

      [data-theme="dark"] .header {
        background: rgba(7, 9, 13, 0.78);
        border-bottom-color: rgba(255, 255, 255, 0.07);
      }

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

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .logo {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--mint), #64b5ff);
        color: #071015;
        font-size: 14px;
        font-weight: 900;
      }

      .brandText {
        font-size: 20px;
      }

      .menu {
        display: flex;
        align-items: center;
        gap: 28px;
        color: var(--muted);
        font-size: 14px;
      }

      .menu a:not(.btn):hover {
        color: var(--text);
      }

      .iconBtn {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--text);
        background: var(--surface);
        cursor: pointer;
      }

      .btn {
        min-height: 52px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 15px;
        border: 1px solid transparent;
        background: var(--lime);
        color: var(--lime-ink);
        font-weight: 800;
        transition: 0.22s ease;
      }

      .btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.04);
      }
      .btnSmall {
        min-height: 46px;
        padding-inline: 18px;
      }
      .btnGhost {
        background: var(--surface);
        color: var(--text);
        border-color: var(--border-strong);
      }
      .btnFull {
        width: 100%;
      }

      .burger {
        display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 10px;
      }
      .burgerIcon {
        display: block;
        width: 22px;
        height: 16px;
        background:
          linear-gradient(var(--text), var(--text)) 0 0 / 100% 2px no-repeat,
          linear-gradient(var(--text), var(--text)) 0 7px / 100% 2px no-repeat,
          linear-gradient(var(--text), var(--text)) 0 14px / 100% 2px no-repeat;
      }

      .mobileMenu {
        display: none;
      }

      .hero {
        padding: 84px 0 76px;
      }

      .heroGrid {
        display: grid;
        grid-template-columns: 1.12fr 0.88fr;
        gap: 58px;
        align-items: center;
      }

      .pill {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 16px;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: var(--accent);
        color: #f8fbff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hero h1 {
        max-width: 760px;
        margin: 24px 0 22px;
        font-size: clamp(48px, 6.1vw, 82px);
        line-height: 0.98;
        letter-spacing: -0.045em;
      }

      .sub {
        max-width: 720px;
        margin: 0;
        color: var(--muted);
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.6;
      }

      .ctaRow {
        margin-top: 34px;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
      }

      .heroProof {
        margin-top: 38px;
        padding-top: 26px;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 14px;
      }

      .heroCard {
        position: relative;
        overflow: hidden;
        padding: 32px;
        border: 1px solid #253044;
        border-radius: 26px;
        background: linear-gradient(
          180deg,
          rgba(17, 23, 34, 0.98),
          rgba(10, 14, 21, 0.98)
        );
        box-shadow: var(--shadow);
      }

      .heroCard::before {
        content: "";
        position: absolute;
        inset: auto -110px -110px auto;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(94, 234, 212, 0.11);
        filter: blur(20px);
      }

      .auditLabel {
        color: var(--mint);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
      }

      .heroCard h2 {
        margin: 18px 0 20px;
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -0.04em;
        color: #f7f8fc;
      }

      .auditScore {
        display: flex;
        align-items: end;
        gap: 14px;
        margin: 28px 0 24px;
      }

      .auditScore strong {
        color: var(--lime);
        font-size: 64px;
        line-height: 0.9;
      }

      .auditScore span {
        color: var(--muted);
        font-size: 13px;
      }

      .metricGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .metric {
        padding: 14px;
        border: 1px solid #252d39;
        border-radius: 14px;
        background: #121823;
      }

      .metric small {
        display: block;
        margin-bottom: 6px;
        color: #8994a6;
      }
      .metric strong {
        font-size: 15px;
        color: #f7f8fc;
      }

      .section {
        padding: 100px 0;
        border-top: 1px solid rgba(187, 199, 216, 0.48);
      }

      [data-theme="dark"] .section {
        border-top-color: rgba(255, 255, 255, 0.05);
      }

      .sectionHead {
        max-width: 820px;
        margin-bottom: 40px;
      }

      .sectionHead h2 {
        margin: 0 0 14px;
        font-size: clamp(38px, 5vw, 58px);
        line-height: 1.02;
        letter-spacing: -0.035em;
      }

      .sectionHead p {
        margin: 0;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.7;
      }

      .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }

      .card {
        padding: 30px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: linear-gradient(180deg, var(--surface), var(--surface-2));
        box-shadow: 0 12px 32px rgba(31, 41, 63, 0.07);
      }

      .serviceNum {
        margin-bottom: 34px;
        color: var(--muted-2);
        font-size: 12px;
        font-weight: 800;
      }

      .card h3 {
        margin: 0 0 14px;
        font-size: 24px;
        letter-spacing: -0.03em;
      }

      .card p {
        color: var(--muted);
        line-height: 1.7;
      }

      .linkAccent {
        display: inline-block;
        margin-top: 26px;
        color: var(--link);
        font-weight: 800;
        font-size: 14px;
      }

      .step {
        min-height: 260px;
      }

      .stepNum {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        margin-bottom: 28px;
        border-radius: 14px;
        background: var(--accent);
        color: #f8fbff;
        font-weight: 900;
      }

      .pricing .featured {
        background:
          linear-gradient(
            180deg,
            rgba(109, 94, 248, 0.09),
            rgba(18, 199, 178, 0.09)
          ),
          var(--surface);
        border-color: var(--border-strong);
        transform: translateY(-10px);
      }

      .tag {
        display: inline-flex;
        margin-bottom: 16px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #102033;
        color: var(--lime);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .price {
        color: var(--text) !important;
        font-size: 30px;
        font-weight: 800;
      }

      .checklist,
      .bullets {
        padding-left: 18px;
        color: var(--muted);
        line-height: 1.85;
      }

.workGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.workCard {
  min-height: 430px;
}

      .workLabel {
        color: var(--mint);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
      }

.workVisual {
  margin-top: 24px;
  min-height: 210px;
  aspect-ratio: 16 / 8;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(18, 199, 178, 0.1), transparent 35%),
    linear-gradient(180deg, var(--surface-2), var(--surface-3));
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.workVisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.workVisualButton {
  position: relative;
  width: 100%;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

.workVisualButton img {
  transition: transform 0.28s ease, filter 0.28s ease;
}

.workVisualButton span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.78);
  color: #f7f8fc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.workVisualButton:hover img,
.workVisualButton:focus-visible img {
  transform: scale(1.025);
  filter: brightness(0.92);
}

.caseModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.caseModal[hidden] {
  display: none;
}

.caseModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, 0.82);
  backdrop-filter: blur(10px);
}

.caseModalPanel {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  border: 1px solid #29303c;
  border-radius: 24px;
  background: #0d1118;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.caseModalPanel img {
  width: 100%;
  height: auto;
  background: #111722;
}

.caseModalBody {
  padding: 24px;
}

.caseModalBody h3 {
  margin: 8px 0 10px;
  color: #f7f8fc;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.caseModalBody p:not(.workLabel) {
  margin: 0;
  color: #aab4c5;
  line-height: 1.7;
}

.caseModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(7, 9, 13, 0.82);
  color: #f7f8fc;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.caseModalNav {
  position: absolute;
  top: min(38vw, 360px);
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(7, 9, 13, 0.82);
  color: #f7f8fc;
  cursor: pointer;
  font-size: 40px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.caseModalNav:hover {
  background: rgba(16, 32, 51, 0.92);
  transform: translateY(-50%) scale(1.04);
}

.caseModalPrev {
  left: 14px;
}

.caseModalNext {
  right: 14px;
}

.contactBox {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 34px;
        padding: 46px;
        border: 1px solid var(--border-strong);
        border-radius: 30px;
        background: linear-gradient(180deg, var(--surface), var(--surface-2));
        box-shadow: var(--shadow);
      }

      .contactBox h2 {
        margin: 0 0 18px;
        font-size: clamp(38px, 5vw, 56px);
        line-height: 1;
        letter-spacing: -0.035em;
      }

.contactBox p {
  color: var(--muted);
  line-height: 1.7;
}

.contactBox .pill {
  color: #f8fbff;
}

.contactMeta {
  margin-top: 26px;
}

      .form {
        display: grid;
        gap: 18px;
        background: var(--surface);
      }

      .form label {
        display: grid;
        gap: 8px;
        color: var(--text);
        font-size: 13px;
      }

      .form input,
      .form textarea {
        width: 100%;
        border: 1px solid var(--border-strong);
        border-radius: 13px;
        background: #fff;
        color: var(--text);
        padding: 14px 15px;
        outline: none;
      }

      [data-theme="dark"] .form input,
      [data-theme="dark"] .form textarea {
        background: #090d13;
        color: #fff;
      }

.form input:focus,
.form textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.08);
}

.hpField {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formStatus {
  min-height: 18px;
  margin: 0;
}

.formStatusSuccess {
  color: #12c7b2;
}

.formStatusError {
  color: #ff8d8d;
}

.tiny {
  font-size: 12px;
  color: var(--muted-2);
}
      .center {
        text-align: center;
      }

      .footer {
        padding: 30px 0 44px;
        border-top: 1px solid rgba(187, 199, 216, 0.58);
        color: var(--muted);
      }

      [data-theme="dark"] .footer {
        border-top-color: rgba(255, 255, 255, 0.06);
      }

      .footerRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      .footerLinks {
        display: flex;
        gap: 18px;
      }

      @media (max-width: 980px) {
        .menu {
          display: none;
        }
        .burger {
          display: block;
        }
        .mobileMenu:not([hidden]) {
          display: grid;
          gap: 8px;
          padding: 0 0 18px;
        }
        .mobileMenu a:not(.btn),
        .mobileMenu button {
          min-height: 48px;
        }
        .mobileMenu a:not(.btn) {
          display: flex;
          align-items: center;
          border-bottom: 1px solid var(--border);
          color: var(--text);
          font-weight: 700;
        }
        .mobileMenu .btn {
          margin-top: 4px;
        }
        .heroGrid,
        .contactBox {
          grid-template-columns: 1fr;
        }
        .grid3 {
          grid-template-columns: 1fr;
        }
        .workGrid {
          grid-template-columns: 1fr;
        }
        .pricing .featured {
          transform: none;
        }
      }

      @media (max-width: 640px) {
        .container {
          width: min(calc(100% - 28px), var(--max));
        }
        .hero {
          padding-top: 56px;
        }
        .hero h1 {
          font-size: clamp(42px, 13vw, 54px);
        }
        .metricGrid {
          grid-template-columns: 1fr;
        }
        .contactBox {
          padding: 24px;
        }
        .ctaRow {
          flex-direction: column;
        }
        .ctaRow .btn {
          width: 100%;
        }
        .footerRow {
          flex-direction: column;
          align-items: flex-start;
        }
        .caseModalNav {
          width: 44px;
          height: 44px;
          border-radius: 13px;
          font-size: 32px;
        }
      }