/* ═══════════════════════════════════════════════════════
   ANDARENO HUB — styles.css
   CX Immersive dark base · Apple Liquid Glass · Synthwave
   ═══════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Roboto', sans-serif;
  background: #050b14; color: #e8eaf0;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --bg:            #050b14;
  --surface:       rgba(10, 18, 32, 0.55);
  --surface-hover: rgba(16, 26, 46, 0.70);
  --border:        rgba(255,255,255,0.08);
  --border-hover:  rgba(255,255,255,0.16);

  --cyan:        #00e5ff;
  --cyan-dim:    rgba(0,229,255,0.15);
  --cyan-glow:   rgba(0,229,255,0.35);
  --magenta:     #ff2d78;
  --magenta-dim: rgba(255,45,120,0.15);
  --purple:      #b44dff;
  --purple-dim:  rgba(180,77,255,0.15);
  --purple-glow: rgba(180,77,255,0.35);
  --orange:      #e5a500;
  --orange-dim:  rgba(229,165,0,0.15);
  --orange-glow: rgba(229,165,0,0.35);
  --green:       #00ff9f;
  --green-dim:   rgba(0,255,159,0.15);
  --red:         #ff4444;
  --red-dim:     rgba(255,68,68,0.15);

  --font-display: 'Poppins', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --radius-card:  22px;
  --radius-btn:   12px;
  --blur:         28px;
  --ease:         cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ─── Background ─────────────────────────────────────── */
.bg-base {
  position:fixed; inset:0; z-index:-4;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, #0d1a2e 0%, #050b14 60%);
}
.bg-grid {
  position:fixed; inset:0; z-index:-3;
  background-image:
    linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 30%, transparent 80%);
}
.bg-glow { position:fixed; z-index:-2; border-radius:50%; filter:blur(120px); pointer-events:none; }
.bg-glow--cyan    { width:600px; height:400px; top:-100px; left:-150px; background:rgba(0,229,255,0.12); }
.bg-glow--magenta { width:500px; height:350px; top:20%; right:-100px; background:rgba(255,45,120,0.10); }
.bg-glow--purple  { width:700px; height:500px; bottom:-150px; left:50%; transform:translateX(-50%); background:rgba(180,77,255,0.08); }
.scanlines {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

/* ─── Header ─────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  height:64px; padding:0 24px;
  display:flex; align-items:center;
  background:rgba(5,11,20,0.75);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  backdrop-filter:blur(var(--blur)) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.header-inner { width:100%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:flex; align-items:baseline; gap:8px; line-height:1; }
.wordmark__main {
  font-family:var(--font-display); font-size:1.3rem; font-weight:900; letter-spacing:0.12em;
  background:linear-gradient(135deg,#fff 40%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.wordmark__sub { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.25em; color:var(--cyan); opacity:0.7; }
.header-status-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px var(--green),0 0 20px rgba(0,255,159,0.4);
  animation:pulse-dot 2.5s ease-in-out infinite;
}

/* ─── Announcement Banner ────────────────────────────── */
.announcement-banner {
  position:relative; z-index:90;
  padding:0 24px;
  animation:fadeDown 0.4s var(--ease) both;
}
.announcement-banner[hidden] { display:none; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.banner__inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; border-radius:var(--radius-card);
  -webkit-backdrop-filter:blur(var(--blur));
  backdrop-filter:blur(var(--blur));
  border:1px solid var(--border);
  margin-top:12px;
}

/* Banner types */
.announcement-banner--info    .banner__inner { background:rgba(0,229,255,0.08);  border-color:rgba(0,229,255,0.25); }
.announcement-banner--warning .banner__inner { background:rgba(229,165,0,0.08); border-color:rgba(229,165,0,0.25); }
.announcement-banner--critical .banner__inner{ background:rgba(255,45,120,0.08); border-color:rgba(255,45,120,0.3); }

.banner__icon { font-size:1.1rem; flex-shrink:0; line-height:1; }
.banner__message { flex:1; font-size:0.82rem; line-height:1.5; color:rgba(255,255,255,0.85); }
.banner__link {
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  color:var(--cyan); white-space:nowrap; flex-shrink:0;
  padding:3px 10px; border-radius:999px;
  border:1px solid rgba(0,229,255,0.3);
  transition:background 0.2s;
}
.banner__link:hover { background:var(--cyan-dim); }
.banner__link[hidden] { display:none; }
.banner__dismiss {
  background:none; border:none; cursor:pointer; padding:4px; flex-shrink:0;
  color:rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:all 0.2s;
}
.banner__dismiss:hover { color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.08); }
.banner__dismiss svg { width:14px; height:14px; }

/* ─── Main Layout ────────────────────────────────────── */
.hub { max-width:1200px; margin:0 auto; padding:36px 20px 80px; display:flex; flex-direction:column; gap:48px; }

/* ─── Section Labels ─────────────────────────────────── */
.section-label-row { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.section-label {
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px;
}
.section-label--inline { flex:1; margin-bottom:0; }
.section-label__text { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; }
.section-label__line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--cyan-dim),transparent); }

.details-toggle {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  background:var(--cyan-dim); border:1px solid rgba(0,229,255,0.2);
  color:var(--cyan); cursor:pointer; flex-shrink:0;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em;
  transition:all 0.25s var(--ease);
}
.details-toggle:hover { background:rgba(0,229,255,0.22); box-shadow:0 0 16px var(--cyan-glow); }
.details-toggle__chevron { width:13px; height:13px; transition:transform 0.3s var(--ease); }
.details-toggle[aria-expanded="true"] .details-toggle__chevron { transform:rotate(180deg); }

/* ═══════════════════════════════════════════════════════
   LIQUID GLASS BASE
   ═══════════════════════════════════════════════════════ */
.card, .app-card, .status-bar {
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  background:var(--surface);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6) brightness(1.05);
  backdrop-filter:blur(var(--blur)) saturate(1.6) brightness(1.05);
  border:1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card__glow, .app-card__glow {
  position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.05), transparent 70%);
}
.card__glow--cyan   { background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--cyan-dim), transparent 70%); }
.card__glow--orange { background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--orange-dim), transparent 70%); }
.card__glow--purple { background:radial-gradient(ellipse 80% 60% at 50% 0%, var(--purple-dim), transparent 70%); }

/* ═══════════════════════════════════════════════════════
   APP CARDS  (hero)
   ═══════════════════════════════════════════════════════ */
.hub-section--hero .apps-grid { gap:24px; }
.apps-grid { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:700px) { .apps-grid { grid-template-columns:repeat(2,1fr); } }

.app-card {
  padding:32px;
  display:flex; flex-direction:column; gap:28px;
  cursor:default;
}
.app-card:hover {
  transform:translateY(-5px);
  border-color:var(--border-hover);
  box-shadow:0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Jellyfin accent */
.app-card--jellyfin { border-color:rgba(180,77,255,0.18); }
.app-card--jellyfin .app-card__glow { background:radial-gradient(ellipse 90% 50% at 50% 0%, rgba(180,77,255,0.14), transparent 65%); }
.app-card--jellyfin:hover { border-color:rgba(180,77,255,0.35); box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 50px rgba(180,77,255,0.18), inset 0 1px 0 rgba(255,255,255,0.10); }

/* Plex accent */
.app-card--plex { border-color:rgba(229,165,0,0.18); }
.app-card--plex .app-card__glow { background:radial-gradient(ellipse 90% 50% at 50% 0%, rgba(229,165,0,0.12), transparent 65%); }
.app-card--plex:hover { border-color:rgba(229,165,0,0.35); box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 50px rgba(229,165,0,0.15), inset 0 1px 0 rgba(255,255,255,0.10); }

.app-card__header {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:18px;
}
.app-card__logo {
  width:62px; height:62px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,0.05);
}
.app-card__logo svg { width:32px; height:32px; }
.app-card--jellyfin .app-card__logo { color:var(--purple); background:var(--purple-dim); border-color:rgba(180,77,255,0.28); }
.app-card--plex .app-card__logo     { color:var(--orange); background:var(--orange-dim); border-color:rgba(229,165,0,0.28); }

.app-card__title-wrap { flex:1; }
.app-card__server-tag { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.28); margin-bottom:5px; }
.app-card__name { font-family:var(--font-display); font-size:1.55rem; font-weight:700; line-height:1.1; }
.app-card--jellyfin .app-card__name { color:#d4a3ff; }
.app-card--plex .app-card__name     { color:#f5c842; }
.app-card__desc { font-size:0.73rem; color:rgba(255,255,255,0.32); font-family:var(--font-mono); margin-top:4px; }

/* Status dot on app card header */
.app-card__status-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.2);
  transition:all 0.4s;
}
.app-card__status-dot--online  { background:var(--green); box-shadow:0 0 8px rgba(0,255,159,0.7); animation:pulse-dot 2.5s infinite; }
.app-card__status-dot--offline { background:var(--red);   box-shadow:0 0 8px rgba(255,68,68,0.7); }

/* App Buttons */
.app-card__actions {
  position:relative; z-index:1;
  display:flex; gap:10px; flex-wrap:wrap;
}
.app-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:var(--radius-btn);
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; font-weight:700;
  transition:all 0.25s var(--ease); cursor:pointer; white-space:nowrap; flex:1; justify-content:center;
}
.app-btn svg { width:15px; height:15px; flex-shrink:0; }
@media (min-width:480px) { .app-btn { flex:0 0 auto; } }

.app-btn--primary {
  background:linear-gradient(135deg,var(--purple) 0%,#7b2fff 100%);
  color:#fff; border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 20px rgba(180,77,255,0.35);
}
.app-btn--primary:hover { box-shadow:0 6px 28px rgba(180,77,255,0.55),0 0 50px rgba(180,77,255,0.2); transform:translateY(-2px); }
.app-btn--plex { background:linear-gradient(135deg,var(--orange) 0%,#ff9900 100%); box-shadow:0 4px 20px rgba(229,165,0,0.35); }
.app-btn--plex:hover { box-shadow:0 6px 28px rgba(229,165,0,0.55),0 0 50px rgba(229,165,0,0.2); }
.app-btn--secondary { background:var(--cyan-dim); border:1px solid rgba(0,229,255,0.28); color:var(--cyan); }
.app-btn--secondary:hover { background:rgba(0,229,255,0.22); box-shadow:0 0 20px var(--cyan-glow); transform:translateY(-2px); }
.app-btn--ghost { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.55); }
.app-btn--ghost:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.85); transform:translateY(-2px); }

/* ═══════════════════════════════════════════════════════
   STATUS BAR  (glance)
   ═══════════════════════════════════════════════════════ */
.status-bar {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0; padding:16px 20px;
  cursor:default;
}
.status-chip {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; flex:1; min-width:100px;
  position:relative; z-index:1;
}
.status-chip__name {
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
  color:rgba(255,255,255,0.55); white-space:nowrap;
}
.status-chip__value {
  font-family:var(--font-mono); font-size:0.68rem;
  color:rgba(255,255,255,0.30); margin-left:auto; white-space:nowrap;
}
.status-chip-divider {
  width:1px; height:28px; flex-shrink:0;
  background:linear-gradient(to bottom, transparent, var(--border), transparent);
}
@media (max-width:599px) {
  .status-bar { gap:4px; }
  .status-chip { min-width:calc(50% - 4px); flex:0 0 calc(50% - 4px); }
  .status-chip-divider { display:none; }
}

/* ─── Expanded Status Details ────────────────────────── */
.status-details {
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height 0.5s var(--ease), opacity 0.35s var(--ease), margin-top 0.35s var(--ease);
  margin-top:0;
}
.status-details.is-open {
  max-height:1400px;
  opacity:1;
  margin-top:16px;
}

.status-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px) { .status-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .status-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px) { .status-grid { grid-template-columns:repeat(3,1fr); } #card-truenas { grid-column:1/3; } }

/* ─── Status Card Internals ──────────────────────────── */
.card:hover { transform:translateY(-3px); border-color:var(--border-hover); box-shadow:0 14px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
.card--status .card__inner { position:relative; z-index:1; padding:20px; display:flex; flex-direction:column; gap:14px; }

.card__header { display:flex; align-items:center; gap:11px; }
.card__icon {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);
}
.card__icon svg { width:20px; height:20px; }
.card__icon--cyan   { color:var(--cyan);   background:var(--cyan-dim);   border-color:rgba(0,229,255,0.2); }
.card__icon--orange { color:var(--orange); background:var(--orange-dim); border-color:rgba(229,165,0,0.2); }
.card__icon--purple { color:var(--purple); background:var(--purple-dim); border-color:rgba(180,77,255,0.2); }

.card__title-group { flex:1; min-width:0; }
.card__title { font-family:var(--font-display); font-size:0.92rem; font-weight:700; }
.card__subtitle { font-size:0.68rem; color:rgba(255,255,255,0.32); font-family:var(--font-mono); letter-spacing:0.04em; }

/* Status Badge */
.status-badge { display:flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.status-badge--cyan   { border-color:rgba(0,229,255,0.2); }
.status-badge--orange { border-color:rgba(229,165,0,0.2); }
.status-badge--purple { border-color:rgba(180,77,255,0.2); }
.status-text { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; }

/* Status dots */
.status-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0; }
.status-dot--online  { background:var(--green);  box-shadow:0 0 6px rgba(0,255,159,0.7); animation:pulse-dot 2.5s infinite; }
.status-dot--offline { background:var(--red);    box-shadow:0 0 6px rgba(255,68,68,0.7); }
.status-dot--loading { background:var(--orange); animation:blink 1s step-start infinite; }

@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes blink { 50%{opacity:0} }

/* Metrics */
.card__metrics { display:flex; flex-direction:column; gap:9px; }
.card__coming-soon { font-size:0.68rem; font-family:var(--font-mono); color:rgba(255,255,255,0.2); text-align:center; padding:2px 0; }
.metric { display:flex; align-items:center; gap:9px; }
.metric__label { font-size:0.68rem; font-family:var(--font-mono); color:rgba(255,255,255,0.38); min-width:48px; }
.metric__bar-wrap { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.08); overflow:hidden; }
.metric__bar { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); transition:width 0.8s var(--ease); }
.metric__bar--ram { background:linear-gradient(90deg,var(--purple),var(--magenta)); }
.metric__value { font-family:var(--font-mono); font-size:0.68rem; color:rgba(255,255,255,0.55); min-width:36px; text-align:right; }

/* Speed Display */
.speed-display { display:flex; align-items:center; justify-content:space-around; gap:12px; }
.speed-stat { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1px; }
.speed-stat__icon { font-family:var(--font-mono); font-size:1rem; line-height:1; }
.speed-stat__icon--down { color:var(--cyan); }
.speed-stat__icon--up   { color:var(--magenta); }
.speed-stat__value { font-family:var(--font-mono); font-size:1.75rem; font-weight:700; line-height:1; color:#fff; }
.speed-stat__unit  { font-size:0.62rem; color:rgba(255,255,255,0.32); font-family:var(--font-mono); letter-spacing:0.1em; }
.speed-stat__label { font-size:0.67rem; color:rgba(255,255,255,0.38); }
.speed-divider { width:1px; height:44px; background:linear-gradient(to bottom,transparent,var(--border),transparent); }

/* Ping row */
.speed-ping {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-mono); font-size:0.7rem; color:rgba(255,255,255,0.35);
  padding:4px 0 0;
}
.speed-ping svg { width:12px; height:12px; color:var(--cyan); opacity:0.6; }

.btn-refresh {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:8px 14px; border-radius:var(--radius-btn);
  background:var(--cyan-dim); border:1px solid rgba(0,229,255,0.22);
  color:var(--cyan); cursor:pointer;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  transition:all 0.25s var(--ease);
}
.btn-refresh:hover { background:rgba(0,229,255,0.24); box-shadow:0 0 18px var(--cyan-glow); }
.btn-refresh svg { width:13px; height:13px; }
.btn-refresh.loading svg { animation:spin 0.9s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Status Detail */
.status-detail { display:flex; flex-direction:column; gap:7px; }
.status-detail__row { display:flex; align-items:center; justify-content:space-between; font-size:0.75rem; color:rgba(255,255,255,0.42); font-family:var(--font-mono); }
.status-pill { padding:2px 9px; border-radius:999px; font-size:0.65rem; font-family:var(--font-mono); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
.status-pill--ok       { background:var(--green-dim);  border-color:rgba(0,255,159,0.3);  color:var(--green); }
.status-pill--down     { background:var(--red-dim);    border-color:rgba(255,68,68,0.3);  color:var(--red); }
.status-pill--degraded { background:var(--orange-dim); border-color:rgba(229,165,0,0.3);  color:var(--orange); }

/* ─── Footer ─────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--border); padding:18px 24px; background:rgba(5,11,20,0.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:0.62rem; color:rgba(255,255,255,0.22); letter-spacing:0.1em; }
.footer-brand { color:rgba(255,255,255,0.42); font-weight:700; }
.footer-sep   { color:var(--cyan); opacity:0.35; }
.footer-time  { color:var(--cyan); opacity:0.5; }

/* ─── Entrance Animations ────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.app-card  { animation:fadeUp 0.55s var(--ease) both; }
.status-bar{ animation:fadeUp 0.55s var(--ease) 0.15s both; }
.apps-grid .app-card:nth-child(1) { animation-delay:0.05s; }
.apps-grid .app-card:nth-child(2) { animation-delay:0.14s; }
.status-grid .card:nth-child(1)   { animation-delay:0.00s; }
.status-grid .card:nth-child(2)   { animation-delay:0.06s; }
.status-grid .card:nth-child(3)   { animation-delay:0.12s; }
.status-grid .card:nth-child(4)   { animation-delay:0.18s; }
.status-grid .card:nth-child(5)   { animation-delay:0.24s; }

/* ─── Mobile tweaks ──────────────────────────────────── */
@media (max-width:480px) {
  .hub { padding:24px 14px 60px; gap:36px; }
  .app-card { padding:22px; }
  .app-btn  { padding:10px 14px; font-size:0.72rem; }
  .speed-stat__value { font-size:1.4rem; }
  .wordmark__main { font-size:1.1rem; }
}