/* =====================================================
   HERO V3 — cinematic editorial slider
   Headline block + segmented CTA strip on the left,
   full-width glass dock (price · stats · CTA) at the bottom,
   story-style progress segments with a slide counter.
   ===================================================== */

.hv {
    --hv-accent:    #0EA5E9;
    --hv-accent-2:  #0369A1;
    --hv-ink:       #ffffff;
    --hv-dim:       rgba(255,255,255,.82);
    --hv-faint:     rgba(255,255,255,.6);
    --hv-glass:     rgba(255,255,255,.08);
    --hv-glass-br:  rgba(255,255,255,.2);
    --hv-dur:       6.5s;               /* keep in sync with AUTOPLAY_MS */

    position: relative;
    /* End exactly at the fold: subtract the measured header height.
       --hv-header comes from hero-v3.js; 0px degrades to full height. */
    min-height: calc(100svh - var(--hv-header, 0px));
    display: flex;
    overflow: hidden;
    isolation: isolate;
    color: var(--hv-ink);
}

/* ---------- background slides ---------- */
.hv__bg { position: absolute; inset: 0; z-index: -2; }
.hv__slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transform: scale(1.07);
    transition: opacity 1.1s ease, transform 7.5s linear;
    will-change: opacity, transform;
}
.hv__slide.is-on { opacity: 1; transform: scale(1); }

/* Cinematic scrim: bottom-weighted wash for the dock, a left column for the
   headline, and a soft vignette so photo edges never fight the UI. */
.hv__scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8,11,16,.42) 100%),
        linear-gradient(to right, rgba(8,11,16,.78) 0%, rgba(8,11,16,.42) 46%, rgba(8,11,16,.12) 78%),
        linear-gradient(to top,   rgba(8,11,16,.88) 0%, rgba(8,11,16,.32) 34%, rgba(8,11,16,.10) 60%);
}

/* ---------- layout ---------- */
.hv__inner {
    width: min(1240px, 90vw);
    margin: 0 auto;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 78px 0 56px;
}

.hv__main { max-width: 720px; }

/* ---------- badge ---------- */
.hv__badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--hv-glass-br);
    background: var(--hv-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--hv-dim);
    margin-bottom: 18px;
}
.hv__badge i { color: var(--hv-accent); font-size: .74rem; }

/* ---------- headline ---------- */
/* Explicit colour: the global stylesheet sets a dark h1 colour that would
   otherwise win over the white inherited from .hv */
.hv .hv__title, .hv .hv__title span { color: var(--hv-ink); }
.hv__title {
    font-size: clamp(2.6rem, 5.2vw, 4.2rem);
    line-height: .99;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0;
    text-shadow: 0 4px 38px rgba(0,0,0,.5);
}
.hv .hv__title .hv__accent { color: var(--hv-accent); }
.hv__accent {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 4px;
}

.hv__desc {
    max-width: 52ch;
    font-size: clamp(1rem, 1.15vw, 1.13rem);
    line-height: 1.6;
    color: var(--hv-dim);
    margin: 14px 0 24px;
}

/* ---------- CTA strip (segmented control) ---------- */
/* One glass strip holding all three options; the primary is a filled pill
   inside it. Reads as a single control, mirrors the three admin buttons. */
.hv__ctas {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 999px;
    border: 1px solid var(--hv-glass-br);
    background: rgba(10,14,18,.35);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    margin-bottom: 20px;
}
.hv__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px; border-radius: 999px;
    font-size: .98rem; font-weight: 700; text-decoration: none;
    color: var(--hv-dim);
    transition: color .18s, background .18s, transform .18s;
}
.hv__cta:hover { color: var(--hv-ink); background: rgba(255,255,255,.1); }
.hv__cta--primary {
    background: var(--hv-accent); color: #fff;
    box-shadow: 0 12px 30px -12px var(--hv-accent);
}
.hv__cta--primary:hover { background: var(--hv-accent-2); color: #fff; }
.hv__cta--primary i { font-size: .86rem; transition: transform .18s; }
.hv__cta--primary:hover i { transform: translateX(4px); }

/* ---------- trust chips ---------- */
.hv__trust { display: flex; flex-wrap: wrap; gap: 18px; }
.hv__chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .84rem; font-weight: 600; color: var(--hv-faint);
    letter-spacing: .02em;
}
.hv__chip i { font-size: .74rem; color: var(--hv-accent); }
.hv__chip--live i { color: #4ade80; font-size: .56rem; }

/* ---------- glass dock (price · stats · CTA) ---------- */
.hv__dock {
    display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
    padding: 20px clamp(20px, 2.6vw, 30px);
    border-radius: 20px;
    border: 1px solid var(--hv-glass-br);
    background: rgba(255,255,255,.09);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,.75),
                inset 0 1px 0 rgba(255,255,255,.18);
}
.hv__dock-label { display: block; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hv-faint); margin-bottom: 3px; }
.hv__dock-num   { font-size: clamp(1.7rem, 2.3vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hv__dock-sep   { width: 1px; align-self: stretch; background: var(--hv-glass-br); }
.hv__dock-stat b     { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1; }
.hv__dock-stat small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-faint); margin-top: 5px; }
.hv__dock-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; border-radius: 14px;
    background: #fff; color: #14181c;
    font-size: .98rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    transition: transform .18s, box-shadow .18s;
}
.hv__dock-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); color: #14181c; }
.hv__dock-btn i { font-size: .84rem; }

/* ---------- slide nav: arrows + story segments + counter ---------- */
.hv__nav { display: flex; align-items: center; gap: 16px; }
.hv__arrow {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--hv-glass-br); background: var(--hv-glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff; font-size: 1rem; cursor: pointer;
    display: grid; place-items: center;
    transition: background .18s, transform .18s;
}
.hv__arrow:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }

.hv__segs { display: flex; align-items: center; gap: 8px; }
.hv__seg {
    position: relative; width: 44px; height: 4px;
    border: 0; padding: 0; border-radius: 999px;
    background: rgba(255,255,255,.28); cursor: pointer;
    overflow: hidden; transition: background .3s;
}
.hv__seg-fill {
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--hv-accent);
    transform: scaleX(0); transform-origin: left center;
    display: block;
}
/* Active segment: solid highlight even if the fill animation never runs. */
.hv__seg.is-on { background: rgba(255,255,255,.45); }
.hv__seg.is-on .hv__seg-fill.is-fill { animation: hv-fill var(--hv-dur) linear forwards; }
@keyframes hv-fill { to { transform: scaleX(1); } }
/* Autoplay pauses on hover/focus (JS mirrors this) — pause the fill with it. */
.hv:hover .hv__seg-fill, .hv:focus-within .hv__seg-fill { animation-play-state: paused; }

.hv__count { font-size: .82rem; font-weight: 600; color: var(--hv-faint); letter-spacing: .12em; }
.hv__count b { color: var(--hv-ink); font-weight: 800; }

/* scroll hint: thin line with a falling dot, dead centre at the fold */
.hv__scroll {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 2px; height: 44px; border-radius: 999px;
    background: rgba(255,255,255,.22); z-index: 3; overflow: hidden;
}
.hv__scroll::after {
    content: ''; position: absolute; left: 0; top: -12px;
    width: 2px; height: 12px; border-radius: 999px; background: #fff;
    animation: hv-drop 2s ease-in-out infinite;
}
@keyframes hv-drop {
    0%   { transform: translateY(0);    opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(56px); opacity: 0; }
}

/* ---------- entrance ----------
   FAIL-SAFE: the hidden start state only applies while .hv--animating is on
   the hero; JS removes it after the entrance, so if the animation never runs
   the content is simply visible. */
.hv--animating .hv__reveal { opacity: 0; transform: translateY(24px); }
.hv--animating.is-ready .hv__reveal { animation: hv-in .75s cubic-bezier(.22,.9,.28,1) forwards; }
.hv--animating.is-ready .hv__reveal:nth-child(1) { animation-delay: .05s; }
.hv--animating.is-ready .hv__reveal:nth-child(2) { animation-delay: .13s; }
.hv--animating.is-ready .hv__reveal:nth-child(3) { animation-delay: .21s; }
.hv--animating.is-ready .hv__reveal:nth-child(4) { animation-delay: .29s; }
.hv--animating.is-ready .hv__reveal:nth-child(5) { animation-delay: .37s; }
@keyframes hv-in { to { opacity: 1; transform: none; } }

/* ---------- short desktop viewports ---------- */
@media (min-width: 992px) and (max-height: 800px) {
    .hv__inner { padding: 96px 0 84px; gap: 22px; }
    .hv__title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
    .hv__desc  { margin: 14px 0 22px; }
    .hv__badge { margin-bottom: 16px; }
}

/* ---------- tablet ---------- */
@media (max-width: 991px) {
    .hv__inner { padding: 120px 0 100px; gap: 26px; }
    .hv__dock { flex-wrap: wrap; row-gap: 16px; }
    .hv__dock-btn { flex: 1 1 100%; justify-content: center; }
    .hv__scroll { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    /* Vertical scrim: photo stays visible up top, dark only under the text. */
    .hv__scrim {
        background: linear-gradient(
            to top,
            rgba(8,11,16,.95) 0%,
            rgba(8,11,16,.85) 32%,
            rgba(8,11,16,.5)  58%,
            rgba(8,11,16,.16) 80%,
            rgba(8,11,16,.4)  100%);
    }

    .hv__inner {
        justify-content: flex-end;
        gap: 14px;
        padding: 40px 0 78px;
    }

    .hv__main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
    .hv__badge  { font-size: .62rem; letter-spacing: .12em; padding: 6px 12px; margin: 0; }
    .hv__title  { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.08; }
    .hv__accent { font-size: .95em; margin-top: 2px; }
    .hv__desc   { font-size: .9rem; line-height: 1.55; margin: 0; max-width: 44ch; }

    /* CTA strip spans the width, three equal options */
    .hv__ctas { display: flex; width: 100%; margin: 4px 0 0; padding: 5px; }
    .hv__cta  { flex: 1 1 0; padding: 11px 8px; font-size: .84rem; gap: 6px; white-space: nowrap; }
    .hv__cta i { font-size: .76rem; }

    /* Compact dock: price left, stats right, button full width below */
    .hv__dock { flex-wrap: wrap; row-gap: 14px; padding: 15px 16px; border-radius: 16px; gap: 14px; }
    .hv__dock-num  { font-size: 1.6rem; }
    .hv__dock-sep  { display: none; }
    .hv__dock-stat { margin-left: auto; text-align: center; }
    .hv__dock-stat + .hv__dock-stat { margin-left: 0; }
    .hv__dock-stat b { font-size: 1.1rem; }
    .hv__dock-btn { flex: 1 1 100%; margin-left: 0; justify-content: center; padding: 13px; font-size: .92rem; border-radius: 12px; }

    .hv__trust { gap: 12px; justify-content: center; width: 100%; flex-wrap: nowrap; }
    .hv__chip  { font-size: .7rem; white-space: nowrap; }

    /* Swipe handles navigation: drop the arrows, centre segments + counter.
       Right padding keeps the counter clear of the floating WhatsApp button. */
    .hv__arrow { display: none; }
    .hv__nav   { position: absolute; left: 0; right: 0; bottom: 20px; justify-content: center; gap: 12px; padding: 0 84px 0 12px; }
    .hv__seg   { width: 34px; height: 3px; }
    .hv__count { font-size: .74rem; }
}

/* Reduced motion: no ken-burns, no entrance slide, no fill sweep */
@media (prefers-reduced-motion: reduce) {
    .hv__slide { transition: opacity .3s ease; transform: none; }
    .hv__slide.is-on { transform: none; }
    .hv--animating .hv__reveal { opacity: 1; transform: none; animation: none !important; }
    .hv__seg.is-on .hv__seg-fill.is-fill { animation: none; transform: scaleX(1); }
    .hv__scroll::after { animation: none; }
}