:root {
        --primary: #8b5cf6;
        --primary-dark: #7c084fc;
        --secondary: #06b6d4;
        --accent: #f43f5e;
        --bg: #0f0a1e;
        --card: rgba(25, 15, 60, 0.65);
        --text: #f0e6ff;
    }

    * { box-sizing: border-box; }

    body {
        margin: 0;
        font-family: 'Inter', system-ui, sans-serif;
        background: var(--bg);
        color: var(--text);
        background-image: 
            radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.25) 0%, transparent 30%),
            radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.25) 0%, transparent 30%);
        min-height: 100vh;
        overflow-x: hidden;
    }

    .hero {
        background: linear-gradient(135deg, rgba(15,10,40,0.95), rgba(30,10,80,0.85)),
                    url('assets/img/hero.jpg') center/cover no-repeat;
        color: white;
        text-align: center;
        padding: 10px 20px 50px;
        position: relative;
    }
    .hero2 {
        background: linear-gradient(135deg, rgba(15,10,40,0.95), rgba(30,10,80,0.85)),
                    url('assets/img/hero.jpg') center/cover no-repeat;
        color: white;
        text-align: center;
        padding: 50px 20px 50px;
        position: relative;
    }

    .container {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    h1 {
        font-size: 4.8rem;
        font-weight: 900;
        margin: 0 0 20px;
        background: linear-gradient(90deg, #a855f7, #06b6d4, #f43f5e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
    }

    p.lead {
        font-size: 1.5rem;
        max-width: 800px;
        margin: 40px auto 20px;
        opacity: 0.92;
    }

    .btn {
        display: inline-block;
        padding: 18px 42px;
        background: linear-gradient(45deg, var(--primary), var(--primary-dark));
        color: white !important;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 800;
        font-size: 1.3rem;
        box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
        transition: all 0.3s ease;
        position: relative;
        z-index: 10;
        cursor: pointer;
    }

    .btn:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(139, 92, 246, 0.7);
        background: linear-gradient(45deg, #a855f7, #e879f9);
    }

    .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 40px;
        padding: 20px 0;
    }

    .feature {
        background: var(--card);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 24px;
        padding: 50px 30px;
        text-align: center;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }

    .feature:hover {
        transform: translateY(-20px);
        border-color: var(--secondary);
        box-shadow: 0 30px 70px rgba(139, 92, 246, 0.35);
    }

    .feature img {
        width: 130px;
        height: 130px;
        filter: drop-shadow(0 0 25px var(--primary));
        margin-bottom: 25px;
        transition: 0.4s;
    }

    .feature:hover img {
        transform: scale(1.15) rotate(10deg);
    }

    .feature h3 {
        font-size: 1.9rem;
        background: linear-gradient(to right, #a855f7, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 15px 0;
    }

    #register {
        padding: 20px 20px;
    }

    .register-box {
        background: var(--card);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(168, 85, 247, 0.5);
        max-width: 540px;
        margin: 0 auto;
        padding: 10px 10px;
        border-radius: 28px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
        position: relative;
        overflow: hidden;
    }

    /* Fixed: removed overlapping ::before that killed clicks */
    .register-box::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 3px;
        background: linear-gradient(45deg, #a855f7, #06b6d4, #f43f5e);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none; /* This saves the day */
    }

    input, button {
        width: 100%;
        padding: 18px 20px;
        margin: 12px 0;
        border-radius: 16px;
        border: none;
        font-size: 1.1rem;
        transition: all 0.3s;
        position: relative;
        z-index: 5;
    }

    input {
        background: rgba(255,255,255,0.08);
        color: white;
        border: 1px solid rgba(168, 85, 247, 0.5);
    }

    input::placeholder { color: #bbb; }

    input:focus {
        outline: none;
        background: rgba(255,255,255,0.15);
        box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.3);
    }

    button {
        background: linear-gradient(45deg, #a855f7, #f43f5e);
        color: white;
        font-weight: 800;
        font-size: 1.25rem;
        cursor: pointer;
        box-shadow: 0 12px 30px rgba(168, 85, 247, 0.5);
    }

    button:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(168, 85, 247, 0.7);
    }

    .error, .success {
        padding: 16px;
        border-radius: 16px;
        margin: 15px 0;
        font-weight: 600;
        backdrop-filter: blur(8px);
    }

    .error {
        background: rgba(244, 63, 94, 0.2);
        border: 1px solid #f43f5e;
        color: #fdb1c0;
    }

    .success {
        background: rgba(34, 197, 94, 0.2);
        border:1px solid #22c55e;
        color: #a7f3d0;
    }