:root{

            --primary:#001D3D;
            --secondary:#0057FF;
            --bg:#F7F9FC;
            --text:#1F2937;
            --muted:#64748B;
            --success:#14AE5C;

        }

        *{
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{

            margin:0;
            overflow-x:hidden;

            background:white;

            color:var(--text);

            font-family:'Inter',sans-serif;

        }

        img{

            max-width:100%;
            height:auto;

        }

        .container{

            width:92%;

        }

        @media(min-width:1400px){

            .container{

                width:85%;

            }

        }

        /* NAV */

        nav{

            position:fixed;
            top:0;
            z-index:999;

            background:white;

            height:80px;
            line-height:80px;

            box-shadow:none;

            border-bottom:1px solid #EDF2F7;

        }

        nav .brand-logo{

            color:var(--primary);

            font-weight:800;

            font-size:1.7rem;

        }

        nav ul a{

            color:#334155;

            font-weight:500;

        }

        .btn-main{

            background:var(--secondary);

            border-radius:999px;

            box-shadow:none;

            font-weight:700;

            padding:0 30px;

        }

        .btn-main:hover{

            background:#0047D4;

        }

        .btn-outline{

            background:white;

            border:1px solid #DCE4EE;

            color:var(--primary);

            border-radius:999px;

            font-weight:700;

            padding:0 30px;

        }

        /* HERO */

        .hero{

            padding-top:140px;
            padding-bottom:80px;

            background:
                    radial-gradient(circle at top right,
                    rgba(0,87,255,.08),
                    transparent 30%),

                    linear-gradient(to bottom,
                    #F8FBFF,
                    #FFFFFF);

        }

        .badge-top{

            display:inline-flex;

            align-items:center;

            gap:10px;

            background:white;

            border:1px solid #E5EAF1;

            border-radius:999px;

            padding:12px 20px;

            color:var(--primary);

            font-weight:600;

            margin-bottom:30px;

        }

        .hero h1{

            font-size:clamp(2.5rem, 6vw, 4.7rem);

            line-height:1.05;

            font-weight:800;

            color:var(--primary);

            margin:0;

        }

        .hero p{

            margin-top:30px;

            color:var(--muted);

            font-size:1.12rem;

            line-height:1.9;

            max-width:650px;

        }

        .hero-buttons{

            display:flex;

            flex-wrap:wrap;

            gap:16px;

            margin-top:40px;

        }

        /* PRICE BOX */

        .price-box{

            background:white;

            border-radius:32px;

            padding:40px;

            border:1px solid #EDF1F6;

            box-shadow:
                    0 20px 50px rgba(0,0,0,.05);

        }

        .price-label{

            font-size:.9rem;

            color:#64748B;

            font-weight:700;

            margin-bottom:10px;

        }

        .price{

            font-size:clamp(3rem, 8vw, 4.5rem);

            font-weight:800;

            color:var(--primary);

            line-height:1;

        }

        .price small{

            font-size:1.2rem;

        }

        .price-description{

            color:#64748B;

            margin-top:15px;
            margin-bottom:30px;

            line-height:1.8;

        }

        .feature{

            display:flex;

            align-items:center;

            gap:12px;

            margin-bottom:16px;

            font-weight:500;

        }

        .feature i{

            color:var(--success);

        }

        /* SECTION */

        .section{

            padding:90px 0;

        }

        .section-title{

            font-size:clamp(2rem, 5vw, 3rem);

            font-weight:800;

            color:var(--primary);

            margin-bottom:15px;

        }

        .section-subtitle{

            max-width:700px;

            margin:auto;

            color:var(--muted);

            line-height:1.9;

            font-size:1.1rem;

        }

        /* STEP */

        .step-card{

            background:white;

            border:1px solid #EDF1F6;

            border-radius:28px;

            padding:40px;

            height:100%;

            transition:.25s;

        }

        .step-card:hover{

            transform:translateY(-5px);

            box-shadow:
                    0 20px 40px rgba(0,0,0,.05);

        }

        .step-number{

            width:60px;
            height:60px;

            border-radius:20px;

            background:#EEF4FF;

            color:var(--secondary);

            display:flex;

            align-items:center;
            justify-content:center;

            font-size:1.5rem;
            font-weight:800;

            margin-bottom:20px;

        }

        .step-card h5{

            font-weight:700;

            color:var(--primary);

        }

        .step-card p{

            color:var(--muted);

            line-height:1.9;

        }

        /* BUY SECTION */

        .buy-section{

            background:#F7F9FC;

            border-radius:40px;

            padding:70px;

        }

        .input-field{

            margin-bottom:25px;

        }

        .input-field input{

            background:white !important;

            border:1px solid #E2E8F0 !important;

            border-radius:16px !important;

            padding-left:18px !important;

            height:60px !important;

            box-shadow:none !important;

        }

        .input-field label{

            left:18px;

        }

        /* FOOTER */

        footer{

            background:#00162E;

            color:white;

            padding-top:80px;
            padding-bottom:50px;

        }

        .footer-bottom{

            margin-top:50px;

            padding-top:30px;

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

            color:#94A3B8;

        }

        /* MOBILE */

        @media(max-width:992px){

            nav{

                height:70px;
                line-height:70px;

            }

            nav .brand-logo{

                font-size:1.4rem;

            }

            .hero{

                text-align:center;

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

            }

            .hero p{

                margin:auto;
                margin-top:25px;

                font-size:1rem;

            }

            .hero-buttons{

                justify-content:center;

            }

            .price-box{

                margin-top:40px;

            }

            .section{

                padding:70px 0;

            }

            .step-card{

                margin-bottom:20px;

            }

            .buy-section{

                padding:35px 25px;

            }

        }