/* pages/home.css — home page sections (built one section per pass) */

/* =====================================================================
   5.1 Hero — full-width crossfade slider
   ===================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg);
    overflow: hidden;
}

/* 720px at every width; grows only when the copy needs more room on narrow screens */
.hero__slides {
    display: grid;
    min-block-size: var(--hero-height);
}

.hero__slide {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slide-fade) var(--ease-in-out), visibility 0s var(--duration-slide-fade);
}
.hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-slide-fade) var(--ease-in-out), visibility 0s;
}

.hero__media,
.hero__scrim {
    position: absolute;
    inset: 0;
}
.hero__media { overflow: hidden; }
.hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0s var(--duration-slide-fade);
}
.hero__slide.is-active .hero__image {
    transform: scale(1.06);
    transition: transform var(--duration-slide-zoom) var(--ease-out);
}
/* Below 992px the copy spans the full photo width, so the scrim covers it
   from the bottom up and the copy sits low, leaving the top of the photo open */
.hero__scrim { background: var(--gradient-scrim-hero-compact); }
.hero__slide { align-items: end; }

@media (min-width: 992px) {
    .hero__scrim { background: var(--gradient-scrim-hero); }
    .hero__slide { align-items: center; }
}

.hero__content {
    position: relative;
    padding-block-start: var(--space-3xl);
    padding-block-end: calc(var(--space-3xl) + var(--space-3xl));
}
.hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
    max-inline-size: 54rem;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.hero__eyebrow::before {
    content: "";
    inline-size: var(--kicker-width);
    block-size: var(--hairline);
    background: var(--gradient-gold);
}

/* Slides 2-3 use <h2>; the class keeps them visually identical to the <h1> */
.hero__title {
    font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}
.hero__text {
    max-inline-size: 36rem;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text);
}
.hero__actions { margin-block-start: var(--space-sm); inline-size: 100%; }

/* Copy entrance on the active slide — staggered, eased */
.hero.is-enhanced .hero__copy > * {
    opacity: 0;
    transform: translateY(var(--space-md));
    transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}
.hero.is-enhanced .hero__slide.is-active .hero__copy > * {
    opacity: 1;
    transform: translateY(0);
}
.hero.is-enhanced .hero__slide.is-active .hero__copy > :nth-child(2) { transition-delay: calc(var(--stagger) * 1.5); }
.hero.is-enhanced .hero__slide.is-active .hero__copy > :nth-child(3) { transition-delay: calc(var(--stagger) * 3); }
.hero.is-enhanced .hero__slide.is-active .hero__copy > :nth-child(4) { transition-delay: calc(var(--stagger) * 4.5); }

/* Controls — pause/play, previous, diamond dots, next */
.hero__controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--space-lg);
    z-index: 2;
}
.hero__controls-inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.hero__control {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    background-color: var(--color-backdrop);
    color: var(--color-accent);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.hero__control-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
.hero__control .hero__control-icon--play,
.hero__control.is-paused .hero__control-icon--pause { display: none; }
.hero__control.is-paused .hero__control-icon--play { display: block; }

/* Small screens: pause + dots only, so the row never reaches the floating WhatsApp button */
.hero__control--step { display: none; }

@media (min-width: 576px) {
    .hero__control--step { display: grid; }
}

.hero__dots { display: flex; }
.hero__dot {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
}
.hero__dot::before {
    content: "";
    inline-size: var(--space-sm);
    block-size: var(--space-sm);
    border: var(--hairline) solid var(--color-accent);
    transform: rotate(45deg);
    transition: background-color var(--transition-base), transform var(--transition-base);
}
.hero__dot[aria-current="true"]::before {
    background-color: var(--color-accent);
    transform: rotate(45deg) scale(1.25);
}

@media (hover: hover) {
    .hero__control:hover { border-color: var(--color-border-strong); color: var(--color-accent-highlight); background-color: var(--color-surface-2); }
    .hero__dot:hover::before { background-color: var(--color-accent-deep); }
}

/* Progress — slim gold bar across the bottom edge, drives the 3 s rotation */
.hero__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    block-size: var(--rule);
    background-color: var(--color-border-subtle);
}
.hero__progress-bar {
    display: block;
    block-size: 100%;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
[dir="rtl"] .hero__progress-bar { transform-origin: 100% 50%; }
.hero__progress-bar.is-running { animation: hero-progress var(--slider-interval) var(--ease-timer) forwards; }
.hero.is-paused .hero__progress-bar { animation-play-state: paused; }

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Scroll cue — gold arrow bouncing at the bottom centre. Shown from 768px, where
   it clears the slider controls; plain anchor, so it works without JavaScript. */
.hero__scroll {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--space-xl);
    z-index: 3;
    display: none;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    margin-inline: auto;
    color: var(--color-accent);
    transition: color var(--transition-fast);
}
.hero__scroll-icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    animation: hero-scroll-bounce var(--duration-bounce) var(--ease-in-out) infinite;
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateY(calc(var(--space-xs) * -1)); }
    50%      { transform: translateY(var(--space-sm)); }
}

@media (hover: hover) {
    .hero__scroll:hover { color: var(--color-accent-highlight); }
}

@media (min-width: 768px) {
    .hero__scroll { display: grid; }
}

/* Without JavaScript the first slide simply stays; the controls do nothing */
@media (scripting: none) {
    .hero__controls,
    .hero__progress { display: none; }
}

@media (min-width: 768px) {
    .hero__content { padding-block-end: calc(var(--space-3xl) + var(--space-2xl)); }
    .hero__text { font-size: var(--fs-lg); }
    .hero__controls { inset-block-end: var(--space-xl); }
}

/* =====================================================================
   5.2 Trust strip — slim elevated band, gold hairlines top and bottom
   ===================================================================== */
.trust-strip {
    background-color: var(--color-surface-2);
    border-block: var(--hairline) solid var(--color-border);
}
.trust-strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trust-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-lg);
    padding-inline: var(--space-sm);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-button);
    text-align: center;
    color: var(--color-text);
}
.trust-strip__text { text-wrap: balance; }
/* 2x2 hairline grid on small screens */
.trust-strip__item:nth-child(odd) { border-inline-end: var(--hairline) solid var(--color-border-subtle); }
.trust-strip__item:nth-child(-n+2) { border-block-end: var(--hairline) solid var(--color-border-subtle); }
.trust-strip__segment { display: inline-block; white-space: nowrap; }
.trust-strip__dot { color: var(--color-accent); }

@media (min-width: 1200px) {
    .trust-strip__list {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        align-items: stretch;
    }
    .trust-strip__item,
    .trust-strip__item:nth-child(odd),
    .trust-strip__item:nth-child(-n+2) {
        position: relative;
        border: 0;
        padding-block: var(--space-xl);
        padding-inline: var(--space-lg);
    }
    /* gold diamond between items, echoing the slider dots */
    .trust-strip__item + .trust-strip__item::before {
        content: "";
        position: absolute;
        inset-inline-start: calc(var(--space-xs) * -1);
        inset-block-start: 50%;
        inline-size: var(--space-sm);
        block-size: var(--space-sm);
        border: var(--hairline) solid var(--color-accent);
        transform: translateY(-50%) rotate(45deg);
    }
}

/* =====================================================================
   5.3 Intro — two columns: copy + 2x2 stat block on a gold hairline grid
   ===================================================================== */
.intro__grid {
    display: grid;
    gap: var(--space-3xl);
}
.intro__head { margin-block-end: var(--space-xl); }
.intro__text {
    display: grid;
    gap: var(--space-md);
    color: var(--color-text-muted);
}
.intro__lead {
    font-size: var(--fs-lg);
    color: var(--color-text);
}

@media (min-width: 992px) {
    .intro__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--space-4xl);
        align-items: center;
    }
}

/* =====================================================================
   5.4 Solutions — 8 primary cards (4 → 2 → 1) + secondary chip row
   ===================================================================== */
.solutions__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-block-start: var(--hairline) solid var(--color-border-subtle);
}

/* =====================================================================
   5.5 Home Cinema feature band — full-bleed photo, dark scrim, bordered
   panel offset to the inline-end side with gold viewfinder corners.
   Small screens: photo on top, panel overlapping it from below.
   ===================================================================== */
.cinema-band {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg);
}
.cinema-band__media {
    aspect-ratio: 16 / 9;
}
.cinema-band__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
/* fade the photo into the page black (small screens) */
.cinema-band__media::after { background: var(--gradient-vignette), var(--gradient-fade-bottom); }

.cinema-band__inner {
    position: relative;
    z-index: 2;
    margin-block-start: calc(var(--space-3xl) * -1);
    padding-block-end: var(--section-pad);
}
.cinema-band__panel {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
    padding-block: var(--space-xl);
    padding-inline: var(--space-lg);
    background-color: var(--color-panel);
    border: var(--hairline) solid var(--color-border);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
}
/* four gold viewfinder corners, inset inside the frame */
.cinema-band__panel::before {
    content: "";
    position: absolute;
    inset: var(--space-sm);
    pointer-events: none;
    background:
        var(--gradient-gold-solid) 0 0 / var(--corner-size) var(--rule) no-repeat,
        var(--gradient-gold-solid) 0 0 / var(--rule) var(--corner-size) no-repeat,
        var(--gradient-gold-solid) 100% 0 / var(--corner-size) var(--rule) no-repeat,
        var(--gradient-gold-solid) 100% 0 / var(--rule) var(--corner-size) no-repeat,
        var(--gradient-gold-solid) 0 100% / var(--corner-size) var(--rule) no-repeat,
        var(--gradient-gold-solid) 0 100% / var(--rule) var(--corner-size) no-repeat,
        var(--gradient-gold-solid) 100% 100% / var(--corner-size) var(--rule) no-repeat,
        var(--gradient-gold-solid) 100% 100% / var(--rule) var(--corner-size) no-repeat;
}
.cinema-band__title { font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-3xl)); }
.cinema-band__text {
    display: grid;
    gap: var(--space-md);
    color: var(--color-text-muted);
}
.cinema-band__text p:first-child { color: var(--color-text); }
.cinema-band__actions { margin-block-start: var(--space-sm); inline-size: 100%; }

@media (min-width: 992px) {
    .cinema-band {
        display: grid;
        min-block-size: var(--band-min-height);
    }
    .cinema-band__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
    .cinema-band__media::after { background: var(--gradient-scrim-band); }
    .cinema-band__inner {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-block-start: 0;
        padding-block: var(--section-pad);
    }
    .cinema-band__panel {
        max-inline-size: 38rem;
        padding-block: var(--space-2xl);
        padding-inline: var(--space-2xl);
    }
}

/* =====================================================================
   5.6 Authorized Distributor brands — logo grid (not a marquee).
   13 tiles + one seal tile spanning two cells = 15 cells, so both the
   3-column and 5-column grids close without gaps. Logos are one-colour
   silhouettes tinted from tokens by the sprite's SVG flood filters:
   muted light at rest, gold on hover/focus (two stacked copies crossfade).
   ===================================================================== */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hairline);
    background-color: var(--color-border);
    border: var(--hairline) solid var(--color-border);
}
.brand-grid__item { display: grid; grid-template-columns: minmax(0, 1fr); }
.brand-grid__item--seal { grid-column: span 2; }

.brand-tile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 100%;
    min-block-size: var(--touch-target);
    aspect-ratio: 8 / 3;
    padding-inline: var(--space-sm);
    background-color: var(--color-bg);
    transition: background-color var(--transition-base);
}
.brand-tile:focus-visible {
    outline-offset: calc(var(--rule) * -2);
    border-radius: 0;
}
.brand-tile__logo {
    grid-area: 1 / 1;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
    filter: url("#tint-logo-rest");
    transition: opacity var(--transition-slow);
}
.brand-tile__logo--gold {
    filter: url("#tint-logo-gold");
    opacity: 0;
}
.brand-tile__wordmark {
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-md), 2.2vw, var(--fs-xl));
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-button);
    color: var(--color-text-muted);
    transition: color var(--transition-slow);
}
.brand-tile:focus-visible .brand-tile__logo { opacity: 0; }
.brand-tile:focus-visible .brand-tile__logo--gold { opacity: 1; }
.brand-tile:focus-visible .brand-tile__wordmark { color: var(--color-accent); }

@media (hover: hover) {
    .brand-tile:hover { background-color: var(--color-surface); }
    .brand-tile:hover .brand-tile__logo { opacity: 0; }
    .brand-tile:hover .brand-tile__logo--gold { opacity: 1; }
    .brand-tile:hover .brand-tile__wordmark { color: var(--color-accent); }
}

.brand-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding-inline: var(--space-md);
    background-color: var(--color-surface);
}
.brand-seal__icon {
    display: none;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    color: var(--color-accent);
}
.brand-seal__text {
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text);
}
.brand-seal__count {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    line-height: 1.1;
    color: var(--color-accent);
}

.brands__actions { margin-block-start: var(--space-2xl); }

@media (min-width: 768px) {
    .brand-seal__icon { display: block; }
    .brand-seal__text { font-size: var(--fs-sm); }
    .brand-seal__count { font-size: var(--fs-2xl); }
}

@media (min-width: 992px) {
    .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   5.7 Industries — 10 compact tiles (5 → 2 → 1), quieter hover (border only)
   ===================================================================== */
.industry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}
.industry-grid > li { display: flex; }

.industry-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    inline-size: 100%;
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.industry-tile__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    margin-block-end: var(--space-sm);
    color: var(--color-accent);
}
.industry-tile__title {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}
.industry-tile__link { color: var(--color-text); transition: color var(--transition-fast); }
.industry-tile__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.industry-tile__link:focus-visible { outline: none; }
.industry-tile__link:focus-visible::after {
    outline: var(--rule) solid var(--color-primary);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-card);
}
.industry-tile__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

@media (hover: hover) {
    .industry-tile:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-ring-gold); }
    .industry-tile:hover .industry-tile__link { color: var(--color-accent-highlight); }
}

@media (min-width: 576px) {
    .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .industry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   5.9 Featured projects — 4 media cards (4 → 2 → 1) + View All Projects
   ===================================================================== */
.projects__actions {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-2xl);
}