/* ════════════════════════════════════════════════════════════════════════════
   CSS Variables
════════════════════════════════════════════════════════════════════════════ */
:root {
  --primary:        #2BBDEE;
  --primary-dark:   #1FA2D1;
  --primary-shadow: rgba(43,189,238,0.22);
  --primary-10:     rgba(43,189,238,0.10);
  --primary-15:     rgba(43,189,238,0.16);

  /* Light theme */
  --bg:             #F4F7F9;
  --surface:        #FFFFFF;
  --border:         #EDF0F2;
  --border-strong:  #E2E8F0;
  --text-primary:   #1F2937;
  --text-secondary: #6B7280;
  --text-label:     #9CA3AF;
  --chevron:        #D1D5DB;
  --social-bg:      #F3F4F6;
  --orb-1:          rgba(43,189,238,0.10);
  --orb-2:          rgba(43,189,238,0.06);

  --phone-bg:   rgba(43,189,238,0.10); --phone-color: #2BBDEE;
  --email-bg:   #EFF6FF;               --email-color: #3B82F6;
  --wa-bg:      #F0FDF4;               --wa-color:    #16A34A;

  --font-d: 'Sora', sans-serif;
  --font-b: 'DM Sans', sans-serif;

  --content-w: 640px;
  --pad-x: clamp(16px, 5vw, 32px);

  /* Animation timing tokens */
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --ease-out-circ:  cubic-bezier(0, .55, .45, 1);
  --ease-in-out:    cubic-bezier(.65, 0, .35, 1);
  --dur-xs:  80ms;
  --dur-sm:  160ms;
  --dur-md:  320ms;
  --dur-lg:  480ms;
  --dur-xl:  640ms;
}

html.dark {
  --bg:             #0F171A;
  --surface:        #1A2C33;
  --border:         #1F2937;
  --border-strong:  #334155;
  --text-primary:   #FFFFFF;
  --text-secondary: #94A3B8;
  --text-label:     #6B7280;
  --chevron:        #374151;
  --social-bg:      #1F2937;
  --orb-1:          rgba(43,189,238,0.08);
  --orb-2:          rgba(43,189,238,0.04);
  --phone-bg:  rgba(43,189,238,0.12);
  --email-bg:  rgba(59,130,246,0.12);
  --wa-bg:     rgba(22,163,74,0.12);
}

/* ════════════════════════════════════════════════════════════════════════════
   Reset
════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100dvh;
  transition: background .3s, color .3s;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ════════════════════════════════════════════════════════════════════════════
   Theme toggle — floating bottom-right
════════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 300;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px var(--primary-shadow);
  transition: transform .2s, background .25s;
}
.theme-toggle:hover  { transform: scale(1.1); background: var(--primary-dark); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }
#themeToggle .material-symbols-rounded {
  transition: transform var(--dur-md) var(--ease-spring);
}
#themeToggle:active .material-symbols-rounded {
  transform: rotate(180deg) scale(.88);
}

/* ════════════════════════════════════════════════════════════════════════════
   Full-page layout wrapper
════════════════════════════════════════════════════════════════════════════ */
.phone-frame {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-x: hidden;
  transition: background .3s;
  /* Page-load: starts invisible, .frame-ready fades it in */
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out-expo), background .3s;
}
#phoneFrame.frame-ready {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   Background orbs
════════════════════════════════════════════════════════════════════════════ */
.mesh-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 20% -10%, var(--orb-1), transparent),
              radial-gradient(ellipse 60% 40% at 85% 10%, var(--orb-2), transparent);
  animation: mesh-drift 18s ease-in-out infinite;
}
@keyframes mesh-drift {
  0%,100% {
    background:
      radial-gradient(ellipse 80% 50% at 20% -10%, var(--orb-1), transparent),
      radial-gradient(ellipse 60% 40% at 85% 10%,  var(--orb-2), transparent);
  }
  33% {
    background:
      radial-gradient(ellipse 80% 50% at 26% -6%,  var(--orb-1), transparent),
      radial-gradient(ellipse 60% 40% at 78% 14%,  var(--orb-2), transparent);
  }
  66% {
    background:
      radial-gradient(ellipse 80% 50% at 16% -14%, var(--orb-1), transparent),
      radial-gradient(ellipse 60% 40% at 90%  6%,  var(--orb-2), transparent);
  }
}
.mesh-orb { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Top bar
════════════════════════════════════════════════════════════════════════════ */
.top-bar {
  position: sticky;
  top: 0; z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--pad-x);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  max-width: 100%;
}

.top-bar-brand {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-d);
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-label);
  pointer-events: none;
}
.top-bar-brand .brand-dot-sm {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--primary);
}

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: transform var(--dur-sm) var(--ease-spring),
              background var(--dur-sm) linear,
              border-color var(--dur-sm) linear,
              box-shadow var(--dur-sm) var(--ease-out-expo),
              color var(--dur-sm) linear;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  will-change: transform;
}
.icon-btn:hover {
  transform: scale(1.06);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-10);
}
.icon-btn:active {
  transform: scale(.88);
  transition-duration: var(--dur-xs);
}
.icon-btn .material-symbols-rounded { font-size: 20px; }
.icon-btn.btn-triggered .material-symbols-rounded {
  animation: icon-pop var(--dur-md) var(--ease-spring);
}
@keyframes icon-pop {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1);    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Scroll / content area
════════════════════════════════════════════════════════════════════════════ */
.scroll-area {
  position: relative; z-index: 10;
  flex: 1;
  padding-bottom: clamp(60px, 10vh, 100px);
}

.section, .header-section, .identity-section.section {
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   Hero header — avatar + logo
════════════════════════════════════════════════════════════════════════════ */
.header-section {
  display: flex;
  justify-content: center;
  padding-top: clamp(40px, 8vh, 64px);
  padding-bottom: 0;
  width: 100%;
}

.avatar-wrap { position: relative; display: inline-block; }

/* Avatar ring — glow pulse + page-load reveal */
.avatar-ring {
  width: clamp(110px, 22vw, 150px);
  height: clamp(110px, 22vw, 150px);
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 130deg, var(--primary), transparent 55%, var(--primary));
  cursor: zoom-in;
  /* Page-load initial state */
  opacity: 0;
  transform: scale(.72) translateY(12px);
  transition:
    opacity   var(--dur-xl) var(--ease-out-expo),
    transform var(--dur-xl) var(--ease-spring);
  /* Continuous glow */
  animation: avatar-glow 4s ease-in-out infinite;
  will-change: transform;
}
.frame-ready .avatar-ring {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 60ms;
}
@keyframes avatar-glow {
  0%, 100% {
    box-shadow:
      0 0 0  5px rgba(43,189,238,.10),
      0 0 28px rgba(43,189,238,.12),
      0 14px 40px rgba(0,0,0,.18);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(43,189,238,.18),
      0 0 48px rgba(43,189,238,.22),
      0 14px 40px rgba(0,0,0,.18);
  }
}
.avatar-ring.avatar-clicked {
  animation: avatar-tap var(--dur-md) var(--ease-spring) forwards,
             avatar-glow 4s ease-in-out infinite var(--dur-md);
}
@keyframes avatar-tap {
  0%   { transform: scale(1);   }
  40%  { transform: scale(.90); }
  100% { transform: scale(1);   }
}

.avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--bg);
  cursor: zoom-in;
}

.logo-badge {
  position: absolute;
  bottom: calc(clamp(42px,12vw,54px) * -0.4);
  left: 50%; transform: translateX(-50%);
  width: clamp(42px,12vw,54px);
  height: clamp(42px,12vw,54px);
  border-radius: clamp(10px,3vw,15px);
  border: 3px solid var(--bg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  background: var(--surface);
  /* Page-load initial state */
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(.85);
  transition:
    opacity   var(--dur-md) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-spring);
}
.frame-ready .logo-badge {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 260ms;
}
.logo-img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════════════════════════════════════════════════════════════════
   Sections
════════════════════════════════════════════════════════════════════════════ */
.section {
  padding: 0 var(--pad-x);
  margin-top: clamp(24px, 5vw, 36px);
  width: 100%;
  /* Scroll reveal — starts hidden */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   var(--dur-lg) var(--ease-out-expo),
    transform var(--dur-lg) var(--ease-out-expo);
}
.section.section-visible {
  opacity: 1;
  transform: none;
}
.section:nth-child(3) { margin-top: clamp(36px,8vw,56px); }

.section-label {
  font-family: var(--font-d);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: clamp(10px,2.5vw,14px);
}

/* ════════════════════════════════════════════════════════════════════════════
   Identity
════════════════════════════════════════════════════════════════════════════ */
.identity-section {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1.8vw, 10px);
}
/* Staggered children reveal */
.identity-section > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--dur-lg) var(--ease-out-expo),
    transform var(--dur-lg) var(--ease-out-expo);
}
.frame-ready .identity-section > *:nth-child(1) { opacity:1; transform:none; transition-delay: 200ms; }
.frame-ready .identity-section > *:nth-child(2) { opacity:1; transform:none; transition-delay: 260ms; }
.frame-ready .identity-section > *:nth-child(3) { opacity:1; transform:none; transition-delay: 310ms; }
.frame-ready .identity-section > *:nth-child(4) { opacity:1; transform:none; transition-delay: 350ms; }
.frame-ready .identity-section > *:nth-child(5) { opacity:1; transform:none; transition-delay: 390ms; }
.frame-ready .identity-section > *:nth-child(6) { opacity:1; transform:none; transition-delay: 430ms; }
.frame-ready .identity-section > *:nth-child(7) { opacity:1; transform:none; transition-delay: 470ms; }

.brand-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-d);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-label);
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--primary);
}
.profile-name {
  font-family: var(--font-d);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--text-primary); line-height: 1.1;
}
.profile-pronouns {
  font-size: clamp(10px, 2.5vw, 12px); font-weight: 600;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-10);
  padding: 3px 12px; border-radius: 20px;
  display: inline-block;
}
.profile-title {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-secondary); font-weight: 500;
}
.profile-dept {
  font-size: clamp(11px, 2.8vw, 13px);
  color: var(--text-label); font-weight: 500;
}
.profile-headline {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--text-secondary);
  font-style: italic; line-height: 1.55;
  max-width: min(320px, 90vw);
  text-align: center;
}
.company-chip {
  display: inline-flex; align-items: center;
  gap: clamp(5px, 1.5vw, 8px);
  padding: clamp(7px, 2vw, 10px) clamp(12px, 3vw, 16px);
  border-radius: 14px;
  background: var(--social-bg); border: 1px solid var(--border);
  font-family: var(--font-d);
  font-size: clamp(12px, 3vw, 14px); font-weight: 700;
  color: var(--text-primary);
  animation: chip-float 6s ease-in-out infinite;
  will-change: transform;
  transition: transform var(--dur-sm) var(--ease-spring),
              border-color var(--dur-sm) linear,
              background var(--dur-sm) linear;
}
@keyframes chip-float {
  0%,100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}
.company-chip:hover {
  transform: translateY(-4px) scale(1.03);
  animation-play-state: paused;
  border-color: rgba(43,189,238,.4);
  background: var(--primary-10);
}
.chip-icon { font-size: clamp(15px, 4vw, 18px); color: var(--primary); }

/* ════════════════════════════════════════════════════════════════════════════
   Contact rows
════════════════════════════════════════════════════════════════════════════ */
.contact-list { display: flex; flex-direction: column; gap: clamp(8px, 2vw, 11px); }

.contact-row {
  display: flex; align-items: center;
  gap: clamp(10px, 3vw, 15px);
  padding: clamp(12px, 3vw, 16px);
  border-radius: clamp(14px, 4vw, 18px);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
  /* Reveal + interaction transitions */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity        var(--dur-md) var(--ease-out-expo),
    transform      var(--dur-sm) var(--ease-spring),
    box-shadow     var(--dur-sm) var(--ease-out-expo),
    border-color   var(--dur-sm) linear;
  will-change: transform;
}
.section-visible .contact-row {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--row-i, 0) * 55ms + 60ms);
}
.contact-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(43,189,238,.14);
  border-color: rgba(43,189,238,.35);
}
.contact-row:active {
  transform: scale(.97) translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition-duration: var(--dur-xs);
}
.contact-row.row-pulse {
  animation: row-pulse var(--dur-lg) var(--ease-out-expo) forwards;
}
@keyframes row-pulse {
  0%   { background: var(--surface); }
  30%  { background: rgba(43,189,238,.10); border-color: rgba(43,189,238,.5); }
  100% { background: var(--surface); }
}
.contact-row.row-call-pulse .contact-icon-wrap {
  animation: call-halo var(--dur-xl) var(--ease-out-expo);
}
@keyframes call-halo {
  0%   { box-shadow: 0 0 0 0   rgba(43,189,238,.5); }
  60%  { box-shadow: 0 0 0 12px rgba(43,189,238,.0); }
  100% { box-shadow: none; }
}
.contact-row.row-wa-pulse .contact-icon-wrap {
  animation: wa-halo var(--dur-xl) var(--ease-out-expo);
}
@keyframes wa-halo {
  0%   { box-shadow: 0 0 0 0   rgba(22,163,74,.5); }
  60%  { box-shadow: 0 0 0 12px rgba(22,163,74,.0); }
  100% { box-shadow: none; }
}
.contact-icon-wrap.icon-bounce {
  animation: icon-bounce var(--dur-md) var(--ease-spring);
}
@keyframes icon-bounce {
  0%   { transform: scale(1);    }
  40%  { transform: scale(.80);  }
  80%  { transform: scale(1.18); }
  100% { transform: scale(1);    }
}

.contact-icon-wrap {
  width: clamp(40px, 10vw, 48px); height: clamp(40px, 10vw, 48px);
  flex-shrink: 0; border-radius: clamp(10px, 3vw, 14px);
  display: flex; align-items: center; justify-content: center;
}
.contact-icon-wrap .material-symbols-rounded { font-size: clamp(18px, 4.5vw, 22px); }

.phone-icon    { background: var(--phone-bg); color: var(--phone-color); }
.email-icon    { background: var(--email-bg); color: var(--email-color); }
.whatsapp-icon { background: var(--wa-bg);    color: var(--wa-color);    }
.web-icon      { background: var(--primary-10); color: var(--primary);   }
.map-icon      { background: rgba(249,115,22,.10); color: #F97316;       }
.note-icon     { background: rgba(234,179,8,.12);  color: #CA8A04;       }
.pay-icon      { background: rgba(34,197,94,.10);  color: #16A34A;       }
.telegram-icon { background: rgba(42,171,238,.12); color: #2AABEE;       }

.contact-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-sublabel {
  font-size: clamp(9px, 2.2vw, 10px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-label);
}
.contact-value {
  font-family: var(--font-d);
  font-size: clamp(13px, 3.5vw, 15px); font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chevron { color: var(--chevron); font-size: clamp(18px, 4.5vw, 20px); flex-shrink: 0; }

/* Note row */
.note-row {
  display: flex; align-items: flex-start;
  gap: clamp(10px, 3vw, 15px);
  padding: clamp(12px, 3vw, 16px);
  border-radius: clamp(14px, 4vw, 18px);
  background: var(--surface); border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--dur-md) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-out-expo);
}
.section-visible .note-row {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--row-i, 0) * 55ms + 60ms);
}
.note-text {
  white-space: pre-wrap; line-height: 1.55;
  font-size: clamp(13px, 3.2vw, 14px) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Social / online presence grid
════════════════════════════════════════════════════════════════════════════ */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 40vw, 160px), 1fr));
  gap: clamp(8px, 2vw, 12px);
}

.social-pill {
  display: flex; align-items: center;
  gap: clamp(8px, 2vw, 11px);
  padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 16px);
  border-radius: clamp(12px, 3.5vw, 16px);
  background: var(--social-bg); border: 1px solid var(--border);
  font-family: var(--font-d);
  font-size: clamp(12px, 3vw, 13px); font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity        var(--dur-md) var(--ease-out-expo),
    transform      var(--dur-sm) var(--ease-spring),
    background     var(--dur-sm) linear,
    border-color   var(--dur-sm) linear,
    box-shadow     var(--dur-sm) var(--ease-out-expo),
    color          var(--dur-sm) linear;
  will-change: transform;
}
.section-visible .social-pill {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--row-i, 0) * 40ms + 60ms);
}
.social-pill:hover {
  transform: translateY(-3px) scale(1.03);
  background: var(--primary-10);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 6px 22px rgba(43,189,238,.18);
}
.social-pill:active {
  transform: scale(.95);
  transition-duration: var(--dur-xs);
}
.social-pill:hover .social-icon {
  background: var(--primary-10);
  border-color: rgba(43,189,238,.25);
}

.social-icon {
  width: clamp(26px, 7vw, 30px); height: clamp(26px, 7vw, 30px);
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(11px, 3vw, 13px); font-weight: 800; flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.linkedin  { color: #0A66C2; } .dribbble  { color: #EA4C89; }
.twitter   { color: var(--text-primary); } .web { color: var(--primary); }
.instagram { color: #E1306C; } .facebook  { color: #1877F2; }
.github    { color: var(--text-primary); } .youtube { color: #FF0000; }
.tiktok    { color: var(--text-primary); } .snapchat { color: #FFFC00; }
.telegram  { color: #2AABEE; } .behance   { color: #1769FF; }
.pinterest { color: #E60023; } .spotify   { color: #1DB954; }

/* ════════════════════════════════════════════════════════════════════════════
   PDF row
════════════════════════════════════════════════════════════════════════════ */
.pdf-row {
  display: flex; align-items: center;
  gap: clamp(10px, 3vw, 15px);
  padding: clamp(12px, 3vw, 16px);
  border-radius: clamp(14px, 4vw, 18px);
  background: var(--surface); border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--dur-md) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-out-expo);
}
.section-visible .pdf-row {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}
.pdf-icon-wrap {
  width: clamp(40px, 10vw, 48px); height: clamp(40px, 10vw, 48px);
  border-radius: clamp(10px, 3vw, 14px); flex-shrink: 0;
  background: rgba(239,68,68,.10); color: #EF4444;
  display: flex; align-items: center; justify-content: center;
}
.pdf-icon-wrap .material-symbols-rounded { font-size: clamp(19px, 5vw, 22px); }
.pdf-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdf-name {
  font-family: var(--font-d);
  font-size: clamp(13px, 3.5vw, 15px); font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-meta { font-size: clamp(10px, 2.5vw, 11px); color: var(--text-label); }
.pdf-download-btn {
  width: clamp(34px, 8vw, 40px); height: clamp(34px, 8vw, 40px);
  border-radius: 10px; flex-shrink: 0;
  background: var(--primary-10); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
  text-decoration: none;
}
.pdf-download-btn:hover { background: var(--primary-15); transform: scale(1.08); }
.pdf-download-btn .material-symbols-rounded { font-size: clamp(18px, 4.5vw, 20px); }

/* ════════════════════════════════════════════════════════════════════════════
   Actions
════════════════════════════════════════════════════════════════════════════ */
.actions-section { margin-top: clamp(32px, 6vw, 48px); }

.btn-primary {
  width: 100%; padding: clamp(15px, 4vw, 18px);
  border-radius: clamp(16px, 4vw, 22px);
  background: var(--primary); color: #fff;
  font-family: var(--font-d);
  font-size: clamp(14px, 3.8vw, 16px); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 28px var(--primary-shadow);
  position: relative; overflow: hidden;
  transition:
    transform    var(--dur-sm) var(--ease-spring),
    background   var(--dur-sm) linear,
    box-shadow   var(--dur-sm) var(--ease-out-expo);
  will-change: transform;
}
.btn-primary:hover  { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 36px var(--primary-shadow); }
.btn-primary:active { transform: scale(.96); transition-duration: var(--dur-xs); }
.btn-primary .material-symbols-rounded { font-size: 22px; }
.btn-primary.btn-saving .material-symbols-rounded {
  animation: icon-spin var(--dur-xl) var(--ease-out-expo);
}
@keyframes icon-spin {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(-24deg) scale(1.2); }
  100% { transform: rotate(0deg)   scale(1);   }
}

.btn-secondary {
  width: 100%; padding: clamp(12px, 3vw, 15px);
  border-radius: clamp(14px, 4vw, 18px);
  background: var(--primary-10); color: var(--primary);
  font-family: var(--font-d);
  font-size: clamp(13px, 3.5vw, 15px); font-weight: 700;
  border: 1.5px solid rgba(43,189,238,.25);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  position: relative; overflow: hidden;
  transition:
    background   var(--dur-sm) linear,
    color        var(--dur-sm) linear,
    border-color var(--dur-sm) linear,
    transform    var(--dur-sm) var(--ease-spring);
  will-change: transform;
}
.btn-secondary:hover  { background: var(--primary-15); transform: translateY(-1px); }
.btn-secondary:active { transform: scale(.96); transition-duration: var(--dur-xs); }
.btn-secondary .material-symbols-rounded { font-size: 20px; }
.btn-secondary.btn-copied {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: #16A34A;
}

.powered-by {
  text-align: center;
  font-size: 10px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-label);
  margin-top: clamp(14px, 4vw, 20px);
}
.powered-by strong { color: var(--primary); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════════
   Ripple
════════════════════════════════════════════════════════════════════════════ */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.25);
  pointer-events: none;
  animation: ripple-expand var(--dur-xl) var(--ease-out-expo) forwards;
}
html.dark .ripple { background: rgba(43,189,238,.18); }
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}
.btn-primary   .ripple { background: rgba(255,255,255,.30); }
.btn-secondary .ripple { background: rgba(43,189,238,.25);  }

/* ════════════════════════════════════════════════════════════════════════════
   QR Bottom Sheet
════════════════════════════════════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 50;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%) translateY(102%);
  width: min(480px, 100vw);
  z-index: 60;
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  padding: 20px 28px clamp(36px, 8vw, 54px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 4vw, 20px);
  transition: transform .48s cubic-bezier(.22, 1.12, .36, 1);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  will-change: transform;
}
.bottom-sheet.open { transform: translateX(-50%) translateY(0); }
.bottom-sheet.is-dragging { transition: none !important; }

.sheet-handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--border-strong);
  transition: width var(--dur-md) var(--ease-spring), background var(--dur-sm) linear;
}
.bottom-sheet.open .sheet-handle {
  animation: handle-hint 1.2s var(--ease-out-expo) .5s both;
}
@keyframes handle-hint {
  0%   { width: 40px; }
  40%  { width: 56px; background: var(--primary); }
  100% { width: 40px; }
}

.sheet-title {
  font-family: var(--font-d);
  font-size: clamp(16px, 4.5vw, 20px); font-weight: 700;
  color: var(--text-primary);
}

/* QR container */
.qr-container {
  padding: clamp(14px, 4vw, 20px);
  border-radius: clamp(16px, 4vw, 22px);
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  display: inline-flex;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  opacity: 0;
  transform: scale(.88);
  transition:
    opacity   var(--dur-md) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-spring);
}
.bottom-sheet.open .qr-container {
  opacity: 1;
  transform: scale(1);
  transition-delay: 200ms;
}

/* Sheet URL */
.sheet-url {
  font-family: var(--font-d);
  font-size: clamp(11px, 3vw, 13px); font-weight: 600;
  color: var(--text-secondary); letter-spacing: .02em;
  word-break: break-all; text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--dur-md) var(--ease-out-expo),
    transform var(--dur-md) var(--ease-out-expo);
}
.bottom-sheet.open .sheet-url {
  opacity: 1;
  transform: none;
  transition-delay: 280ms;
}

/* Copy button inside sheet */
.bottom-sheet .btn-secondary {
  opacity: 0;
  transform: translateY(10px);
}
.bottom-sheet.open .btn-secondary {
  opacity: 1;
  transform: none;
  transition-delay: 340ms;
}

/* Fix double QR: qrcodejs generates both canvas AND img — show only canvas */
#qrCode canvas { display: block !important; }
#qrCode img    { display: none  !important; }
#qrCode canvas {
  width:  clamp(160px, 42vw, 200px) !important;
  height: clamp(160px, 42vw, 200px) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   Toast
════════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: clamp(24px, 6vw, 36px); left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--text-primary); color: var(--bg);
  font-family: var(--font-d);
  font-size: 13px; font-weight: 600;
  padding: 11px 22px;
  border-radius: 50px; white-space: nowrap;
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.toast.show {
  animation: toast-in .32s var(--ease-spring) both;
}
@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.88); }
  60%  { transform: translateX(-50%) translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Loader & Error screens
════════════════════════════════════════════════════════════════════════════ */
.loader-screen, .error-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; z-index: 200;
  text-align: center; padding: 32px;
  transition: opacity var(--dur-md) ease, visibility var(--dur-md) ease;
}
.loader-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
.loader-ring {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid var(--border-strong);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
  font-family: var(--font-d); font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
}
.error-icon { font-size: 56px; color: var(--text-label); }
.error-title {
  font-family: var(--font-d); font-size: 22px; font-weight: 700;
  color: var(--text-primary);
}
.error-msg {
  font-size: 14px; color: var(--text-secondary);
  max-width: 300px; line-height: 1.55;
}
.debug-box {
  margin-top: 12px; padding: 12px 16px; border-radius: 12px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  font-family: monospace; font-size: 11px; color: #EF4444;
  max-width: min(360px, 90vw); white-space: pre-wrap; word-break: break-all;
  text-align: left; max-height: 200px; overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   Lightbox
════════════════════════════════════════════════════════════════════════════ */
.avatar-ring { cursor: zoom-in; }
.avatar-img  { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.lightbox-close {
  position: absolute;
  top: clamp(16px, 4vw, 24px);
  right: clamp(16px, 4vw, 24px);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: rotate(-90deg) scale(.7);
  transition:
    opacity    var(--dur-md) var(--ease-out-expo),
    transform  var(--dur-md) var(--ease-spring),
    background var(--dur-sm) linear;
}
.lightbox.open .lightbox-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition-delay: 180ms;
}
.lightbox-close:hover  { background: rgba(255,255,255,.22); transform: scale(1.1) rotate(90deg); }
.lightbox-close:active { transform: scale(.95); }
.lightbox-close .material-symbols-rounded { font-size: 22px; }

.lightbox-content {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.88);
  transition: transform .42s cubic-bezier(.22, 1.12, .36, 1), opacity .3s ease;
}
.lightbox.open .lightbox-content { transform: scale(1); }

.lightbox-img {
  width: min(88vw, 88vh, 520px);
  height: min(88vw, 88vh, 520px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 32px 80px rgba(0,0,0,.6),
    0 0 120px rgba(43,189,238,.18);
  user-select: none;
  -webkit-user-drag: none;
}

/* Brand SVG icons inside contact-icon-wrap */
.contact-icon-wrap svg { width: 22px; height: 22px; flex-shrink: 0; }
.whatsapp-icon { background: var(--wa-bg) !important; color: var(--wa-color) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   Responsive — desktop two-column layout
════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root { --content-w: 700px; }
  .scroll-area {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto;
    column-gap: 40px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
    padding: 48px var(--pad-x) 100px;
  }
  .header-section {
    grid-column: 1; grid-row: 1;
    padding-top: 0;
    position: sticky; top: 80px;
  }
  .section.identity-section {
    grid-column: 1; grid-row: 2;
    padding-top: 0; margin-top: 24px;
    max-width: none;
  }
  .section.actions-section {
    grid-column: 1; grid-row: 3;
    margin-top: 32px;
  }
  #contactSection   { grid-column: 2; grid-row: 1; margin-top: 0; }
  #socialSection    { grid-column: 2; grid-row: 2; }
  #messagingSection { grid-column: 2; grid-row: 3; }
  #otherSection     { grid-column: 2; grid-row: 4; }
  #pdfSection       { grid-column: 2; grid-row: 5; }
  .social-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Reduced motion — respect user preference
════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior: auto !important;
  }
  .avatar-ring, .company-chip, .mesh-bg { animation: none !important; }
  #phoneFrame,
  .avatar-ring,
  .logo-badge,
  .identity-section > *,
  .section,
  .contact-row,
  .note-row,
  .pdf-row,
  .social-pill,
  .qr-container,
  .sheet-url,
  .bottom-sheet .btn-secondary,
  .lightbox-close {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .logo-badge { transform: translateX(-50%) !important; }
}/* ════════════════════════════════════════════════════════════════════════════
   LUXURY THEME  — append this block to the end of main.css
   Activated by:  html.dark.luxury  (both classes present)
════════════════════════════════════════════════════════════════════════════ */

/* ── Luxury CSS Variables ─────────────────────────────────────────────────── */
html.luxury {
  --primary:        #D4AF37;
  --primary-dark:   #B8860B;
  --primary-shadow: rgba(212,175,55,0.25);
  --primary-10:     rgba(212,175,55,0.08);
  --primary-15:     rgba(212,175,55,0.14);

  --bg:             #0B0B0B;
  --surface:        #111111;
  --border:         rgba(212,175,55,0.12);
  --border-strong:  rgba(212,175,55,0.25);
  --text-primary:   #F5EDD8;
  --text-secondary: #C8BCA0;
  --text-label:     rgba(212,175,55,0.5);
  --chevron:        rgba(212,175,55,0.25);
  --social-bg:      rgba(212,175,55,0.05);
  --orb-1:          rgba(212,175,55,0.06);
  --orb-2:          rgba(212,175,55,0.03);

  --phone-bg:   rgba(212,175,55,0.10); --phone-color: #D4AF37;
  --email-bg:   rgba(212,175,55,0.08); --email-color: #D4AF37;
  --wa-bg:      rgba(37,211,102,0.10); --wa-color:    #25D366;
}

/* ── Luxury font imports ──────────────────────────────────────────────────── */
/* Add to your index.html <head>:
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap" rel="stylesheet">
*/

/* ── Luxury top bar ───────────────────────────────────────────────────────── */
html.luxury .top-bar {
  border-bottom: 0.5px solid rgba(212,175,55,0.15);
  background: rgba(11,11,11,0.75);
}

html.luxury .top-bar-brand {
  color: #D4AF37;
  letter-spacing: 0.18em;
}

html.luxury .brand-dot-sm {
  background: linear-gradient(135deg, #FFD700, #D4AF37);
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
}

/* ── Luxury profile name ─────────────────────────────────────────────────── */
html.luxury .profile-name {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #F5EDD8;
}

html.luxury .brand-tag { color: rgba(212,175,55,0.4); }
html.luxury .brand-dot { background: linear-gradient(135deg, #D4AF37, #FFD700); }

/* ── Luxury avatar ring ──────────────────────────────────────────────────── */
html.luxury .avatar-ring {
  background: conic-gradient(from 130deg, #D4AF37, rgba(11,11,11,0) 55%, #D4AF37);
  animation: avatar-glow-luxury 4s ease-in-out infinite;
}

@keyframes avatar-glow-luxury {
  0%, 100% {
    box-shadow:
      0 0 0  5px rgba(212,175,55,0.10),
      0 0 28px rgba(212,175,55,0.15),
      0 14px 40px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(212,175,55,0.18),
      0 0 48px rgba(212,175,55,0.25),
      0 14px 40px rgba(0,0,0,0.4);
  }
}

/* ── Luxury contact rows ──────────────────────────────────────────────────── */
html.luxury .contact-row {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(212,175,55,0.10);
}

html.luxury .contact-row:hover {
  background: rgba(212,175,55,0.05);
  border-color: rgba(212,175,55,0.30);
  box-shadow: 0 8px 28px rgba(212,175,55,0.12);
  transform: translateY(-3px) translateX(3px);
}

html.luxury .contact-row.row-pulse {
  animation: row-pulse-luxury 640ms ease-out forwards;
}
@keyframes row-pulse-luxury {
  0%   { background: rgba(255,255,255,0.02); }
  30%  { background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.4); }
  100% { background: rgba(255,255,255,0.02); }
}

/* ── Luxury social pills ─────────────────────────────────────────────────── */
html.luxury .social-pill {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(212,175,55,0.10);
}

html.luxury .social-pill:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.35);
  color: #D4AF37;
  box-shadow: 0 6px 22px rgba(212,175,55,0.15);
}

html.luxury .social-icon {
  background: rgba(212,175,55,0.07);
  border-color: rgba(212,175,55,0.15);
}

/* ── Luxury company chip ─────────────────────────────────────────────────── */
html.luxury .company-chip {
  background: rgba(212,175,55,0.07);
  border: 0.5px solid rgba(212,175,55,0.2);
}
html.luxury .company-chip:hover {
  background: rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.4);
}

/* ── Luxury primary button ───────────────────────────────────────────────── */
html.luxury .btn-primary {
  background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
  color: #0B0B0B;
  box-shadow: 0 8px 28px rgba(212,175,55,0.3);
  position: relative;
  overflow: hidden;
}

html.luxury .btn-primary::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

html.luxury .btn-primary:hover::before { left: 120%; }

html.luxury .btn-primary:hover {
  background: linear-gradient(135deg, #E5C84A 0%, #FFD700 50%, #C8960B 100%);
  box-shadow: 0 12px 36px rgba(212,175,55,0.45);
}

/* ── Luxury secondary button ─────────────────────────────────────────────── */
html.luxury .btn-secondary {
  background: rgba(212,175,55,0.07);
  color: #D4AF37;
  border-color: rgba(212,175,55,0.25);
}
html.luxury .btn-secondary:hover {
  background: rgba(212,175,55,0.14);
}

/* ── Luxury icon buttons ─────────────────────────────────────────────────── */
html.luxury .icon-btn {
  background: rgba(212,175,55,0.05);
  border-color: rgba(212,175,55,0.2);
  color: #D4AF37;
}
html.luxury .icon-btn:hover {
  border-color: rgba(212,175,55,0.5);
  color: #FFD700;
  box-shadow: 0 0 12px rgba(212,175,55,0.2);
}

/* ── Luxury theme toggle ─────────────────────────────────────────────────── */
html.luxury .theme-toggle {
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  box-shadow: 0 4px 20px rgba(212,175,55,0.35);
}
html.luxury .theme-toggle:hover {
  background: linear-gradient(135deg, #FFD700, #D4AF37);
}

/* ── Luxury bottom sheet ─────────────────────────────────────────────────── */
html.luxury .bottom-sheet {
  background: #0F0F0F;
  border-top: 0.5px solid rgba(212,175,55,0.2);
}
html.luxury .sheet-handle { background: rgba(212,175,55,0.3); }
html.luxury .sheet-title  { color: #D4AF37; }

/* ── Luxury section labels ───────────────────────────────────────────────── */
html.luxury .section-label {
  color: rgba(212,175,55,0.45);
  letter-spacing: 0.18em;
}

/* ── Luxury loader ───────────────────────────────────────────────────────── */
html.luxury .loader-ring {
  border-color: rgba(212,175,55,0.15);
  border-top-color: #D4AF37;
}

/* ── Luxury toast ────────────────────────────────────────────────────────── */
html.luxury .toast {
  background: rgba(212,175,55,0.12);
  border: 0.5px solid rgba(212,175,55,0.4);
  color: #D4AF37;
}

/* ── Luxury QR container ─────────────────────────────────────────────────── */
html.luxury .qr-container {
  border-color: rgba(212,175,55,0.3);
  box-shadow: 0 4px 24px rgba(212,175,55,0.12);
}

/* ── Luxury pronouns badge ───────────────────────────────────────────────── */
html.luxury .profile-pronouns {
  color: #D4AF37;
  background: rgba(212,175,55,0.10);
}

/* ── Luxury ripple ───────────────────────────────────────────────────────── */
html.luxury .ripple { background: rgba(212,175,55,0.2); }
html.luxury .btn-primary .ripple   { background: rgba(255,255,255,0.25); }
html.luxury .btn-secondary .ripple { background: rgba(212,175,55,0.25); }

/* ── Luxury mesh background orbs ────────────────────────────────────────── */
html.luxury .mesh-bg {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(212,175,55,0.06), transparent),
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(212,175,55,0.03), transparent);
}

/* ── Luxury note row ─────────────────────────────────────────────────────── */
html.luxury .note-row {
  background: rgba(212,175,55,0.03);
  border: 0.5px solid rgba(212,175,55,0.12);
  border-left: 2px solid rgba(212,175,55,0.4);
}

/* ── Luxury PDF row ──────────────────────────────────────────────────────── */
html.luxury .pdf-row {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(212,175,55,0.10);
}

/* ── Luxury lightbox ─────────────────────────────────────────────────────── */
html.luxury .lightbox-img {
  border-color: rgba(212,175,55,0.25);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.1),
    0 32px 80px rgba(0,0,0,0.7),
    0 0 120px rgba(212,175,55,0.15);
}

/* ── Decorative gold divider (optional, add to HTML if desired) ──────────── */
.gold-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
  margin: 0 auto;
}
html:not(.luxury) .gold-divider { display: none; }