@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --cream:#f7f2e7;
  --cream2:#fffaf1;
  --navy:#061b36;
  --green:#073f27;
  --green2:#0c5a37;
  --gold:#c6a04f;
  --ink:#142235;
  --muted:#617064;
  --line:rgba(7,63,39,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
}
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 42px;
  z-index:10;
  background:rgba(255,250,241,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(7,63,39,.08);
}
.brand img{height:56px; width:auto; display:block}
nav{display:flex; gap:34px}
nav a{
  color:var(--green);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:800;
}
.top-cta,.button,button{
  border-radius:999px;
  padding:14px 22px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
}
.top-cta,.primary,button{
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  box-shadow:0 12px 30px rgba(7,63,39,.18);
}
.secondary{
  color:white;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.10);
}
.hero{
  min-height:100vh;
  padding:150px 7vw 80px;
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:48px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(6,27,54,.88), rgba(6,27,54,.45), rgba(7,63,39,.15)),
    url('premium-preview.png');
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 42%, rgba(198,160,79,.22), transparent 30%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.22));
}
.hero-copy,.hero-card{position:relative; z-index:1}
.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:900;
  font-size:12px;
}
h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:.96;
  margin:0;
}
h1{
  color:white;
  font-size:clamp(54px,8vw,112px);
  letter-spacing:.01em;
  text-shadow:0 3px 28px rgba(0,0,0,.28);
}
h1 span{color:#d8e3c8}
.lead{
  color:rgba(255,255,255,.92);
  max-width:660px;
  font-size:22px;
  line-height:1.65;
  margin:28px 0 34px;
}
.hero-buttons{display:flex; gap:14px; flex-wrap:wrap}
.hero-card{
  justify-self:end;
  max-width:420px;
  background:linear-gradient(145deg, rgba(7,63,39,.96), rgba(5,37,23,.98));
  color:white;
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  padding:38px;
  box-shadow:0 30px 80px rgba(0,0,0,.32);
}
.badge{
  display:inline-block;
  border:1px solid rgba(198,160,79,.55);
  color:#f2d37b;
  border-radius:999px;
  padding:8px 13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:900;
}
.hero-card h2{font-size:56px; margin:22px 0 12px;color:white}
.hero-card p{line-height:1.6}
.mini-specs{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.mini-specs span{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}
.section{
  padding:92px 7vw;
  max-width:1220px;
  margin:0 auto;
}
.centered{text-align:center}
.section h2,.product-band h2,.story h2,.partners h2,.waitlist h2{
  color:var(--green);
  font-size:clamp(40px,5vw,70px);
  margin:10px auto 28px;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:42px;
}
.steps article,.partner-cards article{
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
  border-radius:28px;
  padding:34px;
  box-shadow:0 22px 60px rgba(6,27,54,.06);
}
.steps span{
  color:var(--gold);
  font-weight:900;
  letter-spacing:.18em;
}
.steps h3,.partner-cards h3{
  color:var(--navy);
  font-size:38px;
  margin:16px 0 8px;
}
.steps p,.product-band p,.story p,.partners p,.waitlist p{
  font-size:18px;
  line-height:1.7;
  color:#34453d;
}
.product-band{
  margin:20px auto;
  max-width:1220px;
  padding:70px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:54px;
  align-items:center;
  background:linear-gradient(145deg,#fffaf1,#f0eadc);
  border:1px solid rgba(198,160,79,.25);
  border-radius:42px;
  box-shadow:0 24px 70px rgba(6,27,54,.06);
}
.product-band ul{
  margin:0;
  padding:0;
  list-style:none;
}
.product-band li{
  padding:18px 0 18px 34px;
  border-bottom:1px solid rgba(7,63,39,.12);
  position:relative;
  font-weight:700;
}
.product-band li:before{
  content:"";
  width:10px;height:10px;
  background:var(--gold);
  border-radius:50%;
  position:absolute;
  left:4px; top:25px;
}
.use-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:32px;
}
.use-grid div{
  min-height:106px;
  display:flex;
  align-items:end;
  justify-content:center;
  padding:20px;
  border-radius:24px;
  color:white;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:
    linear-gradient(to top, rgba(6,27,54,.85), rgba(7,63,39,.15)),
    radial-gradient(circle at top, rgba(198,160,79,.35), transparent 50%);
  box-shadow:0 18px 42px rgba(6,27,54,.12);
}
.story{
  margin-top:30px;
  padding:100px 7vw;
  background:
    linear-gradient(90deg, rgba(255,250,241,.94), rgba(255,250,241,.72)),
    radial-gradient(circle at right, rgba(7,63,39,.2), transparent 40%);
}
.story div,.partners>div:first-child{
  max-width:860px;
}
.statement{
  color:var(--green)!important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.partners{
  padding:92px 7vw;
  max-width:1220px;
  margin:0 auto;
}
.partner-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:36px;
}
.waitlist{
  margin:20px auto 80px;
  max-width:1040px;
  text-align:center;
  padding:74px 38px;
  border-radius:42px;
  color:white;
  background:linear-gradient(145deg,var(--green),#032516);
  box-shadow:0 30px 80px rgba(7,63,39,.22);
}
.waitlist h2{color:white}
.waitlist p{color:rgba(255,255,255,.82);max-width:700px;margin:0 auto}
form{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:32px;
}
input{
  min-width:240px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);
  color:white;
  border-radius:999px;
  padding:16px 18px;
  font-size:16px;
}
input::placeholder{color:rgba(255,255,255,.7)}
button{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
  cursor:pointer;
  font-size:16px;
}
footer{
  text-align:center;
  padding:48px 20px;
  background:#042818;
  color:white;
}
footer img{
  width:230px;
  max-width:70%;
  filter:brightness(1.3);
  border-radius:18px;
}
footer p{margin:10px 0}
.small{opacity:.72;font-size:13px}

@media(max-width:900px){
  .site-header{height:auto; padding:12px 18px}
  nav{display:none}
  .brand img{height:46px}
  .top-cta{padding:11px 14px;font-size:13px}
  .hero{grid-template-columns:1fr; padding:126px 24px 58px}
  .hero-card{justify-self:start}
  .lead{font-size:19px}
  .steps,.product-band,.use-grid,.partner-cards{grid-template-columns:1fr}
  .product-band{padding:38px 26px;margin:20px 18px}
  .section,.partners{padding:70px 24px}
  .use-grid div{min-height:82px}
}