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

:root {
    --primary-color: #f4c542;
    --secondary-color: #0a0e27;
    --accent-color: #ff8c42;
    --text-light: #ffffff;
    --text-dark: #2d2d2d;
    --bg-dark: #0a0e27;
    --bg-light: #f8f8f8;
    --cosmic-blue: #1e3a8a;
    --cosmic-purple: #6b21a8;
    --gradient-1: linear-gradient(135deg, #1e3a8a 0%, #6b21a8 100%);
    --gradient-2: linear-gradient(135deg, #f4c542 0%, #ff8c42 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --shadow-1: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-2: 0 20px 60px rgba(0, 0, 0, 0.2);
    --golden-glow: 0 0 30px rgba(244, 197, 66, 0.6);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(15, 15, 30, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

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

.cta-btn {
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
}

.cta-btn::after {
    display: none;
}

.cta-btn:hover {
    background: var(--accent-color);
    color: var(--text-light);
    transform: translateY(-2px);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-light);
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 30%, #6b21a8 70%, #0a0e27 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 80px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(244, 197, 66, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(107, 33, 168, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: float 10s infinite, twinkle 3s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-100px) translateX(50px);
    }
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 4.5rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-title .word {
    display: inline-block;
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
}

.hero-title .word:nth-child(1) {
    animation-delay: 0.1s;
}

.hero-title .word:nth-child(2) {
    animation-delay: 0.3s;
}

.hero-title .word:nth-child(3) {
    animation-delay: 0.5s;
    color: var(--primary-color);
    text-shadow: var(--golden-glow);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-tagline-top {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-style: italic;
    font-weight: 300;
    animation: fadeInUp 1s ease 0.2s forwards;
    opacity: 0;
    text-shadow: 0 2px 10px rgba(244, 197, 66, 0.3);
}

.hero-subtitle {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: fadeInUp 1s ease 0.7s forwards;
    opacity: 0;
}

.hero-author {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
    animation: fadeInUp 1s ease 0.9s forwards;
    opacity: 0;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s ease 1.1s forwards;
    opacity: 0;
}

.btn {
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
}

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

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-3px);
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

/* Book 3D Animation */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: float-book 4s ease-in-out infinite;
}

@keyframes float-book {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.02);
    }
}

.book-3d {
    width: 380px;
    height: 550px;
    position: relative;
    transform-style: preserve-3d;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

/* Container for animated overlays on book cover */
.book-cover-animations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    border-radius: 12px;
    overflow: hidden;
}

/* Camera light effect (bottom right where actual camera is) */
.camera-light {
    position: absolute;
    bottom: 8%;
    right: 12%;
    width: 60px;
    height: 60px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 1) 0%, transparent 20%),
        radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(255, 100, 0, 0.8) 40%, transparent 70%);
    border-radius: 50%;
    animation: camera-recording 0.8s ease-in-out infinite;
    z-index: 100;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.9), 0 0 50px rgba(255, 100, 0, 0.6);
}

@keyframes camera-recording {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* Camera lens flare - projector beam */
.camera-flare {
    position: absolute;
    bottom: 8%;
    right: 12%;
    width: 120px;
    height: 120px;
    background: conic-gradient(
        from 45deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 200, 0.8) 20deg,
        transparent 40deg,
        rgba(255, 255, 150, 0.6) 60deg,
        transparent 80deg,
        rgba(255, 255, 200, 0.7) 100deg,
        transparent 120deg
    );
    animation: projector-beam 4s linear infinite;
    transform-origin: center center;
    z-index: 99;
}

@keyframes projector-beam {
    0% {
        transform: rotate(0deg);
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.8;
    }
}

/* Film projector light rays */
.light-ray {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 200, 50, 0.1) 30deg,
        transparent 60deg,
        rgba(255, 200, 50, 0.15) 90deg,
        transparent 120deg,
        rgba(255, 200, 50, 0.1) 150deg,
        transparent 180deg
    );
    transform: translate(-50%, -50%);
    animation: rotate-rays 15s linear infinite;
    filter: blur(2px);
}

@keyframes rotate-rays {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Kids playing animation (top left in the film frames) */
.kids-bounce {
    position: absolute;
    top: 20%;
    left: 18%;
    width: 40px;
    height: 40px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, transparent 20%),
        radial-gradient(circle, rgba(100, 200, 255, 1) 0%, rgba(50, 150, 255, 0.8) 60%, transparent 100%);
    border-radius: 50%;
    animation: kids-playing 0.8s ease-in-out infinite;
    z-index: 100;
    box-shadow: 0 0 20px rgba(100, 200, 255, 1), 0 0 40px rgba(50, 150, 255, 0.8);
}

@keyframes kids-playing {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-15px) scale(1.3);
        opacity: 1;
    }
}

/* Second kid bouncing with delay */
.kids-bounce-2 {
    position: absolute;
    top: 20%;
    left: 28%;
    width: 35px;
    height: 35px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, transparent 20%),
        radial-gradient(circle, rgba(150, 220, 255, 1) 0%, rgba(100, 180, 255, 0.8) 60%, transparent 100%);
    border-radius: 50%;
    animation: kids-playing 0.8s ease-in-out infinite 0.4s;
    z-index: 100;
    box-shadow: 0 0 20px rgba(150, 220, 255, 1), 0 0 40px rgba(100, 180, 255, 0.8);
}

/* Couple romantic glow (center in heart/kissing silhouette) */
.couple-glow {
    position: absolute;
    top: 25%;
    left: 45%;
    width: 70px;
    height: 80px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 1) 0%, transparent 15%),
        radial-gradient(ellipse, rgba(255, 0, 100, 1) 0%, rgba(255, 50, 150, 0.9) 50%, rgba(255, 100, 180, 0.6) 80%, transparent 100%);
    animation: romantic-pulse 1.5s ease-in-out infinite;
    z-index: 100;
    box-shadow: 0 0 30px rgba(255, 0, 100, 1), 0 0 60px rgba(255, 50, 150, 0.8);
    border-radius: 50%;
}

@keyframes romantic-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* Heart particles floating from couple */
.heart-particle {
    position: absolute;
    top: 30%;
    left: 46%;
    font-size: 16px;
    color: rgba(255, 0, 100, 1);
    animation: float-heart 2.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 0, 100, 1), 0 0 20px rgba(255, 50, 150, 1);
    z-index: 101;
}

.heart-particle:nth-child(6) {
    left: 49%;
    font-size: 14px;
    animation-delay: 0.8s;
}

.heart-particle:nth-child(7) {
    left: 43%;
    font-size: 15px;
    animation-delay: 1.6s;
}

@keyframes float-heart {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.3) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) translateX(10px) scale(0.8) rotate(20deg);
    }
}

/* Golden path animation (the winding road from bottom) */
.golden-path-shimmer {
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 100px;
    height: 280px;
    background: linear-gradient(
        to top,
        rgba(255, 200, 0, 1) 0%,
        rgba(255, 220, 50, 0.9) 30%,
        rgba(255, 180, 0, 0.7) 60%,
        rgba(255, 150, 0, 0.4) 80%,
        transparent 100%
    );
    transform: translateX(-50%);
    animation: path-shimmer 1.5s ease-in-out infinite;
    clip-path: polygon(35% 100%, 40% 70%, 43% 50%, 45% 30%, 48% 15%, 52% 15%, 55% 30%, 57% 50%, 60% 70%, 65% 100%);
    z-index: 100;
    box-shadow: 0 0 40px rgba(255, 200, 0, 0.8);
}

@keyframes path-shimmer {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Film strip sparkles */
.film-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(200, 200, 255, 1);
    animation: sparkle-twinkle 1.5s ease-in-out infinite;
    z-index: 100;
}

.film-sparkle:nth-child(10) {
    top: 20%;
    left: 25%;
    animation-delay: 0s;
}

.film-sparkle:nth-child(11) {
    top: 45%;
    right: 15%;
    animation-delay: 1s;
}

.film-sparkle:nth-child(12) {
    top: 70%;
    left: 30%;
    animation-delay: 2s;
}

.film-sparkle:nth-child(13) {
    top: 15%;
    right: 20%;
    animation-delay: 1.5s;
}

.film-sparkle:nth-child(14) {
    top: 60%;
    right: 25%;
    animation-delay: 2.5s;
}

@keyframes sparkle-twinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.3);
    }
}

/* Hero silhouette glow (bottom center figure standing) */
.hero-glow {
    position: absolute;
    bottom: 18%;
    left: 50%;
    width: 60px;
    height: 80px;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 1) 0%, transparent 25%),
        radial-gradient(ellipse, rgba(255, 200, 0, 1) 0%, rgba(255, 215, 50, 0.9) 50%, rgba(255, 180, 0, 0.6) 80%, transparent 100%);
    transform: translateX(-50%);
    animation: hero-power 1.2s ease-in-out infinite;
    z-index: 100;
    box-shadow: 0 0 40px rgba(255, 200, 0, 1), 0 0 70px rgba(255, 215, 50, 0.8);
}

@keyframes hero-power {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.3);
    }
}

/* Magical particles in the sky */
.magic-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(244, 197, 66, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(244, 197, 66, 0.8);
}

.magic-particle:nth-child(15) {
    top: 15%;
    left: 20%;
    animation: float-magic 5s ease-in-out infinite;
}

.magic-particle:nth-child(16) {
    top: 25%;
    left: 70%;
    animation: float-magic 6s ease-in-out infinite 1s;
}

.magic-particle:nth-child(17) {
    top: 18%;
    left: 50%;
    animation: float-magic 5.5s ease-in-out infinite 0.5s;
}

@keyframes float-magic {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0) translateX(0);
    }
    25% {
        opacity: 1;
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-10px) translateX(-5px);
    }
    75% {
        opacity: 1;
        transform: translateY(-30px) translateX(15px);
    }
}

.book-cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(244, 197, 66, 0.4),
                0 0 100px rgba(107, 33, 168, 0.3);
    transition: all 0.5s ease;
    animation: book-glow-pulse 3s ease-in-out infinite;
    position: relative;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
}

/* Simple glowing pulse animation for the whole book */
@keyframes book-glow-pulse {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 20px rgba(244, 197, 66, 0.3));
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7),
                    0 0 60px rgba(244, 197, 66, 0.4),
                    0 0 100px rgba(107, 33, 168, 0.3);
    }
    50% {
        filter: brightness(1.15) drop-shadow(0 0 40px rgba(244, 197, 66, 0.6));
        box-shadow: 0 35px 90px rgba(0, 0, 0, 0.8),
                    0 0 80px rgba(244, 197, 66, 0.6),
                    0 0 120px rgba(107, 33, 168, 0.5);
    }
}

/* Fallback styled book cover if image not loaded */
.book-cover-fallback {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(244, 197, 66, 0.3),
                0 0 100px rgba(107, 33, 168, 0.2);
    animation: book-glow 4s ease-in-out infinite;
}

.cover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0e27 0%, #1e3a8a 20%, #3a4fa8 40%, #6b21a8 60%, #8b3ac8 80%, #0a0e27 100%);
    z-index: 1;
}

.cover-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 20%, rgba(244, 197, 66, 0.3) 0%, transparent 30%),
        radial-gradient(circle at 70% 80%, rgba(255, 140, 66, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(107, 33, 168, 0.4) 0%, transparent 50%);
    animation: pulse-glow 6s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Stars on cover */
.cover-bg::after {
    content: '✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★ ✦ ✧ ★';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    font-size: 1.5rem;
    opacity: 0.3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: space-around;
    padding: 20px;
    animation: twinkle 3s ease-in-out infinite;
}

.cover-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    text-align: center;
}

.cover-tagline {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    line-height: 1.3;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: fadeIn 2s ease-in-out infinite alternate;
}

.cover-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.cover-a {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: white;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.cover-heroes {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: white;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.cover-journey {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--primary-color);
    font-weight: 900;
    letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(244, 197, 66, 0.8),
                 0 0 60px rgba(244, 197, 66, 0.5);
    animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(244, 197, 66, 0.6),
                     0 0 40px rgba(244, 197, 66, 0.4);
    }
    50% {
        text-shadow: 0 0 40px rgba(244, 197, 66, 1),
                     0 0 80px rgba(244, 197, 66, 0.6),
                     0 0 120px rgba(244, 197, 66, 0.4);
    }
}

.cover-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(244, 197, 66, 0.6);
    margin-top: 10px;
}

.cover-icon {
    font-size: 3rem;
    margin: 15px 0;
    animation: rotate-slow 20s linear infinite;
    filter: drop-shadow(0 0 20px rgba(244, 197, 66, 0.6));
}

@keyframes rotate-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cover-author {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(244, 197, 66, 0.3);
    padding-top: 15px;
    width: 80%;
}

/* Film strip borders for fallback */
.book-cover-fallback::before,
.book-cover-fallback::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(244, 197, 66, 0.4) 0px,
        rgba(244, 197, 66, 0.4) 18px,
        rgba(10, 14, 39, 0.6) 18px,
        rgba(10, 14, 39, 0.6) 23px
    );
    z-index: 3;
}

.book-cover-fallback::before {
    left: 0;
    border-right: 2px solid rgba(244, 197, 66, 0.5);
}

.book-cover-fallback::after {
    right: 0;
    border-left: 2px solid rgba(244, 197, 66, 0.5);
}


.book-cover-img:hover {
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 0 50px rgba(244, 197, 66, 0.8));
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9),
                0 0 100px rgba(244, 197, 66, 0.7),
                0 0 150px rgba(255, 140, 66, 0.5);
}

/* 3D perspective for book */
.book-3d:hover .book-cover-img {
    animation: book-spin 1s ease-in-out;
}

@keyframes book-spin {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(10deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

/* Film strip effect overlay */
.book-3d::before,
.book-3d::after {
    content: '';
    position: absolute;
    left: -20px;
    width: 15px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(244, 197, 66, 0.2) 0px,
        rgba(244, 197, 66, 0.2) 20px,
        transparent 20px,
        transparent 25px
    );
    border: 2px solid rgba(244, 197, 66, 0.3);
    border-radius: 3px;
    z-index: -1;
}

.book-3d::after {
    left: auto;
    right: -20px;
}

/* Light rays effect */
.hero-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(244, 197, 66, 0.1) 45deg,
        transparent 90deg,
        rgba(244, 197, 66, 0.1) 135deg,
        transparent 180deg,
        rgba(244, 197, 66, 0.1) 225deg,
        transparent 270deg,
        rgba(244, 197, 66, 0.1) 315deg,
        transparent 360deg
    );
    transform: translate(-50%, -50%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    margin: 0 auto 10px;
    position: relative;
}

.wheel {
    width: 3px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2s infinite;
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

.scroll-indicator p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Section Styles */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.about-section .section-header {
    margin-bottom: 2rem;
}

.title-underline {
    width: 100px;
    height: 4px;
    background: var(--primary-color);
    margin: 0 auto;
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-top: 1rem;
}

/* About Section */
.about-section {
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
    padding-top: 60px;
}

.about-content-centered {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    min-height: 600px;
}

.chapter-icons {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    pointer-events: none;
    z-index: 10;
}

.chapter-icon {
    font-size: 3rem;
    opacity: 0.6;
    animation: float-icon 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

.chapter-icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

.chapter-icon.icon-1 { animation-delay: 0s; }
.chapter-icon.icon-2 { animation-delay: 0.2s; }
.chapter-icon.icon-3 { animation-delay: 0.4s; }
.chapter-icon.icon-4 { animation-delay: 0.6s; }
.chapter-icon.icon-5 { animation-delay: 0.8s; }
.chapter-icon.icon-6 { animation-delay: 1s; }
.chapter-icon.icon-7 { animation-delay: 1.2s; }
.chapter-icon.icon-8 { animation-delay: 1.4s; }
.chapter-icon.icon-9 { animation-delay: 1.6s; }
.chapter-icon.icon-10 { animation-delay: 1.8s; }
.chapter-icon.icon-11 { animation-delay: 2s; }

@keyframes float-icon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.about-text-center {
    text-align: center;
    position: relative;
    z-index: 5;
    background: transparent;
    padding: 0;
}

.about-text-center .lead {
    font-size: 1.6rem;
    color: #b8860b;
    margin-bottom: 2rem;
    font-weight: 600;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.about-text-center p {
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
    color: #444;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    transition: transform 0.3s ease;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: #997a00;
    font-family: 'Cinzel', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: #333;
    margin-top: 1rem;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}


/* Journey Section */
.journey-section {
    background: var(--secondary-color);
    color: var(--text-light);
}

.journey-section .section-title {
    color: var(--text-light);
}

.journey-section .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.journey-timeline {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 3rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    transform: translateX(-50%);
}

.journey-stage {
    position: relative;
    height: 120px;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    display: flex;
    align-items: center;
}

.journey-stage.visible {
    opacity: 1;
    transform: translateY(0);
}

.stage-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    z-index: 2;
}

/* Odd stages (1, 3, 5) - text on RIGHT */
.journey-stage:nth-child(odd) .stage-content {
    margin-left: auto;
    margin-right: 0;
    width: 45%;
    text-align: left;
    padding-left: 1.5rem;
}

/* Even stages (2, 4, 6) - text on LEFT */
.journey-stage:nth-child(even) .stage-content {
    margin-left: 0;
    margin-right: auto;
    width: 45%;
    text-align: right;
    padding-right: 1.5rem;
}

.stage-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.3;
}

.stage-content p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    font-size: 1rem;
}

/* Preview Section */
.preview-section {
    background: var(--bg-light);
}

.preview-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.preview-text {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.preview-text .btn {
    margin-top: auto;
    align-self: center;
}

.quote {
    font-size: 1.8rem;
    font-style: italic;
    color: #b8860b;
    border-left: 4px solid var(--primary-color);
    padding-left: 2rem;
    margin-bottom: 2rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    text-shadow: 2px 2px 4px rgba(184, 134, 11, 0.3);
}

.preview-excerpt {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 1.5rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.preview-visual {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: relative;
}

.quote-card {
    background: white;
    padding: 1.2rem 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    font-style: italic;
    color: #333;
    transition: all 0.3s ease;
    font-size: 1.15rem;
    line-height: 1.5;
    font-family: 'Georgia', 'Times New Roman', serif;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.quote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
}

.quote-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.card-1 {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
    border-left: 5px solid #ff9a56;
}

.card-1::before {
    background: #ff9a56;
}

.card-2 {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce5ff 100%);
    border-left: 5px solid #4facfe;
}

.card-2::before {
    background: #4facfe;
}

.card-3 {
    background: linear-gradient(135deg, #f5e6ff 0%, #e6ccff 100%);
    border-left: 5px solid #a855f7;
}

.card-3::before {
    background: #a855f7;
}

.card-4 {
    background: linear-gradient(135deg, #e6ffe6 0%, #ccffcc 100%);
    border-left: 5px solid #4ade80;
}

.card-4::before {
    background: #4ade80;
}

/* Author Section */
.author-section {
    background: var(--secondary-color);
    color: var(--text-light);
}

.author-section .section-title {
    color: var(--text-light);
}

.author-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.author-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.author-image-link {
    display: block;
    transition: all 0.4s ease;
}

.author-image-link:hover {
    transform: scale(1.05);
}

.author-image-link:hover .author-image img,
.author-image-link:hover .author-image .image-placeholder {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5),
                0 0 60px rgba(244, 197, 66, 0.5);
}

.author-image img,
.author-image .image-placeholder {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(244, 197, 66, 0.3);
    border: 4px solid var(--primary-color);
    transition: all 0.4s ease;
    cursor: pointer;
}

.linkedin-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    border: 3px solid #0077b5;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 119, 181, 0.4),
                0 0 40px rgba(0, 119, 181, 0.2);
}

.linkedin-badge::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(45deg, #0077b5, #00a0dc) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glow-rotate 3s linear infinite;
}

@keyframes glow-rotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.6;
    }
}

.linkedin-badge:hover {
    transform: scale(1.15);
    background: #ffffff;
    box-shadow: 0 0 30px rgba(0, 119, 181, 0.6),
                0 0 60px rgba(0, 119, 181, 0.4),
                0 0 90px rgba(0, 119, 181, 0.2);
}

.linkedin-badge svg {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0, 119, 181, 0.4));
    transition: all 0.3s ease;
}

.linkedin-badge:hover svg {
    filter: drop-shadow(0 6px 16px rgba(0, 119, 181, 0.8));
    transform: scale(1.1);
}

.author-image .image-placeholder {
    background: linear-gradient(135deg, #1e3a8a 0%, #6b21a8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.author-initial {
    font-size: 6rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Cinzel', serif;
    text-shadow: 0 4px 20px rgba(244, 197, 66, 0.5);
}

.author-bio h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.author-bio p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.2rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}


/* Testimonials Section */
.testimonials-section {
    background: var(--bg-light);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    transition: transform 0.3s ease;
}

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

.stars {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.testimonial-card p {
    font-style: italic;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.reviewer {
    font-weight: 600;
    color: var(--secondary-color);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 50%, #6b21a8 100%);
    text-align: center;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(244, 197, 66, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 140, 66, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.cta-content > p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.kindle-image-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
}

.kindle-image {
    max-width: 200px;
    height: auto;
}

.buy-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cta-formats {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
}

/* Footer */
.footer {
    background: var(--secondary-color);
    color: var(--text-light);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

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

.footer-section h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-family: 'Cinzel', serif;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.footer-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: normal;
}

.footer-link:hover {
    color: #f4c542;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.footer-tagline {
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    white-space: nowrap;
    padding-bottom: 1rem;
    position: relative;
}

.footer-tagline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.footer-credit {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5rem;
    white-space: nowrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Navigation */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: rgba(15, 15, 30, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem;
    }

    .nav-menu.active {
        left: 0;
    }

    /* Hero Section */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0 1rem;
        gap: 2rem;
        display: flex;
        flex-direction: column;
    }

    .hero-image {
        order: -1;
        margin-top: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-title .word {
        display: block;
    }

    .hero-tagline-top {
        font-size: 1.1rem;
        color: white;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    .hero-author {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: row;
        gap: 0.8rem;
        flex-wrap: wrap;
        margin-bottom: 4rem;
    }

    .hero-buttons .btn {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        flex: 1 1 45%;
        min-width: 140px;
        font-weight: 600;
    }

    .book-3d {
        width: 280px;
        height: 400px;
    }

    /* Section Titles */
    .section-title {
        font-size: 2rem;
    }

    /* About Section */
    .about-content-centered {
        padding: 0 1rem;
    }

    .about-text-center {
        display: flex;
        flex-direction: column;
    }

    .about-text-center .lead {
        font-size: 1.2rem;
        white-space: normal;
        order: 2;
        line-height: 1.5;
    }

    .about-text-center p {
        font-size: 1.1rem;
        line-height: 2;
        order: 3;
    }

    .about-text-center .stats {
        order: 4;
    }


    .chapter-icon {
        font-size: 2rem;
        flex-shrink: 0;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        justify-content: center;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .stat-item {
        padding: 1rem 0.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    /* Journey Timeline */
    .journey-timeline {
        padding: 0 1rem;
    }

    .timeline-line {
        display: none;
    }

    .journey-stage {
        padding: 1.5rem 0;
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 1rem;
        height: auto;
    }

    /* Odd stages - number on RIGHT */
    .journey-stage:nth-child(odd) {
        grid-template-columns: 1fr 60px;
    }

    .journey-stage:nth-child(odd) .stage-icon {
        order: 2;
    }

    .journey-stage:nth-child(odd) .stage-content {
        order: 1;
        text-align: right;
    }

    /* Even stages - number on LEFT */
    .journey-stage:nth-child(even) {
        grid-template-columns: 60px 1fr;
    }

    .stage-icon {
        position: relative;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        transform: none;
        left: auto;
        flex-shrink: 0;
    }

    .stage-icon::before,
    .stage-icon::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: var(--primary-color);
    }

    .stage-icon::before {
        top: -20px;
    }

    .stage-icon::after {
        bottom: -20px;
    }

    .journey-stage:first-child .stage-icon::before {
        display: none;
    }

    .stage-content {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left;
    }

    .journey-stage:nth-child(odd) .stage-content {
        text-align: left;
    }

    .stage-content h3 {
        font-size: 1.3rem;
    }

    .stage-content p {
        font-size: 1.05rem;
        line-height: 1.8;
    }

    /* Preview Section */
    .preview-content {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    .quote {
        font-size: 1.4rem;
        padding-left: 1.5rem;
        border-left-width: 3px;
    }

    .preview-excerpt {
        font-size: 1.1rem;
        line-height: 2;
    }

    .preview-visual {
        gap: 1rem;
    }

    .quote-card {
        font-size: 1rem;
        padding: 1rem 1.5rem;
        white-space: normal;
    }

    /* Author Section */
    .author-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .author-image-wrapper {
        margin: 0 auto;
    }

    .author-image img,
    .author-image .image-placeholder {
        width: 220px;
        height: 220px;
    }

    .linkedin-badge {
        width: 60px;
        height: 60px;
    }

    .linkedin-badge svg {
        width: 35px;
        height: 35px;
    }

    .author-bio h3 {
        font-size: 1.5rem;
    }

    .author-bio p {
        font-size: 1.1rem;
        line-height: 2;
    }

    /* Testimonials */
    .testimonials-grid {
        display: flex;
        overflow-x: auto;
        gap: 0;
        padding: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        padding: 2rem 1.5rem;
        min-width: 100%;
        max-width: 100%;
        flex-shrink: 0;
        scroll-snap-align: center;
        margin: 0;
        box-sizing: border-box;
    }

    .testimonial-card p {
        font-size: 1rem;
        line-height: 1.6;
        word-wrap: break-word;
        white-space: normal;
    }

    .stars {
        font-size: 1.3rem;
    }

    /* CTA Section */
    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-content > p {
        font-size: 1.15rem;
        line-height: 1.8;
    }

    .kindle-image {
        max-width: 150px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .buy-buttons {
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .btn-large {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        width: auto;
        min-width: 110px;
        flex: 1;
    }

    .buy-buttons .btn-large {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .book-3d {
        width: 240px;
        height: 340px;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 5rem;
    }

    .hero-buttons .btn {
        flex: 1 1 45%;
        min-width: 130px;
        font-size: 1rem;
        padding: 1rem 1.2rem;
        font-weight: 600;
    }

    .about-text-center .lead {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .chapter-icons {
        gap: 0.8rem;
    }

    .chapter-icon {
        font-size: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .quote {
        font-size: 1.2rem;
    }

    .author-image img,
    .author-image .image-placeholder {
        width: 180px;
        height: 180px;
    }

    .linkedin-badge {
        width: 50px;
        height: 50px;
    }

    .linkedin-badge svg {
        width: 28px;
        height: 28px;
    }

    .cta-content h2 {
        font-size: 1.7rem;
    }
}

/* Animations */
.fade-in {
    animation: fadeIn 1s ease;
}

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

.slide-up {
    animation: slideUp 0.6s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}