/* =====================================================
   ROOT
===================================================== */

:root {

    --primary: #65cfff;
    --primary-dark: #0b6e9c;

    --dark: #050b12;
    --dark-soft: #09131d;

    --white: #ffffff;

    --text-muted: #8f9da8;

    --border:
        rgba(255, 255, 255, 0.09);

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background:
        var(--dark);

    color:
        var(--white);

    overflow-x:
        hidden;

}


a {

    color: inherit;

    text-decoration:
        none;

}


button,
input,
textarea,
select {

    font-family:
        inherit;

}


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

.main-header {

    position: relative;

    z-index: 100;

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

    background:
        rgba(5, 11, 18, 0.96);

}


.header-inner {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* LOGO */

.site-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

}


.logo-mark {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    color: var(--primary);

    font-size: 20px;

    font-weight: 800;

    border:
        1px solid rgba(101, 207, 255, 0.45);

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

}


.logo-text {

    display: flex;

    flex-direction: column;

}


.logo-text strong {

    font-size: 15px;

    letter-spacing: 2px;

}


.logo-text small {

    color:
        var(--text-muted);

    font-size: 7px;

    letter-spacing: 2px;

}


/* DESKTOP NAV */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

}


.desktop-nav a {

    position: relative;

    color:
        #aebbc5;

    font-size: 12px;

    font-weight: 800;

    transition:
        0.3s;

}


.desktop-nav a:hover,
.desktop-nav a.active {

    color:
        var(--primary);

}


/* HEADER CTA */

.header-cta {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 18px;

    color:
        var(--primary);

    font-size: 11px;

    font-weight: 800;

    border:
        1px solid rgba(101, 207, 255, 0.25);

    border-radius:
        7px;

    transition:
        0.3s;

}


.header-cta:hover {

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

}


/* MOBILE MENU */

.mobile-menu-btn {

    display: none;

    width: 42px;
    height: 42px;

    cursor: pointer;

    color:
        var(--white);

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

    border-radius:
        8px;

    background:
        transparent;

}


.mobile-nav {

    display: none;

}


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

.inquiry-hero {

    position: relative;

    min-height:
        650px;

    display: flex;

    align-items: center;

    overflow: hidden;

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

}


.inquiry-hero-content {

    position: relative;

    z-index: 3;

    max-width:
        850px;

    margin:
        auto;

    padding:
        120px 0;

    text-align:
        center;

}


/* GRID */

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.25;

    background-image:

        linear-gradient(rgba(101, 207, 255, 0.06) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(101, 207, 255, 0.06) 1px,
            transparent 1px);

    background-size:
        70px 70px;

}


/* ORBS */

.hero-orb {

    position: absolute;

    width:
        550px;

    height:
        550px;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        0.13;

}


.hero-orb-one {

    top:
        -250px;

    left:
        -150px;

    background:
        #008dcc;

}


.hero-orb-two {

    right:
        -200px;

    bottom:
        -250px;

    background:
        #0056ff;

}


/* HERO EYEBROW */

.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        24px;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2.5px;

}


.hero-eyebrow span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--primary);

    box-shadow:
        0 0 15px var(--primary);

}


.inquiry-hero h1 {

    margin: 0;

    font-size:
        clamp(48px, 7vw, 88px);

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -3px;

}


.inquiry-hero h1 span {

    display:
        block;

    color:
        var(--primary);

}


.inquiry-hero p {

    max-width:
        720px;

    margin:
        30px auto 0;

    color:
        #9aa8b4;

    font-size:
        17px;

    line-height:
        1.8;

}


/* SCROLL NOTE */

.hero-scroll-note {

    display: inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        55px;

    color:
        #66747e;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.hero-scroll-note i {

    color:
        var(--primary);

    animation:
        bounceArrow 2s infinite;

}


@keyframes bounceArrow {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(7px);

    }

}


/* =====================================================
   DISCOVERY SECTION
===================================================== */

.investor-discovery-section {

    position: relative;

    padding:
        120px 0;

    overflow:
        hidden;

}


/* SECTION ORBS */

.section-bg-orb {

    position: absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    filter:
        blur(140px);

    opacity:
        0.08;

}


.section-orb-one {

    top:
        10%;

    left:
        -250px;

    background:
        #008dcc;

}


.section-orb-two {

    bottom:
        0;

    right:
        -250px;

    background:
        #006bff;

}


/* =====================================================
   PROGRESS
===================================================== */

.discovery-progress-wrapper {

    position: relative;

    z-index: 2;

    max-width:
        900px;

    margin:
        0 auto 45px;

}


.progress-top {

    display: flex;

    justify-content:
        space-between;

    margin-bottom:
        13px;

    color:
        #778691;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.progress-bar-custom {

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        50px;

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

}


.progress-fill {

    width:
        14%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(90deg,
            #087aa9,
            var(--primary));

    transition:
        width 0.4s ease;

}


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

.investor-discovery-form {

    position: relative;

    z-index: 3;

    max-width:
        900px;

    margin:
        auto;

    padding:
        55px;

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

    border-radius:
        24px;

    background:

        linear-gradient(135deg,
            rgba(18, 30, 42, 0.95),
            rgba(5, 11, 18, 0.98));

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.4);

}


/* =====================================================
   STEPS
===================================================== */

.form-step {

    display:
        none;

    animation:
        stepFade 0.4s ease;

}


.form-step.active {

    display:
        block;

}


@keyframes stepFade {

    from {

        opacity:
            0;

        transform:
            translateY(15px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =====================================================
   STEP HEADING
===================================================== */

.step-heading {

    display: flex;

    align-items:
        center;

    gap:
        20px;

}


.step-number {

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    border-radius:
        16px;

    color:
        var(--primary);

    font-size:
        18px;

    font-weight:
        800;

    border:
        1px solid rgba(101, 207, 255, 0.25);

    background:
        rgba(101, 207, 255, 0.07);

}


.step-heading span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.step-heading h2 {

    margin:
        0;

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight:
        800;

}


.step-description {

    margin:
        28px 0 35px;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.7;

}


/* =====================================================
   SELECTION GRID
===================================================== */

.selection-grid {

    display:
        grid;

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

    gap:
        15px;

}


.selection-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-height:
        92px;

    padding:
        20px;

    cursor:
        pointer;

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

    border-radius:
        15px;

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

    transition:
        0.3s;

}


.selection-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(101, 207, 255, 0.45);

    background:
        rgba(101, 207, 255, 0.05);

}


.selection-card input {

    position:
        absolute;

    opacity:
        0;

}


/* CHECK */

.custom-check {

    width:
        20px;

    height:
        20px;

    flex-shrink:
        0;

    border-radius:
        6px;

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

    transition:
        0.3s;

}


.selection-card input:checked~.custom-check {

    background:
        var(--primary);

    border-color:
        var(--primary);

}


.selection-card input:checked~.custom-check::after {

    content:
        "✓";

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    color:
        #051018;

    font-size:
        12px;

    font-weight:
        900;

}


/* SELECTED CARD */

.selection-card:has(input:checked) {

    border-color:
        rgba(101, 207, 255, 0.65);

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

}


/* ICON */

.selection-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    border-radius:
        10px;

    color:
        var(--primary);

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

}


/* CONTENT */

.selection-content {

    display:
        flex;

    flex-direction:
        column;

}


.selection-content strong {

    font-size:
        14px;

}


.selection-content small {

    margin-top:
        4px;

    color:
        #74828d;

    font-size:
        11px;

}


/* =====================================================
   INVESTMENT AMOUNT
===================================================== */

.amount-options {

    display:
        grid;

    gap:
        14px;

}


.amount-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding:
        21px 24px;

    cursor:
        pointer;

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

    border-radius:
        13px;

    transition:
        0.3s;

}


.amount-card input {

    position:
        absolute;

    opacity:
        0;

}


.amount-card span {

    font-size:
        16px;

    font-weight:
        700;

}


.amount-card:hover {

    border-color:
        rgba(101, 207, 255, 0.45);

}


.amount-card:has(input:checked) {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        rgba(101, 207, 255, 0.07);

}


/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio-table-wrapper {

    display:
        grid;

    gap:
        12px;

}


.portfolio-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        18px 20px;

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

    border-radius:
        12px;

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

}


.portfolio-title {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-size:
        14px;

    font-weight:
        700;

}


.portfolio-title i {

    color:
        var(--primary);

}


.portfolio-row select {

    width:
        230px;

    padding:
        12px 15px;

    outline:
        none;

    color:
        #ffffff;

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

    border-radius:
        8px;

    background:
        #0c1721;

}


/* =====================================================
   HORIZON
===================================================== */

.horizon-options {

    display:
        grid;

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

    gap:
        10px;

}


.horizon-options label {

    position:
        relative;

    cursor:
        pointer;

}


.horizon-options input {

    position:
        absolute;

    opacity:
        0;

}


.horizon-options span {

    display:
        block;

    padding:
        18px 8px;

    text-align:
        center;

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

    border-radius:
        11px;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        0.3s;

}


.horizon-options label:hover span {

    border-color:
        rgba(101, 207, 255, 0.5);

}


.horizon-options label:has(input:checked) span {

    color:
        var(--primary);

    border-color:
        var(--primary);

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

}


/* =====================================================
   RISK
===================================================== */

.risk-container {

    padding:
        45px 15px;

}


.risk-labels {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        25px;

    color:
        #83919b;

    font-size:
        10px;

    font-weight:
        700;

}


#riskRange {

    width:
        100%;

    height:
        7px;

    cursor:
        pointer;

    accent-color:
        var(--primary);

}


.risk-value {

    margin-top:
        25px;

    text-align:
        center;

    color:
        var(--primary);

    font-size:
        25px;

    font-weight:
        800;

}


/* =====================================================
   TEXTAREA
===================================================== */

.form-step textarea {

    width:
        100%;

    resize:
        vertical;

    padding:
        22px;

    outline:
        none;

    color:
        #ffffff;

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

    border-radius:
        14px;

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

    font-size:
        14px;

    line-height:
        1.7;

}


.form-step textarea:focus {

    border-color:
        rgba(101, 207, 255, 0.6);

}


/* =====================================================
   CONTACT DETAILS
===================================================== */

.investor-details {

    margin-top:
        45px;

    padding-top:
        40px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

}


.contact-details-heading span {

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.contact-details-heading h3 {

    margin:
        8px 0 25px;

    font-size:
        24px;

    font-weight:
        800;

}


.details-grid {

    display:
        grid;

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

    gap:
        15px;

}


.form-input label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #7f8d98;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.form-input input {

    width:
        100%;

    padding:
        15px;

    outline:
        none;

    color:
        #ffffff;

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

    border-radius:
        9px;

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

}


.form-input input:focus {

    border-color:
        rgba(101, 207, 255, 0.6);

}


/* =====================================================
   FINAL CTA
===================================================== */

.final-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        45px;

    padding:
        30px;

    border:
        1px solid rgba(101, 207, 255, 0.18);

    border-radius:
        18px;

    background:
        linear-gradient(135deg,
            rgba(101, 207, 255, 0.1),
            rgba(0, 0, 0, 0));

}


.final-cta>div>span {

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.final-cta h3 {

    margin:
        9px 0 0;

    font-size:
        28px;

    font-weight:
        800;

}


.submit-opportunity-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        17px 24px;

    cursor:
        pointer;

    color:
        #041018;

    border:
        none;

    border-radius:
        9px;

    background:
        var(--primary);

    font-size:
        13px;

    font-weight:
        800;

    transition:
        0.3s;

}


.submit-opportunity-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(101, 207, 255, 0.22);

}


/* DISCLAIMER */

.investment-disclaimer {

    margin-top:
        20px;

    color:
        #65727c;

    font-size:
        10px;

    line-height:
        1.8;

}


/* =====================================================
   NAVIGATION
===================================================== */

.form-navigation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        50px;

    padding-top:
        30px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

}


.form-navigation button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px 22px;

    cursor:
        pointer;

    border-radius:
        8px;

    font-size:
        12px;

    font-weight:
        800;

    transition:
        0.3s;

}


.form-back-btn {

    color:
        #9aa8b4;

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

    background:
        transparent;

}


.form-next-btn {

    color:
        #ffffff;

    border:
        1px solid #0b6e9c;

    background:
        #0b6e9c;

}


.form-navigation button:hover {

    transform:
        translateY(-2px);

}


/* =====================================================
   TRUST STRIP
===================================================== */

.trust-strip {

    padding:
        45px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

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

    background:
        #071019;

}


.trust-grid {

    display:
        grid;

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

    gap:
        25px;

}


.trust-grid div {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        #aebbc5;

    font-size:
        11px;

    font-weight:
        800;

}


.trust-grid i {

    color:
        var(--primary);

}


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

.main-footer {

    padding:
        80px 0 25px;

    background:
        #04090f;

}


.footer-top {

    display:
        grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1.2fr;

    gap:
        50px;

    padding-bottom:
        60px;

}


.footer-brand p {

    max-width:
        300px;

    margin-top:
        25px;

    color:
        #72808b;

    font-size:
        12px;

    line-height:
        1.9;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


.footer-top h4 {

    margin-bottom:
        8px;

    font-size:
        13px;

    font-weight:
        800;

}


.footer-links a,
.footer-contact a {

    color:
        #74818b;

    font-size:
        11px;

    transition:
        0.3s;

}


.footer-links a:hover,
.footer-contact a:hover {

    color:
        var(--primary);

}


.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.footer-contact a {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.footer-contact i {

    color:
        var(--primary);

}


/* FOOTER BOTTOM */

.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    color:
        #596771;

    font-size:
        10px;

}


.footer-bottom div {

    display:
        flex;

    gap:
        20px;

}


.footer-bottom a:hover {

    color:
        var(--primary);

}


/* =====================================================
   FLOATING CONTACT
===================================================== */

.floating-contact {

    position:
        fixed;

    right:
        25px;

    z-index:
        999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    color:
        #ffffff;

    font-size:
        22px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);

    transition:
        0.3s;

}


.floating-contact:hover {

    transform:
        translateY(-4px);

}


.whatsapp {

    bottom:
        85px;

    background:
        #25d366;

}


.email {

    bottom:
        25px;

    background:
        #087aa9;

}


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

@media (max-width: 991px) {


    .desktop-nav,
    .header-cta {

        display:
            none;

    }


    .mobile-menu-btn {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .mobile-nav {

        flex-direction:
            column;

        padding:
            10px 0 20px;

        gap:
            5px;

    }


    .mobile-nav.show {

        display:
            flex;

    }


    .mobile-nav a {

        padding:
            13px 0;

        color:
            #aebbc5;

        font-size:
            13px;

        font-weight:
            700;

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

    }


    .inquiry-hero {

        min-height:
            580px;

    }


    .investor-discovery-section {

        padding:
            90px 0;

    }


    .investor-discovery-form {

        padding:
            38px;

    }


    .horizon-options {

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

    }


    .details-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .trust-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-top {

        grid-template-columns:
            1fr 1fr;

    }


}


@media (max-width: 767px) {


    .inquiry-hero-content {

        padding:
            90px 0;

    }


    .inquiry-hero h1 {

        letter-spacing:
            -2px;

    }


    .inquiry-hero p {

        font-size:
            14px;

    }


    .investor-discovery-form {

        padding:
            28px 20px;

        border-radius:
            18px;

    }


    .selection-grid {

        grid-template-columns:
            1fr;

    }


    .portfolio-row {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .portfolio-row select {

        width:
            100%;

    }


    .horizon-options {

        grid-template-columns:
            1fr 1fr;

    }


    .details-grid {

        grid-template-columns:
            1fr;

    }


    .final-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .submit-opportunity-btn {

        width:
            100%;

        justify-content:
            center;

    }


    .footer-top {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


}


@media (max-width: 480px) {


    .header-inner {

        min-height:
            70px;

    }


    .logo-mark {

        width:
            36px;

        height:
            36px;

    }


    .logo-text strong {

        font-size:
            12px;

    }


    .inquiry-hero {

        min-height:
            540px;

    }


    .inquiry-hero h1 {

        font-size:
            42px;

        letter-spacing:
            -1px;

    }


    .step-heading {

        gap:
            13px;

    }


    .step-number {

        width:
            48px;

        height:
            48px;

        border-radius:
            12px;

    }


    .step-heading h2 {

        font-size:
            25px;

    }


    .risk-labels {

        font-size:
            8px;

    }


    .progress-top {

        font-size:
            8px;

    }


    .trust-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .floating-contact {

        right:
            16px;

        width:
            46px;

        height:
            46px;

    }


    .whatsapp {

        bottom:
            75px;

    }


    .email {

        bottom:
            18px;

    }


}