:root {
            --navy: #07182e;
            --blue: #ff5b00;
            --sky: #eaf4fb;
            --ink: #122033;
            --muted: #5e6b7a;
            --line: #dbe4ed;
            --white: #fff;
            --soft: #f6f8fa;
            --accent: #f2b84b
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            /* font-family: Inter, Arial, Helvetica, sans-serif; */
            color: var(--ink);
            line-height: 1.65;
            background: #fff
        }

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

        .c {
            width: min(1180px, 92%);
            margin: auto
        }

        .top {
            background: var(--navy);
            color: #fff;
            font-size: 13px
        }

        .top .c {
            display: flex;
            justify-content: space-between;
            padding: 9px 0
        }

        .nav {
            position: sticky;
            top: 0;
            z-index: 10;
            background: #fff;
            border-bottom: 1px solid var(--line)
        }

        .nav .c {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 76px
        }

        .logo {
            font-weight: 900;
            letter-spacing: .08em;
            font-size: 20px;
            color: var(--navy)
        }

        .logo span {
            color: var(--blue)
        }

        .links {
            display: flex;
            gap: 25px;
            font-size: 14px;
            font-weight: 700
        }

        .links a:hover {
            color: var(--blue)
        }

        .btn .btn-ssm {
            display: inline-block;
            padding: 13px 20px;
            border-radius: 5px;
            font-weight: 800;
            font-size: 14px
        }

        .btn-ssm:hover{
            color: #ff5b00;
            background-color: #fff;
        }

        .primary {
            background: var(--blue);
            color: #fff
        }

        .outline {
            border: 1px solid #fff;
            color: #fff
        }

        .hero {
            min-height: 650px;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, rgba(5, 18, 36, .96) 0%, rgba(5, 18, 36, .78) 48%, rgba(5, 18, 36, .36) 100%), url('https://images.unsplash.com/photo-1558008258-3256797b43f3?auto=format&fit=crop&w=2000&q=85') center/cover
        }
/* 
        .hero .c {
            padding: 95px 0
        } */

        .eyebrow,
        .k {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .18em;
            color: var(--blue) !important;
            text-transform: uppercase
        }

        .hero .eyebrow {
            color: #ff5b00;
        }

        .hero h1 {
            max-width: 850px;
            color: #fff;
            font-size: clamp(42px, 6vw, 72px);
            line-height: 1.04;
            margin: 18px 0
        }

        .hero p {
            max-width: 760px;
            color: #e8eef5;
            font-size: 19px
        }

        .trust {
            margin: 25px 0;
            color: #fff;
            font-weight: 700
        }

        .actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 30px
        }

        section {
            padding: 60px 0
        }

        .lightsec {
            background: var(--soft)
        }

        h2 {
            font-size: clamp(31px, 4vw, 48px);
            line-height: 1.12;
            margin: 10px 0 18px;
            color: var(--navy)
        }

        h3 {
            margin: 8px 0 8px;
            color: var(--navy)
        }

        .lead {
            font-size: 18px;
            color: var(--muted);
            max-width: 850px
        }

        .intro {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 60px;
            align-items: center
        }

        .statbox {
            background: var(--navy);
            color: #fff;
            padding: 38px;
            border-radius: 12px
        }

        .statbox strong {
            font-size: 32px;
            display: block
        }

        .statbox p {
            color: #dce7f2
        }

        .services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 35px
        }

        .soft-ssm-card {
            border: 1px solid var(--line);
            padding: 28px;
            border-radius: 10px;
            background: #fff;
            transition: .2s
        }

        .soft-ssm-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 35px rgba(7, 24, 46, .08)
        }

        .soft-ssm-card h3{
            font-size: 19px;
            margin: 8px 0 8px;
        }

        .num {
            font-weight: 900;
            color: var(--blue);
            font-size: 13px;
            letter-spacing: .1em
        }

        .soft-ssm-card p,
        .ssm-step p,
        .env p,
        .faq p {
            color: var(--muted);
            margin: 0
        }

        .env h3{
            font-size: 19px;
        }

        .systems {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            margin-top: 35px
        }

        .system {
            background: #fff;
            border-left: 4px solid var(--blue);
            padding: 24px;
            border-radius: 6px;
            box-shadow: 0 8px 25px rgba(7, 24, 46, .05)
        }

        .system h3 {
            font-size: 21px
        }

        .model {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0;
            margin-top: 40px
        }

        .ssm-step {
            padding: 25px;
            border-top: 3px solid var(--blue);
            border-right: 1px solid var(--line);
            background: #fff
        }

        .ssm-step:last-child {
            border-right: 0
        }

        .ssm-step strong {
            display: block;
            margin-bottom: 8px
        }

        .envs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 35px
        }

        .env {
            min-height: 150px;
            padding: 25px;
            display: flex;
            align-items: end;
            border-radius: 9px;
            background: linear-gradient(145deg, rgba(7, 24, 46, .92), rgba(11, 94, 168, .68)), url('https://images.unsplash.com/photo-1565610222536-ef125c59da2e?auto=format&fit=crop&w=900&q=80') center/cover;
            color: #fff
        }

        .env h3 {
            color: #fff;
            margin: 0
        }

        .integration {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 55px;
            align-items: center
        }

        .integration p{
            margin: 16px 0px;
        }

        .visual {
            min-height: 390px;
            position: relative;
            display: grid;
            place-items: center;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden
        }

        .core {
            background: var(--navy);
            color: #fff;
            padding: 30px;
            border-radius: 50%;
            font-weight: 900;
            text-align: center;
            width: 180px;
            height: 180px;
            display: grid;
            place-items: center;
            position: relative;
            z-index: 2
        }

        .orbit {
            position: absolute;
            inset: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
            gap: 10px
        }

        .orbit div {
            background: var(--sky);
            padding: 10px 14px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 800;
            color: var(--navy);
            height: max-content
        }

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

        .cta {
            background: var(--navy);
            color: #fff;
            text-align: center
        }

        .cta h2 {
            color: #fff
        }

        .cta p {
            color: #dbe6f1;
            max-width: 700px;
            margin: 0 auto
        }

        .faq {
            max-width: 850px
        }

        .faq details {
            border-top: 1px solid var(--line);
            padding: 20px 0
        }

        .faq details:last-child {
            border-bottom: 1px solid var(--line)
        }

        summary {
            cursor: pointer;
            font-weight: 700;
            color: var(--navy)
        }

        footer {
            background: #041121;
            color: #c7d3df;
            padding: 50px 0 25px
        }

        .foot {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 40px
        }

        .foot h3 {
            color: #fff
        }

        .foot a {
            display: block;
            margin: 8px 0;
            font-size: 14px
        }

        .copy {
            border-top: 1px solid #203149;
            margin-top: 35px;
            padding-top: 20px;
            font-size: 12px
        }

        .mobile {
            display: none
        }

        @media(max-width:850px) {
            .links {
                display: none
            }

            .mobile {
                display: block
            }

            .intro,
            .integration {
                grid-template-columns: 1fr
            }

            .services,
            .systems {
                grid-template-columns: 1fr 1fr
            }

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

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

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

            .ssm-step {
                border-right: 0;
                border-bottom: 1px solid var(--line)
            }

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

        @media(max-width:560px) {
            .top .c {
                display: block
            }

            .top span {
                display: block
            }

            .hero {
                min-height: 620px
            }

            .hero .c {
                padding: 70px 0
            }

            .hero h1 {
                font-size: 43px
            }

            .hero p {
                font-size: 17px
            }

            .services,
            .systems,
            .envs,
            .why,
            .foot {
                grid-template-columns: 1fr
            }

            section {
                padding: 65px 0
            }

            .actions .btn {
                width: 100%;
                text-align: center
            }

            .visual {
                min-height: 330px
            }
        }