/* Same look as the nxpmi-auth gallery (/apps): deep sea navy, one accent (Nextport yellow)
   spent on focus and the hover rule only, 16:9 thumbnails with the text under them. */
:root { --sea:#0a1526; --deep:#0f1d33; --foam:#e9eef5; --mist:#9fb0c6; --line:#1d2d47; --accent:#f2c314; }
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme:dark; }
body { font-family:'Source Sans 3', 'Segoe UI', system-ui, sans-serif; background:var(--sea); color:var(--foam); min-height:100vh;
       font-size:16px; line-height:1.5;
       background-image: radial-gradient(1200px 500px at 10% -10%, #14305a 0%, transparent 60%); }
.frame { max-width:1280px; margin:0 auto; padding:0 clamp(16px, 4vw, 56px) 72px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 0 18px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:14px; }
.brand svg { height:24px; width:auto; color:#fff; }
.brand span { font-family:'Outfit', sans-serif; font-size:14px; letter-spacing:.02em; color:var(--mist); }
.brand span b { color:#fff; font-weight:500; }
.who { font-size:14px; color:var(--mist); display:flex; gap:14px; align-items:center; }
.who[hidden] { display:none; }
.who b { color:var(--foam); font-weight:500; }
button { font:inherit; cursor:pointer; }
.who button { background:none; border:0; color:var(--mist); border-bottom:1px solid transparent; padding:0 0 1px; }
.who button:hover, .who button:focus-visible { color:#fff; border-color:var(--accent); outline:none; }
.mast { margin:48px 0 36px; }
.mast h1 { font-family:'Outfit', sans-serif; font-weight:500; font-size:clamp(28px, 3.4vw, 42px); line-height:1.1; letter-spacing:-.01em; color:#fff; text-wrap:balance; max-width:22ch; }
.mast p { margin-top:12px; color:var(--mist); max-width:60ch; }
.fleet { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:34px 28px; }
.app { display:block; color:inherit; text-decoration:none; }
.app figure { position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--deep); border:1px solid var(--line); }
.app img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .35s ease; }
.app figure::after { content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--accent); transition:height .2s ease; }
.app:hover img, .app:focus-visible img { transform:scale(1.025); }
.app:hover figure::after, .app:focus-visible figure::after { height:3px; }
.app:focus-visible { outline:none; }
.app .cap { padding:14px 2px 0; }
.app h2 { font-family:'Outfit', sans-serif; font-weight:500; font-size:19px; color:#fff; letter-spacing:-.005em; }
.app p { margin-top:5px; color:var(--mist); font-size:15px; line-height:1.45; max-width:48ch; }
.app .go { display:inline-block; margin-top:8px; font-size:14px; color:var(--accent); opacity:0; transform:translateY(-2px); transition:opacity .2s, transform .2s; }
.app:hover .go, .app:focus-visible .go { opacity:1; transform:none; }
.note { max-width:56ch; margin:8px 0 20px; color:var(--mist); line-height:1.6; }
.note b { color:var(--foam); font-weight:500; }
.primary { background:var(--accent); color:var(--sea); border:0; border-radius:4px; padding:10px 22px; font-weight:500; }
.primary:focus-visible { outline:2px solid #fff; outline-offset:2px; }
[hidden] { display:none !important; }
footer { margin-top:64px; font-size:13px; color:var(--mist); opacity:.7; }
@media (max-width:640px) { header { flex-direction:column; align-items:flex-start; } .mast { margin:32px 0 24px; } .fleet { grid-template-columns:1fr; gap:28px; } }
@media (prefers-reduced-motion: reduce) { .app img, .app figure::after, .app .go { transition:none; } .app:hover img { transform:none; } }