/* ── Root tokens ─────────────────────────────────── */
    :root {
      --bg:        #edeef0;
      --surface:   #f5f6f8;
      --border:    #d0d3d8;
      --text:      #1a1a1a;
      --muted:     #6b7280;
      --accent:    #111;
      --pill-bg:   #ffffff;
      --pill-shadow: 0 1px 4px rgba(0,0,0,.08);
      --card-shadow: 0 2px 20px rgba(0,0,0,.07);
    }

    body {
      background: var(--bg);
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      min-height: 100vh;
    }

    /* ── Navbar ──────────────────────────────────────── */
    .site-nav {
      background: var(--bg);
      padding: 1.1rem 2rem;
      border-bottom: none;
    }

    .brand-logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.5px;
      color: var(--text) !important;
      line-height: 1.15;
    }
    .brand-sub {
      font-size: .68rem;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .03em;
      display: block;
      text-align: center;
    }

    /* circular brand wrapper */
    .brand-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
    }

    /* nav pills */
    .nav-pill {
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: .35rem 1.1rem;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text);
      background: var(--pill-bg);
      box-shadow: var(--pill-shadow);
      text-decoration: none;
      transition: background .18s, color .18s, box-shadow .18s;
      white-space: nowrap;
    }
    .nav-pill:hover,
    .nav-pill.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }

    /* social pills */
    .social-pill {
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: .3rem .85rem;
      font-size: .76rem;
      font-weight: 500;
      color: var(--text);
      background: var(--pill-bg);
      box-shadow: var(--pill-shadow);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      transition: background .18s, color .18s;
    }
    .social-pill:hover { background: #f0f0f0; color: var(--text); }

    .social-pill img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }

    /* ── About Card ──────────────────────────────────── */
    .about-card {
      background: var(--surface);
      border-radius: 20px;
      border: 1px solid var(--border);
      box-shadow: var(--card-shadow);
      padding: 3rem 2.5rem 2.5rem;
    }

    .profile-img-wrap {
      width: 112px;
      height: 112px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--border);
      background: #ccc;
      margin: 0 auto 1.4rem;
    }
    .profile-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1);
    }

    .role-badge {
      font-size: .88rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: .5rem;
    }

    .tagline {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 1.2rem;
    }

    .quote-text {
      font-style: italic;
      font-size: .88rem;
      color: var(--muted);
      max-width: 680px;
      line-height: 1.7;
      margin: 0 auto 1.8rem;
    }

    .spec-block {
      font-size: .875rem;
      color: var(--text);
      line-height: 1.75;
      max-width: 740px;
      margin: 0 auto .6rem;
    }
    .spec-block strong { font-weight: 600; }

    /* ── CTA Button ──────────────────────────────────── */
    .btn-case-studies {
      border: 1.5px solid var(--accent);
      border-radius: 50px;
      padding: .65rem 2.1rem;
      font-size: .9rem;
      font-weight: 500;
      color: var(--text);
      background: transparent;
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      transition: background .2s, color .2s;
      text-decoration: none;
    }
    .btn-case-studies:hover {
      background: var(--accent);
      color: #fff;
    }
    .btn-case-studies .arrow {
      font-size: 1rem;
      transition: transform .2s;
    }
    .btn-case-studies:hover .arrow { transform: translateX(4px); }

    /* ── Projects wrapper ──────────────────────────── */
    .projects-wrapper {
      background: var(--surface);
      border-radius: 20px;
      border: 1px solid var(--border);
      box-shadow: var(--card-shadow);
      padding: 2rem 2rem 2.5rem;
    }

    /* hero icon */
    .hero-icon {
      width: 56px; height: 56px;
      margin: 0 auto 1.8rem;
      display: flex; align-items: center; justify-content: center;
    }

    /* ── Project card ──────────────────────────────── */
    .project-card {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #fff;
      transition: transform .22s, box-shadow .22s;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .project-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 28px rgba(0,0,0,.13);
      color: inherit;
    }

    /* thumbnail area */
    .project-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
    }

    /* gradient background matching the purple/blue tones in the mockups */
    .project-thumb .thumb-bg {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #5b6fa6 0%, #6a4caf 45%, #7b3fa8 100%);
    }

    /* first card has a different gradient (the illustrated onboarding card) */
    .project-thumb.thumb-onboarding .thumb-bg {
      background: linear-gradient(135deg, #3a4f85 0%, #5a3d8c 40%, #7b5ea7 100%);
    }

    /* text overlay on the thumbnail */
    .thumb-label {
      position: absolute;
      left: 1.1rem; bottom: 1.1rem;
      color: #fff;
      font-size: .88rem;
      line-height: 1.45;
      z-index: 2;
    }
    .thumb-label strong { font-weight: 700; font-size: 1rem; }

    /* inline phone mockup SVG */
    .phone-mockup {
      position: absolute;
      right: -4px; top: 50%;
      transform: translateY(-50%);
      width: 48%;
      z-index: 2;
    }

    /* person illustration (first card) */
    .thumb-illustration {
      position: absolute;
      right: 0; bottom: 0;
      width: 55%;
      z-index: 2;
      opacity: .9;
    }

    /* card caption */
    .project-caption {
      padding: .85rem 1rem .95rem;
    }
    .project-caption .proj-title {
      font-size: .85rem; font-weight: 700;
      margin-bottom: .18rem; color: var(--text);
    }
    .project-caption .proj-desc {
      font-size: .78rem; color: var(--muted);
      margin: 0; line-height: 1.5;
    }
    /* ── Skills wrapper ───────────────────────────── */
    .skills-wrapper {
      background: var(--surface);
      border-radius: 20px;
      border: 1px solid var(--border);
      box-shadow: var(--card-shadow);
      padding: 2rem 2rem 2.5rem;
    }

    /* hero icon */
    .hero-icon {
      width: 72px; height: 72px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.8rem;
    }
    .hero-icon svg { width: 64px; height: 64px; }

    /* ── Top feature cards ────────────────────────── */
    .feature-card {
      display: flex; align-items: flex-start; gap: .9rem;
    }
    .feature-icon {
      width: 52px; height: 52px; min-width: 52px;
      border-radius: 10px;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
    }
    .feature-icon svg { width: 26px; height: 26px; fill: #fff; }

    .feature-title {
      font-size: .92rem; font-weight: 600;
      margin-bottom: .2rem; color: var(--text);
    }
    .feature-desc {
      font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0;
    }

    /* ── Grid cards ───────────────────────────────── */
    .skill-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.4rem 1.5rem;
      background: #fff;
      height: 100%;
    }
    .skill-card-title {
      font-size: .82rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text); margin-bottom: 1rem;
    }
    .skill-card p {
      font-size: .82rem; color: var(--text);
      line-height: 1.7; margin-bottom: .4rem;
    }
    .skill-card p:last-child { margin-bottom: 0; }

    .skill-card a {
      color: var(--text); font-size: .82rem;
      text-decoration: underline; display: block; margin-bottom: .4rem;
    }
    .skill-card a:hover { color: var(--accent-dark); }

    /* section divider */
    .skills-divider { border-color: var(--border); margin: 1.5rem 0; }