.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: liquid-sunset wordmark. The sunset gradient is 3x wider   */
/* than the text and slides side to side, so the colors flow through    */
/* the letters like liquid. No glitch, no RGB-split — smooth + premium. */
/* ------------------------------------------------------------------ */
.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;
    background: linear-gradient(100deg,
        var(--ig-yellow), var(--ig-orange), var(--ig-pink),
        var(--ig-purple), var(--ig-pink), var(--ig-orange), var(--ig-yellow));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: sunset-flow 7s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(255, 46, 116, 0.28));
}

.theme-facebook .wordmark {
    background: linear-gradient(100deg,
        var(--fb-blue-lt), var(--fb-blue), #0b4fbf, var(--fb-blue), var(--fb-blue-lt));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(24, 119, 242, 0.32));
}

@keyframes sunset-flow {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* Gentle warmth boost on hover — speeds the flow up a touch. */
.wordmark:hover { animation-duration: 3.5s; }

@media (prefers-reduced-motion: reduce) {
    .wordmark { animation: none; background-position: 0% 50%; }
}

.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); }