/* ================================
   CSS Reset (Normalize)
   ================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
}

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

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

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

ul,
ol {
    list-style: none;
}

/* ================================
   CSS Variables (Theme System)
   ================================ */
:root {
    --bgPrimary: #141414;
    --bgSecondary: #1c1c1c;
    --bgTertiary: #242424;
    --bgCard: #1e1e1e;
    --accent: #bd3d65;
    --accentHover: #d64573;
    --accentLight: rgba(189, 61, 101, 0.15);
    --headerBg: #a5d2f2;
    --headerText: #141414;
    --textPrimary: #ffffff;
    --textSecondary: #c0c0c0;
    --textMuted: #888888;
    --success: #4caf50;
    --error: #f44336;
    --warning: #ff9800;
    --border: #333333;
    --borderLight: #444444;
    --fontHeading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --fontBody: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --space1: 0.25rem;
    --space2: 0.5rem;
    --space3: 0.809rem;
    --space4: 1.309rem;
    --space5: 2.118rem;
    --space6: 3.427rem;
    --space7: 5.545rem;
    --maxWidth: 1280px;
    --headerHeight: 4.5rem;
    --borderRadius: 0.5rem;
    --borderRadiusLg: 1rem;
    --transition: 0.3s ease;
    --transitionFast: 0.15s ease;
}

/* ================================
   Base Styles
   ================================ */
body {
    font-family: var(--fontBody);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    background: var(--bgPrimary);
    color: var(--textPrimary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fontHeading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
}

p {
    margin-bottom: var(--space4);
}

/* ================================
   Header
   ================================ */
.siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--headerHeight);
    background: var(--headerBg);
    color: var(--headerText);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.headerContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 0 var(--space4);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.siteLogo {
    display: flex;
    align-items: center;
    gap: var(--space2);
    font-family: var(--fontHeading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--headerText);
}

.logoIcon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent);
}

.logoText {
    display: none;
}

@media (min-width: 768px) {
    .logoText {
        display: block;
    }
}

.menuToggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space2);
    z-index: 1001;
}

.hamburgerLine {
    width: 24px;
    height: 2px;
    background: var(--headerText);
    transition: var(--transition);
}

.menuToggle[aria-expanded="true"] .hamburgerLine:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

.menuToggle[aria-expanded="true"] .hamburgerLine:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

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

.mainNav {
    position: fixed;
    top: var(--headerHeight);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bgSecondary);
    padding: var(--space5);
    transform: translateX(-100%);
    transition: var(--transition);
    overflow-y: auto;
}

.mainNav.active {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .mainNav {
        position: static;
        transform: none;
        background: transparent;
        padding: 0;
        display: flex;
        align-items: center;
        gap: var(--space5);
        overflow: visible;
    }
}

.navList {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
    margin-bottom: var(--space5);
}

@media (min-width: 1024px) {
    .navList {
        flex-direction: row;
        margin-bottom: 0;
    }
}

.navLink {
    display: block;
    padding: var(--space2) 0;
    color: var(--textPrimary);
    font-weight: 500;
    transition: var(--transitionFast);
}

@media (min-width: 1024px) {
    .navLink {
        color: var(--headerText);
        padding: var(--space2) var(--space3);
    }
}

.navLink:hover,
.navLink.active {
    color: var(--accent);
}

.navAuth {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
}

@media (min-width: 1024px) {
    .navAuth {
        flex-direction: row;
    }
}

/* ================================
   Buttons
   ================================ */
.btnPrimary,
.btnSecondary,
.btnOutline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space2);
    padding: var(--space3) var(--space5);
    font-family: var(--fontHeading);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--borderRadius);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    white-space: nowrap;
}

.btnPrimary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btnPrimary:hover {
    background: var(--accentHover);
    border-color: var(--accentHover);
    transform: translateY(-2px);
}

.btnSecondary {
    background: var(--bgTertiary);
    color: var(--textPrimary);
    border-color: var(--border);
}

.btnSecondary:hover {
    background: var(--bgCard);
    border-color: var(--accent);
}

.btnOutline {
    background: transparent;
    color: var(--headerText);
    border-color: var(--headerText);
}

@media (min-width: 1024px) {
    .btnOutline {
        color: var(--headerText);
        border-color: var(--headerText);
    }
}

.btnOutline:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.btnLarge {
    padding: var(--space4) var(--space6);
    font-size: 1rem;
}

.btnSmall {
    padding: var(--space2) var(--space4);
    font-size: 0.875rem;
}

.btnBlock {
    width: 100%;
}

.btnDanger {
    background: var(--error);
    color: white;
    border: none;
    padding: var(--space3) var(--space5);
    border-radius: var(--borderRadius);
    cursor: pointer;
    font-weight: 600;
}

/* ================================
   Main Content
   ================================ */
.mainContent {
    padding-top: var(--headerHeight);
    min-height: 100vh;
}

/* ================================
   Hero / Splash Section
   ================================ */
.splash {
    background: linear-gradient(135deg, var(--bgPrimary) 0%, var(--bgSecondary) 100%);
    padding: var(--space7) var(--space4);
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.splashContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space6);
    align-items: center;
}

@media (min-width: 1024px) {
    .splashContainer {
        grid-template-columns: 1fr 1fr;
    }
}

.splashBadge {
    display: inline-block;
    background: var(--accentLight);
    color: var(--accent);
    padding: var(--space2) var(--space4);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space4);
}

.splashTitle {
    margin-bottom: var(--space4);
}

.splashSubtitle {
    color: var(--textSecondary);
    font-size: 1.125rem;
    margin-bottom: var(--space5);
    max-width: 540px;
}

.splashButtons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space4);
    margin-bottom: var(--space6);
}

.splashStats {
    display: flex;
    gap: var(--space6);
}

.statItem {
    text-align: center;
}

.statNumber {
    display: block;
    font-family: var(--fontHeading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}

.statLabel {
    font-size: 0.875rem;
    color: var(--textMuted);
}

.splashVisual {
    position: relative;
}

.heroVideoWrapper {
    position: relative;
    border-radius: var(--borderRadiusLg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(189, 61, 101, 0.3);
}

.heroImage {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.playButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.playButton svg {
    width: 2rem;
    height: 2rem;
    color: white;
    margin-left: 4px;
}

.playButton:hover {
    background: var(--accentHover);
    transform: translate(-50%, -50%) scale(1.1);
}

/* ================================
   Stats Section
   ================================ */
.stats {
    background: var(--bgSecondary);
    padding: var(--space6) var(--space4);
}

.statsContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
}

.statsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space4);
}

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

.statsCard {
    background: var(--bgTertiary);
    padding: var(--space5);
    border-radius: var(--borderRadius);
    text-align: center;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.statsCard:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.statsIcon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space3);
}

.statsIcon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent);
}

.statsNumber {
    display: block;
    font-family: var(--fontHeading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--textPrimary);
}

.statsLabel {
    font-size: 0.875rem;
    color: var(--textMuted);
}

/* ================================
   Section Common
   ================================ */
.highlights,
.experts,
.tiers,
.questions,
.content,
.reachUs {
    padding: var(--space7) var(--space4);
}

.highlightsContainer,
.expertsContainer,
.tiersContainer,
.questionsContainer,
.contentContainer,
.reachUsContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
}

.sectionHeader {
    text-align: center;
    margin-bottom: var(--space6);
}

.sectionHeader h2 {
    margin-bottom: var(--space3);
}

.sectionHeader p {
    color: var(--textSecondary);
    max-width: 600px;
    margin: 0 auto;
}

.sectionCta {
    text-align: center;
    margin-top: var(--space6);
}

.pageHeader {
    text-align: center;
    margin-bottom: var(--space6);
}

.pageHeader h1 {
    margin-bottom: var(--space3);
}

.pageHeader p {
    color: var(--textSecondary);
}

/* ================================
   Video Grid
   ================================ */
.videoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space5);
}

.videoCard {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
}

.videoCard:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.videoThumbnail {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.videoThumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.videoCard:hover .videoThumbnail img {
    transform: scale(1.05);
}

.videoDuration {
    position: absolute;
    bottom: var(--space2);
    right: var(--space2);
    background: rgba(0, 0, 0, 0.8);
    padding: var(--space1) var(--space2);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.premiumBadge {
    position: absolute;
    top: var(--space2);
    left: var(--space2);
    background: var(--accent);
    padding: var(--space1) var(--space2);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.videoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.videoCard:hover .videoOverlay {
    opacity: 1;
}

.playIcon {
    width: 3rem;
    height: 3rem;
    color: white;
}

.videoInfo {
    padding: var(--space4);
}

.videoTitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space2);
}

.videoComedian {
    color: var(--textMuted);
    font-size: 0.875rem;
    margin-bottom: var(--space2);
}

.videoViews {
    color: var(--textMuted);
    font-size: 0.8125rem;
}

.videoGridLarge {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space5);
}

.videoCardLarge {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
}

.videoCardLarge:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.videoThumbnailLarge {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.videoThumbnailLarge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.videoCardLarge:hover .videoThumbnailLarge img {
    transform: scale(1.05);
}

.playIconLarge {
    width: 4rem;
    height: 4rem;
    color: white;
}

.videoInfoLarge {
    padding: var(--space4);
}

.videoTitleLarge {
    font-size: 1.125rem;
    margin-bottom: var(--space2);
}

.videoComedianLarge {
    color: var(--accent);
    font-size: 0.9375rem;
    margin-bottom: var(--space2);
}

.filtersBar {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
    margin-bottom: var(--space5);
}

@media (min-width: 768px) {
    .filtersBar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.categoryTabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space2);
}

.categoryTab {
    background: var(--bgTertiary);
    border: 1px solid var(--border);
    padding: var(--space2) var(--space4);
    border-radius: 2rem;
    color: var(--textSecondary);
    cursor: pointer;
    transition: var(--transitionFast);
}

.categoryTab:hover,
.categoryTab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.searchBox {
    display: flex;
    align-items: center;
    background: var(--bgTertiary);
    border: 1px solid var(--border);
    border-radius: var(--borderRadius);
    padding: var(--space2) var(--space4);
}

.searchBox svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--textMuted);
    margin-right: var(--space2);
}

.searchBox input {
    background: none;
    border: none;
    color: var(--textPrimary);
    outline: none;
    width: 200px;
}

.loadMoreWrapper {
    text-align: center;
    margin-top: var(--space6);
}

/* ================================
   Comedians
   ================================ */
.comediansGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space5);
}

.comedianCard {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-align: center;
    transition: var(--transition);
}

.comedianCard:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.comedianImage {
    aspect-ratio: 1;
    overflow: hidden;
}

.comedianImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.comedianCard:hover .comedianImage img {
    transform: scale(1.05);
}

.comedianInfo {
    padding: var(--space4);
}

.comedianName {
    font-size: 1.125rem;
    margin-bottom: var(--space2);
}

.comedianSpecialty {
    color: var(--accent);
    font-size: 0.875rem;
    margin-bottom: var(--space3);
}

.comedianStats {
    display: flex;
    justify-content: center;
    gap: var(--space4);
    font-size: 0.8125rem;
    color: var(--textMuted);
}

.comediansGridFull {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space5);
}

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

.comedianCardFull {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .comedianCardFull {
        grid-template-columns: 200px 1fr;
    }
}

.comedianImageFull {
    position: relative;
    aspect-ratio: 1;
}

@media (min-width: 640px) {
    .comedianImageFull {
        aspect-ratio: auto;
        height: 100%;
    }
}

.comedianImageFull img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comedianBadges {
    position: absolute;
    bottom: var(--space2);
    left: var(--space2);
}

.specialtyBadge {
    background: var(--accent);
    padding: var(--space1) var(--space3);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.comedianInfoFull {
    padding: var(--space4);
}

.comedianNameFull {
    font-size: 1.25rem;
    margin-bottom: var(--space2);
}

.comedianBio {
    color: var(--textSecondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space4);
}

.comedianStatsFull {
    display: flex;
    gap: var(--space4);
    margin-bottom: var(--space4);
    flex-wrap: wrap;
}

.comedianStatsFull .statItem {
    text-align: left;
}

.comedianStatsFull .statValue {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--accent);
}

.comedianStatsFull .statLabel {
    font-size: 0.75rem;
    color: var(--textMuted);
}

.comedianActions {
    display: flex;
    gap: var(--space3);
    flex-wrap: wrap;
}

.btnFollow {
    display: flex;
    align-items: center;
    gap: var(--space2);
}

.btnFollow svg {
    width: 1rem;
    height: 1rem;
}

.becomeComedianCta {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accentHover) 100%);
    border-radius: var(--borderRadiusLg);
    padding: var(--space6);
    margin-top: var(--space6);
    text-align: center;
}

.becomeComedianCta h2 {
    margin-bottom: var(--space3);
}

.becomeComedianCta p {
    max-width: 500px;
    margin: 0 auto var(--space4);
}

.becomeComedianCta .btnPrimary {
    background: white;
    color: var(--accent);
}

.becomeComedianCta .btnPrimary:hover {
    background: var(--textPrimary);
}

/* ================================
   Pricing
   ================================ */
.pricingGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space5);
    max-width: 1000px;
    margin: 0 auto;
}

.pricingCard {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 2px solid var(--border);
    position: relative;
    transition: var(--transition);
}

.pricingCard:hover {
    border-color: var(--accent);
}

.pricingCard.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 40px rgba(189, 61, 101, 0.3);
}

.popularBadge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    padding: var(--space1) var(--space4);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.planName {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: var(--space3);
}

.planPrice {
    text-align: center;
    margin-bottom: var(--space5);
}

.planPrice .currency {
    font-size: 1.25rem;
    vertical-align: top;
}

.planPrice .amount {
    font-family: var(--fontHeading);
    font-size: 3rem;
    font-weight: 800;
}

.planPrice .amount.free {
    font-size: 2rem;
}

.planPrice .period {
    color: var(--textMuted);
    font-size: 0.875rem;
}

.planFeatures {
    margin-bottom: var(--space5);
}

.planFeatures li {
    display: flex;
    align-items: center;
    gap: var(--space2);
    padding: var(--space2) 0;
    border-bottom: 1px solid var(--border);
}

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

.planFeatures svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
}

.pricingGridFull {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space5);
    max-width: 1100px;
    margin: 0 auto var(--space7);
}

.pricingCardFull {
    background: var(--bgCard);
    border-radius: var(--borderRadiusLg);
    padding: var(--space6);
    border: 2px solid var(--border);
    position: relative;
}

.pricingCardFull.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 60px rgba(189, 61, 101, 0.3);
}

.planHeader {
    text-align: center;
    margin-bottom: var(--space5);
}

.planNameFull {
    font-size: 1.5rem;
    margin-bottom: var(--space3);
}

.planPriceFull {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space1);
}

.planPriceFull .amount {
    font-family: var(--fontHeading);
    font-size: 3.5rem;
    font-weight: 800;
}

.planFeaturesFull {
    margin-bottom: var(--space5);
}

.planFeaturesFull li {
    display: flex;
    align-items: center;
    gap: var(--space3);
    padding: var(--space3) 0;
    border-bottom: 1px solid var(--border);
}

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

.planFeaturesFull svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
    flex-shrink: 0;
}

.comparisonSection {
    margin-bottom: var(--space7);
}

.comparisonSection h2 {
    text-align: center;
    margin-bottom: var(--space5);
}

.comparisonTableWrapper {
    overflow-x: auto;
}

.comparisonTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.comparisonTable th,
.comparisonTable td {
    padding: var(--space4);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.comparisonTable th {
    background: var(--bgTertiary);
    font-weight: 600;
}

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

.checkIcon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--success);
}

.crossIcon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--textMuted);
}

.paymentMethods {
    text-align: center;
    padding: var(--space5);
    background: var(--bgSecondary);
    border-radius: var(--borderRadius);
    margin-bottom: var(--space6);
}

.paymentMethods h3 {
    margin-bottom: var(--space4);
}

.paymentIcons {
    display: flex;
    justify-content: center;
    gap: var(--space5);
    margin-bottom: var(--space3);
}

.paymentIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 40px;
    background: var(--bgTertiary);
    border-radius: var(--borderRadius);
    font-weight: 600;
    font-size: 0.75rem;
}

.paymentIcon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.paymentNote {
    color: var(--textMuted);
    font-size: 0.875rem;
    margin: 0;
}

.pricingFaq {
    max-width: 800px;
    margin: 0 auto;
}

.pricingFaq h3 {
    text-align: center;
    margin-bottom: var(--space5);
}

/* ================================
   FAQ
   ================================ */
.faqList {
    max-width: 800px;
    margin: 0 auto;
}

.faqItem {
    border-bottom: 1px solid var(--border);
}

.faqQuestion {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space4) 0;
    background: none;
    border: none;
    color: var(--textPrimary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.faqQuestion svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: var(--transition);
}

.faqQuestion[aria-expanded="true"] svg {
    transform: rotate(45deg);
}

.faqAnswer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faqAnswer p {
    padding-bottom: var(--space4);
    color: var(--textSecondary);
}

.faqItem.open .faqAnswer {
    max-height: 500px;
}

/* ================================
   CTA / Signup Section
   ================================ */
.signup {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accentHover) 100%);
    padding: var(--space7) var(--space4);
}

.signupContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
    text-align: center;
}

.signupContent h2 {
    margin-bottom: var(--space3);
}

.signupContent p {
    max-width: 500px;
    margin: 0 auto var(--space5);
}

.signupContent .btnPrimary {
    background: white;
    color: var(--accent);
}

.signupContent .btnPrimary:hover {
    background: var(--textPrimary);
}

/* ================================
   Contact
   ================================ */
.contactGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space6);
}

@media (min-width: 1024px) {
    .contactGrid {
        grid-template-columns: 1fr 400px;
    }
}

.contactFormWrapper {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
}

.contactForm {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
}

.contactInfo {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
}

.contactCard {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
    text-align: center;
}

.contactIcon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space3);
}

.contactIcon svg {
    width: 2rem;
    height: 2rem;
    color: var(--accent);
}

.contactCard h3 {
    font-size: 1rem;
    margin-bottom: var(--space2);
}

.contactCard p {
    margin-bottom: var(--space1);
}

.contactCard a {
    color: var(--accent);
}

.contactCard a:hover {
    text-decoration: underline;
}

.contactNote {
    font-size: 0.8125rem;
    color: var(--textMuted);
    margin: 0;
}

.socialSection {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
}

.socialSection h3 {
    margin-bottom: var(--space4);
    text-align: center;
}

.socialLinksLarge {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
}

.socialLink {
    display: flex;
    align-items: center;
    gap: var(--space3);
    padding: var(--space3);
    background: var(--bgTertiary);
    border-radius: var(--borderRadius);
    color: var(--textPrimary);
    transition: var(--transition);
}

.socialLink:hover {
    background: var(--accent);
}

.socialLink svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ================================
   Forms
   ================================ */
.formGroup {
    display: flex;
    flex-direction: column;
    gap: var(--space2);
}

.formGroup label {
    font-weight: 500;
    font-size: 0.9375rem;
}

.required {
    color: var(--accent);
}

.formGroup input,
.formGroup textarea,
.formGroup select {
    background: var(--bgTertiary);
    border: 1px solid var(--border);
    border-radius: var(--borderRadius);
    padding: var(--space3) var(--space4);
    color: var(--textPrimary);
    font-size: 1rem;
    transition: var(--transitionFast);
}

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

.formGroup input::placeholder,
.formGroup textarea::placeholder {
    color: var(--textMuted);
}

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

.formHint {
    font-size: 0.8125rem;
    color: var(--textMuted);
}

.formRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space3);
}

.checkboxLabel {
    display: flex;
    align-items: flex-start;
    gap: var(--space2);
    cursor: pointer;
}

.checkboxLabel input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.forgotLink {
    color: var(--accent);
    font-size: 0.875rem;
}

.forgotLink:hover {
    text-decoration: underline;
}

/* ================================
   Auth Pages
   ================================ */
.authSection {
    padding: var(--space6) var(--space4);
    min-height: calc(100vh - var(--headerHeight));
    display: flex;
    align-items: center;
}

.authContainer {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space5);
}

@media (min-width: 900px) {
    .authContainer {
        grid-template-columns: 1fr 1fr;
    }
}

.authCard {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
}

.authHeader {
    text-align: center;
    margin-bottom: var(--space5);
}

.authHeader h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space2);
}

.authHeader p {
    color: var(--textSecondary);
    margin: 0;
}

.authForm {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
}

.authDivider {
    display: flex;
    align-items: center;
    gap: var(--space4);
    margin: var(--space4) 0;
}

.authDivider::before,
.authDivider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.authDivider span {
    color: var(--textMuted);
    font-size: 0.875rem;
}

.authFooter {
    text-align: center;
}

.authFooter a {
    color: var(--accent);
    font-weight: 500;
}

.authFooter a:hover {
    text-decoration: underline;
}

.authVisual {
    position: relative;
    border-radius: var(--borderRadius);
    overflow: hidden;
    display: none;
}

@media (min-width: 900px) {
    .authVisual {
        display: block;
    }
}

.authVisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.authVisualContent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space5);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.authVisualContent blockquote {
    font-style: italic;
    font-size: 1.125rem;
    margin-bottom: var(--space2);
}

.authVisualContent cite {
    color: var(--textMuted);
    font-size: 0.875rem;
}

.authVisualContent h3 {
    margin-bottom: var(--space3);
}

.benefitsList {
    display: flex;
    flex-direction: column;
    gap: var(--space2);
}

.benefitsList li {
    display: flex;
    align-items: center;
    gap: var(--space2);
}

.benefitsList svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent);
}

.alertError,
.alertSuccess {
    display: flex;
    align-items: center;
    gap: var(--space3);
    padding: var(--space4);
    border-radius: var(--borderRadius);
    margin-bottom: var(--space4);
}

.alertError {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid var(--error);
    color: #ff6b6b;
}

.alertSuccess {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid var(--success);
    color: #69db7c;
}

.alertError svg,
.alertSuccess svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

/* ================================
   Dashboard
   ================================ */
.dashboardSection {
    padding: var(--space5) var(--space4);
}

.dashboardContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space5);
}

@media (min-width: 1024px) {
    .dashboardContainer {
        grid-template-columns: 280px 1fr;
    }
}

.dashboardSidebar {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
    height: fit-content;
}

.userProfile {
    text-align: center;
    padding-bottom: var(--space5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space4);
}

.userAvatar {
    width: 80px;
    height: 80px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fontHeading);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto var(--space3);
}

.userName {
    font-size: 1.125rem;
    margin-bottom: var(--space1);
}

.userEmail {
    color: var(--textMuted);
    font-size: 0.875rem;
    margin-bottom: var(--space2);
}

.premiumBadgeSmall {
    display: inline-block;
    background: var(--accent);
    padding: var(--space1) var(--space3);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboardNav {
    display: flex;
    flex-direction: column;
    gap: var(--space2);
    margin-bottom: var(--space5);
}

.dashNavLink {
    display: flex;
    align-items: center;
    gap: var(--space3);
    padding: var(--space3);
    border-radius: var(--borderRadius);
    color: var(--textSecondary);
    transition: var(--transitionFast);
}

.dashNavLink:hover,
.dashNavLink.active {
    background: var(--bgTertiary);
    color: var(--textPrimary);
}

.dashNavLink svg {
    width: 1.25rem;
    height: 1.25rem;
}

.upgradeBanner {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accentHover) 100%);
    border-radius: var(--borderRadius);
    padding: var(--space4);
    text-align: center;
}

.upgradeBanner h4 {
    font-size: 1rem;
    margin-bottom: var(--space2);
}

.upgradeBanner p {
    font-size: 0.875rem;
    margin-bottom: var(--space3);
}

.dashboardMain {
    min-width: 0;
}

.dashSection {
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    border: 1px solid var(--border);
    margin-bottom: var(--space5);
}

.dashSection h2 {
    margin-bottom: var(--space4);
}

.dashSection h3 {
    margin-bottom: var(--space4);
}

.dashSubsection {
    margin-top: var(--space5);
}

.statsCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space4);
    margin-bottom: var(--space5);
}

.statCard {
    background: var(--bgTertiary);
    border-radius: var(--borderRadius);
    padding: var(--space4);
    text-align: center;
}

.statCardIcon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space2);
}

.statCardIcon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
}

.statCardValue {
    display: block;
    font-family: var(--fontHeading);
    font-size: 1.5rem;
    font-weight: 700;
}

.statCardLabel {
    font-size: 0.8125rem;
    color: var(--textMuted);
}

.watchHistoryList {
    display: flex;
    flex-direction: column;
    gap: var(--space3);
}

.watchHistoryItem {
    display: flex;
    align-items: center;
    gap: var(--space4);
    padding: var(--space3);
    background: var(--bgTertiary);
    border-radius: var(--borderRadius);
    flex-wrap: wrap;
}

.watchHistoryInfo {
    flex: 1;
    min-width: 150px;
}

.watchHistoryInfo h4 {
    font-size: 0.9375rem;
    margin-bottom: var(--space1);
}

.watchHistoryInfo p {
    color: var(--textMuted);
    font-size: 0.8125rem;
    margin: 0;
}

.watchHistoryProgress {
    display: flex;
    align-items: center;
    gap: var(--space2);
    min-width: 120px;
}

.progressBar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progressFill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.watchHistoryProgress span {
    font-size: 0.75rem;
    color: var(--textMuted);
    min-width: 30px;
}

.favoritesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space4);
}

.favoriteCard {
    background: var(--bgTertiary);
    border-radius: var(--borderRadius);
    overflow: hidden;
}

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

.favoriteInfo {
    padding: var(--space3);
}

.favoriteInfo h4 {
    font-size: 0.9375rem;
    margin-bottom: var(--space1);
}

.favoriteInfo p {
    color: var(--textMuted);
    font-size: 0.8125rem;
    margin: 0;
}

.emptyState {
    text-align: center;
    color: var(--textMuted);
    padding: var(--space5);
}

.settingsForm {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
    max-width: 400px;
}

.settingsNote {
    color: var(--textMuted);
    font-size: 0.875rem;
}

.dangerZone {
    margin-top: var(--space5);
    padding-top: var(--space5);
    border-top: 1px solid var(--error);
}

.dangerZone h4 {
    color: var(--error);
    margin-bottom: var(--space2);
}

.dangerZone p {
    color: var(--textMuted);
    font-size: 0.875rem;
    margin-bottom: var(--space4);
}

/* ================================
   Legal Pages
   ================================ */
.legalSection {
    padding: var(--space6) var(--space4);
}

.legalContainer {
    max-width: 800px;
    margin: 0 auto;
}

.legalHeader {
    text-align: center;
    margin-bottom: var(--space6);
}

.legalDate {
    color: var(--textMuted);
    font-size: 0.875rem;
}

.legalContent h2 {
    margin-top: var(--space5);
    margin-bottom: var(--space3);
    color: var(--accent);
}

.legalContent h3 {
    margin-top: var(--space4);
    margin-bottom: var(--space2);
}

.legalContent p {
    color: var(--textSecondary);
}

.legalContent ul {
    margin-bottom: var(--space4);
    padding-left: var(--space5);
}

.legalContent li {
    color: var(--textSecondary);
    margin-bottom: var(--space2);
    list-style: disc;
}

.legalNote {
    background: var(--bgSecondary);
    border-left: 4px solid var(--accent);
    padding: var(--space4);
    margin-top: var(--space6);
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.legalNote p {
    margin: 0;
}

/* ================================
   Footer
   ================================ */
.siteFooter {
    background: var(--bgSecondary);
    padding: var(--space7) var(--space4) var(--space5);
    border-top: 1px solid var(--border);
}

.footerContainer {
    max-width: var(--maxWidth);
    margin: 0 auto;
}

.footerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space5);
    margin-bottom: var(--space6);
}

.footerBrand {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .footerBrand {
        grid-column: span 1;
    }
}

.footerLogo {
    display: flex;
    align-items: center;
    gap: var(--space2);
    font-family: var(--fontHeading);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--space3);
}

.footerLogo .logoIcon {
    width: 2rem;
    height: 2rem;
    color: var(--accent);
}

.footerTagline {
    color: var(--textSecondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space4);
}

.socialLinks {
    display: flex;
    gap: var(--space3);
}

.socialLinks a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bgTertiary);
    border-radius: 50%;
    color: var(--textSecondary);
    transition: var(--transition);
}

.socialLinks a:hover {
    background: var(--accent);
    color: white;
}

.socialLinks svg {
    width: 1.25rem;
    height: 1.25rem;
}

.footerLinks h4 {
    font-size: 1rem;
    margin-bottom: var(--space4);
}

.footerLinks ul {
    display: flex;
    flex-direction: column;
    gap: var(--space2);
}

.footerLinks a {
    color: var(--textSecondary);
    font-size: 0.9375rem;
    transition: var(--transitionFast);
}

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

.footerContact h4 {
    font-size: 1rem;
    margin-bottom: var(--space4);
}

.footerContact p {
    color: var(--textSecondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space2);
}

.footerContact a {
    color: var(--accent);
}

.footerContact a:hover {
    text-decoration: underline;
}

.footerBottom {
    padding-top: var(--space5);
    border-top: 1px solid var(--border);
    text-align: center;
}

.footerBottom p {
    color: var(--textMuted);
    font-size: 0.875rem;
    margin-bottom: var(--space1);
}

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

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modalOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.modalContent {
    position: relative;
    background: var(--bgCard);
    border-radius: var(--borderRadius);
    padding: var(--space5);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--transition);
}

.modal.active .modalContent {
    transform: scale(1);
}

.modalClose {
    position: absolute;
    top: var(--space3);
    right: var(--space3);
    background: none;
    border: none;
    color: var(--textMuted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modalClose:hover {
    color: var(--textPrimary);
}

.modalContent h3 {
    margin-bottom: var(--space4);
}

.modalForm {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
}

/* ================================
   Responsive Utilities
   ================================ */
@media (max-width: 768px) {
    .splashContainer {
        text-align: center;
    }

    .splashButtons {
        justify-content: center;
    }

    .splashStats {
        justify-content: center;
    }
}