@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Source+Sans+Pro:wght@400;600&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: default;
}

body {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #0d0f17;
	color: #fff;
	overflow-x: hidden;
	opacity: 0;
	animation: pageFadeIn 1s ease forwards;
	will-change: opacity;
}

h1, h2, h3 {
	font-family: 'Montserrat', sans-serif;
}

@keyframes pageFadeIn {
    from { opacity:0; filter:blur(4px); }
    to   { opacity:1; filter:blur(0); }
}

.bg-anim {
    position:fixed;
    inset:0;
    background:linear-gradient(135deg,#0a0f1f,#111827,#0f172a);
    background-size:400% 400%;
    animation:gradientMove 18s ease infinite;
    z-index:-4;
    will-change:background-position;
}

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

.particles-main {
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-2;
    pointer-events:none;
}

.particles-main span {
    position:absolute;
    border-radius:50%;
    animation:
        floatMain linear infinite,
        particleColorShift 6s ease-in-out infinite;
    filter: blur(0.4px);
    will-change:transform,opacity;
    backface-visibility:hidden;
}

@keyframes floatMain {
    from { transform:translateY(120vh) scale(0.9); opacity:0; }
    to   { transform:translateY(-20vh) scale(1); opacity:0.45; }
}

.mouse-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    opacity: 1;
    animation: mouseFade .35s ease-out forwards;
    filter: blur(0.5px);
    z-index:25;
    will-change:transform,opacity;
}

@keyframes mouseFade {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(0.4); opacity: 0; }
}

.particles-modal span {
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    animation:floatUp linear infinite;
    will-change:transform;
    backface-visibility:hidden;
}

@keyframes floatUp {
    from { transform:translateY(110%) scale(.5); opacity:0; }
    to   { transform:translateY(-10%) scale(1); opacity:.45; }
}

.center {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    position:relative;
    z-index:5;
}

h1 {
    font-size:3.6rem;
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(90deg,#60a5fa,#a78bfa,#34d399);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:glowPulse 2.5s ease-in-out infinite;
    will-change:filter;
}

@keyframes glowPulse {
    0% { filter:drop-shadow(0 0 6px #60a5fa40); }
    50% { filter:drop-shadow(0 0 15px #60a5fa80); }
    100% { filter:drop-shadow(0 0 6px #60a5fa40); }
}

@keyframes particleColorShift {
    0%   { background: rgba(96,165,250,0.8); box-shadow: 0 0 6px rgba(96,165,250,0.9); }
    33%  { background: rgba(167,139,250,0.8); box-shadow: 0 0 6px rgba(167,139,250,0.9); }
    66%  { background: rgba(52,211,153,0.8); box-shadow: 0 0 6px rgba(52,211,153,0.9); }
    100% { background: rgba(96,165,250,0.8); box-shadow: 0 0 6px rgba(96,165,250,0.9); }
}

p {
    font-size:1.25rem;
    margin-top:1rem;
    color:#d1d5db;
    max-width:600px;
    opacity:0;
    animation:fadeInUp 1.2s ease forwards .5s;
}

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

a.btn {
    display:inline-block;
    text-decoration:none;
    color:#fff !important;
}

.btn {
    margin-top:2.2rem;
    padding:14px 34px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    border-radius:10px;
    font-size:1.1rem;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
    will-change:transform;
    transform:translateZ(0);
}

.btn:hover {
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 20px 25px #0006;
}

.footer {
    margin-top:3rem;
    color:#9ca3af;
    font-size:.9rem;
}

.modal-backdrop {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:20;
}

.modal {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    padding:30px;
    width:90%;
    max-width:420px;
    text-align:center;
    position:relative;
    overflow:hidden;
    will-change:opacity;
    contain:layout style paint;
}

.modal-close {
    position:absolute;
    top:12px; right:14px;
    font-size:1.4rem;
    cursor:pointer;
    color:#bbb;
}

.modal-close:hover { color:#fff; }

.modal input {
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    margin-top:12px;
    font-size:1rem;
}

.modal button {
    width:100%;
    padding:14px;
    margin-top:14px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg,#3b82f6,#8b5cf6);
    font-size:1.1rem;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    will-change:opacity;
}

.modal button:hover { opacity:.85; }

.no-mouse-trail .mouse-particle {
    display: none !important;
}

#successMessage {
    display:none;
    font-size:1.1rem;
    font-weight:600;
    margin-top:1.5rem;
    opacity:0;
    transform:translateY(10px);
    transition:.4s ease;
}

.corner-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 220px;
    object-fit: contain;
    z-index: 50;
    opacity: 0.85;
    transition: opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corner-logo:hover { opacity: 1; }

.lang-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 50;
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    align-items: center;
    height: 60px;
}

.lang-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all .2s ease;
    text-transform: uppercase;
}

.lang-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.lang-btn.active {
    color: #60a5fa;
    background: rgba(96,165,250,0.15);
}

/* MOBILE RESPONSIVE CSS — unchanged */
@media (max-width: 768px) {
    .particles-main span {
        display:none;
    }

    h1 {
        font-size: 2.8rem;
        letter-spacing: 1px;
    }

    p {
        font-size: 1.05rem;
        padding: 0 10px;
    }

    .center {
        padding: 40px 15px;
    }

    .btn {
        width: 100%;
        padding: 14px 0;
        font-size: 1rem;
    }

    .modal {
        width: 92%;
        padding: 22px;
    }

    .modal input,
    .modal button {
        font-size: 1rem;
        padding: 12px;
    }

    .modal-backdrop {
        backdrop-filter: none;
        background: rgba(0,0,0,0.75);
    }

    .particles-modal span {
        display:none !important;
    }

    .lang-switcher {
        top: 15px;
        right: 15px;
        padding: 6px 8px;
        gap: 4px;
        line-height: 40px;
    }

    .lang-btn {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

    .corner-logo {
        width: 180px;
        top: 15px;
        left: 15px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.2rem;
        letter-spacing: 0.5px;
    }

    p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .center {
        padding: 30px 15px;
    }

    .btn {
        padding: 12px 0;
        font-size: 0.95rem;
    }

    .modal {
        width: 94%;
        padding: 20px;
        max-width: 350px;
    }

    .modal input,
    .modal button {
        font-size: 16px;
        padding: 12px;
    }

    .modal h2 {
        font-size: 1.3rem;
    }

    .lang-switcher {
        padding: 5px 6px;
        gap: 3px;
        top: 12px;
        right: 12px;
        line-height: 36px;
    }

    .lang-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .corner-logo {
        width: 150px;
        top: 12px;
        left: 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .mouse-particle {
        display: none !important;
    }

    .btn:hover,
    .modal button:hover {
        transform: scale(1.02);
        box-shadow: none;
    }
}