/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #e6e9ef;
    background: radial-gradient(1200px 800px at 20% -10%, #1d2030 0%, #0b0b0f 55%, #0a0a0d 100%);
    overflow: hidden;
}

/* Ambient animated gradient overlay */
.hero::before {
    content: "";
    position: fixed;
    inset: -20% -20% -20% -20%;
    background: conic-gradient(from 0deg, #e52e71, #ff8a00, #36d1dc, #5b86e5, #e52e71);
    filter: blur(80px) saturate(130%);
    opacity: .18;
    animation: spin 28s linear infinite;
    pointer-events: none;
}
img{
    margin-top: 40px;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* Header */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(10,10,13,.6), rgba(10,10,13,0));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand .logo { display: block; border-radius: 12px; box-shadow: 0 6px 20px rgba(229,46,113,.18); }
.brand-text { font-weight: 700; letter-spacing: .8px; font-size: 25px; margin-top: 40px; }

/* Center hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 96px 20px 72px; /* leave room for header/footer */
}

.centerpiece { text-align: center; max-width: 940px; width: 100%; }
.brand-name {
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: 0.6px;
    background: linear-gradient(90deg, #ffffff, #c8d0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
}

.coming-soon { display: inline-flex; align-items: baseline; gap: 12px; }
.coming-soon .word { font-size: clamp(26px, 4.2vw, 44px); font-weight: 600; opacity: .9; }
.coming-soon .fancy {
    position: relative;
    font-size: clamp(32px, 6vw, 80px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #ff8a00, #e52e71 50%, #36d1dc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 3.5s ease-in-out infinite;
}

@keyframes shine {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(229,46,113,0)); }
    50% { filter: drop-shadow(0 6px 22px rgba(229,46,113,.35)); }
}

.tagline { margin-top: 14px; opacity: .75; font-weight: 300; letter-spacing: .3px; }

/* Footer */
.site-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    display: grid;
    place-items: center;
    color: #a2a9b3;
    font-size: 12px;
    background: linear-gradient(to top, rgba(10,10,13,.55), rgba(10,10,13,0));
}

/* Canvas */
#bg-particles { position: fixed; inset: 0; z-index: -1; display: block; }

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,1px,1px);
    white-space: nowrap; border: 0;
}

/* Small tweaks */
@media (max-width: 420px) { .brand-text { display: none; } }