/* ============================================================================
   FAMILY OBSERVATORY : HOME / HERO + PRODUCT DEMO
   Production component. Depends on tokens.css + base.css. v1.0.0 : 2026-07-10
   Light, warm hero (never dark). Real product UI, never a flattened screenshot.
   ========================================================================== */

.fo-hero { position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 88% 8%, var(--brand-soft), transparent 62%),
    radial-gradient(700px 420px at 6% 96%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.fo-hero-art { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.fo-hero-art svg { position:absolute; top:50%; right:-4%; transform:translateY(-50%); width:min(720px,60%); height:auto; opacity:0.7; }

/* Top gap under the nav is deliberately small (~24-40px, the locked ecosystem hero
   standard). Real browsers render top padding heavier than headless screenshots, so a
   symmetric clamp reads as dead space under the header. Bottom stays generous. */
.fo-hero-inner { position:relative; z-index:1; max-width:var(--container-xl); margin-inline:auto;
  padding:clamp(var(--space-5), 3vw, 2.5rem) var(--gutter) clamp(var(--space-7), 6vw, var(--space-9));
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-8); align-items:center; }

.fo-hero-copy .eyebrow { margin-bottom:var(--space-4); }
.fo-hero-copy h1 { font-size:clamp(2.6rem, 6vw, var(--fs-6xl)); line-height:1.02; letter-spacing:-0.02em; margin-bottom:var(--space-5); }
.fo-hero-copy .lead { font-size:clamp(1.15rem, 2vw, var(--fs-xl)); max-width:34ch; margin-bottom:var(--space-6); }
.fo-hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-5); }
.fo-hero-trust { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.fo-hero-trust svg { color:var(--brand); flex:none; }

/* ---- Hero photo + floating status badge -------------------------------- */
.fo-hero-media { position:relative; }
.fo-hero-photo { aspect-ratio:6/5; border-radius:var(--radius-xl); }
.fo-hero-photo img { object-position:62% center; }
.fo-hero-badge { position:absolute; left:-24px; bottom:-20px; width:330px; gap:var(--space-3); box-shadow:var(--shadow-lg); }
.fo-hero-badge .fo-status-name, .fo-hero-badge .fo-status-meta { white-space:nowrap; }
.fo-hero-badge .status { flex:none; }
@media (max-width:900px){
  .fo-hero-photo { aspect-ratio:3/2; }
  .fo-hero-badge { left:16px; bottom:16px; }
}
@media (max-width:480px){ .fo-hero-badge { position:static; margin-top:calc(-1 * var(--space-6)); max-width:none; } }

/* ---- Product demo mini (senior check-in + family status) --------------- */
.fo-demo { display:grid; gap:var(--space-4); }
.fo-device { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-5); }
.fo-checkin-greet { color:var(--text); }
.fo-device-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.fo-device-time { font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.fo-checkin-greet { font-family:var(--font-display); font-size:var(--fs-xl); margin:0 0 var(--space-2); }
.fo-checkin-q { color:var(--text-2); margin:0 0 var(--space-5); font-size:var(--fs-lg); }
.fo-checkin-btns { display:grid; gap:var(--space-3); }
.fo-big-btn { min-height:var(--touch-senior); border-radius:var(--radius-lg); border:2px solid transparent; font:700 var(--fs-lg)/1 var(--font-sans); display:flex; align-items:center; justify-content:center; gap:var(--space-3); cursor:pointer; }
.fo-big-btn--ok { background:var(--ok); color:#fff; }
.fo-big-btn--help { background:var(--surface); color:var(--help); border-color:var(--help); }
.fo-big-btn svg { width:26px; height:26px; }

.fo-status-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); }
.fo-status-avatar { width:46px; height:46px; border-radius:50%; background:var(--brand-soft); color:var(--brand-strong); display:grid; place-items:center; font-weight:700; flex:none; }
.fo-status-body { flex:1; min-width:0; }
.fo-status-name { font-weight:700; margin:0; }
.fo-status-meta { margin:2px 0 0; font-size:var(--fs-sm); color:var(--muted); }

@media (max-width: 900px) {
  .fo-hero-inner { grid-template-columns:1fr; gap:var(--space-7); }
  .fo-hero-art svg { opacity:0.35; width:120%; right:-30%; }
}