@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 {
    --bg: #05070d;
    --bg2: #090d16;
    --card: rgba(255,255,255,0.055);
    --card-hover: rgba(255,255,255,0.09);
    --white: #f5f7fa;
    --muted: #8e98a8;
    --cyan: #20e0ff;
    --lime: #b7ff4a;
    --purple: #805cff;
    --border: rgba(255,255,255,0.09);
    --gradient: linear-gradient(135deg, #20e0ff, #805cff);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: var(--bg);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -150px;
    background: rgba(32,224,255,.08);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

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

button,
input,
textarea {
    font-family: inherit;
}


/* =========================
   NAVBAR
========================= */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5,7,13,.78);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.navbar {
    max-width: 1240px;
    margin: auto;
    height: 82px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -2px;
}

.logo span {
    color: var(--cyan);
}

.logo-dot {
    color: var(--lime);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: #aeb6c3;
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--cyan);
}

.login-link {
    color: var(--white) !important;
}

.nav-btn {
    padding: 11px 20px;
    color: #05070d !important;
    background: var(--lime);
    border-radius: 8px;
    transition: .3s;
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(183,255,74,.2);
}

.menu-toggle {
    display: none;
    color: white;
    background: transparent;
    border: 0;
    font-size: 27px;
}


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

.hero {
    min-height: 720px;
    padding: 100px 25px;
    max-width: 1240px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    left: -200px;
    top: 100px;
    border-radius: 50%;
    background: rgba(128,92,255,.12);
    filter: blur(100px);
    z-index: -1;
}

.hero-content {
    max-width: 650px;
}

.hero-badge {
    display: inline-flex;
    padding: 8px 14px;
    border: 1px solid rgba(32,224,255,.25);
    border-radius: 50px;
    color: var(--cyan);
    background: rgba(32,224,255,.06);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 25px;
}

.hero h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -5px;
    margin-bottom: 28px;
}

.hero h1 span {
    background: linear-gradient(90deg, var(--cyan), #7d9cff);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-content > p {
    max-width: 580px;
    color: var(--muted);
    font-size: 17px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    margin: 35px 0;
    flex-wrap: wrap;
}

.primary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 23px;
    border-radius: 9px;
    border: 1px solid rgba(32,224,255,.3);
    background: var(--cyan);
    color: #031015;
    font-weight: 800;
    transition: .3s;
    cursor: pointer;
}

.primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(32,224,255,.18);
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 23px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--white);
    background: rgba(255,255,255,.03);
    font-weight: 700;
}

.secondary-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.hero-trust {
    display: flex;
    gap: 40px;
}

.hero-trust div {
    display: flex;
    flex-direction: column;
}

.hero-trust strong {
    font-size: 20px;
}

.hero-trust small {
    color: var(--muted);
}


/* =========================
   PAYMENT DASHBOARD
========================= */

.hero-card-area {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-card {
    width: 430px;
    min-height: 400px;
    padding: 25px;
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.11),
        rgba(255,255,255,.035)
    );
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        0 40px 100px rgba(0,0,0,.5),
        inset 0 1px rgba(255,255,255,.1);
    backdrop-filter: blur(25px);
    transform: rotate(3deg);
}

.dashboard-top {
    display: flex;
    justify-content: space-between;
    color: #9da7b5;
    font-size: 13px;
}

.balance {
    margin-top: 40px;
}

.balance small {
    color: var(--muted);
}

.balance h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 42px;
    margin-top: 5px;
}

.balance h2 span {
    color: var(--cyan);
}

.dashboard-line {
    height: 1px;
    background: var(--border);
    margin: 25px 0;
}

.transaction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0;
}

.transaction-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transaction-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(32,224,255,.1);
    color: var(--cyan);
}

.transaction small {
    display: block;
    color: var(--muted);
}

.transaction strong {
    font-size: 14px;
}

.amount {
    color: var(--lime);
    font-weight: 700;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(12,16,26,.85);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    animation: float 4s ease-in-out infinite;
}

.floating-card strong {
    font-size: 13px;
}

.floating-card small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.floating-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lime);
    color: #071000;
}

.card-one {
    right: -10px;
    top: 70px;
}

.card-two {
    left: -20px;
    bottom: 70px;
}

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


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

.stats {
    max-width: 1150px;
    margin: 0 auto;
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat {
    text-align: center;
    border-right: 1px solid var(--border);
}

.stat:last-child {
    border-right: 0;
}

.stat h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 30px;
    color: var(--cyan);
}

.stat p {
    color: var(--muted);
    font-size: 13px;
}


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

.section {
    max-width: 1200px;
    margin: auto;
    padding: 120px 25px;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 60px;
}

.section-heading.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-heading span,
.page-hero span,
.solution-content span,
.about-content span,
.contact-info > span,
.cta span {
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
}

.section-heading h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 50px;
    line-height: 1.05;
    letter-spacing: -3px;
    margin: 15px 0;
}

.section-heading h2 b {
    color: var(--cyan);
}

.section-heading p {
    color: var(--muted);
}


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

.service-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.large-grid {
    grid-template-columns: repeat(3,1fr);
}

.service-card {
    padding: 30px;
    min-height: 250px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    transition: .35s;
}

.service-card:hover {
    transform: translateY(-8px);
    background: var(--card-hover);
    border-color: rgba(32,224,255,.3);
}

.service-icon {
    width: 55px;
    height: 55px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(32,224,255,.08);
    color: var(--cyan);
    font-size: 24px;
    margin-bottom: 25px;
}

.service-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
    margin-bottom: 10px;
}

.service-card p {
    color: var(--muted);
    font-size: 14px;
}

.service-card > a {
    display: inline-block;
    margin-top: 20px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
}

.check-list {
    list-style: none;
    margin-top: 20px;
}

.check-list li {
    color: var(--muted);
    font-size: 13px;
    margin: 8px 0;
}

.check-list li::before {
    content: "✓";
    color: var(--lime);
    margin-right: 8px;
}


/* =========================
   DARK FEATURE AREA
========================= */

.dark-section {
    padding: 120px max(25px, calc((100% - 1200px)/2));
    background: #080b13;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.dark-content {
    max-width: 550px;
}

.dark-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 55px;
    line-height: 1;
    letter-spacing: -3px;
    margin: 18px 0;
}

.dark-content h2 strong {
    color: var(--cyan);
}

.dark-content p {
    color: var(--muted);
    margin-bottom: 30px;
}

.dashboard-preview {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
}

.green {
    color: var(--lime);
}

.chart {
    height: 240px;
    display: flex;
    align-items: end;
    gap: 12px;
    margin-top: 35px;
    border-bottom: 1px solid var(--border);
}

.bar {
    flex: 1;
    background: linear-gradient(to top, #20e0ff, #805cff);
    border-radius: 5px 5px 0 0;
}

.bar1 { height: 35%; }
.bar2 { height: 50%; }
.bar3 { height: 45%; }
.bar4 { height: 70%; }
.bar5 { height: 58%; }
.bar6 { height: 80%; }
.bar7 { height: 95%; }

.chart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 10px;
    padding-top: 10px;
}


/* =========================
   FEATURES
========================= */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.feature {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
}

.feature > div {
    font-size: 28px;
    margin-bottom: 15px;
}

.feature h3 {
    font-family: "Space Grotesk", sans-serif;
    margin-bottom: 10px;
}

.feature p {
    color: var(--muted);
    font-size: 14px;
}


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

.cta {
    max-width: 1150px;
    margin: 0 auto 100px;
    padding: 60px;
    border-radius: 25px;
    border: 1px solid rgba(32,224,255,.2);
    background:
        radial-gradient(circle at 90% 20%, rgba(32,224,255,.18), transparent 30%),
        linear-gradient(135deg,#0c1620,#0b101a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 45px;
    line-height: 1;
    margin-top: 12px;
}

.white-btn {
    display: inline-flex;
    padding: 14px 22px;
    background: var(--lime);
    color: #081000;
    border-radius: 8px;
    font-weight: 800;
}


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

.page-hero {
    text-align: center;
    padding: 130px 25px;
    background:
        radial-gradient(circle at 50% 0, rgba(32,224,255,.1), transparent 45%);
}

.page-hero h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(45px,6vw,70px);
    line-height: 1;
    letter-spacing: -4px;
    margin: 20px 0;
}

.page-hero h1 strong {
    color: var(--cyan);
}

.page-hero p {
    max-width: 650px;
    margin: auto;
    color: var(--muted);
}


/* =========================
   SOLUTIONS
========================= */

.solution-section {
    max-width: 1150px;
    margin: auto;
    padding: 110px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.solution-section.reverse {
    max-width: none;
    padding-left: max(25px,calc((100% - 1100px)/2));
    padding-right: max(25px,calc((100% - 1100px)/2));
    flex-direction: row-reverse;
    background: #080b13;
}

.solution-content {
    max-width: 540px;
}

.solution-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 50px;
    line-height: 1;
    letter-spacing: -3px;
    margin: 15px 0;
}

.solution-content p {
    color: var(--muted);
    margin-bottom: 30px;
}

.solution-box {
    width: 450px;
    min-height: 320px;
    padding: 45px;
    border: 1px solid rgba(32,224,255,.18);
    border-radius: 25px;
    background:
        radial-gradient(circle at 80% 20%,rgba(32,224,255,.15),transparent 35%),
        var(--card);
}

.solution-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--cyan);
    color: #061016;
    font-size: 28px;
    font-weight: 800;
}

.solution-box h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    margin: 20px 0 5px;
}

.solution-box p {
    color: var(--muted);
}

.purple-box {
    border-color: rgba(128,92,255,.3);
}

.green-box {
    border-color: rgba(183,255,74,.25);
}

.green-box .solution-icon {
    background: var(--lime);
}


/* =========================
   ABOUT
========================= */



/* =========================================
   FINTECH ABOUT US SECTION
========================================= */

.fintech-about {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 194, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(0, 224, 164, 0.08),
            transparent 30%
        ),
        #ffffff;
    overflow: hidden;
}

.fintech-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}


/* CONTENT */

.fintech-about-content h2 {
    color: var(--navy);
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 25px;
}

.fintech-about-content h2 strong {
    color: var(--cyan);
    display: block;
}

.fintech-about-content > p {
    color: var(--muted);
    font-size: 15px;
    max-width: 600px;
    margin-bottom: 16px;
}


/* POINTS */

.fintech-points {
    margin: 30px 0;
}

.fintech-point {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 17px 0;
}

.fintech-point > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e6fbf5;
    color: #00aa7c;
    font-weight: 800;
}

.fintech-point strong,
.fintech-point small {
    display: block;
}

.fintech-point strong {
    color: var(--navy);
    font-size: 14px;
}

.fintech-point small {
    color: var(--muted);
    font-size: 11px;
}


/* =========================================
   FINTECH VISUAL
========================================= */

.fintech-visual {
    height: 520px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 35px;
    background:
        linear-gradient(
            145deg,
            #effcff,
            #eafff8
        );
    overflow: hidden;
}


/* GRID BACKGROUND */

.fintech-visual::before {
    content: "";
    position: absolute;
    inset: 0;

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

    background-size: 35px 35px;

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


/* CORE */

.fintech-core {
    width: 190px;
    height: 190px;
    border-radius: 50%;

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

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;

    position: relative;
    z-index: 5;

    box-shadow:
        0 0 0 15px rgba(0, 194, 255, .05),
        0 25px 60px rgba(0, 50, 80, .25);

    animation: coreFloat 4s ease-in-out infinite;
}

.core-logo {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--mint)
        );

    color: var(--navy);

    font-size: 25px;
    font-weight: 900;

    margin-bottom: 8px;
}

.fintech-core strong {
    font-size: 18px;
}

.fintech-core small {
    color: #91adbd;
    font-size: 10px;
}


/* CORE GLOW */

.core-glow {
    position: absolute;
    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(0, 194, 255, .15);

    filter: blur(25px);

    animation: glowPulse 3s infinite;
}


/* ORBITS */

.fintech-orbit {
    position: absolute;
    border: 1px dashed rgba(0, 150, 190, .3);
    border-radius: 50%;
}

.orbit-one {
    width: 330px;
    height: 330px;

    animation: rotateOrbit 16s linear infinite;
}

.orbit-two {
    width: 440px;
    height: 440px;

    animation: rotateOrbitReverse 22s linear infinite;
}


/* ORBIT DOTS */

.orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:
        0 0 20px rgba(0,194,255,.8);

    z-index: 4;
}

.dot-one {
    top: 95px;
    left: 145px;
}

.dot-two {
    right: 105px;
    top: 230px;

    background: var(--mint);

    box-shadow:
        0 0 20px rgba(0,224,164,.8);
}

.dot-three {
    bottom: 90px;
    left: 230px;
}


/* =========================================
   FLOATING PAYMENT CARDS
========================================= */

.floating-card {
    position: absolute;

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

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

    padding: 13px 16px;

    border-radius: 13px;

    display: flex;
    align-items: center;
    gap: 10px;

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

    z-index: 8;

    backdrop-filter: blur(10px);

    animation: floatingCard 4s ease-in-out infinite;
}

.floating-card small,
.floating-card strong {
    display: block;
}

.floating-card small {
    color: var(--muted);
    font-size: 9px;
}

.floating-card strong {
    color: var(--navy);
    font-size: 12px;
}

.mini-icon,
.secure-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

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

    background: #e7faff;
    color: var(--cyan);
}

.secure-icon {
    background: #e6fff7;
    color: #00a879;
}

.card-payment {
    top: 65px;
    left: 35px;
}

.card-upi {
    right: 25px;
    top: 155px;

    animation-delay: 1s;
}

.card-secure {
    bottom: 65px;
    left: 55px;

    animation-delay: 2s;
}


/* =========================================
   FINTECH FEATURES
========================================= */

.fintech-features {
    margin-top: 90px;

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

    gap: 20px;
}

.fintech-feature {
    padding: 30px;

    background: #f7fcfd;

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

    border-radius: 16px;

    transition: .35s;
}

.fintech-feature:hover {
    transform: translateY(-8px);

    background: white;

    box-shadow:
        0 20px 50px rgba(7,26,47,.10);

    border-color: #b7edf6;
}

.feature-number {
    color: var(--cyan);

    font-weight: 800;

    font-size: 12px;

    margin-bottom: 20px;
}

.fintech-feature h3 {
    color: var(--navy);
    margin-bottom: 8px;
}

.fintech-feature p {
    color: var(--muted);
    font-size: 13px;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes coreFloat {

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

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

}

@keyframes glowPulse {

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

    50% {
        transform: scale(1.2);
        opacity: .8;
    }

}

@keyframes floatingCard {

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

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

}

@keyframes rotateOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes rotateOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


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

.contact-section {
    max-width: 1150px;
    margin: auto;
    padding: 110px 25px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
}

.contact-info h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -3px;
    margin: 15px 0;
}

.contact-info > p {
    color: var(--muted);
    margin-bottom: 35px;
}

.contact-item {
    display: flex;
    gap: 15px;
    margin: 25px 0;
}

.contact-item > div:first-child {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    background: rgba(32,224,255,.08);
    color: var(--cyan);
    border-radius: 10px;
}

.contact-item p {
    color: var(--muted);
}

.contact-form {
    padding: 35px;
    border-radius: 20px;
    background: var(--card);
    border: 1px solid var(--border);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px;
    background: rgba(255,255,255,.035);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--cyan);
}

.form-message {
    margin-top: 15px;
    color: var(--lime);
    font-size: 13px;
}


/* =========================
   AUTH
========================= */

.auth-body {
    min-height: 100vh;
    background: var(--bg);
}

.auth-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 45% 55%;
}

.auth-brand {
    padding: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 40%,rgba(32,224,255,.1),transparent 45%),
        #080b13;
    border-right: 1px solid var(--border);
}

.auth-brand .logo {
    margin-bottom: 60px;
}

.auth-brand h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 20px;
}

.auth-brand > p {
    max-width: 430px;
    color: var(--muted);
    margin-bottom: 30px;
}

.auth-feature {
    color: #bdc5d0;
    margin: 8px 0;
}

.auth-form-container {
    padding: 40px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.back-home {
    color: var(--cyan);
    font-size: 13px;
    margin-bottom: 25px;
}

.auth-form {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.auth-form h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 40px;
}

.auth-form > p {
    color: var(--muted);
    margin-bottom: 30px;
}

.full-btn {
    width: 100%;
}

.remember {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 20px;
}

.remember a,
.auth-switch a {
    color: var(--cyan);
}

.auth-switch {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-top: 25px;
}





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

.footer {
    background: #03050a;
    border-top: 1px solid var(--border);
    padding: 80px max(25px,calc((100% - 1150px)/2)) 25px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3,1fr);
    gap: 50px;
    padding-bottom: 55px;
}

.footer-brand p {
    max-width: 300px;
    color: var(--muted);
    margin: 18px 0;
}

.footer h4 {
    margin-bottom: 20px;
}

.footer-grid > div:not(.footer-brand) a {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin: 10px 0;
}

.footer-grid > div:not(.footer-brand) a:hover {
    color: var(--cyan);
}

.socials {
    display: flex;
    gap: 8px;
}

.socials a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    color: #666e7b;
    font-size: 11px;
}


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

@media(max-width:1000px) {

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        margin: auto;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .hero-card-area {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .service-grid,
    .feature-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .dark-section {
        grid-template-columns: 1fr;
    }

    .dark-content {
        margin: auto;
        text-align: center;
    }

    .dashboard-preview {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .solution-section,
    .solution-section.reverse {
        flex-direction: column;
        text-align: center;
    }

    .solution-box {
        width: 100%;
        max-width: 500px;
    }

    .about-section,
    .contact-section {
        grid-template-columns: 1fr;
    }

    .about-image {
        max-width: 600px;
        margin: auto;
        width: 100%;
    }

    .auth-wrapper {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        display: none;
    }

    .auth-form-container {
        min-height: 100vh;
    }
}


@media(max-width:750px) {

    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 82px;
        left: 0;
        width: 100%;
        padding: 15px 25px 25px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #080b13;
        border-bottom: 1px solid var(--border);
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links li {
        padding: 12px 0;
    }

    .nav-btn {
        display: block;
        text-align: center;
    }

    .hero h1 {
        font-size: 47px;
        letter-spacing: -3px;
    }

    .hero-card-area {
        transform: scale(.8);
        margin-top: -40px;
        margin-bottom: -50px;
    }

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

    .stat {
        padding: 15px 0;
        border: 0;
    }

    .section-heading h2,
    .solution-content h2,
    .about-content h2,
    .contact-info h2 {
        font-size: 38px;
    }

    .service-grid,
    .large-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .cta {
        margin: 0 20px 70px;
        padding: 40px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cta h2 {
        font-size: 35px;
    }

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

    .contact-form {
        padding: 25px;
    }

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

    .footer-brand {
        grid-column: 1/-1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .auth-form-container {
        padding: 30px 20px;
    }
}


@media(max-width:450px) {

    .navbar {
        padding: 0 18px;
    }

    .hero {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-card-area {
        transform: scale(.68);
        margin-left: -50px;
        margin-right: -50px;
    }

    .dashboard-card {
        width: 390px;
    }

    .floating-card {
        display: none;
    }

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

/* =========================================================
   NAVPE MODERN HOME + ABOUT REFRESH
   ========================================================= */

/* ---------- Home: refined visual system ---------- */
.hero {
    min-height: 760px;
    padding-top: 110px;
    padding-bottom: 95px;
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 8% 4% auto auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,224,255,.13), transparent 68%);
    filter: blur(12px);
    z-index: -2;
    animation: heroGlow 7s ease-in-out infinite alternate;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-badge {
    box-shadow: 0 0 0 6px rgba(32,224,255,.025), 0 12px 35px rgba(32,224,255,.08);
    animation: badgePulse 3s ease-in-out infinite;
}

.hero h1 {
    max-width: 760px;
    text-wrap: balance;
}

.hero-content > p {
    line-height: 1.8;
}

.primary-btn,
.secondary-btn,
.nav-btn {
    position: relative;
    overflow: hidden;
}

.primary-btn::after,
.nav-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}

.primary-btn:hover::after,
.nav-btn:hover::after {
    left: 140%;
}

.hero-card-area {
    min-height: 530px;
    perspective: 1200px;
}

.payment-card {
    width: min(430px, 92%);
    min-height: 285px;
    padding: 30px;
    position: relative;
    z-index: 3;
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 15%, rgba(183,255,74,.24), transparent 30%),
        linear-gradient(145deg, rgba(35,48,70,.98), rgba(10,16,28,.96));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 45px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.12);
    transform: rotate(5deg) translateY(-8px);
    animation: cardFloat 6s ease-in-out infinite;
}

.payment-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    background: linear-gradient(120deg, rgba(32,224,255,.12), transparent 45%, rgba(128,92,255,.16));
    pointer-events: none;
}

.card-top,
.card-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-top {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.card-top span:last-child {
    color: var(--cyan);
    letter-spacing: 3px;
}

.card-chip {
    width: 48px;
    height: 35px;
    margin: 45px 0 24px;
    border-radius: 9px;
    background: linear-gradient(135deg, #e8f3f6, #8ca5ae);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    position: relative;
}

.card-chip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(0,0,0,.18);
}

.payment-card p,
.card-bottom {
    color: #91a0b3;
    font-size: 12px;
}

.payment-card h2 {
    position: relative;
    z-index: 2;
    margin: 3px 0 26px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 34px;
    letter-spacing: -1.5px;
}

.card-bottom span:last-child {
    color: #dce5ed;
    letter-spacing: 1px;
}

.hero-card-area::before,
.hero-card-area::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-card-area::before {
    width: 360px;
    height: 360px;
    background: rgba(128,92,255,.13);
    filter: blur(75px);
}

.hero-card-area::after {
    width: 180px;
    height: 180px;
    right: 6%;
    bottom: 8%;
    background: rgba(183,255,74,.08);
    filter: blur(60px);
}

.card-one { right: -18px; top: 55px; }
.card-two { left: -15px; bottom: 58px; }

.hero-trust {
    padding-top: 5px;
}

.hero-trust div {
    position: relative;
}

.hero-trust div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 4px;
    width: 1px;
    height: 38px;
    background: var(--border);
}

.stats {
    position: relative;
    background: rgba(255,255,255,.015);
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(0,0,0,.12);
}

.stat {
    padding: 8px 10px;
}

.stat h2 {
    background: linear-gradient(90deg, var(--cyan), #a9b8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.service-card,
.feature,
.dashboard-preview {
    box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.service-card,
.feature {
    position: relative;
    overflow: hidden;
}

.service-card::before,
.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(32,224,255,.07), transparent 45%);
    opacity: 0;
    transition: .35s;
    pointer-events: none;
}

.service-card:hover::before,
.feature:hover::before {
    opacity: 1;
}

.dark-section {
    position: relative;
    overflow: hidden;
}

.dark-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -250px;
    bottom: -300px;
    border-radius: 50%;
    background: rgba(32,224,255,.08);
    filter: blur(90px);
}

.fintech-about {
    color: var(--white);
    padding: 125px 25px;
    background:
        radial-gradient(circle at 5% 15%, rgba(32,224,255,.09), transparent 28%),
        radial-gradient(circle at 95% 85%, rgba(128,92,255,.09), transparent 30%),
        linear-gradient(180deg, #070a12, #0a0e17);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.fintech-about .container {
    max-width: 1200px;
    margin: 0 auto;
}

.fintech-about-content h2,
.fintech-feature h3,
.fintech-point strong {
    color: var(--white);
}

.fintech-about-content h2 strong {
    color: var(--cyan);
}

.fintech-about-content > p,
.fintech-point small,
.fintech-feature p {
    color: var(--muted);
}

.fintech-visual {
    min-height: 520px;
    background:
        radial-gradient(circle at center, rgba(32,224,255,.09), transparent 35%),
        linear-gradient(145deg, rgba(20,30,45,.95), rgba(7,11,19,.98));
    border: 1px solid var(--border);
    box-shadow: 0 35px 100px rgba(0,0,0,.28);
}

.fintech-visual::before {
    opacity: .7;
}

.fintech-core {
    background: linear-gradient(145deg, #121f32, #071019);
    border: 1px solid rgba(32,224,255,.2);
}

.core-logo {
    background: linear-gradient(135deg, var(--cyan), var(--lime));
    color: #061016;
}

.fintech-point > span {
    background: rgba(183,255,74,.1);
    color: var(--lime);
    border: 1px solid rgba(183,255,74,.2);
}

.fintech-feature {
    background: rgba(255,255,255,.035);
    border-color: var(--border);
}

.fintech-feature:hover {
    background: rgba(255,255,255,.065);
    border-color: rgba(32,224,255,.25);
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}

.fintech-feature h3 {
    color: var(--white);
}

/* ---------- About page: dedicated polished layout ---------- */
.about-page {
    background:
        radial-gradient(circle at 90% 5%, rgba(32,224,255,.07), transparent 22%),
        var(--bg);
}

.about-page .page-hero {
    position: relative;
    padding: 145px 25px 125px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, rgba(32,224,255,.14), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}

.about-page .page-hero::before,
.about-page .page-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-page .page-hero::before {
    width: 320px;
    height: 320px;
    left: -130px;
    top: 70px;
    background: rgba(128,92,255,.10);
    filter: blur(70px);
}

.about-page .page-hero::after {
    width: 280px;
    height: 280px;
    right: -100px;
    bottom: -90px;
    background: rgba(32,224,255,.10);
    filter: blur(70px);
}

.about-page .page-hero > * {
    position: relative;
    z-index: 1;
}

.about-page .page-hero h1 {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(48px, 7vw, 82px);
}

.about-page .page-hero p {
    font-size: 17px;
    line-height: 1.8;
}

.about-page .about-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 25px;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.about-page .about-image {
    min-height: 500px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(32,224,255,.12), transparent 35%),
        linear-gradient(145deg, #0e1623, #070b13);
    border: 1px solid var(--border);
    box-shadow: 0 35px 90px rgba(0,0,0,.28);
}

.about-page .about-image::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border: 1px dashed rgba(32,224,255,.24);
    border-radius: 50%;
    animation: aboutSpin 18s linear infinite;
}

.about-page .about-image::after {
    content: "SECURE • SIMPLE • SCALABLE";
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: #8291a5;
    font-size: 10px;
    letter-spacing: 3px;
    white-space: nowrap;
}

.about-page .about-circle {
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    font-family: "Space Grotesk", sans-serif;
    font-size: 34px;
    font-weight: 700;
    background: linear-gradient(145deg, #14253a, #08111c);
    border: 1px solid rgba(32,224,255,.25);
    box-shadow: 0 0 0 18px rgba(32,224,255,.035), 0 25px 70px rgba(0,0,0,.4);
}

.about-page .about-circle span {
    color: var(--cyan);
}

.about-page .about-content > span,
.about-page .values-section .section-heading > span {
    color: var(--cyan);
}

.about-page .about-content h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.04;
    letter-spacing: -3px;
    margin: 15px 0 24px;
}

.about-page .about-content p {
    color: var(--muted);
    max-width: 620px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-page .values-section {
    padding: 110px 25px 130px;
    background: #080c14;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-page .values-section .section-heading {
    max-width: 1200px;
    margin: 0 auto 55px;
}

.about-page .values-section .section-heading h2 {
    font-size: clamp(42px, 5vw, 60px);
}

.about-page .values-section .section-heading h2 b {
    color: var(--cyan);
}

.about-page .feature-grid {
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.about-page .feature {
    min-height: 245px;
    padding: 32px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border-color: var(--border);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.about-page .feature:hover {
    transform: translateY(-10px);
    border-color: rgba(32,224,255,.25);
    box-shadow: 0 25px 60px rgba(0,0,0,.28);
}

.about-page .feature > div {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 15px;
    background: rgba(32,224,255,.08);
    border: 1px solid rgba(32,224,255,.14);
}

.about-page .feature h3 {
    font-size: 21px;
}

.about-page .feature p {
    line-height: 1.75;
}

.about-page .cta {
    margin-top: 90px;
}

@keyframes cardFloat {
    0%,100% { transform: rotate(5deg) translateY(-8px); }
    50% { transform: rotate(3deg) translateY(-22px); }
}

@keyframes heroGlow {
    from { transform: translate3d(0,0,0) scale(1); opacity: .7; }
    to { transform: translate3d(-30px,20px,0) scale(1.12); opacity: 1; }
}

@keyframes badgePulse {
    0%,100% { box-shadow: 0 0 0 6px rgba(32,224,255,.025), 0 12px 35px rgba(32,224,255,.08); }
    50% { box-shadow: 0 0 0 9px rgba(32,224,255,.02), 0 15px 45px rgba(32,224,255,.13); }
}

@keyframes aboutSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 1000px) {
    .about-page .about-section {
        grid-template-columns: 1fr;
        gap: 55px;
    }
    .about-page .about-image {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }
    .fintech-about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .fintech-about-content {
        text-align: center;
    }
    .fintech-about-content > p {
        margin-left: auto;
        margin-right: auto;
    }
    .fintech-points {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .fintech-about .btn {
        margin-top: 5px;
    }
}

@media (max-width: 750px) {
    .hero {
        min-height: auto;
        padding-top: 78px;
        padding-bottom: 70px;
    }
    .hero h1 {
        font-size: clamp(43px, 12vw, 60px);
    }
    .hero-card-area {
        min-height: 430px;
        transform: none;
        margin: 15px 0 0;
    }
    .payment-card {
        width: min(390px, 88vw);
        transform: rotate(2deg);
    }
    .card-one { right: 0; top: 25px; }
    .card-two { left: 0; bottom: 35px; }
    .hero-trust {
        gap: 24px;
        flex-wrap: wrap;
    }
    .hero-trust div:not(:last-child)::after {
        display: none;
    }
    .fintech-about {
        padding-top: 85px;
        padding-bottom: 90px;
    }
    .fintech-visual {
        min-height: 430px;
    }
    .orbit-two {
        width: 350px;
        height: 350px;
    }
    .orbit-one {
        width: 260px;
        height: 260px;
    }
    .about-page .page-hero {
        padding-top: 105px;
        padding-bottom: 90px;
    }
    .about-page .about-section {
        padding-top: 80px;
        padding-bottom: 90px;
    }
    .about-page .about-image {
        min-height: 390px;
    }
    .about-page .about-image::before {
        width: 270px;
        height: 270px;
    }
    .about-page .about-circle {
        width: 155px;
        height: 155px;
        font-size: 28px;
    }
    .about-page .values-section {
        padding-top: 80px;
        padding-bottom: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   NAVPE — ADDITIONAL PAGE SECTIONS
   ========================================================= */
.centered-heading { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.centered-heading p { margin-left: auto; margin-right: auto; }

.ecosystem-section, .service-journey-section, .mission-section, .whiteases {
    padding: 110px 7%;
    position: relative;
    overflow: hidden;
}
.ecosystem-section { background: linear-gradient(180deg, #0d091cdc 0%, #021830 100%); }
.ecosystem-section::before, .solution-usecases::before {
    content:""; position:absolute; width:420px; height:420px; border-radius:50%;
    background: radial-gradient(circle, rgba(32,224,255,.13), transparent 68%);
    top:-180px; right:-120px; pointer-events:none;
}
.ecosystem-grid { max-width:1200px; margin:55px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.eco-card { background:rgba(20, 50, 90, 09); border:1px solid rgba(20,50,90,.09); border-radius:24px; padding:30px; min-height:285px; box-shadow:0 18px 50px rgba(17,48,82,.07); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; }
.eco-card:hover { transform:translateY(-9px); box-shadow:0 26px 65px rgba(17,48,82,.13); border-color:rgba(32,224,255,.4); }
.eco-card.eco-featured { background:linear-gradient(145deg,#081a36,#102c53); color:#fff; }
.eco-number { position:absolute; top:24px; right:25px; font-size:12px; font-weight:800; letter-spacing:.12em; opacity:.55; }
.eco-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:24px; font-weight:800; margin-bottom:45px; background:rgba(32,224,255,.12); color:#0c8fb2; }
.eco-featured .eco-icon { background:rgba(255,255,255,.1); color:#5eeaff; }
.eco-card h3 { font-size:23px; margin:0 0 10px; }
.eco-card p { color:#bcd1ef; line-height:1.7; margin:0 0 20px; }
.eco-featured p { color:#ccd3db; }
.eco-card a { color:#11acdb; font-weight:800; text-decoration:none; font-size:14px; }
.eco-featured a { color:#159fb7; }

.service-journey-section { background:#07162c; color:#fff; } .service-journey-section .section-heading > span { color:#54e7ff; }
.service-journey-section .section-heading p { color:#aab9cc; }
.journey-grid { max-width:1200px; margin:65px auto 0; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:18px; }
.journey-step { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:28px; min-height:220px; transition:.3s ease; }
.journey-step:hover { transform:translateY(-7px); background:rgba(255,255,255,.08); border-color:rgba(84,231,255,.35); }
.journey-step > span { color:#54e7ff; font-size:12px; font-weight:900; letter-spacing:.15em; }
.journey-step h3 { margin:22px 0 10px; font-size:22px; }
.journey-step p { color:#aab9cc; line-height:1.7; }
.journey-line { width:28px; height:1px; background:linear-gradient(90deg,transparent,#54e7ff,transparent); }

.mission-section { background:linear-gradient(180deg,#021128,#060221); }
.mission-panel { max-width:1200px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; background:#fff; border:1px solid rgba(10,42,80,.08); border-radius:36px; padding:65px; box-shadow:0 25px 80px rgba(18,48,84,.08); }
.mission-copy > span { color:#0a9bbb; font-size:12px; font-weight:900; letter-spacing:.15em; }
.mission-copy h2 { font-size:clamp(38px,5vw,62px); line-height:1.04; margin:18px 0 22px; color:#081a36; }
.mission-copy h2 strong { color:#0aa8c7; }
.mission-copy > p { max-width:650px; color:#64748b; line-height:1.85; font-size:17px; }
.mission-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:38px; }
.mission-metrics div { padding:18px; border-radius:18px; background:#f4f8fc; }
.mission-metrics strong { display:block; color:#0a9bbb; font-size:12px; margin-bottom:7px; }
.mission-metrics span { font-size:13px; color:#42546b; font-weight:700; }
.mission-visual { min-height:390px; display:grid; place-items:center; position:relative; }
.mission-visual::before { content:""; position:absolute; width:310px; height:310px; border-radius:50%; border:1px solid rgba(10,168,199,.18); box-shadow:0 0 80px rgba(10,168,199,.1); animation:aboutSpin 20s linear infinite; }
.mission-orb { width:180px; height:180px; border-radius:50%; background:linear-gradient(145deg,#092343,#0b6e91); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 25px 70px rgba(5,48,75,.3); position:relative; z-index:2; }
.mission-orb span { font-size:58px; font-weight:900; line-height:1; }
.mission-orb small { margin-top:8px; color:#7cecff; }
.mission-chip { position:absolute; z-index:3; background:#fff; border:1px solid rgba(20,50,90,.09); padding:13px 16px; border-radius:14px; box-shadow:0 14px 35px rgba(18,48,84,.12); font-size:13px; color:#34465d; animation:floatChip 4s ease-in-out infinite; }
.mission-chip b { margin-left:8px; color:#08a8c9; }
.chip-a { top:65px; left:5%; } .chip-b { right:2%; top:145px; animation-delay:.8s; } .chip-c { left:8%; bottom:65px; animation-delay:1.5s; }
@keyframes floatChip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.solution-usecases { background:#041220; }
.usecase-grid { max-width:1200px; margin:55px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.usecase-card { background:rgba(214, 236, 255, 0.858); border:1px solid rgba(20,50,90,.08); border-radius:24px; padding:30px; min-height:275px; transition:.3s ease; box-shadow:0 14px 45px rgba(18,48,84,.05); }
.usecase-card:hover { transform:translateY(-8px); box-shadow:0 25px 60px rgba(18,48,84,.11); }
.usecase-icon { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:#e9faff; color:#0a9bbb; font-size:23px; margin-bottom:35px; }
.usecase-card h3 { color:#081a36; font-size:21px; margin-bottom:12px; }
.usecase-card p { color:#69798e; line-height:1.7; min-height:82px; }
.usecase-card a { text-decoration:none; color:#0a92b4; font-size:14px; font-weight:800; }

@media (max-width:1050px) {
    .ecosystem-grid,.usecase-grid { grid-template-columns:repeat(2,1fr); }
    .journey-grid { grid-template-columns:1fr 1fr; }
    .journey-line { display:none; }
    .mission-panel { grid-template-columns:1fr; padding:50px; }
}
@media (max-width:650px) {
    .ecosystem-section,.service-journey-section,.mission-section,.solution-usecases { padding:80px 5%; }
    .ecosystem-grid,.usecase-grid { grid-template-columns:1fr; }
    .journey-grid { grid-template-columns:1fr; }
    .mission-panel { padding:32px 24px; border-radius:26px; gap:30px; }
    .mission-metrics { grid-template-columns:1fr; }
    .mission-visual { min-height:330px; }
    .mission-visual::before { width:250px; height:250px; }
    .chip-a { left:0; top:45px; } .chip-b { right:0; top:120px; } .chip-c { left:2%; bottom:35px; }
}