/* The apps portfolio: a quiet shelf where each app brings its own world. System fonts; light and dark. */
:root{--ground:#eef1f4;--card:#ffffff;--ink:#14191f;--soft:#47525e;--muted:#5d6874;--line:#d9dfe6;--accent:#2f5f8a;--shadow:0 30px 60px -36px rgba(20,32,48,.45);color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ground:#0f1317;--card:#171d24;--ink:#eef2f6;--soft:#b9c3cd;--muted:#97a3af;--line:#26303a;--accent:#9cc3e6;--shadow:0 30px 60px -36px rgba(0,0,0,.8);color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;line-height:1.5}
a{color:var(--accent)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.top{display:flex;justify-content:flex-end;padding-block:22px}
.top a{color:var(--soft);text-decoration:none;font-weight:600;font-size:15px}
.top a:hover{color:var(--ink)}
.hero{padding-block:clamp(40px,9vw,110px) clamp(48px,8vw,96px)}
.eyebrow{margin:0 0 18px;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin:0;font-family:ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;font-weight:700;font-size:clamp(38px,6.6vw,76px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;max-width:13em}
.hero p{margin:26px 0 0;max-width:600px;font-size:clamp(17px,2vw,20px);color:var(--soft)}
.label{margin:0 0 20px;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.apps{display:grid;gap:clamp(28px,4vw,44px);padding-bottom:clamp(64px,10vw,120px)}
.app{background:var(--card);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.scene{aspect-ratio:21/9;width:100%;object-fit:cover}
.body{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;padding:0 clamp(22px,4vw,44px) clamp(26px,4vw,40px)}
.icon{width:clamp(92px,12vw,124px);height:auto;margin-top:calc(clamp(92px,12vw,124px) * -.42);filter:drop-shadow(0 8px 14px rgba(20,32,48,.35));grid-row:span 2}
.name{margin:18px 0 0;font-family:ui-rounded,-apple-system,"SF Pro Rounded",system-ui,sans-serif;font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.015em}
.tagline{margin:0;color:var(--muted);font-weight:600}
.text{grid-column:1/-1;margin:18px 0 0;max-width:680px;font-size:17px;color:var(--soft)}
.meta{grid-column:1/-1;margin:6px 0 0;font-size:14px;color:var(--muted)}
.actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.button{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:14px;font-weight:600;font-size:16px;text-decoration:none}
.primary{background:var(--ink);color:var(--ground)}
.secondary{border:1px solid var(--line);color:var(--ink)}
.button:hover{opacity:.88}
.button:focus-visible,.top a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.foot{border-top:1px solid var(--line);padding-block:28px 40px;font-size:14px;color:var(--muted)}
.lost{padding-block:clamp(60px,12vw,140px)}
.lost h1{margin:0 0 12px;font-family:ui-rounded,-apple-system,system-ui,sans-serif;font-size:clamp(34px,5vw,52px)}
@media (max-width:560px){.body{grid-template-columns:1fr}.icon{grid-row:auto}.name{margin-top:12px}}