:root{
  --c-red: #E00010;
  --c-yellow: #F8D800;
  --c-blue: #0088D0;
  --c-green: #70B828;
  --white: #ffffff;
  --black: #0a0a0a;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--white);
  background:var(--black);
  overflow-x:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Arial Black", "Impact", sans-serif;
}

body.no-scroll{ overflow:hidden; }

/* Top navigation (minimal, no panels) */
.nav{
  position:fixed;
  top: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  z-index:4;
  display:flex;
  align-items:center;
  gap: 14px;
}

.nav__home{
  display:none;
  color: var(--white);
  text-decoration:none;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 14px 46px rgba(0,0,0,0.6);
}

.has-home .nav__home{
  display:inline-block;
}

.nav__btn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--white);
  padding: 10px;
  cursor:pointer;
}

.nav__icon{
  display:inline-flex;
  flex-direction:column;
  gap: 6px;
}

.nav__icon span{
  width: 34px;
  height: 3px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transform-origin: center;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav.is-open .nav__icon span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav.is-open .nav__icon span:nth-child(2){ opacity:0; }
.nav.is-open .nav__icon span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.nav__menu{
  position:absolute;
  top: 52px;
  right: 0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  padding: 6px 0;
}

.nav__link{
  color: var(--white);
  text-decoration:none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 12px;
  text-shadow: 0 16px 44px rgba(0,0,0,0.66);
  border-bottom: 2px solid rgba(255,255,255,0.0);
  padding-bottom: 2px;
}

.nav__link:hover{ border-bottom-color: rgba(255,255,255,0.85); }
.nav__link[aria-current="page"]{ border-bottom-color: rgba(255,255,255,0.85); }

/* Off-canvas drawer */
.drawer{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.drawer.is-open{ pointer-events:auto; }

.drawer__scrim{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  cursor:pointer;
  background: rgba(0,0,0,0.0);
  opacity: 0;
  transition: opacity 220ms ease, background 220ms ease;
}

.drawer.is-open .drawer__scrim{
  opacity: 1;
  background: rgba(0,0,0,0.35);
}

.drawer__panel{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 86vw);
  padding: 22px 20px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(104%, 0, 0);
  transition: transform 240ms ease;
  box-shadow: -20px 0 60px rgba(0,0,0,0.55);
}

.drawer.is-open .drawer__panel{ transform: translate3d(0,0,0); }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.drawer__title{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  opacity: 0.9;
}

.drawer__close{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--white);
  cursor:pointer;
  font-size: 34px;
  line-height: 1;
  padding: 6px 8px;
}

.drawer__nav{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 10px;
}

.drawer__link{
  color: var(--white);
  text-decoration:none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 14px;
  padding: 10px 2px;
  border-bottom: 2px solid rgba(255,255,255,0.0);
}

.drawer__link:hover{ border-bottom-color: rgba(255,255,255,0.85); }
.drawer__link[aria-current="page"]{ border-bottom-color: rgba(255,255,255,0.85); }

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.bg__video{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  object-fit:cover;
  filter: grayscale(100%) contrast(1.06) brightness(1.18);
  transform: translate3d(0,0,0) scale(1.04);
  will-change: transform;
}

.bg__overlay{
  position:absolute;
  inset:0;
  /* Keep the video visible: only a light vignette + a tiny bottom fade */
  background:
    radial-gradient(1000px 700px at 50% 35%, rgba(0,0,0,0.10), rgba(0,0,0,0.30)),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.32));
}

.wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4vw, 56px);
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  text-align:center;
}

.panel{
  width:min(980px, 100%);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.panel--legal{
  width:min(980px, 100%);
  padding: 0;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: clamp(10px, 2.2vh, 18px);
}

.brand__logo{
  width: min(560px, 92%);
  height:auto;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,0.55));
}

.kicker{
  display:inline-block;
  margin: 0 0 14px 0;
  font-weight:900;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size: clamp(11px, 1.25vw, 13px);
  opacity:0.92;
  text-shadow: 0 14px 44px rgba(0,0,0,0.6);
}

.headline{
  margin:0;
  font-weight:900;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:-0.03em;
  font-size: clamp(40px, 7vw, 86px);
  font-family: "Impact", "Arial Black", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  text-shadow: 0 22px 54px rgba(0,0,0,0.70);
  -webkit-text-stroke: 1px rgba(0,0,0,0.18);
}

.headline--legal{
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.95;
}

.headline__sub{
  display:block;
  margin-top: 14px;
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight:900;
  letter-spacing:0.04em;
  opacity:0.95;
}

.subcopy{
  margin: 22px 0 0 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height:1.5;
  opacity:0.9;
  margin-left:auto;
  margin-right:auto;
  text-shadow: 0 16px 44px rgba(0,0,0,0.62);
}

.contact{
  margin-top: 26px;
  display:inline-block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-shadow: 0 16px 44px rgba(0,0,0,0.66);
}

.contact__line{
  font-size: 14px;
  line-height:1.55;
}

.contact a{
  color: var(--white);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}
.contact a:hover{border-bottom-color:rgba(255,255,255,0.85);}

/* Footer stripes */
.stripes{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  height: 60px;
  display:flex;
  flex-direction:column;
}
.stripes__s{flex:1;}
.stripe--red{background:var(--c-red);}
.stripe--yellow{background:var(--c-yellow);}
.stripe--blue{background:var(--c-blue);}
.stripe--green{background:var(--c-green);}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg__video{transform:none !important;}
}

/* Small screens */
@media (max-width: 520px){
  .nav__home{display:none;}
  .headline{line-height:0.98;}
}

/* Legal text blocks */
.legal{
  margin-top: 18px;
  max-width: 74ch;
  margin-left:auto;
  margin-right:auto;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
  text-shadow: 0 16px 44px rgba(0,0,0,0.62);
}

.legal h2{
  margin: 22px 0 8px 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.legal ul{ padding-left: 18px; margin: 8px 0 0 0; }
.legal li{ margin: 6px 0; }

.legal a{
  color: var(--white);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.legal a:hover{border-bottom-color:rgba(255,255,255,0.85);}

.legal__hint{
  opacity: 0.92;
}