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

:root
{
  --gold:#f5c518;
  --bg:#050505;
  --grid:rgba(245,197,24,.03);
}

html
{
  scroll-behavior:smooth;
  font-size:16px;
}

body
{
  font-family:'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection
{
  background:var(--gold);
  color:var(--bg);
}

.grid-bg
{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
}

.content
{
  position:relative;
  z-index:10;
}

section
{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 48px;
  position:relative;
}

.hero
{
  height:100vh;
  flex-direction:column;
  text-align:center;
}

.hero-logo
{
  max-width:clamp(280px,50vw,700px);
  height:auto;
  opacity:0;
  animation:slideUp .8s ease forwards .4s;
}

.panel-section
{
  min-height:100vh;
}

.panel
{
  padding:28px 48px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-align:center;
}

.panel-text
{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size:1rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#ffffff;
  font-weight:800;
}

.reveal
{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal.visible
{
  opacity:1;
  transform:translateY(0);
}

@keyframes slideUp
{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:768px)
{
  section
  {
    padding:80px 20px;
  }
}