:root{
    --bg-1: #071029;
    --bg-2: #0f1b2d;
    --accent: #6ee7b7; /* mint */
    --accent-2: #7dd3fc; /* sky */
    --card: rgba(255,255,255,0.04);
    --glass: rgba(255,255,255,0.04);
    --muted: rgba(255,255,255,0.6);
    --radius: 14px;
    --max-width: 980px;
    --shadow: 0 10px 30px rgba(2,6,23,0.6);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.35;color:#edf2f7;background:linear-gradient(120deg,var(--bg-1),var(--bg-2));min-height:100vh}

.page-root{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}

.center-card{
    position:relative;
    z-index:2;
    max-width:var(--max-width);
    width:100%;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius:var(--radius);
    padding:40px;
    box-shadow:var(--shadow),
               inset 0 1px 1px rgba(255,255,255,0.04),
               0 0 0 1px rgba(255,255,255,0.03);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.logo{width:54px;height:54px;color:var(--accent);flex:0 0 54px}
#site-title{font-size:1.6rem;margin:0;color:#fff}
.tagline{margin-top:6px;margin-bottom:18px;color:var(--muted)}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 18px;width:100%;max-width:640px}
.time{
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding:16px;
    border-radius:12px;
    color:#fff;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.04),
                0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.time:hover {
    transform: translateY(-2px);
}
.time span{display:block;font-weight:600;font-size:0.7rem;color:var(--muted);margin-top:6px}

.subscribe{display:flex;gap:8px;margin-top:6px;width:100%;max-width:520px}
.subscribe input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;outline:none}
.subscribe button{padding:12px 16px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04202a;font-weight:700;cursor:pointer}
.subscribe button:active{transform:translateY(1px)}

.social{display:flex;gap:12px;margin:14px 0}
.social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    color:var(--accent-2);
    text-decoration:none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.04);
}
.social a:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.05);
    color: var(--accent);
}
.icon{width:18px;height:18px;fill:currentColor}

.note{color:var(--muted);font-size:0.9rem;margin-top:12px}
.note a{color:var(--accent-2);text-decoration:none}

.bg-decor{position:absolute;inset:0;overflow:hidden;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.6;transform-origin:center}
.b1{width:420px;height:420px;left:-10%;top:-20%;background:radial-gradient(circle at 30% 30%, rgba(125,211,252,0.45), transparent 40%)}
.b2{width:320px;height:320px;right:-10%;bottom:-10%;background:radial-gradient(circle at 70% 70%, rgba(110,231,183,0.42), transparent 40%)}
.b3{width:220px;height:220px;left:50%;top:60%;background:radial-gradient(circle at 50% 50%, rgba(167,139,250,0.18), transparent 40%)}

/* subtle floating animation */
@keyframes floaty{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
.b1{animation:floaty 9s ease-in-out infinite}
.b2{animation:floaty 12s ease-in-out infinite}
.b3{animation:floaty 10s ease-in-out infinite}

/* small screens */
@media (max-width:720px){
    .center-card{padding:22px}
    .countdown{grid-template-columns:repeat(2,1fr)}
    #site-title{font-size:1.25rem}
}

/* accessible hidden text */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
    .b1,.b2,.b3{animation:none}
    *{animation-duration:0s!important;transition-duration:0s!important}
}

/* small polish */
.center-card:focus-within{box-shadow:0 12px 40px rgba(12,22,42,0.65)}

.credits {
    margin-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 24px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-info {
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.credits:hover .admin-info {
    opacity: 1;
}

.admin-info strong {
    color: var(--accent);
    font-weight: 500;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}