.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 20px 44px;
    text-align: center;
}

@media (max-width: 640px) {
    .app { padding: 44px 16px 30px; }
}

/* ------------------------------------------------------------------ */
/* SIGNATURE: chromatic-aberration wordmark. The same text is stacked   */
/* three times — white base, a cyan copy nudged one way, a pink copy    */
/* the other — then periodically glitch-sliced with clip-path. This is  */
/* the one loud element; everything else on the page stays quiet.       */
/* ------------------------------------------------------------------ */
.wordmark {
    position: relative;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 5.2rem);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 6px;
    color: var(--text);
    cursor: default;
    isolation: isolate;
}

.wordmark::before,
.wordmark::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
}

.wordmark::before {
    color: var(--cyan);
    transform: translate(-3px, 0);
    mix-blend-mode: screen;
    animation: aberrate-cyan 5s steps(1) infinite;
}

.wordmark::after {
    color: var(--pink);
    transform: translate(3px, 0);
    mix-blend-mode: screen;
    animation: aberrate-pink 5s steps(1) infinite;
}

/* Most of the loop the copies rest at a soft ±3px offset; a couple of
   short windows jump the offset and slice for the glitch hit. */
@keyframes aberrate-cyan {
    0%, 100% { transform: translate(-3px, 0); clip-path: none; }
    47% { transform: translate(-3px, 0); clip-path: none; }
    48% { transform: translate(-9px, 2px); clip-path: inset(20% 0 55% 0); }
    50% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
    52% { transform: translate(-3px, 0); clip-path: none; }
    86% { transform: translate(-3px, 0); clip-path: none; }
    88% { transform: translate(-7px, 0); clip-path: inset(40% 0 30% 0); }
    90% { transform: translate(-3px, 0); clip-path: none; }
}

@keyframes aberrate-pink {
    0%, 100% { transform: translate(3px, 0); clip-path: none; }
    47% { transform: translate(3px, 0); clip-path: none; }
    48% { transform: translate(9px, -2px); clip-path: inset(55% 0 20% 0); }
    50% { transform: translate(-5px, 2px); clip-path: inset(8% 0 60% 0); }
    52% { transform: translate(3px, 0); clip-path: none; }
    86% { transform: translate(3px, 0); clip-path: none; }
    88% { transform: translate(7px, 0); clip-path: inset(30% 0 40% 0); }
    90% { transform: translate(3px, 0); clip-path: none; }
}

.wordmark:hover::before { animation: aberrate-cyan 0.4s steps(1) infinite; }
.wordmark:hover::after { animation: aberrate-pink 0.4s steps(1) infinite; }

.hero-subtitle {
    max-width: 600px;
    color: var(--text-dim);
    font-size: 1.06em;
    line-height: 1.6;
    margin: 14px 0 22px;
}

.hero-subtitle b {
    color: var(--text);
    font-weight: 600;
}

/* Status chips — content, not decoration: the three things people
   actually want to know before pasting a link. Replaces YTMATE's
   equalizer as the secondary hero element. */
.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line-bright);
    background: rgba(255, 255, 255, 0.015);
}

.chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}
.chip:nth-child(2)::before { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.chip:nth-child(3)::before { background: var(--electric); box-shadow: 0 0 8px var(--electric); }