/*
   Sementes do Bem — Premium Design System
   Author: Junior A Rocha
   Version: 2.0 — Editorial Edition
*/

/* ──────────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────────── */
:root {
    /* Palette */
    --ink:           #0C0E0B;
    --ink-soft:      #1E211D;
    --text:          #2E3229;
    --text-muted:    #5C6057;
    --text-light:    #6F746B;

    --cream:         #FAF8F3;
    --cream-warm:    #F3EDE0;
    --cream-mid:     #EDE5D4;

    --gold:          #C9A227;
    --gold-light:    #E4C05C;
    --gold-dark:     #A88218;
    --gold-glow:     rgba(201, 162, 39, 0.18);

    --surface:       #FFFFFF;

    /* Typography */
    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Inter', system-ui, sans-serif;

    /* Spacing */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    /* Layout */
    --max-w: 1160px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.04);
    --shadow-md:   0 8px 32px rgba(0,0,0,0.08);
    --shadow-lg:   0 20px 60px rgba(0,0,0,0.12);
    --shadow-gold: 0 12px 40px rgba(201, 162, 39, 0.25);

    /* Transitions */
    --ease:        cubic-bezier(0.25, 1, 0.5, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    0.2s;
    --dur-med:     0.4s;
    --dur-slow:    0.8s;
}

/* ──────────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

section[id] {
    scroll-margin-top: 120px;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--cream);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.loading {
    overflow: hidden;
}

body.menu-open {
    overflow: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; }
ul { list-style: none; }

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ──────────────────────────────────────────────
   PAGE LOADER
────────────────────────────────────────────── */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-inner {
    text-align: center;
    color: var(--gold-light);
}

.loader-seed {
    font-size: 2.5rem;
    animation: loaderPulse 1.2s ease-in-out infinite;
    display: block;
    margin-bottom: 1rem;
}

.loader-text {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}

@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3) rotate(180deg); opacity: 0.6; }
}

/* ──────────────────────────────────────────────
   CUSTOM CURSOR
────────────────────────────────────────────── */
.cursor,
.cursor-follower {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: difference;
    transition-property: transform;
    transition-timing-function: var(--ease);
}

.cursor {
    width: 8px;
    height: 8px;
    background: var(--gold-light);
    transform: translate(-50%, -50%);
    transition-duration: 0s;
}

.cursor-follower {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--gold-light);
    transform: translate(-50%, -50%);
    transition-duration: 0.12s;
    opacity: 0.6;
}

@media (hover: none) {
    .cursor, .cursor-follower { display: none; }
}

/* ──────────────────────────────────────────────
   TYPOGRAPHY SCALE
────────────────────────────────────────────── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: var(--space-3);
}

.section-label.light {
    color: var(--gold-light);
}

.section-label::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.section-title em {
    font-style: italic;
    color: var(--gold-dark);
}

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

.synopsis-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: var(--space-4) 0;
}

/* ──────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--dur-med) var(--ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}

.btn:hover::after { opacity: 1; }

.btn-primary {
    background: var(--gold);
    color: var(--ink);
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(201, 162, 39, 0.4);
}

.btn-primary svg { flex-shrink: 0; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(0,0,0,0.2);
    padding: 0.85rem 1.6rem;
}

.btn-ghost:hover {
    border-color: var(--gold-dark);
    color: var(--gold-dark);
    background: rgba(201, 162, 39, 0.08);
}

.btn-ghost-dark {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(0,0,0,0.15);
    padding: 0.85rem 1.6rem;
}

.btn-ghost-dark:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(186, 136, 68, 0.45);
    color: #352519;
    padding: 0.95rem 1.7rem;
    font-size: 0.98rem;
    font-weight: 600;
    border-radius: 0.8rem;
    box-shadow: 0 12px 26px rgba(117, 79, 38, 0.05);
}

.btn-outline:hover {
    background: rgba(228, 174, 72, 0.12);
    color: #352519;
    border-color: rgba(186, 136, 68, 0.65);
}

.btn-light {
    background: var(--cream);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.btn-light:hover {
    background: var(--cream-warm);
    transform: translateY(-2px);
}

.btn-cta {
    width: 100%;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ──────────────────────────────────────────────
   SCROLL ANIMATIONS
────────────────────────────────────────────── */
.fade-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }
.delay-5 { transition-delay: 0.60s; }

/* Reveal animations (hero — triggered immediately) */
.reveal-up {
    opacity: 0;
    transform: translateY(32px);
    animation: revealUp var(--dur-slow) var(--ease) forwards;
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    animation: revealRight 1s var(--ease) forwards;
}

@keyframes revealUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes revealRight {
    to { opacity: 1; transform: translateX(0); }
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }

/* ──────────────────────────────────────────────
   HEADER
────────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: 1.7rem 0;
    transition: all 0.35s var(--ease);
}

.header.scrolled {
    padding: 1rem 0;
    background: rgba(250, 245, 238, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(52, 30, 11, 0.06);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.5vw, 2.5rem);
    font-weight: 600;
    color: #352519;
    letter-spacing: -0.03em;
    transition: color var(--dur-fast) ease;
}

.header.scrolled .logo { color: #352519; }

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

.nav-links a:not(.btn) {
    font-size: 0.95rem;
    font-weight: 500;
    color: #594b3f;
    position: relative;
    transition: color var(--dur-fast) ease;
}

.header.scrolled .nav-links a:not(.btn) {
    color: #594b3f;
}

.nav-links a:not(.btn):hover { color: var(--gold-dark); }
.header.scrolled .nav-links a:not(.btn):hover { color: var(--gold-dark); }

.nav-links a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.3s var(--ease);
}

.nav-links a:not(.btn):hover::after { width: 100%; }

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.mobile-menu-backdrop {
    display: none;
}

.mobile-menu-btn span {
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: all var(--dur-med) var(--ease);
    display: block;
}

.header.scrolled .mobile-menu-btn span { background: var(--ink); }

.mobile-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ──────────────────────────────────────────────
   HERO
────────────────────────────────────────────── */
.hero {
    position: relative;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 243, 224, 0.95) 0%, rgba(255, 243, 224, 0) 30%),
        radial-gradient(circle at 82% 18%, rgba(238, 204, 162, 0.55) 0%, rgba(238, 204, 162, 0) 24%),
        radial-gradient(circle at 50% 65%, rgba(245, 225, 193, 0.75) 0%, rgba(245, 225, 193, 0) 36%),
        linear-gradient(135deg, #f8ebdb 0%, #f7f1e9 42%, #eed4b1 76%, #e0bb8d 100%);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    min-height: 100vh;
    padding: 98px 0 var(--space-12);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.26;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    mix-blend-mode: multiply;
    pointer-events: none;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

.hero-atmosphere,
.hero-grain-line {
    position: absolute;
    pointer-events: none;
}

.hero-atmosphere {
    border-radius: 999px;
    filter: blur(70px);
    opacity: 0.45;
}

.hero-atmosphere-left {
    width: 360px;
    height: 360px;
    left: -100px;
    bottom: -40px;
    background: radial-gradient(circle, rgba(206, 159, 88, 0.34) 0%, rgba(206, 159, 88, 0) 70%);
}

.hero-atmosphere-right {
    width: 420px;
    height: 420px;
    right: -60px;
    top: 90px;
    background: radial-gradient(circle, rgba(255, 248, 236, 0.95) 0%, rgba(255, 248, 236, 0) 70%);
}

.hero-grain-line {
    top: 96px;
    left: 50%;
    width: min(1160px, calc(100% - 3rem));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(124, 84, 42, 0), rgba(124, 84, 42, 0.16) 18%, rgba(124, 84, 42, 0.16) 82%, rgba(124, 84, 42, 0));
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    padding-top: clamp(1rem, 2vw, 1.8rem);
}

.hero-content {
    max-width: 620px;
    padding-top: 0;
}

.hero-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b9862a;
    background: rgba(240, 213, 173, 0.72);
    border: 1px solid rgba(186, 136, 68, 0.12);
    border-radius: 50px;
    margin-bottom: var(--space-4);
    box-shadow: 0 12px 28px rgba(180, 140, 80, 0.08);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 6.3vw, 5.8rem);
    font-weight: 600;
    line-height: 0.98;
    color: #3b2f21;
    margin-bottom: 1.6rem;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.4vw, 1.24rem);
    color: #4f4439;
    max-width: 560px;
    line-height: 1.68;
    margin-bottom: 2.2rem;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.4rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.btn-gold {
    background: linear-gradient(135deg, #e4ae48 0%, #cb8d2b 100%);
    color: #fff;
    border-radius: 0.7rem;
    padding: 1rem 2.35rem;
    box-shadow: 0 14px 34px rgba(200, 140, 44, 0.24);
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--dur-med) var(--ease);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(200, 140, 44, 0.32);
    background: linear-gradient(135deg, #e6b661 0%, #d49836 100%);
    color: #fff;
}

.btn-text {
    font-weight: 500;
    color: #5c5246;
    font-size: 0.95rem;
    position: relative;
    transition: color var(--dur-fast) ease;
}

.btn-text:hover { color: #c98b2c; }

.btn-text::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0;
    height: 1px;
    background: #c98b2c;
    transition: width 0.3s var(--ease);
}

.btn-text:hover::after { width: 100%; }

.hero-proof {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    max-width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(130, 94, 56, 0.1);
    background: rgba(255, 249, 241, 0.55);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(86, 50, 23, 0.08);
}

.hero-proof-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hero-proof-item strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: #3b2f21;
}

.hero-proof-item span {
    font-size: 0.82rem;
    color: #76685a;
    line-height: 1.5;
}

.hero-proof-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(120, 84, 46, 0.14);
}

/* ── Hero Book ── */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0.2rem 0 0;
}

.hero-book-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0.2rem 0 3.5rem;
}

.hero-book-rays {
    position: absolute;
    inset: auto 50% 18%;
    width: min(680px, 68vw);
    height: min(680px, 68vw);
    transform: translateX(-50%);
    background:
        radial-gradient(circle, rgba(255, 245, 222, 0.72) 0%, rgba(255, 245, 222, 0) 52%),
        repeating-conic-gradient(from 0deg, rgba(240, 208, 160, 0.22) 0deg 9deg, rgba(240, 208, 160, 0) 9deg 26deg);
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.36;
    animation: raysRotate 40s linear infinite;
    z-index: 0;
}

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

/* Brilho principal */
.hero-book-glow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 560px;
    height: 380px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse,
        rgba(255, 245, 210, 0.58) 0%,
        rgba(210, 165, 80, 0.2) 42%,
        transparent 70%
    );
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
    animation: glowPulse 5s ease-in-out infinite;
}

/* Segundo brilho — cor mais fria para profundidade */
.hero-book-glow-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,
        rgba(255, 255, 240, 0.55) 0%,
        transparent 60%
    );
    filter: blur(35px);
    animation: glowPulse 5s ease-in-out infinite reverse;
    animation-delay: -2.5s;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
    50%       { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

.hero-book-tilt {
    position: relative;
    z-index: 2;
    cursor: grab;
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: bookFloat3D 6s ease-in-out infinite;
    filter: drop-shadow(0 40px 60px rgba(120, 80, 0, 0.45)) drop-shadow(0 0 30px rgba(255,210,80,0.3));
}

.hero-book-tilt:active { cursor: grabbing; }

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

/* Estrutura 3D do Livro */
.book-3d, .book-3d-reflection {
    position: relative;
    width: clamp(280px, 34vw, 430px);
    aspect-ratio: 0.65;
    transform-style: preserve-3d;
    transform: rotateY(-24deg) rotateX(7deg) rotateZ(1deg);
    transition: transform 0.4s ease;
}

/* Container do Reflection para o ângulo inverso */
.book-3d-reflection {
    transform: rotateY(-24deg) rotateX(-7deg) rotateZ(-1deg);
}

.book-front, .book-back, .book-left, .book-right, .book-top, .book-bottom {
    position: absolute;
    transform-style: preserve-3d;
}

/* Frente do livro */
.book-front {
    inset: 0;
    transform: translateZ(24px);
    background: var(--cream);
    border-radius: 2px 6px 6px 2px;
    box-shadow: inset 4px 0 10px rgba(0,0,0,0.1), inset -1px 0 2px rgba(255,255,255,0.3);
    overflow: hidden;
}

.book-front .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Costas do livro */
.book-back {
    inset: 0;
    transform: rotateY(180deg) translateZ(24px);
    background: #d4b84a; /* Cor base da capa */
    border-radius: 6px 2px 2px 6px;
    box-shadow: inset 4px 0 10px rgba(0,0,0,0.1);
}

/* Lombada (Spine) */
.book-left {
    width: 48px;
    height: 100%;
    left: -24px;
    transform: rotateY(-90deg);
    background: linear-gradient(to right, #cfaf3c, #e5ce78, #c9a834);
    border-radius: 4px 0 0 4px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4), inset 2px 0 4px rgba(255,255,255,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.spine-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.25vw, 1.4rem);
    color: #111;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 20px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
    white-space: nowrap;
}

.spine-author {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #333;
    letter-spacing: 1px;
    margin-bottom: auto;
    margin-top: 30px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Páginas direita */
.book-right {
    width: 48px;
    height: 98%;
    right: -24px;
    top: 1%;
    transform: rotateY(90deg);
    background: #fdfbf7;
    background-image: repeating-linear-gradient(to right, transparent 0, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
    border-radius: 0 4px 4px 0;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* Páginas cima */
.book-top {
    width: 98%;
    height: 48px;
    top: -24px;
    left: 1%;
    transform: rotateX(90deg);
    background: #fdfbf7;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* Páginas baixo */
.book-bottom {
    width: 98%;
    height: 48px;
    bottom: -24px;
    left: 1%;
    transform: rotateX(-90deg);
    background: #e8e5df;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* Reflexo de luz na capa */
.hero-book-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.08) 25%,
        transparent 50%,
        rgba(255,220,100,0.08) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    animation: shineShift 8s ease-in-out infinite;
}

@keyframes shineShift {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 0.3; }
}

/* Reflexo espelhado no chão */
.hero-book-reflection {
    position: relative;
    z-index: 1;
    margin-top: -8px;
    transform: scaleY(-0.28) translateY(-10%);
    opacity: 0.26;
    filter: blur(5px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    animation: reflectionFloat 6s ease-in-out infinite;
}

@keyframes reflectionFloat {
    0%, 100% { transform: scaleY(-0.28) translateY(-10%); opacity: 0.24; filter: blur(5px); }
    50%       { transform: scaleY(-0.28) translateY(8%); opacity: 0.12; filter: blur(7px); }
}

.hero-book-shadow {
    width: clamp(260px, 30vw, 360px);
    height: 42px;
    margin-top: 4px;
    background: radial-gradient(ellipse at center, rgba(100, 60, 0, 0.45) 0%, transparent 70%);
    filter: blur(16px);
    animation: shadowPulse 6s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { transform: scaleX(1);    opacity: 0.8; }
    50%       { transform: scaleX(0.85); opacity: 0.4; }
}

/* Badge flutuante – Lançamento */
.book-float-badge {
    position: absolute;
    top: 6%;
    right: 0%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(12, 14, 11, 0.88);
    color: var(--gold-light);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(201, 162, 39, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 12px rgba(201,162,39,0.15);
    animation: badgeFloat 5s ease-in-out infinite;
    z-index: 5;
    white-space: nowrap;
}

.hero-book-caption {
    position: absolute;
    right: clamp(-0.5rem, -1vw, -1rem);
    bottom: 0;
    width: min(280px, 78%);
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(128, 91, 49, 0.12);
    background: rgba(255, 248, 240, 0.7);
    box-shadow: 0 24px 45px rgba(94, 58, 28, 0.08);
    backdrop-filter: blur(10px);
    text-align: left;
    z-index: 4;
}

.hero-book-caption-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a8782b;
}

.hero-book-caption-text {
    display: block;
    font-size: 0.94rem;
    line-height: 1.55;
    color: #4f4439;
}

.book-badge-star {
    color: var(--gold);
    animation: starSpin 8s linear infinite;
    font-size: 0.65rem;
}

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

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0px) rotate(-1deg); }
    50%       { transform: translateY(-8px) rotate(0deg); }
}

/* Badge flutuante – Leitores */
.book-float-readers {
    position: absolute;
    bottom: 10%;
    left: -2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 248, 220, 0.95);
    border: 1px solid rgba(201,162,39,0.35);
    border-radius: var(--radius-md);
    padding: 0.7rem 1.2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 20px rgba(201,162,39,0.12);
    backdrop-filter: blur(8px);
    animation: badgeFloat 5s ease-in-out infinite reverse;
    animation-delay: -2.5s;
    z-index: 5;
}

.book-readers-num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold-dark);
    line-height: 1;
}

.book-readers-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Partículas brilhantes */
.book-sparkle {
    position: absolute;
    border-radius: 50%;
    background: var(--gold-light);
    pointer-events: none;
    z-index: 6;
}

.book-sparkle::before,
.book-sparkle::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: inherit;
}

.book-sparkle-1 {
    width: 6px; height: 6px;
    top: 18%; left: 10%;
    box-shadow: 0 0 8px 2px rgba(228,192,92,0.6);
    animation: sparkleAnim 3.5s ease-in-out infinite;
}
.book-sparkle-2 {
    width: 4px; height: 4px;
    top: 65%; right: 8%;
    box-shadow: 0 0 6px 2px rgba(228,192,92,0.5);
    animation: sparkleAnim 2.8s ease-in-out infinite 0.8s;
}
.book-sparkle-3 {
    width: 8px; height: 8px;
    top: 5%; left: 38%;
    box-shadow: 0 0 10px 3px rgba(228,192,92,0.45);
    animation: sparkleAnim 4s ease-in-out infinite 0.3s;
}
.book-sparkle-4 {
    width: 5px; height: 5px;
    bottom: 18%; left: 15%;
    box-shadow: 0 0 8px 2px rgba(228,192,92,0.55);
    animation: sparkleAnim 3.2s ease-in-out infinite 1.5s;
}
.book-sparkle-5 {
    width: 3px; height: 3px;
    top: 40%; right: 4%;
    box-shadow: 0 0 6px 2px rgba(255,240,140,0.6);
    animation: sparkleAnim 2.5s ease-in-out infinite 0.5s;
}

@keyframes sparkleAnim {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    30%, 70%  { opacity: 1; transform: scale(1.2); }
    50%       { opacity: 0.8; transform: scale(1); }
}

/* Hero scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(0,0,0,0.3);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 2;
}

.scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%       { opacity: 1; transform: scaleY(1.1); }
}

/* ──────────────────────────────────────────────
   QUOTE BAND
────────────────────────────────────────────── */
.quote-band {
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(180deg, #efe6d7 0%, #e7dcc8 100%);
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    position: relative;
    overflow: hidden;
}

.quote-band::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.quote-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(1.8rem, 3vw, 2.6rem);
    border: 1px solid rgba(168, 130, 84, 0.18);
    border-radius: 1.75rem;
    background: rgba(250, 248, 243, 0.68);
    box-shadow: 0 24px 50px rgba(63, 39, 16, 0.08);
    backdrop-filter: blur(10px);
}

.quote-mark-left,
.quote-mark-right {
    font-family: var(--font-display);
    font-size: 6rem;
    color: var(--gold);
    opacity: 0.25;
    line-height: 1;
    font-style: normal;
    user-select: none;
}

.quote-mark-right { opacity: 0.15; }

.quote-main {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    text-align: center;
    font-style: normal;
}

.quote-main em {
    font-style: italic;
    color: var(--gold-dark);
}

/* ──────────────────────────────────────────────
   SYNOPSIS (Sobre o Livro)
────────────────────────────────────────────── */
.synopsis {
    padding: clamp(5.5rem, 9vw, 8.5rem) 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(241, 220, 186, 0.45) 0%, rgba(241, 220, 186, 0) 28%),
        linear-gradient(180deg, #faf7f1 0%, #f5ede1 100%);
}

.synopsis-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-12);
    align-items: start;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid rgba(186, 136, 68, 0.1);
    border-radius: 2rem;
    background: rgba(255, 252, 247, 0.72);
    box-shadow: 0 28px 60px rgba(88, 56, 27, 0.06);
}

/* Visual col */
.synopsis-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.synopsis-img-wrap {
    position: relative;
    padding: 20px 20px 20px 0;
    /* space for the deco frame offset */
}

.synopsis-img-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 0;
    bottom: 0;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-md);
    opacity: 0.45;
}

.synopsis-book-img {
    display: block;
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
    transform: perspective(900px) rotateY(4deg);
    transition: transform 0.4s var(--ease);
}

.synopsis-book-img:hover {
    transform: perspective(900px) rotateY(-2deg) scale(1.02);
}

.synopsis-badge-float {
    display: inline-block;
    margin-top: -10px;
    align-self: flex-end;
    margin-right: 20px;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-gold);
    position: relative;
    z-index: 3;
}

.synopsis-quote-side {
    padding: var(--space-4);
    border-left: 2px solid var(--gold);
    background: var(--cream-warm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    width: 100%;
}

.synopsis-quote-side p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.synopsis-quote-side cite {
    font-size: 0.82rem;
    color: var(--text-light);
    letter-spacing: 0.05em;
}

/* Content col */
.synopsis-lead {
    font-size: 1.15rem;
    color: var(--text);
    font-weight: 400;
    margin-bottom: var(--space-4);
    line-height: 1.65;
}

.synopsis-content p {
    color: var(--text-muted);
    font-size: 1.02rem;
    margin-bottom: var(--space-3);
    line-height: 1.75;
}

.synopsis-content p strong {
    color: var(--text);
    font-weight: 600;
}

.synopsis-pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--cream-mid);
}

.pillar {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.pillar-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pillar strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.pillar span {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* ──────────────────────────────────────────────
   AUTÓGRAFOS GALLERY
────────────────────────────────────────────── */
.autografos {
    background:
        radial-gradient(circle at 18% 14%, rgba(201, 162, 39, 0.14) 0%, rgba(201, 162, 39, 0) 28%),
        radial-gradient(circle at 82% 85%, rgba(228, 192, 92, 0.09) 0%, rgba(228, 192, 92, 0) 26%),
        linear-gradient(180deg, #10120e 0%, #161913 100%);
    padding-bottom: var(--space-16);
    overflow: hidden;
}

.autografos-header {
    padding: clamp(5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.autografos-subtitle {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(250,248,243,0.78);
    font-size: 1.08rem;
    line-height: 1.65;
}

.autografos-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.1rem;
    width: min(1280px, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: 0 0.25rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    height: 500px;
    background: var(--ink-soft);
    border-radius: 1.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 60px rgba(0,0,0,0.24);
    isolation: isolate;
}

.gallery-item--tall {
    grid-row: span 2;
    height: 100%;      /* preenche as 2 linhas automaticamente */
    min-height: 1004px; /* 2 × 500px + 4px gap */
}

.gallery-item--wide {
    grid-column: span 2;
    height: 500px;
}

.gallery-item:nth-child(2) {
    transform: translateY(1.25rem);
}

.gallery-item:nth-child(3) {
    transform: translateY(-1.25rem);
}

.gallery-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0.9rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 1.15rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0.7;
}

.gallery-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12,14,11,0.02) 0%, rgba(12,14,11,0.08) 42%, rgba(12,14,11,0.72) 100%),
        radial-gradient(circle at 50% 120%, rgba(228,192,92,0.16) 0%, rgba(228,192,92,0) 45%);
    z-index: 1;
    pointer-events: none;
}

.gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;  /* padrão: mostra a parte superior da foto */
    transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
    filter: saturate(0.92) sepia(0.08) contrast(1.02);
}

/* Posicionamento individual por foto */
.gallery-item:nth-child(1) img { object-position: center 30%; } /* tall: assinar, rosto inclinado */
.gallery-item:nth-child(2) img { object-position: center 18%; } /* página de título */
.gallery-item:nth-child(3) img { object-position: center 22%; } /* assinando sorrindo */
.gallery-item:nth-child(4) img { object-position: center 25%; } /* wide: foto com leitor */

.gallery-item:hover .gallery-img-wrap img {
    transform: scale(1.05);
    filter: saturate(1) sepia(0) contrast(1.04);
}

.gallery-overlay {
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    bottom: 1.35rem;
    display: flex;
    align-items: flex-end;
    padding: 1rem 1.1rem;
    opacity: 1;
    z-index: 3;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(16, 18, 14, 0.56);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.18);
    transform: translateY(0);
    transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(-0.2rem);
    background: rgba(16, 18, 14, 0.74);
    border-color: rgba(228,192,92,0.22);
}

.gallery-overlay p {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--cream);
    line-height: 1.35;
    text-wrap: balance;
}

/* Placeholder when event photo not yet added */
.gallery-item.photo-missing .gallery-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #161810 0%, #242820 100%);
}

.gallery-item.photo-missing .gallery-img-wrap img {
    display: none;
}

.gallery-item.photo-missing .gallery-img-wrap::after {
    content: attr(data-label);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: rgba(201, 162, 39, 0.5);
    text-align: center;
    padding: 1rem;
    position: absolute;
    bottom: 1.5rem;
    left: 0; right: 0;
}

.gallery-item.photo-missing .gallery-img-wrap::before {
    content: '✦';
    font-size: 2.5rem;
    color: rgba(201, 162, 39, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.autografos-cta {
    text-align: center;
    padding-top: var(--space-8);
}

.autografos-cta-text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: italic;
    color: rgba(250,248,243,0.84);
    margin-bottom: var(--space-4);
}

/* ──────────────────────────────────────────────
   AUTHOR
────────────────────────────────────────────── */
.author {
    padding: clamp(5.5rem, 9vw, 8.5rem) 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(234, 206, 163, 0.35) 0%, rgba(234, 206, 163, 0) 26%),
        linear-gradient(180deg, #f3ebde 0%, #efe4d4 100%);
}

.author-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
    align-items: start;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: 2rem;
    background: rgba(250, 248, 243, 0.62);
    border: 1px solid rgba(186, 136, 68, 0.1);
    box-shadow: 0 26px 55px rgba(75, 46, 21, 0.06);
}

.author-img-frame {
    position: relative;
    max-width: 380px;
}

.author-photo {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
}

.author-frame-deco {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 100%;
    height: 100%;
    border: 1.5px solid var(--gold);
    border-radius: var(--radius-md);
    z-index: 1;
    opacity: 0.45;
}

.author-accent-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), transparent);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 3;
}

.author-social {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-start;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: color var(--dur-fast) ease;
}

.social-link:hover { color: var(--gold-dark); }

.author-role {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: var(--space-2);
}

.author-bio-lead {
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: var(--space-3);
}

.author-bio {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: var(--space-3);
}

.author-quote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    border-left: 3px solid var(--gold);
    background: rgba(201, 162, 39, 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.author-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text);
    line-height: 1.55;
}

.author-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────
   CTA
────────────────────────────────────────────── */
.cta {
    position: relative;
    background: var(--ink-soft);
    padding: clamp(5.5rem, 9vw, 8.5rem) 0;
    overflow: hidden;
}

.cta-bg-art {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 70% at 20% 50%, rgba(201,162,39,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 20%, rgba(201,162,39,0.06) 0%, transparent 60%);
}

.cta-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--cream);
    margin-bottom: var(--space-4);
}

.cta-title em {
    font-style: italic;
    color: var(--gold-light);
}

.cta-subtitle {
    font-size: 1.08rem;
    color: rgba(250,248,243,0.8);
    max-width: 480px;
    line-height: 1.7;
}

/* Pricing Card */
.pricing-card {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.4);
    border: 1px solid rgba(201,162,39,0.2);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
}

.pricing-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.3rem;
}

.pricing-desc {
    font-size: 0.98rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.price-display {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--cream-mid);
}

.price-currency {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--text-muted);
}

.price-amount {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.price-cents {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--text-muted);
}

.benefits-list {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--text);
}

.check-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--gold-dark);
}

.secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: var(--space-3);
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: rgba(250,248,243,0.5);
    padding: var(--space-12) 0 var(--space-4);
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--cream);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-3);
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(250,248,243,0.68);
    max-width: 280px;
    margin-bottom: var(--space-4);
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.72);
    transition: all var(--dur-med) var(--ease);
}

.footer-social a:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,162,39,0.08);
}

.footer-links-group h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
    margin-bottom: var(--space-4);
}

.footer-links-group a {
    display: block;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.76);
    margin-bottom: 0.8rem;
    transition: color var(--dur-fast) ease;
}

.footer-links-group a:hover { color: var(--gold-light); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-4);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.footer-credit {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.88rem;
}

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
        gap: var(--space-6);
    }

    .hero-title {
        font-size: clamp(3rem, 6vw, 4.6rem);
    }

    .hero-book-caption {
        right: 0;
        width: min(250px, 82%);
    }

    .synopsis-grid,
    .author-container,
    .cta-container {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .synopsis-grid,
    .author-container {
        padding: 1.4rem;
    }

    .synopsis-img-frame {
        max-width: 280px;
        margin: 0 auto;
    }

    .author-img-frame {
        max-width: 320px;
        margin: 0 auto;
    }

    .autografos-gallery {
        grid-template-columns: 1fr 1fr;
        width: min(100%, calc(100% - 2rem));
    }

    .gallery-item         { height: 380px; }
    .gallery-item--tall   { grid-row: auto; height: 380px; min-height: unset; }
    .gallery-item--wide   { grid-column: span 2; height: 340px; }

    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3) {
        transform: none;
    }
}

@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: 96px;
    }

    .section-label,
    .pricing-badge,
    .author-role,
    .footer-links-group h4 {
        font-size: 0.82rem;
    }

    .footer-brand p,
    .footer-links-group a,
    .footer-bottom,
    .secure-note,
    .social-link,
    .pricing-desc,
    .synopsis-quote-side cite {
        font-size: 0.94rem;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        background: linear-gradient(180deg, #f7efe2 0%, #efdfc8 100%);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: max(84px, var(--space-8)) var(--space-6) var(--space-6);
        gap: 2rem;
        transform: translateX(104%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.4s var(--ease), visibility 0.4s var(--ease);
        box-shadow: -20px 0 60px rgba(0,0,0,0.42);
        z-index: 102;
        overflow-y: auto;
    }

    .nav-links.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .nav-links a:not(.btn) {
        color: #3f2d1e;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .nav-links a:not(.btn)::after {
        background: #b17f2e;
    }

    .nav-links a:not(.btn):hover {
        color: #8e6222;
    }

    .nav-links .btn {
        width: 100%;
        justify-content: center;
        background: rgba(255, 252, 245, 0.72);
        border-color: rgba(138, 98, 34, 0.45);
        color: #3f2d1e;
        font-weight: 600;
    }

    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 101;
        background: rgba(42, 27, 14, 0.22);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        -webkit-backdrop-filter: blur(1.5px);
        backdrop-filter: blur(1.5px);
    }

    .mobile-menu-backdrop.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        z-index: 103;
    }

    .hero {
        min-height: auto;
        padding-top: 96px;
        padding-bottom: var(--space-12);
    }

    .hero-grain-line {
        top: 86px;
        width: calc(100% - 2rem);
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .hero-visual {
        order: 0;
        padding-top: 0;
    }

    .hero-content {
        max-width: 100%;
        padding-top: 0;
    }

    .hero-eyebrow-pill {
        margin-inline: auto;
    }

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

    .hero-proof {
        margin: 0 auto;
        flex-direction: column;
        width: min(100%, 420px);
        text-align: center;
    }

    .hero-proof-divider {
        width: 100%;
        height: 1px;
    }

    .hero-subtitle { margin: 0 auto var(--space-6); }

    .hero-book-glow {
        width: 340px;
        height: 260px;
    }

    .hero-book-rays {
        width: 430px;
        height: 430px;
    }

    .hero-book-stage {
        padding: 0 0 1rem;
    }

    .hero-book-caption {
        display: none;
    }

    .quote-inner { grid-template-columns: 1fr; }
    .quote-mark-left, .quote-mark-right { display: none; }

    .synopsis-grid,
    .author-container {
        gap: var(--space-6);
        padding: 1.1rem;
        border-radius: 1.5rem;
    }

    .autografos-gallery {
        grid-template-columns: 1fr 1fr;
        width: min(100%, calc(100% - 1.5rem));
    }

    .gallery-item, .gallery-item--tall, .gallery-item--wide {
        height: 300px;
        min-height: unset;
        grid-row: auto;
    }

    .gallery-item--wide { grid-column: span 2; height: 280px; }

    .gallery-overlay {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        padding: 0.85rem 0.95rem;
    }

    .gallery-overlay p {
        font-size: 0.98rem;
    }

    .cta-container { grid-template-columns: 1fr; }
    .cta-title { text-align: center; }
    .cta-subtitle { text-align: center; max-width: 100%; }
    .cta-content { order: -1; }
    .pricing-card { padding: var(--space-6); }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand { grid-column: span 2; }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 1.2rem 0;
    }

    .logo {
        font-size: 1.8rem;
    }

    .hero {
        padding-top: 82px;
    }

    .hero-title {
        font-size: clamp(2.45rem, 11vw, 3.15rem);
        line-height: 1;
    }

    .hero-subtitle {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .btn-gold,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }

    .hero-actions {
        gap: 1rem;
    }

    .book-3d,
    .book-3d-reflection {
        width: min(58vw, 240px);
    }

    .hero-proof {
        width: 100%;
        padding: 0.9rem 1rem;
    }

    .autografos-gallery {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0 0.75rem;
        width: 100%;
    }

    .gallery-item--tall,
    .gallery-item--wide {
        grid-row: auto;
        grid-column: auto;
        height: 280px;
        min-height: unset;
    }

    .pricing-card { padding: var(--space-6); }

    .footer-container { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
}