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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", sans-serif;
            background: #ffffff;
            color: #0f172a;
            -webkit-font-smoothing: antialiased;
        }

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

        svg {
            display: block;
        }


        /* =========================
           GENERAL
        ========================== */

        .container {
            width: min(1120px, calc(100% - 48px));
            margin: auto;
        }

        .section-label {
            color: #2563eb;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .section-title {
            margin-top: 12px;
            font-size: 36px;
            line-height: 1.2;
            letter-spacing: -1.5px;
        }

        .section-description {
            margin-top: 14px;
            color: #64748b;
            line-height: 1.7;
            font-size: 15px;
            max-width: 580px;
        }


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

        header {
            border-bottom: 1px solid #eef2f7;
            background: rgba(255,255,255,.95);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(12px);
        }

        .navbar {
            height: 74px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.7px;
        }

        .logo-icon {
            width: 38px;
            height: 38px;
            background: #0f172a;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 9px;
            font-size: 17px;
            font-weight: 800;
        }

        .logo span {
            color: #2563eb;
        }

        .nav-contact {
            font-size: 14px;
            font-weight: 600;
            color: #334155;
            transition: .2s;
        }

        .nav-contact:hover {
            color: #2563eb;
        }


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

        .hero {
            padding: 110px 0 105px;
            text-align: center;
        }

        .coming-soon {
            display: inline-flex;
            align-items: center;
            gap: 9px;

            border: 1px solid #e2e8f0;
            background: #f8fafc;

            border-radius: 50px;

            padding: 8px 14px;

            color: #475569;

            font-size: 12px;
            font-weight: 500;
        }

        .coming-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
        }

        .hero h1 {
            max-width: 900px;
            margin: 28px auto 0;

            font-size: clamp(44px, 7vw, 72px);
            line-height: 1.08;
            letter-spacing: -3.2px;
            font-weight: 800;
        }

        .hero h1 span {
            color: #2563eb;
        }

        .hero-description {
            max-width: 650px;
            margin: 25px auto 0;

            color: #64748b;

            font-size: 17px;
            line-height: 1.8;
        }

        .hero-buttons {
            margin-top: 34px;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            gap: 12px;
        }

        .button {
            min-height: 48px;
            padding: 0 22px;

            border-radius: 8px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            font-size: 14px;
            font-weight: 600;

            transition: .2s ease;
        }

        .button-dark {
            background: #0f172a;
            color: #ffffff;
        }

        .button-dark:hover {
            background: #1e293b;
            transform: translateY(-1px);
        }

        .button-light {
            background: #ffffff;
            color: #334155;
            border: 1px solid #e2e8f0;
        }

        .button-light:hover {
            background: #f8fafc;
        }


        /* =========================
           SERVICES
        ========================== */

        .services-section {
            padding: 90px 0;
            background: #f8fafc;
            border-top: 1px solid #eef2f7;
            border-bottom: 1px solid #eef2f7;
        }

        .services-header {
            margin-bottom: 42px;
        }

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

        .service-card {
            background: #ffffff;

            border: 1px solid #e5eaf0;
            border-radius: 12px;

            padding: 26px;

            min-height: 230px;

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

        .service-card:hover {
            transform: translateY(-3px);
            border-color: #cbd5e1;
            box-shadow: 0 12px 35px rgba(15,23,42,.05);
        }

        .service-icon {
            width: 42px;
            height: 42px;

            border-radius: 9px;

            background: #f1f5f9;
            color: #334155;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-card h3 {
            margin-top: 20px;

            font-size: 16px;
            font-weight: 700;

            letter-spacing: -.3px;
        }

        .service-card p {
            margin-top: 10px;

            font-size: 13px;
            line-height: 1.75;

            color: #64748b;
        }


        /* =========================
           TECHNOLOGIES
        ========================== */

        .technologies {
            padding: 70px 0;
        }

        .technologies-title {
            text-align: center;

            color: #94a3b8;

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

            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .technology-list {
            max-width: 820px;

            margin: 28px auto 0;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            gap: 9px;
        }

        .technology {
            padding: 9px 14px;

            border-radius: 7px;
            border: 1px solid #e2e8f0;

            background: #f8fafc;

            color: #475569;

            font-size: 12px;
            font-weight: 500;
        }


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

        .process {
            padding: 85px 0;
            border-top: 1px solid #f1f5f9;
        }

        .process-header {
            text-align: center;
        }

        .process-header .section-description {
            margin-left: auto;
            margin-right: auto;
        }

        .process-grid {
            margin-top: 52px;

            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .process-item {
            position: relative;
        }

        .process-number {
            color: #2563eb;

            font-size: 12px;
            font-weight: 700;
        }

        .process-item h3 {
            margin-top: 13px;

            font-size: 16px;
            font-weight: 700;
        }

        .process-item p {
            margin-top: 9px;

            color: #64748b;

            font-size: 13px;
            line-height: 1.7;
        }


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

        .cta {
            padding: 105px 24px;
            background: #f8fafc;

            border-top: 1px solid #eef2f7;

            text-align: center;
        }

        .cta-content {
            max-width: 680px;
            margin: auto;
        }

        .cta h2 {
            margin-top: 14px;

            font-size: 40px;
            letter-spacing: -1.5px;
        }

        .cta p {
            margin: 18px auto 0;

            max-width: 540px;

            color: #64748b;

            line-height: 1.8;
            font-size: 15px;
        }

        .cta .button {
            margin-top: 29px;
            background: #2563eb;
            color: #ffffff;
        }

        .cta .button:hover {
            background: #1d4ed8;
            transform: translateY(-1px);
        }

        .email {
            margin-top: 20px;

            color: #64748b;

            display: block;

            font-size: 13px;
        }

        .email:hover {
            color: #2563eb;
        }


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

        footer {
            padding: 25px 0;
            border-top: 1px solid #eef2f7;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;

            gap: 20px;

            color: #94a3b8;

            font-size: 12px;
        }


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

        @media(max-width: 900px) {

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

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

        }

        @media(max-width: 640px) {

            .container {
                width: min(100% - 32px, 1120px);
            }

            .navbar {
                height: 68px;
            }

            .hero {
                padding: 80px 0;
            }

            .hero h1 {
                letter-spacing: -2px;
            }

            .hero-description {
                font-size: 15px;
            }

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

            .service-card {
                min-height: auto;
            }

            .process-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .section-title {
                font-size: 30px;
            }

            .cta {
                padding: 80px 20px;
            }

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

            .footer-content {
                flex-direction: column;
                text-align: center;
            }

        }