/* ===================================
   CSS Custom Properties (Design Tokens)
   =================================== */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-darker: #1e40af;
  --primary-light: #3b82f6;
  --primary-bg: #eff6ff;
  --primary-bg-subtle: #f0f7ff;
  --accent: #10b981;
  --accent-dark: #059669;
  --accent-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-bg: #fef9c3;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white: #ffffff;
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.09);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.12);
  --shadow-primary: 0 4px 14px rgba(37,99,235,0.25);
  --shadow-primary-lg: 0 8px 24px rgba(37,99,235,0.3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50%;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast: 0.15s;
  --dur: 0.25s;
  --dur-slow: 0.4s;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;
  --font-mono: 'JetBrains Mono','Courier New',monospace;
  --nav-h: 72px;
  --nav-h-m: 60px;
}

/* ===================================
   Global Reset & Base
   =================================== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--dur-fast) ease; }
button { font-family:inherit; cursor:pointer; border:none; background:none; -webkit-tap-highlight-color:transparent; }
input,select,textarea { font-family:inherit; border:none; outline:none; }
::selection { background:var(--primary); color:var(--white); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-sm); }

/* ===================================
   Utilities
   =================================== */
.container { max-width:1280px; margin:0 auto; padding:0 20px; }

/* ===================================
   Scroll Reveal Animations
   =================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity:0; transform:translateX(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity:0; transform:scale(0.92);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-spring);
}
.reveal-scale.visible { opacity:1; transform:scale(1); }

.stagger-children .reveal:nth-child(1) { transition-delay:0.05s; }
.stagger-children .reveal:nth-child(2) { transition-delay:0.1s; }
.stagger-children .reveal:nth-child(3) { transition-delay:0.15s; }
.stagger-children .reveal:nth-child(4) { transition-delay:0.2s; }
.stagger-children .reveal:nth-child(5) { transition-delay:0.25s; }
.stagger-children .reveal:nth-child(6) { transition-delay:0.3s; }
.stagger-children .reveal:nth-child(7) { transition-delay:0.35s; }

/* ===================================
   Buttons
   =================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; font-size:15px; font-weight:600;
  border-radius:var(--radius-md);
  transition:all var(--dur) var(--ease-out);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,0.3) 0%,transparent 70%);
  opacity:0; transition:opacity var(--dur-fast) ease;
}
.btn:active::after { opacity:1; }
.btn:active { transform:scale(0.97); }

.btn-primary { background:var(--primary); color:var(--white); box-shadow:var(--shadow-primary); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-2px); }

.btn-secondary { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-secondary:hover { background:var(--primary); color:var(--white); box-shadow:var(--shadow-primary); transform:translateY(-2px); }

/* ===================================
   Form Styles
   =================================== */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:12px; font-weight:700; color:var(--gray-700);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--gray-200); border-radius:var(--radius-md);
  font-size:15px; transition:all var(--dur) ease;
  background:var(--white); color:var(--gray-900);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--gray-400); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; }
.spinner {
  width:20px; height:20px;
  border:3px solid var(--gray-100); border-top:3px solid var(--primary);
  border-radius:var(--radius-full); animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.alert {
  padding:12px 16px; border-radius:var(--radius-md); margin-bottom:16px;
  display:flex; align-items:center; gap:12px; font-size:14px;
  animation:slideIn 0.3s var(--ease-out);
}
.alert-success { background:var(--accent-bg); color:#065f46; border-left:4px solid var(--accent); }
.alert-error { background:var(--danger-bg); color:#991b1b; border-left:4px solid var(--danger); }
.alert-info { background:#dbeafe; color:#0c2d6b; border-left:4px solid var(--primary); }

@media (max-width:768px) {
  .container { padding:0 16px; }
  .form-row { grid-template-columns:1fr; }
  .btn { padding:13px 20px; font-size:14px; min-height:48px; }
  .form-group input,.form-group select,.form-group textarea { font-size:16px; padding:14px; }
}

/* ===================================
   App Layout
   =================================== */
.app { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); overflow-x:hidden; }
.main-content { flex:1; margin-top:var(--nav-h); background:var(--bg); }
@media (max-width:768px) { .main-content { margin-top:var(--nav-h-m); } }

/* ===================================
   Navigation
   =================================== */
.nav {
  position:fixed; top:0; left:0; right:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(0,0,0,0.05);
  z-index:50;
  transition:box-shadow var(--dur) ease, background var(--dur) ease;
}
.nav.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.08); background:rgba(255,255,255,0.97); }

.nav-container { display:flex; justify-content:space-between; align-items:center; height:var(--nav-h); }

.nav-logo {
  text-decoration:none; cursor:pointer;
  transition:opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.nav-logo:hover { transform:translateY(-1px); }
.nav-logo:active { opacity:0.7; }

.logo-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.logo-main {
  font-weight:800; font-size:22px;
  background:linear-gradient(135deg,var(--primary) 0%,#4f46e5 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:-0.5px;
}
.logo-sub { font-size:11px; font-weight:500; color:var(--gray-400); letter-spacing:0.8px; text-transform:uppercase; }

.nav-links { display:none; gap:8px; }
.nav-link {
  background:none; border:none; text-decoration:none;
  color:var(--gray-600); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--dur-fast) ease;
  padding:8px 14px; border-radius:var(--radius-sm); position:relative;
}
.nav-link:hover { color:var(--primary); background:var(--primary-bg); }

.nav-cta {
  background:var(--primary); color:var(--white);
  padding:10px 22px; border-radius:var(--radius-md);
  border:none; cursor:pointer; font-size:13px; font-weight:600;
  transition:all var(--dur) var(--ease-out);
  white-space:nowrap; box-shadow:var(--shadow-primary);
}
.nav-cta:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-primary-lg); }
.nav-cta:active { transform:translateY(0); }

.mobile-toggle {
  background:none; border:none; font-size:20px; cursor:pointer;
  color:var(--gray-700); display:flex; padding:10px;
  border-radius:var(--radius-sm); transition:all var(--dur-fast) ease;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.mobile-toggle:hover { background:var(--gray-100); }
.mobile-toggle:active { background:var(--primary-bg); }

.mobile-menu {
  display:none; background:var(--white);
  border-top:1px solid var(--gray-100);
  padding:8px 12px 16px; width:100%;
  animation:menuSlideDown 0.3s var(--ease-out);
}
.mobile-menu.active { display:block; }

@keyframes menuSlideDown {
  from { opacity:0; transform:translateY(-12px); }
  to { opacity:1; transform:translateY(0); }
}

.mobile-link {
  display:flex; align-items:center;
  padding:14px 16px; text-decoration:none; color:var(--gray-700);
  font-weight:500; cursor:pointer; background:none; border:none;
  font-size:15px; width:100%; text-align:left;
  border-radius:var(--radius-md); transition:all var(--dur-fast) ease;
  min-height:48px;
}
.mobile-link:hover { background:var(--primary-bg); color:var(--primary); }
.mobile-link:active { background:#dbeafe; color:var(--primary); }

@media (min-width:768px) {
  .nav-container { height:var(--nav-h); }
  .nav-links { display:flex; }
  .mobile-toggle { display:none; }
  .mobile-menu { display:none !important; }
}

@media (max-width:767px) {
  .nav-container { height:var(--nav-h-m); padding:0 12px; gap:6px; }
  .mobile-toggle { order:1; flex-shrink:0; }
  .nav-logo { order:2; flex:1; min-width:0; display:flex; justify-content:center; }
  .logo-text { align-items:center; }
  .logo-main { font-size:15px; letter-spacing:-0.2px; }
  .logo-sub { font-size:8px; letter-spacing:0.5px; }
  .nav-cta { order:3; padding:9px 14px; font-size:11px; border-radius:var(--radius-sm); flex-shrink:0; }
  .mobile-menu { display:none; box-shadow:0 12px 30px rgba(0,0,0,0.1); }
  .mobile-menu.active { display:block; }
  .nav--appointments .logo-main { font-size:18px; }
  .nav--appointments .logo-sub { font-size:10px; }
}

@media (min-width:768px) and (max-width:1024px) {
  .nav--appointments .logo-main { font-size:26px; }
  .nav--appointments .logo-sub { font-size:13px; }
}

@media (max-width:380px) {
  .logo-main { font-size:13px; }
  .nav-cta { padding:8px 10px; font-size:10px; }
}

/* ===================================
   Footer
   =================================== */
.footer {
  background:linear-gradient(135deg,var(--gray-900) 0%,#0f172a 100%);
  color:var(--white); padding:20px; text-align:center; position:relative;
}
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),#8b5cf6,var(--primary));
}
.footer-content { text-align:center; }
.footer-content p { margin:0; font-size:13px; color:rgba(255,255,255,0.6); letter-spacing:0.3px; }

.whatsapp-chat { position:fixed; bottom:74px; right:20px; z-index:100; text-decoration:none; }
.whatsapp-button {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; background:#25d366; color:var(--white);
  border-radius:var(--radius-full); font-size:26px;
  box-shadow:0 4px 16px rgba(37,211,102,0.4);
  transition:all var(--dur) var(--ease-spring);
  animation:whatsappPulse 3s ease-in-out infinite;
}
.whatsapp-button:hover { background:#20ba5a; transform:scale(1.12); box-shadow:0 6px 24px rgba(37,211,102,0.5); }

@keyframes whatsappPulse {
  0%,100% { box-shadow:0 4px 16px rgba(37,211,102,0.4); }
  50% { box-shadow:0 4px 24px rgba(37,211,102,0.6),0 0 0 8px rgba(37,211,102,0.1); }
}

@media (max-width:768px) {
  .footer { padding:14px 16px; }
  .footer-content p { font-size:11px; }
  .whatsapp-chat { bottom:68px; right:14px; }
  .whatsapp-button { width:50px; height:50px; font-size:23px; }
}

/* ===================================
   Sticky Callback Bar
   =================================== */
.sticky-callback-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(37,99,235,0.15);
  padding:10px 16px; box-shadow:0 -4px 24px rgba(0,0,0,0.08);
}
.sticky-callback-label {
  text-align:center; font-size:10px; font-weight:700;
  color:var(--primary); margin:0 0 6px; letter-spacing:1px; text-transform:uppercase;
}
.sticky-callback-form { display:flex; align-items:center; gap:10px; max-width:500px; margin:0 auto; flex-wrap:wrap; }
.sticky-callback-form .form-error { width:100%; text-align:center; margin:-4px 0 0; order:3; }
.sticky-callback-input-wrap {
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--white); border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md); padding:0 12px;
  transition:all var(--dur) ease; box-shadow:var(--shadow-xs);
}
.sticky-callback-input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }
.sticky-callback-input-wrap i { color:var(--primary); font-size:13px; flex-shrink:0; }
.sticky-callback-input-wrap input {
  flex:1; background:none; border:none; outline:none;
  color:var(--gray-900); font-size:14px; font-family:inherit;
  padding:10px 0; min-width:0;
}
.sticky-callback-input-wrap input::placeholder { color:var(--gray-400); }

.sticky-callback-form button {
  display:flex; align-items:center; gap:6px;
  padding:10px 18px; background:var(--primary); color:var(--white);
  border:none; border-radius:var(--radius-md);
  font-size:13px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:all var(--dur) var(--ease-out);
  flex-shrink:0; box-shadow:var(--shadow-primary);
}
.sticky-callback-form button:hover:not(:disabled) { background:var(--primary-dark); transform:translateY(-1px); box-shadow:var(--shadow-primary-lg); }
.sticky-callback-form button:disabled { opacity:0.5; cursor:not-allowed; }
.sticky-callback-form button i { font-size:13px; }

.sticky-callback-success {
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--accent); font-size:14px; font-weight:600; padding:6px 0;
  animation:fadeInBar 0.4s var(--ease-out);
}
.sticky-callback-success i { font-size:18px; }

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

@media (max-width:480px) {
  .sticky-callback-bar { padding:8px 10px; }
  .sticky-callback-form { gap:6px; }
  .sticky-callback-form .form-error { font-size:11px; margin:-2px 0 0; }
  .sticky-callback-input-wrap { padding:0 10px; }
  .sticky-callback-input-wrap input { font-size:13px; padding:9px 0; }
  .sticky-callback-form button { padding:9px 12px; font-size:12px; }
  .sticky-callback-form button span { display:none; }
  .sticky-callback-form button i { font-size:15px; }
}

/* ===================================
   Home Page
   =================================== */
.homepage { width:100%; padding-bottom:60px; }
.homepage > * { scroll-margin-top:80px; }

/* Hero */
.hero-section {
  padding:40px 20px 20px; scroll-margin-top:80px;
  width:100%; overflow:hidden;
  background:linear-gradient(170deg,var(--primary-bg) 0%,var(--white) 50%,var(--bg-subtle) 100%);
  position:relative;
}
.hero-section::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(37,99,235,0.06) 0%,transparent 70%);
  border-radius:var(--radius-full); pointer-events:none;
}
.hero-section::after {
  content:''; position:absolute; bottom:-50px; left:-80px;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(16,185,129,0.05) 0%,transparent 70%);
  border-radius:var(--radius-full); pointer-events:none;
}
.hero-container {
  display:flex; gap:48px; max-width:1280px; margin:0 auto;
  align-items:center; width:100%; box-sizing:border-box;
  position:relative; z-index:1;
}
.hero { flex:1; }
.hero h1 {
  font-size:48px; font-weight:800; line-height:1.12;
  color:var(--gray-900); margin-bottom:18px; letter-spacing:-1px;
}
.hero h1 .highlight {
  background:linear-gradient(135deg,var(--primary) 0%,#7c3aed 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero p { font-size:17px; color:var(--gray-500); line-height:1.7; margin-bottom:28px; max-width:520px; }

.button-group { display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap; }

.homepage .btn {
  padding:14px 28px; font-size:15px; border:none;
  border-radius:var(--radius-md); cursor:pointer;
  transition:all var(--dur) var(--ease-out); font-weight:600;
}
.homepage .btn-primary {
  background:var(--primary); color:var(--white);
  border:2px solid var(--primary); box-shadow:var(--shadow-primary);
}
.homepage .btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-2px); }

.homepage .btn-secondary { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.homepage .btn-secondary:hover { background:var(--primary); color:var(--white); box-shadow:var(--shadow-primary); transform:translateY(-2px); }

.certification {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--gray-400); font-weight:600; letter-spacing:0.2px;
  padding:8px 16px; background:rgba(37,99,235,0.04);
  border-radius:var(--radius-xl); border:1px solid rgba(37,99,235,0.08);
}

/* Booking Card */
.booking-section { flex:1; min-width:350px; margin-top:0; }
.booking-card {
  padding:36px; background:var(--white);
  border-radius:var(--radius-xl); border:1px solid var(--gray-200);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.booking-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--primary),#8b5cf6);
}
.booking-card h2 { font-size:24px; margin-bottom:8px; color:var(--gray-900); font-weight:800; }
.booking-card > p { font-size:14px; color:var(--gray-500); margin-bottom:24px; line-height:1.6; }
.booking-form { display:block; }
.homepage .form-group { margin-bottom:16px; }
.homepage .form-group label {
  font-size:11px; font-weight:700; color:var(--gray-600);
  display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;
}
.homepage .form-group input {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--gray-200); border-radius:var(--radius-md);
  font-size:15px; font-family:inherit; box-sizing:border-box;
  transition:all var(--dur) ease; background:var(--white);
}
.homepage .form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }

.submit-btn {
  width:100%; padding:14px; background:var(--primary); color:var(--white);
  font-size:15px; font-weight:600; border:none; border-radius:var(--radius-md);
  cursor:pointer; margin-top:8px;
  transition:all var(--dur) var(--ease-out); box-shadow:var(--shadow-primary);
}
.submit-btn:hover:not(:disabled) { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-2px); }
.submit-btn:active:not(:disabled) { transform:translateY(0); }
.submit-btn:disabled { opacity:0.6; cursor:not-allowed; }

.success-message { display:none; text-align:center; padding:30px 20px; }
.success-message.show { display:block; animation:successPop 0.5s var(--ease-spring); }

@keyframes successPop {
  from { opacity:0; transform:scale(0.9); }
  50% { transform:scale(1.02); }
  to { opacity:1; transform:scale(1); }
}
@keyframes slideIn {
  from { opacity:0; transform:translateY(-10px); }
  to { opacity:1; transform:translateY(0); }
}

.homepage .success-icon {
  font-size:52px; color:var(--accent); margin-bottom:15px;
  width:auto; height:auto; background:none; border-radius:0; display:block;
  animation:checkBounce 0.6s var(--ease-spring);
}
@keyframes checkBounce { 0% { transform:scale(0); } 50% { transform:scale(1.2); } 100% { transform:scale(1); } }

.success-message h3 { font-size:20px; color:var(--gray-900); margin-bottom:10px; font-weight:700; }
.success-message p { color:var(--gray-500); font-size:14px; }

/* Services */
.services { padding:80px 20px; max-width:1280px; margin:0 auto; scroll-margin-top:80px; overflow:hidden; }
.section-header { text-align:center; margin-bottom:48px; }
.section-header h2 { font-size:36px; font-weight:800; color:var(--gray-900); margin-bottom:10px; letter-spacing:-0.5px; }
.section-header p { color:var(--gray-400); font-size:16px; font-weight:500; }

.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }

.service-card {
  padding:36px 28px; background:var(--white);
  border-radius:var(--radius-lg); text-align:center;
  transition:all var(--dur-slow) var(--ease-out);
  border:1px solid var(--gray-100); box-shadow:var(--shadow-xs);
  position:relative; overflow:hidden;
}
.service-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),#8b5cf6);
  transform:scaleX(0); transition:transform var(--dur-slow) var(--ease-out);
  transform-origin:left;
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,0.12); }
.service-card:hover::after { transform:scaleX(1); }

.service-icon {
  font-size:32px; color:var(--primary); margin-bottom:18px;
  width:64px; height:64px;
  background:linear-gradient(135deg,var(--primary-bg),#dbeafe);
  border-radius:var(--radius-lg);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease-spring);
}
.service-card:hover .service-icon { transform:scale(1.1) rotate(-3deg); }

.service-card h3 { font-size:18px; font-weight:700; color:var(--gray-900); margin-bottom:10px; }
.service-card p { color:var(--gray-500); font-size:14px; line-height:1.7; }

/* Tests / Packages */
.tests { padding:60px 20px; max-width:1280px; margin:0 auto; scroll-margin-top:80px; overflow:hidden; }
.tests-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; flex-wrap:wrap; gap:16px; }
.tests-header h2 { font-size:36px; font-weight:800; color:var(--gray-900); margin-bottom:4px; letter-spacing:-0.5px; }
.tests-header p { color:var(--gray-400); font-size:15px; margin:0; font-weight:500; }
.tests-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }

.test-card {
  padding:22px; background:var(--white); border:1px solid var(--gray-100);
  border-radius:var(--radius-lg); display:flex; flex-direction:column;
  justify-content:space-between;
  transition:all var(--dur) var(--ease-out); box-shadow:var(--shadow-xs);
}
.test-card:hover { box-shadow:var(--shadow-md); border-color:rgba(37,99,235,0.15); transform:translateY(-3px); }

.test-info { margin-bottom:14px; }
.test-category {
  display:inline-block; background:var(--primary-bg); color:var(--primary);
  padding:4px 12px; border-radius:var(--radius-xl);
  font-size:11px; font-weight:700; margin-bottom:10px;
  letter-spacing:0.3px; text-transform:uppercase;
}
.test-card h3 { font-size:17px; font-weight:700; color:var(--gray-900); margin:0 0 4px; }
.test-action { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--gray-100); }
.test-price { font-size:22px; font-weight:800; color:var(--primary); }
.test-book-btn {
  padding:10px 20px; background:var(--primary); color:var(--white);
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  font-size:13px; font-weight:600;
  transition:all var(--dur) var(--ease-out); box-shadow:var(--shadow-primary);
}
.test-book-btn:hover { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-1px); }
.test-book-btn:active { transform:scale(0.97); }

.package-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.package-params {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--primary-bg); color:var(--primary);
  padding:4px 10px; border-radius:var(--radius-xl);
  font-size:11px; font-weight:700; letter-spacing:0.2px; white-space:nowrap; flex-shrink:0;
}
.package-params i { font-size:10px; }
.package-includes { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.package-tag {
  display:inline-block; background:#f0fdf4; color:#15803d;
  padding:3px 10px; border-radius:var(--radius-xl);
  font-size:11px; font-weight:600; letter-spacing:0.2px;
}
.package-pricing { display:flex; align-items:center; gap:10px; }
.package-mrp { font-size:13px; color:var(--gray-400); text-decoration:line-through; font-weight:500; }
.package-offer {
  background:linear-gradient(135deg,#fef9c3,#fde68a); color:#854d0e;
  padding:6px 14px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:700; text-align:center;
  border:1.5px dashed #ca8a04; cursor:pointer;
  transition:all var(--dur) var(--ease-out); width:100%; font-family:inherit;
}
.package-offer:hover { background:linear-gradient(135deg,#fde68a,#fcd34d); border-color:#a16207; transform:scale(1.02); box-shadow:0 4px 12px rgba(202,138,4,0.2); }
.package-offer i { margin-right:4px; font-size:11px; }
.package-card .test-book-btn { width:100%; padding:12px 20px; text-align:center; }

/* Contact */
.contact {
  padding:80px 20px; background:linear-gradient(180deg,var(--bg-subtle) 0%,var(--white) 100%);
  max-width:1280px; margin:0 auto; width:100%; scroll-margin-top:80px; overflow:hidden;
}
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; padding:0 20px; }
.contact-card {
  background:var(--white); padding:36px 28px;
  border-radius:var(--radius-lg); text-align:center;
  border:1px solid var(--gray-100); box-shadow:var(--shadow-xs);
  transition:all var(--dur-slow) var(--ease-out);
  position:relative; overflow:hidden;
}
.contact-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0); transition:transform var(--dur-slow) var(--ease-out); transform-origin:left;
}
.contact-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.contact-card:hover::after { transform:scaleX(1); }

.contact-icon {
  font-size:30px; color:var(--primary); margin-bottom:14px;
  width:60px; height:60px;
  background:linear-gradient(135deg,var(--primary-bg),#dbeafe);
  border-radius:var(--radius-lg);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease-spring);
}
.contact-card:hover .contact-icon { transform:scale(1.1) rotate(-3deg); }

.contact-card h3 { font-size:18px; font-weight:700; color:var(--gray-900); margin-bottom:10px; }
.contact-card p { color:var(--gray-500); font-size:15px; line-height:1.6; margin:0; }

/* Home Responsive */
@media (max-width:768px) {
  .hero-section { padding:20px 16px 16px; }
  .hero-section::before,.hero-section::after { display:none; }
  .hero-container { flex-direction:column; gap:24px; width:100%; }
  .hero { text-align:center; }
  .hero h1 { font-size:30px; line-height:1.18; margin-bottom:14px; letter-spacing:-0.5px; }
  .hero p { font-size:15px; margin-bottom:20px; line-height:1.6; margin-left:auto; margin-right:auto; }
  .certification { font-size:11px; display:inline-flex; margin-bottom:14px; padding:6px 12px; }
  .button-group { flex-direction:column; gap:10px; align-items:stretch; }
  .homepage .btn { width:100%; padding:14px 20px; font-size:15px; border-radius:var(--radius-md); min-height:48px; }
  .booking-section { margin-top:0; margin-bottom:20px; min-width:100%; max-width:100%; width:100%; }
  .booking-card { padding:28px 20px; border-radius:var(--radius-lg); }
  .booking-card h2 { font-size:22px; text-align:center; }
  .booking-card > p { font-size:13px; text-align:center; }
  .homepage .form-group input { padding:14px 16px; font-size:16px; border-radius:var(--radius-md); }
  .submit-btn { padding:14px; font-size:16px; border-radius:var(--radius-md); min-height:50px; }
  .services { padding:50px 16px; }
  .section-header { margin-bottom:32px; }
  .section-header h2 { font-size:28px; }
  .section-header p { font-size:14px; }
  .services-grid { grid-template-columns:1fr 1fr; gap:14px; }
  .service-card { padding:24px 16px; border-radius:var(--radius-md); }
  .service-icon { font-size:26px; width:52px; height:52px; border-radius:var(--radius-md); margin-bottom:14px; }
  .service-card h3 { font-size:15px; margin-bottom:6px; }
  .service-card p { font-size:12px; line-height:1.5; }
  .tests { padding:40px 16px; }
  .tests-header { flex-direction:column; align-items:flex-start; margin-bottom:24px; gap:10px; }
  .tests-header h2 { font-size:26px; }
  .tests-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .test-card { padding:16px; border-radius:var(--radius-md); }
  .test-category { font-size:9px; padding:3px 8px; margin-bottom:8px; }
  .test-card h3 { font-size:14px; line-height:1.3; }
  .test-action { padding-top:12px; flex-direction:column; gap:8px; align-items:stretch; }
  .test-price { font-size:19px; }
  .test-book-btn { padding:10px 14px; font-size:13px; text-align:center; border-radius:var(--radius-sm); min-height:42px; }
  .package-tag { font-size:10px; padding:2px 8px; }
  .package-pricing { flex-direction:column; gap:2px; align-items:flex-start; }
  .package-offer { font-size:11px; padding:5px 10px; }
  .contact { padding:50px 16px; }
  .contact-grid { grid-template-columns:1fr; gap:14px; padding:0; }
  .contact-card { padding:28px 20px; border-radius:var(--radius-md); }
  .contact-icon { font-size:26px; width:52px; height:52px; border-radius:var(--radius-md); }
  .contact-card h3 { font-size:17px; }
  .contact-card p { font-size:14px; }
}

@media (max-width:400px) {
  .hero-section { padding:12px 12px 8px; }
  .hero h1 { font-size:26px; }
  .hero p { font-size:14px; }
  .section-header h2 { font-size:24px; }
  .booking-card { padding:22px 16px; }
  .booking-card h2 { font-size:20px; }
  .services-grid { grid-template-columns:1fr; gap:12px; }
  .tests-grid { grid-template-columns:1fr; gap:10px; }
  .test-action { flex-direction:column; gap:8px; align-items:stretch; }
  .test-book-btn { min-height:auto; padding:10px 16px; }
  .package-pricing { flex-direction:row; align-items:center; }
  .contact-grid { gap:12px; }
}

@media (max-width:480px) {
  .tests-grid { grid-template-columns:1fr; gap:10px; }
  .services-grid { grid-template-columns:1fr; gap:12px; }
  .contact-grid { grid-template-columns:1fr; gap:12px; }
}

/* ===================================
   Appointment Page
   =================================== */
.appointment-container { max-width:900px; margin:40px auto; padding:0 20px; padding-bottom:60px; }
.appointment-header { display:flex; align-items:center; gap:16px; margin-bottom:32px; }
.appointment-header .back-btn {
  background:none; border:none; font-size:20px; cursor:pointer;
  color:var(--gray-700); padding:10px; border-radius:var(--radius-md);
  transition:all var(--dur-fast) ease; min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
}
.appointment-header .back-btn:hover { background:var(--primary-bg); color:var(--primary); }
.appointment-header .back-btn:active { background:#dbeafe; }
.appointment-header h1 { margin:0; font-size:26px; font-weight:800; color:var(--gray-900); }

.step-indicator { display:flex; justify-content:space-between; margin-bottom:32px; position:relative; }
.step-indicator::before {
  content:''; position:absolute; top:20px; left:0; right:0; height:3px;
  background:var(--gray-200); z-index:0; border-radius:2px;
}
.step-item { flex:1; text-align:center; position:relative; z-index:1; }
.step-circle {
  width:42px; height:42px; border-radius:var(--radius-full);
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  margin:0 auto 8px; font-weight:700; font-size:14px; color:var(--gray-400);
  transition:all var(--dur-slow) var(--ease-spring); border:3px solid transparent;
}
.step-item.active .step-circle {
  background:var(--primary); color:var(--white);
  box-shadow:0 4px 12px rgba(37,99,235,0.35); border-color:rgba(37,99,235,0.2); transform:scale(1.1);
}
.step-item.completed .step-circle {
  background:var(--accent); color:var(--white);
  box-shadow:0 4px 12px rgba(16,185,129,0.35);
}
.step-label { font-size:11px; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; transition:color var(--dur) ease; }
.step-item.active .step-label { color:var(--primary); }

.step-content {
  background:var(--white); border-radius:var(--radius-xl);
  border:1px solid var(--gray-100); padding:32px; box-shadow:var(--shadow-md);
  animation:stepSlideIn 0.4s var(--ease-out);
}
@keyframes stepSlideIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

.form-section-title { margin-top:28px; margin-bottom:18px; font-size:16px; font-weight:700; color:var(--gray-900); display:flex; align-items:center; gap:8px; }

.appointment-container .form-group input.error,
.appointment-container .form-group select.error { border-color:var(--danger); box-shadow:0 0 0 3px rgba(239,68,68,0.1); }
.error-text { color:var(--danger); font-size:12px; margin-top:4px; display:block; }
.form-group input.readonly { background:var(--gray-50); cursor:not-allowed; color:var(--gray-500); }

.location-input-wrapper { display:flex; gap:8px; align-items:stretch; }
.location-input-wrapper .location-input {
  flex:1; padding:13px 14px; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md); font-size:15px; font-family:inherit;
  transition:all var(--dur) ease; box-sizing:border-box; background:var(--white);
}
.location-input-wrapper .location-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }

.detect-location-btn {
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; background:var(--primary); color:var(--white);
  border:none; border-radius:var(--radius-md);
  font-size:12px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:all var(--dur) var(--ease-out); box-shadow:var(--shadow-primary);
}
.detect-location-btn:hover:not(:disabled) { background:var(--primary-dark); transform:translateY(-1px); box-shadow:var(--shadow-primary-lg); }
.detect-location-btn:disabled { opacity:0.6; cursor:not-allowed; }
.detect-location-btn i { font-size:14px; }

.package-info-section {
  background:linear-gradient(135deg,var(--primary-bg) 0%,#dbeafe 100%);
  border:1.5px solid #bfdbfe; border-radius:var(--radius-lg);
  padding:22px; margin:20px 0;
}
.section-subtitle { margin:0 0 14px; font-size:12px; font-weight:700; color:#0c4a6e; text-transform:uppercase; letter-spacing:0.5px; }
.package-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.package-info-card {
  background:var(--white); border-radius:var(--radius-md); padding:16px;
  border:1px solid #bfdbfe; display:flex; flex-direction:column; justify-content:center;
}
.info-label { font-size:11px; font-weight:700; color:#0c4a6e; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.info-value { font-size:16px; font-weight:700; color:#0369a1; display:flex; align-items:center; gap:8px; }
.package-name { color:#0c4a6e; }
.package-name i { font-size:18px; color:#0369a1; }
.amount-value { flex-direction:column; align-items:flex-start; gap:4px; }
.original-price { font-size:12px; color:var(--gray-400); text-decoration:line-through; font-weight:500; }
.final-price { font-size:20px; font-weight:800; color:var(--accent-dark); }

.date-selectors { display:flex; gap:10px; }
.date-selectors select,.date-selectors input { flex:1; padding:12px; border:1.5px solid var(--gray-200); border-radius:var(--radius-md); font-size:14px; transition:all var(--dur) ease; }
.time-selectors { display:flex; gap:10px; }
.time-selectors select { flex:1; padding:12px; border:1.5px solid var(--gray-200); border-radius:var(--radius-md); font-size:14px; transition:all var(--dur) ease; }

.schedule-section { margin-top:28px; }
.schedule-section h3 { margin:0 0 14px; font-size:16px; font-weight:700; color:var(--gray-900); }
.time-section-title { margin:18px 0 14px; font-size:14px; font-weight:700; color:var(--gray-700); }
.appointment-type-title { margin-top:28px; margin-bottom:14px; font-size:16px; font-weight:700; color:var(--gray-900); }

.appointment-type-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.appointment-type-btn {
  padding:22px; border:2px solid var(--gray-200);
  border-radius:var(--radius-lg); background:var(--white); cursor:pointer;
  transition:all var(--dur) var(--ease-out);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:14px; font-weight:600; min-height:48px;
}
.appointment-type-btn:hover { border-color:#93c5fd; background:var(--primary-bg-subtle); transform:translateY(-2px); }
.appointment-type-btn:active { transform:scale(0.98); }
.appointment-type-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); box-shadow:0 4px 12px rgba(37,99,235,0.12); }
.appointment-type-btn i { font-size:28px; transition:transform var(--dur) var(--ease-spring); }
.appointment-type-btn:hover i { transform:scale(1.1); }

.appointment-type-badge {
  background:#dbeafe; color:#0284c7; padding:4px 12px;
  border-radius:var(--radius-xl); font-size:10px; font-weight:700;
  text-transform:uppercase; margin-top:4px;
}

.form-actions { display:flex; gap:12px; justify-content:space-between; margin-top:28px; }
.appointment-container .btn-secondary {
  padding:14px 24px; border:2px solid var(--gray-200);
  background:var(--white); color:var(--gray-700); border-radius:var(--radius-md);
  cursor:pointer; font-weight:600; font-size:15px;
  transition:all var(--dur) ease; flex:1; min-height:48px;
}
.appointment-container .btn-secondary:hover:not(:disabled) { border-color:var(--gray-400); background:var(--gray-50); }
.appointment-container .btn-secondary:active:not(:disabled) { background:var(--gray-100); }
.appointment-container .btn-secondary:disabled { opacity:0.5; cursor:not-allowed; }

.appointment-container .btn-primary {
  padding:14px 24px; background:var(--primary); color:var(--white);
  border:none; border-radius:var(--radius-md); cursor:pointer;
  font-weight:600; font-size:15px;
  transition:all var(--dur) var(--ease-out); flex:1; min-height:48px;
  box-shadow:var(--shadow-primary);
}
.appointment-container .btn-primary:hover:not(:disabled) { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-1px); }
.appointment-container .btn-primary:active:not(:disabled) { transform:scale(0.99); }
.appointment-container .btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

.success-container { text-align:center; padding:40px 20px; }
.appointment-container .success-icon {
  width:80px; height:80px;
  background:linear-gradient(135deg,var(--accent-bg),#a7f3d0);
  border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:36px; color:var(--accent);
  animation:successPop 0.5s var(--ease-spring);
}
.success-container h2 { margin:0 0 10px; font-size:26px; font-weight:800; color:var(--gray-900); }
.success-container p { margin:0 0 28px; color:var(--gray-500); font-size:15px; max-width:500px; margin-left:auto; margin-right:auto; line-height:1.6; }

.booking-id-section {
  margin:24px 0 32px; padding:22px 24px;
  background:linear-gradient(135deg,var(--primary-bg) 0%,#dbeafe 100%);
  border:2px solid #bfdbfe; border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.booking-id-label { margin:0; font-size:12px; font-weight:700; color:#0c4a6e; text-transform:uppercase; letter-spacing:0.5px; }
.booking-id-display { display:flex; align-items:center; justify-content:center; gap:10px; }
.booking-id-value {
  font-size:32px; font-weight:800; color:var(--primary);
  font-family:var(--font-mono); letter-spacing:2px;
  text-shadow:0 2px 4px rgba(37,99,235,0.1);
}

.order-details {
  background:var(--gray-50); border:2px dashed var(--gray-200);
  border-radius:var(--radius-lg); padding:22px; margin-bottom:28px; text-align:left;
}
.order-detail-row {
  display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px solid var(--gray-100); font-size:14px;
}
.order-detail-row:last-child { border-bottom:none; }
.order-detail-label { color:var(--gray-500); font-weight:500; }
.order-detail-value { font-weight:700; color:var(--gray-900); text-align:right; }

@media (max-width:768px) {
  .appointment-container { margin:20px auto; padding:0 14px 120px 14px; }
  .appointment-header { gap:12px; margin-bottom:24px; }
  .appointment-header h1 { font-size:22px; }
  .step-circle { width:38px; height:38px; font-size:13px; }
  .step-label { font-size:10px; }
  .step-indicator::before { top:19px; }
  .step-content { padding:24px 16px; border-radius:var(--radius-lg); }
  .appointment-type-grid { grid-template-columns:1fr; gap:12px; }
  .appointment-type-btn { flex-direction:row; padding:18px; gap:16px; }
  .appointment-type-btn i { font-size:24px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .package-info-section { padding:16px; margin:16px 0; }
  .package-info-grid { grid-template-columns:1fr; gap:10px; }
  .package-info-card { padding:14px; }
  .info-value { font-size:14px; }
  .final-price { font-size:18px; }
  .form-actions { flex-direction:column; gap:10px; }
  .appointment-container .btn-secondary,
  .appointment-container .btn-primary { width:100%; padding:14px 20px; font-size:15px; }
  .date-selectors,.time-selectors { flex-direction:column; }
  .date-selectors select,.date-selectors input,.time-selectors select { width:100%; }
  .appointment-container .form-group input,
  .appointment-container .form-group select { font-size:16px; padding:14px; }
  .success-container { padding:30px 14px; }
  .success-container h2 { font-size:22px; }
  .appointment-container .success-icon { width:68px; height:68px; font-size:30px; }
  .order-details { padding:16px; }
  .order-detail-row { font-size:13px; flex-wrap:wrap; gap:4px; }
}

@media (max-width:400px) {
  .location-input-wrapper { flex-direction:column; }
  .detect-location-btn { justify-content:center; padding:12px; }
  .appointment-container { margin:12px auto; padding:0 10px 120px 10px; }
  .appointment-header h1 { font-size:18px; }
  .step-content { padding:18px 12px; }
  .form-group label { font-size:11px; }
  .appointment-container .form-group input,
  .appointment-container .form-group select { padding:12px; font-size:15px; }
  .appointment-container .btn-primary,
  .appointment-container .btn-secondary { padding:13px 16px; font-size:14px; }
}

/* ===================================
   All Tests Page
   =================================== */
.all-tests-container { max-width:1280px; margin:0 auto; padding:24px 20px; padding-bottom:80px; }
.all-tests-header { display:flex; flex-direction:column; gap:10px; margin-bottom:36px; }
.all-tests-header .back-btn {
  background:none; border:none; font-size:14px; cursor:pointer;
  color:var(--primary); padding:0; align-self:flex-start;
  transition:all var(--dur-fast) ease; font-weight:600;
}
.all-tests-header .back-btn:hover { color:var(--primary-dark); transform:translateX(-3px); }

.all-tests-header h1 { font-size:34px; font-weight:800; color:var(--gray-900); margin:0; line-height:1.2; letter-spacing:-0.5px; }
.all-tests-header p { font-size:16px; color:var(--gray-500); margin:0; }

.section-title { font-size:24px; font-weight:800; color:var(--gray-900); margin-bottom:20px; letter-spacing:-0.3px; }
.category-filter { margin-bottom:20px; }
.category-pills { display:flex; flex-wrap:wrap; gap:10px; }
.category-pill {
  padding:10px 18px; border:2px solid var(--gray-200); background:var(--white);
  border-radius:var(--radius-xl); cursor:pointer; font-size:14px;
  font-weight:600; color:var(--gray-500); transition:all var(--dur) var(--ease-out);
}
.category-pill:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); }
.category-pill.active { background:var(--primary); color:var(--white); border-color:var(--primary); box-shadow:var(--shadow-primary); }

.all-tests-section { margin-bottom:48px; }
.results-count { font-size:14px; color:var(--gray-400); margin-bottom:20px; font-weight:500; }
.all-tests-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }

.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:16px; }
.all-tests-container .spinner { width:40px; height:40px; border:4px solid var(--gray-100); border-top:4px solid var(--primary); border-radius:var(--radius-full); animation:spin 0.8s linear infinite; }
.no-tests { grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--gray-500); }

.cant-find-section {
  margin-top:60px; padding:48px 24px;
  background:linear-gradient(135deg,var(--primary-bg) 0%,#ecfdf5 100%);
  border-radius:var(--radius-xl); text-align:center;
  border:1px solid rgba(37,99,235,0.08);
}
.cant-find-text { font-size:20px; font-weight:700; color:var(--gray-900); margin:0 0 28px; }

.callback-card {
  max-width:500px; margin:0 auto; background:var(--white);
  padding:32px; border-radius:var(--radius-lg);
  border:1px solid var(--gray-200); box-shadow:var(--shadow-md);
}
.callback-card h3 { font-size:20px; font-weight:700; color:var(--gray-900); margin:0 0 8px; }
.callback-card p { font-size:14px; color:var(--gray-500); margin:0 0 24px; line-height:1.5; }
.callback-form { display:flex; flex-direction:column; gap:14px; }
.callback-form .form-group { display:flex; flex-direction:column; margin-bottom:0; }
.callback-form input {
  padding:13px 16px; font-size:15px;
  border:1.5px solid var(--gray-200); border-radius:var(--radius-md);
  font-family:inherit; transition:all var(--dur) ease;
}
.callback-form input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }

.callback-btn {
  padding:13px 20px; background:var(--primary); color:var(--white);
  border:none; border-radius:var(--radius-md); cursor:pointer;
  font-size:15px; font-weight:600;
  transition:all var(--dur) var(--ease-out); box-shadow:var(--shadow-primary);
}
.callback-btn:hover { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-1px); }
.callback-btn:active { transform:scale(0.97); }
.callback-btn:disabled { opacity:0.6; cursor:not-allowed; }

.all-tests-container .success-message {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:20px; opacity:0; transition:opacity 0.3s ease;
}
.all-tests-container .success-message.show { opacity:1; display:flex; }
.all-tests-container .success-icon {
  width:60px; height:60px; background:#f0fdf4;
  border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  color:#22c55e; font-size:28px;
}
.all-tests-container .success-message h3 { font-size:18px; font-weight:700; color:var(--gray-900); margin:0; }
.all-tests-container .success-message p { font-size:14px; color:var(--gray-500); margin:0; text-align:center; }

@media (max-width:768px) {
  .all-tests-container { padding:16px 14px 80px; }
  .all-tests-header h1 { font-size:26px; }
  .all-tests-header p { font-size:14px; }
  .section-title { font-size:20px; margin-bottom:14px; }
  .category-pills { gap:8px; }
  .category-pill { padding:8px 14px; font-size:13px; }
  .all-tests-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .cant-find-section { padding:32px 16px; margin-top:40px; }
  .cant-find-text { font-size:17px; margin-bottom:20px; }
  .callback-card { padding:24px 18px; }
  .callback-card h3 { font-size:18px; }
  .callback-card p { font-size:13px; }
  .callback-form input { padding:12px 14px; font-size:14px; }
  .callback-btn { padding:12px 16px; font-size:14px; }
}

@media (max-width:400px) {
  .all-tests-grid { grid-template-columns:1fr; }
  .all-tests-header h1 { font-size:22px; }
}

/* ===================================
   Admin Login
   =================================== */
.admin-login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
  background-size:200% 200%; animation:gradientShift 8s ease-in-out infinite;
  font-family:var(--font-sans); padding:16px;
}
@keyframes gradientShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }

.login-container { position:relative; width:100%; max-width:400px; z-index:10; }
.login-card {
  background:rgba(255,255,255,0.95); backdrop-filter:blur(20px);
  border-radius:var(--radius-xl); box-shadow:0 24px 48px rgba(0,0,0,0.2);
  padding:20px 40px; position:relative; z-index:11;
  border:1px solid rgba(255,255,255,0.5);
}
.login-header { text-align:center; margin-bottom:32px; }
.login-icon {
  width:64px; height:64px;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:28px; color:var(--white);
  box-shadow:0 8px 20px rgba(102,126,234,0.35);
}
.login-header h1 { margin:0; font-size:24px; font-weight:800; color:var(--gray-800); }
.login-form { display:flex; flex-direction:column; gap:20px; }
.input-wrapper { position:relative; display:flex; align-items:center; }
.input-wrapper i { position:absolute; left:12px; color:var(--gray-400); font-size:14px; }
.login-card .form-group input {
  width:100%; padding:13px 40px; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md); font-size:14px;
  transition:all var(--dur) ease; background:var(--white);
}
.login-card .form-group input:focus { outline:none; border-color:#667eea; box-shadow:0 0 0 4px rgba(102,126,234,0.12); }
.login-card .form-group input:disabled { background:var(--gray-50); color:var(--gray-300); cursor:not-allowed; }

.toggle-password {
  position:absolute; right:25px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--gray-400);
  cursor:pointer; font-size:14px; padding:6px;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--dur-fast) ease;
}
.toggle-password:hover:not(:disabled) { color:#667eea; }
.toggle-password:disabled { cursor:not-allowed; opacity:0.5; }

.error-message {
  background:var(--danger-bg); border:1px solid #fecaca;
  border-radius:var(--radius-sm); padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  color:#991b1b; font-size:13px; font-weight:500;
  animation:slideDown 0.3s var(--ease-out);
}
.error-message i { font-size:14px; flex-shrink:0; }

@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

.login-btn {
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:var(--white); border:none; padding:13px 24px;
  border-radius:var(--radius-md); font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--dur) var(--ease-out);
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:8px; box-shadow:0 8px 20px rgba(102,126,234,0.35);
}
.login-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 28px rgba(102,126,234,0.45); }
.login-btn:disabled { opacity:0.7; cursor:not-allowed; }

.login-card .spinner {
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.3); border-top-color:var(--white);
  border-radius:var(--radius-full); animation:spin 1s linear infinite;
}

.login-footer { margin-top:24px; text-align:center; border-top:1px solid var(--gray-200); padding-top:18px; }
.back-home-btn {
  background:var(--gray-100); color:var(--gray-700);
  border:1px solid var(--gray-300); padding:10px 18px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--dur) ease;
  display:inline-flex; align-items:center; gap:6px;
}
.back-home-btn:hover { background:var(--gray-200); border-color:var(--gray-400); }

.login-background { position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; overflow:hidden; }
.shape { position:absolute; opacity:0.08; border-radius:var(--radius-full); }
.shape-1 { width:300px; height:300px; background:var(--white); top:-50px; right:-50px; animation:shapeFloat 6s ease-in-out infinite; }
.shape-2 { width:200px; height:200px; background:var(--white); bottom:-50px; left:-50px; animation:shapeFloat 8s ease-in-out infinite reverse; }
.shape-3 { width:150px; height:150px; background:var(--white); top:50%; left:50%; transform:translate(-50%,-50%); animation:shapeFloat 7s ease-in-out infinite; }
@keyframes shapeFloat { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(10px,-10px) scale(1.05); } }

@media (max-width:480px) {
  .login-card { padding:28px 24px; }
  .login-header { margin-bottom:24px; }
  .login-icon { width:52px; height:52px; font-size:24px; }
  .login-header h1 { font-size:20px; }
  .login-card .form-group input { padding:11px 10px 11px 36px; font-size:16px; }
  .login-btn { padding:12px 20px; font-size:13px; }
}

/* ===================================
   Admin Dashboard
   =================================== */
.admin-dashboard { min-height:100vh; background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-200) 100%); padding-bottom:40px; }
.admin-header {
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-darker) 100%);
  color:var(--white); padding:24px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 4px 16px rgba(37,99,235,0.2);
}
.admin-header .back-btn {
  background:rgba(255,255,255,0.15); border:none; color:var(--white);
  width:40px; height:40px; border-radius:var(--radius-sm);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:all var(--dur) ease; flex-shrink:0;
}
.admin-header .back-btn:hover { background:rgba(255,255,255,0.25); transform:scale(1.05); }

.logout-btn {
  background:rgba(255,255,255,0.15); border:none; color:var(--white);
  padding:10px 16px; border-radius:var(--radius-sm); cursor:pointer;
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  transition:all var(--dur) ease; flex-shrink:0;
}
.logout-btn:hover { background:rgba(255,255,255,0.25); transform:scale(1.05); }

.admin-header h1 { margin:0; font-size:28px; font-weight:800; flex:1; }
.admin-header p { margin:4px 0 0; font-size:14px; opacity:0.85; }

.admin-container { max-width:1400px; margin:20px auto; padding:0 16px; }

.tabs-container {
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  margin-bottom:24px; padding:16px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--gray-200); flex:1; }
.tab {
  background:none; border:none; color:var(--gray-500);
  padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer;
  transition:all var(--dur) ease;
  border-bottom:3px solid transparent; margin-bottom:-16px;
  display:flex; align-items:center; gap:8px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color:var(--primary); background:var(--primary-bg); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--primary-bg); }

.controls { display:flex; gap:10px; align-items:center; }
.search-input {
  padding:10px 16px; border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm); font-size:14px; width:250px;
  transition:all var(--dur) ease;
}
.search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }

.btn-refresh,.btn-export {
  background:var(--gray-100); border:1px solid var(--gray-300);
  padding:10px 14px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:14px; font-weight:600; transition:all var(--dur) ease;
  display:flex; align-items:center; gap:6px; color:var(--gray-700);
}
.btn-refresh:hover,.btn-export:hover { background:var(--gray-200); border-color:var(--gray-400); }

.admin-dashboard .loading-state {
  text-align:center; padding:60px 20px; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.admin-dashboard .spinner {
  width:40px; height:40px; border:4px solid var(--gray-200); border-top-color:var(--primary);
  border-radius:var(--radius-full); animation:spin 1s linear infinite; margin:0 auto 16px;
}

.table-container { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow-x:auto; }
.results-info { padding:14px 20px; background:var(--gray-50); border-bottom:1px solid var(--gray-200); font-size:13px; color:var(--gray-500); font-weight:500; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; min-width:1200px; }
.data-table thead { background:var(--gray-50); border-bottom:2px solid var(--gray-200); }
.data-table th { padding:14px 12px; text-align:left; font-weight:600; color:var(--gray-700); white-space:nowrap; user-select:none; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; }
.data-table td { padding:13px 12px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
.data-table tbody tr { transition:background-color var(--dur-fast) ease; }
.data-table tbody tr:hover { background:var(--primary-bg-subtle); }

.id-cell { font-weight:600; color:var(--primary); font-family:var(--font-mono); }
.unique-id-badge { display:inline-block; background:linear-gradient(135deg,var(--primary-light),var(--primary)); color:var(--white); padding:6px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:13px; letter-spacing:1px; font-family:var(--font-mono); }
.name-cell { font-weight:600; color:var(--gray-800); }
.phone-cell a,.email-cell a { color:var(--primary); text-decoration:none; transition:all var(--dur-fast) ease; }
.phone-cell a:hover,.email-cell a:hover { text-decoration:underline; color:var(--primary-dark); }
.badge { display:inline-block; padding:4px 10px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; white-space:nowrap; }
.badge-home { background:#dbeafe; color:#0c4a6e; }
.badge-lab { background:#fecaca; color:#7c2d12; }
.status-badge { display:inline-block; padding:5px 12px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; white-space:nowrap; }
.status-confirmed,.status-pending { background:var(--accent-bg); color:#065f46; }
.status-completed { background:#dbeafe; color:#0c4a6e; }
.status-cancelled { background:var(--danger-bg); color:#7c2d12; }
.date-cell { font-family:var(--font-mono); color:var(--gray-500); font-weight:500; font-size:12px; }
.time-cell { font-size:12px; color:var(--gray-400); white-space:nowrap; font-family:var(--font-mono); }
.tests-cell,.message-cell { color:var(--gray-500); max-width:200px; word-break:break-word; }
.tests-tooltip,.message-tooltip { cursor:help; border-bottom:1px dotted var(--gray-300); }
.email-cell { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.package-cell { font-weight:600; color:var(--primary); }
.price-cell { font-weight:700; color:var(--accent-dark); font-family:var(--font-mono); }
.location-cell { max-width:200px; }
.location-tooltip { cursor:help; border-bottom:1px dotted var(--gray-300); }

.empty-state { text-align:center; padding:60px 20px; }
.empty-state i { font-size:48px; color:var(--gray-300); margin-bottom:16px; }
.empty-state p { color:var(--gray-400); font-size:16px; margin:0; }

@media (max-width:1024px) {
  .tabs-container { flex-direction:column; align-items:stretch; }
  .tabs { flex:1; width:100%; }
  .controls { width:100%; }
  .search-input { flex:1; width:auto; }
  .data-table { font-size:12px; }
  .data-table th,.data-table td { padding:10px 8px; }
}

@media (max-width:768px) {
  .admin-header { flex-direction:row; text-align:left; padding:16px 14px; gap:12px; }
  .admin-header .back-btn { width:36px; height:36px; font-size:14px; }
  .admin-header h1 { font-size:20px; }
  .admin-header p { font-size:12px; margin-top:2px; }
  .logout-btn { padding:8px 12px; font-size:12px; }
  .admin-container { padding:0 10px; margin-top:14px; }
  .tabs-container { padding:12px; gap:12px; margin-bottom:16px; }
  .tabs { overflow-x:auto; margin-bottom:0; border-bottom:2px solid var(--gray-200); gap:0; }
  .tab { font-size:13px; padding:10px 14px; margin-bottom:-2px; white-space:nowrap; }
  .controls { flex-wrap:wrap; gap:8px; }
  .search-input { width:100%; min-width:auto; padding:10px 14px; font-size:14px; }
  .btn-refresh,.btn-export { flex-shrink:0; justify-content:center; padding:10px 12px; font-size:13px; }
  .results-info { padding:12px 16px; font-size:12px; }
  .data-table thead { display:none; }
  .data-table,.data-table tbody { display:block; width:100%; min-width:0; }
  .data-table tbody tr {
    display:block; background:var(--white); margin:0 8px 12px;
    border-radius:var(--radius-md); border:1px solid var(--gray-200);
    box-shadow:var(--shadow-sm); padding:14px 16px; position:relative;
    transition:all var(--dur-fast) ease;
  }
  .data-table tbody tr:hover { box-shadow:var(--shadow-md); }
  .data-table td { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--gray-100); text-align:right; font-size:13px; gap:12px; }
  .data-table td:last-child { border-bottom:none; }
  .data-table td::before { content:attr(data-label); font-weight:600; color:var(--gray-500); font-size:12px; text-transform:uppercase; letter-spacing:0.3px; text-align:left; flex-shrink:0; min-width:90px; }
  .data-table .id-cell { font-size:14px; font-weight:700; }
  .data-table .name-cell { font-size:15px; font-weight:600; }
  .data-table .phone-cell a { font-size:14px; font-weight:500; }
  .data-table .package-cell { font-size:14px; font-weight:600; color:var(--primary); }
  .data-table .price-cell { font-size:15px; font-weight:700; }
  .data-table .date-cell { font-family:inherit; font-weight:500; }
  .data-table .time-cell { font-size:12px; color:var(--gray-400); }
  .data-table .email-cell { display:flex; max-width:none; overflow:visible; white-space:normal; }
  .data-table .tests-cell { display:flex; max-width:none; word-break:break-word; }
  .badge { padding:4px 10px; font-size:11px; }
  .status-badge { padding:5px 12px; font-size:11px; }
  .table-container { background:transparent; box-shadow:none; border-radius:0; }
  .results-info { background:var(--white); border-radius:var(--radius-md); margin:0 0 8px; border:none; box-shadow:var(--shadow-sm); }
  .empty-state { margin:0 8px; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
}

@media (max-width:480px) {
  .admin-header { padding:12px 10px; gap:10px; }
  .admin-header .back-btn { width:34px; height:34px; font-size:13px; border-radius:6px; }
  .admin-header h1 { font-size:17px; }
  .admin-header p { font-size:11px; }
  .logout-btn { padding:7px 10px; font-size:11px; border-radius:6px; }
  .admin-container { padding:0 6px; margin-top:10px; }
  .tabs-container { padding:10px; gap:10px; border-radius:var(--radius-md); margin-bottom:12px; }
  .tab { padding:8px 10px; font-size:12px; gap:5px; }
  .search-input { padding:9px 12px; font-size:13px; border-radius:var(--radius-sm); }
  .data-table tbody tr { margin:0 4px 10px; padding:12px 14px; border-radius:var(--radius-sm); }
  .data-table td { padding:6px 0; font-size:12px; }
  .data-table td::before { font-size:11px; min-width:80px; }
  .results-info { padding:10px 14px; margin:0 0 6px; border-radius:var(--radius-sm); font-size:11px; }
  .empty-state { margin:0 4px; border-radius:var(--radius-sm); padding:40px 16px; }
  .empty-state i { font-size:36px; }
  .empty-state p { font-size:14px; }
}

/* ===================================
   404 Not Found Page
   =================================== */
.notfound-page {
  min-height:80vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f0f7ff 0%,#e8f4f8 40%,#ecfdf5 100%);
  padding:40px 20px;
}
.notfound-bubbles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.notfound-bubble {
  position:absolute; bottom:-30px; border-radius:var(--radius-full);
  background:rgba(37,99,235,0.06); animation:bubbleFloat linear infinite;
}
.notfound-bubble:nth-child(odd) { background:rgba(16,185,129,0.06); }

@keyframes bubbleFloat {
  0% { transform:translateY(0) scale(1); opacity:0; }
  10% { opacity:0.6; }
  90% { opacity:0.2; }
  100% { transform:translateY(-85vh) scale(0.4); opacity:0; }
}

.notfound-content { text-align:center; position:relative; z-index:1; max-width:520px; }
.notfound-icon {
  position:relative; display:inline-block; font-size:56px;
  color:var(--primary); margin-bottom:8px; animation:iconSway 3s ease-in-out infinite;
}
.notfound-icon .fa-flask { filter:drop-shadow(0 4px 12px rgba(37,99,235,0.25)); }
.notfound-drip {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; background:var(--primary);
  border-radius:var(--radius-full); animation:drip 2s ease-in infinite;
}
@keyframes iconSway { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(8deg); } }
@keyframes drip {
  0% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  70% { opacity:0.5; transform:translateX(-50%) translateY(18px) scale(0.6); }
  100% { opacity:0; transform:translateX(-50%) translateY(28px) scale(0.2); }
}

.notfound-code {
  font-size:120px; font-weight:900; line-height:1; margin:0 0 8px; letter-spacing:-6px;
  background:linear-gradient(135deg,var(--gray-900),var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.notfound-zero {
  display:inline-block; -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  -webkit-background-clip:text; background-clip:text;
  animation:zeroSpin 4s ease-in-out infinite;
}
@keyframes zeroSpin { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15) rotate(10deg); } }

.notfound-title { font-size:26px; font-weight:800; color:var(--gray-900); margin:0 0 12px; }
.notfound-desc { font-size:15px; color:var(--gray-500); line-height:1.7; margin:0 0 28px; }
.notfound-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.notfound-btn {
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
  font-size:15px; font-weight:600; border:none; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--dur) var(--ease-out);
}
.notfound-btn-primary { background:var(--primary); color:var(--white); box-shadow:var(--shadow-primary); }
.notfound-btn-primary:hover { background:var(--primary-dark); box-shadow:var(--shadow-primary-lg); transform:translateY(-2px); }
.notfound-btn-secondary { background:var(--white); color:var(--primary); border:2px solid var(--primary); }
.notfound-btn-secondary:hover { background:var(--primary-bg); box-shadow:0 4px 16px rgba(37,99,235,0.12); transform:translateY(-2px); }
.notfound-btn:active { transform:scale(0.97); }

.notfound-hint {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white); padding:14px 22px; border-radius:var(--radius-lg);
  font-size:13px; color:var(--gray-500); box-shadow:var(--shadow-sm); border:1px solid var(--gray-100);
}
.notfound-hint i { color:var(--primary); font-size:18px; }
.notfound-hint strong { color:var(--gray-900); }

@media (max-width:768px) {
  .notfound-page { min-height:75vh; padding:32px 16px; }
  .notfound-icon { font-size:44px; }
  .notfound-code { font-size:90px; letter-spacing:-4px; }
  .notfound-title { font-size:22px; }
  .notfound-desc { font-size:14px; margin-bottom:24px; }
  .notfound-actions { flex-direction:column; align-items:stretch; }
  .notfound-btn { justify-content:center; padding:14px 20px; min-height:48px; }
  .notfound-hint { flex-direction:column; text-align:center; gap:6px; padding:14px 16px; font-size:12px; }
}

@media (max-width:400px) {
  .notfound-code { font-size:72px; }
  .notfound-title { font-size:20px; }
  .notfound-icon { font-size:36px; }
}