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

html, body { height: 100%; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #fff;
    background: #1e3a52;
    overflow: hidden;
}

/* Rotating background (video + country scenes, crossfade). */
.bg { position: fixed; inset: 0; overflow: hidden; }

.slide {
    position: absolute;
    inset: -5%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.slide.active { opacity: 1; }

.slide-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 32, 52, 0.25), rgba(12, 32, 52, 0.6));
}

/* Hero: lower third, mouflon center stays visible. */
.hero {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 12vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
    padding: 0 1rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.brand { font-size: 2.6rem; font-weight: 800; }

.slogan {
    font-size: 1.5rem;
    font-weight: 700;
    min-height: 1.6em;
    transition: opacity 0.45s ease;
}

.slogan.fade { opacity: 0; }

.signup { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; text-shadow: none; }

.signup input[type="email"] {
    min-width: 17rem;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
}

.signup button {
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 999px;
    background: #e67e22;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.signup button:hover { background: #d35400; }

.signup button:disabled { opacity: 0.6; cursor: default; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.visually-hidden { position: absolute; left: -9999px; }

.consent { font-size: 0.8rem; opacity: 0.85; max-width: 30rem; }

.consent a { color: #fff; }

.message { font-weight: 600; min-height: 1.4em; }

.message.err { color: #ffb3a7; }

.footer {
    position: fixed;
    left: 0.7rem;
    bottom: 0.4rem;
    z-index: 1;
    display: flex;
    gap: 0.8rem;
    font-size: 0.72rem;
    opacity: 0.8;
}

.footer a { color: #fff; text-decoration: none; }

.footer a:hover { text-decoration: underline; }

/* Confirmation / legal pages. */
.confirm-body, .legal-body {
    overflow: auto;
    background: linear-gradient(135deg, #d7e7f2 0%, #f4f9fc 100%);
    color: #223;
}

.confirm-card, .legal-card {
    max-width: 44rem;
    margin: 3rem auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    padding: 2rem;
}

.confirm-card { max-width: 30rem; text-align: center; }

.confirm-card .brand, .legal-card .brand { color: #1e6091; font-size: 1.4rem; font-weight: 800; margin-bottom: 0.8rem; }

.legal-card h1 { margin-bottom: 1rem; }

.legal-card h3 { margin: 1.2rem 0 0.4rem; }

.legal-card p { margin-bottom: 0.6rem; line-height: 1.55; }

.confirm-card a, .legal-card a { color: #1e6091; }

@media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
}

@media (max-width: 600px) {
    .brand { font-size: 2rem; }
    .slogan { font-size: 1.15rem; }
    .hero { bottom: 8vh; }
}