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

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

/* ------------------------------------------------------------------ */
/* SIGNATURE: chromatic-aberration wordmark. The same text is stacked   */
/* three times — the sunset base, a cyan copy nudged one way, a magenta  */
/* copy the other — then periodically glitch-sliced with clip-path. 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;
    cursor: default;
    isolation: isolate;
    background: linear-gradient(100deg,
        var(--ig-yellow), var(--ig-orange) 34%, var(--ig-pink) 66%, var(--ig-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.theme-facebook .wordmark {
    background: linear-gradient(100deg, var(--fb-blue-lt), var(--fb-blue) 60%, #0b4fbf);
    -webkit-background-clip: text;
    background-clip: text;
}

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

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

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

@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: 620px;
    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 — the three things people want to know before pasting. */
.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(--ig-pink);
    box-shadow: 0 0 8px var(--ig-pink);
}
.chip:nth-child(2)::before { background: var(--ig-orange); box-shadow: 0 0 8px var(--ig-orange); }
.chip:nth-child(3)::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.theme-facebook .chip::before { background: var(--fb-blue); box-shadow: 0 0 8px var(--fb-blue); }
.theme-facebook .chip:nth-child(2)::before { background: var(--fb-blue-lt); box-shadow: 0 0 8px var(--fb-blue-lt); }

/* Small platform toggle under the hero (Instagram | Facebook) so either
   downloader is one tap away — reinforces that InstaMP4 does both. */
.platform-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line-bright);
    background: var(--panel);
    margin-bottom: 26px;
}

.platform-switch a {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dim);
    padding: 7px 16px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}

.platform-switch a[aria-current="page"] {
    color: #fff;
    background: var(--cta-gradient);
    box-shadow: var(--sticker);
}
.platform-switch a:not([aria-current]):hover { color: var(--text); }