/* ==========================================================================
   Shrithan Apps — design system
   The wordmark is one constant: --brand, below. Rename it here and every
   wordmark on every page follows. (Page <title>s are per-app on purpose.)
   ========================================================================== */

:root {
  --brand: "Shrithan Apps";

  /* surface */
  --bg: #0a0a0b;
  --bg-1: #0e0e10;
  --bg-2: #121214;
  --card: #131316;
  --card-2: #17171b;
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  /* ink */
  --text: #f5f5f7;
  --muted: #8e8e93;
  --dim: #5f5f66;

  /* per-app accents */
  --halo: #e8e8ed;
  --cy: #7cd7ff;
  --eclipse: #ff5c94;
  --voltally: #2f63dd;
  --accent: var(--halo);
  --glow: var(--cy);

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-19: clamp(17px, 1.3vw, 19px);
  --t-22: clamp(19px, 1.7vw, 22px);
  --t-28: clamp(22px, 2.3vw, 28px);
  --t-36: clamp(26px, 3.2vw, 36px);
  --t-48: clamp(31px, 4.6vw, 48px);
  --t-64: clamp(38px, 6.4vw, 64px);
  --t-80: clamp(42px, 8vw, 80px);

  /* rhythm */
  --pad: clamp(20px, 5vw, 40px);
  --max: 1180px;
  --sec: clamp(72px, 11vw, 148px);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-17) / 1.55 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: rgba(124, 215, 255, 0.28); }

:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
h1 { font-size: var(--t-80); letter-spacing: -0.032em; }
h2 { font-size: var(--t-48); letter-spacing: -0.026em; }
h3 { font-size: var(--t-22); letter-spacing: -0.018em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--text); }

.eyebrow {
  font-size: var(--t-13);
  font-weight: 590;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}
.lede { font-size: var(--t-22); line-height: 1.42; color: var(--muted); letter-spacing: -0.016em; }
.sub { font-size: var(--t-19); color: var(--muted); max-width: 62ch; }
.fine { font-size: var(--t-13); color: var(--dim); }
.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0; }

/* ---------- layout ---------- */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
section { position: relative; }
.sec { padding: var(--sec) 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.head h2 + p { margin-top: 20px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-2), background 0.3s var(--ease-2);
}
.nav.stuck { border-bottom-color: var(--line); }
.nav-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav nav { margin-left: auto; display: flex; align-items: center; gap: clamp(6px, 2vw, 26px); }
.nav nav a {
  font-size: var(--t-15);
  color: var(--muted);
  padding: 8px 2px;
  transition: color 0.18s var(--ease-2);
}
.nav nav a:hover { color: var(--text); }
.nav nav a.on { color: var(--text); }
@media (max-width: 720px) {
  .nav nav a.hide-sm { display: none; }
}

/* wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-15); font-weight: 590; letter-spacing: -0.015em; }
.brand::after { content: var(--brand); }
.brand .mark { width: 15px; height: 15px; border-radius: 50%; flex: none; position: relative; }
.mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.6px solid var(--text);
  box-shadow: 0 0 10px rgba(232, 232, 237, 0.5);
}
.mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg);
}
.brand.app::after { content: none; }
.app-name { font-weight: 590; }
.crumb { color: var(--dim); }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--btn-bg);
  font-size: var(--t-15);
  font-weight: 560;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), background 0.2s var(--ease-2),
    border-color 0.2s var(--ease-2), box-shadow 0.25s var(--ease-2), color 0.2s;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.3); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  background: var(--text);
  color: #0a0a0b;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 30px -12px rgba(232, 232, 237, 0.4);
}
.btn-primary:hover {
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 44px -14px rgba(124, 215, 255, 0.55);
}
.btn-ghost { color: var(--text); background: rgba(255, 255, 255, 0.035); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.075); }
.btn-sm { height: 34px; padding: 0 14px; font-size: var(--t-13); border-radius: 9px; }
.btn-wide { width: 100%; }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-15);
  color: var(--cy);
  border-bottom: 1px solid rgba(124, 215, 255, 0.28);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.link:hover { border-bottom-color: var(--cy); }

/* ---------- reveal ---------- */

.rv {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Mac chrome primitives — used by the hero and every recreated visual
   ========================================================================== */

.screen {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 22% 8%, rgba(96, 148, 170, 0.22), transparent 70%),
    radial-gradient(60% 60% at 82% 72%, rgba(60, 78, 116, 0.26), transparent 72%),
    linear-gradient(170deg, #17222a 0%, #101720 45%, #090b0e 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 50px 120px -40px rgba(0, 0, 0, 0.9);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(100% 70% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}

/* menu bar */
.mb {
  position: relative;
  z-index: 3;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(10, 12, 14, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: -0.005em;
}
.mb .apple {
  width: 12px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: var(--apple) center/contain no-repeat;
  mask: var(--apple) center/contain no-repeat;
  --apple: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.05 12.53c0-2.4 1.96-3.55 2.05-3.6-1.12-1.64-2.86-1.86-3.47-1.89-1.48-.15-2.88.86-3.63.86-.75 0-1.9-.84-3.12-.82-1.6.02-3.08.93-3.9 2.37-1.67 2.9-.43 7.19 1.2 9.55.79 1.15 1.74 2.44 2.99 2.4 1.2-.05 1.66-.78 3.11-.78 1.45 0 1.86.78 3.13.76 1.29-.02 2.11-1.17 2.9-2.33.91-1.34 1.29-2.64 1.31-2.7-.03-.01-2.52-.97-2.54-3.84M14.7 5.4c.64-.78 1.07-1.86.95-2.94-.92.04-2.06.62-2.72 1.39-.6.69-1.11 1.8-.97 2.85 1.03.08 2.09-.52 2.74-1.3"/></svg>');
}
.mb .titles { display: flex; gap: 15px; }
.mb .titles b { font-weight: 600; }
.mb .titles span { color: rgba(255, 255, 255, 0.8); }
.mb .bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
}

/* status icons, drawn not screenshotted */
.si {
  width: 16px;
  height: 16px;
  flex: none;
  background: rgba(255, 255, 255, 0.92);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  will-change: transform, opacity;
}
.si.wide { width: 24px; }
.si-clock { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.92); background: none; width: auto; height: auto; white-space: nowrap; }
.si-battery { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="3" fill="none" stroke="black" stroke-width="1.4"/><rect x="3" y="5" width="15" height="6" rx="1.6" fill="black"/><path d="M24.6 6.4v3.2c1-.3 1.6-.9 1.6-1.6s-.6-1.3-1.6-1.6" fill="black"/></svg>'); width: 26px; }
.si-wifi { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.4a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4M7.6 13.2a6.4 6.4 0 0 1 8.8 0l1.5-1.6a8.7 8.7 0 0 0-11.8 0zM3.6 9.1a12.2 12.2 0 0 1 16.8 0L22 7.4a14.5 14.5 0 0 0-20 0z" fill="black"/></svg>'); }
.si-bt { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 2.6 17 7.4 12.6 11 17 14.6l-6 4.8V12.9l-3.2 2.6-1.2-1.5L10.6 11 6.6 8l1.2-1.5L11 9.1zm1.8 3.6L12.8 8l1.4-1.1zm0 8.4v1.8l1.4-1.1z" fill="black"/></svg>'); }
.si-vol { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4 7.4 8H4v8h3.4L12 20zm3.2 3.2a6.5 6.5 0 0 1 0 9.6l1.3 1.4a8.4 8.4 0 0 0 0-12.4z" fill="black"/></svg>'); }
.si-cc { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="3" fill="none" stroke="black" stroke-width="1.5"/><rect x="3" y="14" width="18" height="6" rx="3" fill="none" stroke="black" stroke-width="1.5"/><circle cx="8" cy="7" r="1.7" fill="black"/><circle cx="16" cy="17" r="1.7" fill="black"/></svg>'); }
.si-search { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.2" fill="none" stroke="black" stroke-width="1.7"/><path d="M15.2 15.2 20 20" stroke="black" stroke-width="1.7" stroke-linecap="round"/></svg>'); }
.si-siri { background: conic-gradient(from 210deg, #b16cff, #4ad6ff, #ff6ad0, #b16cff); -webkit-mask: none; mask: none; border-radius: 50%; }
.si-docker { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="black"><rect x="3" y="11" width="2.6" height="2.6"/><rect x="6.3" y="11" width="2.6" height="2.6"/><rect x="9.6" y="11" width="2.6" height="2.6"/><rect x="12.9" y="11" width="2.6" height="2.6"/><rect x="6.3" y="7.8" width="2.6" height="2.6"/><rect x="9.6" y="7.8" width="2.6" height="2.6"/><rect x="12.9" y="7.8" width="2.6" height="2.6"/><rect x="9.6" y="4.6" width="2.6" height="2.6"/><path d="M16.6 12.4c1-1 2.2-1.1 3.4-.6-.3 1.6-1.4 2.6-3.4 2.9zM3 14.6h13.2c-1 2.8-3.4 4.4-6.8 4.4C5.6 19 3.5 17.2 3 14.6"/></g></svg>'); }
.si-drop { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3 2 6.4l5 3.4 5-3.4zm10 0-5 3.4 5 3.4 5-3.4zM2 13.2l5 3.4 5-3.4-5-3.4zm15-3.4-5 3.4 5 3.4 5-3.4zM7 17.7l5 3.3 5-3.3-5-3.3z" fill="black"/></svg>'); }
.si-vpn { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6 5 5.4v6.2c0 4.2 2.9 7.6 7 9.8 4.1-2.2 7-5.6 7-9.8V5.4z" fill="none" stroke="black" stroke-width="1.6"/><path d="M8.8 12.2 11 14.4l4.2-4.6" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>'); }
.si-tm { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="black" stroke-width="1.6"/><path d="M12 6.6V12l4 2.2" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>'); }
.si-slack { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="black"><rect x="13.2" y="2.4" width="2.9" height="9.2" rx="1.45"/><rect x="7.9" y="12.4" width="2.9" height="9.2" rx="1.45"/><rect x="2.4" y="7.9" width="9.2" height="2.9" rx="1.45"/><rect x="12.4" y="13.2" width="9.2" height="2.9" rx="1.45"/></g></svg>'); }
.si-git { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.7"><circle cx="7" cy="5.6" r="2.4"/><circle cx="7" cy="18.4" r="2.4"/><circle cx="17" cy="9.4" r="2.4"/><path d="M7 8v8M9.4 9.4h3.2M17 11.8c0 3-3 3.4-6 3.8" stroke-linecap="round"/></g></svg>'); }
.si-pin { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 2.6h5.2l-.7 2 1.8 5.1 2.1 1.8v1.8h-5.1v5.6l-.9 2.5-.9-2.5v-5.6H5.8v-1.8l2.1-1.8 1.8-5.1z" fill="black"/></svg>'); }
.si-gear { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><path d="M3.5 8h17M3.5 16h17"/></g><circle cx="9" cy="8" r="2.6" fill="black"/><circle cx="15.5" cy="16" r="2.6" fill="black"/></svg>'); }
.si-note { -webkit-mask-image: var(--i); mask-image: var(--i); --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4.5" y="3.5" width="15" height="17" rx="3" fill="none" stroke="black" stroke-width="1.6"/><path d="M8 8.5h8M8 12.5h8M8 16.5h4.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>'); }

/* notch */
.notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12.5%;
  min-width: 62px;
  max-width: 160px;
  height: 30px;
  background: #000;
  border-radius: 0 0 11px 11px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notch .cam { width: 5px; height: 5px; border-radius: 50%; background: #16181c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 2px rgba(120,200,255,.35); }

/* Halo's own footprint: divider + dot */
.divider {
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  flex: none;
}
.halo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  border: 1.4px solid rgba(255, 255, 255, 0.85);
}

/* desktop body under the bar */
.desk { position: relative; z-index: 1; }

/* ---------- glass panel (Tray, palette) ---------- */

.glass {
  background: linear-gradient(180deg, rgba(38, 40, 46, 0.86), rgba(20, 21, 25, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.11) inset,
    0 24px 60px -18px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 18px;
}

.tile {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease-2);
}
.tile:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.12); }
.group-label {
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* ==========================================================================
   Home page
   ========================================================================== */

.home-hero { padding: clamp(60px, 11vw, 120px) 0 clamp(40px, 6vw, 70px); }
.home-hero h1 { max-width: 15ch; }
.home-hero .lede { max-width: 54ch; margin-top: 26px; }
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  font-size: var(--t-13);
  color: var(--dim);
}
.spec-row span { display: inline-flex; align-items: center; gap: 8px; }
.spec-row { color: var(--muted); }
.spec-row span::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--dim);
}

/* app cards */
.apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 26px); }
.app-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-1) 100%);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-2), transform 0.4s var(--ease);
}
.app-card:hover { border-color: var(--line-2); }
.app-card .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-13);
  font-weight: 560;
  color: var(--muted);
  margin-bottom: 16px;
}
.app-card .tag i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--k, var(--halo));
  box-shadow: 0 0 10px var(--k, var(--halo));
}
.app-card h3 { font-size: var(--t-36); margin-bottom: 14px; }
.app-card .price { font-size: var(--t-15); color: var(--text); font-weight: 560; }
.app-card p { color: var(--muted); font-size: var(--t-17); max-width: 44ch; }
.app-card .cta { margin: 26px 0 0; }
.app-card .stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9.4;
}
.app-card.wide-img .stage img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 860px) {
  .app-card { grid-template-columns: minmax(0, 1fr); }
  .app-card .stage { order: -1; }
}

/* mini demo: menu bar collapsing (home page, Halo card) */
.mini-mb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.mini-tray {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px;
  display: flex;
  gap: 7px;
  transform-origin: top center;
}

/* bundle */
.bundle {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(124, 215, 255, 0.07), transparent 60%),
    var(--bg-1);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.bundle h2 { font-size: var(--t-36); }
.bundle ul { list-style: none; margin: 22px 0 0; padding: 0; color: var(--muted); font-size: var(--t-15); }
.bundle li { padding-left: 26px; position: relative; margin-bottom: 10px; }
.bundle li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--cy);
  border-bottom: 1.6px solid var(--cy);
  transform: rotate(-45deg);
}
.math { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: rgba(0,0,0,.3); }
.math-row { display: flex; justify-content: space-between; font-size: var(--t-15); color: var(--muted); padding: 7px 0; }
.math-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; color: var(--text); font-weight: 560; }
.math-row.total b { font-size: var(--t-22); letter-spacing: -0.02em; }
.strike { color: var(--dim); text-decoration: line-through; }
@media (max-width: 860px) { .bundle { grid-template-columns: minmax(0, 1fr); } }

/* principles */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.cols article h3 { font-size: var(--t-22); margin-bottom: 12px; }
.cols article p { color: var(--muted); font-size: var(--t-15); }
.cols article .num {
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--dim);
  display: block;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0 56px; }
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot-col h4 { font-size: var(--t-13); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 590; margin-bottom: 14px; }
.foot-col a, .foot-col p { display: block; font-size: var(--t-15); color: var(--muted); margin: 0 0 9px; transition: color 0.18s; }
.foot-col a:hover { color: var(--text); }
.foot-note { margin-top: 44px; font-size: var(--t-13); color: var(--dim); display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ==========================================================================
   Halo page
   ========================================================================== */

.halo-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(50px, 7vw, 90px); }
.halo-hero h1 { max-width: 15ch; font-size: clamp(36px, 5.1vw, 62px); letter-spacing: -0.028em; }
.halo-hero h1 .thin { color: var(--muted); }
.halo-hero .lede { max-width: 50ch; margin-top: 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* the animated hero stage */
#stage {
  position: relative;
  aspect-ratio: 16 / 11;
  min-height: 300px;
}
#stage .desk {
  position: absolute;
  inset: 30px 0 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.stage-caption {
  margin-top: 14px;
  font-size: var(--t-13);
  color: var(--dim);
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 20px;
}
.stage-caption .dotmark { width: 5px; height: 5px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 8px var(--cy); flex: none; }

/* Tray, hero-scale */
.tray {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 250px;
  padding: 12px 12px 11px;
  transform-origin: top center;
  z-index: 5;
  will-change: transform, opacity;
}
.tray-row { display: flex; gap: 8px; }
.tray-groups { display: flex; gap: 14px; }
.tray-g { display: grid; gap: 7px; justify-items: start; }
.tray-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; opacity: .55; }
.tray-foot .si { width: 13px; height: 13px; }

/* search palette */
.palette {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(330px, 84%);
  transform: translate(-50%, -50%);
  z-index: 6;
  overflow: hidden;
  will-change: transform, opacity;
}
.pal-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.pal-field .si { width: 14px; height: 14px; background: rgba(255,255,255,.5); }
.pal-field .q { color: #fff; }
.pal-field .caret { width: 1.5px; height: 15px; background: var(--cy); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pal-list { padding: 6px; }
.pal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 13px;
}
.pal-row .meta { margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.pal-row .who { color: rgba(255, 255, 255, 0.45); font-size: 11px; }
.pal-row.on { background: rgba(124, 215, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(124, 215, 255, 0.24); }
.pal-row .si { width: 14px; height: 14px; }

/* trust strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line);
}
.trust div {
  flex: 1 1 180px;
  background: var(--bg-1);
  padding: 20px 22px;
}
.trust b { display: block; font-size: var(--t-19); letter-spacing: -0.02em; margin-bottom: 4px; }
.trust span { font-size: var(--t-13); color: var(--dim); }

/* why-it-exists */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
.why-list { display: grid; gap: 18px; align-content: start; }
.why-item {
  border-left: 2px solid var(--line-2);
  padding: 2px 0 2px 20px;
}
.why-item h3 { font-size: var(--t-19); margin-bottom: 7px; }
.why-item p { color: var(--muted); font-size: var(--t-15); }
@media (max-width: 860px) { .why { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sticky walkthrough ---------- */

.walk { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.walk-stage {
  position: sticky;
  top: 90px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #17202a 0%, #0c1014 50%, #08090b 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 90px -40px rgba(0,0,0,.9);
}
.viz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  opacity: 0;
  transform: scale(0.97) translate3d(0, 10px, 0);
  transition: opacity 0.45s var(--ease-2), transform 0.55s var(--ease);
  pointer-events: none;
}
.viz.on { opacity: 1; transform: none; pointer-events: auto; }
.viz > * { width: 100%; }
.walk-steps { display: grid; }
.step {
  padding: clamp(40px, 12vh, 110px) 0;
  border-top: 1px solid var(--line);
  opacity: 0.4;
  transition: opacity 0.4s var(--ease-2);
}
.step:first-child { border-top: 0; }
.step.on { opacity: 1; }
.step .n {
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--cy);
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: var(--t-28); margin-bottom: 14px; }
.step p { color: var(--muted); max-width: 46ch; }
.step .say { margin-top: 16px; font-size: var(--t-15); color: var(--text); border-left: 2px solid var(--cy); padding-left: 14px; }
@media (max-width: 940px) {
  .walk { grid-template-columns: minmax(0, 1fr); }
  .walk-stage { top: 60px; aspect-ratio: 16 / 11; max-height: 44vh; }
  .step { padding: 30px 0; }
  .step, .step.on { opacity: 1; }
}

/* visuals used inside .viz */
.fp { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }
.fp-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.42);
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 9px;
}
.fp-card .kv { display: flex; gap: 12px; }
.fp-card .kv span { color: var(--dim); width: 74px; flex: none; }
.fp-card .kv b { color: var(--text); font-weight: 500; }
.fp-hash { color: var(--cy); word-break: break-all; }
.fp-note { text-align: center; font-size: var(--t-13); color: var(--dim); }
.fp-shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }

.diagram { max-width: 460px; margin: 0 auto; display: grid; gap: 18px; }
.dg-bar {
  position: relative;
  height: 46px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  overflow: hidden;
}
.dg-zone {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 92, 92, 0.16) 0 6px, transparent 6px 12px);
  border-left: 1px solid rgba(255, 120, 120, 0.4);
  border-right: 1px solid rgba(255, 120, 120, 0.4);
}
.dg-legend { display: grid; gap: 8px; font-size: var(--t-13); color: var(--muted); }
.dg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }
.dg-verdict { font-size: var(--t-15); color: var(--text); }
.dg-verdict b { color: #ff8a8a; }

.ctx { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.ctx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.36);
  font-size: var(--t-13);
  color: var(--muted);
}
.ctx-row.on { border-color: rgba(124, 215, 255, 0.4); background: rgba(124, 215, 255, 0.07); color: var(--text); }
.ctx-row .name { width: 116px; flex: none; }
.ctx-row .bar { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.ctx-row .si { width: 13px; height: 13px; }

.rules { display: grid; gap: 11px; max-width: 460px; margin: 0 auto; }
.rule-row {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.36);
  font-size: var(--t-15);
  line-height: 1.5;
  color: var(--muted);
}
.pill {
  display: inline-block;
  padding: 1px 9px 2px;
  margin: 0 1px;
  border-radius: 7px;
  background: rgba(124, 215, 255, 0.12);
  color: #bfe9ff;
  border: 1px solid rgba(124, 215, 255, 0.22);
  font-size: 0.94em;
  white-space: nowrap;
}
.pill.sel::after { content: " ⌄"; color: rgba(191, 233, 255, 0.55); }

.code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  max-width: 460px;
  margin: 0 auto;
  overflow-x: auto;
  color: var(--muted);
}
.code .c { color: var(--dim); }
.code .u { color: var(--cy); }
.code .k { color: #ffd9a0; }
.code b { color: var(--text); font-weight: 500; }

.peek-demo { max-width: 440px; margin: 0 auto; display: grid; gap: 22px; }
.peek-bar {
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px;
  overflow: hidden;
}
.peek-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #ffd9a0;
}
.viz.on .peek-item { animation: peek 5s var(--ease) infinite; }
@keyframes peek {
  0%, 12% { transform: translateX(30px) scale(0.7); opacity: 0; }
  22%, 72% { transform: none; opacity: 1; }
  84%, 100% { transform: translateX(30px) scale(0.7); opacity: 0; }
}
.peek-caption { font-size: var(--t-13); color: var(--dim); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .viz.on .peek-item { animation: none; }
}

.eclipse-card {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 92, 148, 0.25);
  background: linear-gradient(180deg, rgba(30, 14, 22, 0.92), rgba(12, 8, 11, 0.94));
  padding: 16px;
  box-shadow: 0 24px 60px -24px rgba(255, 92, 148, 0.25);
}
.ec-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.ec-tab { font-size: 11px; padding: 5px 11px; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.05); }
.ec-tab.on { background: rgba(255, 92, 148, 0.18); color: #ffd0e0; }
.ec-body { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- comparison table ---------- */

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-15); min-width: 700px; }
table.cmp th, table.cmp td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp thead th { font-size: var(--t-13); font-weight: 590; color: var(--dim); letter-spacing: 0.02em; background: var(--bg-1); position: sticky; top: 0; }
table.cmp tbody th { font-weight: 450; color: var(--muted); }
table.cmp td { text-align: center; color: var(--muted); }
table.cmp .me { background: rgba(124, 215, 255, 0.05); color: var(--text); }
table.cmp thead .me { color: var(--text); }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: 0; }
table.cmp tr.price-row td, table.cmp tr.price-row th { font-weight: 560; color: var(--text); }
.yes, .no, .part { display: inline-block; font-size: var(--t-13); }
.yes { color: #7fe3b0; }
.no { color: var(--dim); }
.part { color: #ffd9a0; }
.cmp-note { margin-top: 16px; font-size: var(--t-13); color: var(--dim); }

/* ---------- permission / honesty ---------- */

.perm { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.perm > div { background: var(--bg-1); padding: clamp(22px, 3vw, 34px); }
.perm h3 { font-size: var(--t-19); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.perm p { color: var(--muted); font-size: var(--t-15); }
.perm .ok { color: #7fe3b0; }
.perm .never { color: #ff8a8a; }
@media (max-width: 760px) { .perm { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pricing ---------- */

.prices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px); max-width: 860px; }
.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 38px);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-1) 100%);
  display: flex;
  flex-direction: column;
}
.pcard.lead { border-color: rgba(124, 215, 255, 0.28); box-shadow: 0 0 0 1px rgba(124, 215, 255, 0.1), 0 30px 80px -40px rgba(124, 215, 255, 0.35); }
.pcard .amount { font-size: var(--t-64); letter-spacing: -0.04em; line-height: 1; font-weight: 600; }
.pcard .amount small { font-size: var(--t-19); color: var(--muted); letter-spacing: -0.01em; font-weight: 450; margin-left: 6px; }
.pcard ul { list-style: none; padding: 0; margin: 24px 0 28px; font-size: var(--t-15); color: var(--muted); }
.pcard li { position: relative; padding-left: 24px; margin-bottom: 11px; }
.pcard li::before {
  content: "";
  position: absolute; left: 3px; top: 8px;
  width: 8px; height: 5px;
  border-left: 1.6px solid var(--cy);
  border-bottom: 1.6px solid var(--cy);
  transform: rotate(-45deg);
}
.pcard .btn { margin-top: auto; }
.pcard .after { margin-top: 14px; }
@media (max-width: 760px) { .prices { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */

.faq { max-width: 780px; }
details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
details summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--t-19);
  font-weight: 500;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: color 0.18s;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--dim);
  border-bottom: 1.6px solid var(--dim);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease), border-color 0.2s;
  flex: none;
}
details[open] summary::after { transform: rotate(225deg); border-color: var(--cy); }
details summary:hover { color: var(--cy); }
details p { color: var(--muted); font-size: var(--t-15); margin: 14px 0 0; max-width: 66ch; }

/* ---------- Eclipse page ---------- */

.theme-eclipse { --accent: var(--eclipse); --glow: var(--eclipse); }
.theme-eclipse ::selection { background: rgba(255, 92, 148, 0.3); }
.theme-eclipse .mark::before { border-color: var(--eclipse); box-shadow: 0 0 12px rgba(255, 92, 148, 0.55); }
.theme-eclipse .mark::after { inset: 0; background: linear-gradient(90deg, transparent 50%, var(--eclipse) 50%); }
.theme-eclipse .link { color: var(--eclipse); border-bottom-color: rgba(255, 92, 148, 0.3); }
.theme-eclipse .step .n,
.theme-eclipse .dotmark { color: var(--eclipse); background: var(--eclipse); }
.theme-eclipse .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 44px -14px rgba(255, 92, 148, 0.5); }
.theme-eclipse .pcard li::before,
.theme-eclipse .bundle li::before { border-color: var(--eclipse); }
.theme-eclipse details[open] summary::after { border-color: var(--eclipse); }
.theme-eclipse details summary:hover { color: var(--eclipse); }

.gallery { display: grid; gap: 18px; }
.gal-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.gal-tabs button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--t-13);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.16s var(--ease);
}
.gal-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.gal-tabs button:active { transform: scale(0.97); }
.gal-tabs button[aria-selected="true"] {
  color: #fff;
  background: rgba(255, 92, 148, 0.16);
  border-color: rgba(255, 92, 148, 0.4);
}
.gal-frame {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #07070a;
}
.gal-frame img { width: 100%; height: auto; }

.tools-table { font-size: var(--t-15); }
.tools-table .row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.tools-table .row h3 { font-size: var(--t-17); font-weight: 560; }
.tools-table .row p { color: var(--muted); }
@media (max-width: 700px) { .tools-table .row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

.honest { display: grid; gap: 14px; max-width: 860px; }
.honest li {
  list-style: none;
  padding: 18px 20px;
  border-left: 2px solid var(--accent);
  background: var(--bg-1);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--muted);
  font-size: var(--t-15);
}
.honest ul { padding: 0; margin: 0; display: grid; gap: 14px; }

.shots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shots-2 img { border-radius: var(--r); border: 1px solid var(--line); width: 100%; height: auto; }
@media (max-width: 700px) { .shots-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- thanks ---------- */

.thanks { min-height: 72vh; display: grid; place-items: center; padding: 60px 0; }
.thanks-box { max-width: 620px; }
.thanks h1 { font-size: var(--t-48); margin: 14px 0 18px; }
.keybox {
  font-family: var(--mono);
  font-size: var(--t-15);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 14px 18px;
  border-radius: 12px;
  margin: 22px 0;
  user-select: all;
  word-break: break-all;
}
.steps { margin: 28px 0 0; padding-left: 20px; color: var(--muted); font-size: var(--t-15); }
.steps li { margin-bottom: 9px; }
.dl-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* ---------- utilities ---------- */

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt { margin-top: 26px; }
.static-note { display: none; }

@media (max-width: 720px) {
  #stage { aspect-ratio: 4 / 3.2; }
  .tray { width: 210px; }
}

/* ---------- hero-only pieces ---------- */

.dot-wrap { position: relative; display: inline-flex; flex: none; }
#dot-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 215, 255, 0.75), transparent 68%);
  opacity: 0;
  pointer-events: none;
}
#peek {
  position: absolute;
  top: 8px;
  right: 148px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #bfe9ff;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
#peek .si { width: 13px; height: 13px; background: #bfe9ff; }
.tray, .palette { opacity: 0; }
#stage .halo-dot { transition: none; }

/* ---------- home page mini demo (CSS only) ---------- */

.app-card .stage.screen { border-radius: var(--r-lg); }
.md-hide { animation: mdHide 7s var(--ease) infinite; }
.md-hide:nth-of-type(1) { animation-delay: 0s; }
.md-hide:nth-of-type(2) { animation-delay: 0.09s; }
.md-hide:nth-of-type(3) { animation-delay: 0.18s; }
.md-hide:nth-of-type(4) { animation-delay: 0.27s; }
@keyframes mdHide {
  0%, 5% { transform: none; opacity: 1; }
  16%, 84% { transform: translate3d(34px, 0, 0) scale(0.34); opacity: 0; }
  95%, 100% { transform: none; opacity: 1; }
}
.mini-tray { animation: mdTray 7s var(--ease) infinite; }
@keyframes mdTray {
  0%, 10% { transform: translate3d(-50%, -44px, 0) scale(0.9); opacity: 0; }
  22%, 80% { transform: translate3d(-50%, 8px, 0) scale(1); opacity: 1; }
  92%, 100% { transform: translate3d(-50%, -44px, 0) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .md-hide { animation: none; opacity: 0; transform: translate3d(34px, 0, 0) scale(0.34); }
  .mini-tray { animation: none; transform: translate3d(-50%, 8px, 0); opacity: 1; }
}

pre.code { white-space: pre; margin: 0; }

/* ---------- Eclipse hero frame ---------- */

.ec-screen { padding-bottom: 8%; }
.ec-hero-shot {
  position: relative;
  z-index: 2;
  width: 82%;
  height: auto;
  margin: -2px auto 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9);
}

/* ---------- hero menu bar fits its stage ---------- */

#stage .mb { gap: 14px; padding: 0 11px; }
#stage .mb .titles { gap: 13px; }
#stage .bar-right { gap: 7px; }
#stage .si { width: 14px; height: 14px; }
#stage .si.si-battery { width: 23px; }
#stage .si-clock { font-size: 11px; }
@media (max-width: 1180px) {
  #stage .mb .titles span { display: none; }
}

/* ---------- the dock, quiet on purpose ---------- */

#stage .desk { align-items: end; place-items: end center; }
.dock {
  display: flex;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}
.dock span {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.11);
}
.dock span:nth-child(2) { background: rgba(124, 215, 255, 0.2); }
.dock span:nth-child(5) { background: rgba(255, 255, 255, 0.16); }

/* narrow screens: the recreated bar sheds what it can */
@media (max-width: 560px) {
  #stage .si-clock { display: none; }
  #stage .si-cc { display: none; }
  #stage .mb .titles span { display: none; }
  #stage .mb { gap: 10px; }
}
@media (max-width: 420px) {
  #stage .si-vpn, #stage .si-git { display: none; }
}
.hero-grid > * { min-width: 0; }
.app-card > * { min-width: 0; }

/* ---------- a real screenshot, framed ---------- */

.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, 0.95);
}
.shot figcaption { margin-top: 16px; font-size: var(--t-13); color: var(--dim); }

.app-card .stage img.app-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.8);
}

/* App icon badge on cards and pricing */
.app-icon { display: block; border-radius: 22.37%; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.45); }