/* ── TOKENS ── */
  :root {
      --navy: #08233B;
      --navy-mid: #0B2D4E;
      --navy-light: #10395F;
      --teal: #00C9A7;
      --teal-dim: #00a98c;
      --teal-pale: #e6faf6;
      --sky: #4DA8DA;
      --amber: #F4A83A;
      --white: #ffffff;
      --off: #F7F9FB;
      --sl100: #EEF2F6;
      --sl200: #D9E3EC;
      --sl400: #8FA3B4;
      --sl600: #4A6074;
      --text: #0F2130;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
  }

  html {
      scroll-behavior: smooth
  }

  body {
      font-family: 'DM Sans', sans-serif;
      background: var(--navy);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
  }

  /* ════════════════════════════════
   NAV
════════════════════════════════ */
  nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      height: 68px;
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;


      background: rgba(255, 255, 255, 0.2);

      /* The frosted blur effect */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 6px;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  }

  .nav-logo {
      font-family: 'DM Serif Display', serif;
      font-size: 1.35rem;
      color: var(--white);
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      flex-shrink: 0;
  }

  .nav-logo img {
      height: auto;
      width: 150px;
      object-fit: contain;
  }

  @keyframes throb {

      0%,
      100% {
          opacity: 1;
          transform: scale(1)
      }

      50% {
          opacity: .6;
          transform: scale(.8)
      }
  }

  /* Desktop links */
  .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center
  }

  .nav-links a {
      /* color: rgba(255, 255, 255, .6); */
      color: black;
      font-size: .85rem;
      font-weight: 500;
      text-decoration: none;
      letter-spacing: .04em;
      text-transform: uppercase;
      transition: color .2s;
  }

  .nav-cta {
      background: var(--teal);
      color: var(--navy) !important;
      padding: .75rem 1.25rem;
      border-radius: 6px;
      font-weight: 700 !important;
      font-size: .78rem !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
      transition: background .2s, transform .2s;
      white-space: nowrap;
  }

  .nav-cta:hover {
      background: #00ddb8 !important;
      transform: translateY(-1px)
  }

  /* Hamburger button */
  .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-color: rgba(17, 16, 16, 0.54) !important;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      padding: 8px;
      flex-shrink: 0;
      transition: background .2s;
  }

  .hamburger:active {
      background-color: rgba(17, 16, 16, 0.54) !important;
  }

  .hamburger span {
      display: block;
      height: 2px;
      background: var(--white) !important;
      border-radius: 2px;
      transition: transform .35s cubic-bezier(.23, 1, .32, 1), opacity .25s;
      transform-origin: center;
  }

  .hamburger span:active {
      background-color: #ffffff;
  }

  .hamburger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
  }

  .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0)
  }

  .hamburger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
  }

  /* Mobile drawer */
  .mobile-menu {
      position: fixed;
      top: 68px;
      left: 0;
      right: 0;
      z-index: 999;
      background: rgba(8, 35, 59, .98) !important;
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      padding: 0 5%;
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(.23, 1, .32, 1), padding .4s;
  }

  .mobile-menu.open {
      max-height: 420px;
      padding: 1.5rem 5% 2rem;
  }

  .mobile-menu a {
      display: block;
      color: rgba(255, 255, 255, .7);
      font-size: 1rem;
      font-weight: 500;
      text-decoration: none;
      letter-spacing: .03em;
      padding: .9rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      transition: color .2s, padding-left .2s;
      text-align: center;
  }

  .mobile-menu a:hover {
      color: var(--teal);
      padding-left: .5rem
  }

  .mobile-menu a:last-child {
      border: none
  }

  .mobile-cta-wrap {
      margin-top: 1.25rem
  }

  .mobile-cta-wrap a {
      display: block;
      text-align: center;
      background: var(--teal);
      color: var(--navy) !important;
      padding: .875rem;
      border-radius: 8px;
      font-weight: 700;
      font-size: .875rem;
      letter-spacing: .04em;
      border: none !important;
      text-decoration: none;
      transition: background .2s;
  }

  .mobile-cta-wrap a:hover {
      background: #00ddb8;
      padding-left: 0 !important
  }

  /* ════════════════════════════════
   HERO
════════════════════════════════ */
  .hero {
      min-height: 100vh;
      background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 55%, #0d3a5c 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 100px 5% 60px;
  }

  .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(0, 201, 167, .04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 201, 167, .04) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
  }

  .hero-glow {
      position: absolute;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 201, 167, .12) 0%, transparent 65%);
      top: -100px;
      right: -100px;
      pointer-events: none;
  }

  .hero-glow2 {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(77, 168, 218, .1) 0%, transparent 60%);
      bottom: 0;
      left: 20%;
      pointer-events: none;
  }

  .hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
  }

  .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: rgba(0, 201, 167, .1);
      border: 1px solid rgba(0, 201, 167, .25);
      padding: .4rem 1rem;
      border-radius: 100px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .12em;
      color: var(--teal);
      text-transform: uppercase;
      margin-bottom: 1.75rem;
  }

  .hero-eyebrow span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 8px var(--teal);
      animation: throb 2.5s infinite;
      flex-shrink: 0
  }

  .hero h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(2.2rem, 4.5vw, 4rem);
      line-height: 1.08;
      color: var(--white);
      margin-bottom: 1.5rem;
      letter-spacing: -.02em;
  }

  .hero h1 em {
      font-style: italic;
      color: var(--teal)
  }

  .hero-sub {
      font-size: 1rem;
      color: rgba(255, 255, 255, .65);
      line-height: 1.75;
      max-width: 480px;
      margin-bottom: 2.5rem;
      font-weight: 400;
  }

  .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center
  }

  .btn-primary {
      background: var(--teal);
      color: var(--navy);
      padding: .875rem 2rem;
      border-radius: 8px;
      font-weight: 700;
      font-size: .875rem;
      letter-spacing: .04em;
      text-decoration: none;
      transition: all .2s;
      box-shadow: 0 4px 24px rgba(0, 201, 167, .35);
      white-space: nowrap;
  }

  .btn-primary:hover {
      background: #00ddb8;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0, 201, 167, .45)
  }

  .btn-ghost {
      color: var(--white);
      padding: .875rem 2rem;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 8px;
      font-weight: 600;
      font-size: .875rem;
      text-decoration: none;
      transition: all .2s;
      white-space: nowrap;
  }

  .btn-ghost:hover {
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .06)
  }

  /* Revenue Pulse Card */
  .pulse-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(0, 201, 167, .2);
      border-radius: 20px;
      padding: 2rem;
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
  }

  .pulse-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--teal), transparent);
  }

  .pulse-label {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: .5rem;
  }

  .pulse-label::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 8px var(--teal);
      animation: throb 1.5s infinite;
      flex-shrink: 0
  }

  .big-num {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(3rem, 6vw, 4.5rem);
      color: var(--white);
      line-height: 1;
      letter-spacing: -.03em;
      margin-bottom: .25rem;
  }

  .big-num .pct {
      font-size: 2.2rem;
      color: var(--teal)
  }

  .big-num-label {
      font-size: .8rem;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 1.5rem
  }

  .prog-bar-wrap {
      background: rgba(255, 255, 255, .08);
      border-radius: 100px;
      height: 6px;
      overflow: hidden;
      margin-bottom: 1.5rem
  }

  .prog-bar-fill {
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--teal), var(--sky));
      transition: width 2s cubic-bezier(.23, 1, .32, 1)
  }

  .metric-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem
  }

  .metric-item {
      background: rgba(255, 255, 255, .04);
      border-radius: 12px;
      padding: .875rem;
      border: 1px solid rgba(255, 255, 255, .06);
  }

  .metric-val {
      font-family: 'DM Mono', monospace;
      font-size: 1.25rem;
      color: var(--white);
      font-weight: 500;
      margin-bottom: .2rem
  }

  .metric-key {
      font-size: .68rem;
      color: rgba(255, 255, 255, .45);
      letter-spacing: .06em;
      text-transform: uppercase
  }

  .metric-trend {
      font-size: .68rem;
      color: var(--teal);
      font-weight: 600;
      margin-top: .15rem
  }

  .mini-chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 32px;
      margin-top: 1.25rem
  }

  .bar {
      flex: 1;
      background: rgba(0, 201, 167, .22);
      border-radius: 3px 3px 0 0;
      transition: background .2s
  }

  .bar:hover {
      background: rgba(0, 201, 167, .55)
  }

  .bar.hi {
      background: rgba(0, 201, 167, .5)
  }

  .chart-label {
      font-size: .6rem;
      color: rgba(255, 255, 255, .25);
      margin-top: .4rem;
      font-family: 'DM Mono', monospace
  }

  /* ════════════════════════════════
   STATS BAR
════════════════════════════════ */
  .stats-bar {
      background: var(--navy);
      padding: 2.5rem 5%;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
  }

  .stats-bar-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-left: 1px solid rgba(255, 255, 255, .07);
  }

  .stat-cell {
      padding: 0 2rem;
      border-right: 1px solid rgba(255, 255, 255, .07)
  }

  .stat-big {
      font-family: 'DM Serif Display', serif;
      font-size: 2.5rem;
      color: var(--white);
      line-height: 1;
      margin-bottom: .35rem
  }

  .stat-big b {
      color: var(--teal)
  }

  .stat-key {
      font-size: .72rem;
      color: var(--sl400);
      letter-spacing: .06em;
      text-transform: uppercase
  }

  /* ════════════════════════════════
   SHARED SECTION STRUCTURE
════════════════════════════════ */
  .section-wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 5%
  }

  .section-tag {
      display: inline-block;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1rem
  }

  .section-h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.75rem, 3.2vw, 2.75rem);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: var(--text);
      margin-bottom: 1.25rem;
  }

  .section-h2 em {
      font-style: italic;
      color: var(--navy-mid)
  }

  .section-sub {
      color: var(--sl600);
      max-width: 580px;
      line-height: 1.75;
      font-size: 1rem
  }

  /* ════════════════════════════════
   ABOUT 2-COL
════════════════════════════════ */
  .about-sect {
      padding: 100px 0;
      background: var(--white)
  }

  .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center
  }

  .checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .75rem
  }

  .checklist li {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      font-size: .875rem;
      color: var(--sl600);
  }

  .checklist-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--teal-pale);
      color: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .6rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: .1rem;
  }

  .perf-panel {
      background: var(--off);
      border-radius: 20px;
      padding: 2rem;
      border: 1px solid var(--sl100)
  }

  .perf-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sl400);
      margin-bottom: 1.5rem
  }

  .kpi-row {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      margin-top: .5rem
  }

  .kpi-label-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: .3rem
  }

  .kpi-l {
      font-size: .75rem;
      color: var(--sl600)
  }

  .kpi-v {
      font-size: .75rem;
      color: var(--navy);
      font-family: 'DM Mono', monospace
  }

  .kpi-track {
      height: 4px;
      background: var(--sl200);
      border-radius: 100px;
      overflow: hidden
  }

  .kpi-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--teal), var(--sky));
      transition: width 2s cubic-bezier(.23, 1, .32, 1);
      width: 0
  }

  .perf-note {
      font-size: .7rem;
      color: var(--sl400);
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--sl100)
  }

  /* ════════════════════════════════
   SERVICES
════════════════════════════════ */
  .services-sect {
      padding: 100px 0;
      background: var(--off)
  }

  .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 4rem
  }

  .svc-card {
      background: var(--white);
      border-radius: 16px;
      padding: 1.75rem;
      border: 1px solid var(--sl100);
      transition: transform .3s, box-shadow .3s, border-color .3s;
      position: relative;
      overflow: hidden;
  }

  .svc-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--teal), var(--sky));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s;
  }

  .svc-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .07);
      border-color: var(--sl200)
  }

  .svc-card:hover::after {
      transform: scaleX(1)
  }

  .svc-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: var(--teal-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 1.1rem;
  }

  .svc-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.15rem;
      color: var(--text);
      margin-bottom: .5rem;
      letter-spacing: -.01em
  }

  .svc-card p {
      font-size: .82rem;
      color: var(--sl600);
      line-height: 1.7
  }

  /* ════════════════════════════════
   SPECIALTIES
════════════════════════════════ */
  .spec-sect {
      padding: 80px 0;
      background: var(--white)
  }

  .spec-pills {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      margin-top: 2.5rem
  }

  .spec-pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .55rem 1.1rem;
      border-radius: 100px;
      background: var(--sl100);
      border: 1px solid var(--sl200);
      font-size: .8rem;
      font-weight: 600;
      color: var(--sl600);
      transition: all .2s;
      cursor: pointer;
      text-decoration: none;
  }

  .spec-pill:hover {
      background: var(--teal-pale);
      border-color: rgba(0, 201, 167, .35);
      color: var(--navy)
  }

  .spec-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--teal);
      flex-shrink: 0
  }

  /* ════════════════════════════════
   BENTO FEATURES
════════════════════════════════ */
  .features-sect {
      padding: 100px 0;
      background: var(--navy)
  }

  .bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: auto;
      gap: 1.1rem;
      margin-top: 4rem;
  }

  .bento-card {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 16px;
      padding: 1.75rem;
      transition: background .3s, border-color .3s;
  }

  .bento-card:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(0, 201, 167, .2)
  }

  .bento-a {
      grid-column: 1/7
  }

  .bento-b {
      grid-column: 7/13
  }

  .bento-c {
      grid-column: 1/5
  }

  .bento-d {
      grid-column: 5/9
  }

  .bento-e {
      grid-column: 9/13
  }

  .bento-f {
      grid-column: 1/13;
      background: rgba(0, 201, 167, .06);
      border-color: rgba(0, 201, 167, .18)
  }

  .bento-tag {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 1rem
  }

  .bento-card h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.2rem;
      color: var(--white);
      margin-bottom: .7rem;
      letter-spacing: -.01em
  }

  .bento-card p {
      font-size: .82rem;
      color: rgba(255, 255, 255, .5);
      line-height: 1.75
  }

  .bento-card ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-top: .75rem
  }

  .bento-card ul li {
      font-size: .8rem;
      color: rgba(255, 255, 255, .55);
      display: flex;
      align-items: flex-start;
      gap: .5rem
  }

  .bento-card ul li::before {
      content: '→';
      color: var(--teal);
      flex-shrink: 0;
      font-size: .75rem;
      margin-top: .1rem
  }

  .bento-icon-lg {
      font-size: 2.25rem;
      margin-bottom: 1rem
  }

  .bk-row {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      margin-top: 1rem
  }

  .bk-item .bk-label-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: .3rem
  }

  .bk-l {
      font-size: .72rem;
      color: rgba(255, 255, 255, .5)
  }

  .bk-v {
      font-size: .72rem;
      color: var(--teal);
      font-family: 'DM Mono', monospace
  }

  .bk-track {
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 100px;
      overflow: hidden
  }

  .bk-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--teal), var(--sky));
      transition: width 2s cubic-bezier(.23, 1, .32, 1);
      width: 0
  }

  .bundle-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: .75rem;
      margin-top: 1.25rem
  }

  .bundle-item {
      background: rgba(255, 255, 255, .04);
      border-radius: 10px;
      padding: .875rem .5rem;
      border: 1px solid rgba(255, 255, 255, .07);
      text-align: center;
  }

  .bundle-emoji {
      font-size: 1.35rem;
      margin-bottom: .35rem
  }

  .bundle-label {
      font-size: .65rem;
      color: rgba(255, 255, 255, .55);
      font-weight: 600;
      line-height: 1.3
  }

  /* ════════════════════════════════
   PROCESS
════════════════════════════════ */
  .process-sect {
      padding: 100px 0;
      background: var(--off)
  }

  .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 4rem;
      position: relative;
  }

  .process-steps::before {
      content: '';
      position: absolute;
      top: 27px;
      left: calc(12.5%);
      right: calc(12.5%);
      height: 1px;
      background: linear-gradient(90deg, var(--teal), var(--sky), var(--teal));
      opacity: .22;
  }

  .step {
      padding: 0 1.1rem;
      text-align: center
  }

  .step-num {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--white);
      border: 2px solid var(--sl200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Mono', monospace;
      font-size: .95rem;
      font-weight: 500;
      color: var(--navy);
      margin: 0 auto 1.4rem;
      position: relative;
      z-index: 2;
      transition: all .3s;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  }

  .step:hover .step-num {
      background: var(--navy);
      color: var(--teal);
      border-color: var(--navy)
  }

  .step h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1rem;
      color: var(--text);
      margin-bottom: .55rem
  }

  .step p {
      font-size: .78rem;
      color: var(--sl600);
      line-height: 1.7
  }

  /* ════════════════════════════════
   AUDIT CTA
════════════════════════════════ */
  .audit-sect {
      padding: 80px 0;
      background: var(--white)
  }

  .audit-card {
      max-width: 1100px;
      margin: 0 auto;
      border-radius: 24px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: linear-gradient(130deg, var(--navy) 0%, var(--navy-light) 100%);
      position: relative;
  }

  .audit-card::before {
      content: '';
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 201, 167, .12), transparent 65%);
      top: -100px;
      right: -50px;
      pointer-events: none;
  }

  .audit-left {
      padding: 3rem;
      position: relative;
      z-index: 2
  }

  .audit-left h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 1rem;
      letter-spacing: -.02em;
  }

  .audit-left h2 em {
      color: var(--teal);
      font-style: italic
  }

  .audit-left p {
      font-size: .875rem;
      color: rgba(255, 255, 255, .6);
      line-height: 1.75;
      margin-bottom: 1.75rem
  }

  .audit-checklist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin-bottom: 1.75rem
  }

  .audit-checklist li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .8rem;
      color: rgba(255, 255, 255, .7);
  }

  .audit-checklist li::before {
      content: '✓';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0, 201, 167, .15);
      color: var(--teal);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .6rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: .1rem;
  }

  .audit-hipaa {
      font-size: .75rem;
      color: rgba(255, 255, 255, .35);
      display: flex;
      align-items: center;
      gap: .5rem
  }

  .audit-right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2
  }

  .form-group {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-bottom: .875rem
  }

  .form-group label {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5)
  }

  .form-group input,
  .form-group select {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      padding: .7rem 1rem;
      color: var(--white);
      font-size: .875rem;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: border-color .2s;
      -webkit-appearance: none;
  }

  .form-group input:focus,
  .form-group select:focus {
      border-color: var(--teal)
  }

  .form-group input::placeholder {
      color: rgba(255, 255, 255, .3)
  }

  .form-group select option {
      background: var(--navy);
      color: var(--white)
  }

  .form-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .875rem
  }

  .audit-submit {
      width: 100%;
      padding: .875rem;
      border-radius: 8px;
      background: var(--teal);
      color: var(--navy);
      font-weight: 700;
      font-size: .875rem;
      letter-spacing: .04em;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: all .2s;
      margin-top: .5rem;
      box-shadow: 0 4px 20px rgba(0, 201, 167, .35);
  }

  .audit-submit:hover {
      background: #00ddb8;
      transform: translateY(-1px)
  }

  /* ════════════════════════════════
   TESTIMONIALS
════════════════════════════════ */
  .testi-sect {
      padding: 100px 0;
      background: var(--off)
  }

  .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 4rem
  }

  .testi-card {
      background: var(--white);
      border-radius: 16px;
      padding: 1.75rem;
      border: 1px solid var(--sl100);
      transition: box-shadow .3s, border-color .3s;
  }

  .testi-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, .07);
      border-color: var(--sl200)
  }

  .testi-quote {
      font-family: 'DM Serif Display', serif;
      font-size: 2rem;
      color: var(--teal);
      opacity: .4;
      line-height: 1;
      margin-bottom: .75rem
  }

  .testi-text {
      font-size: .85rem;
      color: var(--sl600);
      line-height: 1.75;
      margin-bottom: 1.25rem;
      font-style: italic
  }

  .testi-author {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding-top: 1rem;
      border-top: 1px solid var(--sl100)
  }

  .testi-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--navy), var(--sky));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Serif Display', serif;
      font-size: .85rem;
      color: var(--white);
      flex-shrink: 0;
  }

  .testi-name {
      font-weight: 700;
      font-size: .8rem;
      color: var(--text)
  }

  .testi-role {
      font-size: .7rem;
      color: var(--sl400)
  }

  /* ════════════════════════════════
   AWARDS
════════════════════════════════ */
  .awards-sect {
      padding: 60px 0;
      background: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, .06)
  }

  .awards-label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .3);
      text-align: center;
      margin-bottom: 2rem
  }

  .awards-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 2.5rem
  }

  .award-item {
      text-align: center
  }

  .award-badge {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin: 0 auto .45rem;
  }

  .award-text {
      font-size: .65rem;
      color: rgba(255, 255, 255, .4);
      max-width: 76px;
      line-height: 1.4
  }

  /* ════════════════════════════════
   FOOTER
════════════════════════════════ */
  footer {
      background: var(--navy);
      border-top: 1px solid rgba(255, 255, 255, .07);
      padding: 3rem 5% 2rem
  }

  .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 2rem;
  }

  .footer-logo {
      font-family: 'DM Serif Display', serif;
      font-size: 1.2rem;
      color: var(--white);
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: .75rem
  }

  .footer-tagline {
      font-size: .78rem;
      color: rgba(255, 255, 255, .35);
      max-width: 220px;
      line-height: 1.5
  }

  .footer-col h4 {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 1rem
  }

  .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .6rem
  }

  .footer-col ul a {
      font-size: .8rem;
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      transition: color .2s
  }

  .footer-col ul a:hover {
      color: var(--white)
  }

  .footer-copy {
      max-width: 1280px;
      margin: 2rem auto 0;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, .06);
      font-size: .72rem;
      color: rgba(255, 255, 255, .2);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .75rem;
  }

  /* ════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════ */
  .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s, transform .7s
  }

  .reveal.in {
      opacity: 1;
      transform: translateY(0)
  }

  .reveal-d1 {
      transition-delay: .1s
  }

  .reveal-d2 {
      transition-delay: .2s
  }

  .reveal-d3 {
      transition-delay: .3s
  }

  /* ════════════════════════════════
   RESPONSIVE — 1024px
════════════════════════════════ */
  @media(max-width:1024px) {
      .hero-inner {
          grid-template-columns: 1fr;
          gap: 3rem
      }

      .hero-sub {
          max-width: 100%
      }

      .about-grid {
          grid-template-columns: 1fr;
          gap: 3rem
      }

      .services-grid {
          grid-template-columns: repeat(2, 1fr)
      }

      .bento {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto
      }

      .bento-a,
      .bento-b,
      .bento-c,
      .bento-d,
      .bento-e {
          grid-column: auto
      }

      .bento-f {
          grid-column: 1/3
      }

      .bundle-grid {
          grid-template-columns: repeat(3, 1fr)
      }

      .audit-card {
          grid-template-columns: 1fr
      }

      .process-steps {
          grid-template-columns: repeat(2, 1fr)
      }

      .process-steps::before {
          display: none
      }

      .testi-grid {
          grid-template-columns: 1fr 1fr
      }

      .stats-bar-inner {
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
          border-left: none
      }

      .stat-cell {
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, .07);
          padding: 1rem 0
      }

      .footer-inner {
          gap: 2.5rem
      }
  }

  /* ════════════════════════════════
   RESPONSIVE — 768px (tablet)
════════════════════════════════ */
  @media(max-width:768px) {

      /* Nav */
      .nav-links {
          display: none
      }

      .hamburger {
          display: flex
      }

      /* Hero */
      .hero {
          padding: 90px 5% 60px;
          min-height: auto
      }

      .hero h1 {
          font-size: 2.4rem
      }

      .hero-actions {
          flex-direction: column;
          align-items: stretch
      }

      .btn-primary,
      .btn-ghost {
          text-align: center
      }

      .pulse-card {
          padding: 1.5rem
      }

      .metric-row {
          grid-template-columns: 1fr 1fr
      }

      /* Stats */
      .stats-bar-inner {
          grid-template-columns: 1fr 1fr;
          gap: 0
      }

      .stat-cell {
          padding: 1.25rem;
          border-right: 1px solid rgba(255, 255, 255, .07);
          border-bottom: 1px solid rgba(255, 255, 255, .07)
      }

      .stat-cell:nth-child(2n) {
          border-right: none
      }

      .stat-cell:nth-child(3),
      .stat-cell:nth-child(4) {
          border-bottom: none
      }

      /* Services */
      .services-grid {
          grid-template-columns: 1fr
      }

      /* Bento */
      .bento {
          grid-template-columns: 1fr
      }

      .bento-f {
          grid-column: auto
      }

      .bundle-grid {
          grid-template-columns: repeat(3, 1fr)
      }

      /* Process */
      .process-steps {
          grid-template-columns: 1fr 1fr;
          gap: 2rem
      }

      /* Audit */
      .form-2col {
          grid-template-columns: 1fr
      }

      .audit-left,
      .audit-right {
          padding: 2rem
      }

      /* Testimonials */
      .testi-grid {
          grid-template-columns: 1fr
      }

      /* Awards */
      .awards-row {
          gap: 1.75rem
      }

      /* Footer */
      .footer-inner {
          flex-direction: column
      }

      .footer-copy {
          flex-direction: column;
          gap: .5rem
      }
  }

  /* ════════════════════════════════
   RESPONSIVE — 480px (mobile)
════════════════════════════════ */
  @media(max-width:480px) {
      .hero h1 {
          font-size: 2rem
      }

      .hero-eyebrow {
          font-size: .65rem
      }

      .big-num {
          font-size: 3rem
      }

      .metric-row {
          grid-template-columns: 1fr
      }

      .stats-bar-inner {
          grid-template-columns: 1fr
      }

      .stat-cell {
          border-right: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, .07)
      }

      .stat-cell:last-child {
          border-bottom: none
      }

      .services-grid {
          grid-template-columns: 1fr
      }

      .process-steps {
          grid-template-columns: 1fr
      }

      .spec-pills {
          gap: .5rem
      }

      .bundle-grid {
          grid-template-columns: repeat(2, 1fr)
      }

      .bento-f .bento-inner-grid {
          grid-template-columns: 1fr !important;
          gap: 0 !important
      }

      .bento-f .bento-inner-grid>div:first-child {
          margin-bottom: 1.5rem
      }

      .audit-card {
          border-radius: 16px
      }

      .testi-grid {
          grid-template-columns: 1fr
      }

      .awards-row {
          gap: 1.25rem
      }

      nav {
          padding: 0 4%
      }

      .mobile-menu {
          padding-left: 4%;
          padding-right: 4%
      }

      .mobile-menu.open {
          padding-left: 4%;
          padding-right: 4%
      }

      section {
          scroll-margin-top: 68px
      }

      .section-wrap {
          padding: 0 4%
      }

      .about-sect,
      .services-sect,
      .spec-sect,
      .features-sect,
      .process-sect,
      .testi-sect {
          padding: 70px 0
      }
  }

  #result {
      margin-top: 15px;
      font-size: 16px;
      font-weight: 60;
      color: green;
  }