:root{
  --fg:#ffffff;
  --muted:rgba(255,255,255,.85);
  --stroke:rgba(255,255,255,.45);
  --glass:rgba(255,255,255,.08);
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  height:100%;
}

.inline-link {
  text-decoration: underline;
  color: inherit;
}

.inline-link:hover,
.inline-link:active,
.inline-link:focus,
.inline-link:visited {
  color: inherit;
  text-decoration: underline;
}

body{
  background:#ffffff;
  font-family:"DM Mono", monospace;
  font-weight:300;
  line-height:1.6; /* ↑ increased for better desktop readability */
  color:var(--fg);
}

.page{
  min-height:100vh;
  padding:2vh 2vw;
}

.bg-frame{
  height:94vh;
  border-radius:1.5rem;
  background-image:
    url("https://cdn.prod.website-files.com/689aca72ffbf1fc9a7109271/689acabd353b93717165c05d_bg.avif");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Navigation */

.nav{
  padding:20px 24px;
}

.nav-bar{
  width:100%;
  max-width:calc(100% - 0px);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;

  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav-logo img{
  height:32px;
  width:auto;
  display:block;
}

/* Content */

.wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 32px;
}

.hero{
  width:100%;
  max-width:1200px;
  text-align:left;
}

h1{
  font-size:clamp(32px, 4.8vw, 52px);
  font-weight:300;
  line-height:1.1;
  margin:0 0 24px 0;
  max-width:1000px;
}

p{
  font-size:17px;
  line-height:1.5; 
  color:var(--muted);
  max-width:900px;
  margin:0 0 32px 0;
}

.cta{
  display:inline-flex;
  align-items:center;
  padding:14px 20px;
  border-radius:10px;
  border:1px solid var(--stroke);
  color:var(--fg);
  text-decoration:none;
  font-size:14px;
  font-weight:300;
  letter-spacing:0.02em;
  text-transform:uppercase;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.cta:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.6);
  transform:translateY(-1px);
}

/* Mobile body text */
@media (max-width: 768px){
  h1{
      line-height:1;
  }
  p{
    font-size:14px; 
    line-height:1.3; 
  }
}