*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:Arial, sans-serif;
        }
        :root{
            --bg-accent-1: rgba(186, 104, 200, 0.12);
            --bg-accent-2: rgba(100, 181, 246, 0.10);
            --bg-base-1: #e6f2ff;
            --bg-base-2: #f0e6ff;
        }

        body{
            background-color:#f5f5f5;
            background-image:radial-gradient(circle at 10% 20%, var(--bg-accent-1) 0%, rgba(0,0,0,0) 30%), radial-gradient(circle at 90% 80%, var(--bg-accent-2) 0%, rgba(0,0,0,0) 30%), linear-gradient(135deg,var(--bg-base-1) 0%,var(--bg-base-2) 100%);
            background-size: 180% 180%, 140% 140%, cover;
            background-attachment: fixed;
            color:#222;
            min-height:100vh;
            animation: bgShift 28s linear infinite;
        }

        @keyframes bgShift{
            0% {background-position: 0% 0%, 100% 100%, 0% 0%;}
            50% {background-position: 100% 100%, 0% 0%, 0% 0%;}
            100% {background-position: 0% 0%, 100% 100%, 0% 0%;}
        }

        @media (prefers-reduced-motion: reduce){
            body{ animation:none; }
        }
        header{
            width:100%;
            padding:18px 30px;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            box-shadow:0 2px 10px rgba(0,0,0,0.07);
            display:flex;
            justify-content:space-between;
            align-items:center;
            position:sticky;
            top:0;
            z-index:10;
        }


        .card{
            background: rgba(255,255,255,0.85);
            padding:20px;
            border-radius:12px;
            box-shadow:0 4px 12px rgba(0,0,0,0.08);
            transition:0.25s;
            cursor:pointer;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255,255,255,0.6);
        }
        header h1{
            font-size:22px;
            font-weight:700;
        }
        nav a{
            margin-left:20px;
            text-decoration:none;
            color:#222;
            font-weight:600;
            transition:0.2s;
        }
        nav a:hover{
            opacity:0.6;
        }

        .hero{
            text-align:center;
            padding:80px 20px;
        }
        .hero h2{
            font-size:34px;
            margin-bottom:10px;
            font-weight:800;
        }
        .hero p{
            font-size:16px;
            max-width:600px;
            margin:auto;
            margin-bottom:30px;
        }

        .btn{
            display:inline-block;
            background:#222;
            color:#fff;
            padding:12px 22px;
            border-radius:8px;
            font-weight:600;
            cursor:pointer;
            text-decoration:none;
            transition:0.2s;
        }
        .btn:hover{
            transform:scale(1.05);
        }

        .section{
            margin-top:60px;
            padding:20px;
            text-align:center;
        }
        .grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:20px;
            margin-top:30px;
            padding:0 20px;
        }
        .card{
            background:#fff;
            padding:20px;
            border-radius:12px;
            box-shadow:0 4px 12px rgba(0,0,0,0.08);
            transition:0.25s;
            cursor:pointer;
        }
        .card:hover{
            transform:translateY(-6px);
            box-shadow:0 10px 20px rgba(0,0,0,0.12);
        }
        .card h3{
            font-size:18px;
            margin-bottom:10px;
        }

        footer{
            margin-top:70px;
            text-align:center;
            padding:20px;
            background:#fff;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.07);
        }

        .fade{
            opacity:0;
            transform:translateY(20px);
            transition:0.6s;
        }
        .show{
            opacity:1;
            transform:translateY(0);
        }