/* ===================================
   IELTS NINE - Global Styles
   =================================== */

/* CSS Variables & Design System */
:root {
    /* Core Colors */
    --primary: #e11d48;
    --primary-dark: #be123c;
    --primary-light: #fb7185;
    --primary-soft: rgba(225, 29, 72, 0.08);
    --secondary: #10b981;
    --accent: #ff3b30;

    /* Light Mode Tokens (Default) */
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.9);
    --bg-footer: #f8fafc;
    /* Clean light grey for footer */
    --text-main: #334155;
    --text-heading: #000000;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.08);

    /* Grays & Utilities */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3.5rem;
    --spacing-2xl: 6rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --shadow-sm: 0 1px 3px 0 var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);

    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Tokens */
[data-theme="dark"] {
    --bg-base: hsl(180, 1%, 10%);
    /* Refined Dark Background */
    --bg-surface: hsl(180, 1%, 12%);
    --bg-navbar: hsla(180, 1%, 10%, 0.8);
    --bg-footer: hsl(180, 1%, 8%);
    --text-main: #a1a1aa;
    --text-heading: #ffffff;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);

    --gray-50: #18181b;
    --gray-100: #27272a;
    --gray-200: #3f3f46;
    --gray-300: #52525b;
    --gray-500: #71717a;
    --gray-700: #a1a1aa;
    --gray-800: #e4e4e7;
    --gray-900: #fafafa;

    --primary-soft: rgba(255, 59, 48, 0.2);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--text-main);
    background-color: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Backstop against horizontal page-scroll: the hero's decorative blobs
       and other absolutely-positioned elements are deliberately offset past
       their container's edge, which otherwise widens the whole document on
       narrow screens. */
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
}

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

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

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

/* Button Overrides */
.btn-primary {
    background: var(--primary);
    color: white !important;
    /* Ensure it stays white */
    box-shadow: 0 4px 14px 0 rgba(225, 29, 72, 0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.4);
}

.btn-white {
    background: white;
    color: var(--primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05);
}

.btn-white:hover {
    background: #fafaf9;
    color: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Hero & Components */
.hero {
    position: relative;
    padding: 12rem 0 8rem;
    overflow: hidden;
    background: #ffffff;
    /* Default light background */
    color: var(--text-main);
    transition: background 0.4s ease;
}

[data-theme="dark"] .hero {
    background: #09090b;
    /* Preserve perfect dark mode */
    color: white;
}

.hero-bg-accent {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(225, 29, 72, 0.03), transparent 60%);
    z-index: 0;
}

[data-theme="dark"] .hero-bg-accent {
    background: linear-gradient(to bottom, #000000 0%, transparent 40%),
        radial-gradient(circle at top left, rgba(225, 29, 72, 0.15), transparent 60%);
}

.hero-top-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
    z-index: 1;
    display: none;
    /* Only show in dark mode */
}

[data-theme="dark"] .hero-top-shadow {
    display: block;
}

.hero-blob {
    position: absolute;
    width: 40rem;
    height: 40rem;
    background: #ff3b30;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.04;
    /* Very subtle in light mode */
    z-index: 0;
    animation: pulse-slow 10s infinite alternate;
}

[data-theme="dark"] .hero-blob {
    opacity: 0.15;
    /* Maintain perfect dark mode */
}

/* --primary (#e11d48) is not redefined for dark mode, so this text sat on the
   dark card at 3.51:1 and failed AA. --primary-light clears it comfortably. */
[data-theme="dark"] .author-score {
    color: var(--primary-light);
}

/* .landing-dark p is later in the file and has equal specificity, so it was
   quietly winning over the component's own rule and muting every testimonial
   quote to --text-muted. Naming the parent restores the component's intent. */
.testimonials .testimonial-card p {
    color: var(--text-heading);
}

/* Six nav links, a flex row with no wrap, and no breakpoint between 768px and
   desktop: between roughly 769px and 1150px the row runs out of room and the
   labels wrap to a second line, which is taller than the fixed 90px navbar and
   overlaps the hero beneath it. Tightening the gap first, then switching to
   the hamburger earlier, keeps the bar one line at every width. */
@media (max-width: 1150px) {
    .nav-links {
        gap: 1.25rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

    .navbar .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-links.active {
        display: flex;
    }
}

/* Tap targets. 40x40 and ~34px tall respectively, both under the 44px floor,
   and one of them is the primary sign-up button on mobile. */
@media (max-width: 768px) {
    .theme-toggle-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-actions .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

.hero-blob-1 {
    top: -15rem;
    left: -10rem;
}

.hero-blob-2 {
    bottom: -15rem;
    right: -10rem;
    animation-delay: 2s;
    opacity: 0.1;
}

/* Blob colour and size now live here rather than in a style="" attribute on
   home.html. Inline styles outrank every class selector, so the three blobs
   were pinning their own colour AND their dark-mode opacity in both themes —
   which made the `.hero-blob { opacity: .04 }` / `[data-theme="dark"] { .15 }`
   pair above unreachable dead code, and painted visible red, blue and pink
   smudges across the white light-mode hero. Position stays inline; only the
   theme-dependent parts moved. */
.hero-blob--brand { background: var(--primary); }
.hero-blob--cool  { background: #3b82f6; }
.hero-blob--warm  { background: #ec4899; }

.hero-blob--lg { width: 50rem; height: 50rem; filter: blur(140px); }
.hero-blob--md { width: 35rem; height: 35rem; }

/* Hero promo line. Was an inline style="color:#fda4af" — a shade picked
   against the near-black dark hero, where it reads well. On the white light
   hero it computes 1.89:1 against the background, so the one line on the page
   announcing a free month was effectively invisible to anyone on a
   light-preference device. Each theme now gets the shade that works on it. */
.hero-promo {
    /* inline-flex + gap, matching .section-pill above it: the gift icon and
       the sentence are separate elements, so without a gap they render
       butted together as one word. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto var(--spacing-md);
    max-width: 700px;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary-dark);
}

[data-theme="dark"] .hero-promo {
    color: var(--primary-light);
}

/* Skill icon tints. These were three inline rgba()/hex pairs, so a 10% tint
   calibrated for a white card stayed 10% on the dark card, where it barely
   registers and the chip affordance disappears. */
.skill-icon--reading   { background: rgba(66, 133, 244, 0.10); color: #4285f4; }
.skill-icon--listening { background: rgba(168, 85, 247, 0.10); color: #a855f7; }
.skill-icon--writing   { background: rgba(34, 197, 94, 0.10);  color: #22c55e; }

[data-theme="dark"] .skill-icon--reading   { background: rgba(66, 133, 244, 0.20); color: #7aa8f5; }
[data-theme="dark"] .skill-icon--listening { background: rgba(168, 85, 247, 0.20); color: #c48bf7; }
[data-theme="dark"] .skill-icon--writing   { background: rgba(34, 197, 94, 0.20);  color: #5fd68d; }

@keyframes pulse-slow {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.08;
    }

    50% {
        transform: scale(1.1) translate(2rem, 1rem);
        opacity: 0.12;
    }

    100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.08;
    }
}

.hero-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--primary-soft);
    /* Was #ff3b30, which computes 3.31:1 against its own tint in light mode
       and fails AA for 12.8px text. --primary (#e11d48) is darker and on
       brand, and it matches .cta-box-eyebrow, which is the same component in
       a different place. */
    color: var(--primary);
    border: 1px solid rgba(255, 59, 48, 0.1);
    border-radius: 12px;
    /* Distinct square-ish pill */
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.05);
}

.hero .hero-title {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
    color: #0c0a09;
}

[data-theme="dark"] .hero .hero-title {
    color: #fafaf9;
}

.text-gradient {
    display: inline;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding-right: 0.1em;
}

.hero .hero-subtitle {
    font-size: 1.25rem;
    max-width: 700px;
    line-height: 1.7;
    margin: 0 auto 3.5rem;
    color: #475569;
    /* Dark grey for light mode */
}

[data-theme="dark"] .hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.7);
    /* Preserve dark mode subtitle */
}

.hero-preview-wrapper {
    width: 100%;
    max-width: 1150px;
    margin-top: 6rem;
    padding: 0.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: var(--radius-xl);
    /* Was a 10% WHITE border and a black 50% shadow — both tuned by eye for the
       dark hero. On the light hero the border is invisible and the shadow is a
       dark halo. Both tokens already swap per theme. */
    border: 1px solid var(--border-color);
    box-shadow: 0 50px 100px -20px var(--shadow-color);
}

.hero-preview {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Stats Section */
.stats-badges {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 3rem 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

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

.stat-val {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary);
}

.stat-lab {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Feature Layouts */
.feature-section {
    padding: var(--spacing-2xl) 0;
}

.feature-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.feature-layout.reverse {
    direction: rtl;
}

.feature-layout.reverse .feature-body {
    direction: ltr;
}

.feature-body h2 {
    font-size: 2.5rem;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-body h2 i {
    color: var(--primary);
    font-size: 2rem;
}

.feature-image img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* Skills Grid */
.skills-box {
    text-align: center;
    padding: var(--spacing-2xl) 0;
}

.skills-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.skill-card {
    background: var(--bg-surface);
    padding: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-align: left;
}

.skill-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.skill-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* Bottom CTA — base reset (overridden below) */
.cta-box {
    margin: 6rem 0;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    text-align: center;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-stats {
    display: flex;
    gap: 2rem;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
}

.stat-label {
    opacity: 0.9;
    font-size: 0.875rem;
}

.hero-image img {
    width: 100%;
    height: auto;
}

/* Sections */
section {
    /* padding: var(--spacing-2xl) 0; */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--gray-900);
}

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

/* Features Grid */
.features {
    background-color: white;
}

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

.feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* Course Grid */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.course-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.course-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

.course-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
}

.course-badge.badge-free {
    background-color: var(--secondary);
}

.course-content {
    padding: 1.5rem;
}

.course-category {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.course-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.course-description {
    color: var(--gray-600);
    font-size: 0.938rem;
    margin-bottom: 1rem;
}

.course-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.course-meta i {
    margin-right: 0.25rem;
}

.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

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

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    color: white;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* Testimonials */
.testimonials {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.testimonials .section-title {
    font-size: 3rem;
    font-weight: 900;   /* was 800 — the page's other two display headings are 900 */
    margin-bottom: 4rem;
    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--bg-surface);
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -15px var(--shadow-color);
    border-color: var(--primary-soft);
}

.testimonial-quote {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
    opacity: 0.8;
}

.testimonial-card p {
    font-size: 1rem;
    line-height: 1.7;
    font-style: normal;
    color: var(--text-heading);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.author-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name {
    font-weight: 700;
    color: var(--text-heading);
}

.author-score {
    font-size: 0.875rem;
    color: var(--primary);
    font-weight: 600;
}

/* Footer */
.footer {
    background-color: var(--bg-footer);
    color: var(--text-main);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    transition: var(--transition);
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

.footer-column h3,
.footer-column h4 {
    color: var(--text-heading);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-column .logo span {
    color: var(--text-heading) !important;
}

.footer-column p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-column a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--gray-100);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .social-links a {
    background-color: rgba(255, 255, 255, 0.03);
}

.social-links a:hover {
    background-color: var(--primary);
    color: white !important;
    border-color: var(--primary);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-bottom p {
    margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .nav-container {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1.5rem;
    }

    .nav-menu {
        display: none;
        /* Mobile menu logic handled by JS */
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: 1rem;
    }

    .hero-container {
        padding-top: 4rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .container {
        padding: 0 1rem;
    }
}

/* Utilities */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

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

.text-success {
    color: var(--success);
}

.text-error {
    color: var(--error);
}

/* Effects */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: none;
}

.shine-effect:hover::after {
    left: 140%;
    transition: all 0.6s ease;
}

/* ===================================
   Dashboard Styles
   =================================== */
.dashboard {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.dashboard-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

.dashboard-section {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.course-item {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    transition: var(--transition);
}

.course-item:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.course-item-thumbnail img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.course-item-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.progress-section {
    margin: 1.25rem 0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.progress-bar {
    height: 8px;
    background-color: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.course-item-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.course-item-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 5rem 2rem;
}

.empty-state i {
    font-size: 4.5rem;
    color: var(--gray-200);
    margin-bottom: 1.5rem;
}

@media (max-width: 991px) {
    .course-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .course-item-thumbnail {
        max-width: 300px;
        margin: 0 auto;
    }

    .course-item-meta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .course-item-actions {
        justify-content: center;
    }
}

/* ===================================
   Course Detail Styles
   =================================== */
.course-detail {
    padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.course-header-section {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3.5rem;
    margin-bottom: 3rem;
}

.course-header-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.breadcrumb {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

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

.course-lead {
    font-size: 1.25rem;
    color: var(--text-main);
    line-height: 1.6;
}

.course-meta-info {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-weight: 500;
}

.course-meta-info span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.course-rating i {
    color: var(--accent);
}

.course-sidebar-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: sticky;
    top: 100px;
    height: fit-content;
    z-index: 10;
}

.course-sidebar-card img {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.course-price-section {
    padding: 2rem;
}

.price-amount {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--text-heading);
}

.price-free {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary);
}

.course-includes {
    padding: 2rem;
    background: var(--gray-50);
    border-top: 1px solid var(--border-color);
}

.course-includes h4 {
    margin-bottom: 1.25rem;
}

.course-includes ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.course-includes li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-main);
    font-size: 0.95rem;
}

.course-includes i {
    color: var(--primary);
    width: 20px;
}

.course-body {
    display: grid;
    gap: 3rem;
    margin-top: 2rem;
}

.module-section {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--gray-50);
    cursor: pointer;
    transition: var(--transition);
}

.module-header:hover {
    background-color: var(--gray-100);
}

.lessons-list {
    list-style: none;
    background-color: var(--bg-surface);
}

.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    transition: var(--transition);
}

.lesson-item:hover {
    background-color: var(--gray-50);
}

.lesson-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lesson-info i {
    color: var(--primary);
    width: 16px;
}

.lesson-badge {
    background-color: var(--primary-soft);
    color: var(--primary);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.review-card {
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    background: var(--bg-surface);
}

@media (max-width: 1024px) {
    .course-header-section {
        grid-template-columns: 1fr;
    }
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-heading);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    background: var(--gray-100);
    transform: scale(1.05);
    border-color: var(--primary);
}

[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="light"] .icon-sun {
    display: none;
}

/* ===================================
   Auth Pages Styles
   =================================== */
.auth-section {
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-base);
    padding: 8rem 1rem 4rem;
    /* Increased top padding to breathe under transparent navbar */
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-surface);
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-header h1 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-heading);
    font-size: 0.95rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 2.75rem 0.875rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-base);
    color: var(--text-heading);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition);
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-main);
}

.remember-me input {
    accent-color: var(--primary);
}

.auth-footer {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}

.auth-footer a {
    font-weight: 600;
    color: var(--primary);
    margin-left: 0.25rem;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.field-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.field-help {
    display: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.form-group:focus-within .field-help {
    display: block;
}

.field-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.field-help li {
    margin-bottom: 0.25rem;
}

.form-errors {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    border-left: 4px solid var(--error);
}

.login-or {
    text-align: center;
    margin: 2rem 0;
    position: relative;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-or::before,
.login-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background-color: var(--border-color);
}

.login-or::before {
    left: 0;
}

.login-or::after {
    right: 0;
}

.social-login {
    margin-bottom: 2rem;
}

.socialaccount_providers {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.socialaccount_providers li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-heading);
    font-weight: 600;
    transition: var(--transition);
    background: var(--bg-surface);
}

.socialaccount_providers li a:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    transform: translateY(-1px);
}

/* Google Button */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: #fff;
    border: 1.5px solid #dadce0;
    border-radius: 0.5rem;
    color: #3c4043;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
}

.google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(60,64,67,.15);
    color: #3c4043;
    text-decoration: none;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

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

/* ===================================
   Courses Catalog Styles
   =================================== */
.catalog-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    padding-top: 2rem;
}

.filters-sidebar {
    background: var(--bg-surface);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--text-heading);
    font-size: 0.95rem;
}

.filter-group input[type="text"],
.filter-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-base);
    color: var(--text-heading);
    font-family: inherit;
    transition: var(--transition);
}

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

.filter-group label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.filter-group input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--primary);
}

@media (max-width: 1024px) {
    .catalog-container {
        grid-template-columns: 1fr;
    }

    .filters-sidebar {
        position: static;
    }
}

/* Dark mode overrides for testimonials */
[data-theme="dark"] .testimonial-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* CTA Box Refinement */
.cta-box {
    margin: 6rem auto;
    max-width: 1100px;
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 0 1px var(--primary-soft), 0 32px 64px -16px var(--shadow-color);
}

.cta-box-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(225,29,72,0.10), transparent 65%);
    pointer-events: none;
}

[data-theme="dark"] .cta-box-glow {
    background: radial-gradient(ellipse at 50% 0%, rgba(225,29,72,0.18), transparent 65%);
}

.cta-box-inner {
    position: relative;
    z-index: 1;
    padding: 5rem 2rem;
    text-align: center;
}

.cta-box-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(225,29,72,0.15);
    border-radius: 10px;
    font-size: 0.8rem;   /* was 0.72rem — matches .section-pill, same component role */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.cta-box h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-heading);
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 1;
}

.cta-box p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Refined Redesign Styles */
/* ===================================
   IELTS NINE - Unique Premium Navbar
   =================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: transparent;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.navbar.scrolled {
    height: 80px;
}

.nav-floating-card {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.4s ease;
}

[data-theme="light"] .nav-floating-card {
    background: transparent;
    border-color: transparent;
}

.navbar.scrolled .nav-floating-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .navbar.scrolled .nav-floating-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Scrolled state refinements */
.navbar.scrolled {
    height: 80px;
}

.nav-container {
    display: none;
    /* Remove old container logic */
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-heading);
}

.logo:hover {
    color: var(--text-heading);
    transform: none;
}

.logo i {
    color: #e11d48;
    /* IELTS NINE Crimson */
    font-size: 1.5rem;
}

.logo .logo-image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.7);
    /* Muted white for hero overlap */
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.nav-links a:hover {
    color: white !important;
    transform: translateY(-1px);
}

[data-theme="light"] .nav-links a {
    color: var(--text-main);
}

.nav-links a:hover {
    color: #e11d48 !important;
    transform: translateY(-1px);
}

.navbar.scrolled .nav-links a {
    color: var(--text-main);
}

[data-theme="dark"] .navbar.scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.9);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link-simple {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

[data-theme="light"] .nav-link-simple {
    color: var(--text-main);
}

.nav-link-simple:hover {
    color: #e11d48 !important;
    opacity: 1;
    transform: translateY(-1px);
}

.navbar.scrolled .nav-link-simple {
    color: var(--text-main);
}

[data-theme="dark"] .navbar.scrolled .nav-link-simple {
    color: rgba(255, 255, 255, 0.9);
}

.mobile-menu-toggle {
    display: none !important;
    /* Force hide on desktop */
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex !important;
        background: transparent;
        border: none;
        color: var(--text-main);
        font-size: 1.25rem;
        cursor: pointer;
        padding: 0.5rem;
    }
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* Matching bounding-box height to the 40x40 theme toggle wasn't enough —
   full-size text (0.9rem) and generous padding (1.25rem) still read as a
   visually bigger, bulkier element next to a compact icon square, even at
   the same height. Scaled the whole thing down — font, padding, radius —
   so it actually feels like the same size family, not just the same
   bounding box. */
.nav-actions .btn-sm {
    height: 40px;
    /* An older accessibility rule (`.nav-actions .btn-sm { min-height:
       44px }`, same specificity, earlier in the file — search for "Tap
       targets") sets min-height, not height, so it was never overridden
       by the height:40px above: min-height always wins over a smaller
       height. That's the actual reason this button stayed 44px tall no
       matter what height was set to. */
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    font-size: 0.8rem;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
}

.landing-dark {
    background-color: var(--bg-base);
    color: var(--text-main);
}

[data-theme="dark"] .landing-dark section,
[data-theme="dark"] .landing-dark .hero,
[data-theme="dark"] .landing-dark .feature-section,
[data-theme="dark"] .landing-dark .skills-box,
[data-theme="dark"] .landing-dark .stats-badges,
[data-theme="dark"] .landing-dark .testimonials {
    background-color: var(--bg-base);
    color: var(--text-heading);
}

.landing-dark p {
    color: var(--text-muted);
}

.landing-dark h1,
.landing-dark h2,
.landing-dark h3 {
    color: var(--text-heading);
}

.landing-dark h2 i {
    color: var(--primary);
}

.navbar.landing-nav {
    background: var(--bg-navbar) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .navbar.landing-nav {
    background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .navbar.landing-nav {
    background: rgba(255, 255, 255, 0.95) !important;
}

.navbar.landing-nav .logo span,
.navbar.landing-nav .nav-menu a {
    color: var(--text-heading) !important;
}

.mockup-window {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
    padding-top: 30px;
    position: relative;
    box-shadow: 0 50px 100px -20px var(--shadow-color);
    overflow: hidden;
    margin-top: 4rem;
}

.mockup-window::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
}

.hero-preview {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Theme Toggle Button Styles */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: var(--transition);
    padding: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.theme-toggle-btn .icon-sun {
    display: none;
}

.theme-toggle-btn .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
    display: none;
}

/* Responsive Landing Navbar */
.navbar.landing-nav {
    background: var(--bg-navbar) !important;
    border-color: var(--border-color) !important;
}

[data-theme="light"] .navbar.landing-nav .logo span,
[data-theme="light"] .navbar.landing-nav .nav-menu a {
    color: var(--text-heading) !important;
}

/* ===================================
   Unique Brand Identity Styles
   =================================== */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

@keyframes pulse-slow {

    0%,
    100% {
        opacity: 0.1;
        transform: scale(1);
    }

    50% {
        opacity: 0.15;
        transform: scale(1.1);
    }
}

.pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

/* New Floating Navbar */
.navbar-floating {
    position: fixed;
    top: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    z-index: 1000;
    background: rgba(var(--bg-rgb), 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

[data-theme="dark"] .navbar-floating {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-floating.scrolled {
    top: 0.5rem;
    width: 95%;
    padding: 0.5rem 1.5rem;
}

/* ieltsx.com Specific Hero Gradients */
.hero-gradient {
    background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.05), transparent),
        radial-gradient(circle at bottom right, rgba(244, 63, 94, 0.05), transparent);
}

/* Removed a duplicate .text-gradient whose gradient read "to r" — invalid
   syntax, so the browser dropped the declaration and the valid rule above
   kept applying. Correcting the typo would have silently changed the live
   heading colour; deleting it keeps one source of truth. */

/* Utility Classes for home.html Replication */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-10 {
    z-index: 10;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-col {
    flex-direction: column;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-y-12>*+* {
    margin-top: 3rem;
}

.space-y-32>*+* {
    margin-top: 8rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-16 {
    gap: 4rem;
}

.w-full {
    width: 100%;
}

.h-auto {
    height: auto;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-5xl {
    max-width: 64rem;
}

.max-w-6xl {
    max-width: 72rem;
}

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

.p-4 {
    padding: 1rem;
}

.p-12 {
    padding: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

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

.text-sm {
    font-size: 0.875rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-3xl {
    font-size: 1.875rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.text-5xl {
    font-size: 3rem;
}

.text-7xl {
    font-size: 4.5rem;
}


.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.uppercase {
    text-transform: uppercase;
}

.text-muted-foreground {
    color: var(--text-muted);
}

.bg-background {
    background-color: var(--bg-base);
}

.bg-muted\/20 {
    background-color: rgba(var(--gray-200-rgb, 226, 232, 240), 0.2);
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

.border-border\/30 {
    border-color: rgba(var(--border-color-rgb, 226, 232, 240), 0.3);
}

.overflow-hidden {
    overflow: hidden;
}

.blur-3xl {
    filter: blur(64px);
}

.mix-blend-multiply {
    mix-blend-mode: multiply;
}

.opacity-10 {
    opacity: 0.1;
}

.shrink-0 {
    flex-shrink: 0;
}

.transition-opacity {
    transition-property: opacity;
}

.duration-300 {
    transition-duration: 300ms;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

/* Custom Button Styles for Replica */
.btn-signin {
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    color: var(--text-heading);
    transition: var(--transition);
    border-radius: 0.75rem;
}

.btn-signin:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.btn-white {
    /* Second definition of .btn-white, kept only for its shadow.
       `border: none` used to live here and, being later in the file, it beat
       the border set at the first definition — leaving a white button with no
       border on the white .hero and .cta-box grounds. The border is the only
       thing that makes this button visible in light mode, so it is no longer
       cleared here. */
    box-shadow: 0 10px 30px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.btn-white:hover {
    background: #fdfdfd;
    transform: translateY(-2px);
    box-shadow: 0 15px 40px var(--shadow-color, rgba(0, 0, 0, 0.15));
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Fixes for Replica Polish */
.whitespace-nowrap {
    white-space: nowrap;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

.font-black {
    font-weight: 900;
}

.leading-tight {
    line-height: 1.25;
}

.feature-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 8rem;
}

.feature-grid-row.reverse {
    direction: rtl;
}

.feature-grid-row.reverse>* {
    direction: ltr;
}

.logo-cloud-item {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.logo-cloud-item:hover {
    opacity: 1;
}

.section-title-huge {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.sub-heading-large {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 4rem;
}

/* Final Layout Polish & Responsive Fixes */
.bg-muted\/5 {
    background-color: rgba(var(--gray-200-rgb, 226, 232, 240), 0.05);
}

.rounded-\[3rem\] {
    border-radius: 3rem;
}

.shadow-red-600\/30 {
    box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.3);
}

.shadow-red-500\/20 {
    box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.2);
}

@media (max-width: 768px) {
    .feature-grid-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin-bottom: 4rem;
    }

    .feature-grid-row.reverse {
        direction: ltr;
    }

    .feature-grid-row .inline-flex {
        margin-left: auto;
        margin-right: auto;
    }

    .text-6xl {
        font-size: 3rem;
    }

    .text-8xl {
        font-size: 3.5rem;
    }

    .py-32 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .pt-64 {
        padding-top: 8rem;
    }
}

/* Logo Cloud Faders */
.from-background {
    --tw-gradient-from: var(--bg-base);
    --tw-gradient-to: rgba(var(--bg-rgb), 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.w-32 {
    width: 8rem;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* ===================================
   MOBILE RESPONSIVE — Non-Dashboard
   =================================== */

/* ---- Navbar ---- */
@media (max-width: 768px) {
    .navbar {
        height: auto;
    }

    /* .navbar.scrolled { height: 80px } (unguarded, desktop rule) is more
       specific than the plain .navbar rule above, so it was still winning
       here — shrinking the bar on scroll without any of the accompanying
       "floating pill" polish that shrink is paired with on desktop
       (that part IS properly guarded off on mobile). The result was a
       bar that visibly lowered/hollowed out on scroll for no apparent
       reason. Locking it to the same auto height at every scroll
       position reads as intentional; the desktop-style transform would
       be a bigger, separate redesign. */
    .navbar.scrolled {
        height: auto;
    }

    /* nowrap below stops the ROW from breaking, but with the logo and
       nav-actions still at their full desktop size, a signed-in visitor's
       row ("Dashboard" is wider than "Sign Up") still didn't fit — so the
       row held its one line, and the *logo text* wrapped instead ("IELTS"
       over "NINE"), which is worse. Shrinking both sides is what actually
       makes one line correct rather than just enforced. */
    .logo {
        gap: 0.4rem;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .logo span {
        white-space: nowrap;
    }

    .logo .logo-image {
        width: 1.9rem;
        height: 1.9rem;
    }

    .nav-floating-card {
        position: relative;
        width: 100%;
        border-radius: 0;
        padding: 0.65rem 1rem;
        /* Was `wrap`: with .nav-links taken out of this row below (it's
           `position: absolute` now, not a flex child any more), the only
           two items left are the logo and nav-actions, and wrap was the
           reason they fell onto their own separate line the moment
           "Dashboard" (a signed-in visitor) made that row a few pixels
           wider than "Sign Up" did — there was room for both, just not
           with wrapping still switched on. */
        flex-wrap: nowrap;
        gap: 0;
    }

    /* Nav links: hidden by default, shown as a dropdown panel when active.
       Positioned absolute (flush under the card, same width) instead of
       flowing as a flex child of .nav-floating-card — that's what let it
       force a wrap onto the row above when it was closed, and it doesn't
       need to be part of that row's layout at all. */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid var(--border-color);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        color: var(--text-heading) !important;
        font-size: 0.95rem;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--border-color);
        transform: none !important;
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    /* Navbar scrolled state on mobile needs solid bg for readability.
       .nav-links now needs the same opaque background: it used to inherit
       the card's own painted box for free just by being inside it in the
       flex flow; positioned absolute below the card instead, it paints
       over whatever page content sits behind it. */
    .navbar.scrolled .nav-floating-card,
    .nav-floating-card,
    .nav-links {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
        backdrop-filter: none;
        box-shadow: none;
    }

    .nav-links.active {
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.35);
    }

    /* Hide Login link in nav-actions (it'll appear in the dropdown) */
    .nav-link-simple {
        display: none;
    }

    .nav-actions {
        gap: 0.4rem;
    }

    .mobile-menu-toggle {
        display: flex !important;
        padding: 0.4rem;
    }

    /* Reduce btn-sm on mobile — tightened further (was 0.9rem horizontal)
       so "Dashboard" (a signed-in visitor's button, wider than "Sign Up")
       fits on the same line as the logo instead of wrapping to one of its
       own. */
    .btn-sm {
        padding: 0.45rem 0.65rem;
        font-size: 0.85rem;
    }

    /* Overrides the 44px accessibility-floor rule above for this one
       button specifically — 40px is still a reasonable tap target, and
       the alternative (wrapping) was worse for every visitor, not just
       the one tapping this button. */
    .theme-toggle-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Ensure theme toggle is visible in dark mode on mobile */
    [data-theme="dark"] .mobile-menu-toggle {
        color: rgba(255, 255, 255, 0.8);
    }

    .nav-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        /* Below .navbar (1000), above page content */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .nav-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (min-width: 769px) {
    .nav-mobile-overlay {
        display: none;
    }
}

/* ---- Hero ---- */
@media (max-width: 768px) {
    /* Was 7rem, tuned against a taller mobile navbar than the one that
       exists now (smaller logo, tighter buttons) — left more empty gap
       above "Prepare for IELTS Success" than the navbar actually needs
       clearing. */
    .hero {
        padding: 6rem 0 3.5rem;
    }

    .hero-blob {
        width: 18rem !important;
        height: 18rem !important;
    }

    /* Hide the extra large blob-3 on mobile */
    .hero-blob-3 {
        display: none;
    }

    .hero-container {
        padding: 0 1.25rem;
    }

    .hero .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
        margin-bottom: 1rem;
        letter-spacing: -0.03em;
    }

    .hero .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .hero-cta .btn {
        text-align: center;
        justify-content: center;
    }

    .hero-preview-wrapper {
        margin-top: 2.5rem;
        border-radius: 1rem;
    }

    .section-pill {
        font-size: 0.72rem;
        padding: 0.35rem 0.75rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 6rem 0 2.5rem;
    }

    .hero .hero-title {
        font-size: clamp(1.75rem, 9vw, 2.25rem);
    }

    .hero .hero-subtitle {
        font-size: 0.95rem;
    }
}

/* ---- Stats Section ---- */
@media (max-width: 768px) {
    .stats-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 1rem;
        padding: 2rem 1rem;
        justify-items: center;
    }

    .stat-val {
        font-size: 1.75rem;
    }

    .stat-lab {
        font-size: 0.8rem;
    }
}

/* ---- Feature Sections ---- */
@media (max-width: 768px) {
    .feature-section {
        padding: 2.5rem 0;
    }

    .feature-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Reset RTL trick on mobile */
    .feature-layout.reverse {
        direction: ltr;
    }

    .feature-body h2 {
        font-size: 1.5rem;
        margin: 1rem 0 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .feature-body h2 i {
        font-size: 1.25rem;
    }

    .feature-body p {
        font-size: 0.95rem;
    }

    .mockup-window {
        margin-top: 0;
    }
}

/* ---- Skills Grid ---- */
@media (max-width: 768px) {
    .skills-box {
        padding: 2.5rem 0;
    }

    .skills-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .skill-card {
        padding: 1.5rem;
    }

    .skill-icon {
        margin-bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* ---- Testimonials ---- */
@media (max-width: 600px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- CTA Box ---- */
@media (max-width: 768px) {
    .cta-box {
        margin: 3rem 0;
        border-radius: var(--radius-lg);
    }

    .cta-box-inner {
        padding: 2.5rem 1.25rem;
    }

    .cta-box h2 {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .cta-box p {
        font-size: 0.95rem;
    }
}

/* ---- General Container / Section ---- */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ---- Buttons ---- */
.btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}

@media (max-width: 480px) {
    .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* ---- Auth Page ---- */
@media (max-width: 480px) {
    .auth-page {
        padding: 5rem 0 2rem;
    }

    .auth-card {
        margin: 0 1rem;
        padding: 2rem 1.25rem;
    }
}

/* ---- Features page card grid ---- */
@media (max-width: 768px) {
    .features-cards-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .features-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Hero CTA centering (features/home) ---- */
@media (max-width: 768px) {
    .hero-cta {
        justify-content: center;
    }
}

/* ---- Footer ---- */
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }
}


/* Theme Toggle Icon Visibility */
.theme-toggle-btn .theme-icon {
    display: none;
}

/* Show moon in light mode, sun in dark mode */
[data-theme="light"] .theme-toggle-btn .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
    display: block;
}

/* ===================================
   SEO Landing Pages (Listening / Reading / Writing AI)
   =================================== */
.seo-landing {
    --seo-accent: var(--primary);
    --seo-accent-rgb: 225, 29, 72;
    position: relative;
    background: var(--bg-base);
    color: var(--text-main);
    overflow: hidden;
}

[data-theme="dark"] .seo-landing {
    background: var(--bg-base);
}

/* Page-wide atmosphere: blobs live on the wrapper so the glow
   continues behind every section instead of cutting to flat black */
.seo-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* The global pulse-slow keyframes cap blob opacity at ~0.1, which is
   invisible over var(--bg-base) — give SEO blobs a stronger pulse */
[data-theme="dark"] .seo-atmosphere .hero-blob {
    animation: seo-blob-pulse 12s ease-in-out infinite alternate;
}

@keyframes seo-blob-pulse {
    from {
        transform: scale(1) translate(0, 0);
        opacity: 0.17;
    }

    to {
        transform: scale(1.08) translate(2rem, 1.5rem);
        opacity: 0.26;
    }
}

[data-theme="light"] .seo-atmosphere .hero-blob {
    animation: none;
    opacity: 0.1 !important;
}

/* Per-page background identity: color washes + a thematic texture.
   Listening = sound ripples, Reading = ruled paper, Writing = ink strokes.
   Radii in rem so the glow stays concentrated regardless of page height. */
.seo-listening .seo-atmosphere {
    background:
        repeating-radial-gradient(circle at 50% -20rem, transparent 0 140px, rgba(234, 179, 8, 0.05) 140px 142px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(234, 179, 8, 0.17), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(225, 29, 72, 0.11), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(234, 179, 8, 0.09), transparent 78%);
}

[data-theme="light"] .seo-listening .seo-atmosphere {
    background:
        repeating-radial-gradient(circle at 50% -20rem, transparent 0 140px, rgba(161, 116, 8, 0.05) 140px 142px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(234, 179, 8, 0.12), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(225, 29, 72, 0.06), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(234, 179, 8, 0.07), transparent 78%);
}

.seo-reading .seo-atmosphere {
    background:
        repeating-linear-gradient(180deg, transparent 0 56px, rgba(34, 197, 94, 0.05) 56px 57px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(34, 197, 94, 0.14), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(59, 130, 246, 0.11), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(34, 197, 94, 0.08), transparent 78%);
}

[data-theme="light"] .seo-reading .seo-atmosphere {
    background:
        repeating-linear-gradient(180deg, transparent 0 56px, rgba(21, 128, 61, 0.05) 56px 57px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(34, 197, 94, 0.10), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(59, 130, 246, 0.06), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(34, 197, 94, 0.06), transparent 78%);
}

.seo-writing .seo-atmosphere {
    background:
        repeating-linear-gradient(135deg, transparent 0 64px, rgba(225, 29, 72, 0.05) 64px 65px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(225, 29, 72, 0.16), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(168, 85, 247, 0.12), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(225, 29, 72, 0.09), transparent 78%);
}

[data-theme="light"] .seo-writing .seo-atmosphere {
    background:
        repeating-linear-gradient(135deg, transparent 0 64px, rgba(190, 18, 60, 0.04) 64px 65px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(225, 29, 72, 0.08), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(168, 85, 247, 0.05), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(225, 29, 72, 0.06), transparent 78%);
}

.seo-landing > section,
.seo-landing > div {
    position: relative;
    z-index: 1;
}

/* Hero */
.seo-hero {
    position: relative;
    padding: 8.5rem 1.5rem 3.25rem;
    text-align: center;
}

/* Rich corner wash like the home hero, in the page's own colors.
   Bleeds past the hero bottom so it melts into the test embed. */
.seo-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 -16rem 0;
    background:
        radial-gradient(circle at 15% -12%, rgba(var(--seo-accent-rgb), 0.16), transparent 55%),
        radial-gradient(circle at 88% 8%, rgba(var(--seo-accent2-rgb, 225, 29, 72), 0.10), transparent 45%);
    pointer-events: none;
    z-index: -1;
}

[data-theme="light"] .seo-hero::before {
    opacity: 0.45;
}

.seo-hero-title {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-heading);
    margin: 1.1rem 0;
}

.seo-hero-sub {
    max-width: 560px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.seo-trust-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.seo-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.seo-trust-row i {
    color: var(--success);
    font-size: 0.72rem;
}

/* Test embed: framed like the home hero preview */
.seo-embed-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.seo-embed-frame {
    padding: 0.45rem;
    border-radius: 1.25rem;
    background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.02));
    border: 1px solid var(--border-color);
    box-shadow: 0 30px 80px -24px rgba(15, 23, 42, 0.25);
}

[data-theme="dark"] .seo-embed-frame {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6);
}

.seo-embed-inner {
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .seo-embed-inner {
    background: var(--bg-surface);
    border-color: rgba(255, 255, 255, 0.07);
}

.seo-test-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .seo-test-bar {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.seo-test-meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.seo-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    flex-shrink: 0;
}

.seo-test-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-part-chip {
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    color: var(--seo-accent);
    background: rgba(var(--seo-accent-rgb), 0.1);
    border: 1px solid rgba(var(--seo-accent-rgb), 0.25);
}

.seo-bar-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.seo-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.38rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.seo-bar-btn:hover {
    color: var(--text-heading);
    border-color: var(--text-muted);
}

.seo-bar-btn i {
    font-size: 0.72rem;
}

.seo-test-iframe {
    width: 100%;
    height: 82vh;
    min-height: 580px;
    border: none;
    display: block;
    background: var(--bg-surface);
    transition: opacity 0.25s ease;
}

.seo-empty {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    color: var(--text-muted);
}

/* Accent badge attached to the bottom of the test window */
.seo-embed-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.45rem;
    padding: 0.85rem 1.25rem;
    border-radius: 0.8rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-main);
    background: rgba(var(--seo-accent-rgb), 0.07);
    border: 1px solid rgba(var(--seo-accent-rgb), 0.25);
    box-shadow: 0 0 28px rgba(var(--seo-accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.seo-embed-badge i {
    color: var(--seo-accent);
    font-size: 1rem;
    margin-right: 0.25rem;
}

.seo-embed-badge strong {
    color: var(--text-heading);
}

.seo-embed-badge .seo-badge-highlight {
    color: var(--seo-accent);
    font-weight: 800;
}

/* How it works */
.seo-steps {
    max-width: 960px;
    margin: 0 auto;
    padding: 5rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    text-align: center;
}

.seo-step-num {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--seo-accent);
    background: rgba(var(--seo-accent-rgb), 0.09);
    border: 1px solid rgba(var(--seo-accent-rgb), 0.22);
    margin-bottom: 0.9rem;
}

.seo-step h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.seo-step p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Stats row */
.seo-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 5rem 1.5rem 0;
}

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

.seo-stat-val {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1;
}

.seo-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    letter-spacing: 0.03em;
}

.seo-stat-divider {
    width: 1px;
    height: 2.2rem;
    background: var(--border-color);
}

/* Writing criteria grid */
.seo-criteria {
    max-width: 940px;
    margin: 0 auto;
    padding: 5rem 1.5rem 0;
}

.seo-criteria-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.seo-criteria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.seo-criterion {
    background: var(--bg-surface);
    padding: 1.75rem 1.5rem;
}

[data-theme="dark"] .seo-criterion {
    background: var(--bg-surface);
}

.seo-criterion-icon {
    font-size: 1.15rem;
    margin-bottom: 0.55rem;
}

.seo-criterion h3 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 0.35rem;
}

.seo-criterion p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Final CTA fine print (inside reused .cta-box) */
.cta-box p.cta-fineprint {
    font-size: 0.74rem;
    color: var(--text-muted);
    opacity: 0.75;
    margin: 0.9rem auto 0;
    letter-spacing: 0.01em;
}

@media (max-width: 860px) {
    .seo-criteria-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .seo-hero {
        padding-top: 7rem;
    }

    .seo-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .seo-test-iframe {
        height: 74vh;
        min-height: 520px;
    }
}

@media (max-width: 520px) {
    .seo-criteria-grid {
        grid-template-columns: 1fr;
    }

    .seo-stats {
        gap: 1.25rem;
    }
}

/* ===================================
   Offline Mock Marketplace (public listing + sitting detail)
   Extends the .seo-landing pattern: the wrapper carries the accent tokens and
   every colour below is either a theme token or an rgba() of --seo-accent-rgb,
   so light mode inherits correctly instead of needing a second palette.
   =================================== */
.offline-mock-landing {
    --seo-accent: #6366f1;
    --seo-accent-rgb: 99, 102, 241;
    --seo-accent2-rgb: 34, 211, 238;
}

.offline-mock-landing .seo-atmosphere {
    background:
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(99, 102, 241, 0.045) 72px 73px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(99, 102, 241, 0.16), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(34, 211, 238, 0.10), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(99, 102, 241, 0.09), transparent 78%);
}

[data-theme="light"] .offline-mock-landing .seo-atmosphere {
    background:
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(79, 70, 229, 0.04) 72px 73px),
        radial-gradient(ellipse 85rem 48rem at 50% -6rem, rgba(99, 102, 241, 0.10), transparent 78%),
        radial-gradient(ellipse 55rem 30rem at 108% 70rem, rgba(34, 211, 238, 0.06), transparent 78%),
        radial-gradient(ellipse 60rem 30rem at -8% calc(100% - 22rem), rgba(99, 102, 241, 0.06), transparent 78%);
}

/* Recolour the shared pill/gradient so the page reads as its own place */
.offline-mock-landing .section-pill {
    color: var(--seo-accent);
    background: rgba(var(--seo-accent-rgb), 0.06);
    border-color: rgba(var(--seo-accent-rgb), 0.18);
    box-shadow: 0 4px 12px rgba(var(--seo-accent-rgb), 0.06);
}

.offline-mock-landing .text-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Listing grid */
.om-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    padding-bottom: 1rem;
}

.om-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.6rem;
    text-decoration: none;
    color: inherit;
}

.om-card:hover {
    border-color: rgba(var(--seo-accent-rgb), 0.55);
}

.om-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-heading);
    margin: 0;
    line-height: 1.35;
}

.om-centre {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--seo-accent);
}

.om-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}

.om-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-main);
}

.om-meta-row i {
    width: 1rem;
    margin-top: 0.15rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    flex: none;
}

.om-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

.om-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.om-price small {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

.om-seats {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    color: var(--seo-accent);
    background: rgba(var(--seo-accent-rgb), 0.08);
    border: 1px solid rgba(var(--seo-accent-rgb), 0.22);
}

.om-seats.is-low {
    color: var(--warning);
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.28);
}

.om-seats.is-full {
    color: var(--text-muted);
    background: var(--bg-base);
    border-color: var(--border-color);
}

.om-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: var(--success);
    background: rgba(16, 185, 129, 0.09);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Empty state — this is the launch state, so it has to say something useful */
.om-empty {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 3.5rem 2rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
}

.om-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 16px;
    font-size: 1.35rem;
    color: var(--seo-accent);
    background: rgba(var(--seo-accent-rgb), 0.09);
    border: 1px solid rgba(var(--seo-accent-rgb), 0.22);
    margin-bottom: 1.1rem;
}

.om-empty h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-heading);
    margin: 0 0 0.5rem;
}

.om-empty p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 auto 1.5rem;
    max-width: 44ch;
}

/* Detail page */
.om-detail {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.om-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
}

.om-panel + .om-panel {
    margin-top: 1.25rem;
}

.om-panel h2 {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.om-booking-panel {
    position: sticky;
    top: 6.5rem;
    text-align: center;
}

.om-booking-price {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    line-height: 1.1;
}

.om-booking-price small {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.om-booking-panel .btn {
    width: 100%;
    margin-top: 1.25rem;
}

.om-note {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0.9rem 0 0;
}

.om-notes-body {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-main);
    white-space: pre-line;
    margin: 0;
}

.om-status-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    color: var(--success);
    background: rgba(16, 185, 129, 0.09);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.om-status-banner.is-muted {
    color: var(--text-muted);
    background: var(--bg-base);
    border-color: var(--border-color);
}

.om-link-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1rem;
}

.om-link-back:hover {
    color: var(--seo-accent);
}

.om-cancel-form {
    margin-top: 0.85rem;
}

.om-cancel-btn {
    width: 100%;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.om-cancel-btn:hover {
    color: var(--error);
    border-color: rgba(239, 68, 68, 0.4);
}

@media (max-width: 860px) {
    .om-detail {
        grid-template-columns: 1fr;
    }

    .om-booking-panel {
        position: static;
    }
}

@media (max-width: 520px) {
    .om-grid {
        grid-template-columns: 1fr;
    }

    .om-card {
        padding: 1.35rem;
    }
}