/* Puncher Premium Theme v3.0
   ערכת עיצוב פרימיום מלאה - מחליפה את העיצוב הישן
*/

/* הוסר: @import מ-fonts.googleapis.com.
   הגיליון הזה נטען מ-index.html, כלומר ה-@import רץ בייצור — ו-
   style-src הוא 'self' 'unsafe-inline' בלבד, אז הדפדפן סירב לו והדפיס
   שגיאת CSP במסך הכניסה. Heebo מעולם לא נטען בפועל.
   הגופנים כאן מוטמעים תחת vendor/, כמו React ו-Leaflet — ראה
   vendor/fonts.css. הגוף רץ על Assistant, שמוטמע ונטען. */

/* ====== Premium CSS Variables ====== */

/* ─────────────────────────────────────────────────────────────────────────
   הגיליון הזה נכתב לערכה כהה (#0A1628) ומוצמד ל-index.html מאז 6cc1f5c.
   האפליקציה עברה לפלדה בהירה (#E7EAE6) ב-286ad3b — לפני כן.

   התוצאה הייתה טקסט לבן על רקע בהיר, כלומר בלתי נראה. הכלל שעשה את זה:

       .text-xs { color: var(--text-muted) !important; }   ← שורה ~254

   ‏.text-xs היא מחלקת utility שמשומשת בכל האפליקציה, ו-!important דורס
   אפילו inline style — אז `style="color: var(--muted-2)"` על מונה הזמינות
   במסך הכניסה נדרס ללבן. נמדד בדפדפן: 1.21:1.

   הטוקנים למטה ממופים עכשיו לפלטה הבהירה של האפליקציה כפי שהיא מוגדרת
   ב-index.html:102. הפריסה, הצללים והאנימציות בגיליון לא נגעו.

   אזהרה: אלה שמות טוקנים משלו (--text-muted), לא של האפליקציה
   (--muted-2). לכן ה-:root של index.html לא דרס אותם והם נשארו לבנים.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Base Colors — מיושרים לפלדה הבהירה */
  --bg-primary: #E7EAE6;
  --bg-secondary: #F2F4F1;
  --bg-tertiary: #DFE3DE;

  /* Brand Colors - Enhanced */
  --brand-primary: #0C1E30;
  --brand-primary-light: #1A3B59;
  /* --brand-accent נושא טקסט בשישה כללים (.step-arrow, .icon-accent,
     .nav a:hover, .card-arrow, .premium-button-outline, .glass-button-small)
     וגם משמש כמסגרת ונקודה. ‏#FF6B2C נתן 2.19:1 על הפלדה — החיצים בין
     השלבים נבלעו. ‏#B33A10 נותן 4.90:1 ועובר גם כטקסט וגם כקו. */
  --brand-accent: #B33A10;
  --brand-accent-light: #C24310;   /* מילוי בלבד (scrollbar) — 4.22:1, מעל סף ה-3:1 */
  --brand-accent-dark: #8F2E0C;
  --brand-flame: #FF6B2C;
  --brand-fire: #E05510;

  /* Surface Colors — היו שכבות לבן שקוף, שנעלמות על רקע בהיר */
  --surface: #FBFBFA;
  --surface-2: #F2F4F1;
  --surface-3: #DFE3DE;
  --surface-hover: #F2F4F1;
  --surface-active: #DFE3DE;

  /* Glass Effects — זכוכית לבנה על פלדה היא כלום. משטח אטום במקום. */
  --glass-bg: #FBFBFA;
  --glass-bg-hover: #F2F4F1;
  --glass-border: #C9CFC9;
  --glass-border-hover: rgba(232, 83, 31, 0.45);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px rgba(20, 24, 26, 0.12);

  /* Text Colors — כל אחד מהם עבר את check-contrast על #E7EAE6 */
  --text: #1B2124;
  --text-2: #14181A;
  --text-muted: #5A6469;
  --text-muted-2: #5F686D;
  --text-muted-3: #6C767B;
  --text-muted-4: #626C71;

  /* Status Colors */
  --success: #16A34A;
  --success-light: #22C55E;
  --error: #EF4444;
  --error-light: #F87171;
  --warning: #EAB308;
  --warning-light: #FACC15;
  --info: #3B82F6;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0C1E30 0%, #1A3B59 50%, #2B6CB0 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B2C 0%, #FF8A4C 50%, #FFB088 100%);
  /* הגרדיאנט הזה נושא תווית לבנה בתשעה מקומות (`color: white !important`).
     העצירות הקודמות — ‎#E05510 / #FF6B2C / #FF8A4C — נותנות מול לבן
     3.83 / 2.84 / 2.34. כלומר הכפתור הראשי במסך הכניסה נמדד ב-2.84:1.
     זו בדיוק הרגרסיה שסעיף 16 ב-claude_02.md תיקן כשפיצל את הכתום
     ל-‎#E8531F (סימונים) ו-#B33A10 (טקסט ורקעי כפתורים).
     הגרדיאנט משרת שני שימושים מנוגדים, ולכן העצירות חייבות לעבור בשניהם:
       ‏1. רקע כפתור עם תווית לבנה  → כל עצירה מול לבן ≥ 4.5
       ‏2. .count-highlight — טקסט-גרדיאנט (background-clip:text), כלומר
          העצירות עצמן הן הטקסט → כל עצירה מול הפלדה #E7EAE6 ≥ 4.5
     הקצה הבהיר הקודם (#FF8A4C) נתן 1.93:1 על הפלדה — מונה שנבלע ברקע.
     נמדד לעצירות שנבחרו:
       ‏#8F2E0C  לבן 8.19  פלדה 6.75
       ‏#A03410  לבן 7.02  פלדה 5.78
       ‏#B33A10  לבן 5.95  פלדה 4.90   ← --accent עצמו
     גרדיאנט עדין יותר מהקודם, אבל הוא היחיד שעובר לשני הכיוונים. */
  --gradient-fire: linear-gradient(135deg, #8F2E0C 0%, #A03410 50%, #B33A10 100%);
  --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  
  /* Shadows - Premium */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  /* היה זוהר בכתום הישן. זוהר הוא אור על רקע כהה; על פלדה בהירה הוא כתם
     — סעיף 16. אותו צל, בכתום הנגיש ובעוצמה נמוכה יותר. */
  --shadow-accent: 0 10px 40px -10px rgba(179, 58, 16, 0.35);
  --shadow-glow: 0 0 40px rgba(255, 107, 44, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  
  /* Typography */
  /* Only three faces are vendored (vendor/fonts.css): Assistant, Suez One,
     IBM Plex Mono. Heebo and Rubik never were — naming them here sent every
     heading to the system sans and left the one vendored display face unused.
     Measured 05.09.2026; see docs/ARENA_BRIEF_TRACKING.md section 1.7. */
  --font-main: 'Assistant', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Suez One', Georgia, serif;
  
  /* Border Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;
  
  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Animations */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
}

/* ====== Global Styles ====== */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
}

/* ====== Glass Cards ====== */
.glass-card,
.app-shell,
.chef-card,
.rounded-2xl,
.rounded-xl {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  transition: all 0.3s var(--ease-default) !important;
}

/* .app-shell must NOT keep the blur, and this is not a taste decision.
   A non-none backdrop-filter makes an element a containing block for every
   `position: fixed` descendant — permanently, not only while something
   animates. .app-shell wraps every screen and grows to the height of the
   results list, so `position:fixed; inset:0` inside it measured that list
   rather than the viewport: the chef sheet opened far below the fold and had
   to be scrolled to, and centring it only centred it inside the tall box.
   Seven other components position fixed the same way — toasts, onboarding,
   instant booking, the loader — and were displaced by the same rule.
   The background and border above stay; only the blur goes, and what it was
   blurring is the page behind a full-width shell, which is nothing. */
.app-shell {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card:hover,
.chef-card:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-2xl), var(--shadow-glow) !important;
}

/* ====== Premium Buttons ====== */
button {
  font-family: var(--font-main) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  transition: all 0.3s var(--ease-bounce) !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
}

/* An element selector cannot be dodged by picking a different class, the way
   .rounded-lg dodges the .rounded-xl background override above. Anything that
   is semantically a button but visually text — a name in a list that opens a
   profile — needs this opt-out, and a class beats an element selector even when
   both are !important. */
.plain-control,
.plain-control:hover:not(:disabled) {
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}

button:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-xl) !important;
}

button:active:not(:disabled) {
  transform: translateY(0) scale(0.98) !important;
}

/* Primary buttons with fire gradient */
button[style*="background: var(--accent)"],
button[style*="background: var(--warm)"] {
  background: var(--gradient-fire) !important;
  color: white !important;
  box-shadow: var(--shadow-accent) !important;
}

button[style*="background: var(--accent)"]:hover,
button[style*="background: var(--warm)"]:hover {
  box-shadow: 0 20px 60px -10px rgba(255, 107, 44, 0.6) !important;
}

/* ====== Premium Cards ====== */
.shifts-editor > div,
.rounded-2xl.p-5 {
  background: var(--gradient-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ====== Inputs ====== */
input,
textarea,
select,
input.rounded-xl,
select.rounded-xl {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  font-family: var(--font-main) !important;
  padding: var(--space-md) var(--space-lg) !important;
  transition: all 0.3s var(--ease-default) !important;
  backdrop-filter: var(--glass-blur) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.2) !important;
  background: var(--surface-2) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted-3) !important;
}

/* ====== Headings ====== */
h1, h2, h3, h4, h5, h6 {
  /* No !important on family/weight/size below: eight screens set Suez One 400
     inline and puncher-theme.css:254 agrees. This sheet's marketing-scale
     heading type used to win over all of them. It is a floor now, not a law. */
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
}

h2 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 400;
}

h3 {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
}

/* ====== Text ====== */
p, span, div, label {
  font-family: var(--font-main) !important;
}

.text-xs {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* ====== Navigation ====== */

.nav a {
  color: var(--text-muted) !important;
  transition: color 0.3s var(--ease-default) !important;
  position: relative !important;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--brand-accent) !important;
}

.nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-fire);
  border-radius: 2px;
}

/* ====== Badges & Chips ====== */
[style*="rounded-full"] {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  transition: all 0.3s var(--ease-default) !important;
}

/* ====== Progress Bars ====== */
[style*="border-radius: 999px"],
.boot-progress-track {
  background: var(--surface) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}

.boot-progress,
[style*="background: var(--accent)"][style*="border-radius"] {
  background: var(--gradient-fire) !important;
  box-shadow: 0 0 10px rgba(255, 107, 44, 0.5) !important;
  animation: progressShine 2s ease-in-out infinite !important;
}

@keyframes progressShine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* ====== Animations ====== */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 44, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 44, 0.6); }
}

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

.screen-anim {
  animation: slideUp 0.4s var(--ease-out) !important;
}

/* ====== Scrollbar ====== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--brand-accent);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-accent-light);
}

/* ====== Focus States ====== */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: 2px !important;
}

/* ====== Leaflet Map ====== */
.leaflet-container {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ====== Dialogs ====== */
[role="dialog"],
.rounded-2xl.p-5.border {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  backdrop-filter: var(--glass-blur) !important;
}

/* ====== Mobile Optimizations ====== */
@media (max-width: 640px) {
  /* Same reason as the heading block above: a floor, not a law. */
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  
  .glass-card,
  .rounded-2xl {
    border-radius: var(--radius-lg) !important;
  }
}

/* ====== Premium Components ====== */

/* Hero Section */
.premium-hero {
  background: var(--gradient-primary) !important;
  position: relative !important;
  overflow: hidden !important;
}

.premium-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(255, 107, 44, 0.15) 0%, transparent 70%) !important;
  animation: heroGlow 10s ease-in-out infinite !important;
}

@keyframes heroGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 20px); }
}

/* Premium Badge */
.premium-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 107, 44, 0.15) !important;
  border: 1px solid rgba(255, 107, 44, 0.3) !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  /* היה --brand-accent-light, שהוא ערך מילוי. כאן הוא נושא מילים. */
  color: var(--brand-accent) !important;
  margin-bottom: 20px !important;
  backdrop-filter: var(--glass-blur) !important;
  animation: fadeInDown 0.6s var(--ease-out) !important;
}

.badge-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--brand-accent) !important;
  border-radius: 50% !important;
  animation: pulse 2s ease-in-out infinite !important;
}

/* Gradient Text */
.gradient-text {
  /* העצירות כאן הן הגליפים עצמם (background-clip:text), אז כל עצירה
     נמדדת מול הרקע. הרמפה הקודמת התחילה בלבן על פלדה בהירה — 1.21:1,
     כלומר חצי מהכותרת "צריך טבח עכשיו?" פשוט לא היה שם.
     ‏#1B2124 → #8F2E0C → #B33A10: 13.42 / 6.75 / 4.90 מול הפלדה. */
  background: linear-gradient(135deg, #1B2124 0%, #8F2E0C 50%, #B33A10 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* Live Counter */
.live-counter {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  color: var(--text-muted) !important;
  margin-top: 16px !important;
  animation: fadeInUp 0.8s var(--ease-out) !important;
}

.pulse-indicator {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--brand-accent) !important;
  position: relative !important;
}

.pulse-indicator::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 2px solid var(--brand-accent) !important;
  animation: pulseRing 2s ease-out infinite !important;
}

@keyframes pulseRing {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.count-number {
  font-weight: 700 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Premium Card */
.premium-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: var(--glass-blur) !important;
  transition: all 0.3s var(--ease-default) !important;
  box-shadow: var(--shadow-lg) !important;
}

.premium-card:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-2xl), var(--shadow-glow) !important;
}

.card-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}

.card-subtitle {
  font-size: 13px !important;
  color: var(--text-muted-2) !important;
}

.count-highlight {
  font-size: 16px !important;
  font-weight: 800 !important;
  background: var(--gradient-fire) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.card-arrow {
  color: var(--text-muted-2) !important;
  transform: rotate(180deg) !important;
  transition: transform 0.3s var(--ease-default) !important;
}

.premium-card:hover .card-arrow {
  transform: rotate(180deg) translateX(4px) !important;
  color: var(--brand-accent) !important;
}

/* Live Pulse Premium */
.live-pulse-premium {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--gradient-fire) !important;
  box-shadow: 0 0 20px rgba(255, 107, 44, 0.5) !important;
  flex-shrink: 0 !important;
}

.live-pulse-premium::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid var(--brand-accent) !important;
  animation: pulseRing 2s ease-out infinite !important;
}

/* Glass Button */
.glass-button {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  color: var(--text) !important;
  transition: all 0.3s var(--ease-default) !important;
}

.glass-button:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--brand-accent) !important;
  transform: scale(1.05) !important;
}

.glass-button-small {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted-4) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: color 0.3s var(--ease-default) !important;
}

.glass-button-small:hover {
  color: var(--brand-accent) !important;
}

/* Glass Chips */
.glass-chip {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  padding: 10px 18px !important;
  border-radius: 100px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.3s var(--ease-default) !important;
}

.glass-chip:hover {
  background: var(--surface-2) !important;
  border-color: var(--brand-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Premium Button Outline */

/* Icon Accent */
.icon-accent {
  color: var(--brand-accent) !important;
}

/* Section Label */
.section-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Glass Card */
.glass-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--shadow-lg) !important;
  transition: all 0.3s var(--ease-default) !important;
}

.glass-card:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-2xl), var(--shadow-glow) !important;
}

/* Steps Container */
.steps-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.step-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.step-number {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--gradient-fire) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: var(--shadow-accent) !important;
}

.step-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.step-arrow {
  font-size: 18px !important;
  color: var(--brand-accent) !important;
  font-weight: 700 !important;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* ====== Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ====== Reduced Motion ======
   Same selectors, same sheet, later in it — the only way to answer an !important
   shorthand at equal specificity. Durations collapse rather than animations being
   cancelled: .premium-badge and .live-counter reveal from opacity 0, and `animation:
   none` on those leaves the element invisible, which is worse than the motion. */
@media (prefers-reduced-motion: reduce) {
  .boot-progress,
  [style*="background: var(--accent)"][style*="border-radius"],
  .screen-anim,
  .premium-hero::before,
  .premium-badge,
  .badge-dot,
  .live-counter,
  .pulse-indicator::before,
  .live-pulse-premium::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}