:root {
    --night: #07111f;
    --night-two: #0c1e34;
    --night-three: #163b59;
    --ink: #13233a;
    --paper: #f5f1e8;
    --paper-dark: #ded6c7;
    --mint: #b9efd8;
    --mint-dark: #63b999;
    --gold: #fac77f;
    --muted: #8798aa;

    --mouse-x: 50vw;
    --mouse-y: 50vh;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;

    background: var(--night);
    color: white;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

body.book-is-closed {
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ==================================================
   CUSTOM CURSOR
   ================================================== */

.cursor-dot,
.cursor-ring {
    position: fixed;
    z-index: 10000;

    top: 0;
    left: 0;

    border-radius: 50%;
    pointer-events: none;

    transform:
        translate(-50%, -50%);
}

.cursor-dot {
    width: 8px;
    height: 8px;

    background: white;

    box-shadow:
        0 0 12px white,
        0 0 30px var(--mint);
}

.cursor-ring {
    z-index: 9999;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(185, 239, 216, 0.7);

    transition:
        width 0.25s ease,
        height 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

body.cursor-active .cursor-ring {
    width: 68px;
    height: 68px;

    border-color: var(--gold);
    background:
        rgba(250, 199, 127, 0.08);
}

body.cursor-active .cursor-dot {
    background: var(--gold);
}

@media (pointer: fine) {
    body,
    a,
    button,
    input,
    label {
        cursor: none;
    }
}

/* ==================================================
   BOOK INTRODUCTION
   ================================================== */

.book-intro {
    position: fixed;
    z-index: 9000;

    inset: 0;

    overflow: hidden;

    display: grid;
    place-items: center;

    background: #050c16;

    perspective: 1800px;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.book-intro.intro-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.book-background {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 38%,
            #183650 0%,
            #0b1b2e 38%,
            #050c16 78%
        );
}

.book-background::before {
    position: absolute;
    content: "";

    inset: 0;

    opacity: 0.17;

    background-image:
        radial-gradient(
            circle at 20% 25%,
            rgba(185, 239, 216, 0.7) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 75% 20%,
            rgba(250, 199, 127, 0.5) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 65% 70%,
            rgba(185, 239, 216, 0.5) 0 1px,
            transparent 2px
        );

    background-size:
        160px 160px,
        210px 210px,
        190px 190px;

    animation:
        bookStars 18s linear infinite;
}

@keyframes bookStars {
    to {
        background-position:
            160px 160px,
            -210px 210px,
            190px -190px;
    }
}

.book-scene {
    position: relative;
    z-index: 5;

    width: min(430px, 76vw);
    height: min(570px, 72vh);

    transform-style: preserve-3d;

    animation:
        bookArrival 1.25s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes bookArrival {
    from {
        opacity: 0;

        transform:
            translateY(80px)
            rotateX(22deg)
            rotateY(-18deg)
            scale(0.82);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            rotateX(8deg)
            rotateY(-7deg)
            scale(1);
    }
}

.book-object {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform 0.25s ease-out;
}

.book-cover {
    position: absolute;
    z-index: 4;

    inset: 0;

    overflow: hidden;

    padding: clamp(30px, 5vw, 55px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 5px 18px 18px 5px;
    border:
        1px solid rgba(185, 239, 216, 0.28);

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(51, 103, 126, 0.5),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #142f47,
            #091827 58%,
            #07111f
        );

    box-shadow:
        30px 35px 80px rgba(0, 0, 0, 0.52),
        inset 0 0 80px rgba(0, 0, 0, 0.22),
        inset 1px 0 rgba(255, 255, 255, 0.08);

    transform: translateZ(22px);
}

.book-cover::before {
    position: absolute;
    content: "";

    inset: 18px;

    border:
        1px solid rgba(185, 239, 216, 0.13);
    border-radius: 3px 13px 13px 3px;

    pointer-events: none;
}

.book-border {
    position: absolute;

    top: 25px;
    bottom: 25px;
    left: 23px;

    width: 2px;

    background:
        linear-gradient(
            transparent,
            var(--mint),
            transparent
        );

    opacity: 0.35;
}

.book-pages {
    position: absolute;
    z-index: 2;

    top: 8px;
    right: -13px;
    bottom: 8px;
    left: 9px;

    border-radius: 4px 19px 19px 4px;

    background:
        repeating-linear-gradient(
            to bottom,
            #ece4d5 0,
            #ece4d5 3px,
            #cec4b3 4px
        );

    transform:
        translateZ(3px)
        translateX(6px);

    box-shadow:
        18px 25px 45px rgba(0, 0, 0, 0.4);
}

.book-spine {
    position: absolute;
    z-index: 6;

    top: 0;
    bottom: 0;
    left: -8px;

    width: 24px;

    border-radius: 8px 0 0 8px;

    background:
        linear-gradient(
            90deg,
            #02070e,
            #17354e 55%,
            #08121e
        );

    box-shadow:
        -14px 0 30px rgba(0, 0, 0, 0.5);

    transform:
        translateZ(12px)
        rotateY(-10deg);
}

.book-cover-symbol {
    position: relative;

    width: 62px;
    height: 62px;

    margin-bottom: 35px;
}

.book-cover-symbol i {
    position: absolute;

    width: 17px;
    height: 17px;

    border:
        1px solid var(--mint);
    border-radius: 50%;

    box-shadow:
        0 0 16px rgba(185, 239, 216, 0.4);
}

.book-cover-symbol i:nth-child(1) {
    top: 0;
    left: 23px;
}

.book-cover-symbol i:nth-child(2) {
    bottom: 0;
    left: 0;
}

.book-cover-symbol i:nth-child(3) {
    right: 0;
    bottom: 0;
}

.book-cover-symbol::before,
.book-cover-symbol::after {
    position: absolute;
    content: "";

    top: 31px;

    width: 39px;
    height: 1px;

    background: var(--mint);
}

.book-cover-symbol::before {
    left: 5px;
    transform: rotate(-58deg);
}

.book-cover-symbol::after {
    right: 3px;
    transform: rotate(58deg);
}

.book-small-title {
    margin: 0 0 18px;

    color: #9eb6af;

    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 9px;
}

.book-title {
    margin: 0;

    color: white;

    text-align: center;

    font-family: Georgia, serif;
    font-size: clamp(47px, 6vw, 70px);
    line-height: 0.92;
    font-weight: 400;
    letter-spacing: -0.055em;
}

.book-title span {
    display: block;
    color: var(--mint);
    font-style: italic;
}

.book-subtitle {
    margin: 28px 0;

    color: #9aabba;

    text-align: center;
    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 1.65;
}

.open-book-button {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 17px 8px 8px;

    border:
        1px solid rgba(185, 239, 216, 0.35);
    border-radius: 999px;

    background:
        rgba(185, 239, 216, 0.06);

    color: white;

    font-size: 12px;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.open-book-button:hover {
    transform: translateY(-3px);

    background:
        rgba(185, 239, 216, 0.14);

    box-shadow:
        0 12px 35px
        rgba(107, 211, 172, 0.2);
}

.button-circle {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--mint);
    color: #07111f;
}

.book-instruction {
    margin: 16px 0 0;

    color: #647688;

    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 7px;
}

.book-shadow {
    position: absolute;

    right: -30px;
    bottom: -50px;
    left: -30px;

    height: 90px;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.65);

    filter: blur(30px);

    transform:
        rotateX(80deg)
        translateZ(-50px);
}

.skip-intro {
    position: absolute;
    z-index: 20;

    right: 28px;
    bottom: 24px;

    padding: 8px;

    border: 0;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.28);

    background: transparent;
    color: #8091a4;

    font-size: 10px;
}

/* Full screen book covers */

.opening-cover {
    position: absolute;
    z-index: 12;

    top: 0;
    bottom: 0;

    width: 51%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #173d59,
            #0a1929 58%,
            #050c16
        );

    transform-style: preserve-3d;
    pointer-events: none;

    opacity: 0;
}

.opening-cover-left {
    left: 0;

    border-right:
        1px solid rgba(185, 239, 216, 0.25);

    transform-origin: left center;
}

.opening-cover-right {
    right: 0;

    border-left:
        1px solid rgba(185, 239, 216, 0.25);

    transform-origin: right center;
}

.opening-cover-text {
    position: absolute;

    top: 50%;

    color: var(--mint);

    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 10px;
}

.opening-cover-left .opening-cover-text {
    right: 30px;
}

.opening-cover-right .opening-cover-text {
    left: 30px;
}

.opening-spine {
    position: absolute;
    z-index: 14;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 4px;

    opacity: 0;

    background:
        linear-gradient(
            transparent,
            var(--mint),
            white,
            var(--mint),
            transparent
        );

    box-shadow:
        0 0 30px var(--mint),
        0 0 100px rgba(185, 239, 216, 0.7);

    transform: translateX(-50%);
}

.turning-page {
    position: absolute;
    z-index: 16;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    opacity: 0;

    transform-origin: left center;
    transform-style: preserve-3d;

    pointer-events: none;
}

.turning-page-front,
.turning-page-back {
    position: absolute;

    inset: 0;

    backface-visibility: hidden;
}

.turning-page-front {
    display: grid;
    place-items: center;

    padding: 12vw;

    background:
        linear-gradient(
            90deg,
            #ddd3c2,
            #f7f1e5 15%,
            #fffdf7
        );

    color: var(--ink);

    box-shadow:
        -25px 0 70px rgba(0, 0, 0, 0.3);
}

.turning-page-front span {
    position: absolute;

    top: 30px;
    right: 35px;

    color: #8e897e;
    font-size: 10px;
}

.turning-page-front p {
    max-width: 320px;

    font-family: Georgia, serif;
    font-size: clamp(28px, 4vw, 50px);
    line-height: 1.1;
    text-align: center;
}

.turning-page-back {
    background:
        linear-gradient(
            -90deg,
            #c9bead,
            #eee7da
        );

    transform: rotateY(180deg);
}

/* Opening animation */

.book-intro.opening .book-scene {
    animation:
        shrinkBook 0.65s ease forwards;
}

.book-intro.opening .opening-cover {
    opacity: 1;
}

.book-intro.opening .opening-spine {
    opacity: 1;

    animation:
        spineGlow 1.4s ease forwards;
}

.book-intro.opening .opening-cover-left {
    animation:
        openLeftCover 1.35s
        cubic-bezier(0.65, 0, 0.2, 1)
        0.45s forwards;
}

.book-intro.opening .opening-cover-right {
    animation:
        openRightCover 1.35s
        cubic-bezier(0.65, 0, 0.2, 1)
        0.45s forwards;
}

.book-intro.opening .turning-page {
    opacity: 1;

    animation:
        turnBookPage 1.25s
        cubic-bezier(0.65, 0, 0.25, 1)
        1.15s forwards;
}

@keyframes shrinkBook {
    to {
        opacity: 0;

        transform:
            scale(0.65)
            translateZ(-500px);
    }
}

@keyframes openLeftCover {
    from {
        transform:
            perspective(1800px)
            rotateY(0);
    }

    to {
        transform:
            perspective(1800px)
            rotateY(-105deg);
    }
}

@keyframes openRightCover {
    from {
        transform:
            perspective(1800px)
            rotateY(0);
    }

    to {
        transform:
            perspective(1800px)
            rotateY(105deg);
    }
}

@keyframes spineGlow {
    50% {
        width: 10px;
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes turnBookPage {
    from {
        transform:
            perspective(1800px)
            rotateY(0);
    }

    to {
        transform:
            perspective(1800px)
            rotateY(-180deg);
    }
}

/* ==================================================
   WEBSITE AND HEADER
   ================================================== */

.website {
    opacity: 0;

    transition:
        opacity 1s ease;
}

.website.website-revealed {
    opacity: 1;
}

.site-header {
    position: absolute;
    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 5vw;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: inherit;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.brand-symbol {
    position: relative;

    width: 28px;
    height: 28px;
}

.brand-symbol i {
    position: absolute;

    width: 8px;
    height: 8px;

    border: 1px solid var(--mint);
    border-radius: 50%;
}

.brand-symbol i:nth-child(1) {
    top: 0;
    left: 10px;
}

.brand-symbol i:nth-child(2) {
    bottom: 0;
    left: 0;
}

.brand-symbol i:nth-child(3) {
    right: 0;
    bottom: 0;
}

.brand-symbol::before,
.brand-symbol::after {
    position: absolute;

    content: "";

    top: 14px;

    width: 18px;
    height: 1px;

    background: var(--mint);
}

.brand-symbol::before {
    left: 3px;

    transform: rotate(-58deg);
}

.brand-symbol::after {
    right: 0;

    transform: rotate(58deg);
}

.header-link {
    color: #d7e1ec;
    text-decoration: none;

    padding-bottom: 5px;

    border-bottom:
        1px solid rgba(215, 225, 236, 0.4);

    font-size: 12px;
}

/* ==================================================
   HERO
   ================================================== */

.hero {
    position: relative;

    min-height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 125px 8vw 90px;

    background:
        radial-gradient(
            circle at 68% 48%,
            #153c59,
            #0d2139 38%,
            #07111f 78%
        );

    perspective: 1400px;
}

.hero::before {
    position: absolute;
    z-index: 2;

    content: "";
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            500px circle
            at var(--mouse-x) var(--mouse-y),
            rgba(137, 238, 199, 0.16),
            rgba(82, 142, 194, 0.05) 40%,
            transparent 70%
        );
}

#particleCanvas {
    position: absolute;
    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 8;

    width: min(690px, 56vw);

    transform-style: preserve-3d;
    will-change: transform;

    transition:
        transform 0.2s ease-out;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 22px;

    color: #a6c8bd;

    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    font-weight: 700;
}

.eyebrow > span {
    display: inline-block;

    width: 32px;
    height: 1px;

    background: currentColor;
}

.hero-title {
    margin: 0;

    font-family: Georgia, serif;
    font-size: clamp(56px, 7vw, 108px);
    line-height: 0.91;
    font-weight: 400;
    letter-spacing: -0.06em;

    text-shadow:
        0 40px 100px rgba(0, 0, 0, 0.28);

    transform: translateZ(55px);
}

.hero-title em {
    display: block;

    color: var(--mint);
    font-weight: 400;
}

.hero-description {
    max-width: 560px;

    margin: 30px 0 35px;

    color: #c4d0dd;

    font-size: 17px;
    line-height: 1.7;

    transform: translateZ(35px);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;

    transform: translateZ(45px);
}

.main-button {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    gap: 30px;

    padding: 17px 25px;

    border: 0;
    border-radius: 999px;

    background: var(--mint);
    color: #102238;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}

.main-button:hover {
    box-shadow:
        0 18px 50px
        rgba(105, 213, 173, 0.3);
}

.main-button:disabled {
    opacity: 0.35;
}

.privacy-note {
    color: #8394a9;

    font-size: 10px;
    line-height: 1.6;
}

.privacy-note b {
    color: #7fdbb4;
}

/* ORBIT */

.orbital-system {
    position: absolute;
    z-index: 5;

    top: 50%;
    right: 5vw;

    width: 570px;
    height: 570px;

    transform:
        translateY(-50%)
        rotateX(62deg)
        rotateZ(-10deg);

    transform-style: preserve-3d;

    transition:
        transform 0.2s ease-out;
}

.orbit {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(185, 239, 216, 0.18);

    border-radius: 50%;

    animation:
        rotateOrbit 20s linear infinite;
}

.orbit-two {
    inset: 75px;

    animation-duration: 14s;
    animation-direction: reverse;
}

.orbit-three {
    inset: 150px;

    animation-duration: 10s;
}

.orbit span {
    position: absolute;

    top: 13%;
    left: 13%;

    width: 11px;
    height: 11px;

    border-radius: 50%;
    background: var(--mint);

    box-shadow:
        0 0 18px var(--mint),
        0 0 45px rgba(185, 239, 216, 0.5);
}

.orbit-two span {
    top: auto;
    left: auto;
    right: 4%;
    bottom: 28%;

    background: var(--gold);
}

.orbit-three span {
    top: 46%;
    left: -5px;

    background: white;
}

.central-orb {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 105px;
    height: 105px;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(-62deg);

    background:
        radial-gradient(
            circle at 34% 28%,
            white,
            #e5fff4 14%,
            #a5dec8 48%,
            #5b9e87
        );

    box-shadow:
        0 0 35px rgba(185, 239, 216, 0.8),
        0 0 100px rgba(105, 196, 163, 0.6),
        inset -18px -22px 35px rgba(38, 94, 77, 0.27);
}

.pulse {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

    border:
        1px solid
        rgba(185, 239, 216, 0.42);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    animation:
        pulseAnimation 3.3s ease-out infinite;
}

.pulse-two {
    animation-delay: 1.65s;
}

@keyframes rotateOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseAnimation {
    from {
        opacity: 0.8;

        transform:
            translate(-50%, -50%)
            scale(0.5);
    }

    to {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(3.2);
    }
}

.journey-card {
    position: absolute;
    z-index: 9;

    right: 6vw;
    bottom: 9%;

    width: 180px;
    padding: 19px;

    border:
        1px solid
        rgba(173, 199, 218, 0.23);

    background:
        rgba(20, 43, 70, 0.7);

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease-out;
}

.journey-card small {
    color: #8293a8;

    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 8px;
}

.journey-card strong {
    display: block;

    margin: 10px 0;

    font-family: Georgia, serif;
    font-size: 31px;
    font-weight: 400;
}

.journey-card sup {
    font: 8px Arial;
    color: #9eafc2;
}

.journey-card p {
    margin: 0;

    color: #aebccc;
    font-size: 9px;
}

.journey-card p span {
    color: #72d5ad;
}

.replay-book-button {
    position: absolute;
    z-index: 12;

    left: 5vw;
    bottom: 25px;

    padding: 8px;

    border: 0;

    background: transparent;
    color: #687d91;

    font-size: 9px;
}

/* ==================================================
   STUDY
   ================================================== */

.study-section {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 90px 7vw;

    background:
        radial-gradient(
            circle at 50% 30%,
            white,
            #f5f1e8 55%,
            #ebe5d9
        );

    color: var(--ink);

    perspective: 1500px;
}

.study-introduction,
.success-section {
    max-width: 800px;

    text-align: center;
}

.dark-eyebrow {
    justify-content: center;

    color: #6a7d77;
}

.study-introduction h2,
.success-section h2 {
    margin: 20px 0 35px;

    font-family: Georgia, serif;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 1.03;
    font-weight: 400;
    letter-spacing: -0.045em;
}

.dark-button {
    background: var(--night);
    color: white;
}

.study-card {
    position: relative;
    overflow: hidden;

    width: min(100%, 1000px);

    padding:
        35px clamp(22px, 5vw, 70px);

    border:
        1px solid
        rgba(121, 126, 120, 0.22);

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

    backdrop-filter: blur(24px);

    box-shadow:
        0 40px 110px
        rgba(43, 60, 74, 0.18);

    transition:
        transform 0.2s ease-out;
}

.study-header {
    display: flex;
    justify-content: space-between;

    color: #76827f;

    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 9px;
}

.progress-track {
    height: 2px;

    margin: 15px 0 50px;

    background: #dcd7cc;
}

.progress-track span {
    position: relative;

    display: block;

    width: 20%;
    height: 100%;

    background: #4e7668;

    box-shadow:
        0 0 14px
        rgba(78, 118, 104, 0.5);

    transition:
        width 0.45s ease;
}

#questionContainer {
    animation:
        questionEntrance 0.55s
        cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes questionEntrance {
    from {
        opacity: 0;
        filter: blur(8px);

        transform:
            translateY(24px);
    }

    to {
        opacity: 1;
        filter: blur(0);

        transform:
            translateY(0);
    }
}

.question-label {
    color: #70817b;

    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
}

.study-card h2 {
    max-width: 800px;

    margin: 14px 0 36px;

    font-family: Georgia, serif;
    font-size: clamp(36px, 5vw, 59px);
    line-height: 1.05;
    font-weight: 400;
}

.option-grid,
.option-list {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}

.option-button {
    min-height: 60px;

    padding: 17px;

    border: 1px solid #d5d1c7;

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

    color: var(--ink);
    text-align: left;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.option-grid .option-button {
    min-height: 128px;
}

.option-button:hover {
    background: #e9f4ef;

    transform:
        translateY(-5px)
        rotateX(2deg);

    box-shadow:
        0 18px 45px
        rgba(38, 79, 68, 0.14);
}

.option-button.selected {
    border-color: #588171;
    background: #dceee6;
}

.option-button strong {
    display: block;

    margin: 24px 0 5px;

    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.option-button small {
    color: #77827f;
}

.radio-circle {
    display: inline-block;

    width: 13px;
    height: 13px;

    margin-right: 12px;

    border: 1px solid #87948f;
    border-radius: 50%;

    vertical-align: -2px;
}

.option-button.selected .radio-circle {
    border: 4px solid #dceee6;

    background: #477264;

    box-shadow:
        0 0 0 1px #477264;
}

.selection-count {
    color: #7b8883;

    text-align: right;
    font-size: 10px;
}

.truth-panel {
    padding: 28px 5vw;

    text-align: center;
}

.truth-panel > p:last-child {
    max-width: 590px;

    margin: auto;

    color: #687572;
    line-height: 1.75;
}

.study-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 38px;
    padding-top: 24px;

    border-top:
        1px solid #dcd8cf;
}

.back-button,
.return-button {
    border: 0;

    background: transparent;
    color: #687571;
}

.back-button:disabled {
    opacity: 0.25;
}

.warm-button {
    background: var(--gold);
}

/* EMAIL FORM */

.email-form {
    margin-top: 30px;
    padding: 26px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;

    background:
        linear-gradient(
            145deg,
            #19304d,
            #0c1e34
        );

    color: white;
}

.email-form h3 {
    margin: 0;

    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
}

.email-form label {
    color: #afbdca;
    font-size: 10px;
}

.email-form input[type="email"],
.email-form select {
    display: block;

    width: 100%;
    margin-top: 8px;
    padding: 14px;

    border: 1px solid #566a80;

    background: #0d2037;
    color: white;
}

.email-form select {
    min-height: 48px;
    cursor: pointer;
}

.email-form option {
    background: #0d2037;
    color: white;
}

.form-field small {
    display: block;
    margin-top: 4px;
    color: #8193a7;
    font-size: 9px;
}

.consent-row {
    grid-column: 1 / -1;

    display: flex;
    gap: 9px;
}

.botcheck {
    position: absolute !important;
    left: -9999px !important;

    opacity: 0 !important;
}

.form-warning {
    color: #8193a7;

    font-size: 10px;
}

.form-status {
    grid-column: 1 / -1;

    margin: 0;

    color: var(--gold);
    font-size: 12px;
}

.form-status.error {
    color: #ffaaa1;
}

.success-icon {
    display: grid;
    place-items: center;

    width: 85px;
    height: 85px;

    margin: 0 auto 35px;

    border-radius: 50%;

    background: #5f9d86;

    color: white;
    font-size: 30px;
}

/* ABOUT */

.about-section {
    padding: 110px 8vw;

    background: #f8f6f0;
    color: var(--ink);
}

.about-grid {
    display: grid;
    grid-template-columns:
        1.2fr 0.8fr;

    gap: 8vw;
}

.about-grid h2 {
    margin: 20px 0;

    font-family: Georgia, serif;
    font-size: clamp(43px, 6vw, 76px);
    line-height: 1.03;
    font-weight: 400;
}

.about-description p {
    color: #64716e;
    line-height: 1.75;
}

.principles {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 75px;

    border-top:
        1px solid #d1cfc8;
}

.principles article {
    padding: 28px;

    border-right:
        1px solid #d1cfc8;

    transition:
        transform 0.25s ease;
}

.principles article:hover {
    transform: translateY(-6px);
}

.principles article:last-child {
    border-right: 0;
}

.principles h3 {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.principles p {
    color: #6b7774;
    line-height: 1.6;
}

/* FOOTER */

footer {
    padding: 33px 5vw;

    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;

    align-items: center;

    background: #06101d;
    color: #aebbca;

    font-size: 10px;
}

footer p:nth-child(2) {
    text-align: center;
}

footer p:last-child {
    text-align: right;
}

/* RESPONSIVE */

@media (max-width: 950px) {
    .hero-content {
        width: 75vw;
    }

    .orbital-system {
        right: -220px;
        opacity: 0.62;
    }

    .journey-card {
        display: none;
    }

    .about-grid,
    .principles {
        grid-template-columns: 1fr;
    }

    .email-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    .book-scene {
        width: 72vw;
        height: 60vh;
    }

    .book-cover {
        padding: 25px;
    }

    .book-title {
        font-size: 48px;
    }

    .book-subtitle {
        font-size: 11px;
    }

    .opening-cover-text {
        display: none;
    }

    .header-link {
        display: none;
    }

    .hero {
        min-height: 830px;
        align-items: flex-start;

        padding:
            115px 24px 80px;
    }

    .hero-content {
        width: 100%;
    }

    .hero-title {
        margin-top: 45px;

        font-size: 55px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .orbital-system {
        top: 68%;
        right: -160px;

        width: 410px;
        height: 410px;
    }

    .study-section {
        padding: 60px 15px;
    }

    .study-card {
        padding: 25px 18px;
    }

    .option-grid,
    .option-list {
        grid-template-columns: 1fr;
    }

    .email-form {
        padding: 20px;
    }

    .about-section {
        padding: 75px 24px;
    }

    footer {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    footer p:nth-child(2),
    footer p:last-child {
        margin: 0;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.turnstile-wrapper {
    grid-column: 1 / -1;
    min-height: 65px;
    overflow: hidden;
}

/* ==================================================
   VISIBLE CONTINUE/SUBMIT BUTTON INTERACTION
   Paste this at the very bottom of styles.css
   ================================================== */

/* Available/enabled Continue button */
#nextButton:not(:disabled),
#submitButton:not(:disabled) {
    border: 2px solid transparent;

    background: #fac77f;
    color: #10213a;

    opacity: 1;

    box-shadow:
        0 10px 28px rgba(250, 199, 127, 0.25);

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.18s ease;
}

/* Clear color change when the mouse is over the button */
#nextButton:not(:disabled):hover,
#submitButton:not(:disabled):hover {
    border-color: #b9efd8;

    background: #10213a;
    color: #b9efd8;

    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 0 0 5px rgba(185, 239, 216, 0.16),
        0 18px 45px rgba(16, 33, 58, 0.28),
        0 0 35px rgba(185, 239, 216, 0.32);
}

/* Make the arrow clearly visible on hover */
#nextButton:not(:disabled):hover span,
#submitButton:not(:disabled):hover span {
    color: #fac77f;

    transform: translateX(5px);
}

/* Add animation to the arrow */
#nextButton span,
#submitButton span {
    display: inline-block;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

/* Visible pressed/clicking state */
#nextButton:not(:disabled):active,
#submitButton:not(:disabled):active {
    background: #b9efd8;
    color: #10213a;

    transform:
        translateY(0)
        scale(0.97);

    box-shadow:
        0 5px 15px rgba(16, 33, 58, 0.25);
}

/* Visible keyboard focus */
#nextButton:focus-visible,
#submitButton:focus-visible {
    outline: 4px solid #5f9d86;
    outline-offset: 5px;

    background: #10213a;
    color: #ffffff;
}

/* Clearly disabled before an answer is selected */
#nextButton:disabled,
#submitButton:disabled {
    border: 2px solid #d8d6ce;

    background: #eceae4;
    color: #9a9d99;

    opacity: 0.65;

    box-shadow: none;

    cursor: not-allowed;
}

/* Keep the custom cursor visible over buttons */
body.cursor-active .cursor-dot {
    width: 10px;
    height: 10px;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(16, 33, 58, 0.75),
        0 0 16px #ffffff,
        0 0 28px #b9efd8;
}

/* Visible cursor ring over both light and dark buttons */
body.cursor-active .cursor-ring {
    width: 70px;
    height: 70px;

    border: 2px solid #b9efd8;

    background: rgba(16, 33, 58, 0.16);

    box-shadow:
        0 0 0 1px rgba(16, 33, 58, 0.35),
        0 0 25px rgba(185, 239, 216, 0.5);
}

/* Touchscreen devices do not need mouse hover effects */
@media (hover: none) {
    #nextButton:not(:disabled):hover,
    #submitButton:not(:disabled):hover {
        border-color: transparent;

        background: #fac77f;
        color: #10213a;

        transform: none;

        box-shadow:
            0 10px 28px rgba(250, 199, 127, 0.25);
    }
}

/* ==================================================
   CORRECTED BOOK COVER SYMBOL POSITION
   ================================================== */

.book-cover-symbol {
    position: relative;

    width: 62px;
    height: 62px;

    /* Do not allow the symbol to shrink */
    flex: 0 0 62px;

    /* Move the entire symbol slightly downward */
    transform: translateY(8px);

    /* Balanced spacing above and below */
    margin-top: 12px;
    margin-bottom: 32px;
}

.book-cover-symbol i,
.book-cover-symbol::before,
.book-cover-symbol::after {
    z-index: 1;
}

.book-small-title {
    position: relative;
    z-index: 2;

    display: block;

    margin: 0 0 18px;

    color: #9eb6af;

    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1.4;
    font-size: 9px;
}

/* Mobile adjustment */
@media (max-width: 680px) {
    .book-cover-symbol {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        margin-top: 8px;
        margin-bottom: 24px;

        transform:
            translateY(5px)
            scale(0.88);
    }

    .book-small-title {
        margin-bottom: 15px;

        font-size: 8px;
        letter-spacing: 0.18em;
    }
}