/* HERO — 100vh photo bg + scaled stage (1920x924) with all positioned content
   Pattern: claude-html §3.8 Scaled-Stage. */

.hero {
    position: relative;
    width: 100%;                              /* 100% (not 100vw) — avoids scrollbar overflow */
    height: 100vh;
    overflow: hidden;
    /* Poster image as CSS fallback — shown if video stalls/fails. Same as <video poster>. */
    background: #1a1a1a url('../images/hero-bg.png') center/cover no-repeat;
    display: block;
}

/* ===== Full-bleed background video (escape stage, fills 100% × 100vh) ===== */
.hero__bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.hero__shade-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 148px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    z-index: 1;
    pointer-events: none;
}

.hero__shade-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 431px;
    background: linear-gradient(to right, #131313 0%, rgba(19, 19, 19, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero__shade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 401px;
    background: linear-gradient(to top, rgba(19, 19, 19, 0.6), rgba(19, 19, 19, 0));
    z-index: 1;
    pointer-events: none;
}

/* ===== The Scaled Stage (1920×924) =====
   Anchored to BOTTOM-LEFT: title + stats block at y=698 stays glued to the
   bottom of the hero across all viewport heights. As the screen shrinks, the
   stage's TOP scrolls up out of view (awards strip may be partially clipped)
   while the title cluster stays anchored at the bottom — per user request.
   Scaling: min(vw/1920, 1) — only shrink down to fit width, never scale up. */
.hero__stage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 924px;
    transform: scale(min(calc(100vw / 1920px), 1));
    transform-origin: bottom left;
    z-index: 5;
    pointer-events: none;
}
.hero__stage > * {
    pointer-events: auto;
}

/* ===== Title block (right-anchored) — Figma node 2017-1172 ===== */
.hero__titles {
    position: absolute;
    top: 594px;                 /* overline top (Figma 2072-3181) */
    right: 263px;               /* right edge ≈ 1657 */
    width: 680px;
    text-align: right;
}

.hero__overline {
    font-family: var(--ff-he);
    font-weight: 900;           /* Heebo Black */
    font-size: 26px;
    line-height: 30px;
    color: var(--c-wht);
    text-shadow: 0 3.113px 42.129px rgba(0, 0, 0, 0.52);
    margin: 0;
    white-space: nowrap;
}

.hero__title {
    font-family: var(--ff-he);
    font-weight: 900;           /* Heebo Black */
    font-size: 54px;            /* Figma 2072-3181 */
    line-height: 58px;
    color: var(--c-wht);
    text-align: right;
    text-shadow: 0 3.741px 50.631px rgba(0, 0, 0, 0.52);
    width: 659px;
    margin: 12px 0 0;
    margin-left: auto;
    margin-right: 0;
}

.hero__rule {
    margin-top: 21px;
    margin-left: auto;
    margin-right: 0;
    width: 656px;
    height: 5px;
    background: var(--c-gold-flat);
}

.hero__subtitle {
    margin-top: 20px;
    margin-left: auto;
    margin-right: 0;
    font-family: var(--ff-he);
    font-weight: 400;           /* Heebo Regular */
    font-size: 21px;
    line-height: 30px;
    color: var(--c-wht);
    text-align: right;
    text-shadow: 0 3.113px 42.129px rgba(0, 0, 0, 0.52);
    width: 680px;
}

/* ===== Stats (bottom-left) — Figma node 2072-3181 =====
   No glass box. Gold badge on top, then a 3-column big-number row
   (20 / 15,689 / 350, RTL right→left) with white 20% vertical dividers.
   Absolutely positioned to the 1920 stage coords (relative to statbox origin). */
.hero__statbox {
    position: absolute;
    left: 251px;                /* numbers group x (Figma) */
    top: 651px;
    width: 693px;
    height: 184px;
    direction: rtl;
}

/* Gold badge "ייצוג רק בעלי דירות" (top, text right edge ≈ x736) */
.hero__badge {
    position: absolute;
    top: 0;
    right: 208px;               /* 693 - (736-251) */
    margin: 0;
    font-family: var(--ff-he);
    font-weight: 400;           /* Heebo Regular */
    font-size: 30px;
    line-height: 40.812px;
    color: var(--c-wht);
    white-space: nowrap;
    text-shadow: 0 3.113px 42.129px rgba(0, 0, 0, 0.52);
}
.hero__badge-gold {
    font-weight: 900;           /* Heebo Black */
    background: var(--c-gold-flat);
    padding: 0 7px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Vertical dividers — white @ 20%, 1px × 108px, top y714.6 (rel 63.6) */
.hero__statdiv {
    position: absolute;
    top: 63.6px;
    width: 1px;
    height: 108px;
    background: rgba(255, 255, 255, 0.2);
}
.hero__statdiv--a { left: 191px; }   /* between 350 | 15,689 */
.hero__statdiv--b { left: 499px; }   /* between 15,689 | 20  */
.hero__statdiv--c { left: 693px; }   /* right edge (after 20) */

/* 3 stat columns — number (80px) over label (20px), centered */
.hero__stat {
    position: absolute;
    top: 49px;                  /* number top y700 (rel) */
    text-align: center;
}
.hero__stat--years     { left: 525px; width: 133px; }   /* 20      */
.hero__stat--residents { left: 233px; width: 227px; }   /* 15,689  */
.hero__stat--projects  { left: 6px;   width: 145px; }   /* 350     */

.hero__statnum {
    display: block;
    font-family: var(--ff-he);
    font-weight: 500;           /* Heebo Medium ≈ Atlas DL Regular display */
    font-size: 80px;
    line-height: 90px;
    color: var(--c-wht);
    text-shadow: 0 3.113px 42.129px rgba(0, 0, 0, 0.52);
}

.hero__statlabel {
    display: block;
    margin-top: 4px;
    font-family: var(--ff-he);
    font-weight: 400;           /* Heebo Regular */
    font-size: 20px;
    line-height: 40.812px;
    color: var(--c-wht);
    white-space: nowrap;
    text-shadow: 0 3.113px 42.129px rgba(0, 0, 0, 0.52);
}

/* ===== Awards strip (LEFT, vertical) ===== */
.hero__awards {
    position: absolute;
    top: 194px;
    left: 0;
    width: 115px;
    height: 537px;
    background: rgba(29, 29, 27, 0.4);
    backdrop-filter: blur(7.47px);
    -webkit-backdrop-filter: blur(7.47px);
    border-top-right-radius: 7.47px;
    border-bottom-right-radius: 7.47px;
    z-index: 6;
}

.hero__award {
    position: absolute;
    display: block;
    object-fit: contain;
}
/* Per Figma absolute positions (y is RELATIVE to .hero__awards top:194) */
.hero__award--madad {
    /* world y=210.94 → strip y=16.94, left:18.77, w:74.124, h:65.139 */
    top: 16.94px;
    left: 18.77px;
    width: 74.124px;
    height: 65.139px;
}
.hero__award--bdi {
    /* world y=296.65 → strip y=102.65, left:19.52, w:78.616, h:68.509 */
    top: 102.65px;
    left: 19.52px;
    width: 78.616px;
    height: 68.509px;
}
.hero__award--duns-b {
    /* world y=391.67 → strip y=197.67, left:3.13, w:113.976, h:49.271 */
    top: 197.67px;
    left: 3.13px;
    width: 113.976px;
    height: 49.271px;
}
/* Figma 1742:1140 דירוג חברתי (Globes) — world x=27 y=480 → strip y=286 */
.hero__award--globes {
    top: 286px;
    left: 27px;
    width: 60px;
    height: 57px;
}
/* Figma 1742:1163 דירוג חברתי (70 המשפיעים) — world x=23 y=562 → strip y=368 */
.hero__award--influencers70 {
    top: 368px;
    left: 23px;
    width: 68px;
    height: 68px;
    border-radius: 4px;
    object-fit: cover;
}
.hero__award--duns-a {
    /* world y=651 → strip y=457, left:19, w:80, h:67 */
    top: 457px;
    left: 19px;
    width: 80px;
    height: 67px;
}

/* ============================================================ */
/* STICKY GetStatus — moved out of .hero__awards (which is absolute)
   so it can be position:fixed and follow the viewport while scrolling. */
.hero__sticky-award {
    position: fixed;
    bottom: 24px;
    left: 14px;
    width: 87.067px;
    height: 87.067px;
    object-fit: cover;
    z-index: 30;
    display: block;
    pointer-events: none;
}
@media (max-width: 1024px) {
    .hero__sticky-award {
        width: 64px;
        height: 64px;
        bottom: 16px;
        left: 8px;
    }
}

/* Horizontal divider lines inside strip */
.hero__award-line {
    position: absolute;
    left: 8.19px;
    width: 93.242px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.hero__award-line--1 { top: 93px; }   /* world 287 - 194 */
.hero__award-line--2 { top: 180px; }  /* world 374 */
.hero__award-line--3 { top: 270px; }  /* world 464 */
.hero__award-line--4 { top: 357px; }  /* world 551 */
.hero__award-line--5 { top: 444px; }  /* world 638 */

/* ===== WhatsApp widget — sticky to viewport, pinned far right ===== */
.hero__wa {
    position: fixed;
    bottom: 24px;
    right: 0;            /* extreme right edge */
    width: 195px;
    z-index: 30;
    display: block;
    transition: transform 0.2s var(--ease);
}
.hero__wa:hover {
    transform: scale(1.04);
}
.hero__wa img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
@media (max-width: 1024px) {
    .hero__wa {
        width: 140px;
        bottom: 16px;
    }
}