@import url('./brand/tokens.css');
:root { color-scheme: light dark; --bg:var(--siebly-bg-light); --surface:var(--siebly-surface-light); --text:var(--siebly-text-light); --muted:var(--siebly-muted-light); --line:var(--siebly-border-light); --blue:var(--siebly-blue-light); --tint:var(--siebly-tint-light); }
@media (prefers-color-scheme:dark) { :root { --bg:var(--siebly-bg-dark); --surface:var(--siebly-surface-dark); --text:var(--siebly-text-dark); --muted:var(--siebly-muted-dark); --line:var(--siebly-border-dark); --blue:var(--siebly-blue-dark); --tint:var(--siebly-tint-dark); } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--siebly-font); }
a { color:var(--blue); text-decoration:none; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
header { height:72px; border-bottom:1px solid var(--line); padding:0 40px; display:flex; align-items:center; justify-content:space-between; }
header img { display:block; } nav { display:flex; gap:26px; font-size:14px; } nav a { color:var(--muted); }
main { max-width:1120px; margin:0 auto; padding:68px 32px 50px; }
.eyebrow { margin:0 0 13px; font-size:12px; letter-spacing:1.8px; color:var(--blue); font-weight:650; }
h1 { margin:0; font-size:44px; line-height:1.2; letter-spacing:-1.5px; } .intro { color:var(--muted); font-size:19px; margin:22px 0 38px; }
.sdk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sdk-card { display:block; color:var(--text); padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:12px; transition:border-color .15s,transform .15s; }
.sdk-card:hover { border-color:var(--blue); transform:translateY(-2px); }
.card-top { display:flex; align-items:center; justify-content:space-between; } .sdk-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:var(--tint); color:var(--blue); font-weight:700; }
.version { color:var(--muted); font-size:12px; } .sdk-card h2 { font-size:23px; margin:20px 0 4px; letter-spacing:-.5px; }
code { font-size:12px; } .sdk-card p { color:var(--muted); font-size:14px; margin:18px 0 24px; } .card-link { font-size:14px; font-weight:600; color:var(--blue); }
section { margin-top:42px; border-top:1px solid var(--line); padding-top:24px; } section h2 { font-size:20px; margin:0; } section p { max-width:730px; color:var(--muted); font-size:15px; margin:8px 0 14px; }
.resources { display:flex; gap:24px; font-size:14px; } footer { border-top:1px solid var(--line); text-align:center; color:var(--muted); padding:22px; font-size:12px; }
@media(max-width:760px) { header { padding:0 24px; } nav { gap:16px; } main { padding:40px 24px; } h1 { font-size:34px; } .intro { font-size:17px; } .sdk-grid { grid-template-columns:1fr; } }