/* ========================================
   Base
======================================== */

html {
    width: 100%;
    max-width: 100%;

    scroll-behavior: smooth;

    overflow-x: hidden;
}


* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


:root {
    --primary: #3a8dff;
    --primary-dark: #1758bd;
    --primary-deep: #082d69;
    --primary-ink: #061c42;

    --accent: #d7f205;

    --background: #f4f7fb;
    --surface: #ffffff;
    --surface-blue: #edf4ff;
    --surface-soft: #f8fbff;

    --text: #42506a;
    --heading: #10223f;
    --muted: #6c7890;

    --border: #dce5f2;
    --border-strong: #cbd8e9;

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

    --shadow:
        0 18px 45px rgba(15, 45, 95, 0.09);

    --shadow-strong:
        0 28px 70px rgba(8, 45, 105, 0.16);

    --container: 1200px;
}


body {
    width: 100%;
    max-width: 100%;

    min-height: 100vh;

    padding-top: 67px;

    font-family: "Inter", sans-serif;

    color: var(--text);

    line-height: 1.65;

    background: var(--background);

    overflow-x: hidden;
}


h1,
h2,
h3,
h4,
.section-tag,
.hero-tag {
    font-family: "Poppins", sans-serif;
}


h1,
h2,
h3 {
    color: var(--heading);
}


p {
    font-size: 17px;
}


section {
    width: 100%;
    max-width: 100%;

    padding: 96px 64px;
}


a,
button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline:
        3px solid rgba(215, 242, 5, 0.72);

    outline-offset: 4px;
}


.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

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

    white-space: nowrap;
}



/* ========================================
   Shared layout
======================================== */

.section-container,
.assessment-container,
.final-cta-container {
    width: 100%;

    max-width: var(--container);

    margin: 0 auto;
}


.section-heading {
    max-width: 820px;
}


.section-heading-centred {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.section-tag,
.hero-tag {
    display: inline-flex;

    margin-bottom: 16px;

    color: var(--primary-dark);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.section-heading h2,
.assessment-copy h2,
.why-copy h2,
.insights-card h2,
.final-cta-container h2 {
    font-size:
        clamp(2.1rem, 4vw, 3.8rem);

    line-height: 1.1;

    letter-spacing: -0.045em;
}


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

    margin: 20px auto 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;
}



/* ========================================
   Navigation
======================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    width: 100%;

    padding: 16px 64px;

    color: white;

    background:
        linear-gradient(
            110deg,
            rgba(7, 28, 66, 0.97),
            rgba(12, 65, 145, 0.97)
        );

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

    backdrop-filter: blur(14px);

    box-shadow:
        0 12px 34px rgba(4, 24, 57, 0.16);
}


.nav-container {
    width: 100%;

    max-width: var(--container);

    margin: 0 auto;

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

    gap: 34px;
}


.logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    gap: 11px;

    color: white;

    text-decoration: none;

    font-family: "Poppins", sans-serif;

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


.logo img {
    display: block;

    width: 35px;
    height: 35px;

    object-fit: contain;
}


nav {
    display: flex;
    align-items: center;

    gap: 28px;
}


nav a {
    color:
        rgba(255, 255, 255, 0.8);

    text-decoration: none;

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

    transition:
        color 180ms ease;
}


nav a:hover {
    color: white;
}



/* ========================================
   Buttons
======================================== */

.primary-button,
.secondary-button,
.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-weight: 700;

    border-radius: 999px;

    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease;
}


.primary-button {
    gap: 13px;

    min-height: 54px;

    padding: 14px 27px;

    border: 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        0 14px 34px rgba(58, 141, 255, 0.26);
}


.nav-button {
    flex-shrink: 0;

    padding: 11px 20px;

    color: var(--primary-ink);

    background: var(--accent);

    font-size: 13px;
}


.primary-button:hover,
.secondary-button:hover,
.nav-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 32px rgba(5, 28, 66, 0.18);
}



/* ========================================
   Hero
======================================== */

#hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 660px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f8fbff 0%,
            #edf4ff 56%,
            #fbfdff 100%
        );
}


.hero-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1020px;

    margin: 0 auto;

    text-align: center;
}


.hero-tag {
    padding: 8px 14px;

    border:
        1px solid rgba(58, 141, 255, 0.16);

    border-radius: 999px;

    background:
        rgba(58, 141, 255, 0.08);
}


h1 {
    max-width: 980px;

    margin: 0 auto;

    color: var(--primary-deep);

    font-size:
        clamp(3.2rem, 6.7vw, 6rem);

    line-height: 1.01;

    letter-spacing: -0.065em;
}


h1 span {
    color: var(--primary);
}


.hero-text {
    max-width: 710px;

    margin: 26px auto 32px;

    color: #52627d;

    font-size: 19px;

    line-height: 1.68;
}


.hero-buttons {
    display: flex;
    justify-content: center;
}


.hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 20px;

    color: var(--muted);

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


.hero-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(8px);

    opacity: 0.8;

    animation:
        drift 12s ease-in-out infinite alternate;
}


.hero-orb-one {
    top: 50px;
    right: -110px;

    width: 410px;
    height: 410px;

    background:
        radial-gradient(
            circle,
            rgba(58, 141, 255, 0.22),
            transparent 68%
        );
}


.hero-orb-two {
    bottom: -160px;
    left: -80px;

    width: 480px;
    height: 480px;

    background:
        radial-gradient(
            circle,
            rgba(65, 184, 255, 0.15),
            transparent 70%
        );

    animation-delay: -4s;
}


@keyframes drift {

    from {
        transform:
            translate3d(-10px, -10px, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(30px, 20px, 0)
            scale(1.07);
    }

}



/* ========================================
   Recognisable symptoms
======================================== */

#problems {
    background: var(--surface);
}


.symptom-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-top: 48px;
}


.symptom-card {
    padding: 28px 26px;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

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


.symptom-icon {
    display: grid;

    width: 42px;
    height: 42px;

    margin-bottom: 22px;

    place-items: center;

    border-radius: 13px;

    color: var(--primary-dark);

    background: var(--surface-blue);

    font-family: "Poppins", sans-serif;

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


.symptom-card h3 {
    margin-bottom: 10px;

    font-size: 18px;

    line-height: 1.35;
}


.symptom-card p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.6;
}


.symptom-summary {
    max-width: 760px;

    margin:
        42px auto 0;

    padding:
        18px 22px;

    border:
        1px solid rgba(58, 141, 255, 0.14);

    border-radius: var(--radius-small);

    color: var(--primary-deep);

    text-align: center;

    background:
        var(--surface-blue);

    font-size: 16px;
}



/* ========================================
   Evidence + framework
======================================== */

.foundations-section {
    position: relative;

    color: white;

    background:
        linear-gradient(
            145deg,
            #082d69,
            #0b55b8
        );
}


.foundations-section .section-tag {
    color: var(--accent);
}


.foundations-section h2,
.foundations-section h3 {
    color: white;
}


.foundations-heading .section-intro {
    color:
        rgba(255, 255, 255, 0.76);
}



/* Evidence */

.evidence-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-top: 50px;
}


.evidence-card {
    min-height: 250px;

    padding: 30px 28px;

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

    border-radius: var(--radius);

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

    backdrop-filter: blur(10px);
}


.evidence-card > strong {
    display: block;

    margin-bottom: 15px;

    color: var(--accent);

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(2.8rem, 5vw, 4.5rem);

    line-height: 1;
}


.evidence-card p {
    color:
        rgba(255, 255, 255, 0.82);

    font-size: 15px;

    line-height: 1.6;
}


.evidence-card > span {
    display: block;

    margin-top: 20px;

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

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.framework-bridge {
    margin:
        64px auto 36px;

    text-align: center;

    color: white;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(1.5rem, 2.6vw, 2.2rem);

    font-weight: 700;
}



/* Maturity progression */

.maturity-framework {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}


.maturity-framework::before {
    content: "";

    position: absolute;

    top: 25px;
    left: 8%;
    right: 8%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(215, 242, 5, 0.18),
            rgba(215, 242, 5, 0.78)
        );
}


.maturity-stage {
    position: relative;

    z-index: 2;

    min-width: 0;

    text-align: center;
}


.maturity-marker {
    display: grid;

    width: 50px;
    height: 50px;

    margin:
        0 auto 18px;

    place-items: center;

    border:
        2px solid rgba(215, 242, 5, 0.7);

    border-radius: 50%;

    color: var(--primary-deep);

    background: var(--accent);

    font-size: 12px;
    font-weight: 800;
}


.maturity-stage h3 {
    margin-bottom: 8px;

    font-size: 17px;
}


.maturity-stage p {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 13px;

    line-height: 1.55;
}


.framework-summary {
    max-width: 720px;

    margin:
        46px auto 0;

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

    text-align: center;

    font-size: 16px;
}


.framework-summary strong {
    color: white;
}



/* ========================================
   How Pexody helps
======================================== */

#approach {
    background: var(--surface);
}


.approach-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    max-width: 980px;

    margin:
        48px auto 0;
}


.approach-card {
    position: relative;

    padding:
        30px 28px;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background:
        var(--surface-soft);
}


.approach-mark {
    width: 38px;
    height: 5px;

    margin-bottom: 24px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );
}


.approach-card h3 {
    margin-bottom: 10px;

    font-size: 20px;
}


.approach-card p {
    color: var(--muted);

    font-size: 15px;
}



/* ========================================
   Assessment
======================================== */

#assessment {
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(58, 141, 255, 0.09),
            transparent 28%
        ),
        var(--background);
}


.assessment-container {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(400px, 1.1fr);

    align-items: center;

    gap: 74px;
}


.assessment-copy {
    max-width: 600px;
}


.assessment-copy .section-tag {
    margin-bottom: 14px;
}


.assessment-intro {
    margin-top: 17px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.65;
}


.assessment-benefits {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}


.assessment-benefits span {
    padding:
        8px 12px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    color: var(--primary-dark);

    background: white;

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


.assessment-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin:
        24px 0 28px;

    color: var(--muted);

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


.assessment-meta span {
    position: relative;
}


.assessment-meta span:not(:last-child)::after {
    content: "·";

    position: absolute;

    right: -11px;
}



/* Assessment preview */

.assessment-preview {
    padding: 30px;

    border:
        1px solid rgba(58, 141, 255, 0.18);

    border-radius: var(--radius-large);

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

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


.preview-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


.preview-top span {
    color: var(--muted);

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


.preview-top strong {
    color: var(--heading);

    font-family: "Poppins", sans-serif;

    font-size: 48px;

    line-height: 1;
}


.preview-maturity {
    display: inline-flex;

    margin-top: 10px;

    padding:
        6px 11px;

    border-radius: 999px;

    color: var(--primary-dark);

    background: var(--surface-blue);

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


.preview-bars {
    display: grid;

    gap: 18px;

    margin-top: 28px;
}


.preview-row > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 7px;
}


.preview-row span,
.preview-row strong {
    font-size: 13px;
}


.preview-row > div:first-child span {
    color: var(--heading);

    font-weight: 700;
}


.preview-row > div:first-child strong {
    color: var(--primary-dark);

    font-family: "Poppins", sans-serif;
}


.preview-bar {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #dbe6f4;
}


.preview-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #74b3ff
        );
}

/* Strongest readiness area */

.preview-row-strongest .preview-bar span {
    background:
        linear-gradient(
            90deg,
            var(--primary-dark),
            var(--primary)
        );
}


.preview-row-strongest small {
    display: inline-flex;

    margin-top: 7px;

    padding:
        4px 8px;

    border-radius: 999px;

    color: white;

    background:
        var(--primary-dark);

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

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.preview-row-priority .preview-bar span {
    background:
        linear-gradient(
            90deg,
            var(--accent),
            #b9d400
        );
}


.preview-row-priority small {
    display: inline-flex;

    margin-top: 7px;

    padding:
        4px 8px;

    border-radius: 999px;

    color: var(--primary-ink);

    background:
        rgba(215, 242, 5, 0.5);

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

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.preview-footer {
    margin-top: 24px;

    padding-top: 20px;

    border-top:
        1px solid var(--border);

    color: var(--muted);

    font-size: 13px;
}



/* ========================================
   Why Pexody + Insights
======================================== */

.why-section {
    background: var(--surface);
}


.why-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(400px, 1.1fr);

    align-items: stretch;

    gap: 56px;
}


.why-copy {
    align-self: center;
}


.why-copy > p:not(.section-tag):not(.why-principle) {
    max-width: 620px;

    margin-top: 17px;

    color: var(--muted);

    font-size: 16px;
}


.why-principle {
    margin-top: 22px;

    color: var(--primary-deep);

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(1.3rem, 2.2vw, 1.8rem);

    font-weight: 700;

    line-height: 1.4;
}



/* Newsletter */

.insights-card {
    position: relative;

    overflow: hidden;

    padding: 38px;

    border-radius: var(--radius-large);

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--primary-ink),
            #0b4da8
        );

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


.insights-card::before {
    content: "";

    position: absolute;

    top: -110px;
    right: -100px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(58, 141, 255, 0.22);
}


.insights-card > * {
    position: relative;
}


.insights-card .section-tag {
    color: var(--accent);
}


.insights-card h2 {
    color: white;

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


.insights-card > p:not(.section-tag) {
    max-width: 560px;

    margin-top: 18px;

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

    font-size: 16px;
}


.insights-form {
    margin-top: 28px;
}


.insights-form-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;
}


.insights-form input {
    width: 100%;

    min-width: 0;

    min-height: 54px;

    padding:
        0 17px;

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

    border-radius: 999px;

    color: var(--heading);

    background:
        rgba(255, 255, 255, 0.97);
}


.insights-form input::placeholder {
    color: #8a96aa;
}


.insights-form .primary-button {
    white-space: nowrap;

    background: var(--accent);

    color: var(--primary-ink);

    box-shadow: none;
}


.insights-note {
    margin-top: 10px;

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

    font-size: 12px;
}


.insights-status {
    min-height: 18px;

    margin-top: 6px;

    color: white;

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



/* ========================================
   Final CTA
======================================== */

#final-cta {
    padding-top: 82px;
    padding-bottom: 82px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0a3478,
            #0d5dc8
        );
}


.final-cta-container {
    max-width: 760px;

    text-align: center;
}


.final-cta-container .section-tag {
    color: var(--accent);
}


.final-cta-container h2 {
    color: white;
}


.final-cta-container > p:not(.section-tag):not(.contact-line) {
    max-width: 620px;

    margin:
        18px auto 28px;

    color:
        rgba(255, 255, 255, 0.76);
}


#final-cta .primary-button {
    color: var(--primary-ink);

    background: var(--accent);

    box-shadow:
        0 14px 34px rgba(6, 28, 66, 0.22);
}


.contact-line {
    margin-top: 19px;

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

    font-size: 13px;
}


.contact-line a {
    margin-left: 4px;

    color: white;

    font-weight: 700;

    text-underline-offset: 3px;
}



/* ========================================
   Footer
======================================== */

footer {
    width: 100%;
    max-width: 100%;

    padding:
        52px 64px;

    color: white;

    background: var(--primary-ink);

    overflow: hidden;
}


.footer-container {
    width: 100%;

    max-width: var(--container);

    margin:
        0 auto 34px;

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

    gap: 40px;
}


.footer-brand {
    max-width: 350px;
}


.footer-container h3 {
    margin-bottom: 8px;

    color: var(--primary);

    font-size: 23px;
}


.footer-container p {
    color:
        rgba(255, 255, 255, 0.66);

    font-size: 14px;
}


.footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap:
        12px 20px;
}


.footer-links a,
.footer-cookie-settings {
    color:
        rgba(255, 255, 255, 0.74);

    text-decoration: none;

    font-size: 13px;
}


.footer-cookie-settings {
    padding: 0;

    border: 0;

    background: transparent;

    white-space: nowrap;

    cursor: pointer;
}


.footer-links a:hover,
.footer-cookie-settings:hover {
    color: white;
}


.footer-cookie-settings:focus-visible {
    outline:
        3px solid rgba(215, 242, 5, 0.72);

    outline-offset: 4px;
}


.footer-bottom {
    width: 100%;

    max-width: var(--container);

    margin: 0 auto;

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

    font-size: 12px;
}



/* ========================================
   Privacy & Cookies
   Preserved for privacy.html
======================================== */

.privacy-page {
    padding-top: 90px;
    padding-bottom: 110px;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(58, 141, 255, 0.1),
            transparent 25%
        ),
        var(--background);
}


.privacy-container {
    max-width: 900px;

    margin: 0 auto;
}


.privacy-page h1 {
    max-width: 820px;

    margin: 0;

    font-size:
        clamp(2.8rem, 6vw, 5rem);

    line-height: 1.05;

    letter-spacing: -0.055em;
}


.privacy-intro {
    max-width: 760px;

    margin-top: 26px;

    color: #52627d;

    font-size: 19px;

    line-height: 1.75;
}


.privacy-content {
    margin-top: 60px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

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


.privacy-content section {
    padding:
        36px 42px;

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


.privacy-content section:last-child {
    border-bottom: 0;
}


.privacy-content h2 {
    margin-bottom: 16px;

    color: var(--primary-deep);

    font-size: 21px;

    line-height: 1.4;
}


.privacy-content p {
    margin-bottom: 16px;

    font-size: 16px;

    line-height: 1.75;
}


.privacy-content p:last-child {
    margin-bottom: 0;
}


.privacy-content ul {
    margin:
        18px 0 22px 22px;
}


.privacy-content li {
    margin-bottom: 9px;

    padding-left: 5px;

    font-size: 16px;

    line-height: 1.7;
}


.privacy-content a {
    color: var(--primary-dark);

    font-weight: 600;
}


.privacy-content a:hover {
    color: var(--primary);
}


.privacy-content code {
    padding:
        4px 8px;

    border:
        1px solid var(--border);

    border-radius: 7px;

    color: var(--primary-deep);

    background: var(--surface-blue);

    font-size: 14px;
}


.privacy-back {
    margin-top: 36px;
}



/* ========================================
   Cookie consent
======================================== */

.cookie-banner[hidden] {
    display: none;
}


.cookie-banner {
    position: fixed;

    left: 24px;
    right: 24px;
    bottom: 24px;

    z-index: 2000;

    width:
        min(1180px, calc(100% - 48px));

    margin: 0 auto;

    border:
        1px solid rgba(58, 141, 255, 0.18);

    border-radius: 24px;

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

    box-shadow:
        0 24px 70px rgba(6, 28, 66, 0.2);

    backdrop-filter: blur(18px);
}


.cookie-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 36px;

    padding:
        24px 28px;
}


.cookie-banner-copy {
    max-width: 760px;
}


.cookie-banner-copy h2 {
    margin-bottom: 6px;

    color: var(--primary-deep);

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    line-height: 1.35;
}


.cookie-banner-copy p {
    color: var(--text);

    font-size: 14px;

    line-height: 1.6;
}


.cookie-banner-actions {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    gap: 10px;
}


.cookie-button {
    min-height: 44px;

    padding:
        11px 18px;

    border-radius: 999px;

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

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}


.cookie-button-primary {
    border:
        1px solid var(--primary);

    color: white;

    background: var(--primary);

    box-shadow:
        0 10px 24px rgba(58, 141, 255, 0.22);
}


.cookie-button-secondary {
    border:
        1px solid rgba(58, 141, 255, 0.34);

    color: var(--primary-dark);

    background: white;
}


.cookie-button:hover {
    transform:
        translateY(-2px);
}


.cookie-button-primary:hover {
    box-shadow:
        0 14px 28px rgba(58, 141, 255, 0.28);
}


.cookie-button-secondary:hover {
    border-color: var(--primary);

    background: var(--surface-blue);
}



/* ========================================
   Scroll reveal
======================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}



/* ========================================
   Tablet
======================================== */

@media (max-width: 980px) {

    section {
        padding:
            82px 30px;
    }


    .site-header {
        padding:
            14px 24px;
    }


    .nav-container {
        gap: 22px;

        flex-wrap: wrap;
    }


    nav {
        order: 3;

        width: 100%;

        justify-content: center;

        padding-top: 4px;
    }


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


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


    .evidence-card {
        min-height: 0;
    }


    .maturity-framework {
        grid-template-columns:
            repeat(5, minmax(130px, 1fr));

        overflow-x: auto;

        padding-bottom: 10px;
    }


    .maturity-framework::before {
        left: 65px;
        right: 65px;
    }


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


    .assessment-container,
    .why-grid {
        grid-template-columns:
            1fr;

        gap: 48px;
    }


    .assessment-copy {
        max-width: 720px;
    }


    .assessment-preview {
        max-width: 720px;
    }


    .why-copy {
        max-width: 720px;
    }


    .insights-card {
        max-width: 760px;
    }


    .cookie-banner-content {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }


    .cookie-banner-actions {
        width: 100%;
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 650px) {

    section {
        padding:
            68px 20px;
    }
    
    body {
    padding-top: 55px;
    }


    /* Header */

    .site-header {
        position: fixed;

        padding:
            12px 16px;
    }


    .nav-container {
        flex-wrap: nowrap;

        gap: 12px;
    }


    nav {
        display: none;
    }


    .logo {
        min-width: 0;

        font-size: 19px;
    }


    .logo img {
        width: 30px;
        height: 30px;
    }


    .nav-button {
        padding:
            8px 12px;

        white-space: nowrap;

        font-size: 11px;
    }


    /* Shared */

    .section-heading h2,
    .assessment-copy h2,
    .why-copy h2,
    .insights-card h2,
    .final-cta-container h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }


    /* Hero */

    #hero {
        min-height: auto;

        padding-top: 78px;
        padding-bottom: 78px;
    }


    .hero-tag {
        max-width: 100%;

        white-space: normal;

        text-align: center;

        line-height: 1.4;
    }


    h1 {
        font-size:
            clamp(2.6rem, 13vw, 3.9rem);

        line-height: 1.03;
    }


    .hero-text {
        margin:
            22px auto 28px;

        font-size: 16px;
    }


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


    .hero-meta {
        gap:
            5px 7px;

        font-size: 12px;
    }


    /* Symptoms */

    .symptom-grid {
        grid-template-columns:
            1fr;

        gap: 14px;

        margin-top: 36px;
    }


    .symptom-card {
        padding:
            23px 21px;
    }


    .symptom-icon {
        margin-bottom: 17px;
    }


    .symptom-summary {
        margin-top: 30px;

        padding:
            16px 17px;

        font-size: 14px;
    }


    /* Evidence */

    .evidence-grid {
        margin-top: 38px;
    }


    .evidence-card {
        padding:
            25px 22px;
    }


    .framework-bridge {
        margin:
            48px auto 30px;

        font-size: 1.45rem;
    }


    /* Framework becomes vertical */

    .maturity-framework {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 0;

        overflow: visible;

        padding: 0;
    }


    .maturity-framework::before {
        top: 25px;
        bottom: 25px;

        left: 24px;
        right: auto;

        width: 2px;
        height: auto;

        background:
            linear-gradient(
                180deg,
                rgba(215, 242, 5, 0.26),
                rgba(215, 242, 5, 0.8)
            );
    }


    .maturity-stage {
        display: grid;

        grid-template-columns:
            50px minmax(0, 1fr);

        align-items: start;

        gap: 16px;

        padding-bottom: 25px;

        text-align: left;
    }


    .maturity-stage:last-child {
        padding-bottom: 0;
    }


    .maturity-marker {
        margin: 0;
    }


    .maturity-stage h3 {
        margin-top: 3px;

        font-size: 17px;
    }


    .maturity-stage p {
        max-width: 360px;

        font-size: 13px;
    }


    .framework-summary {
        margin-top: 36px;
    }


    /* Approach */

    .approach-grid {
        margin-top: 36px;
    }


    .approach-card {
        padding:
            24px 22px;
    }


    /* Assessment */

    .assessment-container {
        gap: 40px;
    }


    .assessment-benefits {
        gap: 8px;
    }


    .assessment-benefits span {
        font-size: 12px;
    }


    .assessment-meta {
        gap:
            7px 18px;

        font-size: 12px;
    }


    .assessment-copy .primary-button {
        width: 100%;
    }


    .assessment-preview {
        width: 100%;
        max-width: 100%;

        padding:
            24px 20px;

        border-radius: 24px;
    }


    .preview-top strong {
        font-size: 42px;
    }


    /* Why Pexody */

    .why-grid {
        gap: 36px;
    }


    .insights-card {
        width: 100%;
        max-width: 100%;

        padding:
            30px 22px;

        border-radius: 24px;
    }


    .insights-form-row {
        grid-template-columns:
            1fr;

        gap: 9px;
    }


    .insights-form input {
        border-radius: 14px;
    }


    .insights-form .primary-button {
        width: 100%;

        border-radius: 14px;
    }


    /* Final CTA */

    #final-cta {
        padding-top: 66px;
        padding-bottom: 66px;
    }


    #final-cta .primary-button {
        width: 100%;
    }


    /* Footer */

    footer {
        width: 100%;
        max-width: 100%;

        padding:
            44px 20px;

        overflow: hidden;
    }


    .footer-container {
        width: 100%;
        max-width: 100%;

        margin-bottom: 28px;

        flex-direction: column;

        gap: 28px;
    }


    .footer-links {
        width: 100%;
        max-width: 100%;

        justify-content: flex-start;

        gap:
            11px 17px;
    }


    .footer-links a,
    .footer-cookie-settings {
        white-space: normal;
    }


    .footer-bottom {
        width: 100%;
        max-width: 100%;
    }


    /* Privacy */

    .privacy-page {
        padding-top: 68px;
        padding-bottom: 80px;
    }


    .privacy-page h1 {
        font-size:
            clamp(2.5rem, 13vw, 3.6rem);
    }


    .privacy-intro {
        font-size: 16px;
    }


    .privacy-content {
        margin-top: 42px;

        border-radius: 20px;
    }


    .privacy-content section {
        padding:
            28px 22px;
    }


    .privacy-content h2 {
        font-size: 18px;
    }


    .privacy-content p,
    .privacy-content li {
        font-size: 15px;
    }


    /* Cookie banner */

    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;

        width: auto;
        max-width: none;

        margin: 0;

        border-radius: 20px;
    }


    .cookie-banner-content,
    .cookie-banner-copy,
    .cookie-banner-actions {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }


    .cookie-banner-copy {
        overflow-wrap: anywhere;
    }


    .cookie-banner-content {
        padding:
            20px 18px;

        gap: 16px;
    }


    .cookie-banner-copy h2 {
        font-size: 16px;
    }


    .cookie-banner-copy p {
        font-size: 13px;

        line-height: 1.55;
    }


    .cookie-banner-actions {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 8px;
    }


    .cookie-button {
        width: 100%;
    }

}



/* ========================================
   Reduced motion accessibility
======================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .reveal {
        opacity: 1;

        transform: none;
    }

}