:root{--header-h:80px;--hero-offset:12vh;--vh:100vh;}
@supports (height: 100dvh) {
:root{--vh:100dvh;}
} .hero-banner{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;height:calc(var(--vh) - var(--header-h) - var(--hero-offset));padding:0 clamp(4vw, 7vw, 8vw);overflow:hidden;color:#fff;}
.hero-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(30, 20, 10, 0.45) 0%, rgba(30, 20, 10, 0.22) 25%, rgba(30, 20, 10, 0.08) 55%, rgba(30, 20, 10, 0) 80%);z-index:2;pointer-events:none;}
.hero-bg{position:absolute;inset:0;z-index:0;opacity:1;transition:opacity 1.4s ease-in-out;overflow:hidden;}
.hero-bg.hidden{opacity:0;pointer-events:none;}
.hero-bg.entering{opacity:0;}
.hero-bg.leaving{opacity:0;}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
@keyframes kenburns {
from{transform:scale(1);}
to{transform:scale(1.06);}
}
.hero-bg:not(.hidden) .hero-bg-img{animation:kenburns 8s ease-in-out forwards;}
.hero-inner{position:relative;z-index:3;margin-left:7vw;}
.hero-inner h1{font-size:clamp(3rem, 4.5vw + 1rem, 5.5rem);font-weight:700;line-height:1.05;margin:0 0 1.25rem;color:#fff !important;text-shadow:0 2px 6px rgba(0,0,0,.45);}
.hero-inner p{font-size:clamp(1.2rem, 1.1vw + .4rem, 1.5rem);max-width:600px;line-height:1.35;margin:0 0 1.75rem;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.btn-main{display:inline-block;padding:1rem 2.25rem;font-size:1.05rem;font-weight:600;background:transparent;border:3px solid #fff;border-radius:.8rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);cursor:pointer;text-decoration:none;transition:background .25s ease, color .25s ease;}
.btn-main::after{content:"→";display:inline-block;margin-left:.55rem;transition:transform .25s ease;}
.btn-main:hover{background:#fff;color:#000;text-shadow:none;}
.btn-main:hover::after{transform:translateX(.25rem);}
.hero-dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.6rem;}
.hero-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .3s ease, transform .3s ease;}
.hero-dot.active{background:#fff;transform:scale(1.35);}
@media(max-width:768px){
.hero-banner{grid-template-columns:1fr;height:60vh;}
.hero-inner{margin:10vh 0 0;margin-left:0;}
.btn-main, .btn-main:hover{border:2px solid #fff;}
.hero-dots{bottom:0.5rem;}
.hero-dot{width:24px !important;height:3px !important;min-height:0 !important;border-radius:2px !important;padding:0 !important;line-height:1 !important;}
.hero-dot.active{width:36px !important;transform:none !important;}
} @media (prefers-reduced-motion: reduce) {
.hero-bg { transition: none; }
.hero-bg-img { animation: none; }
}