/* ============================================================
   PREMIUM.CSS — Dr. Vineet Verma
   Animations · Glassmorphism · Micro-interactions · Premium UI
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKEN EXTENSIONS
══════════════════════════════════════════════════════════ */
:root {
  /* Extended palette */
  --sage-glass:     rgba(59,122,106,.12);
  --sage-glow:      rgba(59,122,106,.25);
  --gold-glass:     rgba(200,167,90,.12);
  --gold-glow:      rgba(200,167,90,.3);
  --dark-glass:     rgba(7,26,18,.6);
  --white-glass:    rgba(255,255,255,.08);
  --white-glass-md: rgba(255,255,255,.14);

  /* Easing curves */
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-out-exp: cubic-bezier(.16,1,.3,1);
  --ease-in-out:  cubic-bezier(.76,0,.24,1);

  /* Transition speeds */
  --t-fast:   160ms;
  --t-mid:    280ms;
  --t-slow:   480ms;
  --t-crawl:  700ms;

  /* Extended shadows */
  --shadow-glow-sage: 0 0 40px rgba(59,122,106,.2);
  --shadow-glow-gold: 0 0 40px rgba(200,167,90,.25);
  --shadow-float:     0 24px 64px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
  --shadow-card:      0 1px 3px rgba(0,0,0,.04), 0 8px 32px rgba(59,122,106,.08);
  --shadow-card-hover:0 4px 6px rgba(0,0,0,.04), 0 20px 48px rgba(59,122,106,.16);

  /* Gradients */
  --grad-sage:   linear-gradient(135deg,#3B7A6A 0%,#2E6356 100%);
  --grad-gold:   linear-gradient(135deg,#C8A75A 0%,#E8C97A 50%,#C8A75A 100%);
  --grad-dark:   linear-gradient(140deg,#071a12 0%,#0c2619 50%,#071a12 100%);
  --grad-glass:  linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 100%);
  --grad-hero:   linear-gradient(135deg,#071a12 0%,#0c2619 35%,#112e1e 65%,#0a2016 100%);
}

/* ══════════════════════════════════════════════════════════
   2. REDUCED MOTION PREFERENCE
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   3. SCROLL-TRIGGERED REVEAL SYSTEM
══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out-exp),
              transform var(--t-slow) var(--ease-out-exp);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity var(--t-slow) var(--ease-out-exp),
              transform var(--t-slow) var(--ease-out-exp);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity var(--t-slow) var(--ease-out-exp),
              transform var(--t-slow) var(--ease-out-exp);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--t-slow) var(--ease-out-exp),
              transform var(--t-slow) var(--ease-spring);
}
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* Stagger delays */
.reveal-d1 { transition-delay: 60ms; }
.reveal-d2 { transition-delay: 120ms; }
.reveal-d3 { transition-delay: 180ms; }
.reveal-d4 { transition-delay: 240ms; }
.reveal-d5 { transition-delay: 300ms; }
.reveal-d6 { transition-delay: 360ms; }

/* ══════════════════════════════════════════════════════════
   4. GLASSMORPHISM COMPONENTS
══════════════════════════════════════════════════════════ */
.glass {
  background: var(--grad-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
}

.glass-sage {
  background: rgba(59,122,106,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59,122,106,.18);
  border-radius: var(--r-lg);
}

.glass-card {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-mid) var(--ease-out-exp),
              transform var(--t-mid) var(--ease-spring);
}
.glass-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.glass-dark {
  background: rgba(7,26,18,.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(59,122,106,.2);
  border-radius: var(--r-xl);
}

/* ══════════════════════════════════════════════════════════
   5. PREMIUM BUTTON SYSTEM
══════════════════════════════════════════════════════════ */

/* Ripple base */
.btn-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out-exp),
    background var(--t-mid) ease;
}
.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.btn-premium:hover::before { opacity: 1; }
.btn-premium:hover { transform: translateY(-2px); }
.btn-premium:active { transform: translateY(0) scale(.98); }

/* Ripple click effect */
.btn-premium::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.btn-premium:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
}

.btn-p-sage {
  background: var(--grad-sage);
  color: #fff;
  box-shadow: 0 4px 20px rgba(59,122,106,.3);
}
.btn-p-sage:hover { box-shadow: 0 8px 32px rgba(59,122,106,.45); }

.btn-p-gold {
  background: var(--grad-gold);
  color: #071a12;
  box-shadow: 0 4px 20px rgba(200,167,90,.3);
}
.btn-p-gold:hover { box-shadow: 0 8px 32px rgba(200,167,90,.5); }

.btn-p-glass {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
}
.btn-p-glass:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}

.btn-p-wa {
  background: linear-gradient(135deg,#25D366,#128C7E);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.btn-p-wa:hover { box-shadow: 0 8px 32px rgba(37,211,102,.45); }

.btn-p-lg { padding: 17px 34px; font-size: 15.5px; border-radius: 14px; }
.btn-p-sm { padding: 9px 18px; font-size: 13px; border-radius: 9px; }

/* Icon slot */
.btn-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.btn-premium:hover .btn-icon { background: rgba(255,255,255,.28); }

/* ══════════════════════════════════════════════════════════
   6. PREMIUM CARD SYSTEM
══════════════════════════════════════════════════════════ */
.p-card {
  background: var(--white);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  transition:
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out-exp),
    border-color var(--t-mid) ease;
  box-shadow: var(--shadow-card);
}
.p-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--sage-pale2);
}

.p-card-img {
  position: relative;
  overflow: hidden;
}
.p-card-img img {
  transition: transform var(--t-crawl) var(--ease-out-exp);
  width: 100%; display: block;
}
.p-card:hover .p-card-img img { transform: scale(1.06); }

/* Image overlay on hover */
.p-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,26,18,.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) ease;
}
.p-card:hover .p-card-img::after { opacity: 1; }

.p-card-body { padding: 24px; }

/* ══════════════════════════════════════════════════════════
   7. STAT COUNTERS — Animated number roll
══════════════════════════════════════════════════════════ */
.stat-counter {
  font-family: var(--display);
  font-size: clamp(36px,5vw,64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════
   8. PREMIUM NAVBAR ENHANCEMENTS
══════════════════════════════════════════════════════════ */
.navbar {
  transition: background var(--t-mid) ease,
              box-shadow var(--t-mid) ease,
              backdrop-filter var(--t-mid) ease;
}
.navbar.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
}

/* Hamburger smooth animation already in shared.js */
.ham-btn {
  transition:
    background var(--t-mid) ease,
    box-shadow var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring) !important;
}
.ham-btn:hover {
  background: #1a4232 !important;
  box-shadow: 0 4px 16px rgba(59,122,106,.4);
}
.ham-btn:active { transform: scale(.96) !important; }

/* Mega menu links hover polish */
.mega-link {
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring) !important;
}
.mega-link:hover { transform: translateY(-3px) !important; }

.mega-sub-link {
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring) !important;
}
.mega-sub-link:hover { transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════════════════════
   9. HERO PREMIUM OVERRIDES
══════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
}

/* Ambient background orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,122,106,.25) 0%, transparent 70%);
  top: -100px; right: -100px;
  animation-duration: 14s;
}
.hero-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(200,167,90,.15) 0%, transparent 70%);
  bottom: 0; left: -60px;
  animation-duration: 10s;
  animation-direction: alternate-reverse;
}

@keyframes orb-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(20px,-20px) scale(1.08); }
}

/* Floating hero stat chips */
@keyframes float-chip {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-float-1 { animation: float-chip 4s ease-in-out infinite; }
.hero-float-2 { animation: float-chip 4s ease-in-out infinite 1.2s; }
.hero-float-3 { animation: float-chip 4s ease-in-out infinite 2.4s; }
.hero-float-4 { animation: float-chip 4s ease-in-out infinite 0.6s; }

/* Pulsing dot */
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,211,136,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(59,211,136,0); }
}
.pulse-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3BD388;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Shimmer on gold gradient text */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.text-shimmer {
  background: linear-gradient(90deg,#C8A75A 0%,#F0D88A 40%,#C8A75A 60%,#E8C97A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   10. TREATMENT CARD PREMIUM
══════════════════════════════════════════════════════════ */
.svc-full-card {
  transition:
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out-exp),
    border-color var(--t-mid) ease !important;
  position: relative;
  overflow: hidden;
}
.svc-full-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,122,106,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) ease;
  pointer-events: none;
}
.svc-full-card:hover::before { opacity: 1; }
.svc-full-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(59,122,106,.16) !important;
  border-color: var(--sage-pale2) !important;
}

/* Image zoom on card hover */
.svc-card-img img {
  transition: transform var(--t-crawl) var(--ease-out-exp);
}
.svc-full-card:hover .svc-card-img img { transform: scale(1.05); }

/* ══════════════════════════════════════════════════════════
   11. PREMIUM SECTION BACKGROUNDS
══════════════════════════════════════════════════════════ */

/* Noise texture overlay for depth */
.bg-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .4;
}

/* Gradient mesh background */
.bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(59,122,106,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(200,167,90,.06) 0%, transparent 60%),
    var(--cream);
}

/* Dark section divider wave */
.wave-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -2px;
}
.wave-divider svg { display: block; }

/* ══════════════════════════════════════════════════════════
   12. TESTIMONIAL PREMIUM CARDS
══════════════════════════════════════════════════════════ */
.testi-card-premium {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out-exp);
}
.testi-card-premium::before {
  content: '"';
  position: absolute;
  top: -10px; right: 20px;
  font-family: var(--display);
  font-size: 120px;
  color: var(--sage-pale2);
  line-height: 1;
  pointer-events: none;
}
.testi-card-premium:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

/* ══════════════════════════════════════════════════════════
   13. FAQ PREMIUM ACCORDION
══════════════════════════════════════════════════════════ */
.faq-item {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.faq-item:hover { border-color: var(--sage-pale2); }
.faq-item.open  {
  border-color: var(--sage);
  box-shadow: 0 4px 20px rgba(59,122,106,.1);
}

.faq-q {
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.faq-item.open .faq-q { background: var(--sage-pale); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out-exp),
              padding var(--t-mid) ease;
  padding: 0 20px;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding: 0 20px 18px;
}

.faq-chevron {
  display: inline-block;
  transition: transform var(--t-mid) var(--ease-spring);
  font-style: normal;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════
   14. GALLERY PREMIUM
══════════════════════════════════════════════════════════ */
.g-card {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition:
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out-exp) !important;
}
.g-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--shadow-card-hover) !important;
}
.g-card-img img {
  transition: transform var(--t-crawl) var(--ease-out-exp);
}
.g-card:hover .g-card-img img { transform: scale(1.07); }

/* ══════════════════════════════════════════════════════════
   15. SCROLLBAR POLISH
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--sage-pale2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sage-light); }

/* ══════════════════════════════════════════════════════════
   16. FOCUS STYLES (Accessibility + Premium)
══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2.5px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   17. PREMIUM CONTACT / FORM
══════════════════════════════════════════════════════════ */
.form-input, .form-select, .form-textarea {
  transition:
    border-color var(--t-fast) ease,
    box-shadow var(--t-fast) ease,
    background var(--t-fast) ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(59,122,106,.12);
  background: #fff;
  outline: none;
}
.form-input:hover:not(:focus), .form-select:hover:not(:focus) {
  border-color: var(--sage-light);
}

/* ══════════════════════════════════════════════════════════
   18. SOCIAL BUTTONS PREMIUM
══════════════════════════════════════════════════════════ */
.social-btn {
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-fast) ease !important;
}
.social-btn:hover {
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(59,122,106,.3) !important;
}

/* ══════════════════════════════════════════════════════════
   19. WHATSAPP FLOAT PREMIUM
══════════════════════════════════════════════════════════ */
.wa-float {
  animation: wa-pulse 3s ease-in-out infinite;
  transition: transform var(--t-fast) var(--ease-spring) !important;
}
.wa-float:hover {
  transform: scale(1.14) !important;
  animation: none;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50%      { box-shadow: 0 4px 40px rgba(37,211,102,.7); }
}

/* ══════════════════════════════════════════════════════════
   20. PAGE TRANSITION
══════════════════════════════════════════════════════════ */
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-body {
  animation: page-in .5s var(--ease-out-exp) both;
}

/* ══════════════════════════════════════════════════════════
   21. FEATURE LIST PREMIUM
══════════════════════════════════════════════════════════ */
.feature-list li {
  transition: transform var(--t-fast) var(--ease-spring);
}
.feature-list li:hover { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════
   22. TAG / BADGE MICRO-INTERACTION
══════════════════════════════════════════════════════════ */
.tag {
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-fast) ease;
}
.tag:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(59,122,106,.15);
}

/* ══════════════════════════════════════════════════════════
   23. FOOTER LINK HOVER PREMIUM
══════════════════════════════════════════════════════════ */
.footer-links a {
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease-spring) !important;
}
.footer-links a:hover { transform: translateX(5px) !important; }

/* ══════════════════════════════════════════════════════════
   24. MOBILE GRID REFINEMENTS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .reveal, .reveal-left, .reveal-right {
    transform: translateY(20px);
  }
  .reveal-left, .reveal-right {
    transform: translateY(20px); /* simplify to vertical on mobile */
  }
}

/* ══════════════════════════════════════════════════════════
   25. PROCESS STEP CONNECTOR LINE
══════════════════════════════════════════════════════════ */
.process-step-premium {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
}
.step-num-premium {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-sage);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(59,122,106,.3);
  position: relative;
  z-index: 1;
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) ease;
}
.process-step-premium:hover .step-num-premium {
  transform: scale(1.12);
  box-shadow: 0 8px 24px rgba(59,122,106,.4);
}

/* ══ MOBILE ANIMATION PERFORMANCE ══ */
@media(max-width:768px){
  .hero-orb { display:none; } /* remove expensive blur on mobile */
  .glass-card { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .glass      { backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* Simpler transitions on mobile for 60fps */
  .p-card:hover,
  .glass-card:hover { transform:translateY(-3px) !important; }
  /* No card tilt on mobile */
  .glass-card, .p-card { transform-style:flat; perspective:none; }
}