.brand-mark { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; font-weight:700; color:var(--sage-bg); background:linear-gradient(135deg,var(--sage-accent),var(--accent-2)); }
.header-tools { display:flex; gap:8px; align-items:center; }
.tool-btn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; font:inherit; font-size:14px; font-weight:600; color:var(--sage-fg); background:var(--code-bg); border:1px solid var(--code-border); border-radius:8px; cursor:pointer; }
.tool-btn:hover { border-color:var(--sage-accent); }
.tool-btn [data-lang-opt].is-active { color:var(--sage-accent); }
.hero { padding:110px 0 96px; background: radial-gradient(900px 480px at 85% 10%, rgba(var(--accent-rgb),0.12), transparent 65%), radial-gradient(700px 400px at 0% 100%, rgba(var(--accent-rgb),0.06), transparent 70%); }
.hero-title { margin-bottom:18px; font-size:clamp(38px,5.4vw,64px); letter-spacing:-0.025em; line-height:1.05; }
.hero-title .accent { color:var(--sage-accent); }
.hero-role { font-size:clamp(20px,2.2vw,26px); font-weight:600; margin-bottom:16px; }
.hero-sub { max-width:640px; margin-bottom:30px; font-size:19px; color:var(--sage-fg-soft); }
.hero .chips { margin-top:30px; }
.card ul.ticks { display:flex; flex-direction:column; gap:8px; font-size:15.5px; color:var(--sage-fg-soft); }
.card ul.ticks li { display:flex; gap:8px; }
.card ul.ticks svg { color:var(--sage-accent); margin-top:4px; }
.card .card-foot { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.client-grid .card { align-items:center; justify-content:center; font-size:20px; font-weight:700; min-height:96px; }
.contact-box { text-align:center; }
.site-footer { padding:28px 0; border-top:1px solid var(--code-border); font-size:14px; color:var(--code-muted); }
.site-footer .container { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (max-width: 960px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } .site-nav .nav-links { display:none; } }
@media (max-width: 620px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } .section { padding:64px 0; } .container { padding:0 18px; } .brand-text span { display:none; } }