:root{
  --bg:#0a0a0a;
  --fg:#f5f5f5;
  --muted:#bdbdbd;
  --accent:#d9d9d9;
  --box:#121212;
  --border:#2a2a2a;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  overflow-x:hidden;
}
.layout{
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(360px,20vw) 1fr;
}
.stage{
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* border-right:1px solid var(--border); */
  /* background:radial-gradient(1000px 700px at 60% 40%,rgba(255,255,255,0.03),transparent 60%); */
}
.logo-wrapper{
  position:relative;
  width:min(560px,82%);
  aspect-ratio:1/1;
  overflow:visible;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,0.5));
  left: 10%
}
#logo{
  width:97.5%;
  height:97.5%;
  object-fit:contain;
  will-change:transform;
  transform-origin:70% 32%;
}
#hex {
  position: absolute;
  left: 25%;
  transform: scale(.45);
  top: -21%;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.content{
  min-height:100dvh;
  position:relative;
  padding:0;
}
.content-panel{
  background:var(--bg);
  display:flex;
  flex-direction:column;
}
.panel{
  /* background:linear-gradient(180deg,var(--box),#0f0f0f); */
  /* border-bottom:1px solid var(--border); */
  height:100vh; /* full viewport height */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:64px;
  /* box-shadow:0 10px 30px rgba(0,0,0,0.35); */
  opacity:0;
  transform:translateY(16px);
}
.panel-intro{opacity:1;transform:none;}
.panel h1{font-size:clamp(28px,3.6vw,54px);line-height:1.08;margin:4px 0 8px;}
.panel h2{margin:0 0 12px;}
.kicker{letter-spacing:0.14em;font-weight:600;color:var(--accent);text-transform:uppercase;font-size:12px;}
.muted{color:var(--muted);}
.form-grid{display:grid;gap:12px;width:100%;max-width:480px;}
.form-grid input,.form-grid textarea{
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0e0e0e;
  color:var(--fg);
}
.form-grid button{
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--fg);
  font-weight:600;
  cursor:pointer;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .stage{ height:48vh; position:relative; }
  .content{ padding-top:32px; }
  .panel{
    align-items: start;
    justify-content: flex-start;
  }
}