:root {
      --ink: #05080d;
      --navy: #071527;
      --navy-2: #0d1b31;
      --blue: #18b7ff;
      --cyan: #52ffe3;
      --gold: #d8b45a;
      --gold-soft: rgba(216, 180, 90, .42);
      --text: #f7fbff;
      --muted: #aeb8c6;
      --line: rgba(255,255,255,.09);
    }

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

    body {
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
      padding: 42px 20px;
      color: var(--text);
      background:
        radial-gradient(circle at 18% 12%, rgba(24,183,255,.16), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(216,180,90,.10), transparent 26%),
        linear-gradient(135deg, #03060c 0%, #07111f 46%, #101729 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }

    .container {
      width: min(1120px, 100%);
      position: relative;
      z-index: 2;
    }

    .cards {
      display: grid;
      gap: 34px;
    }

    .card {
      min-height: 330px;
      border-radius: 22px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        radial-gradient(circle at 18% 24%, rgba(24,183,255,.13), transparent 34%),
        linear-gradient(135deg, #060b13 0%, #0a1526 52%, #0d1320 100%);
      border: 1px solid rgba(216,180,90,.34);
      box-shadow:
        0 38px 105px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.11);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 21px;
      border: 1px solid rgba(255,255,255,.045);
      pointer-events: none;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: auto 34px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216,180,90,.55), transparent);
    }

    /* FRONT */
    .front {
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr) 184px;
      gap: 40px;
      align-items: center;
      padding: 42px 44px;
    }

    .front-accent {
      position: absolute;
      left: 314px;
      top: 46px;
      bottom: 46px;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(82,255,227,.65), rgba(216,180,90,.24), transparent);
      opacity: .82;
    }

    .portrait-wrap {
      position: relative;
      width: 218px;
      height: 218px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .portrait-wrap::before {
      content: "";
      position: absolute;
      width: 222px;
      height: 222px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(82,255,227,.13), transparent 58%),
        conic-gradient(from 220deg, transparent, rgba(24,183,255,.75), rgba(216,180,90,.55), transparent 78%);
      filter: blur(.15px);
      z-index: -2;
    }

    .portrait-wrap::after {
      content: "";
      position: absolute;
      width: 248px;
      height: 248px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(24,183,255,.18), transparent 60%);
      filter: blur(32px);
      z-index: -3;
    }

    .portrait {
      width: 188px;
      height: 188px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(216,180,90,.72);
      box-shadow:
        0 24px 58px rgba(0,0,0,.46),
        0 0 34px rgba(24,183,255,.16);
      background: #0b1220;
    }

    .portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
            object-position: center 12%;
      filter: contrast(1.05) saturate(.94);
    }

    .identity {
      min-width: 0;
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      color: var(--gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .name {
      font-family: 'Syne', sans-serif;
      font-size: clamp(44px, 5vw, 66px);
      line-height: .86;
      font-weight: 800;
      letter-spacing: 5px;
      text-transform: uppercase;
      text-shadow: 0 18px 45px rgba(0,0,0,.42);
      margin-bottom: 14px;
    }

    .last-name {
      display: block;
      margin-top: 12px;
      font-size: .42em;
      letter-spacing: 8px;
      color: var(--blue);
      text-shadow: none;
    }

    .role {
      color: #f1d693;
      font-size: 12px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 22px;
    }

    .contact {
      display: grid;
      gap: 10px;
      max-width: 420px;
    }

    .contact-row {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #dfe7f1;
      font-size: 14px;
      letter-spacing: .15px;
    }

    .contact-icon {
      width: 26px;
      height: 26px;
      border: 1px solid rgba(216,180,90,.38);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--gold);
      font-size: 13px;
      background: rgba(255,255,255,.035);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .connect-panel {
      position: relative;
      z-index: 2;
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 18px 16px;
      border: 1px solid rgba(216,180,90,.38);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
    }

    .qr-frame {
      width: 134px;
      height: 134px;
      border-radius: 14px;
      padding: 9px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 24px rgba(24,183,255,.10);
      border: 1px solid rgba(216,180,90,.85);
    }

    .qr-frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .scan-title {
      color: var(--gold);
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      text-align: center;
    }

    .scan-sub {
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.35;
      text-align: center;
    }

    .front-tags {
      position: absolute;
      left: 44px;
      right: 44px;
      bottom: 23px;
      display: flex;
      justify-content: center;
      gap: 16px;
      color: rgba(247,251,255,.72);
      font-size: 10px;
      letter-spacing: 2.1px;
      text-transform: uppercase;
    }

    .dot {
      color: var(--blue);
    }

    /* BACK */
    .back {
      padding: 42px 48px 36px;
    }

    .back-header {
      text-align: center;
      margin-bottom: 34px;
    }

    .back-title {
      display: inline-flex;
      align-items: center;
      gap: 22px;
      color: #fff;
      font-family: 'Syne', sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 5px;
      text-transform: uppercase;
    }

    .back-title::before,
    .back-title::after {
      content: "";
      width: 132px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216,180,90,.72));
    }

    .back-title::after {
      background: linear-gradient(90deg, rgba(216,180,90,.72), transparent);
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-bottom: 32px;
    }

    .pillar {
      min-height: 150px;
      padding: 22px 20px 20px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      background:
        linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
      position: relative;
      overflow: hidden;
    }

    .pillar::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 0%, rgba(24,183,255,.13), transparent 46%);
      pointer-events: none;
    }

    .pillar-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
    }

    .pillar-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(216,180,90,.46);
      display: grid;
      place-items: center;
      color: var(--gold);
      background: rgba(216,180,90,.06);
      font-size: 20px;
    }

    .pillar-name {
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .pillar-items {
      list-style: none;
      color: #d6dee8;
      font-size: 12px;
      line-height: 1.9;
      position: relative;
      z-index: 1;
    }

    .pillar-items li::before {
      content: "•";
      color: var(--gold);
      margin-right: 8px;
    }

    .back-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216,180,90,.42), transparent);
      margin: 0 0 28px;
    }

    .back-footer {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      align-items: center;
      gap: 26px;
    }

    .signature {
      font-family: 'Syne', sans-serif;
      font-size: 34px;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: .5px;
    }

    .signature-sub {
      margin-top: 4px;
      color: var(--muted);
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .slogan {
      text-align: center;
      color: #fff;
      font-size: 13px;
      line-height: 1.6;
      font-weight: 600;
      letter-spacing: .5px;
    }

    .slogan strong {
      color: var(--gold);
      font-weight: 800;
    }

    .mini-connect {
      justify-self: end;
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(216,180,90,.26);
      background: rgba(255,255,255,.035);
    }

    .mini-qr {
      width: 62px;
      height: 62px;
      border-radius: 9px;
      background: #fff;
      padding: 4px;
      border: 1px solid rgba(216,180,90,.75);
    }

    .mini-qr img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .mini-copy {
      text-align: left;
    }

    .mini-copy b {
      display: block;
      color: var(--gold);
      font-size: 10px;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .mini-copy span {
      display: block;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.35;
    }

    @media (max-width: 900px) {
      .front {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding-bottom: 70px;
      }

      .front-accent {
        display: none;
      }

      .contact-row {
        justify-content: center;
      }

      .pillars-grid,
      .back-footer {
        grid-template-columns: 1fr;
      }

      .back-title::before,
      .back-title::after {
        width: 42px;
      }

      .mini-connect {
        justify-self: center;
      }

      .signature,
      .signature-sub {
        text-align: center;
      }
    }

    @media print {
      body {
        background: #fff;
        padding: 0;
      }

      .container {
        width: 100%;
      }

      .cards {
        gap: 0;
      }

      .card {
        width: 3.5in;
        height: 2in;
        min-height: 2in;
        border-radius: 0;
        box-shadow: none;
        page-break-after: always;
        transform-origin: top left;
      }
    }
  

        .social-icons {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 18px;
            flex-wrap: wrap;
        }

        .social-icon {
            width: 34px;
            height: 34px;
            border: 1px solid rgba(212, 175, 55, 0.55);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #d4af37;
            text-decoration: none;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: -0.5px;
            background: rgba(255, 255, 255, 0.035);
            box-shadow: 0 0 22px rgba(0, 255, 204, 0.08);
            transition: all 0.25s ease;
        }

        .social-icon:hover {
            color: #00ffcc;
            border-color: rgba(0, 255, 204, 0.7);
            box-shadow: 0 0 28px rgba(0, 255, 204, 0.2);
            transform: translateY(-2px);
        }

        .social-label {
            font-size: 9px;
            color: #a8a8a8;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-top: 14px;
            font-weight: 700;
        }