/* ============================================================
 * ebook.css — SHARED BASE + LANDING-PAGE STYLESHEET.
 *
 * Despite the legacy name, this is NOT just the ebook reader. It is
 * the de-facto BASE stylesheet for the public site: the CSS reset,
 * the :root design tokens, the Thai type system, button styles, the
 * .navbar, and the long-form landing/sales sections all live here.
 *
 * Loaded by: the homepage (partials/home/head.php), the blog
 * (insights.php, post.php), portfolio.php, and templates/luxury_tech.php.
 * → Edits here ripple across ALL of those pages. Test them together.
 *
 * NOTE: index.css redefines some of the :root tokens below with
 * slightly different values; on the homepage index.css loads later
 * and wins. (Phase 2 follow-up: unify into one base.css token set.)
 * ============================================================ */

/* Base & Reset */
:root {
    --primary: #1E40AF; /* Premium Deep Royal Blue */
    --primary-light: #3B82F6;
    --primary-dark: #0F172A;
    --cta: #C8962E; /* Premium Gold for luxury feel */
    --secondary: #0B1D33; /* Deep Navy */
    --text-main: #1E293B; 
    --text-light: #5A6F8A;
    --bg-main: #FFFFFF;
    --bg-soft: #F0F4F8;
    --accent-tint: #EFF6FF;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    --shadow-premium: 0 20px 40px -10px rgba(11, 29, 51, 0.12);
    --shadow-cta: 0 10px 25px -5px rgba(200, 150, 46, 0.4);

    /* ── Z-INDEX SCALE — single source of truth for global stacking order ──
       Use these instead of raw z-index numbers so layers stay in a known
       ladder and stacking bugs (one layer wrongly above another) don't creep
       in. Values preserve the existing numbers, so nothing moves visually.
       Defined here in the base stylesheet so every page with the navbar can
       resolve them. Purely-local in-component z-indexes (0/1/2 inside a card,
       the legacy desktop nav drawer) are intentionally left as raw values. */
    --z-floating:   900;    /* floating CTA / back-to-top                     */
    --z-nav-panel:  990;    /* mobile quick-nav (sits just below the navbar)  */
    --z-nav:       1000;    /* fixed navbar + profile dropdown                */
    --z-nav-toast: 1100;    /* nav login / forgot-password messages           */
    --z-modal:     2000;    /* modal dialog (backdrop = calc(--z-modal - 1))  */
    --z-overlay:   9999;    /* fullscreen overlays + image lightboxes         */
    --z-modal-top: 99999;   /* free-course registration modal (top-most)      */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ── Thai type system ──────────────────────────────────────────────────────
   Body / paragraphs → Sarabun (looped / "มีหัว") for best long-form readability.
   Headings (h1–h6)  → Prompt  (loopless / "ไม่มีหัว") for a modern display look.
   Latin glyphs use Inter/Prompt first (they cover only Latin), then Thai falls
   through to Sarabun/Prompt via the unicode-range @font-faces in fonts.css. */
body {
    font-family: 'Inter', 'Sarabun', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-main);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Prompt', 'Sarabun', sans-serif;
}

/* Premium Noise Grain Texture */
/* Noise filter removed */

h1, h2, h3, h4, h5, h6 {
    color: var(--secondary);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

span {
    color: var(--primary);
}

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

ul {
    list-style: none;
}

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

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw; /* Fluid side padding */
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    font-family: inherit;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--cta), #EA580C);
    color: white;
    box-shadow: var(--shadow-cta);
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.6s ease;
}

.btn-primary:hover::after {
    left: 120%;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px -5px rgba(249, 115, 22, 0.6);
    color: white;
}

.btn-secondary {
    background: transparent;
    color: var(--secondary);
    border: 1px solid #E2E8F0;
}

.btn-secondary:hover {
    background: var(--bg-soft);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

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

.btn-large {
    padding: 16px 36px;
    font-size: 1.125rem;
}

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

.btn-review {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important; /* Premium Royal Blue */
    color: white !important;
    border-radius: 100px !important;
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.3) !important;
    padding: 12px 36px !important; /* Reduced height */
    font-size: 1rem !important; /* Slightly smaller font */
    transition: var(--transition);
}

.btn-review:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 15px 35px rgba(30, 64, 175, 0.4) !important;
    filter: brightness(1.1) !important;
}

/* Review Form Modal Styles */
.review-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: calc(var(--z-modal) - 1);
    animation: fadeIn 0.3s ease;
}

.review-form-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 35px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    text-align: left;
    z-index: var(--z-modal);
    animation: modalFadeUp 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeUp {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.close-review-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94A3B8;
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8fafc;
}

.close-review-modal:hover {
    color: #ef4444;
    background: #fee2e2;
    transform: rotate(90deg);
}

.review-form-container h3 {
    margin-bottom: 25px;
    font-size: 1.25rem;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.star-rating-input {
    display: flex;
    gap: 8px;
    font-size: 2.1rem;
    margin-bottom: 5px;
}

.star-rating-input .star {
    cursor: pointer;
    color: #cbd5e1;
    transition: all 0.2s ease;
}

.star-rating-input .star.active {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.star-rating-input .star:hover {
    transform: scale(1.2);
}

.disabled-rating {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
    padding: 0 24px; /* Maintain safe distance from edge */
}

.logo {
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--secondary);
    letter-spacing: -1.5px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

.logo span {
    color: var(--primary);
}

.logo:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.2));
}

.nav-links {
    display: flex;
    gap: 32px;
}

/* Nav Buttons */
.nav-btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-nav-orange {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.btn-nav-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
    color: white;
}

.btn-nav-green {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-nav-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    color: white;
}

@media (max-width: 992px) {
    .nav-links {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 40px;
        gap: 24px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        transform: translateY(-150%);
        transition: var(--transition);
        z-index: 999;
        text-align: center;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links a {
        font-size: 1.2rem;
        width: 100%;
    }
}

.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--secondary);
    border-radius: 3px;
    transition: var(--transition);
}

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

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

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

/* Hero Section */
.hero {
    padding: clamp(120px, 15vh, 180px) 0 80px; 
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 25%, #3B82F6 50%, #1D4ED8 75%, #1E40AF 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,0.1) 0%, transparent 40%);
    pointer-events: none;
}

.hero-container {
    display: grid;
    /* minmax(0,1fr) — NOT 1fr — so tracks may shrink below their content's
       min-content width. Plain 1fr (= minmax(auto,1fr)) lets the long Thai
       text in the left column refuse to shrink, blowing the grid wider than
       the container and pushing the right-hand image off-screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
}

/* Belt-and-suspenders: allow both columns to shrink inside the grid track. */
.hero-content,
.hero-image {
    min-width: 0;
}

@media (max-width: 992px) {
    .hero {
        padding-top: 100px;
        text-align: center;
    }
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-image {
        /* Stacked layout — center the slide, don't right-align it */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
}

.hero h1 {
    font-size: clamp(1.8rem, 4.1vw, 2.85rem);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
    color: #FFFFFF;
    /* Long Thai runs have no spaces to break on; let them wrap inside the
       column instead of overflowing right and sliding under the hero image. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.hero h1 .line-1, .hero h1 .line-2, .hero h1 .line-3 {
    display: block;
    line-height: 1.1;
}

.hero h1 .line-1 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: #FBBF24; /* Gold color for premium feel */
    font-weight: 900;
    margin-bottom: 12px;
    white-space: nowrap; /* Force single line */
    letter-spacing: 0.06em;
}

.hero h1 .highlight {
    font-size: 1em;
    color: var(--cta);
    font-weight: 900;
    margin: 0 0 0 10px;
    letter-spacing: -0.02em;
    display: inline-block !important;
    position: relative;
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta) 40%, #fff 50%, var(--cta) 60%, var(--cta) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scanning 4s linear infinite;
}
@keyframes scanning {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.hero h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--cta);
    box-shadow: 0 0 15px var(--cta);
    animation: lineLoading 4s ease-in-out infinite;
}

@keyframes lineLoading {
    0%, 100% { width: 0; left: 0; }
    50% { width: 100%; left: 0; }
}

.hero h1 .line-2, .hero h1 .line-3 {
    font-size: clamp(1.15rem, 2.9vw, 1.5rem);
    color: rgba(255, 255, 255, 0.9); /* Bright white for visibility on dark blue */
    font-weight: 500; /* Lighter weight for sub-points */
    margin-bottom: 8px;
    opacity: 0.95;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
    max-width: 560px;
    line-height: 1.8;
    opacity: 0.95;
}

/* Hero Lead Line — brand identity statement between H1 and sub-headlines */
.hero-lead-line {
    font-family: 'Prompt', 'Sarabun', sans-serif;
    font-size: clamp(0.92rem, 1.25vw, 1.12rem);
    font-weight: 500;
    line-height: 1.55;
    color: #FCD34D;
    margin: 0 0 22px;
    padding-left: 16px;
    border-left: 3px solid rgba(252, 211, 77, 0.55);
    letter-spacing: 0.01em;
    text-wrap: balance;
    max-width: 640px;
}
@media (max-width: 1024px) {
    .hero-lead-line {
        text-align: center;
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        padding-bottom: 8px;
        border-top: 1px solid rgba(252, 211, 77, 0.30);
        border-bottom: 1px solid rgba(252, 211, 77, 0.30);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

.hero-sub-headlines {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    align-items: stretch;
    position: relative;
}

.hero-sub-headlines .sub-headline {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.72rem, 1.35vw, 0.86rem);
    line-height: 1.55;
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-align: center;
    /* Cap at 3 lines without showing an ellipsis marker. */
    max-height: calc(1.55em * 3);
    overflow: hidden;
}

/* First column flush-left so the block visually begins at the headline edge. */
.hero-sub-headlines .sub-headline:first-child { text-align: left; }

/* Neon vertical dividers — anchored to the container so they aren't clipped
   by `overflow: hidden` on individual sub-headline cells. Positioned at the
   centre of each column-gap using calc(): col-width = (100% - 2 * 32px) / 3. */
.hero-sub-headlines::before,
.hero-sub-headlines::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(56, 189, 248, 0.0) 10%,
        rgba(56, 189, 248, 0.85) 35%,
        rgba(186, 230, 253, 1) 50%,
        rgba(56, 189, 248, 0.85) 65%,
        rgba(56, 189, 248, 0.0) 90%,
        transparent 100%);
    box-shadow:
        0 0 6px rgba(56, 189, 248, 0.55),
        0 0 14px rgba(56, 189, 248, 0.32);
    pointer-events: none;
}
.hero-sub-headlines::before { left: calc((100% - 64px) / 3 + 16px); }
.hero-sub-headlines::after  { left: calc((100% - 64px) * 2 / 3 + 48px); }

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}

.social-proof {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatars {
    display: flex;
}

.avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -12px;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.avatars img:first-child {
    margin-left: 0;
}

.social-proof p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.hero-image {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    /* Right-align within the grid cell instead of bleeding past the edge */
    margin-left: auto;
    margin-right: 0;
}

.slider-container {
    width: 100%;
    min-height: 400px; /* Fallback for height */
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    position: relative;
    aspect-ratio: 16 / 10;
    background: #f8fafc; /* Light gray background to show box even if images fail */
    border: 1px solid rgba(0,0,0,0.05);
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; 
    object-fit: cover; /* Changed back to cover to fill the frame */
    transform: scale(1.05); 
    z-index: 1;
}

.hero .slide.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2 !important;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(4px);
    border: 1.5px solid rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(245, 100, 0, 0.3);
}

.decoration {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none; /* Prevents blocking hover on slider */
}

.circle-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
    opacity: 0.2;
    top: -50px;
    right: -50px;
}

.circle-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #FFA500 0%, transparent 70%);
    opacity: 0.15;
    bottom: -30px;
    left: -30px;
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 50px; /* Reduced from 80px */
    max-width: 1100px; /* Increased to fit longer titles */
    margin-left: auto;
    margin-right: auto;
}

.section-title h2 {
    font-size: 2rem; /* Reduced to fit in one line */
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.section-title p {
    font-size: 1.25rem;
    color: var(--text-light);
    font-weight: 400;
}

/* Features */
.features {
    padding: 20px 0 80px; /* Reduced top padding to close gap with bar */
    background: var(--bg-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 36px 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.9);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: var(--accent-tint);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 24px;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--text-light);
}

/* Inside Course */
.inside-course {
    padding: 80px 0;
    background: var(--bg-main);
}

.inside-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.inside-image {
    position: relative;
}

.inside-image img {
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

.glass-card {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card h4 {
    color: var(--primary);
    margin-bottom: 4px;
}

.inside-content h2 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.inside-content > p {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 32px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefits-list li {
    display: flex;
    gap: 16px;
}

.check {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 14px;
}

.benefits-list strong {
    font-size: 1.125rem;
    color: var(--secondary);
    display: block;
    margin-bottom: 4px;
}

.benefits-list p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Craft Section */
.craft-section {
    padding: 80px 0;
    background: var(--secondary);
    color: white;
}

.craft-container {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Increased image side */
    gap: 60px;
    align-items: center;
}

.craft-slider {
    aspect-ratio: 16/9; /* Wider for craft section */
    background: #1E293B;
}

#craft-slider {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#craft-slider .slide {
    min-width: 100%;
    position: relative; 
    opacity: 1; 
    object-fit: cover;
    transform: none;
}

#craft-dots .dot {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

#craft-dots .dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

.craft-content h2 {
    color: white;
    font-size: 2.1rem; /* Reduced to fit in one line */
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.craft-content p {
    color: #64748B;
    font-size: 1.125rem;
    margin-bottom: 32px;
}

.craft-image img {
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Pricing */
.pricing {
    padding: 20px 0 80px; /* Reduced top padding */
    background: linear-gradient(to bottom, var(--bg-white), var(--orange-tint));
}

.pricing-card {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(15, 23, 42, 0.05);
    position: relative;
}

.pricing-header {
    background: var(--secondary);
    color: white;
    padding: 40px;
    text-align: center;
    position: relative;
}

.popular-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pricing-header h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.old-price {
    font-size: 1.25rem;
    text-decoration: line-through;
    color: #64748B;
}

.new-price {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary);
}

.pricing-header p {
    color: #CBD5E1;
}

.pricing-body {
    padding: 40px;
}

.pricing-body ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-body li {
    color: var(--text-main);
    display: flex;
    align-items: flex-start;
}

.pricing-footer {
    padding: 0 40px 40px;
}

.guarantee {
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Testimonials */
.testimonials {
    padding: 80px 0 40px; /* Reduced bottom padding */
    background: linear-gradient(to bottom, var(--bg-main), var(--bg-white));
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px; /* Reduced from 30px */
}

.testimonial-card {
    background: var(--bg-white);
    padding: 24px; /* Reduced internal padding */
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: opacity 0.5s ease, transform 0.5s ease;
    height: 100%;
}

.testimonial-card.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

.stars {
    color: #FBBF24;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 24px;
    font-style: italic;
    flex-grow: 1;
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-user img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.user-info p {
    font-size: 0.75rem;
    color: var(--text-light);
}

.ready-cta {
    text-align: center;
    margin-top: 20px; /* Reduced margin */
}

/* What You Get Section (Modules) */
.what-you-get {
    padding: 80px 0 20px; /* Reduced bottom padding */
    background: var(--bg-white);
    background-image: radial-gradient(var(--orange-tint) 1px, transparent 1px);
    background-size: 30px 30px;
}

.what-you-get .section-title h2 {
    font-size: 2.2rem; /* Reduced to fit in one line */
    letter-spacing: -0.01em;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 60px;
    counter-reset: module-counter;
}

.module-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 32px;
    border-radius: 32px;
    border: 1.5px solid rgba(15, 23, 42, 0.08); /* Clearer default border */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.module-card::before {
    counter-increment: module-counter;
    content: counter(module-counter, decimal-leading-zero);
    position: absolute;
    top: -30px;
    right: 20px;
    font-size: 6rem;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.03;
    z-index: -1;
    font-family: 'Playfair Display', serif;
    transition: all 0.8s ease;
}

.module-card:hover::before {
    transform: scale(1.1) rotate(-5deg);
    opacity: 0.06;
}

.module-card:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.98);
    /* Dual-Color Gradient Border Trick */
    border-color: transparent;
    background-image: linear-gradient(white, white), 
                      linear-gradient(135deg, var(--primary) 0%, var(--cta) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* Dual-Color Glow Shadow */
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.25), 
                0 10px 20px -5px rgba(249, 115, 22, 0.15);
}

.module-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-tint);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
    transition: all 0.5s ease;
}

.module-card:hover .module-icon {
    background: var(--primary);
    transform: rotateY(360deg);
}

.module-label {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}

.module-card h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--secondary);
    line-height: 1.4;
    font-weight: 700;
}

.module-card ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.module-card li {
    font-size: 0.9rem;
    color: var(--text-light);
    display: flex;
    gap: 8px;
    line-height: 1.7;
}

.module-card li::before {
    content: "→";
    color: var(--primary);
    font-weight: bold;
    opacity: 0.5;
}

/* Bonus Wrapper */
.bonus-wrapper {
    background: #1A1A1A;
    border-radius: 30px;
    padding: 60px;
    color: white;
    margin-top: 80px;
}

.bonus-header {
    text-align: center;
    margin-bottom: 40px;
}

.bonus-header h3 {
    color: white;
    font-size: 2rem;
    margin-top: 16px;
}

/* Toolbox Section (from Image) */
.toolbox-card {
    background: #0B0E1E; /* Deep Navy */
    border-radius: 40px;
    padding: 60px 80px;
    margin-bottom: 60px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toolbox-header {
    text-align: center;
    margin-bottom: 50px;
}

.toolbox-badge {
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    letter-spacing: 1px;
}

.toolbox-header h2 {
    color: white;
    font-size: 2.75rem;
    margin-bottom: 16px;
    font-weight: 700;
}

.toolbox-header p {
    color: #94A3B8;
    font-size: 1.1rem;
    opacity: 0.8;
}

.toolbox-items-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.toolbox-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 30px 40px;
    transition: all 0.3s ease;
}

.toolbox-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(37, 99, 235, 0.3);
}

.toolbox-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.toolbox-item h3 {
    color: #3B82F6; /* Brighter Blue */
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.toolbox-item p {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .toolbox-card {
        padding: 40px 20px;
    }
    .toolbox-header h2 {
        font-size: 2rem;
    }
}

/* Bonuses & Extras Section */
.bonuses-section {
    padding: 120px 0;
    background: #020617;
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
    position: relative;
    overflow: hidden;
}

.bonuses-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.bonuses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 1100px) {
    .bonuses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.bonus-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    padding: 40px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
}

.bonus-card:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    box-shadow: 0 25px 50px -12px rgba(245, 100, 0, 0.25);
}

.bonus-tag {
    position: absolute;
    top: -15px;
    left: 40px;
    background: var(--primary);
    color: white;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(245, 100, 0, 0.3);
}

.bonus-mockup {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.bonus-card:hover .bonus-mockup img {
    transform: scale(1.1);
}

.bonus-label-top {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    opacity: 0.8;
}

.bonus-card h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 24px;
    line-height: 1.3;
}

.bonus-card h3 span {
    display: block;
    font-size: 1rem;
    color: var(--primary-light);
    margin-top: 8px;
    font-weight: 500;
    opacity: 0.8;
}

.bonus-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bonus-features li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    padding-left: 28px;
}

.bonus-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 900;
}

.bonus-features li strong {
    color: white;
    display: block;
    margin-bottom: 2px;
}

/* Extras Separator */
.extras-separator {
    text-align: center;
    margin: 80px 0 60px;
    position: relative;
}

.extras-separator::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    z-index: 1;
}

.extras-separator span {
    background: #020617;
    padding: 0 30px;
    position: relative;
    z-index: 2;
    color: #FBBF24;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* Fast Action Bonuses Section */
.fast-action-bonuses-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #450a0a 0%, #170303 100%); /* Deep vibrant red/black gradient */
    position: relative;
    border-top: 2px solid rgba(239, 68, 68, 0.4);
    border-bottom: 2px solid rgba(239, 68, 68, 0.4);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

.fast-action-bonuses-section .section-title h2 {
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.fast-action-bonuses-section .section-title h2 span {
    color: #FCD34D; /* Bright gold/yellow for high contrast on red */
    text-shadow: 0 0 20px rgba(252, 211, 77, 0.3);
    border-bottom: 2px dashed #FCD34D;
}

.fast-action-bonuses-section .section-title p {
    color: #F1F5F9;
    opacity: 0.9;
}

/* Extras Grid */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

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

.extra-card {
    background: rgba(0, 0, 0, 0.6); /* Solid dark background for readability */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 32px;
    padding: 40px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.extra-card:hover {
    border-color: #ef4444;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.2);
}

.extra-tag {
    position: absolute;
    top: -15px;
    left: 40px;
    background: #FBBF24;
    color: #020617;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.extra-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.extra-icon {
    font-size: 3rem;
    background: rgba(239, 68, 68, 0.15); /* Red tinted background */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.extra-text h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 20px;
    line-height: 1.3;
}

.extra-text h3 span {
    display: block;
    font-size: 1rem;
    color: #FBBF24;
    margin-top: 8px;
    font-weight: 500;
}

.extra-text p {
    color: #F1F5F9; /* Brighter slate for much better readability */
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.extra-text p strong {
    color: #F8FAFC;
}

@media (max-width: 1024px) {
    .bonuses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bonuses-grid, .extras-grid {
        grid-template-columns: 1fr;
    }
    
    .bonus-card, .extra-card {
        padding: 30px 20px;
    }
    
    .extra-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .extra-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}


/* Other Bonus Wrapper */
.bonus-wrapper {
    padding: 40px 60px; /* Reduced vertical padding */
    margin-top: 40px; /* Reduced margin */
    background: linear-gradient(135deg, #F8FAFC 0%, #FFF7ED 50%, #F8FAFC 100%);
    border-radius: 40px;
    border: 1px solid rgba(245, 100, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.bonus-header h3 {
    color: var(--secondary); /* Changed from white to secondary for visibility */
    font-size: 2.25rem;
    margin-top: 16px;
    font-weight: 900;
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bonus-item {
    text-align: center;
    padding: 50px 30px; /* Adjusted padding */
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(245, 100, 0, 0.08);
    box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px -20px rgba(245, 100, 0, 0.2);
    border-color: var(--primary);
}

.bonus-icon {
    font-size: 3rem; /* Slightly smaller for better proportion */
    margin-bottom: 24px;
    color: var(--primary); /* Solid color for better clarity */
    filter: none; /* Removed blur/shadow for sharpness */
}

.bonus-item h4 {
    color: var(--secondary);
    margin-bottom: 12px;
    font-size: 1.35rem; /* Larger */
    font-weight: 700;
}

.bonus-item p {
    font-size: 1rem; /* Larger for readability */
    color: var(--text-main); /* Darker for contrast */
    line-height: 1.7; 
    max-width: 260px;
}

/* Journey Section */
.journey-section {
    padding: 60px 0;
    background-color: #ffffff;
    background-image: radial-gradient(#F56400 0.5px, transparent 0.5px);
    background-size: 30px 30px;
}

.journey-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid #F1F5F9;
}

.sincere-text {
    font-size: 1.25rem;
    color: var(--secondary);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.7; 
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.story-card {
    padding: 30px;
    background: #F8FAFC;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
}

.story-card.highlight {
    background: #FFF7ED;
    border-color: #FED7AA;
}

.story-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.story-card p {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.7;
}

.pain-points-list {
    background: white;
    border-radius: 20px;
    border: 1px solid #F1F5F9;
    padding: 30px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pain-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pain-marker {
    width: 32px;
    height: 32px;
    background: #EF4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

.pain-desc strong {
    display: block;
    color: var(--secondary);
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.pain-desc {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.7; 
}

/* Premium Shortcut Bar */
.premium-shortcut-bar {
    margin-top: 40px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(245, 100, 0, 0.2);
}

.premium-shortcut-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
}

.shortcut-content {
    display: flex;
    gap: 30px;
    align-items: center;
}

.shortcut-content.centered {
    flex-direction: column;
    text-align: center;
}

.shortcut-content.centered .shortcut-divider {
    margin: 20px auto;
}

.shortcut-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: white;
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 900;
}

.shortcut-title span {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 10px;
}

.shortcut-icon-main {
    font-size: 3.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(245, 100, 0, 0.3));
}

.shortcut-text-group {
    flex-grow: 1;
}

.shortcut-main-text {
    font-size: 1.2rem;
    color: #F8FAFC;
    line-height: 1.7;
    margin-bottom: 20px;
}

.shortcut-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    width: 100px;
}

.shortcut-consult-text {
    font-size: 1.1rem;
    color: #CBD5E1;
    line-height: 1.7;
}

.shortcut-consult-text strong {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 768px) {
    .shortcut-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .premium-shortcut-bar {
        padding: 40px 25px;
    }
    .shortcut-divider {
        margin: 20px auto;
    }
    .shortcut-title {
        font-size: 1.4rem;
        padding: 0 10px;
    }
    .shortcut-title span {
        font-size: 0.95rem;
        white-space: normal;
    }
    .shortcut-main-text {
        font-size: 1rem;
        padding: 0 10px;
    }
}

/* FAQ Section */
.faq {
    padding: 30px 0 80px; /* Reduced top padding */
    background: var(--bg-white);
    background-image: radial-gradient(var(--orange-tint) 1px, transparent 1px);
    background-size: 30px 30px; /* Subtle grid effect */
}

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

.faq-instructor-image {
    flex-shrink: 0;
    text-align: center;
}

.faq-list {
    flex-grow: 1;
}

.faq-item {
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 10px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--secondary);
}

.faq-icon {
    width: 32px;
    height: 32px;
    background: var(--orange-tint);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    transition: var(--transition);
}

.faq-item.open .faq-icon {
    background: var(--primary);
    color: white;
    transform: rotate(45deg); /* Plus to X or stay as minus if handled differently */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.faq-item.open .faq-answer {
    max-height: 300px; /* Adjust based on content */
    padding-bottom: 24px;
    opacity: 1;
}

.faq-answer p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.8;
}

/* Footer Legacy Removed */

/* Responsive Design System */
@media (max-width: 1024px) {
    .container { max-width: 94%; padding: 0 20px; }
    .hero-container { grid-template-columns: 1fr; text-align: center; gap: 50px; }
    .hero h1 .line-1 { font-size: clamp(0.65rem, 2.95vw, 1.6rem); letter-spacing: 0.02em; }
    .hero h1 .line-2, .hero h1 .line-3 { font-size: clamp(0.65rem, 2.9vw, 1.55rem); }
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        order: 1;
    }
    .hero-buttons    { justify-content: center; }
    .social-proof    { justify-content: center; }
    .hero-sub-headlines {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        grid-template-columns: none;
    }
    .hero-sub-headlines .sub-headline {
        padding: 0;
        max-height: none;
        overflow: visible;
        text-align: center;
    }
    .hero-sub-headlines::before,
    .hero-sub-headlines::after { display: none; }
    .hero-image { order: 2; width: 100%; max-width: 600px; margin: 20px auto 0; }

    .features-grid, .modules-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
    
    .inside-container, .craft-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    .inside-image { order: 2; }
    .inside-content { order: 1; }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 999;
    }
    .nav-links.active { left: 0; }
    .menu-toggle { display: flex; z-index: 1000; }
    .nav-btn { display: none; }

    .hero { padding: 100px 0 50px; }
    .hero-container { gap: 30px; }
    .slider-container { 
        aspect-ratio: 16 / 10; 
        border-radius: 16px; 
        min-height: 220px; /* Reduced for mobile */
    }

    .hero p { 
        font-size: 1.05rem; 
        max-width: 100%;
        line-height: 1.7;
        margin-bottom: 30px;
    }
    .hero-buttons { flex-direction: column; width: 100%; gap: 15px; }
    .btn { width: 100%; padding: 16px 24px; font-size: 1rem; }
    /* Tame hover on full-width buttons so scale + orange glow don't overflow the viewport. */
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -4px rgba(249, 115, 22, 0.45);
    }
    
    /* Grid adjustments */
    .features-grid, .modules-grid, .testimonials-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .section-title h2 { font-size: 2rem; }
    .section-title p { font-size: 1.1rem; }

    /* Video Block Mobile */
    .video-intro-block { padding: 40px 24px; margin-bottom: 60px; }
    .video-split-container { 
        flex-direction: column; 
        padding: 20px; 
        border-radius: 24px;
    }
    .video-vertical-divider {
        width: 100%;
        height: 1px;
        margin: 24px 0;
    }
    
    .module-card::before { font-size: 5rem; top: 10px; right: 10px; }
}

@media (max-width: 480px) {
    .section-title h2 { font-size: 2.1rem; }
    .hero h1 { line-height: 1.2; }
    .pricing-card { padding: 30px 20px; border-radius: 24px; }
    .module-card { padding: 32px 24px; border-radius: 24px; }
}

/* Guarantee Section - White Banner Style */
.guarantee-section {
    padding: 100px 0;
    background: #ffffff;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
}

.guarantee-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background: white;
    padding: 80px 60px;
    border-radius: 40px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(245, 100, 0, 0.1);
}

.guarantee-wrapper::after {
    content: '100% SINCERE';
    position: absolute;
    top: 40px;
    right: -20px;
    background: var(--primary);
    color: white;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    transform: rotate(5deg);
    box-shadow: 0 10px 20px rgba(245, 100, 0, 0.3);
    z-index: 5;
}

.guarantee-image {
    margin-bottom: 40px;
    display: inline-block;
}

.guarantee-image img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--accent-tint);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.1);
}

.stars {
    background: #FFD700;
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.intro-text {
    font-size: 1.4rem;
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 50px;
    font-weight: 500;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.promise-box {
    background: #F0F9FF; /* Very light blue */
    padding: 80px 60px;
    border-radius: 40px;
    border: 2px dashed rgba(37, 99, 235, 0.3);
    position: relative;
    box-shadow: inset 0 0 40px rgba(37, 99, 235, 0.05);
}

.promise-label {
    display: block;
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.promise-text {
    font-size: 1.4rem;
    color: var(--secondary);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 30px;
}

.signature-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary);
    font-style: italic;
}

.promise-text strong {
    color: var(--primary);
    font-weight: 900;
}

/* Video Introduction Block */
.green-highlight-bar {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    padding: 25px 0;
    text-align: center;
    position: relative;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4);
    z-index: 5;
}

.green-highlight-bar p {
    font-size: 1.7rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

.green-highlight-bar span {
    color: #FBBF24; /* Gold accent */
    font-weight: 900;
}

.video-intro-block {
    margin: 0 auto 100px;
    max-width: 1100px;
    background: white;
    border-radius: 40px;
    padding: 40px 60px 60px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
    background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
    background-size: 30px 30px;
    border: 1px solid #F1F5F9;
}

.video-split-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    padding: 30px;
    border-radius: 40px;
    box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    overflow: hidden;
}

.video-column {
    flex: 1;
    padding: 10px;
}

.video-vertical-divider {
    width: 2px;
    height: 300px;
    background: linear-gradient(to bottom, transparent, #E2E8F0, transparent);
    margin: 0 30px;
}

.shipping-slider-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

.shipping-slider-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.shipping-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: shippingFade 25s infinite;
}

.shipping-slide:nth-child(1) { animation-delay: 0s; }
.shipping-slide:nth-child(2) { animation-delay: 5s; }
.shipping-slide:nth-child(3) { animation-delay: 10s; }
.shipping-slide:nth-child(4) { animation-delay: 15s; }
.shipping-slide:nth-child(5) { animation-delay: 20s; }

@keyframes shippingFade {
    0% { opacity: 0; transform: scale(1.05); }
    4%, 20% { opacity: 1; transform: scale(1); }
    24%, 100% { opacity: 0; }
}

.video-aspect-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 25px;
    background: #000;
}

.video-aspect-ratio iframe,
.video-aspect-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.huge-ticker-section {
    padding: 80px 0;
    background: #FFFFFF;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.ticker-track {
    display: flex;
    animation: ticker-move 30s linear infinite;
}

.ticker-text {
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: 900;
    color: var(--secondary);
    padding: 0 40px;
    letter-spacing: -0.04em;
    line-height: 1;
}

@keyframes ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Premium Footer */
.premium-footer {
    background: #0B0F19;
    color: #FFFFFF;
    padding: 80px 0 0 0;
    text-align: center;
}

.footer-logo {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -1px;
    margin-bottom: 5px;
    text-decoration: none;
}

.footer-logo span {
    color: var(--cta);
}

.footer-main-tagline {
    color: #6E8FAF;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    letter-spacing: 0.15em;
    margin: 45px auto;
    width: max-content;
    max-width: 95vw;
    white-space: nowrap;
    opacity: 0.75;
}

.footer-signature .name {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.8rem;
    color: #FF5C00;
    font-weight: 900;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 0;
    background: #080B12;
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Billion Opportunity Section */
.billion-opportunity {
    padding: 120px 0;
    background: #f8fafc;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.stat-card {
    background: white;
    padding: 50px 30px;
    border-radius: 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

.stat-value {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
    font-weight: 900;
    color: #1E40AF;
}

/* Market CTA Bridge */
.market-cta-bridge {
    padding: 120px 0;
    background: var(--secondary);
    color: white;
    text-align: center;
}

.cta-question {
    font-size: 2.5rem;
    font-weight: 900;
}

.cta-question span {
    color: var(--cta);
}

/* Unified Toolbox & Success Proof Styles */
.toolbox-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
}

.toolbox-items-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .toolbox-items-stack {
        grid-template-columns: 1fr;
    }
}

.toolbox-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.toolbox-item:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-5px);
}

/* Success Proof Gallery - Premium Restoration */
.shipping-gallery-section {
    padding: 120px 0;
    background: #f8fafc;
    width: 100%;
}

.gallery-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-header h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--secondary);
    margin-top: 15px;
    line-height: 1.2;
}

.gallery-header h2 span {
    color: var(--primary);
    display: block;
}

.shipping-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px; /* Base unit height for Mosaic blocks */
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.shipping-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    transition: all 0.5s ease;
}

.shipping-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Algorithm Shape Support (Controlled via JS) */
.shipping-item.tall {
    grid-row: span 2;
}

.shipping-item.wide {
    grid-column: span 2;
}

.shipping-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
}

.shipping-item:hover img {
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .shipping-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
}

@media (max-width: 480px) {
    .shipping-grid {
        gap: 10px;
    }
}