/* Phase 9.5 — pSEO hero + page styling. Pure CSS, no images.
   Animation is intentionally subtle: a slow gradient drift and gently
   floating shapes. No flashing, spinning or high-frequency motion. */

.pseo-hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 3rem 1rem;
    background: linear-gradient(120deg, #0d47a1, #1565c0, #4527a0, #1565c0);
    background-size: 300% 300%;
    animation: pseoGradient 16s ease infinite;
}

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

/* Slowly drifting translucent blobs for depth. */
.pseo-hero::before,
.pseo-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(4px);
    pointer-events: none;
}
.pseo-hero::before {
    width: 340px; height: 340px;
    top: -120px; left: -80px;
    animation: pseoFloat 22s ease-in-out infinite;
}
.pseo-hero::after {
    width: 260px; height: 260px;
    bottom: -110px; right: -60px;
    animation: pseoFloat 28s ease-in-out infinite reverse;
}

@keyframes pseoFloat {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(40px, 30px); }
    100% { transform: translate(0, 0); }
}

.pseo-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.pseo-hero__inner h1 { font-weight: 700; font-size: 2.2rem; line-height: 1.2; margin-bottom: 1rem; }
.pseo-hero__sub { font-size: 1.05rem; opacity: 0.95; margin-bottom: 1.5rem; }
.pseo-hero__cta { font-weight: 600; padding: 0.75rem 1.75rem; }

.pseo-cta-banner {
    background: linear-gradient(120deg, #1565c0, #4527a0);
    background-size: 200% 200%;
    animation: pseoGradient 16s ease infinite;
    color: #fff;
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.pseo-section { padding: 2.5rem 0; }
.pseo-section h2 { font-weight: 700; font-size: 1.5rem; margin-bottom: 1rem; }
.pseo-prose { font-size: 1.02rem; line-height: 1.8; color: #33373d; }
.pseo-token-box { background: #f8f9fb; border: 1px solid #e6e9ef; border-radius: 0.75rem; padding: 1.5rem; }
.pseo-updated { font-size: 0.82rem; color: #8a9099; }

@media (max-width: 576px) {
    .pseo-hero { min-height: 350px; padding: 2rem 1rem; }
    .pseo-hero__inner h1 { font-size: 1.6rem; }
    .pseo-hero__sub { font-size: 0.95rem; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .pseo-hero, .pseo-hero::before, .pseo-hero::after, .pseo-cta-banner { animation: none; }
}