:root {
  --paper: #f2f0e9;
  --paper-deep: #e7e3d8;
  --ink: #16251f;
  --muted: #647068;
  --line: rgba(22, 37, 31, .16);
  --green: #0c805f;
  --green-bright: #20b982;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }

.nav-shell { display: flex; width: min(1380px, calc(100% - 72px)); min-height: 94px; margin: 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; letter-spacing: .18em; }
.wordmark span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 13px; font-weight: 750; }
.wordmark strong { font-size: 12px; }
.nav-shell nav { display: flex; align-items: center; gap: 34px; color: var(--muted); font-size: 12px; }
.nav-shell nav a { transition: color .18s; }
.nav-shell nav a:hover { color: var(--ink); }
.nav-cta { padding: 11px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }

main { overflow: hidden; }
.hero { display: grid; width: min(1380px, calc(100% - 72px)); min-height: 720px; margin: 0 auto; padding: 80px 0 95px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 60px; }
.eyebrow { margin: 0; color: var(--green); font-size: 10px; font-weight: 750; letter-spacing: .2em; }
.eyebrow span { display: inline-block; width: 26px; height: 1px; margin: 0 10px 3px 0; background: var(--green); }
.hero h1 { margin: 27px 0 32px; font-size: clamp(62px, 7vw, 112px); line-height: .96; letter-spacing: -.065em; font-weight: 580; }
.hero h1 em { color: var(--green); font-style: normal; }
.lead { max-width: 670px; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }
.primary-link { display: inline-flex; min-width: 220px; margin-top: 42px; padding: 17px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; }
.primary-link span { color: var(--green); font-size: 18px; }

.hero-visual { position: relative; width: min(520px, 100%); aspect-ratio: 1; justify-self: end; }
.hero-visual::before { position: absolute; inset: 4%; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(32,185,130,.16), rgba(32,185,130,.035) 45%, transparent 68%); }
.orbit { position: absolute; border: 1px solid rgba(12,128,95,.2); border-radius: 50%; }
.orbit-one { inset: 8%; }
.orbit-two { inset: 23%; border-style: dashed; }
.orbit::before, .orbit::after { position: absolute; width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 18px rgba(32,185,130,.55); }
.orbit-one::before { top: 12%; left: 17%; }.orbit-one::after { right: 7%; bottom: 29%; }
.orbit-two::before { top: -4px; left: 50%; }.orbit-two::after { right: 14%; bottom: 8%; }
.core { position: absolute; inset: 34%; display: grid; place-content: center; border: 1px solid rgba(12,128,95,.24); border-radius: 50%; text-align: center; background: rgba(242,240,233,.72); box-shadow: 0 24px 70px rgba(30,73,57,.1); backdrop-filter: blur(8px); }
.core > span { width: 8px; height: 8px; margin: 0 auto 13px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(12,128,95,.5); }
.core strong { font-size: 15px; }.core small { margin-top: 8px; color: var(--muted); font-size: 7px; letter-spacing: .17em; }
.signal { position: absolute; display: flex; padding: 10px 13px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(242,240,233,.82); font-size: 10px; backdrop-filter: blur(8px); }
.signal i { width: 5px; height: 5px; border-radius: 50%; background: var(--green-bright); }
.signal-a { top: 15%; right: 0; }.signal-b { bottom: 17%; left: 0; }

.principles { display: grid; width: min(1380px, calc(100% - 72px)); margin: 0 auto; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles article { min-height: 285px; padding: 40px; border-right: 1px solid var(--line); }
.principles article:last-child { border-right: 0; }
.number { color: var(--green); font-size: 10px; letter-spacing: .15em; }
.principles h2 { margin: 75px 0 14px; font-size: 24px; letter-spacing: -.03em; }
.principles p { max-width: 290px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.statement { width: min(1100px, calc(100% - 72px)); margin: 0 auto; padding: 150px 0 160px; }
.statement blockquote { max-width: 920px; margin: 35px 0 70px; font-size: clamp(36px, 5vw, 68px); line-height: 1.3; letter-spacing: -.05em; }
.statement-foot { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 11px; }
.statement-foot span { color: var(--green); font-weight: 750; letter-spacing: .17em; }
.statement-foot p { margin: 0; }

.footer { display: grid; min-height: 130px; padding: 0 max(36px, calc((100% - 1380px) / 2)); grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.wordmark.small span { width: 28px; height: 28px; font-size: 10px; }.wordmark.small strong { font-size: 10px; }
.footer p { text-align: center; }.footer > a { justify-self: end; }.footer > a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .nav-shell, .hero, .principles, .statement { width: min(100% - 40px, 720px); }
  .nav-shell nav a:not(.nav-cta) { display: none; }
  .hero { min-height: auto; padding: 80px 0; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(58px, 15vw, 92px); }.hero-visual { width: min(500px, 100%); justify-self: center; }
  .principles { grid-template-columns: 1fr; }.principles article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }.principles article:last-child { border-bottom: 0; }.principles h2 { margin-top: 45px; }
  .footer { padding: 32px 20px; grid-template-columns: 1fr; text-align: center; }.footer > * { justify-self: center !important; }.footer p { margin: 0; }
}

@media (max-width: 520px) {
  .nav-shell { min-height: 78px; }.hero { gap: 30px; }.hero h1 { font-size: 54px; }.lead { font-size: 14px; }.hero-visual { width: 110%; margin-left: -5%; }
  .principles article { padding: 32px 20px; }.statement { padding: 100px 0; }.statement blockquote { font-size: 35px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }