:root {
      --ink: #10131f;
      --muted: rgba(16, 19, 31, .68);
      --white: #fff;
      --line: rgba(255,255,255,.42);
      --glass: rgba(255,255,255,.34);
      --shadow: 0 24px 80px rgba(34, 31, 73, .18);
    }

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

    html { scroll-behavior: smooth; }

    body {
      min-height: 100vh;
      color: var(--ink);
      font-family: "DM Sans", system-ui, sans-serif;
      background:
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.92) 0 8%, transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(105,170,255,.48), transparent 31%),
        radial-gradient(circle at 82% 88%, rgba(79,210,190,.42), transparent 34%),
        linear-gradient(135deg, #dbeafe 0%, #c9ddf7 34%, #d4e8ed 66%, #d8f1ea 100%);
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      width: 34rem;
      height: 34rem;
      border-radius: 50%;
      filter: blur(70px);
      opacity: .28;
      pointer-events: none;
      z-index: 0;
    }

    body::before { background: #3985d8; left: -15rem; bottom: -15rem; }
    body::after { background: #42bda9; right: -13rem; top: -13rem; }

    .page {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      padding: 28px 0 34px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 2px 28px;
    }

    .brand {
      color: var(--ink);
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -.035em;
    }

    .brand span { font-weight: 400; opacity: .62; }

    .nav-pill {
      border: 1px solid rgba(16,19,31,.13);
      background: rgba(255,255,255,.3);
      backdrop-filter: blur(14px);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .hero {
      min-height: 73vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 54px 0 62px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      margin-bottom: 26px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.28);
      backdrop-filter: blur(14px);
      box-shadow: 0 8px 30px rgba(46, 44, 80, .06);
      color: rgba(16,19,31,.72);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #222;
      box-shadow: 0 0 0 5px rgba(34,34,34,.08);
    }

    h1 {
      max-width: 900px;
      margin: 0 auto;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(4rem, 10vw, 8.6rem);
      line-height: .87;
      letter-spacing: -.065em;
      font-weight: 500;
    }

    .hero-copy {
      max-width: 620px;
      margin: 30px auto 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      line-height: 1.75;
    }

    .hero-copy strong { color: var(--ink); font-weight: 600; }

    .cta-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    .btn {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 21px;
      border-radius: 999px;
      text-decoration: none;
      font-size: .9rem;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

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

    .btn-dark {
      color: #fff;
      background: #121520;
      box-shadow: 0 12px 30px rgba(18,21,32,.22);
    }

    .btn-light {
      color: var(--ink);
      border: 1px solid rgba(16,19,31,.13);
      background: rgba(255,255,255,.3);
      backdrop-filter: blur(12px);
    }

    .services {
      padding: 0 0 38px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 17px;
    }

    .section-head h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      letter-spacing: -.045em;
    }

    .section-head p {
      max-width: 380px;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.55;
      text-align: right;
    }

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

    .card {
      min-height: 235px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 25px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 24px;
      background: rgba(255,255,255,.28);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .card::after {
      content: "";
      position: absolute;
      width: 150px; height: 150px;
      border-radius: 50%;
      right: -70px; bottom: -80px;
      background: rgba(255,255,255,.34);
    }

    .card:nth-child(1) { background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(205,229,255,.30)); }
    .card:nth-child(2) { background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(204,224,245,.30)); }
    .card:nth-child(3) { background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(205,241,235,.30)); }

    .card-number {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      opacity: .52;
    }

    .card h3 {
      margin-top: auto;
      margin-bottom: 9px;
      font-size: 1.45rem;
      letter-spacing: -.04em;
    }

    .card p {
      max-width: 300px;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.6;
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 14px;
      padding: 22px 4px 0;
      border-top: 1px solid rgba(16,19,31,.1);
      color: rgba(16,19,31,.55);
      font-size: .75rem;
    }

    .bottom a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 700;
    }

    @media (max-width: 800px) {
      .hero { min-height: auto; padding: 78px 0 76px; }
      .cards { grid-template-columns: 1fr; }
      .card { min-height: 190px; }
      .section-head { align-items: start; flex-direction: column; }
      .section-head p { text-align: left; }
    }

    @media (max-width: 520px) {
      .page { width: min(100% - 26px, 1180px); padding-top: 18px; }
      .nav { padding-bottom: 18px; }
      .nav-pill { padding: 8px 11px; font-size: .65rem; }
      .hero { padding: 66px 0 65px; }
      h1 { font-size: clamp(4rem, 22vw, 6rem); }
      .hero-copy { font-size: .95rem; line-height: 1.65; }
      .cta-row { flex-direction: column; align-items: stretch; }
      .btn { width: 100%; }
      .card { border-radius: 20px; padding: 22px; }
      .bottom { align-items: flex-start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .btn { transition: none; }
    }