/**
 * BestHouseDecor - Styles
 * CSS Architecture: SMACSS + Component-based
 * Naming Convention: SUIT CSS
 * Units: em + percentage
 * Reset: Meyer Reset
 */

/* ==========================================================================
   1. MEYER RESET
   ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

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

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Theme Tokens)
   ========================================================================== */

:root {
--color-primary: #8B7355;
    --color-primary-dark: #6B5A45;
    --color-primary-light: #A89070;
    --color-secondary: #D4C5B0;
    --color-accent: #C4A484;
--color-white: #FFFFFF;
    --color-offwhite: #FAF8F5;
    --color-cream: #F5F2ED;
    --color-gray-100: #F0EDE8;
    --color-gray-200: #E5E0D8;
    --color-gray-300: #C9C2B5;
    --color-gray-400: #9E9589;
    --color-gray-500: #6B6459;
    --color-gray-600: #4A453D;
    --color-gray-700: #2D2A26;
    --color-gray-800: #1A1816;
    --color-black: #0D0C0B;
--color-success: #4A7C59;
    --color-error: #B55A4C;
    --color-warning: #C9A227;
    --color-info: #5C7A99;
--font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-size-xs: 0.75em;
    --font-size-sm: 0.875em;
    --font-size-base: 1.125em;
    --font-size-lg: 1.25em;
    --font-size-xl: 1.5em;
    --font-size-2xl: 2em;
    --font-size-3xl: 2.5em;
    --font-size-4xl: 3em;
    --font-size-5xl: 4em;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
--space-1: 0.25em;
    --space-2: 0.5em;
    --space-3: 0.75em;
    --space-4: 1em;
    --space-5: 1.25em;
    --space-6: 1.5em;
    --space-8: 2em;
    --space-10: 2.5em;
    --space-12: 3em;
    --space-16: 4em;
    --space-20: 5em;
    --space-24: 6em;
--border-radius-sm: 0.25em;
    --border-radius-md: 0.5em;
    --border-radius-lg: 1em;
    --border-radius-xl: 1.5em;
    --border-radius-full: 50%;
--shadow-sm: 0 0.0625em 0.125em rgba(13, 12, 11, 0.05);
    --shadow-md: 0 0.25em 0.5em rgba(13, 12, 11, 0.08);
    --shadow-lg: 0 0.5em 1em rgba(13, 12, 11, 0.1);
    --shadow-xl: 0 1em 2em rgba(13, 12, 11, 0.12);
--transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
--container-max: 75em;
    --header-height: 4.5em;
}

/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-800);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus {
    outline: 0.125em solid var(--color-primary);
    outline-offset: 0.125em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

button:focus {
    outline: 0.125em solid var(--color-primary);
    outline-offset: 0.125em;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}
.SkipLink {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.SkipLink:focus {
    top: var(--space-4);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.Container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.Header {
    position: sticky;
    top: 0;
    background: var(--color-white);
    border-bottom: 0.0625em solid var(--color-gray-200);
    z-index: 1000;
    transition: box-shadow var(--transition-normal);
}

.Header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.Header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    height: var(--header-height);
}

.Header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.Header-logoIcon {
    width: 2.5em;
    height: 2.5em;
}

.Header-nav {
    display: none;
}

.Header-navList {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.Header-navItem {
    position: relative;
}

.Header-navLink {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.Header-navLink:hover,
.Header-navLink.is-active {
    color: var(--color-primary);
}

.Header-navArrow {
    width: 0.75em;
    height: 0.75em;
    transition: transform var(--transition-fast);
}

.Header-navItem--dropdown:hover .Header-navArrow {
    transform: rotate(180deg);
}
.Header-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.Header-navItem--dropdown:hover .Header-dropdown {
    opacity: 1;
    visibility: visible;
}

.Header-dropdownInner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 40em;
}

.Header-dropdownColumn h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.Header-dropdownLink {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.Header-dropdownLink:hover {
    color: var(--color-primary);
}

.Header-dropdownFeatured {
    padding: var(--space-4);
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
}

.Header-dropdownFeaturedImage {
    width: 100%;
    height: 6em;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-3);
}

.Header-dropdownFeaturedText {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.Header-dropdownFeaturedLink {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.Header-auth {
    display: none;
    align-items: center;
    gap: var(--space-3);
}

.Header-authLink {
    padding: var(--space-2) var(--space-4);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
}

.Header-authLink:hover {
    color: var(--color-primary);
}

.Header-authBtn {
    padding: var(--space-2) var(--space-5);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.Header-authBtn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-0.0625em);
}
.Header-menuToggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3125em;
    width: 2.5em;
    height: 2.5em;
    padding: 0.5em;
}

.Header-menuToggleBar {
    width: 100%;
    height: 0.125em;
    background: var(--color-gray-700);
    border-radius: 0.0625em;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.Header-menuToggle[aria-expanded="true"] .Header-menuToggleBar:nth-child(1) {
    transform: translateY(0.4375em) rotate(45deg);
}

.Header-menuToggle[aria-expanded="true"] .Header-menuToggleBar:nth-child(2) {
    opacity: 0;
}

.Header-menuToggle[aria-expanded="true"] .Header-menuToggleBar:nth-child(3) {
    transform: translateY(-0.4375em) rotate(-45deg);
}
.Header-mobileMenu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    padding: var(--space-6) var(--space-4);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
}

.Header-mobileMenu[aria-hidden="false"] {
    transform: translateX(0);
}

.Header-mobileNavLink {
    display: block;
    padding: var(--space-4) 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.Header-mobileNavLink.is-active {
    color: var(--color-primary);
}

.Header-mobileAuth {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.Header-mobileAuthLink {
    display: block;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
}

.Header-mobileAuthBtn {
    display: block;
    padding: var(--space-4);
    text-align: center;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.Hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    overflow: hidden;
}

.Hero-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-gray-100) 100%);
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

.Hero-backgroundOverlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B7355' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.Hero-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-12) var(--space-4);
}

.Hero-content {
    max-width: 38em;
}

.Hero-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-full);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.Hero-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
}

.Hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.Hero-stats {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding: var(--space-6) 0;
    border-top: 0.0625em solid var(--color-gray-200);
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.Hero-stat {
    display: flex;
    flex-direction: column;
}

.Hero-statNumber {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.Hero-statLabel {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.Hero-btnPrimary {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.Hero-btnPrimary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-0.125em);
    box-shadow: var(--shadow-lg);
    color: var(--color-white);
}

.Hero-btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: var(--color-white);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    border: 0.0625em solid var(--color-gray-300);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.Hero-btnSecondary svg {
    width: 1em;
    height: 1em;
}

.Hero-btnSecondary:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    color: var(--color-gray-700);
}

.Hero-trial {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Hero-visual {
    display: none;
}

.Hero-videoPreview {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.Hero-videoThumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    background-image: url('../images/video-featured.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Hero-playBtn {
    width: 5em;
    height: 5em;
    background: var(--color-white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

.Hero-playBtn svg {
    width: 2em;
    height: 2em;
    color: var(--color-primary);
    margin-left: 0.25em;
}

.Hero-playBtn:hover {
    transform: scale(1.1);
}

.Hero-videoMeta {
    padding: var(--space-4);
}

.Hero-videoLabel {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-2);
}

.Hero-videoTitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
}

.Hero-videoDuration {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   7. METRICS SECTION
   ========================================================================== */

.Metrics {
    background: var(--color-primary);
    padding: var(--space-12) 0;
}

.Metrics-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

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

.Metrics-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-md);
}

.Metrics-icon {
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-md);
}

.Metrics-icon svg {
    width: 1.5em;
    height: 1.5em;
    color: var(--color-white);
}

.Metrics-number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.Metrics-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   8. CATEGORIES SECTION
   ========================================================================== */

.Categories {
    padding: var(--space-16) 0;
    background: var(--color-white);
}

.Categories-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Categories-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.Categories-title {
    margin-bottom: var(--space-3);
}

.Categories-subtitle {
    color: var(--color-gray-500);
    max-width: 30em;
    margin: 0 auto;
}

.Categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.Categories-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.Categories-card:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-lg);
}

.Categories-cardIcon {
    width: 3.5em;
    height: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-3);
}

.Categories-cardIcon svg {
    width: 1.75em;
    height: 1.75em;
    color: var(--color-primary);
}

.Categories-cardTitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.Categories-cardCount {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Categories-action {
    text-align: center;
}

.Categories-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border: 0.0625em solid var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.Categories-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   9. FEATURED SECTION
   ========================================================================== */

.Featured {
    padding: var(--space-16) 0;
    background: var(--color-gray-100);
}

.Featured-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Featured-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.Featured-title {
    margin-bottom: var(--space-3);
}

.Featured-subtitle {
    color: var(--color-gray-500);
}

.Featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.Featured-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.Featured-card:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-xl);
}

.Featured-cardImage {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-400) 100%);
    background-image: url('../images/featured-placeholder.svg');
    background-size: cover;
    background-position: center;
}

.Featured-cardBadge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
}

.Featured-cardPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.5em;
    height: 3.5em;
    background: var(--color-white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast);
}

.Featured-card:hover .Featured-cardPlay {
    transform: translate(-50%, -50%) scale(1.1);
}

.Featured-cardPlay svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-primary);
    margin-left: 0.125em;
}

.Featured-cardContent {
    padding: var(--space-4);
}

.Featured-cardCategory {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-cream);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-2);
}

.Featured-cardTitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
}

.Featured-card--large .Featured-cardTitle {
    font-size: var(--font-size-lg);
}

.Featured-cardDescription {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.Featured-cardMeta {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

/* ==========================================================================
   10. INSTRUCTORS SECTION
   ========================================================================== */

.Instructors {
    padding: var(--space-16) 0;
    background: var(--color-white);
}

.Instructors-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Instructors-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.Instructors-title {
    margin-bottom: var(--space-3);
}

.Instructors-subtitle {
    color: var(--color-gray-500);
}

.Instructors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.Instructors-card {
    display: flex;
    flex-direction: column;
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.Instructors-card:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-lg);
}

.Instructors-cardImage {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
    background-image: url('../images/instructor-placeholder.svg');
    background-size: cover;
    background-position: center;
}

.Instructors-cardContent {
    padding: var(--space-5);
}

.Instructors-cardName {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-1);
}

.Instructors-cardRole {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
}

.Instructors-cardBio {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
}

.Instructors-cardStats {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.Instructors-action {
    text-align: center;
}

.Instructors-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border: 0.0625em solid var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.Instructors-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   11. PRICING SECTION
   ========================================================================== */

.Pricing {
    padding: var(--space-16) 0;
    background: var(--color-gray-100);
}

.Pricing-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Pricing-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.Pricing-title {
    margin-bottom: var(--space-3);
}

.Pricing-subtitle {
    color: var(--color-gray-500);
}

.Pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.Pricing-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.Pricing-card:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-xl);
}

.Pricing-card--recommended {
    border: 0.125em solid var(--color-primary);
}

.Pricing-cardBadge {
    position: absolute;
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
    white-space: nowrap;
}

.Pricing-cardName {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

.Pricing-cardPrice {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.Pricing-cardCurrency {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
}

.Pricing-cardAmount {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
}

.Pricing-cardPeriod {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Pricing-cardDiscount {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-success);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-6);
}

.Pricing-cardFeatures {
    text-align: left;
    margin-bottom: var(--space-8);
}

.Pricing-cardFeatures li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.Pricing-cardFeatures svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 0.125em;
}

.Pricing-cardBtn {
    display: block;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.Pricing-cardBtn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.Pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Pricing-guarantee svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-success);
}

/* ==========================================================================
   12. TESTIMONIALS SECTION
   ========================================================================== */

.Testimonials {
    padding: var(--space-16) 0;
    background: var(--color-white);
}

.Testimonials-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Testimonials-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.Testimonials-title {
    margin-bottom: var(--space-3);
}

.Testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.Testimonials-card {
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
}

.Testimonials-cardRating {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.Testimonials-cardRating svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-warning);
}

.Testimonials-cardText {
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.Testimonials-cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.Testimonials-cardAvatar {
    width: 3em;
    height: 3em;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
    background-image: url('../images/avatar-placeholder.svg');
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-full);
}

.Testimonials-cardName {
    display: block;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
}

.Testimonials-cardLocation {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

/* ==========================================================================
   13. CTA SECTION
   ========================================================================== */

.CTA {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.CTA-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.CTA-content {
    text-align: center;
}

.CTA-title {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.CTA-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-8);
}

.CTA-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-4);
}

.CTA-btnPrimary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.CTA-btnPrimary:hover {
    transform: translateY(-0.125em);
    box-shadow: var(--shadow-lg);
    color: var(--color-primary);
}

.CTA-btnSecondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-8);
    background: transparent;
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border: 0.0625em solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

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

.CTA-note {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.Footer {
    background: var(--color-gray-800);
    color: var(--color-gray-300);
}

.Footer-top {
    padding: var(--space-12) 0;
}

.Footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Footer-brand {
    margin-bottom: var(--space-8);
}

.Footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}

.Footer-logoIcon {
    width: 2em;
    height: 2em;
}

.Footer-brandText {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

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

.Footer-socialLink {
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-700);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.Footer-socialLink svg {
    width: 1.25em;
    height: 1.25em;
}

.Footer-socialLink:hover {
    background: var(--color-primary);
}

.Footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.Footer-linksTitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.Footer-linksList li {
    margin-bottom: var(--space-2);
}

.Footer-linksList a,
.Footer-linksList span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.Footer-linksList a:hover {
    color: var(--color-white);
}

.Footer-linksList--contact li {
    display: flex;
    gap: var(--space-2);
}

.Footer-linksList--contact svg {
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
    margin-top: 0.125em;
}

.Footer-bottom {
    padding: var(--space-6) 0;
    border-top: 0.0625em solid var(--color-gray-700);
}

.Footer-copyright {
    font-size: var(--font-size-sm);
    text-align: center;
    margin-bottom: var(--space-4);
}

.Footer-payment {
    text-align: center;
}

.Footer-payment span {
    display: block;
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-2);
}

.Footer-paymentIcons {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

.Footer-paymentIcons svg {
    width: 2.5em;
    height: 1.5em;
    color: var(--color-gray-500);
}

/* ==========================================================================
   15. PAGE HERO
   ========================================================================== */

.PageHero {
    padding: var(--space-12) 0;
    background: var(--color-cream);
    text-align: center;
}

.PageHero-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.PageHero-title {
    margin-bottom: var(--space-3);
}

.PageHero-subtitle {
    color: var(--color-gray-500);
    max-width: 35em;
    margin: 0 auto;
}

/* ==========================================================================
   16. VIDEO GRID / BIBLIOTECA
   ========================================================================== */

.Filters {
    padding: var(--space-6) 0;
    background: var(--color-white);
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.Filters-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Filters-search {
    position: relative;
    margin-bottom: var(--space-4);
}

.Filters-search svg {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    height: 1.25em;
    color: var(--color-gray-400);
}

.Filters-searchInput {
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast);
}

.Filters-searchInput:focus {
    outline: none;
    border-color: var(--color-primary);
}

.Filters-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.Filters-categoryBtn {
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.Filters-categoryBtn:hover,
.Filters-categoryBtn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

.Filters-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.Filters-sort label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.Filters-sortSelect {
    padding: var(--space-2) var(--space-3);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
}

.VideoGrid {
    padding: var(--space-10) 0;
    background: var(--color-gray-100);
}

.VideoGrid-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.VideoGrid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.VideoGrid-title {
    font-size: var(--font-size-xl);
}

.VideoGrid-count {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.VideoGrid-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.VideoCard {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.VideoCard:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-lg);
}

.VideoCard-link {
    display: block;
}

.VideoCard-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-400) 100%);
    overflow: hidden;
}

.VideoCard-thumbnailImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.VideoCard:hover .VideoCard-thumbnailImg {
    transform: scale(1.05);
}

.VideoCard-duration {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
}

.VideoCard-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
}

.VideoCard-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3em;
    height: 3em;
    background: var(--color-white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.VideoCard:hover .VideoCard-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.VideoCard-play svg {
    width: 1em;
    height: 1em;
    color: var(--color-primary);
    margin-left: 0.125em;
}

.VideoCard-content {
    padding: var(--space-4);
}

.VideoCard-category {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-cream);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-2);
}

.VideoCard-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
}

.VideoCard-title a {
    color: inherit;
}

.VideoCard-title a:hover {
    color: var(--color-primary);
}

.VideoCard-instructor {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.VideoCard-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

.VideoCard-rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.VideoCard-rating svg {
    width: 0.875em;
    height: 0.875em;
    color: var(--color-warning);
}

.VideoGrid-loadMore {
    text-align: center;
    margin-top: var(--space-10);
}

.VideoGrid-loadMoreBtn {
    padding: var(--space-3) var(--space-8);
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border: 0.0625em solid var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.VideoGrid-loadMoreBtn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   17. NEWSLETTER CTA
   ========================================================================== */

.NewsletterCTA {
    padding: var(--space-12) 0;
    background: var(--color-primary);
}

.NewsletterCTA-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.NewsletterCTA-content {
    text-align: center;
}

.NewsletterCTA-title {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.NewsletterCTA-text {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-6);
}

.NewsletterCTA-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 30em;
    margin: 0 auto var(--space-3);
}

.NewsletterCTA-input {
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
}

.NewsletterCTA-btn {
    padding: var(--space-3) var(--space-6);
    background: var(--color-gray-800);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.NewsletterCTA-btn:hover {
    background: var(--color-black);
}

.NewsletterCTA-note {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   18. INSTRUCTORS PAGE
   ========================================================================== */

.InstructorsPage {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.InstructorsPage-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.InstructorsPage-intro {
    max-width: 50em;
    margin: 0 auto var(--space-10);
    text-align: center;
}

.InstructorsPage-intro p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
}

.InstructorsPage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.InstructorCard {
    display: flex;
    flex-direction: column;
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

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

.InstructorCard-image {
    aspect-ratio: 4/3;
}

.InstructorCard-imageInner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%);
}

.InstructorCard-content {
    padding: var(--space-6);
}

.InstructorCard-name {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-1);
}

.InstructorCard-role {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-4);
}

.InstructorCard-bio {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
}

.InstructorCard-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.InstructorCard-expertise span {
    padding: var(--space-1) var(--space-2);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-sm);
}

.InstructorCard-stats {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
}

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

.InstructorCard-statNumber {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.InstructorCard-statLabel {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.InstructorCard-btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.InstructorCard-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.JoinTeam {
    padding: var(--space-12) 0;
    background: var(--color-gray-100);
}

.JoinTeam-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.JoinTeam-content {
    text-align: center;
}

.JoinTeam-title {
    margin-bottom: var(--space-3);
}

.JoinTeam-text {
    color: var(--color-gray-500);
    max-width: 35em;
    margin: 0 auto var(--space-6);
}

.JoinTeam-btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.JoinTeam-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ==========================================================================
   19. PRICING PAGE
   ========================================================================== */

.PricingPage {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.PricingPage-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.PricingPage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.PricingPage-card {
    position: relative;
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

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

.PricingPage-card--recommended {
    border: 0.125em solid var(--color-primary);
}

.PricingPage-cardBadge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.PricingPage-cardHeader {
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
}

.PricingPage-card--recommended .PricingPage-cardHeader {
    padding-top: var(--space-12);
}

.PricingPage-cardName {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

.PricingPage-cardPrice {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-1);
}

.PricingPage-cardCurrency {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
}

.PricingPage-cardAmount {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
}

.PricingPage-cardPeriod {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

.PricingPage-cardDiscount {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-success);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
    margin-top: var(--space-2);
}

.PricingPage-cardBody {
    padding: 0 var(--space-6);
}

.PricingPage-cardFeatures li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 0.0625em solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.PricingPage-cardFeatures li:last-child {
    border-bottom: none;
}

.PricingPage-cardFeatures svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 0.125em;
}

.PricingPage-cardFooter {
    padding: var(--space-6);
}

.PricingPage-cardBtn {
    display: block;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.PricingPage-cardBtn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.PricingPage-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-cream);
    border-radius: var(--border-radius-lg);
}

.PricingPage-guarantee svg {
    width: 3em;
    height: 3em;
    color: var(--color-success);
    flex-shrink: 0;
}

.PricingPage-guarantee h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-1);
}

.PricingPage-guarantee p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}
.Comparison {
    padding: var(--space-12) 0;
    background: var(--color-gray-100);
}

.Comparison-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.Comparison-title {
    text-align: center;
    margin-bottom: var(--space-8);
}

.Comparison-tableWrapper {
    overflow-x: auto;
}

.Comparison-table {
    width: 100%;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.Comparison-table th,
.Comparison-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.Comparison-table th {
    background: var(--color-gray-100);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.Comparison-table th:first-child,
.Comparison-table td:first-child {
    text-align: left;
}

.Comparison-highlight {
    background: rgba(139, 115, 85, 0.05);
}

.Comparison-table th.Comparison-highlight {
    background: var(--color-primary);
    color: var(--color-white);
}

.Comparison-table svg {
    width: 1.25em;
    height: 1.25em;
}

.Comparison-table svg[stroke="currentColor"]:first-child {
    color: var(--color-success);
}

.Comparison-table td svg[stroke="currentColor"] polyline {
    stroke: var(--color-success);
}

.Comparison-table td svg[stroke="currentColor"] line {
    stroke: var(--color-gray-400);
}
.PaymentMethods {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.PaymentMethods-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    text-align: center;
}

.PaymentMethods-title {
    margin-bottom: var(--space-2);
}

.PaymentMethods-subtitle {
    color: var(--color-gray-500);
    margin-bottom: var(--space-8);
}

.PaymentMethods-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
}

.PaymentMethods-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.PaymentMethods-item svg {
    width: 4em;
    height: 2.5em;
    color: var(--color-gray-500);
}

.PaymentMethods-item span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}
.PricingFAQ {
    padding: var(--space-12) 0;
    background: var(--color-gray-100);
}

.PricingFAQ-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.PricingFAQ-title {
    text-align: center;
    margin-bottom: var(--space-8);
}

.PricingFAQ-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.PricingFAQ-item {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--border-radius-lg);
}

.PricingFAQ-question {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.PricingFAQ-answer {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.PricingFAQ-more {
    text-align: center;
}

.PricingFAQ-moreLink {
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   20. FAQ PAGE
   ========================================================================== */

.FAQPage {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.FAQPage-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.FAQPage-sidebar {
    display: none;
}

.FAQPage-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

.FAQPage-nav h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.FAQPage-navLink {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-left: 0.125em solid transparent;
    margin-bottom: var(--space-1);
    transition: all var(--transition-fast);
}

.FAQPage-navLink:hover,
.FAQPage-navLink.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-cream);
}

.FAQPage-content {
    flex: 1;
}

.FAQPage-section {
    margin-bottom: var(--space-10);
}

.FAQPage-sectionTitle {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.FAQ-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.FAQ-item {
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.FAQ-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-4);
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    transition: background var(--transition-fast);
}

.FAQ-question:hover {
    background: var(--color-gray-100);
}

.FAQ-question svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.FAQ-question[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.FAQ-answer {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
}

.FAQ-item.is-open .FAQ-answer {
    display: block;
}

.FAQ-answer p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.FAQ-answer ul {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
}

.FAQ-answer li {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-1);
    list-style: disc;
}

.FAQContact {
    padding: var(--space-12) 0;
    background: var(--color-gray-100);
}

.FAQContact-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    text-align: center;
}

.FAQContact-title {
    margin-bottom: var(--space-2);
}

.FAQContact-text {
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.FAQContact-btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.FAQContact-btn:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ==========================================================================
   21. CONTACT PAGE
   ========================================================================== */

.ContactPage {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.ContactPage-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.ContactPage-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.ContactPage-form {
    flex: 1;
}

.ContactPage-formTitle {
    margin-bottom: var(--space-6);
}
.Message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--space-6);
}

.Message svg {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

.Message p {
    margin: 0;
    font-size: var(--font-size-sm);
}

.Message--success {
    background: rgba(74, 124, 89, 0.1);
    color: var(--color-success);
}

.Message--error {
    background: rgba(181, 90, 76, 0.1);
    color: var(--color-error);
}
.ContactForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ContactForm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.ContactForm-group {
    display: flex;
    flex-direction: column;
}

.ContactForm-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.ContactForm-label span {
    color: var(--color-error);
}

.ContactForm-input,
.ContactForm-select,
.ContactForm-textarea {
    padding: var(--space-3);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.ContactForm-input:focus,
.ContactForm-select:focus,
.ContactForm-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.ContactForm-textarea {
    resize: vertical;
    min-height: 8em;
}

.ContactForm-consent {
    margin-top: var(--space-2);
}

.ContactForm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.ContactForm-checkbox input {
    margin-top: 0.25em;
}

.ContactForm-checkbox span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.ContactForm-checkbox a {
    color: var(--color-primary);
}

.ContactForm-submit {
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
    margin-top: var(--space-4);
}

.ContactForm-submit:hover {
    background: var(--color-primary-dark);
}
.ContactInfo-card {
    background: var(--color-cream);
    padding: var(--space-6);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-6);
}

.ContactInfo-title {
    margin-bottom: var(--space-6);
}

.ContactInfo-item {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.ContactInfo-item:last-child {
    margin-bottom: 0;
}

.ContactInfo-icon {
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
}

.ContactInfo-icon svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-primary);
}

.ContactInfo-content h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.ContactInfo-content a,
.ContactInfo-content p,
.ContactInfo-content span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    display: block;
}

.ContactInfo-content a:hover {
    color: var(--color-primary);
}

.ContactInfo-social {
    margin-bottom: var(--space-6);
}

.ContactInfo-social h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

.ContactInfo-socialLinks {
    display: flex;
    gap: var(--space-3);
}

.ContactInfo-socialLinks a {
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.ContactInfo-socialLinks svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-gray-600);
}

.ContactInfo-socialLinks a:hover {
    background: var(--color-primary);
}

.ContactInfo-socialLinks a:hover svg {
    color: var(--color-white);
}

.ContactInfo-response {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-gray-100);
    border-radius: var(--border-radius-md);
}

.ContactInfo-response svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-primary);
}

.ContactInfo-response p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}
.ContactMap {
    background: var(--color-gray-100);
}

.ContactMap-placeholder {
    height: 20em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-gray-400);
}

.ContactMap-placeholder svg {
    width: 3em;
    height: 3em;
}

/* ==========================================================================
   22. AUTH PAGES (Login/Register)
   ========================================================================== */

.AuthPage {
    min-height: 100vh;
    padding: var(--space-8) 0;
    background: var(--color-cream);
}

.AuthPage-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.AuthPage-card {
    background: var(--color-white);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.AuthPage-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.AuthPage-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-6);
}

.AuthPage-logoIcon {
    width: 2.5em;
    height: 2.5em;
}

.AuthPage-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.AuthPage-subtitle {
    color: var(--color-gray-500);
}
.AuthForm {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.AuthForm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.AuthForm-group {
    display: flex;
    flex-direction: column;
}

.AuthForm-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.AuthForm-forgotLink {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.AuthForm-input {
    padding: var(--space-3);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.AuthForm-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.AuthForm-passwordWrapper {
    position: relative;
}

.AuthForm-passwordWrapper .AuthForm-input {
    padding-right: var(--space-10);
}

.AuthForm-passwordToggle {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    padding: var(--space-1);
}

.AuthForm-passwordToggle svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-gray-400);
}

.AuthForm-passwordToggle .icon-hide {
    display: none;
}

.AuthForm-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

.AuthForm-remember {
    margin: var(--space-2) 0;
}

.AuthForm-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.AuthForm-checkbox span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.AuthForm-checkbox a {
    color: var(--color-primary);
}

.AuthForm-submit {
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
    margin-top: var(--space-2);
}

.AuthForm-submit:hover {
    background: var(--color-primary-dark);
}

.AuthForm-trialNote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

.AuthForm-trialNote svg {
    width: 1em;
    height: 1em;
    color: var(--color-success);
}
.AuthForm-planSelect {
    margin: var(--space-4) 0;
}

.AuthForm-planSelect .AuthForm-label {
    margin-bottom: var(--space-3);
}

.AuthForm-plans {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.AuthForm-plan {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background: var(--color-cream);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.AuthForm-plan input {
    position: absolute;
    opacity: 0;
}

.AuthForm-plan:hover {
    border-color: var(--color-primary);
}

.AuthForm-plan.is-selected,
.AuthForm-plan:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(139, 115, 85, 0.05);
}

.AuthForm-planContent {
    flex: 1;
}

.AuthForm-planBadge {
    position: absolute;
    top: -0.5em;
    right: var(--space-3);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
}

.AuthForm-planName {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
}

.AuthForm-planPrice {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.AuthForm-planDiscount {
    display: inline-block;
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-success);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-sm);
}

.AuthForm-planCheck {
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-full);
}

.AuthForm-planCheck svg {
    width: 1em;
    height: 1em;
    color: var(--color-white);
    opacity: 0;
}

.AuthForm-plan:has(input:checked) .AuthForm-planCheck {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.AuthForm-plan:has(input:checked) .AuthForm-planCheck svg {
    opacity: 1;
}
.AuthPage-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

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

.AuthPage-divider span {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}
.AuthPage-social {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.AuthPage-socialBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-white);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.AuthPage-socialBtn svg {
    width: 1.25em;
    height: 1.25em;
}

.AuthPage-socialBtn:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.AuthPage-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.AuthPage-footer a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}
.AuthPage-features {
    display: none;
}

.AuthPage-featuresTitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-6);
}

.AuthPage-featuresList {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.AuthPage-featuresList li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.AuthPage-featuresList svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-success);
    flex-shrink: 0;
}

.AuthPage-guarantee {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: var(--color-cream);
    border-radius: var(--border-radius-md);
}

.AuthPage-guarantee svg {
    width: 2.5em;
    height: 2.5em;
    color: var(--color-success);
    flex-shrink: 0;
}

.AuthPage-guarantee strong {
    display: block;
    margin-bottom: var(--space-1);
}

.AuthPage-guarantee p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

/* ==========================================================================
   23. LEGAL PAGES
   ========================================================================== */

.LegalPage {
    padding: var(--space-12) 0;
    background: var(--color-white);
}

.LegalPage-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.LegalPage-nav {
    display: none;
}

.LegalPage-nav h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.LegalPage-nav ul li {
    margin-bottom: var(--space-2);
}

.LegalPage-nav a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.LegalPage-nav a:hover {
    color: var(--color-primary);
}

.LegalPage-content {
    flex: 1;
}

.LegalPage-content section {
    margin-bottom: var(--space-10);
}

.LegalPage-content h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 0.0625em solid var(--color-gray-200);
}

.LegalPage-content h3 {
    font-size: var(--font-size-lg);
    margin: var(--space-6) 0 var(--space-3);
}

.LegalPage-content p {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}

.LegalPage-content ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.LegalPage-content li {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
    list-style: disc;
}

/* ==========================================================================
   24. MODAL
   ========================================================================== */

.Modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.Modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.Modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.Modal-content {
    position: relative;
    width: 90%;
    max-width: 30em;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    transform: translateY(1em);
    transition: transform var(--transition-normal);
}

.Modal[aria-hidden="false"] .Modal-content {
    transform: translateY(0);
}

.Modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    transition: background var(--transition-fast);
}

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

.Modal-close svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-gray-500);
}

.Modal-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-6);
}

.Modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.Modal-formGroup {
    display: flex;
    flex-direction: column;
}

.Modal-formGroup label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

.Modal-formGroup input,
.Modal-formGroup textarea {
    padding: var(--space-3);
    border: 0.0625em solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
}

.Modal-formGroup input:focus,
.Modal-formGroup textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.Modal-submit {
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast);
}

.Modal-submit:hover {
    background: var(--color-primary-dark);
}

/* ==========================================================================
   25. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (min-width: 48em) {
    .Header-nav {
        display: block;
    }

    .Header-auth {
        display: flex;
    }

    .Header-menuToggle {
        display: none;
    }

    .Hero-container {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .Hero-title {
        font-size: var(--font-size-4xl);
    }

    .Hero-visual {
        display: block;
    }

    .Metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .Categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .Featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .Featured-card--large {
        grid-column: span 2;
    }

    .Instructors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .Pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .Testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .CTA-actions {
        flex-direction: row;
    }

    .Footer-top .Footer-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space-10);
    }

    .Footer-links {
        grid-template-columns: repeat(4, 1fr);
    }

    .Footer-bottom .Footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .Footer-copyright {
        margin-bottom: 0;
    }

    .VideoGrid-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .NewsletterCTA-form {
        flex-direction: row;
    }

    .InstructorsPage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .InstructorCard {
        flex-direction: row;
    }

    .InstructorCard-image {
        flex: 0 0 40%;
        aspect-ratio: auto;
    }

    .PricingPage-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .PricingFAQ-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .FAQPage-container {
        flex-direction: row;
    }

    .FAQPage-sidebar {
        display: block;
        flex: 0 0 15em;
    }

    .ContactPage-grid {
        flex-direction: row;
    }

    .ContactPage-form {
        flex: 0 0 60%;
    }

    .ContactForm-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .AuthPage-container {
        flex-direction: row;
        align-items: flex-start;
    }

    .AuthPage-card {
        flex: 1;
        max-width: 28em;
    }

    .AuthPage-features {
        display: block;
        flex: 1;
        padding: var(--space-8);
    }

    .AuthForm-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .AuthPage-social {
        flex-direction: row;
    }

    .AuthPage-socialBtn {
        flex: 1;
    }

    .LegalPage-container {
        flex-direction: row;
    }

    .LegalPage-nav {
        display: block;
        flex: 0 0 15em;
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        align-self: flex-start;
    }
}
@media (min-width: 64em) {
    .Hero-title {
        font-size: var(--font-size-5xl);
    }

    .Categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .Featured-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .Featured-card--large {
        grid-column: 1;
        grid-row: span 2;
    }

    .Instructors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .Testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .VideoGrid-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 90em) {
    .Categories-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .VideoGrid-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .InstructorsPage-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .InstructorCard {
        flex-direction: column;
    }

    .InstructorCard-image {
        flex: none;
        aspect-ratio: 4/3;
    }
}

/* ==========================================================================
   26. ANIMATIONS
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.5em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn var(--transition-normal) ease forwards;
}

.animate-fadeInUp {
    animation: fadeInUp var(--transition-slow) ease forwards;
}

.animate-scaleIn {
    animation: scaleIn var(--transition-normal) ease forwards;
}
.reveal {
    opacity: 0;
    transform: translateY(1.5em);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   27. PRINT STYLES
   ========================================================================== */

@media print {

    .Header,
    .Footer,
    .Modal,
    .CTA,
    .NewsletterCTA {
        display: none !important;
    }

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

    a {
        color: #000;
        text-decoration: underline;
    }

    .Container {
        max-width: 100%;
        padding: 0;
    }
}