/**
 * ==========================================================================
 * RAKAN ATOUM - PREMIUM DIGITAL BUSINESS CARD STYLESHEET
 * Luxury Executive Corporate Design System
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   1. CSS Variables & Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core Palette */
  --color-bg-primary: #101114;
  --color-bg-secondary: #1C1F24;
  --color-bg-card: rgba(28, 31, 36, 0.85);
  --color-bg-card-hover: rgba(36, 40, 47, 0.95);
  --color-bg-elevated: #242930;

  /* Gold Accent Hierarchy */
  --color-gold-light: #FFD66B;
  --color-gold: #F5BE35;
  --color-gold-dark: #C69214;
  --color-gold-muted: rgba(245, 190, 53, 0.15);
  --color-gold-glow: rgba(245, 190, 53, 0.25);

  /* WhatsApp Brand */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5D;
  --color-whatsapp-bg: rgba(37, 211, 102, 0.12);

  /* Neutrals & Text */
  --color-text-white: #FFFFFF;
  --color-text-muted: #A5A7AC;
  --color-text-subtle: #6B7280;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-gold: rgba(245, 190, 53, 0.28);
  --color-border-gold-hover: rgba(255, 214, 107, 0.7);

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevations & Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border);
  --shadow-gold: 0 12px 28px -6px rgba(245, 190, 53, 0.35);
  --shadow-portrait: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 0 35px -5px rgba(245, 190, 53, 0.2);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Base Setup
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg-primary);
  color: var(--color-text-white);
}

body {
  font-family: var(--font-family);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  position: relative;
  background-color: var(--color-bg-primary);
  line-height: 1.5;
  padding: 1.5rem 1rem;
}

/* --------------------------------------------------------------------------
   3. Ambient Decorative Background
   -------------------------------------------------------------------------- */
.bg-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-glow-top {
  position: absolute;
  top: -150px;
  left: 20%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 190, 53, 0.08) 0%, rgba(245, 190, 53, 0) 70%);
  filter: blur(60px);
  animation: pulseGlow 14s ease-in-out infinite alternate;
}

.ambient-glow-bottom {
  position: absolute;
  bottom: -200px;
  right: 15%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 190, 53, 0.06) 0%, rgba(245, 190, 53, 0) 70%);
  filter: blur(80px);
  animation: pulseGlow 18s ease-in-out infinite alternate-reverse;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 80%);
}

@keyframes pulseGlow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
  50% { transform: scale(1.15) translate(25px, -20px); opacity: 0.9; }
  100% { transform: scale(0.95) translate(-20px, 15px); opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   4. Main Container & Card Shell
   -------------------------------------------------------------------------- */
.main-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: auto;
}

.card-container {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 32px;
  padding: 3rem 3.25rem;
  box-shadow: 
    0 24px 60px -15px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color var(--transition-smooth);
}

.card-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 190, 53, 0.2) 20%, 
    rgba(245, 190, 53, 0.8) 50%, 
    rgba(255, 214, 107, 0.3) 80%, 
    transparent 100%
  );
}

/* --------------------------------------------------------------------------
   5. Two-Column Layout Grid
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Left Column */
.col-visual {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Right Column */
.col-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   6. Company Branding (Logo)
   -------------------------------------------------------------------------- */
.company-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrapper {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 17, 20, 0.6);
  padding: 0.65rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.logo-wrapper:hover {
  border-color: var(--color-border-gold);
  background: rgba(16, 17, 20, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.company-logo {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

.brand-badge {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--color-gold-muted);
  border: 1px solid rgba(245, 190, 53, 0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Portrait Container
   -------------------------------------------------------------------------- */
.portrait-card {
  position: relative;
  width: 100%;
  border-radius: 28px 10px 28px 28px; /* Luxury asymmetric contour */
  background: #15171B;
  padding: 4px;
  box-shadow: var(--shadow-portrait);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.portrait-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 45px -5px rgba(245, 190, 53, 0.3);
}

.portrait-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(255, 214, 107, 0.5) 0%, 
    rgba(245, 190, 53, 0.15) 40%, 
    rgba(255, 255, 255, 0.04) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.portrait-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px 8px 24px 24px;
  overflow: hidden;
  background-color: #17191E;
  z-index: 2;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portrait-card:hover .portrait-img {
  transform: scale(1.03);
}

/* Subtle corner luxury accent */
.portrait-badge-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 17, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 190, 53, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  color: var(--color-gold-light);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold);
  animation: pulseDot 2.2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   8. Executive WhatsApp QR Code Card
   -------------------------------------------------------------------------- */
.qr-section {
  position: relative;
  background: #14161A;
  border: 1px solid rgba(245, 190, 53, 0.2);
  border-radius: 24px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.qr-section:hover {
  border-color: rgba(245, 190, 53, 0.45);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 190, 53, 0.12);
}

.qr-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.qr-icon-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-whatsapp);
}

.qr-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-white);
  letter-spacing: 0.02em;
}

/* Pure high-contrast container for optical camera scannability */
.qr-frame {
  position: relative;
  background: #FFFFFF;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid var(--color-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin-bottom: 0.85rem;
  transition: transform var(--transition-smooth);
}

.qr-section:hover .qr-frame {
  transform: scale(1.02);
}

#qrcode-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 176px;
  overflow: hidden;
}

#qrcode-canvas-container canvas,
#qrcode-canvas-container img {
  display: block !important;
  width: 176px !important;
  height: 176px !important;
  object-fit: contain;
}

.qr-caption {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* QR Placeholder when WhatsApp number is not yet configured */
.qr-placeholder-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  color: #101114;
}

.qr-placeholder-icon {
  margin-bottom: 6px;
}

.qr-placeholder-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #101114;
  margin-bottom: 4px;
}

.qr-placeholder-desc {
  font-size: 0.68rem;
  color: #555860;
  line-height: 1.3;
}

.qr-placeholder-desc code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
}

/* --------------------------------------------------------------------------
   9. Identity & Typography Header
   -------------------------------------------------------------------------- */
.profile-header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.profile-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: linear-gradient(135deg, rgba(245, 190, 53, 0.14) 0%, rgba(245, 190, 53, 0.04) 100%);
  border: 1px solid rgba(245, 190, 53, 0.35);
  padding: 0.38rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.role-badge-text {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.profile-name {
  font-size: 2.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-white);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.profile-company-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.company-accent {
  color: var(--color-text-white);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. Contact Cards Section
   -------------------------------------------------------------------------- */
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 1.1rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-smooth);
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(245, 190, 53, 0.04), transparent);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-gold-hover);
  background: #17191E;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 18px rgba(245, 190, 53, 0.12);
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card-left {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  z-index: 1;
}

.contact-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(245, 190, 53, 0.1);
  border: 1px solid rgba(245, 190, 53, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  flex-shrink: 0;
  transition: all var(--transition-smooth);
}

.contact-card:hover .contact-icon-box {
  background: var(--color-gold);
  color: #101114;
  border-color: var(--color-gold-light);
  transform: scale(1.05);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contact-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-white);
  letter-spacing: 0.01em;
  transition: color var(--transition-fast);
}

.contact-value.text-placeholder {
  color: var(--color-gold);
  font-family: monospace;
  font-size: 0.95rem;
}

.contact-card:hover .contact-value {
  color: var(--color-gold-light);
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}

.contact-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contact-copy-btn:hover {
  background: var(--color-gold-muted);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.contact-copy-btn.copy-success {
  background: rgba(37, 211, 102, 0.18);
  border-color: var(--color-whatsapp);
  color: var(--color-whatsapp);
}

.contact-arrow-icon {
  color: var(--color-text-subtle);
  transition: all var(--transition-fast);
}

.contact-card:hover .contact-arrow-icon {
  color: var(--color-gold);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   11. Primary Action Buttons
   -------------------------------------------------------------------------- */
.action-buttons-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  margin-top: 0.5rem;
}

.btn-primary-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 1.4rem;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition-smooth);
  overflow: hidden;
}

/* Save Contact (Luxury Gold Gradient) */
.btn-save-contact {
  background: linear-gradient(135deg, #FFD66B 0%, #F5BE35 50%, #D49B1E 100%);
  color: #101114;
  box-shadow: var(--shadow-gold);
}

.btn-save-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-save-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -6px rgba(245, 190, 53, 0.5);
}

.btn-save-contact:hover::before {
  transform: translateX(100%);
}

.btn-save-contact:active,
.btn-save-contact.btn-clicked {
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(245, 190, 53, 0.4);
}

/* WhatsApp Action Button */
.btn-whatsapp-action {
  background: #181B20;
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn-whatsapp-action:hover {
  background: #25D366;
  color: #101114;
  border-color: #25D366;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(37, 211, 102, 0.45);
}

.btn-whatsapp-action .btn-icon-wa {
  color: var(--color-whatsapp);
  transition: color var(--transition-fast);
}

.btn-whatsapp-action:hover .btn-icon-wa {
  color: #101114;
}

.btn-whatsapp-action:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   12. Footer Copyright / Tag
   -------------------------------------------------------------------------- */
.card-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}

.card-footer a {
  color: var(--color-gold);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.card-footer a:hover {
  color: var(--color-gold-light);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. Toast Notification Component
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  width: calc(100% - 48px);
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #1C1F24;
  border: 1px solid rgba(245, 190, 53, 0.35);
  border-radius: 16px;
  padding: 14px 18px;
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-item.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-item.toast-hiding {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.toast-content {
  flex: 1;
}

.toast-message {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text-white);
  font-weight: 500;
}

.toast-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.toast-close:hover {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   14. Sequential Entrance Animations
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   15. Responsive Adaptations
   -------------------------------------------------------------------------- */
/* Tablet & Medium Screens */
@media (max-width: 960px) {
  .card-container {
    padding: 2.25rem 2rem;
    border-radius: 28px;
  }

  .card-grid {
    grid-template-columns: 310px 1fr;
    gap: 2.25rem;
  }

  .profile-name {
    font-size: 2.4rem;
  }
}

/* Mobile Screens (Single-Column App-Like Flow) */
@media (max-width: 768px) {
  body {
    padding: 1rem 0.75rem;
  }

  .card-container {
    padding: 1.75rem 1.25rem;
    border-radius: 24px;
  }

  /* Switch grid to mobile single-column matching exact user specification order */
  .card-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .col-visual,
  .col-info {
    display: contents;
  }

  /* Re-order elements intentionally on mobile */
  /*
     1. Company logo
     2. Professional portrait
     3. Rakan Atoum
     4. Sales Manager
     5. Personal phone
     6. Company phone
     7. Company website
     8. Save Contact button
     9. WhatsApp button
     10. WhatsApp QR code
  */
  .company-branding {
    order: 1;
    justify-content: center;
    margin-bottom: 0.25rem;
  }

  .portrait-card {
    order: 2;
    max-width: 290px;
    margin: 0 auto;
    border-radius: 24px 10px 24px 24px;
  }

  .profile-header {
    order: 3;
    text-align: center;
    align-items: center;
  }

  .profile-name {
    font-size: 2.15rem;
  }

  .profile-company-line {
    justify-content: center;
    font-size: 0.95rem;
  }

  .contact-section {
    order: 4;
  }

  .action-buttons-group {
    order: 5;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .btn-primary-action {
    width: 100%;
    padding: 1.05rem 1rem;
    font-size: 1.02rem;
  }

  .qr-section {
    order: 6;
    margin-top: 0.5rem;
  }

  .contact-card {
    padding: 0.95rem 1.15rem;
    border-radius: 16px;
  }

  .contact-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .contact-value {
    font-size: 0.98rem;
    white-space: nowrap;
  }

  .card-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }
}

/* Extra small devices */
@media (max-width: 380px) {
  .portrait-card {
    max-width: 240px;
  }

  .profile-name {
    font-size: 1.85rem;
  }

  .qr-frame {
    width: 170px;
    height: 170px;
  }

  #qrcode-canvas-container,
  #qrcode-canvas-container canvas,
  #qrcode-canvas-container img {
    width: 148px !important;
    height: 148px !important;
  }
}

/* --------------------------------------------------------------------------
   16. Accessibility & Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}