/* ============================================================
   HELIOCASTLE — MOCKUP — site
   Used by a card with class "mock mock-site".
   ============================================================ */

/* ---------- mock: corporate website ---------- */
.mock-site { background: radial-gradient(80% 70% at 40% 15%, #101319, #07080b 78%); }
.site-win {
  position: absolute;
  top: 12%; left: 9%; right: 9%; bottom: 14%;
  background: #0e1015;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 26px 55px rgb(var(--shadow-rgb) / calc(0.65 * var(--shadow-a)));
}
.site-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px;
  background: rgb(var(--ink-rgb) / 0.035);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.06);
}
.site-bar u { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ink-rgb) / 0.16); }
.site-bar u:first-child { background: rgb(var(--accent-rgb) / 0.7); }
.site-bar s { flex: 1; height: 6px; border-radius: 3px; background: rgb(var(--ink-rgb) / 0.07); margin-left: 6px; }
.site-hero {
  height: 40%;
  margin: 8%;
  border-radius: 4px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.3), rgb(var(--accent-rgb) / 0.05));
  position: relative;
}
.site-hero::after {
  content: "";
  position: absolute;
  left: 12%; bottom: 18%;
  width: 34%; height: 12%;
  border-radius: 2px;
  background: var(--gold);
}
.site-cards { display: flex; gap: 6%; margin: 0 8%; }
.site-cards i {
  flex: 1; height: 26px; border-radius: 3px;
  background: rgb(var(--ink-rgb) / 0.07);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
}

/* ---------- mock: location-aware app ---------- */