/* Responsive business card aligned over the blank card in BusinessCardHand.jpg */
:root {
  --card-bg: #fff;
  --text: #111827;
  --accent: #c000a5;
  --border: #c5e7fb;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body {
  background: #f7f8fa;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}
.page {
  width: 100%;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
.hand-stage {
  position: relative;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  line-height: 0;
  isolation: isolate;
}
.hand-photo { display: block; width: 100%; height: auto; }

/* Desktop/tablet overlay matches the blank card area in the supplied 1280x1024 photo. */
.business-card {
  position: absolute;
  left: 50.8%;
  top: 19.25%;
  width: 39.5%;
  height: 31.55%;
  padding: clamp(8px, 1.15vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: rgba(255,255,255,.985);
  border: 1px solid rgba(0,0,0,.045);
  border-radius: clamp(5px, .8vw, 12px);
  box-shadow: 0 5px 18px rgba(0,0,0,.13);
  line-height: normal;
}
.profile {
  display: grid;
  grid-template-columns: 31% minmax(0, 1fr);
  align-items: start;
  gap: 3.5%;
  min-height: 0;
}
.profile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  background: #dff4ff;
}
.profile-copy { min-width: 0; }
.profile-copy h1 {
  margin: 1px 0 5px;
  font-size: clamp(9px, 1.65vw, 22px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.bio {
  margin: 0;
  color: #424242;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 1.12vw, 15px);
  font-style: italic;
  line-height: 1.24;
}
.contact-area {
  margin-top: 2.5%;
  padding-top: 2%;
  border-top: 1px dotted #e5a8d9;
  text-align: center;
}
.contact-area h2 {
  margin: 0 0 2%;
  color: var(--accent);
  font-size: clamp(7px, 1.15vw, 15px);
  line-height: 1.2;
  font-weight: 800;
}
.social-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2%;
  width: 100%;
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 10%;
  width: 10%;
  max-width: 42px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(9px, 1.65vw, 21px);
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.phone { background: #16468f; }
.whatsapp { background: #08bd60; }
.facebook { background: #17528f; }
.instagram { background: radial-gradient(circle at 30% 110%, #ffcf45 0 18%, #ff4b69 42%, #bd27a8 67%, #5147d9 100%); }
.x-social { background: #050505; }
.linkedin { background: #0b9bd3; }
.email { background: #b50091; }
.website { background: #079bd7; }
.location { background: #ff8200; }
.card-footer {
  padding: 1.6% 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #f6fbff;
  color: #222;
  text-align: center;
  font-size: clamp(6px, .85vw, 11px);
  line-height: 1.25;
}
.card-footer a { color: var(--accent); text-decoration: none; }


/* Desktop: hand image scales responsively with BOTH viewport width and height.
   The stage ratio matches the source image ratio (5:4), so the hand is never stretched.
   The card overlay remains proportional to the hand image as the viewport changes. */
@media (min-width: 769px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .page {
    width: 100%;
    height: 100vh;
    min-height: 0;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hand-stage {
    position: relative;
    width: min(100vw, 125vh);
    height: min(80vw, 100vh);
    aspect-ratio: 5 / 4;
    max-width: none;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0;
  }

  .hand-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .business-card {
    left: 50.8%;
    top: 19.25%;
    width: 39.5%;
    height: 31.55%;
    padding: clamp(7px, min(1.15vw, 1.4vh), 16px);
    overflow: hidden;
  }

  .profile {
    grid-template-columns: 31% minmax(0, 1fr);
    gap: 3.5%;
  }

  .profile-copy h1 {
    font-size: clamp(11px, min(1.35vw, 2.1vh), 21px);
  }

  .bio {
    font-size: clamp(8px, min(.92vw, 1.45vh), 14px);
    line-height: 1.22;
  }

  .contact-area h2 {
    font-size: clamp(8px, min(.95vw, 1.5vh), 14px);
  }

  .social {
    font-size: clamp(10px, min(1.3vw, 1.9vh), 19px);
  }

  .card-footer {
    font-size: clamp(7px, min(.72vw, 1.1vh), 11px);
  }
}

/* Tablet: preserve the same proportions and keep the whole hand/card composition visible. */
@media (max-width: 768px) {
  .page { width: 100%; padding: 0; }
  .business-card { padding: 1.05%; border-radius: 6px; }
  .profile { gap: 3%; }
  .profile-copy h1 { margin-bottom: 3px; }
  .contact-area { margin-top: 2%; padding-top: 1.5%; }
}

/* Mobile layout fix: content flows naturally; no text/icon overlap. */
@media (max-width: 480px) {
  .page {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    overflow-x: hidden;
  }

  .hand-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    margin: 0;
    background: #fff;
  }

  .hand-photo {
    position: absolute;
    display: block;
    width: 230%;
    max-width: none;
    height: auto;
    left: -111%;
    top: 20%;
  }

  .business-card {
    position: absolute;
    left: 5%;
    top: 34%;
    width: 90%;
    height: auto;
    min-height: 0;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    background: rgba(255,255,255,.985);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
  }

  .profile {
    display: grid;
    grid-template-columns: 29% minmax(0, 1fr);
    gap: 3.5%;
    align-items: start;
    min-height: 0;
  }

  .profile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
  }

  .profile-copy { min-width: 0; }

  .profile-copy h1 {
    margin: 1px 0 5px;
    font-size: clamp(14px, 4.1vw, 18px);
    line-height: 1.12;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .bio {
    margin: 0;
    font-size: clamp(10px, 2.85vw, 12px);
    line-height: 1.25;
    font-family: Georgia, "Times New Roman", serif;
  }

  .contact-area {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dotted #e5a8d9;
    text-align: center;
  }

  .contact-area h2 {
    margin: 0 0 10px;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.2;
  }

  .social-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
  }

  .social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(25px, 8vw, 32px);
    height: clamp(25px, 8vw, 32px);
    flex: 0 1 clamp(25px, 8vw, 32px);
    max-width: none;
    font-size: clamp(12px, 3.7vw, 16px);
  }

  .card-footer {
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 8px 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 3px;
    font-size: clamp(7px, 2vw, 9px);
    line-height: 1.3;
  }
}

@media (max-width: 350px) {
  .business-card { left: 4%; width: 92%; padding: 10px; }
  .profile { grid-template-columns: 27% minmax(0, 1fr); gap: 3%; }
  .profile-copy h1 { font-size: 13px; }
  .bio { font-size: 9px; line-height: 1.22; }
  .contact-area { margin-top: 10px; padding-top: 8px; }
  .contact-area h2 { font-size: 9px; margin-bottom: 8px; }
  .social { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
  .card-footer { margin-top: 9px; font-size: 6.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}