/* Welcome page: the title block as real text (components/welcome/hero.py; variants in
   components/welcome/hero_variants/). Title font = Oxanium, the font of the old image welcome_v5.png. */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400&display=swap');

.wh-hero {
    --wh-cyan: #66e6f7;
    --wh-t: clamp(30px, 3.45vw, 70px);         /* title size (the old image: title ~34vw wide) */
    --wh-s: clamp(15px, 1.83vw, 34px);         /* subtitle size (its first line a bit wider than the title) */
    color: #fff;
    animation: wh-in .9s ease-out both;
}
.wh-hero .wh-title {
    margin: 0; font-family: 'Oxanium', 'Segoe UI', system-ui, sans-serif; font-weight: 300;
    font-size: var(--wh-t); line-height: 1.12; letter-spacing: .01em; color: var(--wh-cyan);
    text-shadow: 0 0 .5em rgba(102, 230, 247, .18);
}
.wh-hero .wh-sub {
    margin: .45em 0 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 400;
    font-size: var(--wh-s); line-height: 1.5; color: #fff; max-width: 22em;
}

/* desktop: where the image was (top left, above the circle) */
.wh-hero.wh-desktop { position: fixed; left: 2.6vw; top: 4.2vh; z-index: 1000; max-width: 42vw; pointer-events: none; }

/* --- v2 signature: spaced eyebrow, thin glowing rule, short subtitle */
.wh-signature .wh-eyebrow {
    font-family: 'Oxanium', 'Segoe UI', system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
    font-size: calc(var(--wh-s) * .7); letter-spacing: .55em; color: rgba(207, 239, 255, .75); margin-bottom: .8em;
}
.wh-signature .wh-rule {
    width: calc(var(--wh-t) * 2.4); height: 1px; margin: calc(var(--wh-t) * .3) 0 calc(var(--wh-t) * .26);
    background: linear-gradient(90deg, var(--wh-cyan), rgba(102, 230, 247, 0));
    box-shadow: 0 0 10px rgba(102, 230, 247, .55);
}
.wh-signature .wh-sub { margin-top: 0; color: rgba(255, 255, 255, .88); font-size: calc(var(--wh-s) * .86); max-width: 30em; }

/* --- v3 pillars: accent line on the left, the three steps in small capitals */
.wh-hero.wh-pillars { border-left: 2px solid rgba(102, 230, 247, .55); padding-left: calc(var(--wh-t) * .38); }
.wh-hero.wh-pillars .wh-sub { margin-top: .3em; }
.wh-hero .wh-steps {
    display: flex; align-items: center; flex-wrap: wrap; gap: .9em; margin-top: 1.1em;
    font-family: 'Oxanium', 'Segoe UI', system-ui, sans-serif; text-transform: uppercase;
    font-size: calc(var(--wh-s) * .66); letter-spacing: .32em; color: #9fb3c8;
}
.wh-hero .wh-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--wh-cyan); box-shadow: 0 0 6px var(--wh-cyan); opacity: .8; }

/* mobile: in the flow of the mobile welcome, full width */
.wh-hero.wh-mobile {
    --wh-t: clamp(26px, 8.6vw, 46px);
    --wh-s: clamp(14px, 4.1vw, 20px);
    position: relative; margin: 3.5vh 6vw 0; max-width: none;
}
.wh-hero.wh-mobile .wh-sub { max-width: none; }

@keyframes wh-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wh-hero { animation: none; } }