.hero{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-charcoal);contain:layout style paint}
.hero-bg{position:absolute;inset:-10% 0 0 0;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:calc(100% + 20%);object-fit:cover;object-position:center 30%;opacity:.85;filter:brightness(.7)}
@media (min-width:769px){.hero-bg img{animation:heroZoom 20s ease-in-out infinite alternate}
}
@keyframes heroZoom{from{transform:scale(1)}
    to{transform:scale(1.05)}
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(45 45 45 / .2) 0,rgb(45 45 45 / .1) 50%,rgb(45 45 45 / .4) 100%);z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;color:var(--color-white);padding:var(--space-lg);max-width:1200px;animation:fadeUp 1.2s var(--ease-out-expo) both}
.hero-content h1{color:var(--color-white);font-weight:300;font-size:clamp(2rem, 6vw, 5rem);line-height:1.1;margin-bottom:var(--space-md);letter-spacing:-.02em}
.hero-content h1 em{font-style:italic;color:var(--color-sand)}
.hero-content p{color:rgb(255 255 255 / .85);font-size:clamp(1rem, 2vw, 1.2rem);font-weight:300;line-height:1.8;max-width:600px;margin:0 auto var(--space-lg)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-md);flex-wrap:wrap}
.hero .btn-primary{background:var(--color-white);color:var(--color-black)}
.hero .btn-primary:hover{background:var(--color-sand);color:var(--color-black)}
.hero .btn-outline{border-color:rgb(255 255 255 / .4);color:var(--color-white)}
.hero .btn-outline:hover{border-color:var(--color-white);background:rgb(255 255 255 / .1)}
.scroll-indicator{position:absolute;bottom:var(--space-xl);left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgb(255 255 255 / .6);font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;animation:fadeUp 1.2s var(--ease-out-expo) .6s both}
.scroll-indicator::after{content:'';width:1px;height:40px;background:rgb(255 255 255 / .3);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(1)}
    50%{opacity:1;transform:scaleY(1.5)}
}
.page-hero{position:relative;min-height:45vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--color-charcoal);text-align:center;padding-bottom:var(--space-md)}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:brightness(.6) saturate(.85)}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(20 20 20 / .1) 0,rgb(20 20 20 / .2) 30%,rgb(20 20 20 / .3) 80%)}
.page-hero-content{position:relative;z-index:1;padding:var(--space-3xl) var(--space-lg)}
.page-hero-content h1{font-family:var(--font-display);font-size:clamp(2.25rem, 5vw, 4rem);font-weight:500;color:var(--color-white);margin:0 0 var(--space-md);line-height:1.1}
.page-hero-content p{font-size:1.1rem;line-height:1.75;color:rgb(255 255 255 / .7);max-width:500px;margin:0 auto}
.page-hero--breadcrumb{justify-content:flex-end;padding-bottom:var(--space-xl)}
.page-hero--breadcrumb .page-hero-content{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
.page-hero .breadcrumb{position:relative;z-index:2;padding:calc(var(--nav-height) + var(--space-lg)) var(--space-lg) 0;margin:0;width:100%;max-width:var(--max-width)}
.page-hero .breadcrumb a,.page-hero .breadcrumb span{color:rgb(255 255 255 / .6)}
.page-hero .breadcrumb a:hover{color:var(--color-white)}
.page-hero .breadcrumb .sep{color:rgb(255 255 255 / .3)}
.page-hero .breadcrumb [aria-current=page]{color:var(--color-white)}
.page-hero--product{min-height:35vh;justify-content:flex-end}
.page-hero--product .page-hero-content{padding-bottom:var(--space-lg)}
.page-hero+.about-values,.page-hero+.category-nav,.page-hero+.collection-grid,.page-hero+.contact-grid,.page-hero+.container,.page-hero+.product-grid,.page-hero+.professionals-hero,.page-hero+.section,.page-hero+.store-grid{margin-top:var(--space-xl)}
.page-hero+.product-detail{padding-top:var(--space-xl)}
.page-hero+.auth-page{padding-top:var(--space-xl)}
.page-hero--fullscreen{min-height:100vh;min-height:100svh}
.page-hero--fullscreen .page-hero-bg img{opacity:.5;filter:brightness(.55) saturate(.9)}
