:root{
    --bg: #060606;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.64);
    --gold1: #f6d27a;
    --gold2: #c89a2a;
    --shadow: 0 30px 80px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 700px at 50% 30%, rgba(255,210,120,.10), transparent 55%),
    radial-gradient(800px 500px at 70% 65%, rgba(120,200,255,.08), transparent 60%),
    var(--bg);
    color: var(--text);
    overflow-x:hidden;
}

#bg{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display:block;
    z-index: 0;
}

.vignette{
    position: fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
            radial-gradient(1000px 600px at 50% 35%, transparent 45%, rgba(0,0,0,.55) 90%),
            linear-gradient(to bottom, rgba(0,0,0,.55), transparent 30%, rgba(0,0,0,.65));
}

.wrap{
    position: relative;
    z-index: 2;
    min-height: 100%;
    display:flex;
    flex-direction:column;
    padding: 24px;
    gap: 28px;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    max-width: 1100px;
    width:100%;
    margin: 0 auto;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    letter-spacing:.12em;
    font-weight:700;
    font-size: 12px;
}

.dot{
    width: 8px; height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold1), var(--gold2));
    box-shadow: 0 0 18px rgba(246,210,122,.55);
}

.links{
    display:flex;
    gap: 14px;
}

.link{
    color: var(--muted);
    text-decoration:none;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: .2s ease;
}
.link:hover{
    color: var(--text);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

.hero{
    max-width: 1100px;
    width:100%;
    margin: 0 auto;
    flex: 1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap: 16px;
}

.logoBlock{
    position: relative;
    width: min(520px, 82vw);
    display:grid;
    place-items:center;
    margin-top: 10px;
    transform-style: preserve-3d;
    cursor: default;
}
.logo{
    width: 100%;
    height: auto;
    display:block;
    filter: drop-shadow(0 24px 55px rgba(0,0,0,.75));
    border-radius: 14px;
}
.glow{
    position:absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 45%, rgba(246,210,122,.22), transparent 60%);
    filter: blur(18px);
    opacity: .85;
    z-index: -1;
}

.title{
    margin: 10px 0 0;
    font-size: clamp(28px, 4.2vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.brand{
    display:block;
    font-weight: 800;
    background: linear-gradient(90deg, var(--gold1), var(--gold2), var(--gold1));
    -webkit-background-clip: text;
    background-clip:text;
    color: transparent;
    text-shadow: 0 0 22px rgba(246,210,122,.12);
}

.subtitle{
    margin: 0;
    max-width: 820px;
    font-size: clamp(14px, 1.6vw, 18px);
    color: rgba(255,255,255,.78);
}
.muted{ color: var(--muted); }

.countdownCard{
    margin-top: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
}

.countItem{
    min-width: 78px;
}
.num{
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.75));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lab{
    font-size: 12px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    margin-top: 2px;
}
.sep{
    opacity:.55;
    font-weight: 800;
}

.ctaRow{
    display:flex;
    gap: 12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top: 6px;
}

.btn{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration:none;
    transition: .2s ease;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
}
.btn.primary{
    border-color: rgba(246,210,122,.35);
    background: linear-gradient(180deg, rgba(246,210,122,.22), rgba(200,154,42,.08));
}
.btn.ghost{
    background: rgba(255,255,255,.04);
}

.micro{
    margin-top: 8px;
    display:flex;
    gap: 8px;
    flex-wrap:wrap;
    justify-content:center;
}
.badge{
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.80);
}

.footer{
    max-width: 1100px;
    width:100%;
    margin: 0 auto;
    padding: 12px 2px 18px;
    display:flex;
    gap: 12px;
    justify-content:center;
    flex-wrap:wrap;
    color: rgba(255,255,255,.70);
    font-size: 13px;
}
.footerDot{ opacity:.5; }

.modal{
    position: fixed;
    inset:0;
    display:none;
    place-items:center;
    padding: 22px;
    background: rgba(0,0,0,.62);
    z-index: 20;
}
.modal.show{ display:grid; }

.modalCard{
    width: min(560px, 92vw);
    background: rgba(18,18,18,.88);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 18px 18px 16px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    position: relative;
}
.modalCard h2{
    margin: 6px 0 10px;
}
.modalCard ul{
    margin: 0 0 10px;
    color: rgba(255,255,255,.82);
}
.modalActions{
    display:flex;
    gap: 10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    margin-top: 14px;
}

.x{
    position:absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor:pointer;
}

.form{
    display:flex;
    gap: 10px;
    align-items:flex-end;
    margin-top: 10px;
    flex-wrap:wrap;
}
label{
    display:flex;
    flex-direction:column;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    color: rgba(255,255,255,.80);
    flex: 1;
    min-width: 240px;
}
input{
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    padding: 0 12px;
    outline: none;
}
input:focus{
    border-color: rgba(246,210,122,.35);
    box-shadow: 0 0 0 4px rgba(246,210,122,.10);
}
.tiny{ font-size: 12px; margin-top: 10px; }

@media (max-width: 520px){
    .countItem{ min-width: 64px; }
    .num{ font-size: 28px; }
}