body{

margin:0;

font-family:'Inter',sans-serif;

background:#F8F6F2;

color:#111;

}

.hero{

height:100vh;

height:100dvh;

position:relative;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

overflow:hidden;

color:#fff;

}

.hero-video{

position:absolute;

top:50%;

left:50%;

min-width:100%;

min-height:100%;

width:auto;

height:auto;

transform:translate(-50%,-50%);

object-fit:cover;

z-index:0;

}

.hero-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

z-index:1;

}

.hero-content{

position:absolute;

inset:40px;

z-index:2;

display:flex;

flex-direction:column;

justify-content:space-evenly;

align-items:center;

width:calc(100% - 80px);

}

.hero-top,.hero-bottom{

display:flex;

flex-direction:column;

align-items:center;

width:100%;

}

.version-tag{

position:absolute;

top:20px;

left:20px;

z-index:3;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

background:rgba(255,255,255,.15);

padding:6px 12px;

border-radius:20px;

}

.mute-toggle{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

z-index:3;

width:44px;

height:44px;

border:1px solid rgba(255,255,255,.6);

border-radius:50%;

background:rgba(0,0,0,.35);

color:#fff;

font-size:18px;

cursor:pointer;

}

.hero h1{

font-family:'Space Grotesk',sans-serif;

font-size:80px;

font-weight:700;

margin:0;

}

.hero-fit{

display:block;

width:100%;

white-space:nowrap;

font-size:40px;

font-weight:300;

line-height:1.2;

margin:20px 0;

}

.hero p{

max-width:650px;

color:rgba(255,255,255,.8);

font-size:clamp(14px,2vw,20px);

}

.hero-content a{

color:#fff;

border-color:#fff;

}

.hero-content a:hover{

background:#fff;

color:#111;

}

a{

padding:15px 40px;

border:1px solid #111;

text-decoration:none;

color:#111;

margin-top:30px;

transition:.3s;

}

a:hover{

background:#111;

color:white;

}

section{

padding:120px 12%;

}

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}

img{

width:100%;

border-radius:18px;

}

footer{

padding:80px;

text-align:center;

color:#666;

}