:root {

    --valora-dark: #07111f;
    --valora-dark-2: #0b1d31;
    --valora-primary: #13c7a3;
    --valora-primary-dark: #08a889;
    --valora-blue: #1476ff;
    --valora-text: #172033;
    --valora-muted: #6c7687;
    --valora-light: #f5f8fb;
    --valora-border: #e6ebf1;

}

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    font-family:
        'DM Sans',
        sans-serif;

    color: var(--valora-text);

    background: #fff;

}

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        'Manrope',
        sans-serif;

    font-weight: 800;

}

a {

    text-decoration: none;

}


/* NAVBAR */

.valora-navbar {

    padding: 18px 0;

    background:
        rgba(7, 17, 31, .85);

    backdrop-filter:
        blur(18px);

    transition: .3s;

}

.valora-brand {

    color: white !important;

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: Manrope;

    font-weight: 800;

    letter-spacing: 1px;

}

.valora-brand small {

    display: block;

    font-size: 8px;

    letter-spacing: 2px;

    opacity: .65;

}

.brand-mark {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    color: #06141d;

    background:
        linear-gradient(
            135deg,
            var(--valora-primary),
            #4ce3c6
        );

    font-weight: 900;

    font-size: 20px;

}

.brand-mark.large {

    width: 65px;
    height: 65px;

    font-size: 30px;

    margin-bottom: 12px;

}

.nav-link {

    color: rgba(255,255,255,.78) !important;

    font-weight: 500;

    margin-left: 10px;

}

.nav-link:hover {

    color: var(--valora-primary) !important;

}

.dropdown-menu {

    border: 0;

    padding: 10px;

    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.15);

}

.dropdown-item {

    padding: 10px 14px;

    border-radius: 8px;

}

.dropdown-item:hover {

    background: #eefbf8;

    color: var(--valora-primary-dark);

}


/* BUTTON */

.btn-valora {

    border: 0;

    color: #06141d;

    font-weight: 700;

    padding: 13px 23px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--valora-primary),
            #54e2c7
        );

    box-shadow:
        0 10px 25px rgba(19,199,163,.18);

}

.btn-valora:hover {

    color: #06141d;

    transform: translateY(-2px);

}


/* HERO */

.hero-section {

    min-height: 100vh;

    color: white;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(20,118,255,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 60% 70%,
            rgba(19,199,163,.13),
            transparent 30%
        ),
        var(--valora-dark);

}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--valora-primary);

    margin-bottom: 25px;

}

.hero-badge span {

    width: 7px;
    height: 7px;

    background: var(--valora-primary);

    border-radius: 50%;

}

.hero-section h1 {

    font-size:
        clamp(3rem, 6vw, 6.5rem);

    line-height: .98;

    letter-spacing: -4px;

}

.hero-section h1 span {

    background:
        linear-gradient(
            90deg,
            var(--valora-primary),
            #54e2c7
        );

    -webkit-background-clip: text;

    color: transparent;

}

.hero-text {

    max-width: 680px;

    color: rgba(255,255,255,.68);

    font-size: 18px;

    line-height: 1.8;

    margin: 30px 0;

}

.hero-buttons {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

}

.hero-trust {

    display: flex;

    gap: 50px;

    margin-top: 55px;

}

.hero-trust div {

    display: flex;

    flex-direction: column;

}

.hero-trust strong {

    font-size: 30px;

    color: var(--valora-primary);

}

.hero-trust span {

    font-size: 12px;

    color: rgba(255,255,255,.5);

}


/* ORBIT */

.ecosystem-orbit {

    height: 570px;

    position: relative;

}

.orbit {

    position: absolute;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    top: 50%;
    left: 50%;

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

}

.orbit-one {

    width: 330px;
    height: 330px;

}

.orbit-two {

    width: 500px;
    height: 500px;

}

.ecosystem-center {

    position: absolute;

    top: 50%;
    left: 50%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}

.ecosystem-center strong {

    font-size: 22px;

    letter-spacing: 2px;

}

.ecosystem-center small {

    color: rgba(255,255,255,.45);

    letter-spacing: 3px;

    font-size: 9px;

}

.orbit-item {

    position: absolute;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.12);

    color: var(--valora-primary);

    backdrop-filter:
        blur(10px);

}

.item-one {
    top: 50px;
    left: 50%;
}

.item-two {
    right: 25px;
    top: 35%;
}

.item-three {
    right: 80px;
    bottom: 50px;
}

.item-four {
    left: 50px;
    bottom: 80px;
}

.item-five {
    left: 15px;
    top: 35%;
}


/* SECTIONS */

.section-padding {

    padding: 110px 0;

}

.section-heading {

    max-width: 720px;

    margin:
        0 auto 50px;

}

.eyebrow {

    display: inline-block;

    color: var(--valora-primary-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 14px;

}

.section-heading h2,
.vision-section h2 {

    font-size:
        clamp(2.3rem, 4vw, 4rem);

    letter-spacing: -2px;

}

.section-heading h2 span,
.vision-section h2 span,
.page-hero h1 span {

    color: var(--valora-primary-dark);

}

.section-heading p {

    color: var(--valora-muted);

    line-height: 1.8;

}


/* PLATFORM CARDS */

.platform-card {

    display: block;

    height: 100%;

    padding: 30px;

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

    border-radius: 20px;

    color: var(--valora-text);

    transition: .3s;

    background: white;

}

.platform-card:hover {

    transform:
        translateY(-8px);

    color: var(--valora-text);

    border-color:
        rgba(19,199,163,.35);

    box-shadow:
        0 25px 70px rgba(9,32,54,.08);

}

.platform-icon {

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 15px;

    color: var(--valora-primary-dark);

    background:
        rgba(19,199,163,.09);

    font-size: 24px;

    margin-bottom: 24px;

}

.platform-category {

    color: var(--valora-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.platform-card h3 {

    font-size: 21px;

    margin:
        8px 0 14px;

}

.platform-card p {

    color: var(--valora-muted);

    line-height: 1.7;

    font-size: 14px;

}

.learn-more {

    display: inline-flex;

    gap: 8px;

    color: var(--valora-primary-dark);

    font-size: 13px;

    font-weight: 700;

    margin-top: 15px;

}


/* VISION */

.vision-section {

    background:
        var(--valora-light);

}

.vision-card {

    padding: 45px;

    border-radius: 25px;

    background: white;

    box-shadow:
        0 20px 60px rgba(0,0,0,.05);

}

.quote-icon {

    font-size: 40px;

    color: var(--valora-primary);

}

.vision-card p {

    font-family: Manrope;

    font-weight: 600;

    font-size: 20px;

    line-height: 1.7;

}


/* CTA */

.cta-box {

    padding: 60px;

    border-radius: 28px;

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background:
        linear-gradient(
            135deg,
            var(--valora-dark),
            #0c3147
        );

}

.cta-box h2 {

    max-width: 650px;

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

}

.cta-box .eyebrow {

    color: var(--valora-primary);

}


/* PAGE HERO */

.page-hero {

    padding:
        190px 0 100px;

    color: white;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(19,199,163,.14),
            transparent 30%
        ),
        var(--valora-dark);

}

.page-hero h1 {

    max-width: 900px;

    font-size:
        clamp(3rem, 6vw, 5.8rem);

    letter-spacing: -3px;

}

.page-hero p {

    max-width: 700px;

    color: rgba(255,255,255,.62);

    font-size: 18px;

    line-height: 1.8;

    margin-top: 25px;

}


/* LARGE PLATFORM CARD */

.large-platform-card {

    height: 100%;

    padding: 35px;

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

    border-radius: 22px;

    transition: .3s;

}

.large-platform-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.07);

}

.platform-tagline {

    font-weight: 700;

    color: var(--valora-primary-dark);

    margin:
        12px 0 15px;

}

.large-platform-card p {

    color: var(--valora-muted);

    line-height: 1.8;

}

.platform-link {

    display: inline-flex;

    gap: 10px;

    color: var(--valora-text);

    font-weight: 700;

    margin-top: 15px;

}


/* PLATFORM HERO */

.platform-hero {

    padding:
        170px 0 100px;

    color: white;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(19,199,163,.14),
            transparent 35%
        ),
        var(--valora-dark);

}

.back-link {

    color: rgba(255,255,255,.6);

    display: inline-flex;

    gap: 8px;

    margin-bottom: 60px;

}

.platform-hero-icon {

    width: 75px;
    height: 75px;

    display: flex;

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

    border-radius: 20px;

    color: var(--valora-primary);

    background:
        rgba(19,199,163,.1);

    font-size: 32px;

    margin-bottom: 30px;

}

.platform-hero h1 {

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

    letter-spacing: -3px;

}

.platform-hero h2 {

    color: var(--valora-primary);

    font-size: 22px;

}

.platform-hero p {

    max-width: 750px;

    color: rgba(255,255,255,.65);

    line-height: 1.8;

    font-size: 18px;

    margin-top: 25px;

}


/* FEATURES */

.feature-list {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px;

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

    border-radius: 12px;

}

.feature-check {

    width: 32px;
    height: 32px;

    min-width: 32px;

    display: flex;

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

    border-radius: 50%;

    color: var(--valora-primary-dark);

    background:
        rgba(19,199,163,.1);

}


/* ECOSYSTEM */

.ecosystem-section {

    background: var(--valora-light);

}

.ecosystem-row {

    display: grid;

    grid-template-columns:
        70px 70px 1.2fr 1fr 30px;

    align-items: center;

    gap: 20px;

    padding: 25px 0;

    color: var(--valora-text);

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

}

.ecosystem-row:hover {

    color: var(--valora-primary-dark);

}

.ecosystem-number {

    color: #a5aebb;

    font-size: 13px;

}

.ecosystem-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 12px;

    background: white;

}

.ecosystem-name {

    font-weight: 800;

}

.ecosystem-description {

    color: var(--valora-muted);

    font-size: 14px;

}


/* CONTACT */

.contact-details {

    margin-top: 40px;

}

.contact-details > div {

    display: flex;

    gap: 18px;

    margin-bottom: 25px;

}

.contact-details i {

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 12px;

    color: var(--valora-primary-dark);

    background:
        rgba(19,199,163,.1);

}

.contact-details small,
.contact-details strong {

    display: block;

}

.contact-details small {

    color: var(--valora-muted);

    margin-bottom: 3px;

}

.contact-form {

    padding: 40px;

    border-radius: 24px;

    background: var(--valora-light);

}

.contact-form label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}

.form-control,
.form-select {

    min-height: 52px;

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

    border-radius: 10px;

}

.form-control:focus,
.form-select:focus {

    border-color: var(--valora-primary);

    box-shadow:
        0 0 0 4px rgba(19,199,163,.1);

}


/* DISCLAIMER */

.platform-disclaimer {

    padding-bottom: 60px;

}

.valora-alert {

    display: flex;

    gap: 15px;

    padding: 25px;

    border: 0;

    border-radius: 16px;

    background: #eefbf8;

    color: #245c50;

}

.valora-alert > i {

    font-size: 24px;

}


/* FOOTER */

.valora-footer {

    padding:
        80px 0 25px;

    color: rgba(255,255,255,.65);

    background: var(--valora-dark);

}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: white;

}

.footer-brand strong {

    display: block;

    letter-spacing: 2px;

}

.footer-brand small {

    display: block;

    font-size: 8px;

    letter-spacing: 2px;

}

.footer-description {

    max-width: 450px;

    line-height: 1.8;

    margin:
        25px 0;

}

.footer-socials {

    display: flex;

    gap: 10px;

}

.footer-socials a {

    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 10px;

    color: white;

    background:
        rgba(255,255,255,.06);

}

.valora-footer h6 {

    color: white;

    margin-bottom: 20px;

}

.valora-footer ul {

    list-style: none;

    padding: 0;

}

.valora-footer li {

    margin-bottom: 12px;

}

.valora-footer a {

    color: rgba(255,255,255,.55);

}

.valora-footer a:hover {

    color: var(--valora-primary);

}

.valora-footer hr {

    border-color:
        rgba(255,255,255,.08);

    margin:
        50px 0 25px;

}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 13px;

}

.footer-bottom div {

    display: flex;

    gap: 20px;

}


/* MOBILE */

@media (max-width: 991px) {

    .valora-navbar {

        background: var(--valora-dark);

    }

    .navbar-collapse {

        padding:
            20px 0;

    }

    .nav-link {

        margin-left: 0;

        padding: 12px 0 !important;

    }

    .hero-section h1 {

        letter-spacing: -2px;

    }

    .feature-list {

        grid-template-columns: 1fr;

    }

    .ecosystem-row {

        grid-template-columns:
            45px 50px 1fr 30px;

    }

    .ecosystem-description {

        display: none;

    }

    .cta-box {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px 30px;

    }

}

@media (max-width: 575px) {

    .section-padding {

        padding: 75px 0;

    }

    .hero-trust {

        gap: 25px;

    }

    .hero-trust strong {

        font-size: 23px;

    }

    .hero-trust span {

        font-size: 10px;

    }

    .contact-form {

        padding: 25px;

    }

    .footer-bottom {

        flex-direction: column;

    }

}