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

    body {
      min-height: 100vh;
      background-color: #060d1a;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(30, 80, 180, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(10, 50, 130, 0.10) 0%, transparent 50%),
        radial-gradient(rgba(59, 124, 246, 0.07) 1px, transparent 1px);
      background-size: auto, auto, 28px 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      padding: 24px 16px;
      color: #e8f0ff;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .card {
      background: #0b1d38;
      border: 1px solid rgba(59, 124, 246, 0.22);
      border-radius: 24px;
      padding: 32px 26px 26px;
      width: 100%;
      max-width: 430px;
      position: relative;
      overflow: hidden;
      animation: fadeUp 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .card::before {
      content: '';
      position: absolute;
      top: -100px; left: 50%;
      transform: translateX(-50%);
      width: 320px; height: 200px;
      background: radial-gradient(ellipse, rgba(59, 124, 246, 0.15) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── Header ── */
    .header { text-align: center; margin-bottom: 18px; }

    .ej-badge {
      width: 82px; height: 82px;
      background: linear-gradient(135deg, #0f2a50 0%, #162f5a 100%);
      border: 2px solid #1e5fa8;
      border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
      font-size: 33px; font-weight: 700;
      color: #fff; letter-spacing: 1.5px;
      box-shadow: 0 0 24px rgba(30, 95, 168, 0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    h1 {
      font-size: 21px; font-weight: 700;
      color: #e8f0ff; letter-spacing: -0.4px;
      margin-bottom: 5px;
    }

    .job-title {
      font-size: 11.5px; font-weight: 500;
      color: #5b90cc; letter-spacing: 0.2px;
      line-height: 1.55; margin-bottom: 13px;
    }

    .status-row {
      display: flex; align-items: center;
      justify-content: center; gap: 7px;
      flex-wrap: wrap;
    }

    .pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600;
      padding: 4px 11px; border-radius: 20px;
    }

    .pill-green {
      background: rgba(5, 150, 105, 0.14);
      border: 1px solid rgba(5, 150, 105, 0.38);
      color: #34d399;
    }
    .pill-green .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #34d399;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; } 50% { opacity: 0.4; }
    }

    .pill-amber {
      background: rgba(217, 119, 6, 0.13);
      border: 1px solid rgba(217, 119, 6, 0.36);
      color: #fbbf24;
    }

    .pill-remote {
      background: rgba(99, 102, 241, 0.13);
      border: 1px solid rgba(99, 102, 241, 0.35);
      color: #a5b4fc;
    }

    /* ── Divider ── */
    .div { height: 1px; background: rgba(255,255,255,0.055); margin: 16px 0; }

    /* ── Summary ── */
    .summary {
      background: rgba(59, 124, 246, 0.06);
      border: 1px solid rgba(59, 124, 246, 0.13);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 18px;
      font-size: 13px; color: #7a9ac2;
      line-height: 1.65;
    }

    .summary strong { color: #b8cfe8; font-weight: 500; }

    /* ── Section label ── */
    .sec-label {
      font-size: 10px; font-weight: 600;
      color: #7099c4; text-transform: uppercase;
      letter-spacing: 1.2px; margin-bottom: 9px;
    }

    /* ── Tech Grid ── */
    .tech-grid {
      display: flex; flex-wrap: wrap; gap: 7px;
      margin-bottom: 18px;
    }

    .tech-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 500;
      padding: 5px 10px; border-radius: 8px; border: 1px solid;
      transition: filter 0.12s;
    }
    .tech-pill:hover { filter: brightness(1.15); }
    .tech-pill img { display: block; width: 15px; height: 15px; flex-shrink: 0; }

    .t-cs  { background:rgba(155,79,150,.13); border-color:rgba(155,79,150,.38); color:#c87dca; }
    .t-net { background:rgba(81,43,212,.13);  border-color:rgba(81,43,212,.38);  color:#9b84e8; }
    .t-az  { background:rgba(0,120,212,.13);  border-color:rgba(0,120,212,.38);  color:#5ba8e8; }
    .t-ng  { background:rgba(221,0,49,.13);   border-color:rgba(221,0,49,.38);   color:#f47a8c; }
    .t-vue { background:rgba(65,184,131,.13); border-color:rgba(65,184,131,.38); color:#5fcfa0; }
    .t-ts  { background:rgba(49,120,198,.13); border-color:rgba(49,120,198,.38); color:#6aaee0; }
    .t-py  { background:rgba(55,118,171,.14); border-color:rgba(55,118,171,.42); color:#6fcf97; }
    .t-ai  { background:rgba(16,163,127,.13); border-color:rgba(16,163,127,.4);  color:#9fd4f5; }

    /* ── Location ── */
    .location {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; color: #7099c4; margin-bottom: 16px;
    }

    /* ── Contact list ── */
    .contact-list {
      display: flex; flex-direction: column; gap: 7px;
      margin-bottom: 14px;
    }

    .ci {
      display: flex; align-items: center; gap: 11px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.055);
      border-radius: 13px;
      padding: 11px 13px;
      text-decoration: none; color: inherit;
      transition: background 0.13s, border-color 0.13s, transform 0.08s;
      -webkit-tap-highlight-color: transparent;
    }
    .ci:hover { background: rgba(59,124,246,.09); border-color: rgba(59,124,246,.3); }
    .ci:active { transform: scale(0.98); }

    .ci-icon {
      width: 35px; height: 35px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ic-email { background: rgba(59,124,246,.18); }
    .ic-phone { background: rgba(16,185,129,.18); }
    .ic-li    { background: rgba(0,119,181,.22);  }
    .ic-gh    { background: rgba(255,255,255,.07);}
    .ic-web   { background: rgba(99,102,241,.18); }

    .ci-text { flex: 1; min-width: 0; }
    .ci-label {
      font-size: 10px; font-weight: 600; color: #7099c4;
      text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 2px;
    }
    .ci-val {
      font-size: 13px; color: #c8d8ee;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ci-sub { font-size: 10.5px; color: #6b93bd; margin-top: 1px; }
    .ci-arr { color: #4d7099; font-size: 16px; flex-shrink: 0; }

    /* ── Save CTA ── */
    .btn-save {
      width: 100%;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: linear-gradient(135deg, #1a50c8 0%, #0e3ea4 100%);
      color: #fff; font-family: 'Inter', sans-serif;
      font-size: 14px; font-weight: 600;
      padding: 14px; border-radius: 14px; border: none;
      cursor: pointer; letter-spacing: 0.2px;
      box-shadow: 0 4px 20px rgba(14, 62, 164, 0.45);
      transition: opacity 0.12s, transform 0.08s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-save:hover  { opacity: 0.9; }
    .btn-save:active { transform: scale(0.98); }

    .footer {
      margin-top: 16px; text-align: center;
      font-size: 11px; color: #63859f; letter-spacing: 0.3px;
    }
    /* ==========================================================
       ACCESSIBILITY & ADDITIONS — resume refresh
       ========================================================== */

    /* Visible keyboard focus (WCAG 2.4.7) — card.css had none before */
    a:focus-visible, button:focus-visible {
      outline: 3px solid #6aaee0;
      outline-offset: 3px;
      border-radius: 10px;
    }

    /* Respect reduced-motion preferences (WCAG 2.3.3) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
      .card { animation: none; opacity: 1; transform: none; }
      .pill-green .dot { animation: none; }
    }

    /* Credential strip — the strongest single signal for recruiters */
    .creds-strip {
      display: flex; align-items: center; gap: 9px;
      background: rgba(41, 182, 246, 0.07);
      border: 1px solid rgba(41, 182, 246, 0.26);
      border-radius: 12px;
      padding: 11px 13px;
      margin-bottom: 18px;
    }
    .creds-strip svg { width: 18px; height: 18px; flex-shrink: 0; color: #6aaee0; }
    .creds-strip-text { font-size: 12.5px; color: #a9c4de; line-height: 1.5; }
    .creds-strip-text b { color: #e2eeff; font-weight: 600; }

    /* Secondary CTA: view the full portfolio / grab the CV */
    .btn-secondary {
      width: 100%;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(59, 124, 246, 0.32);
      color: #c8dcf2;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px; font-weight: 600;
      padding: 13px; border-radius: 14px;
      cursor: pointer; text-decoration: none;
      margin-top: 9px;
      transition: background 0.13s, border-color 0.13s, transform 0.08s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-secondary:hover  { background: rgba(59,124,246,.13); border-color: rgba(59,124,246,.55); }
    .btn-secondary:active { transform: scale(0.98); }
    .btn-secondary svg { width: 16px; height: 16px; flex-shrink: 0; }

    /* Minimum touch-target size (WCAG 2.5.8) */
    .ci, .btn-save, .btn-secondary { min-height: 44px; }

    /* Print */
    @media print {
      body { background: #fff; color: #111; padding: 0; }
      .card { background: #fff; border: 1px solid #999; animation: none; }
      .card::before { display: none; }
      h1, .ci-val, .summary strong { color: #111; }
      .job-title, .ci-label, .location, .sec-label, .ci-sub, .summary { color: #444; }
      .btn-save, .btn-secondary { display: none; }
    }