/* =========================================================
   ERIC GRANT GLOBAL
   Main Website Stylesheet

   Sections:
   01. Design tokens
   02. Reset and global styles
   03. Shared layout
   04. Header and navigation
   05. Buttons
   06. Homepage hero
   07. General page sections
   08. Cards and content components
   09. About and opportunity components
   10. Contact and forms
   11. Download page
   12. Footer
   13. Animation helpers
   14. Responsive layout
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    --navy: #0b1f3a;
    --navy-2: #142b49;
    --navy-3: #173859;

    --gold: #c59b2b;
    --gold-2: #e5bf4d;
    --gold-light: #f1cf6a;

    --green: #2c7a5b;

    --ink: #172033;
    --muted: #617087;

    --paper: #ffffff;
    --mist: #f3f6fa;
    --line: #dfe6ee;

    --success: #7ee2a8;
    --error: #ffb4b4;

    --shadow:
        0 20px 60px rgba(11, 31, 58, 0.12);

    --shadow-small:
        0 13px 40px rgba(11, 31, 58, 0.08);

    --radius: 24px;
    --radius-small: 16px;

    --content-width: 1180px;
}


/* =========================================================
   02. RESET AND GLOBAL STYLES
========================================================= */

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

html {
    scroll-behavior: smooth;
}

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

    background: var(--paper);
    color: var(--ink);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.65;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}


/* =========================================================
   03. SHARED LAYOUT
========================================================= */

.container {
    width: min(
        var(--content-width),
        calc(100% - 40px)
    );

    margin-inline: auto;
}

.section {
    padding: 100px 0;
}

.section.mist {
    background: var(--mist);
}

.section-title {
    max-width: 720px;
    margin-bottom: 45px;
}

.section-title.center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.section-title h2 {
    margin: 10px 0 18px;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.section-title p {
    margin: 0;

    color: var(--muted);
    font-size: 18px;
}

.eyebrow {
    color: var(--gold);

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 75px;
}


/* =========================================================
   ACCESSIBILITY HELPERS
========================================================= */

.skip-link {
    position: fixed;
    top: -80px;
    left: 12px;
    z-index: 9999;

    padding: 10px 14px;

    background: var(--paper);
    color: var(--navy);
}

.skip-link:focus {
    top: 12px;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================================================
   04. HEADER AND NAVIGATION
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom:
        1px solid rgba(223, 230, 238, 0.8);

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

    backdrop-filter: blur(16px);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    height: 72px;
}

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

    line-height: 1;
}

.brand-mark {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    background: var(--navy);
    color: var(--gold-2);

    box-shadow:
        0 8px 22px rgba(11, 31, 58, 0.2);

    font:
        900 italic 34px
        Georgia,
        serif;
}

.brand strong {
    display: block;
    font-size: 20px;
}

.brand small {
    display: block;

    margin-top: 5px;

    color: var(--gold);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 23px;

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

.primary-nav a {
    position: relative;
    padding: 12px 0;
}

.primary-nav a:not(.nav-cta)::after {
    position: absolute;
    right: 100%;
    bottom: 5px;
    left: 0;

    height: 2px;

    background: var(--gold);

    content: "";
    transition: right 0.25s ease;
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
    right: 0;
}

.primary-nav .blog-link {
    color: var(--navy);
    font-weight: 850;
}

.menu-toggle {
    display: none;

    padding: 8px;

    border: 0;
    background: transparent;
}

.menu-toggle span:not(.sr-only) {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px;

    background: var(--navy);
}

/* =========================================================
   HEADER LOGO
========================================================= */

.brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo img {
    display: block;
    width: auto;
    height: 42px;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .brand-logo img {
        height: 38px;
    }
}

@media (max-width: 620px) {
    .brand-logo img {
        height: 34px;
        max-width: 245px;
    }
}

/* =========================================================
   05. BUTTONS
========================================================= */

.nav-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 14px 22px;

    border: 0;
    border-radius: 999px;

    background: var(--navy);
    color: var(--paper);

    box-shadow:
        0 10px 26px rgba(11, 31, 58, 0.16);

    font-weight: 800;

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

.nav-cta {
    padding: 11px 17px !important;
}

.btn:hover,
.nav-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(11, 31, 58, 0.22);
}

.btn.gold,
.btn-gold {
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-2)
        );

    color: var(--navy);
}

.btn.gold:hover,
.btn-gold:hover {
    background:
        linear-gradient(
            135deg,
            var(--gold-2),
            var(--gold-light)
        );
}

.btn.ghost,
.btn-outline {
    border: 2px solid var(--navy);

    background: transparent;
    color: var(--navy);

    box-shadow: none;
}


/* =========================================================
   06. HOMEPAGE HERO
========================================================= */

.hero {
    position: relative;

    display: grid;
    align-items: center;

    min-height: calc(100vh - 78px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(197, 155, 43, 0.22),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef3f8 100%
        );
}

.hero::before {
    position: absolute;
    right: -100px;
    bottom: -130px;

    width: 430px;
    height: 430px;

    border:
        1px solid rgba(197, 155, 43, 0.22);

    border-radius: 50%;

    content: "";
}

.hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, 0.96fr);

    align-items: center;
    gap: 70px;

    padding: 72px 0;
}

.hero h1,
.page-hero h1 {
    margin: 16px 0 22px;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(45px, 6.2vw, 78px);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.hero h1 span {
    color: var(--gold);
}

.lead {
    max-width: 670px;

    color: var(--muted);
    font-size: 19px;
}

.button-row,
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.trust-row,
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    margin-top: 34px;

    color: var(--navy);

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

.trust-row span::before {
    margin-right: 7px;

    color: var(--green);

    content: "✓";
}

.hero-photo,
.hero-image {
    position: relative;
}

.hero-photo img,
.hero-image img {
    width: 100%;
    height: min(70vh, 690px);

    border-radius:
        42% 42% 28px 28px;

    object-fit: cover;
    object-position: center 20%;

    box-shadow: var(--shadow);
}

.hero-photo::before {
    position: absolute;
    z-index: -1;
    inset: -18px 25px 25px -18px;

    border: 2px solid var(--gold);

    border-radius:
        44% 44% 32px 32px;

    content: "";
}

.floating-card {
    position: absolute;
    bottom: 35px;
    left: -35px;

    max-width: 260px;

    padding: 19px 22px;

    border-radius: 18px;

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

    box-shadow: var(--shadow);
}

.floating-card strong {
    display: block;

    color: var(--navy);

    font-size: 25px;
}


/* =========================================================
   07. GENERAL PAGE SECTIONS
========================================================= */

.page-hero {
    padding: 105px 0 80px;

    background:
        linear-gradient(
            135deg,
            var(--mist),
            var(--paper)
        );

    text-align: center;
}

.page-hero h1 {
    margin-bottom: 17px;
    font-size: clamp(44px, 5.6vw, 70px);
}

.page-hero p {
    max-width: 760px;
    margin: auto;

    color: var(--muted);
    font-size: 19px;
}

.cta-panel {
    position: relative;

    padding: 65px;

    overflow: hidden;
    border-radius: 32px;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-3)
        );

    color: var(--paper);
}

.cta-panel::after {
    position: absolute;
    top: -90px;
    right: -90px;

    width: 270px;
    height: 270px;

    border:
        65px solid rgba(197, 155, 43, 0.15);

    border-radius: 50%;

    content: "";
}

.cta-panel h2 {
    margin: 0 0 16px;

    font-family:
        Georgia,
        serif;

    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.1;
}

.cta-panel p {
    max-width: 700px;

    color: #dfe8f1;
    font-size: 18px;
}


/* =========================================================
   08. CARDS AND CONTENT COMPONENTS
========================================================= */

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

    gap: 22px;
}

.card {
    padding: 28px;

    border:
        1px solid rgba(223, 230, 238, 0.8);

    border-radius: var(--radius);

    background: var(--paper);

    box-shadow: var(--shadow-small);

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

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

.card h3 {
    margin: 0 0 9px;

    color: var(--navy);
    font-size: 20px;
}

.card p {
    margin: 0;
    color: var(--muted);
}

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

    width: 50px;
    height: 50px;

    margin-bottom: 17px;

    border-radius: 16px;

    background:
        rgba(197, 155, 43, 0.13);

    font-size: 24px;
}

.link-arrow {
    display: inline-block;

    margin-top: 17px;

    color: var(--gold);
    font-weight: 850;
}

.resource-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.resource-card .icon {
    flex: 0 0 50px;
}

.post-card {
    padding: 0;
    overflow: hidden;
}

.post-image {
    position: relative;

    height: 200px;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #2f5478
        );
}

.post-image::after {
    position: absolute;
    right: 20px;
    bottom: 6px;

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

    content: "EG";

    font:
        900 82px
        Georgia,
        serif;
}

.post-body {
    padding: 26px;
}

.post-meta {
    color: var(--gold);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post-body h3 {
    margin: 9px 0;

    font-family:
        Georgia,
        serif;

    font-size: 23px;
    line-height: 1.2;
}


/* =========================================================
   09. ABOUT AND OPPORTUNITY COMPONENTS
========================================================= */

.portrait-card {
    position: relative;

    overflow: hidden;
    border-radius: 28px;

    box-shadow: var(--shadow);
}

.portrait-card img {
    width: 100%;
    height: 620px;

    object-fit: cover;
}

.portrait-card .caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 35px;

    background:
        linear-gradient(
            transparent,
            rgba(11, 31, 58, 0.94)
        );

    color: var(--paper);
}

.quote {
    padding: 4px 0 4px 20px;

    border-left:
        4px solid var(--gold);

    color: var(--navy);

    font-family:
        Georgia,
        serif;

    font-size: 21px;
}

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

    gap: 14px;

    margin-top: 28px;
}

.stat {
    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--paper);
}

.stat strong {
    display: block;

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

.values-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.journey {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    counter-reset: journey;
}

.journey-step {
    position: relative;

    padding: 25px 12px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--paper);

    text-align: center;
}

.journey-step::before {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    margin: 0 auto 12px;

    border-radius: 50%;

    background: var(--gold);
    color: var(--navy);

    content: counter(journey);
    counter-increment: journey;

    font-weight: 900;
}

.journey-step:not(:last-child)::after {
    position: absolute;
    top: 28px;
    right: -18px;
    z-index: 2;

    color: var(--gold);

    content: "→";

    font-size: 25px;
}


/* =========================================================
   10. CONTACT AND FORMS
========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 50px;
}

.contact-list {
    display: grid;
    gap: 15px;

    margin-top: 28px;
}

.contact-item {
    padding: 20px;

    border-radius: 17px;

    background: var(--mist);
}

.contact-form {
    padding: 35px;

    border-radius: 28px;

    background: var(--paper);

    box-shadow: var(--shadow);
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid var(--line);
    border-radius: 13px;

    background: var(--paper);
    color: var(--ink);
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.notice {
    padding: 15px;
    margin-bottom: 20px;

    border-radius: 13px;
}

.notice.success {
    background: #eaf8f1;
    color: #176345;
}

.notice.error {
    background: #fff1f1;
    color: #8d2b2b;
}


/* Honeypot must remain hidden on every screen size. */

.honeypot {
    position: absolute !important;
    top: auto !important;
    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* Shared form response message */

.form-message {
    width: 100%;

    margin: 10px 0 0;

    font-size: 0.92rem;
    line-height: 1.45;
}

.form-message.is-success {
    color: var(--success);
}

.form-message.is-error {
    color: var(--error);
}

/* Contact-form consent checkbox */

.consent-field {
    margin: 4px 0 22px;
}

.consent-field label {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    color: var(--muted);

    font-size: 0.92rem;
    line-height: 1.55;

    cursor: pointer;
}

.consent-field input[type="checkbox"] {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 3px;

    accent-color: var(--gold);
}

.ajax-contact-form button:disabled {
    cursor: wait;
    opacity: 0.7;
}


/* =========================================================
   11. DOWNLOAD PAGE
========================================================= */

.download-hero {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(213, 170, 42, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fafc,
            #eef3f9
        );
}

.download-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    align-items: center;
    gap: 70px;
}

.download-content h1 {
    max-width: 760px;

    margin: 16px 0 24px;

    color: #08203a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 0.98;
}

.download-intro {
    max-width: 720px;

    color: #5d6c7d;

    font-size: 1.18rem;
    line-height: 1.8;
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 34px;
}

.download-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.download-actions .btn:first-child {
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-2)
        );

    color: var(--navy);
}

.download-actions .btn:first-child:hover {
    background:
        linear-gradient(
            135deg,
            var(--gold-2),
            var(--gold-light)
        );
}

.download-actions .btn-outline {
    border: 2px solid var(--navy);

    background: transparent;
    color: var(--navy);

    box-shadow: none;
}

.download-note {
    margin-top: 20px;

    color: #758397;
    font-size: 0.95rem;
}

/* =========================================================
   DOWNLOAD PAGE — PREMIUM EBOOK MOCK-UP
========================================================= */

.guide-preview-card {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 30px 20px;
}


/* Holds the complete book and decorative shadow */

.ebook-showcase {
    position: relative;

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

    width: min(100%, 470px);
    min-height: 620px;

    perspective: 1600px;
}


/* Soft shadow underneath the book */

.ebook-floor-shadow {
    position: absolute;
    right: 7%;
    bottom: 3%;
    left: 9%;

    height: 44px;

    border-radius: 50%;

    background:
        rgba(5, 24, 43, 0.25);

    filter: blur(20px);

    transform:
        rotate(-2deg)
        scaleX(0.9);
}


/* The whole 3D book */

.ebook {
    position: relative;
    z-index: 2;

    width: min(100%, 390px);
    height: 560px;

    transform:
        rotateY(-8deg)
        rotateX(1.5deg)
        rotateZ(-1deg);

    transform-style: preserve-3d;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;

    filter:
        drop-shadow(
            0 30px 35px rgba(5, 24, 43, 0.25)
        );
}

.ebook:hover {
    transform:
        rotateY(-3deg)
        rotateX(0deg)
        rotateZ(0deg)
        translateY(-7px);

    filter:
        drop-shadow(
            0 38px 42px rgba(5, 24, 43, 0.3)
        );
}


/* Front cover */

.ebook-cover {
    position: absolute;
    z-index: 3;
    inset: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 30px 30px 26px;

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

    border-radius:
        5px 22px 22px 5px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(229, 191, 77, 0.34),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #06182c 0%,
            #0a2a4b 52%,
            #123f67 100%
        );

    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -10px 0 28px rgba(0, 0, 0, 0.13);

    color: var(--paper);

    transform: translateZ(18px);
}


/* Decorative rings and fine pattern */

.ebook-cover-pattern {
    position: absolute;
    top: -90px;
    right: -100px;

    width: 290px;
    height: 290px;

    border:
        43px solid rgba(213, 170, 42, 0.12);

    border-radius: 50%;

    pointer-events: none;
}

.ebook-cover-pattern::before {
    position: absolute;
    inset: 36px;

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

    border-radius: 50%;

    content: "";
}

.ebook-cover-pattern::after {
    position: absolute;
    top: 245px;
    left: -205px;

    width: 360px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229, 191, 77, 0.38),
            transparent
        );

    content: "";
    transform: rotate(-38deg);
}


/* Brand at the top of the ebook */

.ebook-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 11px;
}

.ebook-brand-mark {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: #07172c;
    color: var(--gold-2);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22);

    font:
        900 italic 31px
        Georgia,
        serif;
}

.ebook-brand-name {
    line-height: 1;
}

.ebook-brand-name strong {
    display: block;

    color: var(--paper);
    font-size: 16px;
}

.ebook-brand-name small {
    display: block;

    margin-top: 5px;

    color: var(--gold-2);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.28em;
}


/* Central ebook content */

.ebook-cover-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    padding: 20px 0 22px;
}

.ebook-badge {
    align-self: flex-start;

    margin-bottom: 22px;
    padding: 7px 12px;

    border:
        1px solid rgba(229, 191, 77, 0.48);

    border-radius: 999px;

    background:
        rgba(229, 191, 77, 0.1);

    color: var(--gold-2);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ebook-kicker {
    margin: 0 0 12px;

    color: #b9cadd;

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

.ebook-cover h2 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 13px;

    margin: 0;

    color: var(--paper);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.ebook-number {
    margin-top: -7px;

    color: var(--gold-2);

    font-size: 5rem;
    line-height: 0.9;
}

.ebook-cover h2 strong {
    color: var(--gold-2);
    font-weight: inherit;
}

.ebook-subtitle {
    max-width: 300px;

    margin: 23px 0 0 72px;

    color: #c3d1df;

    font-size: 0.88rem;
    line-height: 1.7;
}


/* Cover footer */

.ebook-cover-footer {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;

    color: var(--gold-2);
}

.ebook-cover-footer span {
    font-size: 12px;
    font-weight: 800;
}

.ebook-cover-footer small {
    color: #b7c7d8;

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

.ebook-footer-line {
    width: 100%;
    height: 1px;

    background:
        rgba(229, 191, 77, 0.38);
}


/* Dark navy spine on the left side */

.ebook-spine {
    position: absolute;
    z-index: 4;
    top: 6px;
    bottom: 6px;
    left: -22px;

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

    width: 25px;

    overflow: hidden;

    border-radius: 5px 0 0 5px;

    background:
        linear-gradient(
            90deg,
            #020b15,
            #08203a 45%,
            #0e3458
        );

    box-shadow:
        inset -4px 0 8px rgba(255, 255, 255, 0.06),
        -7px 8px 18px rgba(5, 24, 43, 0.25);

    transform:
        rotateY(-23deg)
        translateZ(5px);

    transform-origin: right center;
}

.ebook-spine span {
    color:
        rgba(229, 191, 77, 0.86);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.16em;
    white-space: nowrap;

    transform: rotate(-90deg);
}


/* Ivory page edges visible on the right */

.ebook-pages {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: -14px;
    bottom: 12px;

    width: 22px;

    border-radius: 0 13px 13px 0;

    background:
        repeating-linear-gradient(
            0deg,
            #f7f2e8 0,
            #f7f2e8 3px,
            #ddd5c7 4px
        );

    box-shadow:
        9px 9px 20px rgba(5, 24, 43, 0.2);

    transform:
        rotateY(27deg)
        translateZ(-3px);

    transform-origin: left center;
}

.next-steps-section {
    padding: 100px 0;

    background: var(--paper);
}

.section-heading.center {
    max-width: 760px;

    margin: 0 auto 52px;

    text-align: center;
}

.section-heading.center h2 {
    margin: 14px 0 18px;

    color: #08203a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.section-heading.center p {
    color: #697789;

    font-size: 1.08rem;
    line-height: 1.75;
}

.next-steps-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 26px;
}

.next-step-card {
    padding: 34px;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    background: var(--paper);

    box-shadow:
        0 14px 35px rgba(8, 32, 58, 0.07);

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

.next-step-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 45px rgba(8, 32, 58, 0.12);
}

.next-step-icon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    margin-bottom: 24px;

    border-radius: 16px;

    background:
        rgba(213, 170, 42, 0.14);

    color: #c89b1d;

    font-size: 1.35rem;
}

.next-step-card h3 {
    margin-bottom: 14px;
    color: #08203a;
}

.next-step-card p {
    margin-bottom: 20px;

    color: #697789;
    line-height: 1.7;
}

.next-step-card a {
    color: #b78c16;
    font-weight: 800;
}

.social-follow-section {
    padding: 0 0 100px;

    background: var(--paper);
}

.social-follow-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 52px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #061b32,
            #103c63
        );

    color: var(--paper);
}

.social-follow-box h2 {
    margin: 10px 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2rem, 4vw, 3rem);
}

.social-follow-box p {
    max-width: 650px;

    color: #c6d2df;
}

.download-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.download-social-links a {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

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

    border-radius: 50%;

    color: #d7aa2d;

    font-size: 1.25rem;

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

.download-social-links a:hover {
    transform: translateY(-4px);

    border-color: #d7aa2d;

    background: #d7aa2d;
    color: #08203a;
}


/* =========================================================
   12. FOOTER
========================================================= */

.site-footer {
    padding: 75px 0 22px;

    background: #07172c;
    color: #cad5e1;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(135px, 0.75fr)
        minmax(145px, 0.75fr)
        minmax(330px, 1.3fr);

    gap: 40px;
}

.footer-brand {
    color: var(--paper);
}

.site-footer h3 {
    margin: 0 0 16px;

    color: var(--paper);
}

.site-footer p {
    color: #93a5b9;
}

.footer-links a,
.site-footer a:not(.brand) {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 9px 0;

    color: #b9c8d8;

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

.site-footer a:not(.brand):hover {
    transform: translateX(4px);
    color: var(--gold-2);
}

.site-footer a i {
    width: 18px;

    color: #d6aa2a;

    text-align: center;
}

.footer-newsletter {
    min-width: 0;
}

/* =========================================
   FOOTER LOGO
========================================= */

.footer-logo{
    display:inline-flex;
    align-items:center;
    margin-bottom:18px;
}

.footer-logo img{
    display:block;
    height:52px;
    width:auto;
    max-width:240px;
    object-fit:contain;
}

/* Footer newsletter form */

.mini-form {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(90px, 0.75fr)
        minmax(150px, 1.25fr)
        auto;

    align-items: stretch;
    gap: 8px;

    width: 100%;
}

.mini-form input {
    width: 100%;
    min-width: 0;
    height: 52px;

    padding: 12px 13px;

    border: 1px solid #25405f;
    border-radius: 13px;

    background: #102744;
    color: var(--paper);
}

.mini-form input::placeholder {
    color: #8394a8;
    opacity: 1;
}

.mini-form button {
    min-width: 72px;
    height: 52px;

    padding: 0 16px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-2)
        );

    color: var(--navy);

    font-weight: 800;

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

.mini-form button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--gold-2),
            var(--gold-light)
        );
}

.mini-form .form-message {
    grid-column: 1 / -1;
}

.privacy-note {
    display: block;

    margin-top: 12px;

    color: #93a5b9;

    font-size: 0.78rem;
    line-height: 1.65;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 45px;
    padding-top: 20px;

    border-top: 1px solid #1b3552;

    color: #7890aa;

    font-size: 13px;
}


/* =========================================================
   13. ANIMATION HELPERS
========================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

[data-reveal].in-view {
    opacity: 1;
    transform: none;
}

/* =========================================================
   FORM LOADER AND FEEDBACK POPUP
========================================================= */

/*
 * Prevent the page from scrolling while the popup is open.
 */

body.modal-open {
    overflow: hidden;
}


/* Button-level loading spinner */

.button-spinner {
    display: inline-block;

    width: 17px;
    height: 17px;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: currentColor;
    border-radius: 50%;

    animation: button-spin 0.75s linear infinite;
}

.btn.gold .button-spinner,
.mini-form button .button-spinner {
    border-color: rgba(11, 31, 58, 0.28);
    border-top-color: var(--navy);
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Popup container */

.feedback-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

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

.feedback-modal.is-visible {
    visibility: visible;
    opacity: 1;
}


/* Dark translucent background */

.feedback-modal__backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(4, 17, 32, 0.76);

    backdrop-filter: blur(7px);
}


/* Main popup card */

.feedback-modal__dialog {
    position: relative;
    z-index: 1;

    width:min(100%,540px);

    padding: 44px 38px 36px;

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

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(229, 191, 77, 0.14),
            transparent 34%
        ),
        var(--paper);

    box-shadow:
        0 30px 90px rgba(2, 14, 28, 0.35);

    text-align: center;

    transform:
        translateY(18px)
        scale(0.96);

    transition:
        transform 0.3s ease;
}

.feedback-modal.is-visible
.feedback-modal__dialog {
    transform:
        translateY(0)
        scale(1);
}


/* Close button */

.feedback-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--mist);
    color: var(--navy);

    font-size: 26px;
    line-height: 1;

    cursor: pointer;
}

.feedback-modal__close:hover {
    background: #e5ebf2;
}


/* Success, loading and error icon */

.feedback-modal__icon{

    width:82px;
    height:82px;

    margin:0 auto 26px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #d7aa2d,
        #f2d46d
    );

    color:#08203a;

    font-size:42px;

    font-weight:900;

    box-shadow:
    0 18px 45px
    rgba(215,170,45,.35);

}

.feedback-modal.is-error
.feedback-modal__icon {
    background:
        linear-gradient(
            135deg,
            #f26a6a,
            #ffb0b0
        );

    color: #671919;
}


/* Large popup loader */

.feedback-spinner {
    display: block;

    width: 38px;
    height: 38px;

    border:
        4px solid rgba(11, 31, 58, 0.2);

    border-top-color: var(--navy);
    border-radius: 50%;

    animation:
        feedback-spin 0.8s linear infinite;
}

@keyframes feedback-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Popup typography */

.feedback-modal__title {
    margin: 0 0 12px;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.8rem, 5vw, 2.3rem);
    line-height: 1.15;
}

.feedback-modal__message {
    margin: 0;

    color: var(--muted);

    font-size: 1rem;
    line-height: 1.7;
}

.feedback-modal__hint {
    margin: 18px 0 0;
    padding: 15px 16px;

    border-radius: 14px;

    background: var(--mist);
    color: #526176;

    font-size: 0.9rem;
    line-height: 1.6;
}

.feedback-next-step{

    text-align:left;

    margin-top:10px;

}

.feedback-next-step strong{

    color:var(--navy);

}

.feedback-next-step ul{

    margin:16px 0;

    padding-left:22px;

}

.feedback-next-step li{

    margin:10px 0;

    color:#506174;

}

.feedback-next-step p{

    margin-top:16px;

    line-height:1.7;

    color:#617087;

}

.feedback-modal__hint:empty {
    display: none;
}

.feedback-modal__button {
    margin-top: 24px;
    min-width: 170px;
}


/*
 * The close button is hidden while processing, preventing
 * visitors from accidentally dismissing the loader.
 */

.feedback-modal.is-loading
.feedback-modal__close {
    display: none;
}

/* =========================================================
   14. RESPONSIVE LAYOUT
========================================================= */


/* Large tablets and small laptops */

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(130px, 0.7fr)
            minmax(140px, 0.7fr)
            minmax(260px, 1.15fr);

        gap: 28px;
    }

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

    .mini-form button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* Tablets and mobile navigation */

@media (max-width: 900px) {
    .menu-toggle {
        display: block;
    }

    .primary-nav {
        position: fixed;
        inset: 78px 0 auto;

        display: grid;
        gap: 0;

        padding: 18px 20px 28px;

        background: var(--paper);

        box-shadow: var(--shadow);

        opacity: 0;
        transform: translateY(-130%);

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    .primary-nav.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .primary-nav a {
        padding: 13px 0;

        border-bottom: 1px solid var(--line);
    }

    .primary-nav .nav-cta {
        margin-top: 12px;
        border: 0;
    }

    .hero {
        min-height: auto;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;

        gap: 45px;

        padding: 65px 0;

        text-align: center;
    }

    .hero-content,
    .hero-copy {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }

    .hero-content p,
    .hero-copy p,
    .lead {
        margin-right: auto;
        margin-left: auto;
    }

    .button-row,
    .hero-buttons,
    .trust-row,
    .hero-badges {
        justify-content: center;
    }

    .hero-photo,
    .hero-image {
        max-width: 580px;
        margin: auto;
    }

    .floating-card {
        left: 8px;
    }

    .split,
    .contact-grid,
    .download-grid {
        grid-template-columns: 1fr;
    }

    .download-grid {
        text-align: center;
    }

    .download-intro {
        margin-inline: auto;
    }

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

    .card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .journey {
        grid-template-columns: 1fr;
    }

    .journey-step:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -25px;

        content: "↓";
    }

    .next-steps-grid {
        grid-template-columns: 1fr;
    }

    .social-follow-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .portrait-card img {
        height: 560px;
    }

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

    .footer-newsletter {
        grid-column: 1 / -1;
    }

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

    .mini-form button {
        grid-column: auto;
        width: auto;
    }
    
    .ebook-showcase {
    min-height: 590px;
}

    .ebook {
    transform:
        rotateY(-5deg)
        rotateZ(-0.5deg);
}
}


/* Phones */

@media (max-width: 620px) {
    .container {
        width: min(
            calc(100% - 28px),
            var(--content-width)
        );
    }

    .nav-wrap {
        height: 64px;
    }

    .primary-nav {
        inset: 68px 0 auto;
    }

    .brand strong {
        font-size: 17px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .hero-grid {
        gap: 40px;
        padding: 48px 0 58px;
    }

    .hero h1 {
    font-size: clamp(38px, 10.8vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    }

    .page-hero h1 {
    font-size: 42px;
    }
    
    .hero h1 span {
    display: inline;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    }
    
    @media (max-width:620px){

    .footer-logo{
        justify-content:flex-start;
        width:100%;
        margin-bottom:20px;
    }

    .footer-logo img{
        height:46px;
    }

}
    
    /* Feedback popup on mobile */

.feedback-modal {
    padding: 14px;
}

.feedback-modal__dialog {
    padding: 38px 22px 28px;
    border-radius: 22px;
}

.feedback-modal__icon {
    width: 66px;
    height: 66px;
    margin-bottom: 20px;

    font-size: 31px;
}

.feedback-modal__button {
    width: 100%;
}
    
@media (max-width: 380px) {
    .hero h1 {
        font-size: 36px;
        letter-spacing: -0.04em;
    }
    }

    .lead {
        font-size: 17px;
    }

    .button-row,
    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .button-row .btn,
    .hero-buttons .btn {
        width: 100%;
    }

    .hero-photo img,
    .hero-image img {
        height: 520px;

        border-radius:
            30% 30% 22px 22px;
    }

    .floating-card {
        position: relative;
        bottom: auto;
        left: auto;

        margin: -35px 15px 0;
    }

    .section {
        padding: 72px 0;
    }

    .section-title h2 {
        font-size: 38px;
    }

    .split {
        gap: 36px;
    }

    .portrait-card img {
        height: 480px;
    }

    .stats,
    .card-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .cta-panel {
        padding: 40px 25px;
    }

    .page-hero {
        padding: 70px 0 55px;
    }

    .contact-form {
        padding: 25px 20px;
    }


    /* Download page mobile */

    .download-hero {
        padding: 54px 0 68px;
    }

    .download-grid {
        gap: 44px;
    }

    .download-content h1 {
        margin-top: 14px;
        margin-bottom: 24px;

        font-size:
            clamp(2.65rem, 12vw, 3.45rem);

        line-height: 1.08;
    }

    .download-intro {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .download-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;

        width: 100%;
        margin-top: 30px;
    }

    .download-actions .btn {
        width: 100%;
        min-height: 60px;
        margin: 0;

        padding: 16px 22px;

        border-radius: 999px;

        line-height: 1.3;
    }

    .download-note {
        margin-top: 28px;

        font-size: 1rem;
        line-height: 1.7;
    }

    .guide-preview-card {
        margin-top: 8px;
    }

    .guide-cover {
        width: 100%;
        min-height: 440px;

        padding: 38px 28px;

        border-radius: 24px;
    }

    .guide-label {
        margin-bottom: 28px;
    }

    .guide-cover h2 {
        font-size: 1.85rem;
        line-height: 1.18;
    }

    .guide-author {
        bottom: 30px;
        left: 30px;
    }
    
    /* Premium ebook mock-up on phones */

.guide-preview-card {
    padding: 15px 8px 25px;
}

.ebook-showcase {
    width: 100%;
    min-height: 505px;
}

.ebook {
    width: min(88vw, 330px);
    height: 475px;

    transform:
        rotateY(-3deg)
        rotateZ(-0.5deg);
}

.ebook-cover {
    padding: 25px 24px 22px;

    border-radius:
        4px 18px 18px 4px;
}

.ebook-brand-mark {
    width: 37px;
    height: 37px;

    font-size: 27px;
}

.ebook-brand-name strong {
    font-size: 14px;
}

.ebook-badge {
    margin-bottom: 17px;
}

.ebook-cover h2 {
    gap: 10px;

    font-size: 1.65rem;
}

.ebook-number {
    font-size: 4.15rem;
}

.ebook-subtitle {
    margin-top: 18px;
    margin-left: 57px;

    font-size: 0.78rem;
    line-height: 1.6;
}

.ebook-cover-footer {
    gap: 8px;
}

.ebook-cover-footer small {
    font-size: 7px;
}

.ebook-spine {
    left: -17px;
    width: 20px;
}

.ebook-pages {
    right: -11px;
    width: 17px;
}

    .social-follow-box {
        padding: 34px 26px;
    }


    /* Footer mobile */

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

    .footer-newsletter {
        grid-column: auto;
    }

    .mini-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mini-form button {
        grid-column: auto;

        width: 100%;

        border-radius: 999px;
    }

    .mini-form .form-message {
        grid-column: auto;
    }

    .footer-bottom {
        display: grid;
    }
}