:root {
  --ink: #111a27;
  --paper: #f5f2eb;
  --line: #c9c5bc;
  --orange: #fd6b42;
  --blue: #71a8ca;
  --lime: #c8e66b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
a { color: inherit; }
main, footer { max-width: 1440px; margin: auto; }
nav { height: 86px; padding: 0 5.5vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { text-decoration: none; font: 700 24px "DM Mono", monospace; letter-spacing: -2px; }
.wordmark span { color: var(--orange); }
.wordmark i { color: var(--blue); font-style: normal; }
.nav-link { font: 500 12px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; text-underline-offset: 5px; }
.nav-link span { color: var(--orange); margin-left: 7px; }
.hero { min-height: 635px; padding: 112px 12vw 80px; background: radial-gradient(circle at 78% 28%, rgba(113,168,202,.32), transparent 22rem), linear-gradient(115deg, transparent 62%, rgba(200,230,107,.24) 62%); border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; gap: 9px; align-items: center; margin: 0 0 28px; color: #52606c; font: 500 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.eyebrow span { display: block; width: 28px; height: 1px; background: var(--orange); }
h1, h2, h3, blockquote { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; }
h1 { max-width: 820px; font-size: clamp(58px, 8vw, 114px); line-height: .94; letter-spacing: -.07em; }
h1 em, blockquote em { color: var(--orange); font-style: italic; }
.lede { max-width: 570px; margin: 39px 0 30px; font-size: 19px; line-height: 1.48; color: #3d4854; }
.primary-action { display: inline-flex; gap: 16px; padding: 13px 17px; background: var(--ink); color: white; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.primary-action:hover { transform: translate(3px, -3px); background: var(--orange); }
.primary-action span { color: var(--lime); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.principles article { min-height: 167px; padding: 31px 5.5vw; border-right: 1px solid var(--line); }
.principles article:last-child { border-right: 0; }
.principles b, .index { color: var(--orange); font: 500 10px "DM Mono", monospace; letter-spacing: .08em; }
.principles p { max-width: 260px; margin: 23px 0 0; line-height: 1.35; }
.ecosystem { padding: 130px 5.5vw 145px; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 66px; }
.section-heading .eyebrow { margin-top: 12px; }
h2 { font-size: clamp(40px, 5.1vw, 70px); line-height: .99; letter-spacing: -.06em; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.product { min-height: 420px; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--ink); }
.product:last-child { border-right: 0; }
.prudence { background: #dce9ed; }
.ernest { background: #fbd2c5; }
.aos { background: #e4edc4; }
.product-head { display: flex; justify-content: space-between; align-items: center; }
.glyph { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 600 21px "Fraunces", serif; }
.product h3 { font-size: 43px; letter-spacing: -.05em; }
.product p { max-width: 300px; line-height: 1.45; color: #36404a; }
.product a { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(17,26,39,.6); font: 500 12px "DM Mono", monospace; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.product a:hover { color: var(--orange); }
.statement { padding: 134px 12vw 148px; background: var(--ink); color: var(--paper); }
.statement .eyebrow { color: #a8b4be; }
.statement blockquote { max-width: 940px; font-size: clamp(43px, 6vw, 83px); line-height: 1.02; letter-spacing: -.06em; }
footer { display: flex; align-items: center; justify-content: space-between; min-height: 112px; padding: 25px 5.5vw; border-top: 1px solid var(--line); font-size: 13px; }
footer p { color: #59636c; } footer > a:last-child { font: 500 11px "DM Mono", monospace; text-underline-offset: 4px; }
@media (max-width: 740px) {
  nav { padding: 0 7vw; } .hero { min-height: 570px; padding: 86px 7vw 65px; background: radial-gradient(circle at 88% 15%, rgba(113,168,202,.3), transparent 12rem); }
  .principles, .section-heading, .products { grid-template-columns: 1fr; } .principles article { min-height: 124px; padding: 25px 7vw; border-right: 0; border-bottom: 1px solid var(--line); } .principles article:last-child { border-bottom: 0; }
  .ecosystem { padding: 85px 7vw; } .section-heading { gap: 16px; margin-bottom: 45px; } .product { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--ink); } .product:last-child { border-bottom: 0; }
  .statement { padding: 88px 7vw; } footer { padding: 25px 7vw; gap: 18px; align-items: flex-start; flex-direction: column; }
}