:root {
  --ink: #111318;
  --muted: #5f6773;
  --paper: #f7f7f4;
  --line: #d9dcd8;
  --ember: #df6428;
  --violet: #5362d8;
  --wash: #eceefb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--violet); }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand i { color: var(--ember); font-style: normal; }
.locale { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; font-size: .86rem; color: var(--muted); }
.locale a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.hero { padding: 88px 0 68px; max-width: 890px; }
.eyebrow { margin: 0 0 14px; color: var(--violet); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 790px; margin: 0; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .96; letter-spacing: -.075em; }
.lede { max-width: 700px; margin: 27px 0 0; color: #343943; font-size: clamp(1.08rem, 2vw, 1.34rem); }
.proof { display: inline-flex; margin-top: 26px; padding: 8px 12px; border: 1px solid #c8cdef; border-radius: 999px; background: var(--wash); color: #303b91; font-size: .88rem; font-weight: 700; }
.section { padding: 58px 0; border-top: 1px solid var(--line); }
.section h2 { max-width: 760px; margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.055em; line-height: 1.03; }
.section > p { max-width: 700px; margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 29px; }
.card { min-height: 245px; padding: 27px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.card:nth-child(3n+1) { border-top: 4px solid var(--ember); }
.card:nth-child(3n+2) { border-top: 4px solid var(--violet); }
.card h3 { margin: 0; font-size: 1.34rem; letter-spacing: -.04em; }
.card p { margin: 12px 0 0; color: #4e5662; }
.tag { display: inline-block; margin-top: 17px; color: var(--violet); font-size: .79rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 26px; }
.principle { padding: 20px 0; border-top: 2px solid var(--ink); }
.principle strong { display: block; font-size: 1.05rem; }
.principle span { display: block; margin-top: 7px; color: var(--muted); font-size: .94rem; }
.cta { padding: 50px 0 80px; border-top: 1px solid var(--line); }
.cta h2 { margin: 0 0 16px; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.06em; }
.cta a { display: inline-block; padding: 11px 16px; border-radius: 8px; background: var(--ink); color: white; font-weight: 700; text-decoration: none; }
.cta a:hover { background: var(--violet); color: white; }
footer { padding: 23px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
@media (max-width: 700px) { .top { align-items: flex-start; flex-direction: column; } .locale { justify-content: flex-start; } .hero { padding: 58px 0 50px; } .grid, .principles { grid-template-columns: 1fr; } .card { min-height: 0; } }