/* ============================================================
   Hooperium — page-specific styles.
   The shared system lives in /assets/system.css and is loaded first;
   this file only carries what is unique to Hooperium, plus the accent
   that is this app's single pop of colour.

   Accent matches the app itself (AppColors.orange in lib/theme.dart),
   deliberately a shade hotter than Hoopium's so the sister apps read
   as related without looking identical.
   ============================================================ */

:root {
  --accent: #F0852F;
  --glow-1: #F0852F;           /* the hero wash takes the app's colour */

  /* legacy token names still referenced in this app's markup + rules */
  --inter:  var(--sans);
  --text:   var(--ink);
  --text-2: var(--ink-3);
  --text-3: var(--ink-4);
  --dim:    var(--ink-4);
  --bg:     var(--plate);
  --deep:   #000;
  --surface: var(--tile);
  --surface-2: var(--tile-hover);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --orange: var(--accent);
  --orange-deep: #E8631F;
  --orange-soft: rgba(240, 133, 47, 0.14);
}

/* ===================== HERO ===================== */

.hero h1 .accent { color: var(--accent); }
.hero-visual { display: flex; justify-content: center; }
.hero-visual img { width: min(300px, 76vw); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }

/* ===================== INTRO ===================== */
.intro { padding: 84px 0; border-bottom: 1px solid var(--hairline-2); text-align: center; }
.intro p { max-width: 700px; margin: 0 auto; font-size: clamp(17px, 2vw, 22px); line-height: 1.5; color: var(--text); font-weight: 400; }
.intro .hl { color: var(--accent); }

/* ===================== FEATURES ===================== */
.feature { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding: 56px 0; }
.feature + .feature { border-top: 1px solid var(--hairline-2); }
.feature-img img { border-radius: 22px; width: min(420px, 100%); margin: 0 auto; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.feature-text h2 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 400; margin: 0 0 14px; }
.feature-text p { color: var(--text-2); font-size: 13.5px; margin: 0; max-width: 460px; }
.feature-text .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); display: block; margin-bottom: 14px; }

/* ===================== SISTER APP ===================== */
.sister { padding: 56px 0; border-top: 1px solid var(--hairline-2); }
.sister-card { background: var(--tile); border: 1px solid var(--hairline-2); padding: 28px 30px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.sister-card:hover { background: var(--tile-hover); border-color: var(--hairline); transform: translateY(-2px); }
.sister-card h2 { font-size: 17px; font-weight: 400; margin: 0 0 8px; }
.sister-card p { color: var(--text-2); font-size: 13.5px; margin: 0 0 14px; max-width: 560px; }

/* ===================== RESPONSIVE ===================== */
@media (min-width: 900px) {
  .hero-visual { flex: 0 0 auto; }
  .feature { grid-template-columns: 1fr 1fr; gap: 64px; }
  .feature.reverse .feature-img { order: 2; }
  .feature.reverse .feature-text { order: 1; }
}