:root{
    --bg: #faf9f6;
    --bg-2: #f4f2ec;
    --ink: #0a1834;
    --ink-soft: rgba(10,24,52,0.62);
    --ink-faint: rgba(10,24,52,0.13);
    --teal: #0bb9c2;
    --purple: #7c4cd5;
    --purple-soft: #8a63dd;
    --line: rgba(10,24,52,0.10);
}

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

html, body{
    height:100%;
    overflow:hidden;
}

body{
    background:
            radial-gradient(ellipse 90% 70% at 50% 8%, var(--bg-2), transparent 60%),
            var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    -webkit-font-smoothing: antialiased;
}

.stage{
    position: relative;
    height: 100dvh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#field{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.logo{
    width: clamp(150px, 20vw, 230px);
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 40px rgba(20, 20, 60, 0.06));
}

.tagline{
    margin-top: clamp(20px, 3.4vw, 34px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tagline-lead{
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: clamp(11px, 1.3vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.tagline-main{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 3.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    background: linear-gradient(100deg, var(--ink) 45%, var(--purple-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 4vh, 40px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0;
    animation: fade-in 1s ease 1.1s both;
}

@keyframes fade-in{
    to{ opacity: 0.75; }
}

.footer .sep{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--purple-soft);
    display: inline-block;
}

.footer a {
    color: var(--purple-soft);
}

.corner{
    position: absolute;
    top: clamp(20px, 4vh, 36px);
    z-index: 2;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0;
    animation: fade-in 1s ease 1.3s both;
}

.corner.left{ left: clamp(20px, 4vw, 40px); }
.corner.right{ right: clamp(20px, 4vw, 40px); text-align: right; }

@media (max-width: 560px){
    .corner{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .content, .footer, .corner{ animation: none; opacity: 1; transform: none; }
}