/* home-hero.css - the home page's first section (#4068). Loaded by index.html only, so the
   20 other pages that share layouts.css .hero stay as they are.
   The photo has the man on the right, so the text sits on the left over the calm city side.
   The h1 and the statement start visible and move only (they are the LCP candidates); the badge,
   the buttons and the scroll cue fade in. The orbs are plain radial gradients, no blur filter. */

.home-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 88vh, 920px);
    overflow: hidden;
    background: var(--bg-dark);
    color: #fff
    }

/* ----- layers ----- */
.hh-media,
.hh-overlay,
.hh-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none
    }
.hh-media { z-index: -3 }
.hh-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transform-origin: 75% 45%;
    animation: hh-zoom 14s cubic-bezier(.2, .6, .2, 1) both
    }
.hh-overlay {
    z-index: -2;
    background:
        linear-gradient(to right, rgba(9, 15, 35, .96) 0%, rgba(9, 15, 35, .9) 40%, rgba(9, 15, 35, .55) 58%, rgba(9, 15, 35, .1) 80%),
        linear-gradient(to top, rgba(9, 15, 35, .75) 0%, rgba(9, 15, 35, 0) 38%)
    }
.hh-orbs { z-index: -1; overflow: hidden }
.hh-orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform
    }
.hh-orb-1 {
    width: 620px;
    height: 620px;
    top: -220px;
    left: -160px;
    background: radial-gradient(circle, rgba(37, 99, 235, .38) 0%, rgba(37, 99, 235, 0) 68%);
    animation: hh-drift-1 22s ease-in-out infinite alternate
    }
.hh-orb-2 {
    width: 480px;
    height: 480px;
    bottom: -200px;
    left: 22%;
    background: radial-gradient(circle, rgba(6, 182, 212, .28) 0%, rgba(6, 182, 212, 0) 68%);
    animation: hh-drift-2 26s ease-in-out infinite alternate
    }
.hh-orb-3 {
    width: 300px;
    height: 300px;
    top: 18%;
    left: 38%;
    background: radial-gradient(circle, rgba(139, 92, 246, .22) 0%, rgba(139, 92, 246, 0) 68%);
    animation: hh-drift-3 18s ease-in-out infinite alternate
    }

/* ----- content ----- */
.hh-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 6% 120px;
    display: flex;
    justify-content: flex-end   /* RTL: the left side */
    }
.hh-content {
    max-width: 580px;
    text-align: right
    }
.hh-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    margin-bottom: 22px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: .85em;
    font-weight: 600;
    color: #e0f2fe;
    animation: hh-fade-up .8s .1s cubic-bezier(.2, .7, .2, 1) both
    }
.hh-badge-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success)
    }
.hh-badge-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--success);
    animation: hh-ping 2s ease-out infinite
    }
.hh-badge-sep { opacity: .45 }
.hh-title {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -.5px;
    animation: hh-rise .9s .2s cubic-bezier(.2, .7, .2, 1) both
    }
.hh-title-accent {
    background: linear-gradient(120deg, var(--accent) 0%, #38bdf8 35%, #a5b4fc 50%, #38bdf8 65%, var(--accent) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hh-sheen 6s 1.2s linear infinite
    }
.hh-statement {
    font-size: 1.15em;
    line-height: 1.95;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 34px;
    animation: hh-rise .9s .35s cubic-bezier(.2, .7, .2, 1) both
    }
.hh-statement strong {
    color: #fff;
    font-weight: 800
    }
.hh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    animation: hh-fade-up .8s .5s cubic-bezier(.2, .7, .2, 1) both
    }
.hh-actions .btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor
    }
.hh-shine {
    position: relative;
    overflow: hidden
    }
.hh-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left .7s ease
    }
.hh-shine:hover::after,
.hh-shine:focus-visible::after { left: 125% }

.hh-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .7);
    font-size: .75em;
    text-decoration: none;
    animation: hh-fade-in 1s 1s both
    }
.hh-scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px
    }
.hh-scroll-mouse::before {
    content: "";
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: #fff;
    animation: hh-wheel 1.8s ease-in-out infinite
    }
.hh-scroll:hover { color: #fff }

/* ----- keyframes ----- */
@keyframes hh-zoom {
    from { transform: scale(1.08) }
    to { transform: scale(1) }
    }
@keyframes hh-rise {
    from { transform: translateY(26px) }
    to { transform: none }
    }
@keyframes hh-fade-up {
    from { opacity: 0; transform: translateY(20px) }
    to { opacity: 1; transform: none }
    }
@keyframes hh-fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
    }
@keyframes hh-sheen {
    to { background-position: 220% center }
    }
@keyframes hh-ping {
    0% { transform: scale(1); opacity: .7 }
    80%, 100% { transform: scale(2.6); opacity: 0 }
    }
@keyframes hh-wheel {
    0% { transform: translateY(0); opacity: 1 }
    70% { transform: translateY(12px); opacity: 0 }
    100% { transform: translateY(0); opacity: 0 }
    }
@keyframes hh-drift-1 {
    to { transform: translate3d(140px, 90px, 0) }
    }
@keyframes hh-drift-2 {
    to { transform: translate3d(-120px, -70px, 0) }
    }
@keyframes hh-drift-3 {
    to { transform: translate3d(90px, -60px, 0) scale(1.2) }
    }

/* ----- phones and small tablets: the portrait crop, text centred over a full overlay ----- */
@media (max-width: 768px) {
    .home-hero { min-height: calc(100svh - 64px) }
    .hh-media img { object-position: center top }
    .hh-overlay {
        background: linear-gradient(to top, rgba(9, 15, 35, .96) 0%, rgba(9, 15, 35, .86) 48%, rgba(9, 15, 35, .5) 100%)
        }
    .hh-container {
        justify-content: center;
        padding: 72px 20px 128px
        }
    .hh-content { text-align: center }
    .hh-badge { font-size: .78em }
    .hh-statement { font-size: 1.02em }
    .hh-actions { justify-content: center }
    .hh-actions .btn { flex: 1 1 140px; justify-content: center }
    .hh-scroll { bottom: 76px }   /* above the fixed mobile call bar */
    .hh-orb-1 { width: 420px; height: 420px }
    .hh-orb-2, .hh-orb-3 { display: none }
    }

@media (prefers-reduced-motion: reduce) {
    .home-hero *,
    .home-hero *::before,
    .home-hero *::after {
        animation: none !important;
        transition: none !important
        }
    }