/* CRO-Optimized Global Styles */

:root {
    /* Primary Palette */
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-light: #818cf8;

    /* Accent Colors */
    --accent: #10b981;
    --accent-dark: #059669;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Neutrals */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-600: #475569;
    --slate-400: #94a3b8;
    --slate-200: #e2e8f0;
    --slate-50: #f8fafc;

    /* Typography */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-heading: var(--slate-900);
    --text-body: var(--slate-600);
}

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

* {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

/* Typography Scale */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--text-heading);
    line-height: 1.1;
}

p {
    color: var(--text-body);
    line-height: 1.65;
    text-wrap: pretty;
}

/* Focus States - Accessibility */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Button Transitions */
button {
    transition: all 200ms ease;
    cursor: pointer;
}

button:active {
    transform: scale(0.98);
}

/* Smooth Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes shine {
    to {
        transform: translateX(200%) skewX(-20deg);
    }
}

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.group:hover .group-hover\:animate-shine {
    animation: shine 0.75s ease-in-out;
}

/* Gamification Animations */
@keyframes pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes celebrate {

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

    50% {
        transform: scale(1.02);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@keyframes select {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

.animate-pop {
    animation: pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.animate-celebrate {
    animation: celebrate 0.4s ease-in-out;
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

.animate-select {
    animation: select 0.2s ease-in-out;
}

/* Marquee animation for mobile social proof */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.animate-marquee {
    animation: marquee 15s linear infinite;
}

@media (min-width: 768px) {
    .animate-marquee {
        animation: none;
    }
}

@keyframes slide-up-mobile {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.animate-slide-up-mobile {
    animation: slide-up-mobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
    animation: fade-in-up 0.3s ease-out forwards;
}

/* Navigation Styles */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--slate-200);
}

/* Sticky Buy Bar */
.sticky-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--slate-200);
    padding: 12px 16px;
    z-index: 40;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.sticky-buy.show {
    transform: translateY(0);
}

/* Scrollbar Utilities */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.no-scrollbar,
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ===================== GLASSMORPHISM SYSTEM ===================== */

/* Light glass card — used for feature cards, bonus boxes, trust signals */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    transition: all 250ms ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Dark glass — for dark-background sections */
.glass-card-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Section glass — large section backgrounds */
.glass-section {
    background: rgba(248, 250, 252, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tier card glass — specific to pricing tier cards */
.glass-tier {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-tier:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);
    transform: translateY(-4px);
}

/* Lead capture form glass */
.glass-form {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
}

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-light), #a78bfa, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Soft glow effect */
.glow-soft {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ─── SCROLL SNAP CAROUSEL ──────────────────── */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-center {
    scroll-snap-align: center;
}

.snap-mandatory {
    scroll-snap-type: x mandatory;
}

/* ─── LINE CLAMP ────────────────────────────── */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ─── TOAST NOTIFICATION ────────────────────── */
.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 9999;
    min-width: 280px;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    background: #059669;
    color: white;
}

.toast.error {
    background: #dc2626;
    color: white;
}

.toast.info {
    background: #4f46e5;
    color: white;
}/* � � � � � �  3D BOOK CAROUSEL � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �  */

.book-scene {

    perspective: 2000px;

    position: relative;

    width: 260px;

    height: 380px;

    margin: 0 auto;

    z-index: 10;

}



.book-carousel {

    width: 100%;

    height: 100%;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

}



/* Base Book Shape */

.book-3d {

    width: 100%;

    height: 100%;

    position: absolute;

    transform-style: preserve-3d;

    transform: rotateY(-25deg) rotateX(10deg);

}



/* Faces */

.face {

    position: absolute;

    backface-visibility: hidden;

    /* optimization */

}



.face-front {

    width: 260px;

    height: 380px;

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    border-radius: 4px 12px 12px 4px;

    transform: translateZ(25px);

    box-shadow:

        inset 4px 0 10px rgba(0, 0, 0, 0.1),

        inset -1px 0 2px rgba(255, 255, 255, 0.1),

        10px 20px 40px rgba(0, 0, 0, 0.4);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    z-index: 2;

}



/* Texture/Lighting Overlay */

.face-front::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, transparent 4%, transparent 96%, rgba(0, 0, 0, 0.2) 100%);

    pointer-events: none;

}



.face-spine {

    width: 50px;

    height: 380px;

    background: #0f172a;

    /* Darker than cover */

    transform: rotateY(-90deg) translateZ(25px);

    border-radius: 4px 0 0 4px;

    box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

}



.spine-text {

    transform: rotate(90deg);

    color: #94a3b8;

    font-weight: 800;

    font-size: 14px;

    letter-spacing: 2px;

    white-space: nowrap;

}



.face-back {

    width: 260px;

    height: 380px;

    background: #1e293b;

    transform: rotateY(180deg) translateZ(25px);

    border-radius: 12px 4px 4px 12px;

}



.face-right {

    width: 50px;

    height: 380px;

    background: #f1f5f9;

    /* Pages color */

    transform: rotateY(90deg) translateZ(235px);

    box-shadow:

        inset 0 0 5px rgba(0, 0, 0, 0.1),

        inset 10px 0 20px rgba(0, 0, 0, 0.05);

    background-image: repeating-linear-gradient(to right, #e2e8f0 0px, #f8fafc 1px, #f1f5f9 2px);

}



.face-top {

    width: 260px;

    height: 50px;

    background: #f1f5f9;

    transform: rotateX(90deg) translateZ(25px);

    background-image: repeating-linear-gradient(to bottom, #e2e8f0 0px, #f8fafc 1px, #f1f5f9 2px);

}



.face-bottom {

    width: 260px;

    height: 50px;

    background: #f1f5f9;

    transform: rotateX(-90deg) translateZ(355px);

    background-image: repeating-linear-gradient(to bottom, #e2e8f0 0px, #f8fafc 1px, #f1f5f9 2px);

}



/* � � � � � �  SLIDE ANIMATIONS � � � � � �  */

/* Each slide is just changing the content of the .face-front or rotating the whole book */

/* We will use a class to switch 'modes' */



/* Mode 1: Cover (Default) - Front view, slight angle */

.book-carousel.mode-cover .book-3d {

    animation: floating-book 6s ease-in-out infinite;

}



/* Mode 2: Open Book (Quote) */

/* This requires a different structure. Instead of rotating the block, we might just replace the content */

/* User asked for "Static 3D Book Mockup", not necessarily a flipping animation. 

   So let's keep the SHAPE static, but fade the CONTENT on the face-front. */



.book-content-slide {

    position: absolute;

    inset: 0;

    padding: 24px;

    display: flex;

    flex-direction: column;

    backface-visibility: hidden;

    transition: opacity 0.5s ease;

    opacity: 0;

    /* Hidden by default */

}



.book-content-slide.active {

    opacity: 1;

}



/* Styles for specific slides */

.slide-cover {

    justify-content: space-between;

    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent);

    border: 2px solid rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    overflow: hidden;

}



.slide-quote {

    justify-content: center;

    background: white;

    color: #0f172a;

    padding: 30px;

    text-align: center;

    font-family: serif;

    /* Classic book feel */

}



.slide-sample {

    background: #fff;

    color: #334155;

    font-size: 10px;

    line-height: 1.6;

    overflow: hidden;

}



.slide-sample h4 {

    color: #0f172a;

    font-size: 14px;

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 2px solid #e2e8f0;

}



@keyframes floating-book {



    0%,

    100% {

        transform: rotateY(-25deg) rotateX(10deg) translateY(0);

    }



    50% {

        transform: rotateY(-20deg) rotateX(12deg) translateY(-10px);

    }

}



/* Responsive */

@media (min-width: 768px) {

    .book-scene {

        width: 320px;

        height: 460px;

    }



    .face-front,

    .face-back {

        width: 320px;

        height: 460px;

    }



    .face-spine,

    .face-right {

        height: 460px;

    }



    .face-top,

    .face-bottom {

        width: 320px;

    }



    .face-right {

        transform: rotateY(90deg) translateZ(295px);

    }



    /* 320 - 25 */

    .face-bottom {

        transform: rotateX(-90deg) translateZ(435px);

    }



    /* 460 - 25 */

}

/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   PRODUCT CAROUSEL - 3D BOOK MOCKUPS

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



.product-carousel {

    position: relative;

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

}



.carousel-container {

    position: relative;

    width: 100%;

    aspect-ratio: 3/4;

    overflow: hidden;

    border-radius: 16px;

}



.carousel-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 0.6s ease;

    pointer-events: none;

}



.carousel-slide.active {

    opacity: 1;

    pointer-events: auto;

}



/* Carousel Controls */

.carousel-indicators {

    display: flex;

    gap: 6px;

    justify-content: center;

    margin-top: 16px;

}



.carousel-indicator {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #cbd5e1;

    border: none;

    cursor: pointer;

    transition: all 0.3s;

}



.carousel-indicator.active {

    width: 24px;

    border-radius: 4px;

    background: #0f172a;

}



/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   3D BOOK MOCKUP TEMPLATES

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/* Template 1: Front Cover - Perspective Left */

.book-mockup-1 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

    padding: 40px;

}



.book-mockup-1 .book {

    width: 280px;

    height: 400px;

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    border-radius: 4px 12px 12px 4px;

    box-shadow:

        20px 20px 40px rgba(0, 0, 0, 0.3),

        inset 2px 0 4px rgba(255, 255, 255, 0.1);

    transform: perspective(800px) rotateY(-15deg);

    padding: 32px 24px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* Template 2: Angled Right with Spine */

.book-mockup-2 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);

    padding: 40px;

}



.book-mockup-2 .book {

    width: 300px;

    height: 420px;

    position: relative;

    transform: perspective(1000px) rotateY(20deg) rotateX(5deg);

}



.book-mockup-2 .book-cover {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);

    border-radius: 8px;

    box-shadow:

        -15px 15px 35px rgba(0, 0, 0, 0.4),

        inset -2px 0 4px rgba(255, 255, 255, 0.2);

    padding: 28px 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.book-mockup-2 .book-spine {

    position: absolute;

    left: -20px;

    top: 0;

    width: 20px;

    height: 100%;

    background: linear-gradient(90deg, #581c87 0%, #6b21a8 100%);

    box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.4);

}



/* Template 3: Open Book View */

.book-mockup-3 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);

    padding: 30px;

}



.book-mockup-3 .book {

    width: 100%;

    max-width: 450px;

    height: 320px;

    display: flex;

    gap: 4px;

    transform: perspective(1200px) rotateX(25deg);

}



.book-mockup-3 .page {

    flex: 1;

    background: #fffbf0;

    border-radius: 4px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    padding: 24px 20px;

    display: flex;

    flex-direction: column;

}



.book-mockup-3 .page-left {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

}



/* Template 4: Stack View (3 books) */

.book-mockup-4 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);

    padding: 50px;

    position: relative;

}



.book-mockup-4 .book-stack {

    position: relative;

    width: 260px;

    height: 360px;

}



.book-mockup-4 .stacked-book {

    position: absolute;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);

    border-radius: 6px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

    padding: 24px 20px;

}



.book-mockup-4 .stacked-book:nth-child(1) {

    transform: rotate(-3deg) translateY(8px);

    opacity: 0.4;

}



.book-mockup-4 .stacked-book:nth-child(2) {

    transform: rotate(2deg) translateY(4px);

    opacity: 0.6;

}



.book-mockup-4 .stacked-book:nth-child(3) {

    transform: rotate(0deg);

    z-index: 3;

}



/* Template 5: Isometric View */

.book-mockup-5 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);

    padding: 40px;

}



.book-mockup-5 .book {

    width: 280px;

    height: 380px;

    background: linear-gradient(135deg, #059669 0%, #047857 100%);

    border-radius: 8px;

    transform: perspective(800px) rotateY(-25deg) rotateX(15deg);

    box-shadow:

        25px 25px 50px rgba(0, 0, 0, 0.3),

        inset 2px 0 6px rgba(255, 255, 255, 0.15);

    padding: 28px 22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* Template 6: Quote Card Style */

.book-mockup-6 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #fef3c7 0%, #fde047 100%);

    padding: 40px;

}



.book-mockup-6 .quote-card {

    width: 320px;

    height: 420px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:

        0 20px 60px rgba(0, 0, 0, 0.15),

        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    padding: 40px 32px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    transform: perspective(800px) rotateY(5deg);

}



/* Template 7: Problem/Solution Split */

.book-mockup-7 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);

    padding: 40px;

}



.book-mockup-7 .book {

    width: 300px;

    height: 400px;

    background: linear-gradient(to right, #dc2626 50%, #16a34a 50%);

    border-radius: 10px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);

    transform: perspective(900px) rotateY(-10deg);

    display: flex;

}



.book-mockup-7 .split-left,

.book-mockup-7 .split-right {

    flex: 1;

    padding: 28px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* Template 8: Minimalist Flat */

.book-mockup-8 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);

    padding: 40px;

}



.book-mockup-8 .book {

    width: 300px;

    height: 420px;

    background: #4f46e5;

    border-radius: 16px;

    box-shadow: 0 25px 50px rgba(79, 70, 229, 0.4);

    padding: 32px 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* Template 9: Floating with Shadow */

.book-mockup-9 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);

    padding: 50px;

    position: relative;

}



.book-mockup-9 .book {

    width: 280px;

    height: 400px;

    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);

    border-radius: 10px;

    box-shadow:

        0 30px 60px rgba(2, 132, 199, 0.4),

        inset 2px 0 4px rgba(255, 255, 255, 0.2);

    padding: 30px 24px;

    transform: translateY(-10px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.book-mockup-9 .book-shadow {

    position: absolute;

    bottom: 30px;

    width: 250px;

    height: 30px;

    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);

    border-radius: 50%;

    filter: blur(10px);

}



/* Typography for all mockups */

.mockup-title {

    font-size: 24px;

    font-weight: 900;

    line-height: 1.2;

    color: #ffffff;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.mockup-subtitle {

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    opacity: 0.9;

    color: #ffffff;

}



.mockup-text {

    font-size: 14px;

    line-height: 1.6;

    color: #ffffff;

    opacity: 0.95;

}



.mockup-badge {

    display: inline-block;

    padding: 6px 12px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #ffffff;

}



/* Quote specific */

.quote-mark {

    font-size: 64px;

    font-family: Georgia, serif;

    color: #e0e7ff;

    line-height: 0.8;

}



.quote-text {

    font-size: 18px;

    font-style: italic;

    color: #1e293b;

    line-height: 1.6;

    font-family: Georgia, serif;

}



.quote-author {

    font-size: 11px;

    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    margin-top: 16px;

}

/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   PRODUCT CAROUSEL ��   Simple & Bulletproof

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



.hero-carousel {

    position: relative;

    width: 100%;

    max-width: 420px;

    margin: 0 auto;

}



.hero-carousel-track {

    position: relative;

    width: 100%;

    aspect-ratio: 3/4;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);

}



.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 0.7s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hero-slide.active {

    opacity: 1;

    z-index: 2;

}



.hero-slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* Dot indicators */

.hero-dots {

    display: flex;

    gap: 6px;

    justify-content: center;

    margin-top: 14px;

}



.hero-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #cbd5e1;

    border: none;

    cursor: pointer;

    padding: 0;

    transition: all 0.3s ease;

}



.hero-dot.active {

    width: 24px;

    border-radius: 100px;

    background: #1e293b;

}



/* � � � � � �  Slide Backgrounds � � � � � �  */

.slide-bg-dark {

    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);

    padding: 32px 28px;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

    width: 100%;

}



.slide-bg-cream {

    background: #fffbf0;

    padding: 40px 32px;

    color: #1e293b;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    height: 100%;

    width: 100%;

}



.slide-bg-gradient {

    padding: 32px 28px;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

    width: 100%;

}



.slide-bg-split {

    display: flex;

    height: 100%;

    width: 100%;

}



.slide-bg-split>div {

    flex: 1;

    padding: 28px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* � � � � � �  Mockup Book Shape (fake 3D) � � � � � �  */

.mockup-book {

    width: 220px;

    height: 310px;

    border-radius: 4px 12px 12px 4px;

    box-shadow:

        -6px 6px 0 #0f172a,

        -12px 12px 0 #1e293b,

        20px 30px 50px rgba(0, 0, 0, 0.3);

    padding: 24px 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

}



.mockup-book::before {

    content: '';

    position: absolute;

    left: -16px;

    top: 3px;

    width: 16px;

    height: calc(100% - 6px);

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05));

    border-radius: 4px 0 0 4px;

}



@media (min-width: 640px) {

    .mockup-book {

        width: 260px;

        height: 360px;

    }

}

/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   CINEMATIC 3D BOOK ENGINE

   High-fidelity, CSS-only 3D book mockups

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/* --- SCENE CONTAINER --- */

.cb-scene {

    width: 260px;

    height: 380px;

    margin: 40px auto;

    perspective: 1200px;

    position: relative;

    z-index: 10;

}



@media (min-width: 640px) {

    .cb-scene {

        width: 300px;

        height: 440px;

    }

}



/* --- THE BOOK OBJECT --- */

.cb-book {

    width: 100%;

    height: 100%;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

}



/* --- FACES --- */

.cb-face {

    position: absolute;

    backface-visibility: hidden;

    overflow: hidden;

}



/* Front Cover */

.cb-face-front {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    border-radius: 4px 12px 12px 4px;

    transform: translateZ(15px);

    box-shadow:

        inset 4px 0 10px rgba(0, 0, 0, 0.1),

        inset -1px 0 2px rgba(255, 255, 255, 0.1);

    display: flex;

    flex-direction: column;

    padding: 24px;

    color: white;

}



/* Back Cover */

.cb-face-back {

    width: 100%;

    height: 100%;

    background: #0f172a;

    border-radius: 4px 12px 12px 4px;

    transform: translateZ(-15px) rotateY(180deg);

}



/* Spine */

.cb-face-spine {

    width: 30px;

    height: 100%;

    background: linear-gradient(90deg, #334155 0%, #1e293b 40%, #0f172a 100%);

    transform: rotateY(-90deg) translateZ(15px);

    border-radius: 2px 0 0 2px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.cb-spine-text {

    transform: rotate(90deg);

    color: rgba(255, 255, 255, 0.7);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2em;

    white-space: nowrap;

    text-transform: uppercase;

}



/* Paper Edges (Right) */

.cb-face-right {

    width: 28px;

    height: 96%;

    top: 2%;

    background:

        linear-gradient(90deg, #fff 0%, #f1f5f9 20%, #cbd5e1 100%),

        repeating-linear-gradient(0deg, #f1f5f9 0px, #e2e8f0 1px, transparent 1px, transparent 3px);

    transform: rotateY(90deg) translateZ(284px);

    /* Adjust based on width */

    left: 0;

    /* Adjusted dynamically via JS usually, but here fixed approx */

    /* Wait, for a fixed width 300px book, translateZ is width/2 roughly? No. */

    /* Let's simplify: Standard 3D Box model */

}



/* Simplified 3D Box CSS for specific width */

.cb-book {

    /* Center origin */

    transform-origin: center center;

}



.cb-face-front {

    transform: translateZ(15px);

}



.cb-face-back {

    transform: translateZ(-15px) rotateY(180deg);

}



.cb-face-spine {

    width: 30px;

    left: -15px;

    transform: rotateY(-90deg);

}



.cb-face-right {

    width: 30px;

    right: -15px;

    background: #e2e8f0;

    transform: rotateY(90deg);

}



.cb-face-top {

    width: 100%;

    height: 30px;

    top: -15px;

    background: #e2e8f0;

    transform: rotateX(90deg);

}



.cb-face-bottom {

    width: 100%;

    height: 30px;

    bottom: -15px;

    background: #e2e8f0;

    transform: rotateX(-90deg);

}



/* --- VARIATIONS (State Classes) --- */



/* 1. FRONT VIEW (Classic) */

.cb-view-front .cb-book {

    transform: rotateY(0deg) rotateX(0deg);

}



/* Add hover effect */

.cb-view-front:hover .cb-book {

    transform: rotateY(-10deg) rotateX(5deg);

}



/* 2. ANGLED (Spine View) */

.cb-view-angled .cb-book {

    transform: rotateY(35deg) rotateX(5deg);

}



/* 3. OPEN BOOK (Complex Geometry) */

/* We swap the .cb-book for .cb-book-open */

.cb-book-open {

    width: 100%;

    height: 220px;

    position: relative;

    transform-style: preserve-3d;

    transform: rotateX(20deg);

    display: flex;

    justify-content: center;

    margin-top: 80px;

}



.cb-page-left,

.cb-page-right {

    width: 180px;

    height: 280px;

    background: #fffbf0;

    position: relative;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    padding: 24px;

    display: flex;

    flex-direction: column;

}



.cb-page-left {

    transform-origin: right center;

    transform: rotateY(-15deg);

    border-radius: 4px 0 0 4px;

    background: linear-gradient(90deg, #f8fafc 0%, #fffbf0 20%);

}



.cb-page-right {

    transform-origin: left center;

    transform: rotateY(15deg);

    border-radius: 0 4px 4px 0;

    background: linear-gradient(-90deg, #f8fafc 0%, #fffbf0 20%);

}



/* 4. FLOATING */

.cb-view-floating .cb-book {

    transform: rotateY(-25deg) rotateX(10deg) translateY(-20px);

    animation: cb-float 6s ease-in-out infinite;

}



@keyframes cb-float {



    0%,

    100% {

        transform: rotateY(-25deg) rotateX(10deg) translateY(-20px);

    }



    50% {

        transform: rotateY(-25deg) rotateX(10deg) translateY(-30px);

    }

}



/* --- DECORATIONS & ALERTS --- */

.cb-badge {

    position: absolute;

    top: -10px;

    right: -10px;

    background: #ef4444;

    color: white;

    font-weight: 800;

    font-size: 10px;

    padding: 4px 10px;

    border-radius: 20px;

    text-transform: uppercase;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);

    z-index: 20;

    transform: translateZ(20px);

}



.cb-shadow {

    position: absolute;

    bottom: -60px;

    left: 10%;

    width: 80%;

    height: 20px;

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, transparent 70%);

    transform: rotateX(90deg);

    filter: blur(10px);

    z-index: 1;

}



/* Text Styles */

.cb-title {

    font-size: 24px;

    font-weight: 900;

    line-height: 1.1;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    margin-bottom: 8px;

}



.cb-subtitle {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    opacity: 0.8;

    margin-bottom: 24px;

}



.cb-author {

    margin-top: auto;

    display: flex;

    align-items: center;

    gap: 8px;

}

/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   NEUMORPHISM CAROUSEL & 3D MOCKUPS

   Reliable Scroll-Snap + Soft UI

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/* --- CAROUSEL CONTAINER --- */

.nm-carousel {

    width: 100%;

    max-width: 480px;

    margin: 0 auto;

    position: relative;

    padding: 20px 0 40px;

    /* Space for shadows/dots */

}



/* Scroll Track */

.nm-track {

    display: flex;

    gap: 24px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    padding: 20px;

    /* Inner padding for shadows */

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    /* Hide scrollbar Firefox */

}



.nm-track::-webkit-scrollbar {

    display: none;

}



/* Hide Chrome/Safari */



/* Slide Item */

.nm-slide {

    flex: 0 0 100%;

    scroll-snap-align: center;

    position: relative;

    display: flex;

    justify-content: center;

    perspective: 1000px;

    /* For 3D elements inside */

}



/* --- DOTS NAVIGATION --- */

.nm-dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: -10px;

}



.nm-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #e2e8f0;

    box-shadow:

        inset 1px 1px 2px #cbd5e1,

        inset -1px -1px 2px #fff;

    cursor: pointer;

    transition: all 0.3s ease;

}



.nm-dot.active {

    background: #4f46e5;

    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);

    transform: scale(1.2);

}



/* --- NEUMORPHISM CARD STYLE --- */

.nm-card {

    width: 100%;

    max-width: 320px;

    aspect-ratio: 3/4;

    border-radius: 20px;

    background: #e0e5ec;

    box-shadow:

        9px 9px 16px rgb(163, 177, 198, 0.6),

        -9px -9px 16px rgba(255, 255, 255, 0.5);

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

}



/* Inner Pressed State (for badges/icons) */

.nm-inset {

    background: #e0e5ec;

    box-shadow:

        inset 6px 6px 10px rgb(163, 177, 198, 0.7),

        inset -6px -6px 10px rgba(255, 255, 255, 0.8);

    border-radius: 12px;

}



/* --- 3D BOOK MOCKUP (CSS Only) --- */

.nm-book-3d {

    width: 220px;

    height: 320px;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 0.5s ease;

}



/* Face Styles */

.nm-book-face {

    position: absolute;

    backface-visibility: hidden;

    border-radius: 2px 6px 6px 2px;

}



.nm-face-front {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    transform: translateZ(12px);

    display: flex;

    flex-direction: column;

    padding: 20px;

    box-shadow:

        inset 2px 0 5px rgba(255, 255, 255, 0.1),

        inset -1px 0 2px rgba(0, 0, 0, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.nm-face-side {

    width: 24px;

    height: 100%;

    background: #334155;

    transform: rotateY(-90deg) translateZ(12px);

    left: -12px;

}



/* 3D Variations */

.nm-view-front .nm-book-3d {

    transform: rotateY(-15deg) rotateX(5deg);

}



.nm-view-spine .nm-book-3d {

    transform: rotateY(-35deg) rotateX(10deg);

}



/* --- TYPOGRAPHY --- */

.nm-title {

    color: #4b5563;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 12px;

}



.nm-text {

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;

}



.nm-quote {

    font-family: 'Georgia', serif;

    font-size: 18px;

    font-style: italic;

    color: #334155;

    line-height: 1.5;

}



/* Light text for dark book covers */

.nm-text-light {

    color: #f8fafc;

}



.nm-text-dim {

    color: #94a3b8;

}


/* Skeleton Loader Styles */
.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}