:root { --paper:#f5f8fb; --ink:#14243a; --muted:#5c6c7d; --green:#147d99; --green-dark:#113e64; --lime:#c3eaf0; --line:#dbe6ef; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.65; }
.site-header,main,footer { max-width:1120px; margin:0 auto; padding-left:32px; padding-right:32px; }
.site-header { position:relative; padding-top:25px; padding-bottom:25px; display:flex; align-items:center; justify-content:space-between; }.site-header::before { content:""; position:absolute; z-index:-1; inset:0 calc((100vw - 100%) / -2); background:rgba(249,252,255,.94); border-bottom:1px solid rgba(20,125,153,.14); }
.brand { color:var(--ink); font-size:1.05rem; font-weight:850; letter-spacing:-.035em; text-decoration:none; }.brand span { color:var(--green); }.site-header p { margin:0; color:var(--muted); font-size:.78rem; font-weight:700; }
.hero { position:relative; isolation:isolate; min-height:590px; overflow:hidden; padding:122px 70px; border-bottom:1px solid var(--line); }.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(245,248,251,.98) 0%,rgba(245,248,251,.9) 34%,rgba(245,248,251,.22) 62%,rgba(245,248,251,.03) 100%); }.hero-copy { position:relative; z-index:1; max-width:570px; }.eyebrow { margin:0 0 14px; color:var(--green); font-size:.73rem; font-weight:850; letter-spacing:.13em; }.hero h1 { max-width:700px; margin:0 0 24px; font-size:clamp(3rem,6vw,5.2rem); line-height:1.08; letter-spacing:-.075em; }.lead { max-width:510px; margin:0; color:var(--muted); font-size:1.06rem; }.hero-visual { position:absolute; inset:0; z-index:-2; margin:0; }.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.tools { padding:76px 0 86px; }.section-heading { margin-bottom:25px; }.section-heading h2 { margin:0; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.06em; }
.tool-card { position:relative; display:grid; grid-template-columns:88px minmax(0,1fr) 44px; align-items:center; gap:18px; padding:32px; color:var(--ink); background:var(--white); border:1px solid rgba(20,125,153,.15); border-radius:18px; box-shadow:0 12px 30px rgba(17,62,100,.08); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }.tool-card:hover { transform:translateY(-3px); box-shadow:0 18px 36px rgba(17,62,100,.13); }.tool-card:focus-visible { outline:3px solid var(--green); outline-offset:4px; }.tool-number { align-self:start; color:var(--green); font-size:.78rem; font-weight:850; letter-spacing:.11em; }.tool-category { margin:0 0 5px; color:var(--green); font-size:.78rem; font-weight:800; }.tool-card h3 { margin:0 0 10px; font-size:clamp(1.35rem,3vw,2rem); line-height:1.25; letter-spacing:-.05em; }.tool-card div p:last-child { max-width:570px; margin:0; color:var(--muted); font-size:.9rem; }.arrow { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; color:var(--green-dark); background:var(--lime); font-size:1.3rem; font-weight:800; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:90px; }.principles article { padding:22px; border-top:2px solid var(--green); background:rgba(255,255,255,.58); }.principles span { color:var(--green); font-size:.74rem; font-weight:850; letter-spacing:.1em; }.principles h2 { margin:24px 0 7px; font-size:1.05rem; letter-spacing:-.03em; }.principles p { margin:0; color:var(--muted); font-size:.86rem; }
footer { display:flex; justify-content:space-between; gap:18px; padding-top:25px; padding-bottom:28px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; } footer p { margin:0; } footer nav { display:flex; flex-wrap:wrap; gap:14px; } footer a { color:var(--green); font-weight:750; text-underline-offset:3px; }
@media (max-width:760px) { .site-header,main,footer { padding-left:20px; padding-right:20px; }.hero { min-height:590px; padding:74px 28px 250px; }.hero::before { background:linear-gradient(180deg,rgba(245,248,251,.98) 0%,rgba(245,248,251,.9) 45%,rgba(245,248,251,.25) 75%,rgba(245,248,251,.05) 100%); }.hero-visual img { object-position:63% center; }.tool-card { grid-template-columns:1fr 42px; padding:24px; }.tool-number { grid-column:1 / -1; }.principles { grid-template-columns:1fr; padding-bottom:60px; }.principles article { padding:20px; } footer { display:block; } footer nav { margin-top:8px; } }