/* =====================================================
   Jump N Joy — refined hero & atmospherics
   Editorial restraint: navy field, a single warm glow,
   a handful of points of light, no rotating ornaments.
   ===================================================== */

.section-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--color-cream);
    padding-top: clamp(210px, 19vw, 290px);
    padding-bottom: clamp(120px, 14vw, 180px);
    background-color: var(--color-secondary-deep);
    background-image:
        linear-gradient(110deg, rgba(6, 15, 43, .94) 0%, rgba(14, 30, 71, .82) 38%, rgba(14, 30, 71, .55) 75%, rgba(14, 30, 71, .45) 100%),
        url("../images/web-hero2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .section-hero {
        background-image:
            linear-gradient(180deg, rgba(6, 15, 43, .9) 0%, rgba(14, 30, 71, .82) 100%),
            url("../images/web-hero2.webp");
    }
}

/* a few tasteful points of light — no animation, no twinkle */
.section-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 14% 22%, rgba(255, 247, 229, .6), transparent 60%),
        radial-gradient(1px 1px at 32% 38%, rgba(255, 213, 107, .5), transparent 60%),
        radial-gradient(1.5px 1.5px at 70% 18%, rgba(255, 247, 229, .55), transparent 60%),
        radial-gradient(1px 1px at 86% 32%, rgba(255, 213, 107, .45), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 60%, rgba(255, 247, 229, .35), transparent 60%),
        radial-gradient(1px 1px at 22% 72%, rgba(255, 213, 107, .35), transparent 60%);
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}

/* one warm horizon glow — the only atmospheric flourish */
.section-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40%;
    width: 110%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(242, 179, 61, .22), rgba(242, 179, 61, .06) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section-hero .container { position: relative; z-index: 2; }

/* hero copy block — generous breathing room */
.welcometext {
    background: transparent;
    padding: 0;
    color: var(--color-cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: 640px;
}

.welcometext .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--color-primary-light);
    margin-bottom: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.welcometext .hero-eyebrow .dot {
    width: 10px; height: 10px;
    border-radius: 0;
    background: var(--color-primary);
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 L13.6 10.4 L22.5 12 L13.6 13.6 L12 22.5 L10.4 13.6 L1.5 12 L10.4 10.4 Z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 L13.6 10.4 L22.5 12 L13.6 13.6 L12 22.5 L10.4 13.6 L1.5 12 L10.4 10.4 Z'/></svg>") no-repeat center / contain;
    flex-shrink: 0;
    opacity: .95;
}

.welcometext h1 {
    color: var(--color-cream);
    text-shadow: none;
    margin-bottom: 24px;
}

.welcometext h6 {
    color: rgba(255, 247, 229, .8);
    margin-bottom: 40px;
}

.welcometext .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px;
}

.welcometext .hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 247, 229, .7);
    font-size: 13px;
    letter-spacing: 0.04em;
    font-family: var(--font-primary);
}

.welcometext .hero-meta svg {
    width: 14px; height: 14px;
    color: var(--color-primary-light);
}

/* header logo */
.navbar-brand img.brand-logo {
    height: clamp(72px, 9.5vw, 104px);
    width: auto;
    max-width: none;
    filter: drop-shadow(0 8px 22px rgba(6, 15, 43, .18));
    transition: transform .35s ease;
}
.navbar-brand:hover img.brand-logo { transform: scale(1.02); }

/* footer logo */
.footerlogo img {
    max-width: 200px;
    margin: 0 auto;
}

/* topbar */
.topbarbgwrap {
    background: linear-gradient(90deg, var(--color-secondary-deep) 0%, var(--color-secondary) 50%, var(--color-secondary-light) 100%);
}

/* refined entrance animations — single fade, no excessive stagger */
.welcometext > * {
    opacity: 0;
    transform: translateY(12px);
    animation: jnj-rise .7s cubic-bezier(.2, .65, .3, 1) forwards;
}
.welcometext .hero-eyebrow { animation-delay: .05s; }
.welcometext h1            { animation-delay: .15s; }
.welcometext h6            { animation-delay: .3s; }
.welcometext .hero-ctas    { animation-delay: .45s; }
.welcometext .hero-meta    { animation-delay: .55s; }

@keyframes jnj-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* mobile / tablet */
@media (max-width: 991px) {
    .navbar-nav { display: flex; }
}

@media (max-width: 768px) {
    .section-hero { text-align: center; padding-bottom: clamp(100px, 18vw, 160px); }
    .welcometext { margin: 0 auto; max-width: 540px; padding: 0 12px; }
    .welcometext .hero-eyebrow { display: inline-flex; }
    .welcometext .hero-ctas { justify-content: center; }
    .welcometext .hero-meta { justify-content: center; }
}

@media (max-width: 600px) {
    .welcometext .hero-ctas { flex-direction: column; align-items: stretch; }
    .welcometext .hero-ctas .btnstyletwo,
    .welcometext .hero-ctas .btnstyleghost { justify-content: center; }
}