:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;

  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.3);

  --separator:rgba(0,0,0,.08);
}

html.dark{
  --bg:#0f0f0f;
  --text:#eaeaea;
  --muted:#a0a0a0;

  --glass:rgba(15,15,15,.6);
  --glass-border:rgba(255,255,255,.08);

  --separator:rgba(255,255,255,.08);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Plus Jakarta Sans",sans-serif;

  background:var(--bg);
  color:var(--text);

  transition:
    background .3s ease,
    color .3s ease;

  min-height:100vh;
}

/* MENU BUTTON */

.menu-btn{
  position:fixed;
  top:28px;
  right:28px;

  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text);

  border:none;
  cursor:pointer;

  background:var(--glass);

  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);

  border:1px solid var(--glass-border);
  border-radius:18px;

  z-index:1002;

  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}

html.dark .menu-btn{
  border-color:rgba(255,255,255,.12);
}

.menu-btn svg{
  width:24px;
  height:24px;
}

/* OVERLAY */

.menu-overlay{
  position:fixed;
  inset:0;

  background:var(--glass);

  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index:1000;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* PRELOADER */

#preloader{
  position:fixed;
  inset:0;

  background:#fff;

  z-index:99999;

  transition:opacity .25s ease;
}

html.dark #preloader{
  background:#0f0f0f;
}

#preloader.hide{
  opacity:0;
  pointer-events:none;
}

/* MENU */

.menu-nav{
  position:absolute;

  top:50%;
  left:50%;

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

  width:min(700px,85vw);

  display:flex;
  flex-direction:column;
  gap:26px;
}

.menu-nav a{
  text-decoration:none;
  color:var(--text);

  font-size:clamp(2rem,5vw,4.6rem);
  font-weight:700;

  letter-spacing:-0.04em;

  text-align:left;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.menu-nav a:hover{
  opacity:.45;
  transform:translateX(8px);
}

/* CONTENT */

.container{
  max-width:720px;

  padding:100px 40px;

  margin:0 auto;
}

.top-bar{
  margin-bottom:80px;
}

.toggle{
  background:none;
  border:none;

  color:var(--text);

  cursor:pointer;

  font-size:.92rem;
  font-weight:500;

  font-family:inherit;

  transition:color .3s ease;
}

h1{
  font-size:clamp(4rem,10vw,7rem);

  line-height:.9;

  letter-spacing:-0.08em;

  margin-bottom:28px;
}

.intro{
  font-size:1.15rem;

  color:var(--muted);

  line-height:1.8;

  max-width:520px;
}

.section{
  margin-top:100px;
}

.section-title{
  font-size:.78rem;

  text-transform:uppercase;

  letter-spacing:.25em;

  margin-bottom:20px;
}

.section p{
  color:var(--muted);
}

.video{
  margin-top:28px;
}

iframe{
  width:100%;

  aspect-ratio:16/9;

  border:none;

  border-radius:18px;
}

/* FOOTER */

.footer{
  margin-top:120px;

  padding-top:28px;

  color:var(--muted);

  font-size:.95rem;

  position:relative;
}

.footer::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--separator),
      transparent
    );
}

/* FOOTER IMAGE */

.footer-stop{
  display:block;

  width:650px;

  height:auto;

  border-radius:20px;

  margin:48px auto 0;

  user-select:none;
  pointer-events:none;

  opacity:.9;

  transition:
    transform .35s ease,
    opacity .35s ease,
    filter .35s ease;
}

.footer-stop:hover{
  transform:translateY(-3px);

  opacity:1;
}

html.dark .footer-stop{
  filter:brightness(.9) contrast(1.05);
}

/* MOBILE */

@media(max-width:768px){

  .container{
    padding:80px 24px;
  }

  .menu-btn{
    top:18px;
    right:18px;

    width:48px;
    height:48px;
  }

  .menu-nav{
    width:85vw;
  }

  .menu-nav a{
    font-size:2.4rem;
  }

  .footer-stop{
    width:400px;

    max-width:100%;

    margin-top:36px;

    border-radius:20px;
  }

}