:root{
  --paper:#F3F1EC;
  --ink:#1A1A1A;
  --ink2:rgba(0,0,0,.55);
  --line:rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight:400;
  letter-spacing:0;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ---------- Header (always clickable) ---------- */
.header{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px 48px;
  z-index:100;
}

.brand{
  font-size:12px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink2);
  cursor:pointer;
  user-select:none;
}

/* Top nav */
.nav{
  display:flex;
  gap:32px;
}

.navbtn{
  background:none;
  border:none;
  padding:0;
  font:inherit;

  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;

  color:var(--ink2);
  cursor:pointer;
}

.navbtn:hover{ color:var(--ink); }

/* ---------- Footer (always clickable) ---------- */
.footer{
  position:fixed;
  bottom:24px; left:0; right:0;
  text-align:center;
  z-index:100;
}

.footbtn{
  background:none;
  border:none;
  padding:0;
  font:inherit;

  font-size:12px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;

  color:var(--ink2);
  cursor:pointer;
  margin:0 14px;
}

.footbtn:hover{ color:var(--ink); }

/* ---------- Stage + Views ---------- */
.stage{
  position:relative;
  height:100vh;
}

/* Base hidden state */
.view{
  position:absolute;
  inset:0;
  height:100vh;
  padding:20px;

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

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition: opacity 1.25s cubic-bezier(0.33, 0.0, 0.2, 1);
  z-index:1;
}

/* Active view: visible */
.view.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Exiting: fade to 0 but remain visible until done */
.view.exiting{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}

/* ---------- Hero layout ---------- */
.center{
  text-align:center;
}

.logo{
  margin:0;
  font-size: clamp(62px, 9.2vw, 116px);
  font-weight:500;
  letter-spacing:.018em;
  text-transform:uppercase;
}

.tagline{
  margin-top: 28px;
  font-size: 15px;
  letter-spacing: .08em;
  color: rgba(0,0,0,.55);
  font-weight: 400;
}

/* ---------- Content layout ---------- */
.content{
  max-width:680px;
  width:100%;
  text-align:left;
}

.content h2{
  margin:0 0 24px 0;
  font-size:24px;
  font-weight:500;
  letter-spacing:.01em;
}

.content p{
  margin:0 0 16px 0;
  font-size:15px;
  line-height:1.85;
  color:var(--ink2);
  letter-spacing:.003em;
}

.content a{
  color:var(--ink);
  text-decoration:none;
}
.content a:hover{ opacity:.8; }

.big{
  font-size:18px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
}

/* ---------- Legal minimal styling ---------- */
.legal h3{
  margin:24px 0 10px 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .header{ padding:24px 22px; }
  .nav{ gap:18px; }
  .footer{ bottom:18px; }
}

.navbtn.is-active,
.footbtn.is-active{
  color: var(--ink);
}
/* Hero: logo first, tagline second */
#hero .hero-logo,
#hero .hero-tagline{
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.33, 0.0, 0.2, 1);
}

/* when hero view becomes active */
#hero.active .hero-logo{
  opacity: 1;
  transition-delay: 0.15s;
}

#hero.active .hero-tagline{
  opacity: 1;
  transition-delay: 0.65s;
}