/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#fff;background:#000}

.site-header{position:fixed;top:16px;left:16px;z-index:60}
/* checkbox toggle (hidden) + styled label as hamburger */
.nav-toggle{position:absolute;left:-9999px}
.hamburger{width:48px;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;cursor:pointer;position:relative;z-index:220}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:0;border-radius:2px}

.side-nav{position:fixed;left:0;top:0;height:100vh;width:260px;background:rgba(10,10,10,.98);transform:translateX(-110%);transition:transform .28s ease-in-out;z-index:80;padding:32px}
/* when the checkbox is checked, show nav */
.nav-toggle:checked ~ .side-nav{transform:translateX(0)}
.side-nav .close-nav{display:none}
.side-nav ul{list-style:none;margin-top:48px}
.side-nav a{display:block;color:#fff;text-decoration:none;padding:12px 0;font-size:18px}

.hero{position:relative;height:100vh;overflow:hidden}
.hero video{position:absolute;top:50%;left:50%;width:auto;height:120%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover}
.hero-overlay{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-align:center;padding:24px;padding-bottom:clamp(100px,22vh,220px)}
.hero .site-title{margin-top:8px}
/* Fallback translate (shouldn't be needed) */
.hero-overlay.force-down{transform:translateY(2vh)}
.site-title{font-size:clamp(28px,6vw,64px);margin-bottom:20px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-btn{background:rgba(255,255,255,.12);color:#fff;padding:14px 20px;border-radius:8px;text-decoration:none;font-weight:600;backdrop-filter:blur(4px);transition:transform .15s ease}
.hero-btn:hover{transform:translateY(-4px)}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}


/* Social bar appears after the hero: placed immediately after the hero and made sticky */
.social-sticky{position:sticky;top:12px;left:0;right:0;margin:0 auto;background:rgba(0,0,0,.7);padding:8px 14px;border-radius:8px;display:flex;gap:12px;z-index:70;justify-content:center;backdrop-filter:blur(6px);max-width:640px}
.social-sticky .social{color:#fff;text-decoration:none;padding:6px 8px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}

/* Double the SVG icon size and increase clickable padding */
.social svg{width:40px;height:40px}
.social{padding:10px}

.content-section{min-height:40vh;padding:64px 20px;background:#f7f7f7;color:#111}
.content-section:nth-child(odd){background:#008080}
.content-section h2{margin-bottom:12px}

.site-footer{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:60}
.socials{display:flex;gap:12px;background:rgba(0,0,0,.35);padding:8px 12px;border-radius:999px}
.social{color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.social svg{display:block}

@media (max-width:640px){
  .hero-buttons{flex-direction:column}
  .side-nav{width:100%}
  .hero video{height:140%}
  .hero-overlay{padding-bottom:clamp(60px,20vh,140px)}
}