/* =========================
   COOLVETICA
========================= */

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica UltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* =========================
   COOLVETICA ITALIC
========================= */

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica UltraLight Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Book Italic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Regular Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Bold Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/Coolvetica Heavy Italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}


/* =========================
   MADE OKINE SANS
========================= */

@font-face {
  font-family: "Made Okine Sans";
  src: url("../fonts/MADEOkineSansPERSONALUSE-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Made Okine Sans";
  src: url("../fonts/MADEOkineSansPERSONALUSE-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Made Okine Sans";
  src: url("../fonts/MADEOkineSansPERSONALUSE-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Made Okine Sans";
  src: url("../fonts/MADEOkineSansPERSONALUSE-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Made Okine Sans";
  src: url("../fonts/MADEOkineSansPERSONALUSE-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      background: #160714;
      color: #fff;
      overflow-x: hidden;
    }

    /* 
      Desktop background:
      Same image, using the TOP of the image + blurred.
      Pink/purple gradients are removed, so the color comes from your image.
    */
    .page-bg {
      position: fixed;
      inset: 0;
      z-index: -3;
      background-image: url("../images/footer.jpg");
      background-size: cover;
      background-position: center top;
      filter: blur(28px);
      transform: scale(1.08);
      opacity: 0.75;
    }

    .page-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(8, 2, 8, 0.55);
    }

    .page {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 25px 24px;
      position: relative;
    }

    .phone-card {
      width: min(435px, 100%);
      height: 940px;
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      background-image: url("../images/footer.jpg");
      background-size: cover;
      background-position: center center;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
    }

    /* 
      Simple dark overlay only.
      No pink gradients here.
    */
    .phone-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.22);
      z-index: 1;
      pointer-events: none;
    }

    .card-content {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 25px 28px 22px;
    }

    .top-actions {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 50px;
    }

    .circle-action {
      width: 29px;
      height: 29px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.75);
      color: #111;
      display: grid;
      place-items: center;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      line-height: 1;
      cursor: pointer;
    }


    .circle-action svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .profile-desc-title {
      font-family: "Made Okine Sans", sans-serif;
      max-width: 350px;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 400;
      text-align: center;
      margin-bottom: 1px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .profile-picture {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #000;
      display: grid;
      place-items: center;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .profile-picture img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .profile-name {
      font-size: 33px;
      line-height: 1.22;
      font-weight: 800;
      letter-spacing: 1px;
      margin-bottom: 10px;
      text-align: center;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    }

    .profile-desc {
        font-family: "Made Okine Sans", sans-serif;
      max-width: 350px;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 300;
      text-align: center;
      margin-bottom: 18px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }
    

    .socials {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
    }

    .socials a {
      color: #fff;
      text-decoration: none;
      font-size: 21px;
      line-height: 1;
      font-weight: 700;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    }

    .links {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .link-button {
      width: 100%;
      min-height: 47px;
      border: 1.3px solid rgba(255, 255, 255, 0.88);
      border-radius: 999px;
      display: grid;
      grid-template-columns: 48px 1fr 28px;
      align-items: center;
      padding: 5px 10px 5px 6px;
      color: #fff;
      text-decoration: none;
      background: rgba(20, 5, 20, 0.28);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: transform 0.25s ease, background 0.25s ease;
    }

    .link-button:hover {
      transform: scale(1.025);
      background: rgba(255, 255, 255, 0.08);
    }

    .link-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      overflow: hidden;
      font-size: 16px;
      font-weight: 800;
      justify-self: start;
      color: #fff;
      background: #000;
    }

    .link-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .link-text {
        font-family: "Made Okine Sans", sans-serif;
      text-align: center;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .link-menu {
      font-size: 18px;
      opacity: 0.75;
      text-align: right;
      transform: translateY(-1px);
    }

    .footer-links {
      margin-top: auto;
      font-size: 8px;
      line-height: 1.35;
      text-align: center;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.92);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
    }

    .footer-links a {
      color: inherit;
      text-decoration: none;
    }

    /* Smaller desktop, like 1280px or below */
    @media (max-width: 1280px) {
      .phone-card {
        width: 405px;
        height: 800px;
      }

      .page {
        padding-top: 24px;
      }

      .top-actions {
        margin-bottom: 48px;
      }

  
    .circle-action svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .profile-desc-title {
      font-family: "Made Okine Sans", sans-serif;
      max-width: 350px;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 400;
      text-align: center;
      margin-bottom: 6px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .profile-picture {
        width: 68px;
        height: 68px;
      }

      .profile-desc-title {
        font-weight: 400;
        max-width: 350px;
      }

      .profile-desc {
        max-width: 350px;
      }
    }

    /* Phone view */
    @media (max-width: 600px) {
      html,
      body {
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        background: #160714;
        overflow-x: hidden;
      }

      .page-bg {
        display: none;
      }

      .page {
        width: 100%;
        min-width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        padding: 0;
        margin: 0;
        display: block;
      }

      .phone-card {
        width: 100vw;
        max-width: none;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        margin: 0;
        border-radius: 0;
        background-size: cover;
        background-position: center center;
        box-shadow: none;
      }

      .card-content {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        padding: 16px 14px 18px;
      }

      .top-actions {
        margin-bottom: 28px;
      }

      .circle-action {
        width: 39px;
        height: 39px;
        font-size: 20px;
      }

      .circle-action svg {
        width: 20px;
        height: 20px;
      }

  
    .circle-action svg {
      width: 16px;
      height: 16px;
      display: block;
      fill: currentColor;
    }

    .profile-desc-title {
      font-family: "Made Okine Sans", sans-serif;
      max-width: 350px;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 400;
      text-align: center;
      margin-bottom: 6px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    .profile-picture {
        width: 96px;
        height: 96px;
        margin-bottom: 14px;
      }

      .profile-name {
        font-size: 30px;
        margin-bottom: 8px;
      }

      .profile-desc {
        max-width: 320px;
        font-size: 16px;
        line-height: 1.45;
        margin-bottom: 18px;
      }

      .socials {
        gap: 22px;
        margin-bottom: 40px;
      }

      .socials a {
        font-size: 28px;
      }

      .links {
        width: 100%;
        gap: 14px;
      }

      .link-button {
        min-height: 66px;
        grid-template-columns: 58px 1fr 28px;
        padding: 6px 10px 6px 7px;
      }

      .link-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
      }

      .link-text {
        font-size: 14px;
        letter-spacing: 2.8px;
      }

      .footer-links {
        font-size: 10px;
        max-width: 150px;
      }
    }

    /* Font setup */
    body {
      font-family: "Made Okine Sans", Arial, Helvetica, sans-serif;
    }

    .profile-name {
      font-family: "Coolvetica", "Coolvetica Condensed", Arial, Helvetica, sans-serif;
      font-weight: 350;
    }

    /* Actual social icons */
    .socials a {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
    }

    .socials svg {
      width: 100%;
      height: 100%;
      display: block;
      fill: currentColor;
    }

    /* Desktop / tablet view, 621px and above */
    @media (min-width: 621px) {
      .page {
        min-height: 100vh;
        padding-top: 22px;
        padding-bottom: 22px;
        align-items: center;
      }

      .phone-card {
        height: calc(100vh - 44px);
        min-height: 760px;
        max-height: 940px;
      }

      .card-content {
        height: 100%;
      }
    }

    @media (max-width: 600px) {
      .socials a {
        width: 34px;
        height: 34px;
      }
    }



    .socials a {
      transition: transform 0.25s ease, filter 0.25s ease;
      transform-origin: center;
    }

    .socials a:hover {
      transform: scale(1.18);
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
    }


    .link-button {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.055);
      border: 1.3px solid rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(16px) saturate(145%);
      -webkit-backdrop-filter: blur(16px) saturate(145%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 12px 28px rgba(0, 0, 0, 0.18);
    }

    .link-button:hover {
      transform: scale(1.025);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.085);
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 16px 35px rgba(0, 0, 0, 0.22);
    }


    /* Responsive portrait card: 621px and above */
    @media (min-width: 621px) {
      .page {
        min-height: 100vh;
        padding: clamp(14px, 2.4vh, 24px);
        align-items: center;
      }

      .phone-card {
        height: calc(100vh - clamp(28px, 4.8vh, 48px));
        min-height: 0;
        max-height: none;
        width: min(435px, calc((100vh - clamp(28px, 4.8vh, 48px)) * 0.462));
      }

      .card-content {
        height: 100%;
        padding: clamp(18px, 2.8vh, 28px) 28px clamp(16px, 2.4vh, 24px);
      }
    }

    @media (min-width: 621px) and (max-height: 820px) {
      .top-actions {
        margin-bottom: clamp(18px, 4vh, 38px);
      }

      .profile-picture {
        width: clamp(56px, 8.2vh, 68px);
        height: clamp(56px, 8.2vh, 68px);
        margin-bottom: clamp(8px, 1.4vh, 14px);
      }

      .profile-name {
        font-size: clamp(24px, 3.6vh, 33px);
        margin-bottom: clamp(5px, 1vh, 10px);
      }

      .profile-desc-title {
        font-size: clamp(13px, 1.8vh, 16px);
        line-height: 1.35;
      }

      .profile-desc {
        font-size: clamp(12px, 1.75vh, 15px);
        line-height: 1.35;
        margin-bottom: clamp(10px, 2vh, 18px);
      }

      .socials {
        margin-bottom: clamp(16px, 3vh, 28px);
      }

      .links {
        gap: clamp(8px, 1.4vh, 12px);
      }

      .link-button {
        min-height: clamp(40px, 5.7vh, 47px);
      }

      .footer-links {
        font-size: 7px;
      }
    }


    /* Wider portrait card */
    @media (min-width: 621px) {
      .phone-card {
        width: min(520px, calc(100vw - 48px));
      }
    }

    @media (min-width: 1280px) {
      .phone-card {
        width: min(600px, calc(100vw - 48px));
      }
    }


    /* Bigger profile section for 1600px and above */
    @media (min-width: 1280px) {
      .card-content {
        padding: clamp(24px, 3vh, 34px) 42px clamp(20px, 2.5vh, 30px);
      }

      .top-actions {
        margin-bottom: clamp(54px, 6vh, 72px);
      }

      .circle-action {
        width: 34px;
        height: 34px;
      }

      .circle-action svg {
        width: 18px;
        height: 18px;
      }

      .profile-picture {
        width: 92px;
        height: 92px;
        margin-bottom: 18px;
      }

      .profile-name {
        font-size: 42px;
        line-height: 1.18;
        margin-bottom: 12px;
      }

      .profile-desc-title {
        font-size: 20px;
        line-height: 1.45;
        margin-bottom: 6px;
      }

      .profile-desc {
        max-width: 430px;
        font-size: 18px;
        line-height: 1.45;
        margin-bottom: 26px;
      }

      .socials {
        gap: 22px;
        margin-bottom: 36px;
      }

      .socials a {
        width: 34px;
        height: 34px;
      }

      .links {
        gap: 16px;
      }

      .link-button {
        min-height: 58px;
        grid-template-columns: 62px 1fr 34px;
        padding: 7px 13px 7px 8px;
      }

      .link-icon {
        width: 46px;
        height: 46px;
      }

      .link-text {
        font-size: 17px;
        letter-spacing: 3.4px;
      }

      .link-menu {
        font-size: 22px;
      }
    }


    /* Scale up profile contents from 1279px and above */
    @media (min-width: 1279px) {
      .card-content {
        padding: clamp(24px, 3vh, 34px) 42px clamp(20px, 2.5vh, 30px);
      }

      .top-actions {
        margin-bottom: clamp(54px, 4vh, 72px);
      }

      .circle-action {
        width: 34px;
        height: 34px;
      }

      .circle-action svg {
        width: 18px;
        height: 18px;
      }

      .profile-picture {
        width: 92px;
        height: 92px;
        margin-bottom: 18px;
      }

      .profile-name {
        font-size: 42px;
        line-height: 1.18;
        margin-bottom: 12px;
      }

      .profile-desc-title {
        font-size: 20px;
        line-height: 1.45;
        margin-bottom: 6px;
      }

      .profile-desc {
        max-width: 430px;
        font-size: 18px;
        line-height: 1.45;
        margin-bottom: 26px;
      }

      .socials {
        gap: 22px;
        margin-bottom: 36px;
      }

      .socials a {
        width: 34px;
        height: 34px;
      }

      .links {
        gap: 16px;
      }

      .link-button {
        min-height: 58px;
        grid-template-columns: 62px 1fr 34px;
        padding: 7px 13px 7px 8px;
      }

      .link-icon {
        width: 46px;
        height: 46px;
      }

      .link-text {
        font-size: 17px;
        letter-spacing: 3.4px;
      }

      .link-menu {
        font-size: 22px;
      }
    }


    /* 501px to 619px: make the phone card full screen height */
    @media (min-width: 501px) and (max-width: 619px) {
      html,
      body {
        min-height: 100%;
        margin: 0;
        padding: 0;
        background: #160714;
      }

      .page {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
        padding: 0;
        margin: 0;
        display: block;
      }

      .phone-card {
        width: 100vw;
        max-width: none;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background-size: cover;
        background-position: center center;
      }

      .card-content {
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
      }
    }

/* Bigger share button */
.circle-action {
  width: 42px;
  height: 42px;
}

.circle-action svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1279px) {
  .circle-action {
    width: 48px;
    height: 48px;
  }

  .circle-action svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 600px) {
  .circle-action {
    width: 46px;
    height: 46px;
  }

  .circle-action svg {
    width: 24px;
    height: 24px;
  }
}

/* Link copied status */
.copy-status {
  position: absolute;
  top: clamp(62px, 7vh, 78px);
  right: 28px;
  z-index: 5;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "Made Okine Sans", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.copy-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .copy-status {
    top: 66px;
    right: 14px;
    font-size: 12px;
  }
}

/* Final short-height fix: keep buttons visible and allow scrolling */
.profile-picture,
.profile-picture img,
.link-icon,
.link-icon img,
.circle-action,
.socials a {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.socials {
  flex-wrap: nowrap;
}

.socials .linkedin-icon {
  width: 92%;
  height: 92%;
}

/* Make the inner card scroll instead of hiding the link buttons when height is cramped */
@media (max-height: 725px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  .page {
    min-height: 100vh;
    min-height: 100svh;
  }

  .phone-card {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .card-content {
    height: auto;
    min-height: 100%;
  }

  .links {
    display: flex;
    visibility: visible;
    opacity: 1;
    margin-bottom: 18px;
  }
}

/* Slightly scale down only when desktop/tablet height is under 960px, while keeping the same overall spacing */
@media (min-width: 620px) and (max-height: 960px) {
  .card-content {
    padding-top: clamp(16px, 2.4vh, 24px);
    padding-bottom: clamp(16px, 2.4vh, 24px);
  }

  .top-actions {
    margin-bottom: clamp(30px, 5vh, 50px);
  }

  .profile-picture {
    width: clamp(70px, 9vh, 88px);
    height: clamp(70px, 9vh, 88px);
    min-width: clamp(70px, 9vh, 88px);
    min-height: clamp(70px, 9vh, 88px);
    margin-bottom: clamp(10px, 1.5vh, 16px);
  }

  .profile-name {
    font-size: clamp(31px, 4vh, 40px);
    margin-bottom: clamp(6px, 1vh, 10px);
  }

  .profile-desc-title {
    font-size: clamp(14px, 1.9vh, 18px);
    line-height: 1.35;
    margin-bottom: clamp(3px, 0.8vh, 6px);
  }

  .profile-desc {
    max-width: 400px;
    font-size: clamp(13px, 1.75vh, 16px);
    line-height: 1.36;
    margin-bottom: clamp(14px, 2.4vh, 22px);
  }

  .socials {
    gap: clamp(18px, 3vh, 24px);
    margin-bottom: clamp(26px, 4.4vh, 40px);
  }

  .socials a {
    width: clamp(28px, 3.8vh, 34px);
    height: clamp(28px, 3.8vh, 34px);
  }

  .links {
    gap: clamp(10px, 1.7vh, 14px);
  }

  .link-button {
    min-height: clamp(46px, 6.4vh, 58px);
  }

  .link-icon {
    width: clamp(38px, 5vh, 46px);
    height: clamp(38px, 5vh, 46px);
  }

  .link-text {
    font-size: clamp(13px, 1.65vh, 16px);
  }
}

/* Extra cramped height: smaller content + scrollable buttons */
@media (min-width: 620px) and (max-height: 725px) {
  .top-actions {
    margin-bottom: 16px;
  }

  .profile-picture {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    margin-bottom: 8px;
  }

  .profile-name {
    font-size: 27px;
    margin-bottom: 4px;
  }

  .profile-desc-title {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .profile-desc {
    max-width: 350px;
    font-size: 12px;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .socials {
    gap: 18px;
    margin-bottom: 16px;
  }

  .socials a {
    width: 26px;
    height: 26px;
  }

  .links {
    gap: 9px;
  }

  .link-button {
    min-height: 42px;
  }

  .link-icon {
    width: 34px;
    height: 34px;
  }

  .link-text {
    font-size: 12px;
    letter-spacing: 2.8px;
  }
}

/* Sticky share button */
.top-actions {
  position: sticky;
  top: clamp(14px, 2.4vh, 22px);
  z-index: 30;
  align-self: stretch;
  pointer-events: none;
}

.circle-action {
  pointer-events: auto;
}

/* Keep the copied status above the card content when share is sticky */
.copy-status {
  z-index: 31;
}

/* Mobile sticky share spacing */
@media (max-width: 600px) {
  .top-actions {
    top: 14px;
  }
}

/* When the card becomes scrollable on short screens, keep the share button visible */
@media (max-height: 725px) {
  .top-actions {
    position: sticky;
    top: 14px;
    z-index: 40;
  }
}

/* Consistent long link button spacing, even when more links are added */
.links {
  --link-button-gap: 14px;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  gap: var(--link-button-gap) !important;
  row-gap: var(--link-button-gap) !important;
}

.links > .link-button {
  margin: 0 !important;
  flex: 0 0 auto;
}

@media (min-width: 621px) {
  .links {
    --link-button-gap: 14px;
  }
}

@media (min-width: 1280px) {
  .links {
    --link-button-gap: 16px;
  }
}

@media (max-width: 600px) {
  .links {
    --link-button-gap: 14px;
  }
}

@media (max-height: 725px) {
  .links {
    --link-button-gap: 9px;
    padding-bottom: 18px;
  }
}

@media (min-width: 620px) and (max-height: 960px) {
  .links {
    --link-button-gap: clamp(10px, 1.7vh, 14px);
  }
}

@media (min-width: 620px) and (max-height: 725px) {
  .links {
    --link-button-gap: 9px;
  }
}

/* Cleaner Linktree scrollbar: hide the ugly default bar */
.phone-card {
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;       /* Old Edge / IE */
}

.phone-card::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Keep scrolling working even when the scrollbar is hidden */
.phone-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Desktop bottom margin fix for 1279px and above */
@media (min-width: 1279px) {
  .page {
    min-height: 100vh;
    padding-top: clamp(14px, 2.4vh, 24px) !important;
    padding-bottom: clamp(14px, 2.4vh, 24px) !important;
    align-items: center;
  }

  .phone-card {
    height: calc(100vh - clamp(28px, 4.8vh, 48px)) !important;
    max-height: none;
  }
}

/* Scroll overflow bottom spacing + responsive dark tint fix */
.phone-card {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.phone-card::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Move the dark tint from the fixed card layer to the full scrollable content layer */
.phone-card::before {
  display: none !important;
}

.card-content {
  height: auto !important;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.22);
}

/* Creates real bottom breathing room after the last link when the card scrolls */
.links {
  padding-bottom: 0 !important;
}

.links::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: clamp(36px, 6vh, 62px);
}

/* Keep the same bottom breathing room on desktop/tablet cards */
@media (min-width: 621px) {
  .page {
    padding-top: clamp(14px, 2.4vh, 24px) !important;
    padding-bottom: clamp(14px, 2.4vh, 24px) !important;
  }

  .phone-card {
    height: calc(100vh - clamp(28px, 4.8vh, 48px)) !important;
    max-height: none !important;
  }

  .card-content {
    min-height: 100%;
  }
}

/* When content is cramped/overflowing, keep enough scrollable space after the last button */
@media (max-height: 750px) {
  .links::after {
    height: clamp(44px, 8vh, 76px);
  }
}

/* Phone/fullscreen card still needs bottom breathing room after the final link */
@media (max-width: 600px) {
  .card-content {
    min-height: 100vh;
    min-height: 100svh;
  }

  .links::after {
    height: clamp(42px, 8vh, 70px);
  }
}