/* ==========================================================================
   Grieftypes — Premium One-Page Author Website
   Theme: Deep purple / lavender / gold — inspired by the book cover
   ========================================================================== */

:root {
    --purple-deepest: #150c22;
    --purple-deep:    #1e1230;
    --purple:         #3b2352;
    --purple-mid:     #573a75;
    --purple-soft:    #7a5ba0;
    --lavender:       #cfc3e0;
    --lavender-soft:  #e9e2f2;
    --cream:          #f7f3ec;
    --gold:           #d8b45c;
    --gold-soft:      #eccf8f;
    --white:          #ffffff;

    --font-serif:  'Cormorant Garamond', Georgia, serif;
    --font-body:   'Jost', 'Segoe UI', sans-serif;
    --font-script: 'Great Vibes', cursive;

    --radius-lg: 26px;
    --radius-md: 16px;

    --shadow-book: 0 40px 80px -20px rgba(0, 0, 0, .55);
    --shadow-card: 0 24px 60px -18px rgba(21, 12, 34, .45);

    --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-weight: 300;
    background: var(--purple-deepest);
    color: var(--lavender-soft);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--purple-deepest); }

.container { width: min(1200px, 92%); margin-inline: auto; }
.section { position: relative; padding: 110px 0; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(87, 58, 117, .35), transparent 60%),
        var(--purple-deepest);
}
.preloader__inner { text-align: center; }
.preloader__print { width: 88px; height: 88px; color: var(--lavender); margin: 0 auto 18px; }
.preloader__title { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.preloader__script { font-family: var(--font-script); font-size: 2.6rem; color: var(--white); line-height: 1; }
.preloader__sub {
    font-size: .72rem; letter-spacing: .42em; text-transform: uppercase;
    color: var(--gold-soft); padding-left: .42em;
}
.preloader__bar {
    width: 200px; height: 2px; margin: 26px auto 0;
    background: rgba(233, 226, 242, .15); border-radius: 2px; overflow: hidden;
}
.preloader__bar span { display: block; width: 0; height: 100%; background: var(--gold); border-radius: 2px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--header-h);
    display: flex; align-items: center;
    transition: background .4s ease, box-shadow .4s ease, height .4s ease;
}
.site-header.is-scrolled {
    height: 68px;
    background: rgba(21, 12, 34, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px -18px rgba(0, 0, 0, .6);
    border-bottom: 1px solid rgba(216, 180, 92, .18);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.brand__mark { width: 38px; height: 38px; color: var(--lavender); transition: color .3s, transform .5s; }
.brand:hover .brand__mark { color: var(--gold); transform: rotate(12deg); }
.brand__text { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; }
.brand__script { font-family: var(--font-script); font-size: 1.7rem; color: var(--gold-soft); margin-left: -2px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__list { display: flex; align-items: center; gap: 30px; }
.nav__link {
    position: relative;
    font-size: .82rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lavender); padding: 6px 0; transition: color .3s;
}
.nav__link::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: right;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.nav__link:hover, .nav__link.is-active { color: var(--white); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 6px;
    background: none; border: 0; padding: 8px; z-index: 1001;
}
.hamburger span {
    width: 26px; height: 2px; background: var(--white); border-radius: 2px;
    transition: transform .35s ease, opacity .3s ease;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 34px; border-radius: 60px; border: 0;
    font-family: var(--font-body); font-size: .8rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    overflow: hidden; isolation: isolate;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.98); }

.btn--gold {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, #b8934a);
    color: var(--purple-deepest);
    box-shadow: 0 14px 34px -10px rgba(216, 180, 92, .45);
}
.btn--gold::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, var(--white), var(--gold-soft));
    opacity: 0; transition: opacity .35s;
}
.btn--gold:hover::before { opacity: 1; }
.btn--gold:hover { box-shadow: 0 20px 44px -10px rgba(216, 180, 92, .6); }

.btn--ghost {
    background: transparent; color: var(--lavender-soft);
    box-shadow: inset 0 0 0 1px rgba(233, 226, 242, .35);
}
.btn--ghost:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--gold); }

.btn--ghost-light {
    background: transparent; color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-soft); }

.btn--sm { padding: 11px 24px; font-size: .72rem; }
.btn--full { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    padding: calc(var(--header-h) + 40px) 0 90px;
    overflow: hidden;
    background: var(--purple-deepest);
}
.hero__bg {
    position: absolute; inset: 0;
    background: url('../images/hero-bg.png') center / cover no-repeat;
    opacity: .55;
    will-change: transform;
}
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(21, 12, 34, .72) 0%, rgba(21, 12, 34, .25) 45%, var(--purple-deepest) 100%),
        radial-gradient(circle at 15% 30%, rgba(21, 12, 34, .55), transparent 55%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero__glow--1 { width: 480px; height: 480px; left: -140px; top: 12%; background: rgba(122, 91, 160, .28); }
.hero__glow--2 { width: 380px; height: 380px; right: 6%; bottom: -80px; background: rgba(216, 180, 92, .12); }

.hero__wrap {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: center; gap: 40px;
}

.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: .74rem; letter-spacing: .34em; text-transform: uppercase;
    color: var(--gold-soft); margin-bottom: 22px;
}
.hero__eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--gold); }

.hero__title { margin-bottom: 24px; }
.hero__script {
    display: block;
    font-family: var(--font-script);
    font-size: clamp(4.2rem, 9vw, 7.5rem);
    line-height: 1.05; color: var(--white);
    text-shadow: 0 10px 60px rgba(122, 91, 160, .45);
}
.hero__tagline {
    display: block; margin-top: 6px;
    font-family: var(--font-serif); font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    letter-spacing: .06em; color: var(--lavender);
}
.hero__lead { max-width: 480px; font-size: 1.05rem; color: var(--lavender); margin-bottom: 36px; }
.hero__lead strong { color: var(--white); font-weight: 500; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }

.hero__stats { display: flex; gap: 44px; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong {
    font-family: var(--font-serif); font-size: 2.1rem; font-weight: 600;
    color: var(--gold-soft); line-height: 1.1;
}
.hero__stats span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lavender); }

/* --- Floating book --- */
.hero__book { display: flex; justify-content: center; perspective: 1400px; }
.book-float { position: relative; width: min(430px, 88%); will-change: transform; }

.book-flip { cursor: pointer; outline: none; }
.book-flip__inner {
    position: relative; width: 100%;
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.65, .05, .36, 1);
}
.book-flip.is-flipped .book-flip__inner { transform: rotateY(180deg); }
.book-flip__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.book-flip__face--front img {
    width: 100%;
    filter: drop-shadow(var(--shadow-book));
    border-radius: 8px;
}

/* Back face — styled like the real back cover */
.book-flip__face--back {
    position: absolute; inset: 4% 4% 0 4%;
    transform: rotateY(180deg);
}
.book-back {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; text-align: center; padding: 9% 12% 8%;
    border-radius: 10px 14px 14px 10px;
    background:
        radial-gradient(circle at 50% 62%, rgba(255, 255, 255, .06), transparent 42%),
        linear-gradient(160deg, #553672 0%, var(--purple) 55%, #2c1a42 100%);
    box-shadow: var(--shadow-book), inset 3px 0 6px rgba(0, 0, 0, .35);
    border-left: 6px solid rgba(0, 0, 0, .28);
}
.book-back h3 {
    font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600;
    color: var(--white); letter-spacing: .04em;
}
.book-back p { font-size: .82rem; line-height: 1.65; color: var(--lavender-soft); }
.book-back__script { font-family: var(--font-script); font-size: 1.5rem; color: var(--white); }
.book-back__barcode {
    width: 110px; height: 40px; margin-top: 6px; border-radius: 3px;
    background: repeating-linear-gradient(90deg,
        #efe9f5 0 2px, transparent 2px 4px, #efe9f5 4px 5px, transparent 5px 9px,
        #efe9f5 9px 12px, transparent 12px 14px);
    opacity: .85;
}

.book-hint {
    position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
    font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(233, 226, 242, .55); white-space: nowrap;
}

/* Scroll indicator */
.hero__scroll {
    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    width: 26px; height: 42px; z-index: 3;
    border: 1.5px solid rgba(233, 226, 242, .4); border-radius: 20px;
}
.hero__scroll span {
    position: absolute; left: 50%; top: 8px;
    width: 4px; height: 8px; margin-left: -2px;
    border-radius: 4px; background: var(--gold);
    animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.section-head { text-align: center; margin-bottom: 70px; }
.section-head__eyebrow {
    display: inline-block; font-size: .72rem; letter-spacing: .4em;
    text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px;
}
.section-head__title {
    font-family: var(--font-serif); font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.2; color: var(--white);
}
.section-head__title em { font-family: var(--font-script); font-style: normal; color: var(--gold-soft); }
.section-head__rule {
    display: block; width: 70px; height: 2px; margin: 22px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ==========================================================================
   ABOUT THE BOOK
   ========================================================================== */
.about-book { background: linear-gradient(180deg, var(--purple-deepest) 0%, #241538 55%, var(--purple-deepest) 100%); overflow: hidden; }
.about-book__print {
    position: absolute; right: -140px; top: -120px;
    width: 560px; height: 560px; color: rgba(122, 91, 160, .12);
    transform: rotate(-14deg); pointer-events: none;
}

.about-book__grid {
    display: grid; grid-template-columns: .92fr 1.08fr;
    align-items: center; gap: 70px;
}
.about-book__media { display: flex; justify-content: center; perspective: 1400px; }
.book-flip--static { width: min(360px, 100%); }
.book-flip--static .book-flip__face--front img { filter: drop-shadow(var(--shadow-card)); }

.about-book__lead { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.5; color: var(--white); margin-bottom: 22px; }
.about-book__copy > p:not(.about-book__lead) { margin-bottom: 22px; color: var(--lavender); }

.type-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
.type-chip {
    padding: 8px 18px; border-radius: 40px;
    font-family: var(--font-script); font-size: 1.15rem; line-height: 1;
    color: var(--lavender-soft);
    background: rgba(122, 91, 160, .16);
    box-shadow: inset 0 0 0 1px rgba(122, 91, 160, .35);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .3s, box-shadow .3s;
}
.type-chip:hover {
    transform: translateY(-4px) rotate(-2deg);
    color: var(--gold-soft);
    box-shadow: inset 0 0 0 1px rgba(216, 180, 92, .55);
}

.about-book__points { display: grid; gap: 18px; margin-bottom: 36px; }
.point { display: flex; gap: 18px; align-items: flex-start; }
.point__num {
    flex: 0 0 auto;
    font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
    color: var(--gold);
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 92, .45);
}
.point h4 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--white); }
.point p { font-size: .9rem; color: var(--lavender); }

/* ==========================================================================
   ABOUT THE AUTHOR
   ========================================================================== */
.about-author { background: linear-gradient(180deg, var(--purple-deepest), #25163a 60%, var(--purple-deepest)); }

.about-author__grid {
    display: grid; grid-template-columns: 340px 1fr;
    gap: 80px; align-items: center;
}

.author-card {
    position: relative; text-align: center;
    padding: 54px 34px 44px; border-radius: var(--radius-lg);
    background: linear-gradient(170deg, rgba(87, 58, 117, .35), rgba(30, 18, 48, .85));
    box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(233, 226, 242, .08);
}
.author-card__ring {
    position: absolute; top: -26px; right: -26px;
    width: 110px; height: 110px; border-radius: 50%;
    border: 1px dashed rgba(216, 180, 92, .5);
    animation: spin-slow 22s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.author-card__avatar {
    width: 128px; height: 128px; margin: 0 auto 22px;
    display: grid; place-items: center; position: relative;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .22), transparent 50%),
        linear-gradient(150deg, var(--purple-soft), var(--purple) 60%, #2c1a42);
    box-shadow: 0 0 0 4px rgba(233, 226, 242, .08), 0 18px 40px -12px rgba(0, 0, 0, .55);
}
.author-card__avatar span { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 600; color: var(--white); }
.author-card__avatar small {
    position: absolute; bottom: -6px; right: -4px;
    padding: 3px 10px; border-radius: 20px;
    background: var(--gold); color: var(--purple-deepest);
    font-size: .62rem; font-weight: 600; letter-spacing: .12em;
}
.author-card__name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--white); }
.author-card__role {
    font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--gold-soft); margin: 8px 0 16px;
}
.author-card__script { font-family: var(--font-script); font-size: 1.5rem; color: var(--lavender); }

.about-author__lead { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.55; color: var(--white); margin-bottom: 20px; }
.about-author__copy > p:not(.about-author__lead) { margin-bottom: 18px; color: var(--lavender); }

.author__values { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 34px; }
.value {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 22px; border-radius: 40px;
    background: rgba(122, 91, 160, .14);
    box-shadow: inset 0 0 0 1px rgba(122, 91, 160, .3);
}
.value span { color: var(--gold); font-size: 1.1rem; }
.value h5 { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lavender-soft); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials { background: linear-gradient(180deg, var(--purple-deepest), #1c112d 50%, var(--purple-deepest)); }

/* --- Two-row auto carousel (row 1 left, row 2 right) --- */
.marquee {
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee--right { margin-top: 26px; }

/* Break rows out of the container — full width */
.testimonials .marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-left 46s linear infinite;
    will-change: transform;
}
.marquee--right .marquee__track { animation-name: marquee-right; animation-duration: 54s; }

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.marquee .t-card { flex: 0 0 400px; width: 400px; margin-right: 26px; }

.t-card {
    position: relative;
    padding: 42px 28px 30px; border-radius: var(--radius-md);
    background: linear-gradient(175deg, rgba(87, 58, 117, .3), rgba(30, 18, 48, .9));
    box-shadow: inset 0 0 0 1px rgba(233, 226, 242, .07), 0 18px 44px -20px rgba(0, 0, 0, .5);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease;
}
.t-card:hover {
    transform: translateY(-10px);
    box-shadow: inset 0 0 0 1px rgba(216, 180, 92, .35), 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.t-card--featured { background: linear-gradient(175deg, rgba(216, 180, 92, .16), rgba(30, 18, 48, .92)); }

.t-card__stars { color: var(--gold); letter-spacing: .2em; font-size: .85rem; margin-bottom: 14px; }
.t-card blockquote { font-size: .92rem; color: var(--lavender-soft); margin-bottom: 24px; min-height: 118px; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; }
.t-card__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 500; color: var(--white);
    background: linear-gradient(150deg, hsl(var(--hue, 262) 40% 45%), hsl(var(--hue, 262) 45% 25%));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.t-card figcaption strong { display: block; font-size: .9rem; font-weight: 500; color: var(--white); }
.t-card figcaption em { font-style: normal; font-size: .74rem; letter-spacing: .1em; color: var(--lavender); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { background: linear-gradient(180deg, var(--purple-deepest), #241538 45%, #150c22); overflow: hidden; }
.contact__glow {
    position: absolute; left: 50%; top: -120px; transform: translateX(-50%);
    width: 700px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 91, 160, .22), transparent 65%);
    filter: blur(50px); pointer-events: none;
}

.contact__grid {
    display: grid; grid-template-columns: .9fr 1.1fr;
    gap: 70px; align-items: start;
}

.contact__info h3 { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; color: var(--white); margin-bottom: 14px; }
.contact__info > p { color: var(--lavender); margin-bottom: 34px; max-width: 420px; }

.contact__list { display: grid; gap: 22px; }
.contact__list li { display: flex; align-items: center; gap: 16px; }
.contact__icon {
    flex: 0 0 auto; width: 52px; height: 52px;
    display: grid; place-items: center; border-radius: 14px;
    background: rgba(122, 91, 160, .16);
    box-shadow: inset 0 0 0 1px rgba(122, 91, 160, .35);
    color: var(--gold-soft);
}
.contact__icon svg { width: 22px; height: 22px; }
.contact__list strong { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.contact__list a, .contact__list span:last-child { color: var(--lavender-soft); transition: color .3s; }
.contact__list a:hover { color: var(--white); }

.contact__form {
    padding: 44px; border-radius: var(--radius-lg);
    background: rgba(21, 12, 34, .55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(233, 226, 242, .08);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 20px; }
.form-field label {
    display: block; margin-bottom: 8px;
    font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--gold-soft);
}
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: 14px 18px;
    border-radius: 12px; border: 1px solid rgba(233, 226, 242, .14);
    background: rgba(233, 226, 242, .05);
    color: var(--white); font-family: var(--font-body); font-size: .95rem; font-weight: 300;
    transition: border-color .3s, box-shadow .3s, background .3s;
    resize: vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(207, 195, 224, .4); }
.form-field select { appearance: none; cursor: pointer; }
.form-field select option { background: var(--purple-deep); color: var(--white); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--gold);
    background: rgba(233, 226, 242, .08);
    box-shadow: 0 0 0 3px rgba(216, 180, 92, .15);
}
.form-field.is-invalid input, .form-field.is-invalid textarea { border-color: #d06a6a; }
.form-note { margin-top: 16px; font-size: .85rem; text-align: center; color: var(--gold-soft); min-height: 1.4em; }
.form-note.is-error { color: #e08a8a; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: #100a1a;
    border-top: 1px solid rgba(216, 180, 92, .16);
    padding-top: 80px;
}
.footer-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    gap: 60px; padding-bottom: 60px;
}
.footer__script { font-family: var(--font-script); font-size: 2.4rem; color: var(--white); display: block; margin-bottom: 14px; }
.footer-col p { font-size: .92rem; color: var(--lavender); max-width: 320px; }
.footer-col h4 {
    font-size: .78rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
    color: var(--gold-soft); margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 12px; }
.footer-col ul a { font-size: .92rem; color: var(--lavender); transition: color .3s, padding-left .3s; }
.footer-col ul a:hover { color: var(--gold-soft); padding-left: 6px; }

.footer-bottom { border-top: 1px solid rgba(233, 226, 242, .07); padding: 24px 0; }
.footer-bottom__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: .8rem; color: rgba(207, 195, 224, .65);
}
.footer-bottom__script { font-family: var(--font-script); font-size: 1.25rem; color: var(--gold-soft); }

/* Back to top */
.to-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 800;
    width: 50px; height: 50px; border-radius: 50%; border: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    color: var(--purple-deepest);
    box-shadow: 0 14px 30px -8px rgba(216, 180, 92, .5);
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity .4s, transform .4s, visibility .4s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-4px); }

/* ==========================================================================
   REVEAL INITIAL STATES (animated in by GSAP)
   ========================================================================== */
[data-reveal] { opacity: 0; }
.no-js [data-reveal], .gsap-missing [data-reveal] { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
    .hero__wrap { grid-template-columns: 1fr; text-align: center; gap: 70px; }
    .hero__content { display: flex; flex-direction: column; align-items: center; }
    .hero__lead { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__stats { justify-content: center; }
    .hero__book { order: 2; }
    .book-hint { bottom: -30px; }

    .about-book__grid, .about-author__grid, .contact__grid { grid-template-columns: 1fr; gap: 60px; }
    .about-author__grid { max-width: 640px; margin-inline: auto; }
    .author-card { max-width: 360px; margin-inline: auto; }
    .marquee .t-card { flex-basis: 340px; width: 340px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .section { padding: 80px 0; }

    /* Mobile nav */
    .hamburger { display: flex; }
    .nav {
        position: fixed; inset: 0; z-index: 1000;
        flex-direction: column; justify-content: center; gap: 40px;
        background: radial-gradient(circle at 50% 30%, rgba(87, 58, 117, .5), rgba(21, 12, 34, .98));
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        opacity: 0; visibility: hidden;
        transition: opacity .45s ease, visibility .45s;
    }
    .nav.is-open { opacity: 1; visibility: visible; }
    .nav__list { flex-direction: column; gap: 26px; }
    .nav__link { font-size: 1.05rem; letter-spacing: .2em; }
    .nav__cta { margin-top: 8px; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact__form { padding: 32px 24px; }
    .t-card blockquote { min-height: 0; }
}

@media (max-width: 620px) {
    .hero { padding-top: calc(var(--header-h) + 20px); }
    .hero__script { font-size: clamp(3.4rem, 15vw, 4.6rem); }
    .hero__stats { gap: 28px; }
    .hero__stats strong { font-size: 1.7rem; }
    .book-float { width: min(320px, 86%); }
    .hero__scroll { display: none; }

    .marquee .t-card { flex-basis: 290px; width: 290px; margin-right: 18px; }
    .marquee--right { margin-top: 18px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom__inner { justify-content: center; text-align: center; }

    .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
    .btn { padding: 13px 26px; }
    .hero__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__scroll span, .author-card__ring { animation: none; }
    .book-flip__inner { transition: none; }
    .marquee__track { animation: none; }
    .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}