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

section.main-hero {
    min-height: 680px;
    height: auto;
    color: var(--var-text-white);
    padding: 150px 0px 90px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(to bottom,
            var(--var-blue-dark-tech),
            var(--var-blue-lighter-dark-tech)),
        radial-gradient(800px 400px at 50% 0%, rgba(255, 255, 255, 0.04), transparent);
}

section.main-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    width: 1px;
    height: 1px;
    pointer-events: none;

    box-shadow:
        20px 30px #ffffff1f, 60px 90px #ffffff1f, 100px 20px #ffffff1f,
        140px 230px #ffffff1f, 200px 280px #ffffff1f, 260px 130px #ffffff1f,
        300px 70px #ffffff1f, 360px 240px #ffffff1f, 420px 110px #ffffff1f,
        480px 50px #ffffff1f, 520px 180px #ffffff1f, 580px 260px #ffffff1f,
        630px 150px #ffffff1f, 690px 25px #ffffff1f, 750px 210px #ffffff1f,
        820px 265px #ffffff1f, 880px 95px #ffffff1f, 940px 160px #ffffff1f,
        1000px 210px #ffffff1f, 1080px 55px #ffffff1f, 1120px 300px #ffffff1f,
        120px 420px #ffffff1f, 260px 360px #ffffff1f, 410px 360px #ffffff1f,
        560px 360px #ffffff1f, 700px 360px #ffffff1f, 860px 360px #ffffff1f,
        980px 360px #ffffff1f, 1100px 360px #ffffff1f, 1240px 360px #ffffff1f;

    animation: starsFloat 22s infinite linear;
    opacity: 0.95;
    z-index: 0;
}

section.main-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 2px;
    height: 2px;
    pointer-events: none;

    box-shadow:
        40px 110px #ffffff55, 120px 210px #ffffff66,
        220px 60px #ffffff55, 320px 190px #ffffff66,
        420px 120px #ffffff55, 520px 250px #ffffff66,
        640px 90px #ffffff55, 760px 210px #ffffff66,
        860px 50px #ffffff55, 980px 190px #ffffff66,
        1080px 130px #ffffff55, 1180px 270px #ffffff66,
        200px 320px #ffffff44, 560px 320px #ffffff44, 920px 320px #ffffff44;

    filter: blur(0.9px);
    animation: glowTwinkle 9s infinite ease-in-out alternate;
    z-index: 0;
    opacity: 0.95;
}

section.main-hero .sparkle-layer {
    position: absolute;
    inset: 0;
    width: 4px;
    height: 4px;
    pointer-events: none;

    box-shadow:
        180px 90px #ffffffaa, 180px 90px 6px #ffffff33,
        540px 190px #ffffffcc, 540px 190px 10px #ffffff44,
        900px 130px #ffffff99, 900px 130px 8px #ffffff33,
        300px 50px #ffffff88, 300px 50px 6px #ffffff22,
        1100px 240px #ffffff88, 1100px 240px 6px #ffffff22;

    filter: blur(1.2px);
    animation: sparklePulse 5.5s infinite ease-in-out alternate;
    z-index: 0;
    opacity: 0.98;
}

html[data-theme="light"] section.main-hero::before {
    box-shadow:
        20px 30px rgba(74, 144, 226, 0.2), 60px 90px rgba(74, 144, 226, 0.18), 100px 20px rgba(74, 144, 226, 0.18),
        140px 230px rgba(74, 144, 226, 0.16), 200px 280px rgba(74, 144, 226, 0.14), 260px 130px rgba(74, 144, 226, 0.16),
        300px 70px rgba(74, 144, 226, 0.18), 360px 240px rgba(74, 144, 226, 0.16), 420px 110px rgba(74, 144, 226, 0.16),
        480px 50px rgba(74, 144, 226, 0.14), 520px 180px rgba(74, 144, 226, 0.16), 580px 260px rgba(74, 144, 226, 0.14),
        630px 150px rgba(74, 144, 226, 0.12), 690px 25px rgba(74, 144, 226, 0.14), 750px 210px rgba(74, 144, 226, 0.14),
        820px 265px rgba(74, 144, 226, 0.12), 880px 95px rgba(74, 144, 226, 0.12), 940px 160px rgba(74, 144, 226, 0.12),
        1000px 210px rgba(74, 144, 226, 0.12), 1080px 55px rgba(74, 144, 226, 0.1), 1120px 300px rgba(74, 144, 226, 0.12),
        120px 420px rgba(74, 144, 226, 0.1), 260px 360px rgba(74, 144, 226, 0.1), 410px 360px rgba(74, 144, 226, 0.1),
        560px 360px rgba(74, 144, 226, 0.1), 700px 360px rgba(74, 144, 226, 0.1), 860px 360px rgba(74, 144, 226, 0.1),
        980px 360px rgba(74, 144, 226, 0.1), 1100px 360px rgba(74, 144, 226, 0.1), 1240px 360px rgba(74, 144, 226, 0.1);
}

html[data-theme="light"] section.main-hero::after {
    box-shadow:
        40px 110px rgba(59, 124, 203, 0.35), 120px 210px rgba(59, 124, 203, 0.4),
        220px 60px rgba(59, 124, 203, 0.32), 320px 190px rgba(59, 124, 203, 0.38),
        420px 120px rgba(59, 124, 203, 0.34), 520px 250px rgba(59, 124, 203, 0.42),
        640px 90px rgba(59, 124, 203, 0.34), 760px 210px rgba(59, 124, 203, 0.4),
        860px 50px rgba(59, 124, 203, 0.32), 980px 190px rgba(59, 124, 203, 0.38),
        1080px 130px rgba(59, 124, 203, 0.34), 1180px 270px rgba(59, 124, 203, 0.4),
        200px 320px rgba(59, 124, 203, 0.28), 560px 320px rgba(59, 124, 203, 0.28), 920px 320px rgba(59, 124, 203, 0.28);
}

html[data-theme="light"] section.main-hero .sparkle-layer {
    box-shadow:
        180px 90px rgba(74, 144, 226, 0.6), 180px 90px 6px rgba(74, 144, 226, 0.22),
        540px 190px rgba(74, 144, 226, 0.65), 540px 190px 10px rgba(74, 144, 226, 0.28),
        900px 130px rgba(74, 144, 226, 0.45), 900px 130px 8px rgba(74, 144, 226, 0.2),
        300px 50px rgba(74, 144, 226, 0.5), 300px 50px 6px rgba(74, 144, 226, 0.18),
        1100px 240px rgba(74, 144, 226, 0.45), 1100px 240px 6px rgba(74, 144, 226, 0.18);
}

section.main-hero::marker,
section.main-hero::before,
section.main-hero::after,
section.main-hero .sparkle-layer {
    will-change: transform, opacity;
}

section.main-hero::after {
    background-image:
        radial-gradient(600px 300px at 10% 20%, rgba(40, 60, 120, 0.07), transparent 20%),
        radial-gradient(500px 260px at 80% 70%, rgba(30, 50, 90, 0.06), transparent 18%),
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
}

/* =======================
   MASCOT
======================= */

.flying-astronaut {
    display: block;
    justify-content: center;
    align-items: center;
    align-self: center;
    max-height: 320px;
    width: auto;
    height: auto;
}

.mascot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mascot {
    width: 260px;
    height: auto;
    display: block;

    transform-origin: center;
    will-change: transform;
    animation: none;
}

.mascot-2 {
    width: 600px;
    height: auto;
    display: block;

    transform-origin: center;
    will-change: transform;
    animation: none;
}

body.loaded .mascot {
    animation: float-subtle 3.6s ease-in-out infinite;
}

body.loaded .mascot-2 {
    animation: float-subtle 3.6s ease-in-out infinite;
}

/* =======================
   COOKIE BANNER
======================= */


/* =======================
   SECTIONS
======================= */

section.contact {
    background-color: var(--var-blue-lighter-dark-tech);
    min-height: 700px;
    height: auto;
    color: var(--var-text-white);
    display: flex;
    justify-content: center;
    align-items: center;
}

section.how-we-can-help {
    background-color: var(--var-blue-lighter-dark-tech);
    color: var(--var-text-white);
    min-height: 1050px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

section.why-stellar {
    background-color: var(--var-blue-dark-tech);
    min-height: 600px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}
section.what-is-seo {
    background-color: var(--var-blue-lighter-dark-tech);
    min-height: 600px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

section.benefits {
    min-height: 650px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

section.showcase-website {
    min-height: 550px;
    height: auto;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    color: var(--var-text-white);
    align-items: center;
}

section.showcase-website-diff {
    background-color: var(--var-blue-lighter-dark-tech);
    color: var(--var-black-bg);
    min-height: 550px;
    height: auto;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center !important;
}

/* =======================
   ACCORDION
======================= */

.accordion {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.accordion button {
    background-color: var(--var-blue-primary);
    color: var(--var-text-white);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.4s ease;
    border-radius: 10px;
    padding: 15px;
    border: none;
    outline: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    width: 100%;
}

.accordion button:hover {
    cursor: pointer;
    background-color: var(--var-blue-secondary);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--var-blue-primary);
}

.accordion-content p {
    padding-bottom: 15px;
    padding-top: 15px;
    color: var(--var-text-white);
}

/* =======================
   BUTTONS & SHARED
======================= */

.btn-container {
    gap: 1em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.section-text {
    font-size: 20px;
}

.btn {
    position: relative;
    background-color: transparent;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 0px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn.primary-btn {
    border: 1.8px solid var(--var-blue-primary);
    color: var(--var-text-white);
    background-color: var(--var-blue-primary);
}

.btn.secondary-btn {
    border: 1.8px solid var(--var-blue-secondary);
    color: var(--var-text-white);
    background-color: var(--var-blue-secondary);
}

.btn.primary-btn:hover,
.btn.secondary-btn:hover {
    box-shadow: 0 0 20px rgba(0, 38, 97, 0.12), 0 0 50px var(--var-blue-box);
    transform: scale(1.05);
    cursor: pointer;
}

.btn.primary-btn::before,
.btn.secondary-btn::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.12) 0%, rgba(74, 144, 226, 0) 70%);
    filter: blur(10px);
    opacity: 0;
    transition: opacity .45s ease;
    z-index: -1;
    border-radius: 14px;
}

.btn.primary-btn:hover::before,
.btn.secondary-btn:hover::before {
    opacity: 1;
    animation: pulse 1.5s infinite;
}

.special-box {
    display: inline-block;
    font-size: 20px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--var-blue-box);
    color: var(--var-blue-secondary);
    border: 1px solid rgba(74, 144, 226, 0.12);
}

.special-row-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.rounded-img-case {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
}

.contact-details li {
    list-style-type: none;
    text-decoration: none;
    color: var(--var-text-soft);
    font-size: 18px;
    font-weight: 700;
    padding: 6px 0;
}

.contact-details .phone,
.contact-details .mail {
    color: var(--var-text-soft);
    text-decoration: none;
}

.special-row {
    margin-top: 80px;
}

/* =======================
   CARDS
======================= */

.card-wrapper {
    gap: 2em;
    display: flex;
    justify-content: center;
}

.card-33-w {
    border-radius: 15px;
    box-shadow: 2px 10px 20px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1), 0 16px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.popular-card {
    border: 2.5px solid darkblue;
    box-shadow: 20px 10px 20px rgba(0, 0, 0, 0.12), 4px 6px 12px rgba(0, 0, 0, 0.1), 0 16px 30px rgba(0, 0, 0, 0.1);
}

.card-33-w:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.15);
}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--var-blue-primary);
    color: white;
    text-align: center;
    padding: 45px;
    border-radius: 12px 12px 0 0;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.card-pricing {
    font-size: 24px;
    font-weight: 700;
    padding-top: 10px;
}

.card-pricing .per-month {
    font-weight: 500 !important;
}

.ribbon {
    width: 120%;
    height: 40px;
    background: darkblue;
    color: white;
    position: absolute;
    top: -10px;
    left: -45%;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.ribbon span {
    display: block;
    line-height: 40px;
    width: 88%;
    text-align: center;
    position: relative;
    font-weight: bold;
}

.card-body {
    padding: 20px;
    flex-grow: 1;
}

.card-body,
.card-footer {
    background-color: white;
}

.card-body p,
.card-footer p {
    color: #0B1220 !important;
}

.card-body .card-separator {
    width: 100%;
    height: 0;
    margin: 20px 0;
    border-top: 1px solid var(--var-card-separator);
    background: transparent;
}

.package-list .special {
    padding-top: 20px;
}

.package-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #0B1220;
}

.check-item::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background: url("/static/images/check.svg") no-repeat center;
    background-size: contain;
}

.card-footer {
    text-align: center;
    padding: 15px;
    border-radius: 0 0 12px 12px;
}

.btn:focus {
    outline: 3px solid rgba(74, 144, 226, 0.18);
    outline-offset: 2px;
}

/* =======================
   CONTACT FORM
======================= */

.contact-form {
    background: white;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 340px;
    max-width: 480px !important;
    padding: 26px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row input {
    flex: 1;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    outline: none;
    transition: 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--var-blue-primary);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form button {
    background: var(--var-blue-primary);
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
}

.contact-form button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0B1220;
}

.hidden-field {
    display: none;
}

.form-response-note {
    margin-top: 8px;
    font-size: 13px;
    color: #16753a;
    font-weight: 500;
}

.form-status {
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
}

.form-status.success {
    color: #2ecc71;
}

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

/* =======================
   SERVICE SECTION
======================= */

.service-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-title {
    font-size: 14px;
    font-weight: 600;
    color: #0B1220;
}

.service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-option {
    position: relative;
    cursor: pointer;
}

.service-option input {
    display: none;
}

.service-option span {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    color: #0B1220;
    border: 1px solid rgba(74, 144, 226, 0.3);
    font-size: 14px;
    transition: 0.2s ease;
    user-select: none;
}

.service-option span:hover {
    border-color: var(--var-blue-primary);
}

.service-option input:checked+span {
    background: var(--var-blue-primary);
    color: white;
    border-color: var(--var-blue-primary);
    transform: scale(1.03);
}

.bold-text {
    font-weight: 600;
}

.container-header .special-h {
    color: var(--var-text-white);
}

.container-header p {
    text-align: center !important;
    align-self: center;
    align-items: center;
    display: flex;
    justify-content: center;
    max-width: 650px;
}

.container-header {
    flex-direction: column;
    display: flex;
    align-items: center;
    text-align: center;
}

/* =======================
   TESTIMONIALS
======================= */

section.testimonials {
    background-color: var(--var-blue-dark-tech);
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.testimonials-header h2 {
    margin-top: 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--var-blue-lighter-dark-tech);
    border: 1px solid var(--var-border-color);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.testimonial-stars {
    display: flex;
    gap: 3px;
}

.testimonial-stars span {
    color: #f5a623;
    font-size: 16px;
}

.testimonial-quote {
    color: var(--var-text-soft);
    font-size: 15px;
    line-height: 1.7;
    flex: 1;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--var-border-color);
}

.testimonial-name {
    font-weight: 700;
    color: var(--var-text-headers);
    font-size: 14px;
}

.testimonial-role {
    font-size: 13px;
    color: var(--var-muted);
}

html[data-theme="light"] .testimonial-role {
    color: #404c64;
}

@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 10px;
    }
}

/* =======================
   MASCOT RESPONSIVE
======================= */

@media (min-width: 1600px) {
    .mascot {
        width: 300px;
    }
}

@media (max-width: 1200px) {
    .mascot {
        width: 220px;
    }
}

@media (max-width: 868px) {
    .mascot {
        width: 180px;
    }
}

/* =======================
   PROCESS STEPS (Om Stellar)
======================= */

section.process-steps {
    background-color: var(--var-blue-lighter-dark-tech);
    color: var(--var-text-white);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

/* =======================
   OM STELLAR PAGE
======================= */

section.om-founder {
    background-color: var(--var-blue-lighter-dark-tech);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.om-founder-img-col {
    align-items: center;
    justify-content: center;
}

.om-founder-img-wrap {
    position: relative;
    display: inline-block;
    max-width: 420px;
    width: 100%;
}

.om-founder-img {
    width: 100%;
    border-radius: 22px;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    display: block;
    height: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(74, 144, 226, 0.18);
}

.om-founder-badge {
    position: absolute;
    bottom: -16px;
    right: -16px;
    background: var(--var-blue-primary);
    border: 1px solid rgba(74, 144, 226, 0.35);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.om-founder-badge span {
    font-size: 10px;
    color: rgba(242, 246, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.om-founder-badge strong {
    font-size: 14px;
    color: #F2F6FF;
    font-weight: 700;
}

.om-founder-role {
    font-size: 15px;
    color: var(--var-blue-secondary);
    font-weight: 600;
    margin: 8px 0 0;
}

.om-founder-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.om-founder-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--var-blue-secondary);
    border: 1.5px solid var(--var-border-color);
    background: transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.om-founder-link:hover {
    border-color: var(--var-blue-secondary);
    background: rgba(59, 124, 203, 0.08);
}

@media (max-width: 1250px) {
    .om-founder-img-wrap {
        max-width: 340px;
        margin: 0 auto 32px;
    }

    .om-founder-badge {
        right: -8px;
        bottom: -8px;
    }
}

.om-values-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.om-value-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.om-value-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--var-blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2F6FF;
    margin-top: 2px;
}

.om-statement {
    border-left: 3px solid var(--var-blue-secondary);
    padding-left: 16px;
    font-size: 16px;
    color: var(--var-text-soft);
    line-height: 1.75;
    font-style: italic;
}

.om-value-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--var-text-headers);
    margin-bottom: 4px;
}

.om-value-item p {
    font-size: 14px;
}

.om-step-card {
    background: var(--var-blue-lighter-dark-tech);
    border: 1px solid var(--var-border-color);
    border-radius: 14px;
    padding: 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.om-step-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--var-blue-secondary);
    line-height: 1;
    font-family: 'Inter', sans-serif;
}

.om-step-card h3 {
    font-size: 20px;
    color: var(--var-text-headers);
}

/* =======================
   404 PAGE
======================= */

section.not-found-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(to bottom,
            var(--var-blue-dark-tech),
            var(--var-blue-lighter-dark-tech));
    padding: 120px 0 80px;
}

section.not-found-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    width: 1px;
    height: 1px;
    pointer-events: none;
    box-shadow:
        20px 30px #ffffff1f, 60px 90px #ffffff1f, 180px 60px #ffffff1f,
        340px 140px #ffffff1f, 500px 80px #ffffff1f, 660px 200px #ffffff1f,
        820px 50px #ffffff1f, 980px 170px #ffffff1f, 1100px 90px #ffffff1f;
    animation: starsFloat 22s infinite linear;
    opacity: 0.9;
    z-index: 0;
}

.not-found-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.not-found-code {
    font-size: 120px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    color: var(--var-blue-secondary);
    opacity: 0.5;
    letter-spacing: -4px;
}

.not-found-title {
    font-size: 36px;
    color: var(--var-text-headers);
}

.not-found-text {
    font-size: 16px;
    color: var(--var-text-soft);
    line-height: 1.7;
    max-width: 480px;
}

.not-found-actions {
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .not-found-code {
        font-size: 80px;
    }

    .not-found-title {
        font-size: 26px;
    }
}

/* =======================
   LOGOS CAROUSEL
======================= */

.logos {
    overflow: hidden;
    padding: 40px 0;
    background-color: var(--var-blue-lighter-dark-tech);
    position: relative;
}

/* Fade edges into the background colour */
.logos:before,
.logos:after {
    content: '';
    position: absolute;
    top: 0;
    width: 160px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logos:before {
    left: 0;
    background: linear-gradient(to right, var(--var-blue-lighter-dark-tech), transparent);
}

.logos:after {
    right: 0;
    background: linear-gradient(to left, var(--var-blue-lighter-dark-tech), transparent);
}

/* Single animated element — one animation, zero sync issues */
.logos-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

.logos-track:hover {
    animation-play-state: paused;
}

.logos-slide {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-box {
    flex: 0 0 auto;
    width: 140px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 40px;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: var(--logo-filter);
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-box img:hover {
    transform: scale(1.08);
    opacity: 1;
}