/* =========================================================
   INA TRADING CO., LTD.
   PREMIUM TECHNOLOGY WEBSITE
   GLOBAL STYLESHEET
========================================================= */


/* =========================================================
   GOOGLE FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


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

:root {

    --navy-950: #020914;
    --navy-900: #04101f;
    --navy-800: #07182c;
    --navy-700: #0b2542;

    --blue: #087cff;
    --blue-light: #28b7ff;
    --cyan: #61e7ff;

    --white: #ffffff;
    --text: #152235;
    --muted: #64748b;
    --border: #dce5ee;

    --light-bg: #f5f8fc;
    --soft-bg: #eef4f9;

    --container: 1240px;

    --radius: 22px;

    --transition:
        all .35s cubic-bezier(.2,.8,.2,1);

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

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

    color: var(--text);

    background: #ffffff;

    line-height: 1.65;

    overflow-x: hidden;

}

body.menu-open {
    overflow: hidden;
}

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

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

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

button {
    border: 0;
}

::selection {
    background: var(--blue);
    color: white;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

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

    margin-inline: auto;

}


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

.section-padding {

    padding-top: 120px;
    padding-bottom: 120px;

}

.section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--blue);

    margin-bottom: 20px;

}

.section-label::before {

    content: "";

    width: 26px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-header {

    margin-bottom: 65px;

}

.section-header h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(38px, 4vw, 60px);

    line-height: 1.08;

    letter-spacing: -2px;

    color: var(--navy-950);

    max-width: 760px;

}

.section-header h2 span {

    display: block;

    color: var(--blue);

}

.section-header p {

    color: var(--muted);

}

.split-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .75fr);

    gap: 80px;

    align-items: end;

}

.section-header-text {

    max-width: 500px;

    padding-bottom: 4px;

}

.section-header-text p {

    font-size: 17px;

}

.centered-header {

    text-align: center;

}

.centered-header h2 {

    margin-inline: auto;

}

.centered-header > p {

    max-width: 680px;

    margin: 24px auto 0;

    font-size: 17px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    min-height: 56px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding:
        0 24px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

}

.btn span {

    transition:
        transform .3s ease;

}

.btn:hover span {

    transform:
        translate(3px, -3px);

}

.btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            #087cff,
            #09a9ff
        );

    box-shadow:
        0 12px 35px
        rgba(8,124,255,.25);

}

.btn-primary::before {

    content: "";

    position: absolute;

    width: 70px;

    height: 160%;

    left: -100px;

    top: -30%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform: rotate(20deg);

    transition:
        left .7s ease;

}

.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 45px
        rgba(8,124,255,.35);

}

.btn-primary:hover::before {

    left: 130%;

}

.btn-secondary {

    color: var(--navy-900);

    border: 1px solid #cdd9e5;

    background: white;

}

.btn-secondary:hover {

    color: var(--blue);

    border-color: var(--blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.08);

}

.btn-dark {

    color: white;

    background:
        var(--navy-900);

}

.btn-dark:hover {

    background:
        var(--blue);

    transform:
        translateY(-3px);

}

.btn-light-outline {

    color: white;

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

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

}

.btn-light-outline:hover {

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

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

    transform:
        translateY(-3px);

}


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

.hero-section {

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

    position: relative;

    overflow: hidden;

    color: white;

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(0,145,255,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 70%,
            rgba(0,210,255,.08),
            transparent 25%
        ),

        var(--navy-950);

    display: flex;

    align-items: center;

}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:

        linear-gradient(
            rgba(77,180,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(77,180,255,.08) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(10px);

    pointer-events: none;

}

.hero-glow-one {

    width: 420px;
    height: 420px;

    right: -120px;
    top: 10%;

    background:
        rgba(0,128,255,.10);

    animation:
        glowFloat 7s ease-in-out infinite;

}

.hero-glow-two {

    width: 260px;
    height: 260px;

    left: -100px;
    bottom: 10%;

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

    animation:
        glowFloat 9s ease-in-out infinite reverse;

}

.hero-glow-three {

    width: 180px;
    height: 180px;

    left: 48%;
    top: 10%;

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

    animation:
        glowFloat 6s ease-in-out infinite;

}

@keyframes glowFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0);
    }

    50% {
        transform:
            translate3d(0,-25px,0);
    }

}


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

.hero-container {

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

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(460px, .95fr);

    align-items: center;

    gap: 40px;

    padding-top: 80px;

    padding-bottom: 100px;

}











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

.hero-content {

    position: relative;

    z-index: 5;

    max-width: 700px;

}

.hero-eyebrow {

 display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(97,231,255,.2);

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

    border-radius: 100px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

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

    margin-bottom: 28px;

    backdrop-filter:
        blur(10px);

}

.pulse-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 0 0
        rgba(97,231,255,.6);

    animation:
        pulseDot 2s infinite;

}

@keyframes pulseDot {

    70% {
        box-shadow:
            0 0 0 8px
            rgba(97,231,255,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(97,231,255,0);
    }

}

.hero-content h1 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(48px, 5.7vw, 82px);

    line-height:
        .98;

    letter-spacing:
        -4px;

    font-weight:
        700;

    margin-bottom:
        28px;

}

.hero-content h1 span {

    display: block;

    color:
        var(--cyan);

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--cyan),
            #7dcaff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-size:
        200% auto;

    animation:
        gradientMove 5s linear infinite;

}

@keyframes gradientMove {

    to {
        background-position:
            200% center;
    }

}

.hero-description {

    max-width:
        650px;

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

    font-size:
        17px;

    line-height:
        1.8;

    margin-bottom:
        34px;

}

.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}

.hero-trust {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    margin-top:
        55px;

}

.hero-trust-item {

    display:
        flex;

    flex-direction:
        column;

}

.hero-trust-item strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        24px;

    color:
        white;

}

.hero-trust-item span {

    font-size:
        11px;

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

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}

.hero-trust-divider {

    width:
        1px;

    height:
        35px;

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

}


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

.hero-visual {

    min-height:
        600px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.tech-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(55,190,255,.16);

    border-radius:
        50%;

    animation:
        orbitRotate
        20s linear infinite;

}

.orbit-1 {

    width:
        400px;

    height:
        400px;

}

.orbit-2 {

    width:
        540px;

    height:
        540px;

    animation-duration:
        28s;

    animation-direction:
        reverse;

}

.orbit-3 {

    width:
        680px;

    height:
        680px;

    border-style:
        dashed;

    opacity:
        .45;

    animation-duration:
        35s;

}

@keyframes orbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   TECH CORE
========================================================= */

.tech-core {

    width:
        230px;

    height:
        230px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,165,255,.22),
            rgba(2,9,20,.95) 65%
        );

    border:
        1px solid
        rgba(93,225,255,.45);

    box-shadow:

        0 0 45px
        rgba(0,157,255,.2),

        inset 0 0 45px
        rgba(0,157,255,.1);

    z-index:
        4;

}

.core-ring {

    position:
        absolute;

    inset:
        -16px;

    border:
        1px solid
        rgba(83,215,255,.35);

    border-radius:
        50%;

    border-top-color:
        transparent;

    border-left-color:
        transparent;

    animation:
        coreSpin 6s linear infinite;

}

.core-ring-two {

    inset:
        -31px;

    border:
        1px dashed
        rgba(30,130,255,.3);

    animation-duration:
        10s;

    animation-direction:
        reverse;

}

@keyframes coreSpin {

    to {
        transform:
            rotate(360deg);
    }

}

.core-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}

.core-main {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        62px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        4px;

    color:
        white;

    text-shadow:
        0 0 30px
        rgba(71,220,255,.5);

}

.core-sub {

    margin-top:
        10px;

    font-size:
        9px;

    letter-spacing:
        4px;

    color:
        var(--cyan);

}


/* =========================================================
   FLOATING TECH CARDS
========================================================= */

.floating-tech-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 16px;

    min-width:
        185px;

    border:
        1px solid
        rgba(100,215,255,.15);

    border-radius:
        14px;

    background:
        rgba(8,25,45,.68);

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.22);

    z-index:
        7;

    transition:
        var(--transition);

}

.floating-tech-card:hover {

    transform:
        translateY(-8px)
        scale(1.03);

    border-color:
        rgba(86,220,255,.5);

    box-shadow:
        0 22px 50px
        rgba(0,140,255,.18);

}

.floating-tech-card strong {

    display:
        block;

    font-size:
        10px;

    letter-spacing:
        1px;

    color:
        white;

}

.floating-tech-card span {

    display:
        block;

    font-size:
        9px;

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

    margin-top:
        2px;

}

.floating-tech-icon {

    width:
        37px;

    height:
        37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        var(--cyan);

    background:
        rgba(0,150,255,.1);

    border:
        1px solid
        rgba(65,210,255,.16);

    font-size:
        17px;

}

.card-top-left {

    top:
        17%;

    left:
        0;

    animation:
        cardFloat 5s ease-in-out infinite;

}

.card-top-right {

    top:
        10%;

    right:
        0;

    animation:
        cardFloat 6s ease-in-out infinite 1s;

}

.card-bottom-left {

    bottom:
        14%;

    left:
        0;

    animation:
        cardFloat 6s ease-in-out infinite 1.5s;

}

.card-bottom-right {

    bottom:
        9%;

    right:
        0;

    animation:
        cardFloat 5s ease-in-out infinite 2s;

}

@keyframes cardFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}


/* =========================================================
   CIRCUIT POINTS
========================================================= */

.circuit-point {

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 14px
        var(--cyan);

    animation:
        pointPulse 2s infinite;

}

.point-one {
    left: 12%;
    top: 34%;
}

.point-two {
    right: 12%;
    top: 35%;
    animation-delay: .4s;
}

.point-three {
    left: 15%;
    bottom: 29%;
    animation-delay: .8s;
}

.point-four {
    right: 16%;
    bottom: 26%;
    animation-delay: 1.2s;
}

@keyframes pointPulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }

}


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

.hero-scroll {

    position:
        absolute;

    bottom:
        28px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

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

    font-size:
        8px;

    letter-spacing:
        2px;

}

.scroll-line {

    width:
        1px;

    height:
        38px;

    background:
        linear-gradient(
            to bottom,
            var(--cyan),
            transparent
        );

    animation:
        scrollLine 2s ease-in-out infinite;

}

@keyframes scrollLine {

    0%,
    100% {
        opacity: .3;
        transform: scaleY(.5);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

}


/* =========================================================
   STATS SECTION
========================================================= */

.stats-section {

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 15, 29, 0.94),
            rgba(4, 20, 36, 0.72),
            rgba(4, 15, 29, 0.92)
        ),
        url("../images/stats-bg.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* Subtle blue glow */

.stats-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: 50%;
    right: -180px;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(0, 183, 255, 0.16),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   STATS CONTAINER
========================================================= */

.stats-section .container {

    position: relative;

    z-index: 2;
}


/* =========================================================
   STATS WRAPPER
========================================================= */

.stats-wrapper {

    display: grid;

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

    width: 100%;

    overflow: hidden;

    border-radius: 20px;

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

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

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.30);
}


/* =========================================================
   STAT ITEM
========================================================= */

.stat-item {

    position: relative;

    min-height: 190px;

    padding: 38px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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


/* Vertical divider */

.stat-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 25%;

    right: 0;

    width: 1px;

    height: 50%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(73, 216, 255, 0.35),
            transparent
        );
}


/* Hover */

.stat-item:hover {

    background:
        rgba(73, 216, 255, 0.055);

}


/* =========================================================
   STAT VALUE
========================================================= */

.stat-value {

    position: relative;

    display: inline-flex;

    align-items: baseline;

    justify-content: center;

    gap: 3px;

    min-width: 180px;

    min-height: 82px;

    padding: 18px 24px;

    border-radius: 15px;

    overflow: hidden;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 42px;

    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(2, 13, 26, 0.72),
            rgba(7, 40, 62, 0.52)
        );

    border:
        1px solid
        rgba(73, 216, 255, 0.18);

    box-shadow:
        inset 0 0 30px
        rgba(73, 216, 255, 0.035),

        0 8px 25px
        rgba(0, 0, 0, 0.20);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* Technology image inside stat value */

.stat-value::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            135deg,
            rgba(2, 13, 26, 0.45),
            rgba(4, 40, 62, 0.28)
        ),
        url("../images/semi1.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0.48;

    z-index: 0;

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


/* Shine effect */

.stat-value::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );

    transform: skewX(-20deg);

    z-index: 1;

    transition:
        left 0.7s ease;
}


/* Number stays above image */

.stat-value .counter {

    position: relative;

    z-index: 2;

    color: #ffffff;

}


/* Plus sign */

.stat-value > span:last-child {

    position: relative;

    z-index: 2;

    color:
        var(--blue);

}


/* Hover stat value */

.stat-item:hover .stat-value {

    transform:
        translateY(-5px);

    border-color:
        rgba(73, 216, 255, 0.45);

    box-shadow:
        0 14px 35px
        rgba(0, 190, 255, 0.16),

        inset 0 0 30px
        rgba(73, 216, 255, 0.06);
}


/* Zoom background */

.stat-item:hover .stat-value::before {

    transform:
        scale(1.08);

    opacity: 0.62;
}


/* Shine */

.stat-item:hover .stat-value::after {

    left: 140%;
}


/* =========================================================
   STAT TEXT
========================================================= */

.stat-text {

    margin-top: 8px;

    font-size: 32px;

    color:
        var(--blue);
}


/* =========================================================
   STAT DESCRIPTION
========================================================= */

.stat-item p {

    margin-top: 14px;

    margin-bottom: 0;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.2px;

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .stats-section {

        padding: 65px 0;

    }


    .stats-wrapper {

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

    }


    .stat-item {

        min-height: 175px;

        padding: 32px 18px;

    }


    .stat-item:nth-child(2)::after {

        display: none;

    }


    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {

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

    }


    .stat-value {

        min-width: 165px;

        min-height: 76px;

        font-size: 36px;

        padding: 16px 20px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .stats-section {

        padding: 55px 0;

        background-position:
            center center;

    }


    .stats-wrapper {

        grid-template-columns: 1fr;

        border-radius: 16px;

    }


    .stat-item {

        min-height: 160px;

        padding: 28px 15px;

    }


    .stat-item:not(:last-child)::after {

        top: auto;

        right: 15%;

        bottom: 0;

        width: 70%;

        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(73, 216, 255, 0.30),
                transparent
            );

    }


    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {

        border-bottom: none;

    }


    .stat-value {

        min-width: 165px;

        min-height: 72px;

        padding: 15px 20px;

        font-size: 34px;

    }


    .stat-item p {

        font-size: 10px;

        letter-spacing: 1px;

    }

}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    background:
        white;

}

.intro-feature-grid {

    display:
        grid;

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

    gap:
        22px;

}

.feature-card {

    padding:
        40px;

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

    border-radius:
        var(--radius);

    background:
        white;

    position:
        relative;

    overflow:
        hidden;

    transition:
        var(--transition);

}

.feature-card::before {

    content:
        "";

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    right:
        -70px;

    top:
        -70px;

    border-radius:
        50%;

    background:
        rgba(8,124,255,.05);

}

.feature-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(8,124,255,.3);

    box-shadow:
        0 25px 60px
        rgba(9,48,82,.1);

}

.feature-card-highlight {

    color:
        white;

    background:
        linear-gradient(
            145deg,
            var(--navy-900),
            #0a3156
        );

    border-color:
        transparent;

}

.feature-card-highlight p {

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

}

.feature-card-highlight a {

    color:
        var(--cyan);

}

.feature-number {

    position:
        absolute;

    right:
        28px;

    top:
        25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        12px;

    color:
        #9eafc0;

}

.feature-card-highlight .feature-number {

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

}

.feature-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        28px;

    border-radius:
        15px;

    color:
        var(--blue);

    background:
        rgba(8,124,255,.08);

    font-size:
        22px;

}

.feature-card-highlight .feature-icon {

    color:
        var(--cyan);

    background:
        rgba(97,231,255,.08);

}

.feature-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        23px;

    margin-bottom:
        14px;

}

.feature-card p {

    font-size:
        14px;

    color:
        var(--muted);

    line-height:
        1.75;

    margin-bottom:
        25px;

}

.feature-card a {

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        700;

}

.feature-card a span {

    margin-left:
        5px;

    transition:
        transform .3s ease;

}

.feature-card:hover a span {

    display:
        inline-block;

    transform:
        translateX(5px);

}


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

.portfolio-section {

    background:
        var(--light-bg);

}

.portfolio-grid {

    display:
        grid;

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

    gap:
        16px;

}

.portfolio-card {

    min-height:
        270px;

    padding:
        28px;

    background:
        white;

    border:
        1px solid
        #e2e9f0;

    border-radius:
        18px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    transition:
        var(--transition);

}

.portfolio-card::before {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -100px;

    bottom:
        -100px;

    border-radius:
        50%;

    background:
        rgba(8,124,255,.05);

    transition:
        var(--transition);

}

.portfolio-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(8,124,255,.28);

    box-shadow:
        0 22px 50px
        rgba(13,56,92,.1);

}

.portfolio-card:hover::before {

    transform:
        scale(1.6);

}

.portfolio-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        35px;

}

.portfolio-number {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        11px;

    color:
        #a2afbc;

}

.portfolio-icon {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

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

    color:
        var(--blue);

    font-size:
        20px;

    transition:
        var(--transition);

}

.portfolio-card:hover .portfolio-icon {

    color:
        white;

    background:
        var(--blue);

    transform:
        rotate(-8deg)
        scale(1.08);

}

.portfolio-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        18px;

    line-height:
        1.3;

    margin-bottom:
        12px;

}

.portfolio-card p {

    font-size:
        13px;

    line-height:
        1.7;

    color:
        var(--muted);

}

.portfolio-link {

    margin-top:
        auto;

    padding-top:
        22px;

    font-size:
        11px;

    font-weight:
        700;

    color:
        var(--blue);

}

.portfolio-more {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        50px;

}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {

    background:
        white;

}



.industry-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        var(--border);

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

}

.industry-card {

    min-height:
        245px;

    padding:
        32px;

    background:
        white;

    position:
        relative;

    transition:
        var(--transition);

}

.industry-card:hover {

    background:
        #f5faff;

    z-index:
        2;

    box-shadow:
        0 15px 40px
        rgba(10,60,100,.1);

}

.industry-number {

    position:
        absolute;

    right:
        25px;

    top:
        24px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        11px;

    color:
        #b4bec9;

}

.industry-icon {

    width:
        46px;

    height:
        46px;

    border-radius:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--blue);

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

    margin-bottom:
        25px;

    transition:
        var(--transition);

}

.industry-card:hover .industry-icon {

    color:
        white;

    background:
        var(--blue);

    transform:
        translateY(-4px);

}

.industry-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        18px;

    margin-bottom:
        10px;

}

.industry-card p {

    font-size:
        13px;

    color:
        var(--muted);

    line-height:
        1.65;

}


/* =========================================================
   WHY INA
========================================================= */

.why-section {

    background:
        var(--light-bg);

}

.why-container {

    display:
        grid;

    grid-template-columns:
        minmax(400px, .9fr)
        minmax(0, 1fr);

    gap:
        110px;

    align-items:
        center;

}

.why-visual {

    height:
        580px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        30px;

    background:
        var(--navy-950);

}

.why-background-grid {

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(70,180,255,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(70,180,255,.07) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    opacity:
        .5;

}

.why-circle {

    position:
        absolute;

    border:
        1px solid
        rgba(70,210,255,.18);

    border-radius:
        50%;

}

.circle-large {

    width:
        470px;

    height:
        470px;

    animation:
        orbitRotate 25s linear infinite;

}

.circle-medium {

    width:
        340px;

    height:
        340px;

    border-style:
        dashed;

    animation:
        orbitRotate 18s linear infinite reverse;

}

.circle-small {

    width:
        220px;

    height:
        220px;

    box-shadow:
        0 0 80px
        rgba(0,150,255,.12);

}

.why-center-logo {

    width:
        160px;

    height:
        160px;

    border-radius:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle,
            #0c4d7a,
            #061529
        );

    border:
        1px solid
        rgba(92,220,255,.5);

    box-shadow:
        0 0 60px
        rgba(0,155,255,.25);

    position:
        relative;

    z-index:
        5;

}

.why-center-logo span {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        42px;

    font-weight:
        700;

    letter-spacing:
        4px;

    color:
        white;

}

.why-center-logo small {

    color:
        var(--cyan);

    letter-spacing:
        3px;

    font-size:
        8px;

}

.why-floating {

    position:
        absolute;

    z-index:
        8;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(90,215,255,.2);

    border-radius:
        8px;

    background:
        rgba(8,25,45,.8);

    backdrop-filter:
        blur(10px);

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

    font-size:
        9px;

    letter-spacing:
        1.5px;

}

.why-floating-one {
    top: 19%;
    left: 12%;
}

.why-floating-two {
    top: 30%;
    right: 8%;
}

.why-floating-three {
    bottom: 22%;
    left: 10%;
}

.why-floating-four {
    bottom: 14%;
    right: 13%;
}

.why-content h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(38px,4vw,58px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        25px;

}

.why-content h2 span {

    display:
        block;

    color:
        var(--blue);

}

.why-intro {

    color:
        var(--muted);

    max-width:
        650px;

    font-size:
        16px;

    margin-bottom:
        35px;

}

.why-points {

    display:
        flex;

    flex-direction:
        column;

    gap:
        24px;

}

.why-point {

    display:
        flex;

    gap:
        17px;

}

.why-point-icon {

    flex:
        0 0 32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--blue);

    background:
        rgba(8,124,255,.08);

    font-size:
        13px;

    font-weight:
        700;

}

.why-point h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        16px;

    margin-bottom:
        4px;

}

.why-point p {

    font-size:
        13px;

    color:
        var(--muted);

}

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        32px;

    color:
        var(--blue);

    font-size:
        13px;

    font-weight:
        700;

}

.text-link span {

    transition:
        transform .3s ease;

}

.text-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   PROCESS
========================================================= */

.process-section {

    background:
        white;

}

.process-grid {

    display:
        grid;

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

    gap:
        20px;

}

.process-card {

    position:
        relative;

    padding:
        35px 28px;

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

    border-radius:
        20px;

    transition:
        var(--transition);

}

.process-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(8,124,255,.25);

    box-shadow:
        0 22px 50px
        rgba(15,55,90,.09);

}

.process-number {

    position:
        absolute;

    right:
        22px;

    top:
        20px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        11px;

    color:
        #abb6c1;

}

.process-icon {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        var(--blue);

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

    font-size:
        20px;

    margin-bottom:
        26px;

    transition:
        var(--transition);

}

.process-card:hover .process-icon {

    color:
        white;

    background:
        var(--blue);

    transform:
        scale(1.08)
        rotate(-5deg);

}

.process-card h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        19px;

    margin-bottom:
        10px;

}

.process-card p {

    color:
        var(--muted);

    font-size:
        13px;

}


/* =========================================================
   TECHNOLOGY MARQUEE
========================================================= */

.technology-band {

    overflow:
        hidden;

    background:
        var(--navy-900);

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

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

    white-space:
        nowrap;

}

.technology-band-track {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        23px 0;

    min-width:
        max-content;

    animation:
        marquee 30s linear infinite;

}

.technology-band-track span {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        12px;

    letter-spacing:
        1.8px;

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

}

.technology-band-track i {

    font-style:
        normal;

    color:
        var(--cyan);

}

@keyframes marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


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

.home-cta-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--navy-950);

    color:
        white;

}

.cta-background-grid {

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(70,180,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(70,180,255,.06) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent
        );

}

.cta-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    right:
        -180px;

    top:
        50%;

    transform:
        translateY(-50%);

    background:
        rgba(0,140,255,.12);

    filter:
        blur(50px);

}

.home-cta {

    min-height:
        560px;

    display:
        grid;

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

    gap:
        70px;

    align-items:
        center;

}

.cta-content {

    position:
        relative;

    z-index:
        2;

}

.cta-content h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(42px,5vw,70px);

    line-height:
        1;

    letter-spacing:
        -3px;

    margin-bottom:
        25px;

}

.cta-content h2 span {

    display:
        block;

    color:
        var(--cyan);

}

.cta-content p {

    max-width:
        580px;

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

    font-size:
        16px;

    margin-bottom:
        32px;

}

.cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}

.cta-visual {

    height:
        430px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.cta-orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(80,220,255,.18);

    border-radius:
        50%;

    animation:
        orbitRotate 20s linear infinite;

}

.orbit-a {
    width: 230px;
    height: 230px;
}

.orbit-b {
    width: 330px;
    height: 330px;
    animation-direction: reverse;
    animation-duration: 27s;
}

.orbit-c {
    width: 430px;
    height: 430px;
    border-style: dashed;
    animation-duration: 35s;
}

.cta-core {

    width:
        145px;

    height:
        145px;

    border-radius:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle,
            #0b4c76,
            #061323
        );

    border:
        1px solid
        rgba(90,220,255,.5);

    box-shadow:
        0 0 60px
        rgba(0,155,255,.25);

    position:
        relative;

    z-index:
        5;

}

.cta-core span {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        38px;

    font-weight:
        700;

    letter-spacing:
        3px;

}

.cta-core small {

    color:
        var(--cyan);

    font-size:
        7px;

    letter-spacing:
        3px;

    margin-top:
        5px;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);

}

.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   STAGGER
========================================================= */

.feature-card:nth-child(2),
.portfolio-card:nth-child(2),
.industry-card:nth-child(2),
.process-card:nth-child(2) {
    transition-delay:
        .08s;
}

.feature-card:nth-child(3),
.portfolio-card:nth-child(3),
.industry-card:nth-child(3),
.process-card:nth-child(3) {
    transition-delay:
        .16s;
}

.portfolio-card:nth-child(4),
.industry-card:nth-child(4),
.process-card:nth-child(4) {
    transition-delay:
        .24s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero-container {

        grid-template-columns:
            1fr;

        padding-top:
            100px;

    }

    .hero-content {

        max-width:
            800px;

        margin-inline:
            auto;

        text-align:
            center;

    }

    .hero-eyebrow,
    .hero-actions,
    .hero-trust {

        justify-content:
            center;

    }

    .hero-description {

        margin-inline:
            auto;

    }

    .hero-visual {

        min-height:
            500px;

    }

    .portfolio-grid {

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

    }

    .industry-grid {

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

    }

    .why-container {

        grid-template-columns:
            1fr;

        gap:
            70px;

    }

    .why-visual {

        max-width:
            650px;

        width:
            100%;

        margin-inline:
            auto;

    }

    .why-content {

        max-width:
            750px;

        margin-inline:
            auto;

    }

    .process-grid {

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

    }

    .home-cta {

        grid-template-columns:
            1fr;

        padding-top:
            80px;

        padding-bottom:
            80px;

    }

    .cta-content {

        text-align:
            center;

    }

    .cta-content p {

        margin-inline:
            auto;

    }

    .cta-actions {

        justify-content:
            center;

    }

    .cta-visual {

        height:
            350px;

    }

}


/* =========================================================
   TABLET SMALL
========================================================= */

@media (max-width: 850px) {

    .section-padding {

        padding-top:
            85px;

        padding-bottom:
            85px;

    }

    .split-header {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

    .intro-feature-grid {

        grid-template-columns:
            1fr;

    }

    .portfolio-grid {

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

    }

    .stats-wrapper {

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

    }

    .stat-item:nth-child(2) {

        border-right:
            0;

    }

    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {

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

    }

    .why-visual {

        height:
            500px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }

    .section-padding {

        padding-top:
            70px;

        padding-bottom:
            70px;

    }

    .section-header {

        margin-bottom:
            40px;

    }

    .section-header h2 {

        font-size:
            38px;

        letter-spacing:
            -1.8px;

    }

    .hero-section {

        min-height:
            auto;

    }

    .hero-container {

        min-height:
            auto;

        padding-top:
            90px;

        padding-bottom:
            85px;

    }

    .hero-content h1 {

        font-size:
            48px;

        letter-spacing:
            -2.8px;

    }

    .hero-description {

        font-size:
            15px;

        line-height:
            1.7;

    }

    .hero-actions {

        flex-direction:
            column;

    }

    .hero-actions .btn {

        width:
            100%;

    }

    .hero-trust {

        gap:
            12px;

        margin-top:
            40px;

    }

    .hero-trust-divider {

        height:
            28px;

    }

    .hero-trust-item strong {

        font-size:
            18px;

    }

    .hero-trust-item span {

        font-size:
            8px;

    }

    .hero-visual {

        min-height:
            390px;

        margin-top:
            10px;

    }

    .tech-core {

        width:
            150px;

        height:
            150px;

    }

    .core-main {

        font-size:
            43px;

    }

    .core-sub {

        font-size:
            7px;

    }

    .orbit-1 {

        width:
            260px;

        height:
            260px;

    }

    .orbit-2 {

        width:
            350px;

        height:
            350px;

    }

    .orbit-3 {

        width:
            440px;

        height:
            440px;

    }

    .floating-tech-card {

        min-width:
            140px;

        padding:
            9px;

        gap:
            8px;

    }

    .floating-tech-icon {

        width:
            30px;

        height:
            30px;

        font-size:
            13px;

    }

    .floating-tech-card strong {

        font-size:
            8px;

    }

    .floating-tech-card span {

        font-size:
            7px;

    }

    .card-top-left {

        left:
            -5px;

    }

    .card-top-right {

        right:
            -5px;

    }

    .card-bottom-left {

        left:
            -5px;

    }

    .card-bottom-right {

        right:
            -5px;

    }

    .hero-scroll {

        display:
            none;

    }

    .stats-wrapper {

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

    }

    .stat-item {

        padding:
            30px 10px;

    }

    .stat-value {

        font-size:
            29px;

    }

    .stat-text {

        font-size:
            23px;

    }

    .stat-item p {

        font-size:
            8px;

        letter-spacing:
            .7px;

    }

    .portfolio-grid {

        grid-template-columns:
            1fr;

    }

    .portfolio-card {

        min-height:
            240px;

    }

    .industry-grid {

        grid-template-columns:
            1fr;

    }

    .industry-card {

        min-height:
            210px;

    }

    .why-container {

        gap:
            45px;

    }

    .why-visual {

        height:
            390px;

        border-radius:
            22px;

    }

    .circle-large {

        width:
            300px;

        height:
            300px;

    }

    .circle-medium {

        width:
            230px;

        height:
            230px;

    }

    .circle-small {

        width:
            150px;

        height:
            150px;

    }

    .why-center-logo {

        width:
            115px;

        height:
            115px;

    }

    .why-center-logo span {

        font-size:
            30px;

    }

    .why-floating {

        font-size:
            7px;

        padding:
            7px 9px;

    }

    .why-floating-one {
        top: 14%;
        left: 5%;
    }

    .why-floating-two {
        top: 25%;
        right: 4%;
    }

    .why-floating-three {
        bottom: 20%;
        left: 4%;
    }

    .why-floating-four {
        bottom: 11%;
        right: 5%;
    }

    .process-grid {

        grid-template-columns:
            1fr;

    }

    .technology-band-track {

        gap:
            18px;

    }

    .technology-band-track span {

        font-size:
            10px;

    }

    .home-cta {

        min-height:
            auto;

    }

    .cta-content h2 {

        font-size:
            42px;

        letter-spacing:
            -2px;

    }

    .cta-actions {

        flex-direction:
            column;

    }

    .cta-actions .btn {

        width:
            100%;

    }

    .cta-visual {

        height:
            270px;

    }

    .orbit-a {

        width:
            160px;

        height:
            160px;

    }

    .orbit-b {

        width:
            220px;

        height:
            220px;

    }

    .orbit-c {

        width:
            280px;

        height:
            280px;

    }

    .cta-core {

        width:
            100px;

        height:
            100px;

    }

    .cta-core span {

        font-size:
            27px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}





















/* =========================================================
   INA TRADING MOBILE MENU FINAL FIX
========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: relative;
        z-index: 9999;
    }

    .menu-toggle {
        position: relative;
        z-index: 10001;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .main-nav {
        z-index: 10000;
    }

    .main-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .main-nav:not(.active) {
        pointer-events: none;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}