* {
  box-sizing: border-box;
  }

body {
margin: 0;
font-family: Inter, Arial, sans-serif;
background: #fff3df;
color: #15110d;
}

.page {
min-height: 100vh;
padding: 28px;
}

nav {
max-width: 1100px;
margin: 0 auto 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 900;
font-size: 24px;
}

.brand img {
width: 48px;
height: 48px;
border-radius: 14px;
}

.nav-btn {
background: #15110d;
color: #fff3df;
padding: 12px 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 800;
}

.hero {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 48px;
align-items: center;
}

.eyebrow {
color: #f4511e;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}

h1 {
font-size: clamp(52px, 9vw, 112px);
line-height: 0.92;
margin: 0;
letter-spacing: -0.07em;
}

.sub {
font-size: 26px;
line-height: 1.25;
color: #4b4038;
margin: 30px 0;
}

.waitlist {
display: flex;
gap: 12px;
margin-top: 24px;
margin-bottom: 18px;
max-width: 560px;
}

.waitlist input {
flex: 1;
padding: 16px 18px;
border-radius: 16px;
border: 2px solid #15110d;
background: #fffaf0;
font-size: 16px;
}

.waitlist button {
padding: 16px 22px;
border-radius: 16px;
border: none;
background: #f4511e;
color: white;
font-weight: 900;
cursor: pointer;
}

.waitlist button:hover {
opacity: 0.9;
}

.beta {
margin-top: 18px;
color: #6c5a50;
font-weight: 700;
}

.hero-card {
background: #15110d;
color: #fff3df;
border-radius: 36px;
padding: 42px;
text-align: center;
box-shadow: 0 30px 80px rgba(244, 81, 30, 0.25);
}

.hero-card img {
width: 160px;
border-radius: 36px;
}

.hero-card h2 {
font-size: 54px;
margin: 20px 0 8px;
}

.hero-card p {
color: #d8c8b8;
font-size: 18px;
}

.features {
max-width: 1100px;
margin: 80px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.features div {
background: #ffe3bd;
border: 1px solid rgba(21, 17, 13, 0.12);
padding: 26px;
border-radius: 28px;
}

.features h3 {
margin: 0 0 10px;
font-size: 24px;
}

.features p {
margin: 0;
color: #5b4c42;
line-height: 1.5;
}

.footer {
max-width: 1100px;
margin: 70px auto 0;
text-align: center;
color: #5b4c42;
font-weight: 700;
}

.footer a {
color: #f4511e;
text-decoration: none;
font-weight: 900;
}

@media (max-width: 800px) {
.hero,
.features {
grid-template-columns: 1fr;
}

nav {
margin-bottom: 45px;
}

.sub {
font-size: 21px;
}

.waitlist {
flex-direction: column;
}
}