:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #eaf7ee;
  background: #071512;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 72% 12%, #18443a 0, transparent 36%), #071512;
  color: #eaf7ee;
}
a { color: inherit; text-decoration: none; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px clamp(20px, 5vw, 80px);
  border-bottom: 1px solid #31564a;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}
.wordmark small {
  display: block;
  margin-top: 4px;
  color: #9af1db;
  font-size: .56rem;
  letter-spacing: .27em;
}
.brand-icon {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px #79ebcf55);
}
.back { color: #b7d2c5; font-size: .85rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: center;
  max-width: 1500px;
  min-height: 680px;
  margin: auto;
  padding: 70px clamp(20px, 5vw, 80px);
}
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-visual {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.eyebrow {
  color: #e2bd7c;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
}
.hero h1 {
  margin: 18px 0 28px;
  font-size: clamp(3.3rem, 7.5vw, 7.5rem);
  line-height: .93;
  letter-spacing: -.065em;
}
.hero h1 em { font-style: normal; color: #9af1db; }
.lede {
  max-width: 640px;
  color: #b7cec2;
  font-size: clamp(1.03rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }
.hero-visual .actions { justify-content: center; width: 100%; margin: 0; }
.primary, .secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.primary { border: 1px solid #9af1db; background: #9af1db; color: #08251e; }
.secondary { border: 1px solid #5e8172; background: #15342b; color: #eaf7ee; }
.truth, .small { max-width: 590px; color: #8daea0; font-size: .86rem; line-height: 1.55; }
.hero-brand {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  justify-self: center;
  isolation: isolate;
}
.hero-brand img {
  display: block;
  width: min(100%, 760px);
  height: auto;
  filter: drop-shadow(0 22px 38px #0007);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1500px;
  margin: auto;
  padding: 0 clamp(20px, 5vw, 80px) 100px;
}
.steps article { padding: 28px; border: 1px solid #31584a; border-radius: 20px; background: #102920; }
.steps b { color: #e2bd7c; letter-spacing: .13em; }
.steps h2 { margin: 13px 0; font-size: 1.5rem; }
.steps p { color: #acc8b9; line-height: 1.5; }
.membership {
  display: grid;
  grid-template-columns: 1fr minmax(300px, .8fr);
  gap: 50px;
  max-width: 1500px;
  margin: auto;
  padding: 70px clamp(20px, 5vw, 80px) 100px;
  border-top: 1px solid #2d5042;
}
.membership h2 { margin: 12px 0; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; }
.membership p { max-width: 620px; color: #b7cec2; line-height: 1.65; }
.membership form {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px;
  border: 1px solid #577662;
  border-radius: 22px;
  background: #102920;
}
.membership label { font-size: .85rem; font-weight: 700; }
.membership input {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  padding: 0 13px;
  border: 1px solid #5a7b6a;
  border-radius: 10px;
  outline: none;
  color: #fff;
  background: #092019;
  font: inherit;
}
.membership input:focus { border-color: #9af1db; }
.membership button { width: 100%; }
.membership button:disabled { opacity: .55; }
.membership #access-status { min-height: 24px; margin: 4px 0 0; color: #9af1db; font-size: .9rem; }
footer { padding: 25px clamp(20px, 5vw, 80px); border-top: 1px solid #2d5042; color: #8daea0; font-size: .8rem; }
footer a { color: #9af1db; }

@media (max-width: 820px) {
  .hero, .membership { grid-template-columns: 1fr; }
  .hero { min-height: auto; gap: 20px; padding-top: 30px; }
  .hero-copy, .hero-visual { grid-column: 1; grid-row: auto; }
  .hero-brand { max-width: 640px; }
  .hero-visual .actions a { flex: 1 1 180px; }
  .steps { grid-template-columns: 1fr; padding-bottom: 55px; }
  .membership { gap: 25px; }
  .back { font-size: .7rem; }
}