* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Inter, Arial, sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #f8fafc;
            color: #0f172a;
            overflow-x: hidden;
        }

        /* Header */

        header {

            position: fixed;

            top: 0;

            width: 100%;

            padding: 18px 8%;

            display: flex;

            justify-content: space-between;

            align-items: center;

            background: rgba(2, 6, 23, .85);

            backdrop-filter: blur(18px);

            z-index: 999;

        }

        .logo {

            font-size: 30px;

            font-weight: 800;

            color: #4ade80;

        }

        nav a {

            color: white;

            margin-left: 25px;

            text-decoration: none;

            transition: .3s;

        }

        nav a:hover {

            color: #4ade80;

        }

        /* Hero */

        .hero {

            min-height: 70vh;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding: 120px 20px 80px;

            background:

                radial-gradient(circle at top left, #2563eb40, transparent 40%),

                radial-gradient(circle at bottom right, #22c55e40, transparent 40%),

                linear-gradient(135deg, #020617, #0f172a);

            color: white;

        }

        .hero h1 {

            font-size: 65px;

            margin-bottom: 20px;

        }

        .hero span {

            background: linear-gradient(90deg, #60a5fa, #4ade80);

            -webkit-background-clip: text;

            color: transparent;

        }

        .hero p {

            max-width: 850px;

            margin: auto;

            font-size: 22px;

            color: #cbd5e1;

        }

        /* Sections */

        .section {

            max-width: 1200px;

            margin: 90px auto;

            padding: 0 20px;

        }

        .section-title {

            text-align: center;

            font-size: 46px;

            margin-bottom: 25px;

        }

        .section-sub {

            text-align: center;

            max-width: 800px;

            margin: auto;

            color: #64748b;

            font-size: 18px;

            margin-bottom: 60px;

        }

        /* Cards */

        .grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 30px;

        }

        .card {

            background: white;

            padding: 35px;

            border-radius: 24px;

            box-shadow: 0 20px 60px rgba(15, 23, 42, .08);

            transition: .35s;

        }

        .card:hover {

            transform: translateY(-10px);

        }

        .card .icon {

            font-size: 42px;

            margin-bottom: 20px;

        }

        .card h3 {

            margin-bottom: 15px;

            font-size: 26px;

        }

        .card p {

            color: #64748b;

            line-height: 1.8;

        }

        /* Timeline */

        .timeline {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 25px;

        }

        .step {

            background: white;

            padding: 30px;

            border-radius: 22px;

            box-shadow: 0 15px 40px rgba(15, 23, 42, .08);

            text-align: center;

        }

        .step h2 {

            font-size: 42px;

            color: #2563eb;

            margin-bottom: 15px;

        }

        /* CTA */

        .cta {

            margin: 100px auto;

            max-width: 1200px;

            padding: 70px;

            border-radius: 30px;

            background: linear-gradient(135deg, #2563eb, #22c55e);

            color: white;

            text-align: center;

        }

        .cta h2 {

            font-size: 48px;

            margin-bottom: 20px;

        }

        .cta p {

            font-size: 20px;

            margin-bottom: 35px;

            opacity: .95;

        }

        .btn {

            display: inline-block;

            padding: 18px 40px;

            background: white;

            color: #2563eb;

            border-radius: 15px;

            font-weight: bold;

            text-decoration: none;

            transition: .3s;

        }

        .btn:hover {

            transform: translateY(-4px);

        }

        /* Notice */

        .notice {

            margin-top: 60px;

            background: #fff7ed;

            border-left: 6px solid #f59e0b;

            padding: 30px;

            border-radius: 20px;

            color: #444;

            line-height: 1.8;

        }

        /* Footer */

        footer {

            margin-top: 80px;

            background: #020617;

            color: white;

            padding: 60px 20px;

            text-align: center;

        }

        footer a {

            color: #93c5fd;

            text-decoration: none;

            margin: 0 15px;

        }

        footer p {

            margin-top: 25px;

            color: #94a3b8;

        }

        /* Mobile */

        @media(max-width:768px) {

            .hero h1 {

                font-size: 42px;

            }

            .section-title {

                font-size: 34px;

            }

            .cta {

                padding: 40px 25px;

            }

            .cta h2 {

                font-size: 34px;

            }

            header {

                flex-direction: column;

                gap: 15px;

            }

        }