* {
            font-family: 'Vazirmatn', sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #050816;
            color: #fff;
            overflow-x: hidden;
        }

        .anime-bg {
            position: fixed;
            inset: 0;
            z-index: -5;
            background:
                radial-gradient(circle at 20% 20%, rgba(91, 33, 182, 0.42), transparent 33%),
                radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.30), transparent 35%),
                radial-gradient(circle at 50% 80%, rgba(236, 72, 153, 0.22), transparent 38%),
                linear-gradient(135deg, #030712 0%, #0f172a 45%, #111827 100%);
        }

        .anime-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
        }

        .glow-orb {
            position: fixed;
            width: 380px;
            height: 380px;
            border-radius: 999px;
            filter: blur(60px);
            opacity: .45;
            z-index: -4;
            animation: floatOrb 9s ease-in-out infinite alternate;
        }

        .orb-one {
            top: 10%;
            left: 5%;
            background: #7c3aed;
        }

        .orb-two {
            right: 0;
            bottom: 10%;
            background: #06b6d4;
            animation-delay: 1.5s;
        }

        @keyframes floatOrb {
            from { transform: translate3d(0, 0, 0) scale(1); }
            to { transform: translate3d(30px, -45px, 0) scale(1.12); }
        }

        .glass {
            background: rgba(15, 23, 42, 0.68);
            border: 1px solid rgba(148, 163, 184, 0.22);
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(22px);
        }

        .hero-card {
            animation: heroEnter 1s ease both;
        }

        @keyframes heroEnter {
            from { opacity: 0; transform: translateY(30px) scale(.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .float-code {
            animation: floatCode 4s ease-in-out infinite;
        }

        .float-code:nth-child(2) { animation-delay: .7s; }
        .float-code:nth-child(3) { animation-delay: 1.4s; }

        @keyframes floatCode {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-14px); }
        }

        .gradient-text {
            background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .shine {
            position: relative;
            overflow: hidden;
        }

        .shine::after {
            content: '';
            position: absolute;
            top: 0;
            right: -120%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
            transform: skewX(-18deg);
            animation: shine 4s infinite;
        }

        @keyframes shine {
            0% { right: -120%; }
            45%, 100% { right: 140%; }
        }

        .skill-card,
        .project-card {
            transition: .35s ease;
        }

        .skill-card:hover,
        .project-card:hover {
            transform: translateY(-8px);
            border-color: rgba(56, 189, 248, .65);
            box-shadow: 0 25px 80px rgba(56, 189, 248, .13);
        }

        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: .8s ease;
        }

        .scroll-reveal.show {
            opacity: 1;
            transform: translateY(0);
        }

        .anime-avatar {
            background:
                radial-gradient(circle at 50% 35%, rgba(255,255,255,.9) 0 5%, transparent 6%),
                radial-gradient(circle at 38% 45%, #38bdf8 0 5%, transparent 6%),
                radial-gradient(circle at 62% 45%, #f472b6 0 5%, transparent 6%),
                linear-gradient(135deg, rgba(56,189,248,.28), rgba(168,85,247,.28));
            border: 1px solid rgba(255,255,255,.18);
            box-shadow: inset 0 0 60px rgba(255,255,255,.06), 0 0 80px rgba(168,85,247,.35);
        }

        .typing::after {
            content: '|';
            animation: blink .8s infinite;
            color: #38bdf8;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }