/* ============================================================
   FACIAL INJECTABLES - Main Stylesheet
   A comprehensive, pre-compiled utility + component CSS file.
   No build step required.
   ============================================================ */

/* ----------------------------------------------------------------
   0. GOOGLE FONTS
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------------- */
:root {
  /* Primary (Navy Blue) scale */
  --primary-50:  #eef3f8;
  --primary-100: #d4e0ed;
  --primary-200: #a9c1db;
  --primary-300: #7ea2c9;
  --primary-400: #5383b7;
  --primary-500: #3366a0;
  --primary-600: #274f80;
  --primary-700: #1e3a5f;
  --primary-800: #152a45;
  --primary-900: #0c1a2b;

  /* Accent (Champagne Gold) */
  --accent:       #c9a46c;
  --accent-light: #e2c99a;
  --accent-dark:  #a37d45;

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;

  /* Neutrals */
  --white:    #ffffff;
  --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;
  --black:    #000000;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --rounded-sm:   0.125rem;
  --rounded:      0.25rem;
  --rounded-md:   0.375rem;
  --rounded-lg:   0.5rem;
  --rounded-xl:   0.75rem;
  --rounded-2xl:  1rem;
  --rounded-3xl:  1.5rem;
  --rounded-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition:      300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index layers */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ----------------------------------------------------------------
   2. CSS RESET / NORMALIZE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--white);
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-800);
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: var(--space-8) 0;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, .h1 { font-size: 2.5rem;   letter-spacing: -0.025em; }
h2, .h2 { font-size: 2rem;     letter-spacing: -0.02em;  }
h3, .h3 { font-size: 1.5rem;   letter-spacing: -0.015em; }
h4, .h4 { font-size: 1.25rem;  letter-spacing: -0.01em;  }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem;     }

@media (min-width: 768px) {
  h1, .h1 { font-size: 3rem;    }
  h2, .h2 { font-size: 2.25rem; }
  h3, .h3 { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
  h1, .h1 { font-size: 3.5rem;  }
  h2, .h2 { font-size: 2.5rem;  }
  h3, .h3 { font-size: 2rem;    }
}

.text-xs   { font-size: 0.75rem;  line-height: 1rem;    }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem;  }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem;    }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem;  }
.text-5xl  { font-size: 3rem;     line-height: 1.2;     }
.text-6xl  { font-size: 3.75rem;  line-height: 1.1;     }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body);    }
.italic       { font-style: italic; }

.text-left    { text-align: left;    }
.text-center  { text-align: center;  }
.text-right   { text-align: right;   }
.text-justify { text-align: justify; }

.uppercase   { text-transform: uppercase;  }
.lowercase   { text-transform: lowercase;  }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none;       }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0;        }
.tracking-wide   { letter-spacing: 0.025em;  }
.tracking-wider  { letter-spacing: 0.05em;   }
.tracking-widest { letter-spacing: 0.1em;    }

.leading-none    { line-height: 1;     }
.leading-tight   { line-height: 1.25;  }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5;   }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2;     }

.underline        { text-decoration: underline;      }
.no-underline     { text-decoration: none;           }
.line-through     { text-decoration: line-through;   }
.decoration-accent { text-decoration-color: var(--accent); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------
   4. COLORS
   ---------------------------------------------------------------- */
/* Text colors */
.text-primary-50  { color: var(--primary-50);  }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }
.text-accent       { color: var(--accent);       }
.text-accent-light { color: var(--accent-light); }
.text-accent-dark  { color: var(--accent-dark);  }
.text-white   { color: var(--white);   }
.text-black   { color: var(--black);   }
.text-gray-50  { color: var(--gray-50);  }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }
.text-success  { color: var(--success); }
.text-warning  { color: var(--warning); }
.text-error    { color: var(--error);   }

/* Background colors */
.bg-primary-50  { background-color: var(--primary-50);  }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }
.bg-accent       { background-color: var(--accent);       }
.bg-accent-light { background-color: var(--accent-light); }
.bg-accent-dark  { background-color: var(--accent-dark);  }
.bg-white   { background-color: var(--white);   }
.bg-black   { background-color: var(--black);   }
.bg-gray-50  { background-color: var(--gray-50);  }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }
.bg-success     { background-color: var(--success); }
.bg-warning     { background-color: var(--warning); }
.bg-error       { background-color: var(--error);   }
.bg-transparent { background-color: transparent;     }

/* Border colors */
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-500 { border-color: var(--primary-500); }
.border-primary-700 { border-color: var(--primary-700); }
.border-accent       { border-color: var(--accent);       }
.border-accent-light { border-color: var(--accent-light); }
.border-gray-100 { border-color: var(--gray-100); }
.border-gray-200 { border-color: var(--gray-200); }
.border-gray-300 { border-color: var(--gray-300); }
.border-gray-400 { border-color: var(--gray-400); }
.border-white       { border-color: var(--white);       }
.border-transparent { border-color: transparent;         }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error   { border-color: var(--error);   }

/* ----------------------------------------------------------------
   5. LAYOUT & CONTAINER
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

@media (min-width: 1024px) {
  .container { padding-left: var(--space-8); padding-right: var(--space-8); }
}

.container-sm { max-width: 640px;  }
.container-md { max-width: 768px;  }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------------
   6. DISPLAY
   ---------------------------------------------------------------- */
.block        { display: block;        }
.inline-block { display: inline-block; }
.inline       { display: inline;       }
.hidden       { display: none;         }
.flex         { display: flex;         }
.inline-flex  { display: inline-flex;  }
.grid         { display: grid;         }

/* ----------------------------------------------------------------
   7. FLEXBOX UTILITIES
   ---------------------------------------------------------------- */
.flex-row      { flex-direction: row;            }
.flex-col      { flex-direction: column;         }
.flex-row-rev  { flex-direction: row-reverse;    }
.flex-col-rev  { flex-direction: column-reverse; }
.flex-wrap     { flex-wrap: wrap;   }
.flex-nowrap   { flex-wrap: nowrap; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center;     }
.items-end      { align-items: flex-end;   }
.items-stretch  { align-items: stretch;    }
.items-baseline { align-items: baseline;   }

.justify-start   { justify-content: flex-start;    }
.justify-center  { justify-content: center;        }
.justify-end     { justify-content: flex-end;      }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around;  }
.justify-evenly  { justify-content: space-evenly;  }

.self-start  { align-self: flex-start; }
.self-center { align-self: center;     }
.self-end    { align-self: flex-end;   }

.flex-1    { flex: 1 1 0%;   }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none;     }
.grow      { flex-grow: 1;   }
.grow-0    { flex-grow: 0;   }
.shrink    { flex-shrink: 1; }
.shrink-0  { flex-shrink: 0; }

/* ----------------------------------------------------------------
   8. GRID UTILITIES
   ---------------------------------------------------------------- */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr));  }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr));  }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr));  }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr));  }
.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr));  }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr));  }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1    { grid-column: span 1 / span 1;   }
.col-span-2    { grid-column: span 2 / span 2;   }
.col-span-3    { grid-column: span 3 / span 3;   }
.col-span-4    { grid-column: span 4 / span 4;   }
.col-span-6    { grid-column: span 6 / span 6;   }
.col-span-8    { grid-column: span 8 / span 8;   }
.col-span-12   { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1;            }

.gap-0  { gap: 0;               }
.gap-1  { gap: var(--space-1);  }
.gap-2  { gap: var(--space-2);  }
.gap-3  { gap: var(--space-3);  }
.gap-4  { gap: var(--space-4);  }
.gap-5  { gap: var(--space-5);  }
.gap-6  { gap: var(--space-6);  }
.gap-8  { gap: var(--space-8);  }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.gap-x-4  { column-gap: var(--space-4); }
.gap-x-6  { column-gap: var(--space-6); }
.gap-x-8  { column-gap: var(--space-8); }
.gap-y-4  { row-gap: var(--space-4);    }
.gap-y-6  { row-gap: var(--space-6);    }
.gap-y-8  { row-gap: var(--space-8);    }
.gap-y-10 { row-gap: var(--space-10);   }
.gap-y-12 { row-gap: var(--space-12);   }

/* ----------------------------------------------------------------
   9. SPACING (Margin & Padding)
   ---------------------------------------------------------------- */
/* --- Margin --- */
.m-0 { margin: 0; } .m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); } .m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); } .m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); } .m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }

.my-0  { margin-top: 0; margin-bottom: 0; }
.my-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem;  }
.-mt-4 { margin-top: -1rem;    }
.-mt-8 { margin-top: -2rem;    }

/* --- Padding --- */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }

.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

.pt-0  { padding-top: 0; }
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pt-10 { padding-top: var(--space-10); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }

.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }

.pl-0 { padding-left: 0; }
.pl-4 { padding-left: var(--space-4); }
.pl-6 { padding-left: var(--space-6); }
.pl-8 { padding-left: var(--space-8); }

.pr-0 { padding-right: 0; }
.pr-4 { padding-right: var(--space-4); }
.pr-6 { padding-right: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }

/* ----------------------------------------------------------------
   10. SIZING
   ---------------------------------------------------------------- */
.w-full   { width: 100%;    }
.w-screen { width: 100vw;   }
.w-auto   { width: auto;    }
.w-1\/2   { width: 50%;     }
.w-1\/3   { width: 33.333%; }
.w-2\/3   { width: 66.667%; }
.w-1\/4   { width: 25%;     }
.w-3\/4   { width: 75%;     }
.w-4  { width: 1rem;    }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem;  }
.w-8  { width: 2rem;    }
.w-10 { width: 2.5rem;  }
.w-12 { width: 3rem;    }
.w-16 { width: 4rem;    }
.w-20 { width: 5rem;    }
.w-24 { width: 6rem;    }
.w-32 { width: 8rem;    }
.w-48 { width: 12rem;   }
.w-64 { width: 16rem;   }

.min-w-0    { min-width: 0;    }
.min-w-full { min-width: 100%; }
.max-w-xs   { max-width: 20rem; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-lg   { max-width: 32rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.max-w-full { max-width: 100%;  }
.max-w-prose { max-width: 65ch; }

.h-full   { height: 100%;    }
.h-screen { height: 100vh;   }
.h-auto   { height: auto;    }
.h-0  { height: 0;       }
.h-1  { height: 0.25rem; }
.h-2  { height: 0.5rem;  }
.h-4  { height: 1rem;    }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem;  }
.h-8  { height: 2rem;    }
.h-10 { height: 2.5rem;  }
.h-12 { height: 3rem;    }
.h-16 { height: 4rem;    }
.h-20 { height: 5rem;    }
.h-24 { height: 6rem;    }
.h-32 { height: 8rem;    }
.h-40 { height: 10rem;   }
.h-48 { height: 12rem;   }
.h-64 { height: 16rem;   }
.h-96 { height: 24rem;   }

.min-h-0      { min-height: 0;     }
.min-h-full   { min-height: 100%;  }
.min-h-screen { min-height: 100vh; }

/* ----------------------------------------------------------------
   11. POSITIONING
   ---------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }
.sticky   { position: sticky;   }
.static   { position: static;   }

.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0;    }
.top-1    { top: var(--space-1); }
.top-2    { top: var(--space-2); }
.top-4    { top: var(--space-4); }
.top-full { top: 100%; }
.right-0  { right: 0;  }
.right-4  { right: var(--space-4); }
.bottom-0 { bottom: 0; }
.bottom-4 { bottom: var(--space-4); }
.bottom-8 { bottom: var(--space-8); }
.left-0   { left: 0;   }
.left-4   { left: var(--space-4); }
.left-1\/2 { left: 50%; }

/* ----------------------------------------------------------------
   12. OVERFLOW & VISIBILITY
   ---------------------------------------------------------------- */
.overflow-hidden  { overflow: hidden;  }
.overflow-auto    { overflow: auto;    }
.overflow-scroll  { overflow: scroll;  }
.overflow-visible { overflow: visible; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

.visible   { visibility: visible; }
.invisible { visibility: hidden;  }

.opacity-0   { opacity: 0;    }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5;  }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1;    }

/* ----------------------------------------------------------------
   13. BORDERS
   ---------------------------------------------------------------- */
.border   { border: 1px solid var(--gray-200); }
.border-0 { border: none; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-t { border-top: 1px solid var(--gray-200); }
.border-b { border-bottom: 1px solid var(--gray-200); }
.border-l { border-left: 1px solid var(--gray-200); }
.border-r { border-right: 1px solid var(--gray-200); }
.border-l-4 { border-left-width: 4px; }
.border-t-4 { border-top-width: 4px; }

.rounded-none { border-radius: 0; }
.rounded-sm   { border-radius: var(--rounded-sm); }
.rounded      { border-radius: var(--rounded); }
.rounded-md   { border-radius: var(--rounded-md); }
.rounded-lg   { border-radius: var(--rounded-lg); }
.rounded-xl   { border-radius: var(--rounded-xl); }
.rounded-2xl  { border-radius: var(--rounded-2xl); }
.rounded-3xl  { border-radius: var(--rounded-3xl); }
.rounded-full { border-radius: var(--rounded-full); }
.rounded-t-lg { border-top-left-radius: var(--rounded-lg); border-top-right-radius: var(--rounded-lg); }
.rounded-b-lg { border-bottom-left-radius: var(--rounded-lg); border-bottom-right-radius: var(--rounded-lg); }

.divide-y > * + * { border-top: 1px solid var(--gray-200); }
.divide-x > * + * { border-left: 1px solid var(--gray-200); }
.divide-gray-200 > * + * { border-color: var(--gray-200); }

/* ----------------------------------------------------------------
   14. SHADOWS
   ---------------------------------------------------------------- */
.shadow-sm  { box-shadow: var(--shadow-sm);  }
.shadow     { box-shadow: var(--shadow);     }
.shadow-md  { box-shadow: var(--shadow-md);  }
.shadow-lg  { box-shadow: var(--shadow-lg);  }
.shadow-xl  { box-shadow: var(--shadow-xl);  }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-none { box-shadow: none; }

/* ----------------------------------------------------------------
   15. TRANSITIONS
   ---------------------------------------------------------------- */
.transition      { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }
.transition-colors   { transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
.transition-opacity  { transition: opacity var(--transition); }
.transition-shadow   { transition: box-shadow var(--transition); }
.transition-transform { transition: transform var(--transition); }
.duration-150 { transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* ----------------------------------------------------------------
   16. TRANSFORMS
   ---------------------------------------------------------------- */
.transform         { transform: translateX(0); }
.translate-y-0     { transform: translateY(0); }
.translate-y-1     { transform: translateY(0.25rem); }
.translate-y-2     { transform: translateY(0.5rem); }
.-translate-y-1    { transform: translateY(-0.25rem); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.translate-x-full  { transform: translateX(100%); }
.-translate-x-full { transform: translateX(-100%); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.rotate-0   { transform: rotate(0deg); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }

/* ----------------------------------------------------------------
   17. CURSOR & POINTER EVENTS
   ---------------------------------------------------------------- */
.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; }

/* ----------------------------------------------------------------
   18. Z-INDEX
   ---------------------------------------------------------------- */
.z-0   { z-index: 0;   }
.z-10  { z-index: 10;  }
.z-20  { z-index: 20;  }
.z-30  { z-index: 30;  }
.z-40  { z-index: 40;  }
.z-50  { z-index: 50;  }
.z-100 { z-index: 100; }

/* ----------------------------------------------------------------
   19. HOVER UTILITIES
   ---------------------------------------------------------------- */
.hover\:bg-primary-600:hover   { background-color: var(--primary-600); }
.hover\:bg-primary-800:hover   { background-color: var(--primary-800); }
.hover\:bg-accent-dark:hover   { background-color: var(--accent-dark); }
.hover\:bg-gray-50:hover       { background-color: var(--gray-50); }
.hover\:bg-gray-100:hover      { background-color: var(--gray-100); }
.hover\:text-accent:hover      { color: var(--accent); }
.hover\:text-primary-500:hover { color: var(--primary-500); }
.hover\:text-primary-700:hover { color: var(--primary-700); }
.hover\:text-white:hover       { color: var(--white); }
.hover\:shadow-lg:hover        { box-shadow: var(--shadow-lg); }
.hover\:shadow-xl:hover        { box-shadow: var(--shadow-xl); }
.hover\:underline:hover        { text-decoration: underline; }
.hover\:opacity-80:hover       { opacity: 0.8; }
.hover\:border-accent:hover    { border-color: var(--accent); }

.group:hover .group-hover\:text-accent { color: var(--accent); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }

/* ================================================================
   COMPONENT STYLES
   ================================================================ */

/* ----------------------------------------------------------------
   20. NAVIGATION
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--white);
  transition: box-shadow var(--transition);
}

.site-header.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Top bar */
.top-bar {
  background-color: var(--primary-800);
  color: var(--primary-100);
  font-size: 0.8125rem;
  padding: var(--space-2) 0;
}

.top-bar a {
  color: var(--accent-light);
  transition: color var(--transition-fast);
}

.top-bar a:hover {
  color: var(--accent);
}

/* Main nav */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.nav-logo img {
  height: 48px;
  width: auto;
}

@media (min-width: 768px) {
  .nav-logo img { height: 56px; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 1024px) {
  .nav-links { display: flex; }
}

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: var(--rounded-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-700);
  background-color: var(--primary-50);
}

.nav-link.active {
  font-weight: 600;
}

/* Dropdown / Mega menu */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-dropdown-toggle svg,
.nav-dropdown-toggle .chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.nav-dropdown.open .nav-dropdown-toggle .chevron,
.nav-dropdown:hover .nav-dropdown-toggle .chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-dropdown);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  color: var(--gray-700);
  border-radius: var(--rounded-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-menu a:hover {
  background-color: var(--primary-50);
  color: var(--primary-700);
}

/* Mega menu */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-dropdown);
}

.mega-menu.open,
.nav-dropdown:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.mega-menu-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-500);
  margin-bottom: var(--space-3);
}

.mega-menu-col a {
  display: block;
  padding: var(--space-1) 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: color var(--transition-fast);
}

.mega-menu-col a:hover {
  color: var(--primary-700);
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-phone {
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--primary-700);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .nav-phone { display: flex; }
}

/* Mobile hamburger */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .mobile-menu-toggle { display: none; }
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--gray-700);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background-color: var(--white);
  box-shadow: var(--shadow-2xl);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: var(--z-overlay);
  overflow-y: auto;
  padding: var(--space-6);
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: calc(var(--z-overlay) - 1);
}

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

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  margin-left: auto;
  margin-bottom: var(--space-4);
  transition: background-color var(--transition-fast);
}

.mobile-menu-close:hover {
  background-color: var(--gray-100);
}

.mobile-menu .mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.mobile-menu .mobile-nav-link:hover,
.mobile-menu .mobile-nav-link.active {
  color: var(--primary-700);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.mobile-submenu.open {
  max-height: 500px;
}

.mobile-submenu a {
  display: block;
  padding: var(--space-2) var(--space-6);
  font-size: 0.875rem;
  color: var(--gray-600);
}

.mobile-submenu a:hover {
  color: var(--primary-700);
}

/* ----------------------------------------------------------------
   21. HERO SECTION
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-color: var(--primary-800);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (min-width: 768px)  { .hero { min-height: 560px; } }
@media (min-width: 1024px) { .hero { min-height: 640px; } }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,58,95,0.85) 0%, rgba(12,26,43,0.7) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: var(--white);
}

.hero-content h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.hero-content p {
  font-size: 1.125rem;
  color: var(--primary-100);
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .hero-content p { font-size: 1.25rem; }
}

.hero-content .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: rgba(201,164,108,0.2);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--rounded-full);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-sm { min-height: 320px; }
.hero-lg { min-height: 720px; }

.hero-center { text-align: center; }
.hero-center .hero-content {
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------
   22. BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--rounded-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--primary-700);
  color: var(--white);
  border-color: var(--primary-700);
}

.btn-primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  box-shadow: 0 4px 12px rgba(30,58,95,0.3);
}

.btn-primary:active {
  background-color: var(--primary-800);
}

.btn-secondary {
  background-color: var(--accent);
  color: var(--primary-900);
  border-color: var(--accent);
}

.btn-secondary:hover {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(201,164,108,0.3);
}

.btn-secondary:active {
  background-color: var(--accent-dark);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-700);
  border-color: var(--primary-300);
}

.btn-outline:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-500);
}

.btn-outline-white {
  background-color: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}

.btn-outline-white:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: var(--white);
}

.btn-ghost {
  background-color: transparent;
  color: var(--primary-700);
  border-color: transparent;
}

.btn-ghost:hover {
  background-color: var(--gray-100);
}

.btn-white {
  background-color: var(--white);
  color: var(--primary-700);
  border-color: var(--white);
}

.btn-white:hover {
  background-color: var(--gray-100);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-sm {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

.btn-lg,
.btn-large {
  padding: 0.875rem 2rem;
  font-size: 1.0625rem;
}

.btn-xl {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn svg, .btn i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-lg svg, .btn-large svg {
  width: 20px;
  height: 20px;
}

/* ----------------------------------------------------------------
   23. CARDS
   ---------------------------------------------------------------- */
.card {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-body {
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .card-body { padding: var(--space-6); }
}

.card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.card-img-top {
  border-bottom: 1px solid var(--gray-100);
}

/* Course card */
.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.course-card .card-img { aspect-ratio: 16/9; }

.course-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-card .course-level {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  margin-bottom: var(--space-2);
}

.course-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
}

.course-card p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  flex: 1;
}

.course-card .course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.course-card .course-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-700);
}

/* Location card */
.location-card { position: relative; }

.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.location-card .card-img { aspect-ratio: 4/3; }

.location-card .location-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: var(--space-6) var(--space-5) var(--space-5);
  color: var(--white);
}

.location-card .location-overlay h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.location-card .location-overlay p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}

/* Blog card */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover { transform: translateY(-4px); }

.blog-card .card-img { aspect-ratio: 16/9; }

.blog-card .blog-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  margin-bottom: var(--space-2);
}

.blog-card h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.blog-card:hover h3 { color: var(--primary-600); }

.blog-card p {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  flex: 1;
}

.blog-card .blog-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.blog-card .blog-meta img {
  width: 32px;
  height: 32px;
  border-radius: var(--rounded-full);
  object-fit: cover;
}

/* Pricing card */
.pricing-card {
  text-align: center;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.pricing-card.popular {
  border-color: var(--accent);
  border-width: 2px;
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.pricing-card.popular:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.pricing-card .popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: var(--primary-900);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--rounded-full);
  white-space: nowrap;
}

.pricing-card .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-800);
  font-family: var(--font-heading);
}

.pricing-card .price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--gray-500);
}

.pricing-card ul { text-align: left; }

.pricing-card ul li {
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
  color: var(--gray-600);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.pricing-card ul li::before {
  content: "\2713";
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

/* Testimonial card */
.testimonial-card {
  padding: var(--space-6);
  background: var(--white);
}

.testimonial-card .stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-3);
  color: var(--warning);
  font-size: 1.125rem;
}

.testimonial-card blockquote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-card .testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: var(--rounded-full);
  object-fit: cover;
}

.testimonial-card .testimonial-author .author-name {
  font-weight: 600;
  color: var(--primary-800);
  font-size: 0.9375rem;
}

.testimonial-card .testimonial-author .author-title {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* ----------------------------------------------------------------
   24. BADGES
   ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--rounded-full);
  line-height: 1.5;
  white-space: nowrap;
}

.badge-primary  { background-color: var(--primary-100); color: var(--primary-700); }
.badge-accent   { background-color: rgba(201,164,108,0.2); color: var(--accent-dark); }
.badge-success  { background-color: rgba(16,185,129,0.1); color: var(--success); }
.badge-warning  { background-color: rgba(245,158,11,0.1); color: var(--warning); }
.badge-error    { background-color: rgba(239,68,68,0.1); color: var(--error); }
.badge-new      { background-color: var(--success); color: var(--white); }
.badge-popular  { background-color: var(--accent); color: var(--primary-900); }
.badge-sold-out { background-color: var(--gray-200); color: var(--gray-600); }

.badge-beginner     { background-color: #dbeafe; color: #1d4ed8; }
.badge-intermediate { background-color: #fef3c7; color: #b45309; }
.badge-advanced     { background-color: #fce7f3; color: #be185d; }
.badge-master       { background-color: #ede9fe; color: #7c3aed; }

.badge-lg { padding: 0.25rem 0.875rem; font-size: 0.8125rem; }

/* ----------------------------------------------------------------
   25. FORMS
   ---------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--error);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--gray-800);
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--rounded-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.1);
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--error);
  margin-top: var(--space-1);
}

.form-help {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: var(--space-1);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-checkbox,
.form-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9375rem;
  cursor: pointer;
}

.form-checkbox input,
.form-radio input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-700);
  flex-shrink: 0;
}

.input-group {
  display: flex;
  gap: 0;
}

.input-group .form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ----------------------------------------------------------------
   26. ACCORDION / FAQ
   ---------------------------------------------------------------- */
.accordion {
  border: 1px solid var(--gray-200);
  border-radius: var(--rounded-xl);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--gray-200);
}

.accordion-item:last-child { border-bottom: none; }

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

.accordion-header:hover {
  background-color: var(--gray-50);
}

.accordion-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--gray-500);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
  color: var(--primary-700);
}

.accordion-item.active .accordion-header {
  color: var(--primary-700);
  background-color: var(--primary-50);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition), padding var(--transition);
}

.accordion-item.active .accordion-body {
  max-height: 500px;
}

.accordion-content {
  padding: 0 var(--space-6) var(--space-6);
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.7;
}

/* Legacy FAQ styles (backward compatibility) */
.faq-item .faq-answer { display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-item .faq-icon { transition: transform 0.2s ease; }

/* ----------------------------------------------------------------
   27. BREADCRUMB
   ---------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.breadcrumb a {
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--primary-700); }

.breadcrumb .separator { color: var(--gray-300); }

.breadcrumb .current {
  color: var(--primary-700);
  font-weight: 500;
}

/* ----------------------------------------------------------------
   28. CTA BANNER
   ---------------------------------------------------------------- */
.cta-banner {
  background-color: var(--primary-700);
  color: var(--white);
  padding: var(--space-12) 0;
  text-align: center;
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-banner p {
  font-size: 1.125rem;
  color: var(--primary-100);
  margin-bottom: var(--space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner-gradient {
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);
}

.cta-banner-accent {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
}

.cta-banner-accent h2 { color: var(--primary-900); }
.cta-banner-accent p  { color: var(--primary-800); }

/* ----------------------------------------------------------------
   29. NEWSLETTER
   ---------------------------------------------------------------- */
.newsletter-section {
  background-color: var(--primary-50);
  padding: var(--space-12) 0;
}

.newsletter-section h2 { margin-bottom: var(--space-2); }

.newsletter-section p {
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 500px;
}

@media (min-width: 640px) {
  .newsletter-form { flex-direction: row; }
}

.newsletter-form .form-input { flex: 1; }

.newsletter-success {
  display: none;
  padding: var(--space-4);
  background-color: rgba(16,185,129,0.1);
  border: 1px solid var(--success);
  border-radius: var(--rounded-lg);
  color: var(--success);
  font-weight: 500;
  text-align: center;
}

.newsletter-success.show { display: block; }

/* ----------------------------------------------------------------
   30. PRICING TABLE
   ---------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 768px)  { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--gray-100);
}

.pricing-header h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}

.pricing-body  { padding: var(--space-6); }
.pricing-footer { padding: 0 var(--space-6) var(--space-6); }

/* ----------------------------------------------------------------
   31. TESTIMONIAL CAROUSEL
   ---------------------------------------------------------------- */
.testimonial-carousel {
  position: relative;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 500ms ease;
}

.testimonial-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 var(--space-4);
}

@media (min-width: 768px)  { .testimonial-slide { flex: 0 0 50%; } }
@media (min-width: 1024px) { .testimonial-slide { flex: 0 0 33.333%; } }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.carousel-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-full);
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-600);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.carousel-btn:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  color: var(--white);
}

.carousel-dots {
  display: flex;
  gap: var(--space-2);
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--rounded-full);
  background-color: var(--gray-300);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  padding: 0;
}

.carousel-dot.active {
  background-color: var(--primary-700);
  transform: scale(1.2);
}

/* ----------------------------------------------------------------
   32. STATS COUNTER
   ---------------------------------------------------------------- */
.stats-section {
  background-color: var(--primary-800);
  padding: var(--space-12) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-item { color: var(--white); }

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1;
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .stat-number { font-size: 3rem; }
}

.stat-label {
  font-size: 0.875rem;
  color: var(--primary-200);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   33. BLOG LISTING
   ---------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-featured { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .blog-featured .blog-card { flex-direction: row; }

  .blog-featured .blog-card .card-img {
    width: 50%;
    aspect-ratio: auto;
    min-height: 300px;
  }

  .blog-featured .blog-card .card-body {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8);
  }
}

/* ----------------------------------------------------------------
   34. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  background-color: var(--primary-900);
  color: var(--primary-200);
  padding-top: var(--space-16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); } }

.footer-brand { max-width: 320px; }

.footer-brand img {
  height: 48px;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--primary-300);
  margin-bottom: var(--space-4);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  background-color: rgba(255,255,255,0.08);
  color: var(--primary-200);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--accent);
  color: var(--primary-900);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.footer-col ul li { margin-bottom: var(--space-2); }

.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--primary-300);
  transition: color var(--transition-fast);
}

.footer-col ul li a:hover { color: var(--accent-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--primary-400);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-4);
}

.footer-bottom-links a {
  font-size: 0.8125rem;
  color: var(--primary-400);
  transition: color var(--transition-fast);
}

.footer-bottom-links a:hover { color: var(--accent-light); }

/* ----------------------------------------------------------------
   35. SCROLL-TO-TOP
   ---------------------------------------------------------------- */
.scroll-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-700);
  color: var(--white);
  border-radius: var(--rounded-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background-color var(--transition-fast);
  cursor: pointer;
  z-index: var(--z-sticky);
  border: none;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--accent);
  color: var(--primary-900);
}

.scroll-to-top svg {
  width: 20px;
  height: 20px;
}

/* ----------------------------------------------------------------
   36. LOADING / SKELETON
   ---------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--rounded-md);
}

@keyframes skeleton-loading {
  0%   { background-position: 200% 0;  }
  100% { background-position: -200% 0; }
}

.skeleton-text   { height: 1rem; margin-bottom: var(--space-2); width: 100%; }
.skeleton-text.short  { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-heading { height: 1.5rem; margin-bottom: var(--space-4); width: 70%; }
.skeleton-img     { width: 100%; aspect-ratio: 16/9; }
.skeleton-avatar  { width: 48px; height: 48px; border-radius: var(--rounded-full); }

.skeleton-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  padding: var(--space-6);
}

/* ----------------------------------------------------------------
   37. ANIMATIONS
   ---------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-in.visible { opacity: 1; }

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

.count-up { font-variant-numeric: tabular-nums; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%      { transform: translateY(0);   animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* ----------------------------------------------------------------
   38. IMAGE UTILITIES
   ---------------------------------------------------------------- */
.img-rounded    { border-radius: var(--rounded-lg); }
.img-rounded-xl { border-radius: var(--rounded-xl); }
.img-circle     { border-radius: var(--rounded-full); }
.img-shadow     { box-shadow: var(--shadow-lg); }
.img-shadow-xl  { box-shadow: var(--shadow-xl); }
.img-cover      { object-fit: cover; width: 100%; height: 100%; }
.img-contain    { object-fit: contain; }

.aspect-video  { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-4\/3   { aspect-ratio: 4/3; }
.aspect-3\/2   { aspect-ratio: 3/2; }

.lazy-img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lazy-img.loaded { opacity: 1; }

/* ----------------------------------------------------------------
   39. PROSE (Blog Content)
   ---------------------------------------------------------------- */
.prose {
  max-width: 65ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--gray-700);
}

.prose h1 { font-size: 2.25rem; margin-top: 0; margin-bottom: var(--space-6); }
.prose h2 { font-size: 1.75rem; margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { font-size: 1.375rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h4 { font-size: 1.125rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }

.prose p { margin-bottom: var(--space-5); }

.prose a {
  color: var(--primary-600);
  text-decoration: underline;
  text-decoration-color: var(--primary-200);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}

.prose a:hover { text-decoration-color: var(--primary-600); }

.prose strong { font-weight: 600; color: var(--gray-900); }

.prose ul, .prose ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }

.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  border-left: 4px solid var(--accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background-color: var(--gray-50);
  border-radius: 0 var(--rounded-lg) var(--rounded-lg) 0;
  font-style: italic;
  color: var(--gray-600);
}

.prose img {
  border-radius: var(--rounded-lg);
  margin: var(--space-6) 0;
}

.prose figure { margin: var(--space-8) 0; }

.prose figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: var(--space-2);
}

.prose pre {
  background-color: var(--gray-900);
  color: var(--gray-100);
  padding: var(--space-5);
  border-radius: var(--rounded-lg);
  overflow-x: auto;
  margin: var(--space-6) 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.prose code {
  background-color: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--rounded);
  font-size: 0.875em;
}

.prose pre code { background: none; padding: 0; }

.prose table {
  width: 100%;
  margin: var(--space-6) 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--rounded-lg);
  overflow: hidden;
}

.prose th, .prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.prose th {
  background-color: var(--gray-50);
  font-weight: 600;
  color: var(--gray-800);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: var(--space-8) 0;
}

/* ----------------------------------------------------------------
   40. SECTION UTILITIES
   ---------------------------------------------------------------- */
.section { padding: var(--space-12) 0; }

@media (min-width: 768px)  { .section { padding: var(--space-16) 0; } }
@media (min-width: 1024px) { .section { padding: var(--space-20) 0; } }

.section-sm { padding: var(--space-8) 0; }
.section-lg { padding: var(--space-20) 0; }

@media (min-width: 768px) { .section-lg { padding: var(--space-24) 0; } }

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-10);
}

.section-header h2 { margin-bottom: var(--space-3); }

.section-header p {
  font-size: 1.0625rem;
  color: var(--gray-600);
  line-height: 1.7;
}

.section-header .section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  margin-bottom: var(--space-3);
}

/* ----------------------------------------------------------------
   41. RESPONSIVE UTILITIES
   ---------------------------------------------------------------- */
/* sm: 640px */
@media (min-width: 640px) {
  .sm\:block   { display: block; }
  .sm\:hidden  { display: none; }
  .sm\:flex    { display: flex; }
  .sm\:grid    { display: grid; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-left   { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .sm\:gap-6 { gap: var(--space-6); }
  .sm\:w-auto { width: auto; }
}

/* md: 768px */
@media (min-width: 768px) {
  .md\:block   { display: block; }
  .md\:hidden  { display: none; }
  .md\:flex    { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid    { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:flex-row     { flex-direction: row; }
  .md\:flex-row-rev { flex-direction: row-reverse; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:text-left   { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right  { text-align: right; }
  .md\:gap-6  { gap: var(--space-6); }
  .md\:gap-8  { gap: var(--space-8); }
  .md\:gap-10 { gap: var(--space-10); }
  .md\:px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:px-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
  .md\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .md\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-auto { width: auto; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .lg\:block   { display: block; }
  .lg\:hidden  { display: none; }
  .lg\:flex    { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid    { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:text-left { text-align: left; }
  .lg\:gap-6  { gap: var(--space-6); }
  .lg\:gap-8  { gap: var(--space-8); }
  .lg\:gap-10 { gap: var(--space-10); }
  .lg\:gap-12 { gap: var(--space-12); }
  .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .lg\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .lg\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .lg\:w-1\/3 { width: 33.333%; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-2\/3 { width: 66.667%; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:max-w-none { max-width: none; }
}

/* xl: 1280px */
@media (min-width: 1280px) {
  .xl\:block  { display: block; }
  .xl\:hidden { display: none; }
  .xl\:flex   { display: flex; }
  .xl\:grid   { display: grid; }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .xl\:gap-8  { gap: var(--space-8); }
  .xl\:gap-10 { gap: var(--space-10); }
  .xl\:px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
}

/* ----------------------------------------------------------------
   42. MISCELLANEOUS COMPONENTS
   ---------------------------------------------------------------- */
/* Divider with text */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--gray-400);
  font-size: 0.875rem;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--gray-200);
}

/* Alert / Notice */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--rounded-lg);
  font-size: 0.9375rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert-info    { background-color: var(--primary-50); color: var(--primary-700); border: 1px solid var(--primary-200); }
.alert-success { background-color: rgba(16,185,129,0.08); color: #065f46; border: 1px solid rgba(16,185,129,0.2); }
.alert-warning { background-color: rgba(245,158,11,0.08); color: #92400e; border: 1px solid rgba(245,158,11,0.2); }
.alert-error   { background-color: rgba(239,68,68,0.08); color: #991b1b; border: 1px solid rgba(239,68,68,0.2); }

/* Tag / Chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  background-color: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--rounded-full);
  transition: background-color var(--transition-fast);
}

.tag:hover { background-color: var(--gray-200); }

/* Tooltip */
.tooltip { position: relative; }

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  background-color: var(--gray-900);
  color: var(--white);
  font-size: 0.75rem;
  border-radius: var(--rounded-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-toast);
  pointer-events: none;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
}

.tab {
  padding: var(--space-3) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab:hover { color: var(--primary-700); }

.tab.active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-700);
  font-weight: 600;
}

.tab-content { display: none; padding: var(--space-6) 0; }
.tab-content.active { display: block; }

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--gray-200);
  border-radius: var(--rounded-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--primary-700);
  border-radius: var(--rounded-full);
  transition: width 0.6s ease;
}

.progress-bar-accent .progress-bar-fill {
  background-color: var(--accent);
}

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-full);
  overflow: hidden;
  background-color: var(--primary-100);
  color: var(--primary-700);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.875rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }

/* ----------------------------------------------------------------
   43. PRINT STYLES
   ---------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .scroll-to-top,
  .mobile-menu,
  .mobile-menu-overlay,
  .cta-banner {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a { text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}