* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

.background {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(212,166,70,.25), transparent 35%),
        radial-gradient(circle at bottom, rgba(0,0,0,.9), transparent 50%),
        linear-gradient(135deg, #050505, #151515 45%, #020202);
    z-index: -2;
}

.background::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: linear-gradient(120deg, transparent, rgba(255,215,120,.08), transparent);
    animation: shine 8s infinite;
}

@keyframes shine {
    from { transform: translateX(-60%); }
    to { transform: translateX(60%); }
}

.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.glass {
    max-width: 850px;
    width: 100%;
    text-align: center;
    padding: 55px 45px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,15,15,.78);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,.7);
    animation: appear 1.2s ease;
}

@keyframes appear {
    from { opacity:0; transform:translateY(40px); }
    to { opacity:1; transform:none; }
}

.logo {
    width: min(90%, 620px);
    height: auto;
    margin-bottom: 25px;
}

.badge {
    display:inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    border:1px solid #cda44b;
    color:#e7c36b;
    font-size:14px;
    letter-spacing:2px;
}

h1 {
    font-size: clamp(38px,5vw,64px);
    margin:25px 0 15px;
    background: linear-gradient(90deg,#fff,#d8aa4c);
    -webkit-background-clip:text;
    color:transparent;
}

.lead {
    font-size:20px;
    line-height:1.7;
    color:#ddd;
}

.invite {
    font-size:24px;
    color:#e4bd65;
    margin:25px;
}

.progress {
    height:8px;
    background:#292929;
    border-radius:20px;
    overflow:hidden;
    margin:35px auto;
    max-width:500px;
}

.progress-line {
    height:100%;
    width:75%;
    background:linear-gradient(90deg,#8b641c,#f2d078);
    animation:pulse 2s infinite;
}

@keyframes pulse {
    50% {width:90%;}
}

.button {
    display:inline-block;
    padding:16px 35px;
    border-radius:40px;
    background:linear-gradient(135deg,#d9ad51,#8b611d);
    color:#111;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.button:hover {
    transform:translateY(-3px);
}

.contact {
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
    color:#bbb;
}

.contact h2 {
    color:#fff;
}

@media(max-width:600px){
    .glass {padding:35px 20px;}
    .lead {font-size:17px;}
}