:root { color-scheme: dark; --ink:#f5f7fb; --muted:#a7b0c2; --bg:#0b1020; --panel:#121a2d; --panel-2:#17223a; --line:#263352; --accent:#79e7c5; --accent-2:#8aa7ff; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 85% -10%, #253563 0, transparent 34rem), var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header, .site-footer { width:min(var(--max), calc(100% - 3rem)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-header { min-height:78px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.75rem; color:var(--ink); font-weight:700; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--accent); border-radius:10px; color:var(--accent); font-size:.76rem; letter-spacing:.04em; }
nav { display:flex; flex-wrap:wrap; gap:1.35rem; }
nav a { color:var(--muted); font-size:.95rem; }
nav a.active, nav a:hover { color:var(--ink); text-decoration:none; }
main { width:min(var(--max), calc(100% - 3rem)); margin:auto; }
.hero { padding:clamp(5rem, 13vw, 9.5rem) 0 6rem; max-width:850px; }
.eyebrow, .card-kicker { margin:0 0 .75rem; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:750; }
h1, h2, h3, p { margin-top:0; }
h1 { max-width:900px; margin-bottom:1.35rem; font-size:clamp(2.9rem, 7vw, 6.2rem); line-height:1.02; letter-spacing:-.065em; }
h2 { font-size:clamp(1.7rem, 3vw, 2.45rem); line-height:1.1; letter-spacing:-.04em; }
h3 { margin-bottom:.15rem; font-size:1.08rem; line-height:1.25; }
.lede { max-width:650px; color:var(--muted); font-size:clamp(1.12rem, 2vw, 1.35rem); line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.05rem; border-radius:999px; font-weight:700; }
.button:hover { text-decoration:none; transform:translateY(-1px); }
.button-primary { background:var(--accent); color:#07131a; }
.button-secondary { border:1px solid var(--line); color:var(--ink); background:rgba(18,26,45,.6); }
.quick-links { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-bottom:7rem; }
.info-card { display:flex; flex-direction:column; min-height:185px; padding:1.4rem; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg, rgba(23,34,58,.92), rgba(18,26,45,.75)); color:var(--ink); }
.info-card:hover { border-color:var(--accent-2); text-decoration:none; }
.info-card strong { margin-bottom:.65rem; font-size:1.25rem; }
.info-card > span:last-child { color:var(--muted); line-height:1.45; }
.intro-section, .callout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; padding:4rem 0; border-top:1px solid var(--line); }
.intro-section p:last-child, .callout p:last-child { color:var(--muted); font-size:1.08rem; }
.site-footer { min-height:100px; margin-top:4rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.page-shell { padding:5rem 0 2rem; }
.page-shell.narrow { max-width:820px; }
.page-intro { padding-bottom:3rem; }
.page-intro h1 { font-size:clamp(2.8rem, 6vw, 5rem); }
.app-group { padding:2.2rem 0 1rem; border-top:1px solid var(--line); }
.app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
.app-card { display:flex; align-items:center; gap:.9rem; min-height:132px; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); transition:border-color .2s ease, transform .2s ease, background .2s ease; }
.app-card:hover { border-color:var(--accent-2); background:var(--panel-2); text-decoration:none; transform:translateY(-2px); }
.app-card img { width:58px; height:58px; flex:0 0 58px; border-radius:14px; object-fit:cover; box-shadow:0 5px 14px rgba(0,0,0,.22); }
.app-card-content { min-width:0; }
.app-card span { color:var(--muted); font-size:.9rem; }
.app-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .65rem; margin-top:.35rem; }
.status-badge { display:inline-flex; align-items:center; width:max-content; padding:.18rem .52rem; border-radius:999px; font-size:.72rem !important; font-weight:750; letter-spacing:.04em; }
.status-available { background:rgba(121,231,197,.14); color:var(--accent) !important; }
.status-coming { background:rgba(138,167,255,.14); color:var(--accent-2) !important; }
.status-internal { background:rgba(255,190,112,.14); color:#ffbe70 !important; }
.app-detail { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; max-width:900px; padding-bottom:3.5rem; }
.app-detail-icon { width:112px; height:112px; border-radius:26px; object-fit:cover; box-shadow:0 14px 30px rgba(0,0,0,.3); }
.app-detail h1 { margin-bottom:.65rem; font-size:clamp(2.6rem, 6vw, 5rem); }
.app-detail .lede { margin-bottom:0; }
.app-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.app-facts { display:flex; flex-wrap:wrap; gap:.65rem; margin:0; padding:0; list-style:none; }
.app-facts li { padding:.42rem .72rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.9rem; }
.notice { padding:1rem 1.15rem; border-left:3px solid var(--accent-2); background:rgba(138,167,255,.08); color:#d5dbea; }
.content-section { padding:1.8rem 0; border-top:1px solid var(--line); }
.content-section h2 { font-size:1.55rem; margin-bottom:.75rem; }
.content-section p, .content-section li { color:#d5dbea; }
.content-section ul { padding-left:1.25rem; }
.callout { margin-top:3rem; align-items:center; }
@media (max-width:760px) { .site-header, .site-footer, main { width:min(var(--max), calc(100% - 2rem)); } .site-header { min-height:68px; } nav { gap:.8rem; } nav a { font-size:.88rem; } .hero { padding:4.8rem 0 4.5rem; } .quick-links, .intro-section, .callout { grid-template-columns:1fr; gap:1rem; } .quick-links { padding-bottom:4.5rem; } .intro-section, .callout { padding:2.8rem 0; } .app-grid { grid-template-columns:repeat(2,1fr); } .app-detail { grid-template-columns:1fr; } .app-detail-icon { width:88px; height:88px; border-radius:22px; } .site-footer { flex-wrap:wrap; padding:1.3rem 0; gap:.5rem 1rem; } }
@media (max-width:440px) { .brand span:last-child { max-width:145px; line-height:1.1; } .app-grid { grid-template-columns:1fr; } h1 { font-size:2.8rem; } }