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

        html {
            scroll-behavior: smooth
        }

        :root {
            --blue: #3589f1;
            --blue-dk: #1a6fd4;
            --blue-lt: #e8f1fd;
            --navy: #000a2d;
            --navy-2: #0d1e42;
            --navy-3: #162352;
            --white: #ffffff;
            --off: #f7f9fc;
            --light: #f1f4fa;
            --muted: #7a8290;
            --body: #635c5c;
            --border: #eceff8;
            --serif: 'Rufina', serif;
            --sans: 'Rubik', sans-serif;
        }

        body {
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.7;
            color: var(--body);
            background: var(--white);
            overflow-x: hidden
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--serif);
            color: var(--navy);
            line-height: 1.15;
            margin-bottom: 16px
        }

        p {
            margin-bottom: 14px
        }

        a {
            text-decoration: none;
            color: var(--blue);
            transition: color .2s
        }

        a:hover {
            color: var(--blue-dk)
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 28px
        }

        .tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 12px
        }

        .accent-line {
            display: block;
            width: 48px;
            height: 3px;
            background: var(--blue);
            border-radius: 2px;
            margin-top: 12px
        }

        .accent-line.c {
            margin: 12px auto 0
        }

        .sec {
            padding: 88px 0
        }

        .sec-lt {
            background: var(--off)
        }

        .sec-dk {
            background: var(--navy)
        }

        .sec-nv {
            background: var(--navy-2)
        }

        .t-c {
            text-align: center
        }

        .t-w {
            color: var(--white) !important
        }

        .t-b {
            color: var(--blue) !important
        }

        .t-m {
            color: var(--muted)
        }

        /* buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 32px;
            border-radius: 4px;
            border: none;
            font-family: var(--sans);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: all .22s;
            line-height: 1
        }

        .btn-p {
            background: var(--blue);
            color: var(--white)
        }

        .btn-p:hover {
            background: var(--blue-dk);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(53, 137, 241, .35)
        }

        .btn-o {
            background: transparent;
            color: var(--blue);
            border: 2px solid var(--blue)
        }

        .btn-o:hover {
            background: var(--blue);
            color: var(--white);
            transform: translateY(-2px)
        }

        .btn-w {
            background: var(--white);
            color: var(--navy)
        }

        .btn-w:hover {
            background: var(--blue-lt);
            color: var(--navy);
            transform: translateY(-2px)
        }

        .btn-lg {
            padding: 16px 42px;
            font-size: 16px
        }

        /* navbar */
        .hdr {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000
        }

        .mhdr {
            padding: 0 44px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--navy);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            transition: all .3s
        }

        .mhdr.scr {
            background: rgba(0, 10, 45, .97);
            box-shadow: 0 4px 24px rgba(0, 0, 0, .4)
        }

        .nlogo {
            font-family: var(--serif);
            font-size: 25px;
            font-weight: 700;
            color: var(--white);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .nlogo-ico {
            width: 38px;
            height: 38px;
            background: var(--blue);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: var(--white);
            font-family: var(--sans);
            flex-shrink: 0
        }

        .nmenu ul {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 34px
        }

        .nmenu ul li a {
            color: rgba(255, 255, 255, .72);
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            transition: color .2s;
            position: relative;
            padding-bottom: 4px
        }

        .nmenu ul li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--blue);
            transform: scaleX(0);
            transition: transform .2s
        }

        .nmenu ul li a:hover,
        .nmenu ul li.active a {
            color: var(--white)
        }

        .nmenu ul li a:hover::after,
        .nmenu ul li.active a::after {
            transform: scaleX(1)
        }

        .nphone {
            background: var(--blue);
            color: var(--white) !important;
            padding: 10px 22px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all .2s
        }

        .nphone:hover {
            background: var(--blue-dk);
            transform: translateY(-1px)
        }

        .mob-tog {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
            padding: 4px
        }

        .mob-tog span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--white);
            border-radius: 2px;
            transition: all .3s
        }

        .nav-mob {
            display: none;
            background: var(--navy-2);
            border-top: 1px solid rgba(255, 255, 255, .07);
            padding: 16px 22px;
            flex-direction: column;
            gap: 4px
        }

        .nav-mob.open {
            display: flex
        }

        .nav-mob a {
            color: rgba(255, 255, 255, .78);
            padding: 12px 16px;
            border-radius: 6px;
            font-size: 15px;
            display: block;
            text-decoration: none;
            font-weight: 500
        }

        .nav-mob a:hover {
            background: rgba(255, 255, 255, .06);
            color: var(--white)
        }

        .nav-mob .mcta {
            background: var(--blue);
            color: var(--white);
            margin-top: 8px;
            text-align: center
        }

        @media(max-width:991px) {
            .mhdr {
                padding: 0 20px
            }

            .nmenu,
            .nphone-w {
                display: none
            }

            .mob-tog {
                display: flex
            }
        }

        /* hero */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--navy);
            padding: 110px 28px 72px;
            position: relative;
            overflow: hidden
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(ellipse 65% 70% at 110% 40%, rgba(53, 137, 241, .12) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at -10% 70%, rgba(53, 137, 241, .07) 0%, transparent 55%)
        }

        .hgrid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(rgba(53, 137, 241, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 137, 241, .04) 1px, transparent 1px);
            background-size: 64px 64px
        }

        .hero-inner {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 80px;
            align-items: center;
            position: relative
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(53, 137, 241, .12);
            border: 1px solid rgba(53, 137, 241, .25);
            color: rgba(255, 255, 255, .82);
            border-radius: 40px;
            padding: 6px 16px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 22px
        }

        .hero-tag .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--blue)
        }

        .hero h1 {
            font-family: var(--serif);
            font-size: clamp(20px, 5.5vw, 66px);
            font-weight: 700;
            line-height: 1.08;
            color: var(--white);
            margin-bottom: 18px
        }

        .hero h1 span {
            color: var(--blue)
        }

        .hero-sub {
            font-size: 17px;
            color: rgba(255, 255, 255, .62);
            line-height: 1.78;
            margin-bottom: 34px;
            max-width: 500px
        }

        .hero-acts {
            display: flex;
            gap: 13px;
            flex-wrap: wrap;
            margin-bottom: 48px
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 30px
        }

        .hst {
            padding-right: 24px
        }

        .hst+.hst {
            padding-left: 24px;
            border-left: 1px solid rgba(255, 255, 255, .08)
        }

        .hst-n {
            font-family: var(--serif);
            font-size: 34px;
            font-weight: 700;
            color: var(--blue);
            line-height: 1
        }

        .hst-l {
            font-size: 13px;
            color: rgba(255, 255, 255, .45);
            margin-top: 4px
        }

        /* hero card */
        .hcard {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(53, 137, 241, .2);
            border-radius: 16px;
            padding: 32px;
            backdrop-filter: blur(16px);
            box-shadow: 0 24px 64px rgba(0, 0, 0, .35)
        }

        .hcard-ttl {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .38);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between
        }

        .lbadge {
            background: rgba(53, 137, 241, .15);
            color: var(--blue);
            border: 1px solid rgba(53, 137, 241, .3);
            border-radius: 20px;
            padding: 2px 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px
        }

        .rrow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, .04);
            border-radius: 9px;
            padding: 13px 15px;
            margin-bottom: 10px;
            border: 1px solid rgba(255, 255, 255, .05)
        }

        .rrow-l {
            font-size: 13px;
            color: rgba(255, 255, 255, .5)
        }

        .rrow-v {
            font-size: 14px;
            font-weight: 600;
            color: var(--white)
        }

        .rrow-v.b {
            color: var(--blue)
        }

        .rrow-v.g {
            color: #3dd6bf
        }

        .frow {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 9px
        }

        .flbl {
            font-size: 12px;
            color: rgba(255, 255, 255, .5);
            min-width: 118px
        }

        .fbar {
            flex: 1;
            height: 6px;
            background: rgba(255, 255, 255, .08);
            border-radius: 3px;
            overflow: hidden
        }

        .ffill {
            height: 100%;
            border-radius: 3px
        }

        .fval {
            font-size: 11px;
            font-weight: 700;
            min-width: 52px;
            text-align: right
        }

        .ccta {
            display: block;
            background: var(--blue);
            color: var(--white);
            text-align: center;
            padding: 13px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            margin-top: 18px;
            transition: all .2s
        }

        .ccta:hover {
            background: var(--blue-dk);
            color: var(--white);
            transform: translateY(-1px)
        }

        @media(max-width:1024px) {
            .hero-inner {
                grid-template-columns: 1fr;
                gap: 48px
            }

            .hcard {
                max-width: 480px
            }
        }

        @media(max-width:600px) {
            .hero-stats {
                grid-template-columns: 1fr;
                gap: 14px
            }

            .hst+.hst {
                border-left: none;
                border-top: 1px solid rgba(255, 255, 255, .08);
                padding-left: 0;
                padding-top: 14px
            }
        }

        /* trust bar */
        .tbar {
            background: var(--navy-2);
            border-top: 1px solid rgba(255, 255, 255, .06);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            padding: 24px 0
        }

        .tlist {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 36px
        }

        .titem {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 14px;
            color: rgba(255, 255, 255, .58)
        }

        .titem i {
            color: var(--blue);
            font-size: 15px
        }

        /* platform intro */
        .plat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center
        }

        .pv {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
        }

        .pvc {
            background: var(--light);
            border-radius: 14px;
            padding: 26px 20px;
            border: 1px solid var(--border);
            transition: all .25s
        }

        .pvc:hover {
            border-color: var(--blue);
            transform: translateY(-4px);
            box-shadow: 0 10px 28px rgba(53, 137, 241, .1)
        }

        .pvc.dk {
            background: var(--navy);
            border-color: var(--navy)
        }

        .pvc .pvi {
            font-size: 26px;
            color: var(--blue);
            margin-bottom: 12px
        }

        .pvc.dk .pvi {
            color: #3dd6bf
        }

        .pvc h5 {
            font-family: var(--sans);
            font-size: 15px;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 6px
        }

        .pvc.dk h5 {
            color: var(--white)
        }

        .pvc p {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.6;
            margin: 0
        }

        .pvc.dk p {
            color: rgba(255, 255, 255, .5)
        }

        /* feature grid */
        .fg {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px
        }

        .fg2 {
            grid-template-columns: repeat(2, 1fr)
        }

        .fg4 {
            grid-template-columns: repeat(4, 1fr)
        }

        .fc {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 28px 24px;
            transition: all .25s;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column
        }

        .fc::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--blue);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .25s
        }

        .fc:hover {
            border-color: rgba(53, 137, 241, .3);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .07)
        }

        .fc:hover::before {
            transform: scaleX(1)
        }

        .fc-dk {
            background: rgba(255, 255, 255, .04);
            border-color: rgba(255, 255, 255, .07)
        }

        .fc-dk:hover {
            border-color: rgba(53, 137, 241, .35);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .3)
        }

        .fc-dk h4,
        .fc-dk h5 {
            color: var(--white)
        }

        .fc-dk p,
        .fc-dk .fl li {
            color: rgba(255, 255, 255, .55)
        }

        .fc-dk .fi {
            background: rgba(53, 137, 241, .1);
            color: var(--blue)
        }

        .fi {
            width: 48px;
            height: 48px;
            background: var(--blue-lt);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            color: var(--blue);
            margin-bottom: 16px;
            flex-shrink: 0
        }

        .fc h4 {
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px
        }

        .fc p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.65;
            margin: 0
        }

        .fl {
            list-style: none;
            margin-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .fl li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 14px;
            color: var(--muted)
        }

        .fl li i {
            color: var(--blue);
            font-size: 12px;
            margin-top: 4px;
            flex-shrink: 0
        }

        .fc-dk .fl li i {
            color: #3dd6bf
        }

        /* two panel */
        .two-p {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px
        }

        .panel {
            border-radius: 18px;
            padding: 42px 36px;
            border: 1px solid var(--border)
        }

        .panel-lt {
            background: var(--off)
        }

        .panel-dk {
            background: var(--navy);
            border-color: rgba(53, 137, 241, .18)
        }

        /* estimator */
        .est-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 52px;
            align-items: start
        }

        .estf {
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(53, 137, 241, .18);
            border-radius: 16px;
            padding: 36px;
            backdrop-filter: blur(10px)
        }

        .estf h3 {
            color: var(--white);
            font-size: 21px;
            margin-bottom: 26px
        }

        .fgrp {
            margin-bottom: 22px
        }

        .flbl2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: rgba(255, 255, 255, .4);
            margin-bottom: 10px
        }

        .flbl2 .cv {
            color: var(--blue);
            font-size: 15px;
            letter-spacing: 0;
            text-transform: none;
            font-weight: 700
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 5px;
            background: rgba(255, 255, 255, .1);
            border-radius: 3px;
            outline: none;
            cursor: pointer
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--blue);
            cursor: pointer;
            box-shadow: 0 0 0 4px rgba(53, 137, 241, .2);
            transition: box-shadow .2s
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            box-shadow: 0 0 0 8px rgba(53, 137, 241, .14)
        }

        .rmarks {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: rgba(255, 255, 255, .28);
            margin-top: 6px
        }

        .chips {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }

        .chip {
            padding: 8px 15px;
            border-radius: 6px;
            border: 1.5px solid rgba(255, 255, 255, .1);
            font-size: 13px;
            color: rgba(255, 255, 255, .58);
            cursor: pointer;
            background: transparent;
            font-family: var(--sans);
            transition: all .2s
        }

        .chip:hover {
            border-color: var(--blue);
            color: rgba(255, 255, 255, .88)
        }

        .chip.act {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
            font-weight: 600
        }

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

        .cch {
            padding: 8px 4px;
            border-radius: 7px;
            border: 1.5px solid rgba(255, 255, 255, .08);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: transparent;
            font-family: var(--sans);
            color: rgba(255, 255, 255, .48);
            transition: all .2s;
            line-height: 1.4
        }

        .cch:hover {
            border-color: var(--blue);
            color: rgba(255, 255, 255, .85)
        }

        .cch.act {
            background: rgba(53, 137, 241, .12);
            border-color: var(--blue);
            color: rgba(255, 255, 255, .9)
        }

        .estr {
            background: var(--navy);
            border: 1px solid rgba(53, 137, 241, .2);
            border-radius: 16px;
            padding: 36px;
            position: sticky;
            top: 84px
        }

        .erl {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, .38);
            margin-bottom: 7px
        }

        .emi {
            font-family: var(--serif);
            font-size: 62px;
            font-weight: 700;
            color: var(--blue);
            line-height: 1;
            margin-bottom: 3px
        }

        .emi sup {
            font-size: 26px;
            vertical-align: top;
            margin-top: 12px;
            display: inline-block
        }

        .esl {
            font-size: 13px;
            color: rgba(255, 255, 255, .36);
            margin-bottom: 26px
        }

        .erows {
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-bottom: 20px
        }

        .erow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 13px;
            background: rgba(255, 255, 255, .03);
            border-radius: 8px
        }

        .ek {
            font-size: 14px;
            color: rgba(255, 255, 255, .42)
        }

        .ev {
            font-size: 14px;
            font-weight: 600;
            color: var(--white)
        }

        .ev.b {
            color: var(--blue)
        }

        .ev.r {
            color: #e07a7a
        }

        .ediv {
            height: 1px;
            background: rgba(255, 255, 255, .05);
            margin: 3px 0
        }

        .en {
            font-size: 12px;
            color: rgba(255, 255, 255, .32);
            line-height: 1.6;
            margin-bottom: 18px
        }

        .ecta {
            width: 100%;
            padding: 13px;
            border-radius: 8px;
            background: var(--blue);
            color: var(--white);
            border: none;
            font-family: var(--sans);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: block;
            transition: all .2s
        }

        .ecta:hover {
            background: var(--blue-dk);
            color: var(--white)
        }

        /* disclaimer */
        .disc-sec {
            padding: 68px 0;
            background: var(--light);
            border-top: 3px solid var(--blue)
        }

        .disc-box {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 38px 46px;
            border-left: 4px solid #c0392b
        }

        .disc-box h3 {
            color: #c0392b;
            font-family: var(--sans);
            font-size: 19px;
            font-weight: 700;
            margin-bottom: 12px
        }

        .disc-box p {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.75;
            margin-bottom: 10px
        }

        .disc-g {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 14px
        }

        .di {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 14px;
            color: var(--muted)
        }

        .di i {
            color: #c0392b;
            margin-top: 3px;
            flex-shrink: 0
        }

        /* audience */
        .aud-g {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-top: 46px
        }

        .acard {
            background: var(--light);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 28px 20px;
            text-align: center;
            transition: all .25s
        }

        .acard:hover {
            border-color: var(--blue);
            transform: translateY(-4px);
            box-shadow: 0 10px 26px rgba(53, 137, 241, .1)
        }

        .aico {
            font-size: 34px;
            color: var(--blue);
            margin-bottom: 14px
        }

        .acard h5 {
            font-family: var(--sans);
            font-size: 15px;
            font-weight: 600;
            color: var(--navy);
            margin: 0
        }

        /* cta */
        .cta-sec {
            padding: 96px 28px;
            background: var(--blue);
            text-align: center;
            position: relative;
            overflow: hidden
        }

        .cta-sec::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255, 255, 255, .07) 0%, transparent 65%)
        }

        .cta-sec h2 {
            color: var(--white);
            font-size: clamp(28px, 4vw, 46px);
            margin-bottom: 14px
        }

        .cta-sec p {
            color: rgba(255, 255, 255, .78);
            font-size: 17px;
            max-width: 540px;
            margin: 0 auto 34px
        }

        .cta-acts {
            display: flex;
            justify-content: center;
            gap: 13px;
            flex-wrap: wrap
        }

        .cta-tag {
            color: rgba(255, 255, 255, .6);
            font-size: 14px;
            margin-top: 18px;
            font-style: italic
        }

        /* footer */
        .ftr {
            background: var(--navy);
            border-top: 1px solid rgba(255, 255, 255, .06)
        }

        .ftr-top {
            padding: 62px 0 38px
        }

        .fgrid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 46px
        }

        .flogo {
            font-family: var(--serif);
            font-size: 23px;
            font-weight: 700;
            color: var(--white);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            text-decoration: none
        }

        .flogo-ico {
            width: 34px;
            height: 34px;
            background: var(--blue);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--white);
            font-family: var(--sans)
        }

        .fdesc {
            font-size: 14px;
            color: rgba(255, 255, 255, .42);
            line-height: 1.7;
            max-width: 278px
        }

        .flegal {
            font-size: 12px;
            color: rgba(255, 255, 255, .22);
            line-height: 1.65;
            margin-top: 14px
        }

        .flegal a {
            color: rgba(255, 255, 255, .3)
        }

        .fcol h4 {
            font-family: var(--sans);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.8px;
            color: var(--blue);
            margin-bottom: 16px
        }

        .fcol ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .fcol ul li a {
            color: rgba(255, 255, 255, .42);
            font-size: 14px;
            transition: color .2s
        }

        .fcol ul li a:hover {
            color: var(--white)
        }

        .fbot {
            border-top: 1px solid rgba(255, 255, 255, .05);
            padding: 22px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: rgba(255, 255, 255, .28);
            flex-wrap: wrap;
            gap: 10px
        }

        .fsoc {
            display: flex;
            gap: 10px
        }

        .fsoc a {
            width: 34px;
            height: 34px;
            background: rgba(255, 255, 255, .06);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .42);
            font-size: 14px;
            transition: all .2s;
            text-decoration: none
        }

        .fsoc a:hover {
            background: var(--blue);
            color: var(--white)
        }

        #bktop {
            position: fixed;
            bottom: 26px;
            right: 26px;
            z-index: 900;
            background: var(--blue);
            color: var(--white);
            width: 40px;
            height: 40px;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            text-decoration: none;
            opacity: 0;
            pointer-events: none;
            transition: all .3s;
            box-shadow: 0 4px 14px rgba(53, 137, 241, .4)
        }

        #bktop.show {
            opacity: 1;
            pointer-events: auto
        }

        #bktop:hover {
            background: var(--blue-dk);
            transform: translateY(-2px);
            color: var(--white)
        }

        @keyframes fu {
            from {
                opacity: 0;
                transform: translateY(24px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .ani {
            animation: fu .65s ease both
        }

        .d1 {
            animation-delay: .1s
        }

        .d2 {
            animation-delay: .2s
        }

        .d3 {
            animation-delay: .3s
        }

        .d4 {
            animation-delay: .4s
        }

        @media(max-width:1024px) {

            .plat-grid,
            .est-grid,
            .two-p {
                grid-template-columns: 1fr
            }

            .fg4 {
                grid-template-columns: 1fr 1fr
            }

            .fg2 {
                grid-template-columns: 1fr
            }

            .aud-g {
                grid-template-columns: 1fr 1fr
            }

            .fgrid {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:768px) {

            .fg,
            .fg2,
            .fg4 {
                grid-template-columns: 1fr
            }

            .fgrid {
                grid-template-columns: 1fr
            }

            .disc-g {
                grid-template-columns: 1fr
            }

            .aud-g {
                grid-template-columns: 1fr 1fr
            }

            .sec {
                padding: 90px 0
            }

           .container .sub-container{
                grid-template-columns : 1fr;
            }

            .fc-dk .fc-sub-container{
                grid-template-columns : 1fr;
            }
            
        }



        
    
        /* ============================================================
   HOW IT WORKS
   ============================================================ */
/* ============================================================
   HOW IT WORKS (MATCHED TO YOUR BLUE THEME)
   ============================================================ */

.how-section {
  background: var(--navy-2); /* matches your theme */
}

.steps-wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:60px;
  position:relative;
}

/* connecting line */
/* .steps-wrap::before {
  content:'';
  position:absolute;
  top:28px;
  left:calc(12.5% + 20px);
  right:calc(12.5% + 20px);
  height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
} */

/* card */
.step-card {
  text-align:center;
  padding:36px 24px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  transition:all 0.25s;
}

.step-card:hover {
  border-color: var(--blue);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}

/* number circle */
.step-num {
  width:54px;
  height:54px;
  border-radius:50%;
  background: var(--blue);
  color: var(--white);
  font-weight:700;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 0 0 8px rgba(255,255,255,0.05);
}

/* icon */
.step-icon {
  font-size:28px;
  margin-bottom:16px;
  color: var(--blue);
}

/* title */
.step-title {
  font-size:16px;
  font-weight:600;
  margin-bottom:10px;
  color: var(--white);
}

/* text */
.step-text {
  font-size:14px;
  color: rgba(255,255,255,0.6);
  line-height:1.65;
}
.sub-container{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:52px;
    
}
.fc-sub-container{
    display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;
}