/* ============================================
   Qurait Solutions — 3D Digital Business Card
   Dark ink + electric blue + brand red

   The palette is the logo's own: blue (--volt) is the primary and carries
   everything interactive, red (--flame) is the secondary reserved for
   emphasis. Greens are deliberately untouched — they signal availability
   and online status, which is a convention, not a brand decision.
   ============================================ */

:root {
  --bg: #08090b;
  --card-bg: linear-gradient(145deg, #0d0f13 0%, #14171c 50%, #0a0c10 100%);
  --volt: #0879f6;
  --volt-light: #5aa9ff;
  --volt-bright: #7cc0ff;
  --flame: #ec1429;
  --flame-glow: rgba(236, 20, 41, 0.3);
  --text-primary: #cfe2ff;
  --text-secondary: #a9c8f2;
  --text-muted: #78838f;
  --glass: rgba(13, 15, 19, 0.85);
  --glass-border: rgba(8, 121, 246, 0.15);
  --glass-border-hover: rgba(8, 121, 246, 0.35);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   CINEMATIC INTRO
   ========================================== */
.cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.cinematic-intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 20px var(--volt), 0 0 40px rgba(8, 121, 246, 0.3);
  opacity: 0;
  animation: introDotAppear 0.5s ease 0.2s forwards;
}

@keyframes introDotAppear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

.intro-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--volt), transparent);
  margin-top: -3px;
  animation: introLineExpand 0.6s ease 0.7s forwards;
}

@keyframes introLineExpand {
  0% { width: 0; opacity: 0; }
  100% { width: 200px; opacity: 1; }
}

.intro-text {
  margin-top: 20px;
  text-align: center;
  opacity: 0;
  animation: introTextAppear 0.5s ease 1.2s forwards;
}

@keyframes introTextAppear {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.intro-brand {
  font-family: 'Chakra Petch', sans-serif;
  /* Sized to hold the full name on one line. "QURAIT SOLUTIONS" at the old
     2.2rem/0.3em ran past 500px and overflowed a phone, so both size and
     tracking scale with the viewport instead of being fixed. */
  font-size: clamp(1.15rem, 5.4vw, 2.1rem);
  font-weight: 700;
  color: var(--volt);
  letter-spacing: 0.18em;
  margin-right: -0.18em;
  white-space: nowrap;
  display: block;
}

.intro-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.6em;
  color: var(--volt-light);
  opacity: 0;
  display: block;
  margin-top: 8px;
  text-align: center;
  line-height: 1.9;
  animation: introSubAppear 0.4s ease 2s forwards;
}

@keyframes introSubAppear {
  0% { opacity: 0; }
  100% { opacity: 0.7; }
}

.intro-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--flame);
  letter-spacing: 0.2em;
  margin-top: 30px;
  opacity: 0;
  animation: introStatusBlink 0.8s step-end 1.5s 3;
}

@keyframes introStatusBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.intro-outline {
  position: absolute;
  width: 370px;
  height: 580px;
  border: 1px solid transparent;
  border-radius: 20px;
  opacity: 0;
  animation: introOutlineAppear 0.6s ease 2.5s forwards;
}

@keyframes introOutlineAppear {
  0% { opacity: 0; border-color: transparent; transform: scale(1.1); }
  50% { opacity: 1; border-color: rgba(8, 121, 246, 0.3); }
  100% { opacity: 0; border-color: transparent; transform: scale(1); }
}

/* ==========================================
   THREE.JS BACKGROUND
   ========================================== */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.ambient-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(8, 121, 246, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: ambientPulse 6s ease-in-out infinite;
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* ==========================================
   MUTE BUTTON
   ========================================== */
.mute-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(13, 15, 19, 0.6);
  color: var(--volt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s ease 3.5s forwards;
}

.mute-btn:hover {
  background: rgba(8, 121, 246, 0.15);
  border-color: var(--glass-border-hover);
}

.mute-btn.muted {
  color: var(--text-muted);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ==========================================
   INSTRUCTION
   ========================================== */
.instruction {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeInUp 1s ease 3.8s forwards;
  transition: opacity 0.5s ease;
}

.instruction.hidden {
  opacity: 0;
  pointer-events: none;
}

.instruction i {
  color: var(--volt);
  animation: tapBounce 2s ease infinite;
}

@keyframes tapBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================
   CARD LAYOUT
   ========================================== */
.card-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  pointer-events: none;
}

.card-container {
  width: 370px;
  height: 580px;
  pointer-events: all;
  cursor: pointer;
  perspective: 1500px;
  opacity: 0;
  animation: cardEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 3s both;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 0 40px rgba(8, 121, 246, 0.08),
    0 0 80px rgba(8, 121, 246, 0.03),
    0 25px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.card-front {
  transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
}

.card-back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
}

/* Card Shine Effect */
.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%
  );
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease;
}

/* Holographic Shimmer */
.holo-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    var(--holo-angle, 135deg),
    rgba(255, 0, 50, 0.06) 0%,
    rgba(255, 160, 0, 0.06) 16%,
    rgba(255, 255, 0, 0.06) 33%,
    rgba(0, 255, 100, 0.06) 50%,
    rgba(0, 150, 255, 0.06) 66%,
    rgba(130, 0, 255, 0.06) 83%,
    rgba(255, 0, 50, 0.06) 100%
  );
  background-size: 200% 200%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

/* Animated Border Glow */
.card-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  z-index: -1;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    var(--volt) 10%,
    transparent 20%,
    transparent 80%,
    var(--flame) 90%,
    transparent 100%
  );
  opacity: 0.4;
  animation: borderGlow 6s linear infinite;
  filter: blur(2px);
}

@property --glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderGlow {
  from { --glow-angle: 0deg; }
  to { --glow-angle: 360deg; }
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(40px) rotateX(10deg);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0);
  }
}

/* Tap ripple */
.tap-ripple {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 121, 246, 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: rippleExpand 0.7s ease-out forwards;
  pointer-events: none;
  z-index: 50;
}

@keyframes rippleExpand {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

/* ==========================================
   FRONT FACE STYLES
   ========================================== */
.front-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Staggered content entrance */
.front-content > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card.entered .front-content > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.card.entered .front-content > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.card.entered .front-content > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.card.entered .front-content > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.card.entered .front-content > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.card.entered .front-content > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.card.entered .front-content > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }

/* Brand */
.brand {
  margin-bottom: 18px;
}

.brand-name {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    var(--volt) 0%,
    var(--volt-bright) 25%,
    var(--volt-light) 50%,
    var(--volt-bright) 75%,
    var(--volt) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brandShimmer 4s ease-in-out infinite;
}

@keyframes brandShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--volt-light);
  /* 0.6em tracking wrapped this onto two ragged lines once the wording grew
     from two words to three. Tightened just enough to hold one line at 430px,
     with the trailing space clipped so the text stays optically centred. */
  letter-spacing: 0.32em;
  margin-top: 5px;
  margin-right: -0.32em;
  opacity: 0.7;
  white-space: nowrap;
}

/* Photo */
.photo-container {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 16px;
}

.photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  border: 2px solid rgba(8, 121, 246, 0.4);
}

.photo-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: conic-gradient(from 0deg, var(--volt), var(--flame), var(--volt)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  animation: photoRingSpin 4s linear infinite;
}

@keyframes photoRingSpin {
  to { transform: rotate(360deg); }
}

.photo-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 121, 246, 0.15) 0%, transparent 70%);
  z-index: 0;
  animation: photoGlowPulse 3s ease-in-out infinite;
}

@keyframes photoGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Logo variant of the photo slot.
   The portrait version cover-crops to a circle, which would cut the S off a
   4:3 wordmark. Here the disc becomes a dark plate and the mark is contained
   inside it — the mark's highlights are near-white and need a dark ground. */
.logo-container .photo {
  object-fit: contain;
  padding: 7px;
  background: radial-gradient(circle at 50% 38%, #141922 0%, #08090b 100%);
  border-color: rgba(8, 121, 246, 0.45);
}

/* Name */
.name-section {
  margin-bottom: 14px;
}

.first-name,
.last-name {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  line-height: 1.25;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--volt-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.first-name {
  margin-bottom: 4px;
}

/* Animated Stats */
.stats-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(8, 121, 246, 0.04);
  border: 1px solid rgba(8, 121, 246, 0.08);
  position: relative;
  overflow: hidden;
}

.stats-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--volt), var(--flame), transparent);
  animation: statsLineSlide 4s ease-in-out infinite;
}

@keyframes statsLineSlide {
  0% { left: -100%; }
  100% { left: 100%; }
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--volt);
  line-height: 1;
}

.stat-plus {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1rem;
  color: var(--volt);
  opacity: 0.7;
}

.stat-label {
  display: block;
  font-size: 0.55rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(8, 121, 246, 0.15);
}

/* Tagline / Typing Bio */
.tagline {
  margin-bottom: 18px;
}

/* Typing Bio */
.typing-bio {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-prefix {
  color: var(--text-muted);
}

.typing-text {
  color: var(--volt-light);
  font-weight: 500;
  margin-left: 0.3em;
}

.typing-cursor {
  color: var(--volt);
  font-weight: 300;
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Two flat inks in the website's order — "Curate Smart." red, "Scale Fast."
   blue — rather than the animated gradient that ran through both. The site's
   own #d30000/#0035b6 are drawn for paper and fail contrast on ink, so this
   uses the lighter pair that holds the same hues. */
.tagline-sub {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.tagline-sub .tag-red { color: var(--flame); }
.tagline-sub .tag-blue { color: var(--volt); }

@keyframes taglineGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Front Actions */
.front-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.front-actions .front-save,
.front-actions .front-whatsapp {
  width: 100%;
  font-size: 0.7rem;
  padding: 10px 0;
  text-align: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================
   BACK FACE STYLES
   ========================================== */
.back-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.back-content::-webkit-scrollbar {
  display: none;
}

/* Back Header */
.back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.back-brand {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--volt);
  letter-spacing: 0.25em;
}

.flip-back-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(8, 121, 246, 0.05);
  color: var(--volt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.3s ease;
}

.flip-back-btn:hover {
  background: rgba(8, 121, 246, 0.15);
  border-color: var(--glass-border-hover);
}

/* Contact Section */
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.contact-item i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(8, 121, 246, 0.08);
  color: var(--volt);
  font-size: 0.65rem;
  flex-shrink: 0;
}

.contact-item a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 400;
  transition: color 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-item a:hover {
  color: var(--volt-light);
}

/* Achievements Section */
.achievements-section {
  margin-bottom: 12px;
}

.section-title {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--volt);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title i {
  font-size: 0.6rem;
}

.achievements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(8, 121, 246, 0.04);
  border: 1px solid rgba(8, 121, 246, 0.08);
  transition: all 0.3s ease;
}

.achievement-badge:hover {
  background: rgba(8, 121, 246, 0.1);
  border-color: rgba(8, 121, 246, 0.2);
}

.achievement-badge i {
  color: var(--volt);
  font-size: 0.55rem;
  flex-shrink: 0;
  opacity: 0.7;
}

.achievement-badge span {
  font-size: 0.6rem;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.3;
}

/* Project Showcase */
.projects-section {
  margin-bottom: 12px;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
}

.projects-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  padding-right: 20px;
  scroll-snap-type: x proximity;
}

.projects-scroll::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(236, 20, 41, 0.04);
  border: 1px solid rgba(236, 20, 41, 0.1);
  transition: all 0.3s ease;
  scroll-snap-align: start;
  min-width: 80px;
}

.project-card:hover {
  background: rgba(236, 20, 41, 0.1);
  border-color: rgba(236, 20, 41, 0.25);
  transform: translateY(-2px);
}

.project-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(236, 20, 41, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--flame);
  font-size: 0.7rem;
}

.project-card span {
  font-size: 0.55rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Social Section */
.social-section {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(8, 121, 246, 0.06);
  border: 1px solid rgba(8, 121, 246, 0.1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-btn:hover {
  background: rgba(8, 121, 246, 0.15);
  border-color: var(--volt);
  color: var(--volt);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(8, 121, 246, 0.15);
}

/* WhatsApp Button */
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
}

.whatsapp-btn i {
  font-size: 0.9rem;
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.whatsapp-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Action Buttons */
.action-section {
  display: flex;
  gap: 8px;
}

.save-btn, .share-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.save-btn {
  background: linear-gradient(135deg, var(--volt), #0044ad);
  color: #0a0c10;
  box-shadow: 0 4px 15px rgba(8, 121, 246, 0.25);
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 121, 246, 0.35);
}

.save-btn:active {
  transform: translateY(0);
}

.share-btn {
  background: rgba(236, 20, 41, 0.08);
  border: 1px solid rgba(236, 20, 41, 0.2);
  color: var(--flame);
}

.share-btn:hover {
  background: rgba(236, 20, 41, 0.15);
  border-color: var(--flame);
  transform: translateY(-2px);
}

/* Mobile touch feedback */
.save-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.share-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.social-btn:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.flip-back-btn:active {
  transform: scale(0.9);
  background: rgba(8, 121, 246, 0.2);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 420px) {
  .card-container {
    width: 88vw;
    height: 82vh;
    max-height: 620px;
  }

  .front-content {
    padding: 24px 20px;
  }

  .brand-name { font-size: 0.95rem; letter-spacing: 0.15em; }
  .first-name, .last-name { font-size: 1.3rem; }

  .stats-section {
    gap: 12px;
    padding: 8px 14px;
  }

  .stat-number { font-size: 1.1rem; }

  .back-content { padding: 18px 16px; }
  .achievements-grid { gap: 4px; }
  .achievement-badge { padding: 5px 6px; }
  .achievement-badge span { font-size: 0.55rem; }

  .intro-outline {
    width: 88vw;
    height: 82vh;
    max-height: 620px;
  }
}

@media (max-height: 700px) {
  .card-container { height: 85vh; }
  .brand { margin-bottom: 12px; }
  .photo-container { margin-bottom: 10px; }
  .name-section { margin-bottom: 10px; }
  .stats-section { margin-bottom: 10px; }
  .tagline { margin-bottom: 12px; }
}

/* ==========================================
   FLIP BURST EFFECT
   ========================================== */
.flip-particles {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.flip-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 6px currentColor;
  animation: particleBurst 0.8s ease-out forwards;
}

@keyframes particleBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot, 180deg)); }
}

/* ==========================================
   TOAST NOTIFICATION
   ========================================== */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 9999;
  padding: 12px 24px;
  border-radius: 12px;
  background: rgba(13, 15, 19, 0.95);
  border: 1px solid var(--glass-border);
  color: var(--volt-light);
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast i {
  color: var(--volt);
}

/* ==========================================
   CHATBOT
   ========================================== */
.chat-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(10, 10, 25, 0.9);
  color: var(--volt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(8, 121, 246, 0.1);
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s ease 3.8s forwards;
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(8, 121, 246, 0.2);
  border-color: var(--glass-border-hover);
}

.chat-fab.active {
  background: var(--volt);
  color: #0a0c10;
  border-color: var(--volt);
}

/* Chat Panel */
.chat-panel {
  position: fixed;
  bottom: 86px;
  left: 24px;
  z-index: 500;
  width: 320px;
  max-height: 440px;
  border-radius: 16px;
  background: rgba(10, 10, 25, 0.95);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.chat-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(8, 121, 246, 0.08);
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 121, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--volt);
  font-size: 0.85rem;
}

.chat-header-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-header-status {
  font-size: 0.6rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.chat-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 121, 246, 0.15) transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(8, 121, 246, 0.15);
  border-radius: 4px;
}

.chat-msg {
  display: flex;
}

.chat-msg.bot {
  justify-content: flex-start;
}

.chat-msg.user {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-msg.bot .chat-bubble {
  background: rgba(8, 121, 246, 0.08);
  border: 1px solid rgba(8, 121, 246, 0.1);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}

.chat-msg.user .chat-bubble {
  background: rgba(8, 121, 246, 0.2);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  opacity: 0.4;
  animation: typingDot 1.2s ease infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Suggestions */
.chat-suggestions {
  padding: 0 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(8, 121, 246, 0.15);
  background: rgba(8, 121, 246, 0.04);
  color: var(--volt-light);
  font-size: 0.65rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.chat-chip:hover {
  background: rgba(8, 121, 246, 0.12);
  border-color: var(--volt);
}

/* Input Bar */
.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(8, 121, 246, 0.08);
}

.chat-input {
  flex: 1;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(8, 121, 246, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input:focus {
  border-color: rgba(8, 121, 246, 0.3);
}

.chat-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--volt);
  color: #0a0c10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 10px rgba(8, 121, 246, 0.3);
}

/* Mobile chat panel */
@media (max-width: 420px) {
  .chat-panel {
    left: 10px;
    right: 10px;
    bottom: 80px;
    width: auto;
    max-height: 60vh;
  }

  .chat-fab {
    bottom: 16px;
    left: 16px;
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }
}

/* ==========================================
   AVAILABLE FOR HIRE BADGE
   ========================================== */
.hire-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-size: 0.58rem;
  font-weight: 600;
  color: #4ade80;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hire-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: hirePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes hirePulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
  50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 14px rgba(34, 197, 94, 0.9), 0 0 28px rgba(34, 197, 94, 0.3); }
}

/* ==========================================
   CARD EDGE LIGHT LEAK
   ========================================== */
.light-leak-edge {
  position: fixed;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  border-radius: 3px;
  animation: lightLeakFlash 0.75s ease-out forwards;
}

@keyframes lightLeakFlash {
  0% {
    opacity: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.4);
  }
  15% {
    opacity: 1;
    width: 6px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
      0 0 30px 12px rgba(255, 255, 255, 0.6),
      0 0 60px 25px rgba(8, 121, 246, 0.3),
      0 0 100px 50px rgba(236, 20, 41, 0.12);
  }
  45% {
    opacity: 0.4;
    width: 16px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow:
      0 0 20px 8px rgba(255, 255, 255, 0.2),
      0 0 50px 20px rgba(8, 121, 246, 0.1);
  }
  100% {
    opacity: 0;
    width: 30px;
    background: transparent;
    box-shadow: none;
  }
}

.light-leak-ambient {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(8, 121, 246, 0.03) 30%,
    transparent 60%
  );
  animation: ambientLeakFlash 0.6s ease-out forwards;
}

@keyframes ambientLeakFlash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================
   CONNECT BUTTON (Back Face)
   ========================================== */
.connect-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--flame), #89000f);
  color: #fff;
  box-shadow: 0 4px 15px rgba(236, 20, 41, 0.2);
}

.connect-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 20, 41, 0.35);
}

.connect-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

/* ==========================================
   QUICK CONNECT OVERLAY
   ========================================== */
.connect-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 6, 14, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.connect-overlay.open {
  opacity: 1;
  visibility: visible;
}

.connect-panel {
  width: 340px;
  max-height: 88vh;
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(13, 13, 26, 0.97) 0%, rgba(18, 18, 35, 0.97) 50%, rgba(10, 10, 20, 0.97) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(8, 121, 246, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 28px 24px;
  position: relative;
  overflow-y: auto;
  scrollbar-width: none;
  transform: scale(0.88) translateY(30px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.connect-overlay.open .connect-panel {
  transform: scale(1) translateY(0);
}

.connect-panel::-webkit-scrollbar { display: none; }

.connect-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s ease;
  z-index: 2;
}

.connect-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Event logo banner */
.event-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.event-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(8, 121, 246, 0.25);
  color: var(--text-muted, rgba(255,255,255,0.6));
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.event-chip:hover {
  background: rgba(8, 121, 246, 0.08);
  color: #fff;
}

.event-chip.active {
  background: linear-gradient(135deg, rgba(8, 121, 246, 0.25), rgba(236, 20, 41, 0.18));
  border-color: rgba(8, 121, 246, 0.6);
  color: #fff;
  box-shadow: 0 2px 12px rgba(8, 121, 246, 0.18);
}

.connect-event-logo {
  text-align: center;
  margin-bottom: 14px;
  padding: 14px 16px 10px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(8, 121, 246, 0.2);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.connect-event-logo.is-dark {
  background: linear-gradient(135deg, #0d0f13 0%, #10131a 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.connect-event-logo img {
  width: 200px;
  height: auto;
}

.connect-title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--volt);
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 4px;
}

.connect-title i {
  color: var(--flame);
  font-size: 0.9rem;
}

.connect-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.4;
}

/* Camera Viewfinder */
.connect-cam-wrap {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto 14px;
  overflow: visible;
  position: relative;
  background: rgba(8, 121, 246, 0.03);
  border: 2px solid rgba(8, 121, 246, 0.25);
  box-shadow:
    0 0 20px rgba(8, 121, 246, 0.08),
    inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.connect-cam-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: scaleX(-1);
  display: none;
}

.connect-cam-wrap .connect-cam-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}

.connect-cam-wrap .connect-cam-photo:not([src]),
.connect-cam-wrap .connect-cam-photo[src=""] {
  display: none !important;
}

.connect-cam-wrap canvas {
  display: none;
}

.connect-cam-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--volt-light);
  font-size: 2.5rem;
  opacity: 0.5;
  background: rgba(8, 121, 246, 0.04);
}

/* Camera Actions */
.connect-cam-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.cam-snap-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--volt);
  background: rgba(8, 121, 246, 0.08);
  color: var(--volt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  position: relative;
}

.cam-snap-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(8, 121, 246, 0.3);
}

.cam-snap-btn:hover {
  background: rgba(8, 121, 246, 0.18);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(8, 121, 246, 0.2);
}

.cam-snap-btn:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.cam-retake-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.68rem;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.cam-retake-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
}

/* Snap button overlaid on photo circle */
.cam-snap-overlay {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.cam-snap-overlay::before {
  inset: 2px;
}

/* Floating camera bubble for group selfies — draggable */
.cam-float-bubble {
  position: fixed;
  top: auto;
  left: auto;
  right: 16px;
  bottom: 100px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--volt);
  background: rgba(13, 13, 26, 0.92);
  color: var(--volt);
  cursor: grab;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 1002;
  box-shadow:
    0 4px 20px rgba(8, 121, 246, 0.3),
    0 0 30px rgba(8, 121, 246, 0.1);
  transition: left 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
  animation: floatBubblePulse 2s ease-in-out infinite;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.cam-float-bubble.visible {
  display: flex;
}

.cam-float-bubble:active {
  cursor: grabbing;
}

@keyframes floatBubblePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(8, 121, 246, 0.3), 0 0 30px rgba(8, 121, 246, 0.1); }
  50% { box-shadow: 0 4px 25px rgba(8, 121, 246, 0.4), 0 0 40px rgba(8, 121, 246, 0.2); }
}

@media (max-width: 420px) {
  .cam-float-bubble {
    /* JS will override position via top/left */
  }
}

/* Photo Preview Overlay */
.photo-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.photo-preview-overlay.open {
  opacity: 1;
  visibility: visible;
}

.photo-preview-overlay .preview-photo {
  max-width: 88vw;
  max-height: 65vh;
  border-radius: 12px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(8, 121, 246, 0.1);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-preview-overlay.open .preview-photo {
  transform: scale(1);
}

.preview-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  z-index: 2;
  transition: all 0.2s ease;
}

.preview-close-btn:active {
  transform: scale(0.9);
}

.preview-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--volt), #0044ad);
  box-shadow: 0 4px 20px rgba(8, 121, 246, 0.3);
  transition: all 0.3s ease;
}

.preview-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(8, 121, 246, 0.4);
}

.preview-download-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

.preview-download-btn i {
  font-size: 1rem;
}

/* Tappable hint on captured photo */
.connect-cam-wrap .connect-cam-photo[style*="block"] {
  cursor: pointer;
}

/* Form Fields */
.connect-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.connect-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(8, 121, 246, 0.1);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.connect-field:focus-within {
  border-color: rgba(8, 121, 246, 0.35);
  box-shadow: 0 0 15px rgba(8, 121, 246, 0.06);
}

.connect-field i {
  color: var(--volt);
  font-size: 0.75rem;
  opacity: 0.5;
  flex-shrink: 0;
}

.connect-field input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  outline: none;
}

.connect-field input::placeholder {
  color: var(--text-muted);
}

/* Event Stamp */
.connect-event-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(236, 20, 41, 0.04);
  border: 1px dashed rgba(236, 20, 41, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.connect-event-stamp::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(236, 20, 41, 0.04), transparent);
  animation: stampShine 4s ease-in-out infinite;
}

@keyframes stampShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.stamp-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(236, 20, 41, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--flame);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.stamp-text {
  display: flex;
  flex-direction: column;
}

.stamp-label {
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.stamp-event {
  font-family: 'Chakra Petch', sans-serif;
  /* Sized for the longest real event name rather than the shortest. At 1rem
     with 0.1em tracking, "Amanah Business Chamber" ran to three lines and
     shoved the stamp out of shape. */
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--flame);
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.stamp-venue {
  font-size: 0.48rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.stamp-date {
  margin-left: auto;
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  flex-shrink: 0;
}

/* Submit Button */
.connect-submit-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--volt), #0044ad);
  color: #0a0c10;
  box-shadow: 0 4px 20px rgba(8, 121, 246, 0.25);
  transition: all 0.3s ease;
}

.connect-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(8, 121, 246, 0.4);
}

.connect-submit-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Success State */
.connect-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0;
}

.connect-success.visible {
  display: flex;
  animation: successReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successReveal {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.success-check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.08);
  border: 2px solid rgba(34, 197, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 1.6rem;
  margin-bottom: 16px;
  animation: successCheckPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes successCheckPop {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

.success-title {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--volt-light);
  margin-bottom: 8px;
}

.success-desc {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 22px;
  line-height: 1.5;
}

.success-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
}

.success-whatsapp i {
  font-size: 1rem;
}

.success-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.success-done-btn {
  padding: 8px 28px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  transition: all 0.2s ease;
}

.success-done-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
}

/* Quick Connect Mobile */
@media (max-width: 420px) {
  .connect-panel {
    width: 92vw;
    padding: 24px 18px;
    max-height: 85vh;
  }

  .connect-cam-wrap {
    width: 110px;
    height: 110px;
  }

  .cam-snap-btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}