:root {
  --ink: #12271e;
  --forest: #1f5b43;
  --sage: #dce9df;
  --paper: #f5f3ec;
  --line: rgba(18, 39, 30, .16);
  --muted: #5d6a63;
  --cyan: #bcefea;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.site-header {
  width: min(1240px, calc(100% - 48px));
  height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: white;
  background: var(--forest);
  font-family: Georgia, serif;
}
.text-link, .v1-link { font-size: .85rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.hero {
  min-height: calc(100svh - 92px);
  overflow: hidden;
  display: grid;
  align-content: center;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 150px) 0 58px;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  right: -14%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 45%, rgba(188, 239, 234, .8), rgba(220, 233, 223, .22) 48%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}
.hero-copy { max-width: 980px; }
.eyebrow { margin: 0 0 24px; color: var(--forest); font-size: .72rem; font-weight: 850; letter-spacing: .18em; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; text-wrap: balance; }
h1 { font-size: clamp(3.35rem, 8.2vw, 7.9rem); line-height: .91; }
h1 em { color: var(--forest); font-weight: 500; }
.lede { max-width: 690px; margin: 34px 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.6; }

.signup { margin-top: 38px; max-width: 720px; }
.signup > label { display: block; margin-bottom: 9px; font-size: .78rem; font-weight: 800; }
.signup-row { display: flex; border-bottom: 2px solid var(--ink); }
.signup input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 16px 8px 16px 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.signup input[type="email"]:focus { box-shadow: inset 0 -3px var(--cyan); }
.signup button {
  border: 0;
  padding: 16px 22px;
  color: white;
  background: var(--forest);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.signup button:hover { background: #143f2e; transform: translateY(-2px); }
.signup button:disabled { cursor: wait; opacity: .7; transform: none; }
.form-note, .form-status { margin: 10px 0 0; color: var(--muted); font-size: .77rem; }
.form-status { min-height: 1.2em; color: var(--forest); font-weight: 760; }
.form-status.error { color: #9d2d24; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-actions { margin-top: 16px; }
.launch-actions-large { margin-top: 42px; }
.action-primary {
  display: inline-block;
  padding: 15px 22px;
  color: white;
  background: var(--forest);
  font-size: .88rem;
  font-weight: 820;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.action-primary:hover { background: #143f2e; transform: translateY(-2px); }
.action-secondary { padding: 12px 0 7px; color: var(--forest); font-size: .84rem; font-weight: 820; text-decoration: none; border-bottom: 1px solid var(--forest); }

.launch-line { margin-top: clamp(72px, 10vw, 130px); display: flex; align-items: center; color: var(--forest); font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.launch-line i { display: block; flex: 1; height: 1px; margin: 0 20px; background: linear-gradient(90deg, var(--forest), var(--sage)); transform-origin: left; animation: route 1.3s .6s both ease-out; }

.architecture, .evolution, .final-cta { padding: clamp(92px, 12vw, 170px) max(24px, calc((100vw - 1240px) / 2)); }
.architecture { color: white; background: var(--ink); overflow: hidden; }
.architecture .eyebrow { color: var(--cyan); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.section-heading .eyebrow { grid-column: 1; }
.section-heading h2 { grid-column: 2; font-size: clamp(2.7rem, 5.3vw, 5.2rem); line-height: .98; }
.section-heading > p:last-child { grid-column: 2; max-width: 680px; margin: 26px 0 0; color: rgba(255,255,255,.62); font-size: 1.05rem; line-height: 1.65; }
.architecture > img { display: block; width: 100%; height: auto; margin-top: clamp(60px, 8vw, 110px); border-radius: 3px; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.architecture > img:hover { transform: scale(1.012); }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid rgba(255,255,255,.18); }
.proof p { margin: 0; padding: 26px 24px 0 0; }
.proof strong { display: block; color: var(--cyan); font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.proof span { display: block; margin-top: 5px; color: rgba(255,255,255,.6); font-size: .8rem; }

.evolution .section-heading > p:last-child { display: none; }
.evolution h2 { color: var(--forest); }
.evolution ol { list-style: none; padding: 0; margin: 76px 0 44px; border-top: 1px solid var(--line); }
.evolution li { display: grid; grid-template-columns: 90px 1fr; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.evolution li > span { color: var(--forest); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.evolution strong { font-family: Georgia, serif; font-size: clamp(1.45rem, 2.4vw, 2.15rem); font-weight: 500; }
.evolution li p { max-width: 660px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }

.final-cta { background: var(--sage); }
.final-cta h2 { max-width: 980px; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .96; }
.cta-link { display: inline-block; margin-top: 42px; padding-bottom: 8px; color: var(--forest); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 820; text-decoration: none; border-bottom: 2px solid var(--forest); transition: letter-spacing .25s ease; }
.cta-link:hover { letter-spacing: .01em; }

footer { min-height: 110px; padding: 34px max(24px, calc((100vw - 1240px) / 2)); display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.72); background: var(--ink); font-size: .78rem; }
footer a { text-decoration: none; }

.hero-copy > * { opacity: 0; transform: translateY(18px); animation: enter .7s both ease-out; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
@keyframes enter { to { opacity: 1; transform: none; } }
@keyframes route { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 720px) {
  .site-header, .hero { width: min(100% - 32px, 1240px); }
  .site-header { height: 74px; }
  .text-link { font-size: .72rem; }
  .hero { min-height: calc(100svh - 74px); padding-top: 64px; }
  h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .signup-row { display: block; border: 0; }
  .signup input[type="email"] { width: 100%; border-bottom: 2px solid var(--ink); }
  .signup button { width: 100%; margin-top: 12px; min-height: 52px; }
  .launch-actions { align-items: stretch; flex-direction: column; }
  .hero-actions { align-items: flex-start; }
  .action-primary, .action-secondary { display: block; width: 100%; text-align: center; }
  .hero-actions .action-secondary { width: auto; text-align: left; }
  .launch-line span { font-size: .57rem; letter-spacing: .08em; }
  .launch-line i { margin: 0 8px; }
  .section-heading { display: block; }
  .section-heading h2 { margin-top: 20px; }
  .section-heading > p:last-child { margin-top: 22px; }
  .architecture > img { width: 100%; max-width: 100%; margin-left: 0; }
  .proof { grid-template-columns: 1fr; }
  .proof p { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .evolution li { grid-template-columns: 46px 1fr; }
  footer { align-items: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-copy > * { opacity: 1; transform: none; }
}
