/* OpenDMG landing page.
   ui-ux-pro-max: App Store style landing, dark only, accessible states, reduced motion.
   high-end-visual-design: one solid background colour, floating island nav, double-bezel
   cards (.shell > .core), pill buttons with a nested icon circle, Geist, light strokes,
   heavy fade-up reveals on a spring-like curve. */
:root {
  color-scheme: dark;
  --bg: #07090d;
  --core: #0d1016;
  --core-2: #12161e;
  --shell: rgba(255, 255, 255, 0.035);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.17);
  --fg: #f5f7fa;
  --muted: #8b94a3;
  --brand: #4da3ff;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --focus: rgba(77, 163, 255, 0.75);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --wrap: 1120px;
  --z-nav: 40;
  --z-overlay: 60;
  --z-cursor: 90;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; scroll-padding-bottom: 104px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary, input, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-decoration: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.04; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: clamp(40px, 7vw, 84px); max-width: 15ch; }
h2 { font-size: clamp(30px, 4.6vw, 52px); max-width: 18ch; }
h3 { font-size: 22px; letter-spacing: -0.02em; }
kbd { font: 500 12px/1 var(--font); padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); }
svg { width: 20px; height: 20px; flex: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: var(--z-overlay); padding: 10px 14px; background: var(--fg); color: var(--bg); border-radius: 10px; }
.skip:focus { top: 12px; }

/* One solid colour. On top of it: a dot matrix that ripples and lights up near the pointer
   (canvas, see main.js) and a single-hue glow rising behind the hero. */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); overflow: hidden; }
.backdrop::before { content: ""; position: absolute; left: 50%; top: -42vh; width: 150vw; height: 90vh; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 163, 255, 0.2), rgba(77, 163, 255, 0.06) 55%, transparent 72%); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 55%, rgba(7, 9, 13, 0.85) 100%); }
@media (prefers-reduced-motion: no-preference) { .backdrop::before { animation: breathe 9s var(--spring) infinite alternate; } }
@keyframes breathe { from { opacity: 0.7; } to { opacity: 1; } }
#field { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Double bezel: an outer tray and an inner plate with concentric corners. */
.shell { padding: 6px; border-radius: 28px; background: var(--shell); box-shadow: 0 0 0 1px var(--hair); }
.core { position: relative; border-radius: 22px; background: var(--core); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; }

.eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--shell); box-shadow: 0 0 0 1px var(--hair); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- Morphing pointer: a small dot that takes the shape of what it touches ---------- */
.pointer { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: 14px; height: 14px; border-radius: 7px; pointer-events: none; opacity: 0;
  background: rgba(245, 247, 250, 0.9); mix-blend-mode: difference; will-change: transform, width, height;
  transition: opacity 300ms var(--spring), background-color 300ms var(--spring), box-shadow 300ms var(--spring); }
.pointer.is-on { opacity: 1; }
.pointer.is-snap { mix-blend-mode: normal; background: rgba(245, 247, 250, 0.075); box-shadow: inset 0 0 0 1px rgba(245, 247, 250, 0.16), 0 10px 40px rgba(0, 0, 0, 0.35); }
.pointer.is-hidden { opacity: 0; }
.has-pointer, .has-pointer a, .has-pointer button, .has-pointer summary, .has-pointer .cta { cursor: none; }
.has-pointer input { cursor: text; }

/* ---------- Floating island navigation ---------- */
.island {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); z-index: var(--z-nav); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 7px; width: max-content; max-width: calc(100vw - 24px);
  border-radius: 999px; background: rgba(13, 16, 22, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 0 12px 0 6px; color: var(--fg); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.island-links { display: flex; gap: 2px; font-size: 14px; }
.island-links a { padding: 9px 13px; border-radius: 999px; color: var(--muted); transition: color 300ms var(--spring), background-color 300ms var(--spring); }
.island-links a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.island-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--fg); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--hair); transition: background-color 300ms var(--spring), transform 400ms var(--spring); }
.island-icon:hover { background: rgba(255, 255, 255, 0.14); }
.island-icon:active { transform: scale(0.95); }
.island-get { min-height: 40px; display: inline-flex; align-items: center; padding: 0 17px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; transition: transform 400ms var(--spring); }
.island-get:active { transform: scale(0.97); }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; position: relative; background: rgba(255, 255, 255, 0.05); }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--fg); border-radius: 2px; transition: transform 500ms var(--spring); }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 23px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(7, 9, 13, 0.94); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(104px + env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu a { display: flex; align-items: center; min-height: 60px; color: var(--fg); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; border-bottom: 1px solid var(--hair); opacity: 0; transform: translateY(28px); animation: rise 700ms var(--spring) forwards; }
.menu a:nth-child(2) { animation-delay: 50ms; }
.menu a:nth-child(3) { animation-delay: 100ms; }
.menu a:nth-child(4) { animation-delay: 150ms; }
.menu a:nth-child(5) { animation-delay: 200ms; }
.menu a:nth-child(6) { animation-delay: 250ms; }
.menu a:nth-child(7) { animation-delay: 300ms; }
.menu .menu-github { gap: 12px; margin-top: 22px; border-bottom: 0; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.menu .menu-github svg { width: 22px; height: 22px; color: var(--fg); }
/* While the menu is open the page behind does not scroll and the search dock steps aside. */
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .dock { display: none; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Search dock: floats at the bottom, over the page, while you scroll ---------- */
.dock-scrim { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: rgba(4, 5, 8, 0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fade 300ms var(--spring) both; }
.dock-scrim[hidden] { display: none; }
.dock { position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-overlay); width: min(calc(100vw - 24px), 620px); margin: 0 auto; display: grid; gap: 10px; }
.dock-bar { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 12px 0 20px; border-radius: 999px; color: var(--muted); cursor: text;
  background: rgba(13, 16, 22, 0.78); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--hair-strong), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.6);
  transition: box-shadow 400ms var(--spring), background-color 400ms var(--spring); }
.dock-bar:hover, .dock-bar:focus-within { background: rgba(18, 22, 30, 0.9); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 28px 80px rgba(0, 0, 0, 0.7); }
.dock-bar input { flex: 1; min-width: 0; height: 58px; background: none; border: 0; outline: none; color: var(--fg); font: 400 17px/1 var(--font); letter-spacing: -0.01em; }
.dock-bar input::placeholder { color: var(--muted); }
.dock-bar input::-webkit-search-cancel-button { display: none; }
.dock-panel { box-shadow: 0 0 0 1px var(--hair-strong), 0 -30px 120px rgba(0, 0, 0, 0.6); animation: lift 520ms var(--spring) both; }
.dock-panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes lift { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.kbd-button { font: 500 12px/1 var(--font); padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); }
.palette-status { padding: 12px 18px 4px; font-size: 13px; color: var(--muted); }
.palette-results { max-height: min(50vh, 420px); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.result { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; color: var(--fg); transition: background-color 200ms var(--spring); }
.result[aria-selected="true"], .result:hover { background: rgba(255, 255, 255, 0.06); }
.result img, .result .tile { width: 44px; height: 44px; border-radius: 11px; }
.result .tile { display: grid; place-items: center; background: var(--core-2); box-shadow: inset 0 0 0 1px var(--hair); font-weight: 600; color: var(--muted); }
.result-text { display: grid; min-width: 0; }
.result-text strong { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-text strong em { font-style: normal; font-weight: 400; color: var(--muted); }
.result-text span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: rgba(52, 211, 153, 0.1); color: #7ee8bd; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.pending { background: rgba(251, 191, 36, 0.1); color: var(--warn); }
.status.pre { background: rgba(77, 163, 255, 0.12); color: #9ccbff; }
.palette-empty { padding: 26px 20px 30px; display: grid; gap: 8px; }
.palette-empty strong { font-size: 17px; font-weight: 600; }
.palette-empty p { color: var(--muted); font-size: 14px; max-width: 52ch; }
.palette-foot { display: flex; gap: 18px; padding: 11px 18px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.palette-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- App sheet: what a search result opens (never the repository) ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 1); background: rgba(4, 5, 8, 0.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fade 300ms var(--spring) both; }
.sheet-scrim[hidden], .sheet[hidden] { display: none; }
.sheet { position: fixed; z-index: calc(var(--z-overlay) + 2); left: 0; right: 0; top: 50%; width: min(calc(100vw - 24px), 480px); margin: 0 auto; transform: translateY(-50%); animation: sheet-in 520ms var(--spring) both; box-shadow: 0 0 0 1px var(--hair-strong), 0 60px 140px rgba(0, 0, 0, 0.75); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(calc(-50% + 18px)) scale(0.98); } }
.sheet .core { padding: 28px; display: grid; gap: 18px; overscroll-behavior: contain; max-height: calc(100dvh - 48px); overflow-y: auto; }
.sheet-close { position: absolute; right: 16px; top: 16px; min-height: 32px; }
.sheet-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; padding-right: 56px; }
.sheet-visual img, .sheet-visual .tile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 17px; }
.sheet-visual .tile { background: var(--core-2); box-shadow: inset 0 0 0 1px var(--hair); font-size: 28px; font-weight: 600; color: var(--muted); }
.sheet-head div { display: grid; min-width: 0; }
.sheet-head strong { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.sheet-head span { color: var(--muted); font-size: 15px; }
.sheet-tagline { color: var(--muted); font-size: 16px; }
.sheet-facts { grid-template-columns: 1.3fr 1fr 1.2fr; }
.sheet-cta { justify-content: space-between; cursor: pointer; }
.sheet-note { color: var(--muted); font-size: 14px; }
.result { width: 100%; text-align: left; }

/* ---------- Hero ---------- */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 168px 24px 56px; display: grid; justify-items: center; text-align: center; }
.hero h1 { margin-top: 22px; }
.lede { margin-top: 26px; max-width: 58ch; font-size: 19px; color: var(--muted); }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 8px 0 26px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 20px 60px rgba(245, 247, 250, 0.12); transition: transform 500ms var(--spring); will-change: transform; cursor: default; }
.cta i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--fg); transition: transform 500ms var(--spring); }
.cta:hover i { transform: translateY(2px) scale(1.06); }
.cta:active { transform: scale(0.98); }
.ghost { min-height: 56px; padding: 0 24px; border-radius: 999px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair-strong); font-weight: 500; font-size: 16px; transition: background-color 400ms var(--spring), transform 400ms var(--spring); }
.ghost:hover { background: rgba(255, 255, 255, 0.08); }
.ghost:active { transform: scale(0.98); }
.get-note { margin-top: 18px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.get-note strong { color: var(--fg); font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 2.2s var(--spring) infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* ---------- Store window mock ---------- */
.mock-stage { width: 100%; margin-top: 80px; perspective: 1600px; }
.mock { --rx: 0deg; --ry: 0deg; max-width: 1000px; margin: 0 auto; text-align: left; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 700ms var(--spring); box-shadow: 0 0 0 1px var(--hair), 0 80px 160px rgba(0, 0, 0, 0.7); }
.mock-bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--hair); }
.mock-bar span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.mock-bar span:nth-child(2) { background: #febc2e; }
.mock-bar span:nth-child(3) { background: #28c840; }
.mock-bar em { margin: 0 auto; padding-right: 52px; font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); }
.mock-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.mock-side { padding: 16px 10px; border-right: 1px solid var(--hair); display: grid; gap: 4px; align-content: start; font-size: 14px; color: var(--muted); }
.mock-side li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.mock-side svg { width: 18px; height: 18px; }
.mock-side .is-active { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.mock-side b { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #1a0606; font-size: 12px; font-weight: 600; text-align: center; }
.mock-main { padding: 20px 20px 24px; min-width: 0; }
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mock-head strong { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.mock-search { display: inline-flex; align-items: center; gap: 8px; width: 190px; padding: 7px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13px; color: var(--muted); }
.mock-search svg { width: 15px; height: 15px; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.app-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--core-2); box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 500ms var(--spring); }
.app-card:hover { transform: translateY(-2px); }
.app-card img { width: 48px; height: 48px; border-radius: 11px; }
.app-meta { display: grid; min-width: 0; }
.app-meta strong { font-size: 15px; font-weight: 600; }
.app-meta span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { padding: 5px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: var(--fg); font-size: 13px; font-weight: 600; }

.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 65%); transition: opacity 400ms var(--spring); }
.spot:hover::before { opacity: 1; }

/* ---------- Icon shelf ---------- */
.shelf { padding: 96px 0 0; display: grid; gap: 18px; }
.shelf-title { text-align: center; font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 18px; padding: 0 24px; }
.motion-toggle { justify-self: center; min-height: 36px; padding: 0 14px; margin: -8px 0 6px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); transition: color 300ms var(--spring), background-color 300ms var(--spring); }
.motion-toggle:hover { color: var(--fg); background: rgba(255, 255, 255, 0.08); }
.motion-paused .marquee-track, .motion-paused .backdrop::before, .motion-paused .live-dot, .motion-paused .closing img { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.marquee-track { display: flex; gap: 22px; width: max-content; padding: 6px 11px; }
.marquee-track img { width: 72px; height: 72px; border-radius: 17px; transition: transform 500ms var(--spring); }
.marquee-track li:hover img { transform: scale(1.12) translateY(-3px); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide 48s linear infinite; }
  .marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 58s; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Sections ---------- */
.section { max-width: var(--wrap); margin: 0 auto; padding: 144px 24px 0; }
.section > h2 { margin: 18px 0 44px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bento-wide { grid-column: span 7; }
.bento-narrow { grid-column: span 5; }
.bento .core { height: 100%; padding: 32px; display: grid; gap: 14px; align-content: start; }
.bento p { color: var(--muted); font-size: 16px; max-width: 54ch; }
.card-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hair); color: var(--fg); }
.card-icon.ok { color: var(--ok); }
.inline-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 500; font-size: 15px; width: max-content; }
.inline-link i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); transition: transform 500ms var(--spring); }
.inline-link i svg { width: 15px; height: 15px; }
.inline-link:hover i { transform: translate(3px, -2px) scale(1.06); }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.rules li { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--core-2); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); font-size: 15px; line-height: 1.45; }
.rules li strong { color: var(--fg); font-weight: 600; }
.rules li { display: block; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }

.questions { display: grid; gap: 12px; max-width: 780px; }
.questions .shell { padding: 5px; border-radius: 24px; }
.questions .core { border-radius: 19px; padding: 20px 22px; }
.questions summary { cursor: pointer; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 500ms var(--spring); flex: none; margin-right: 4px; }
.questions details[open] summary::after { transform: rotate(-135deg); }
.questions p { margin-top: 12px; color: var(--muted); font-size: 16px; max-width: 62ch; }

.closing { max-width: var(--wrap); margin: 0 auto; padding: 176px 24px 144px; display: grid; justify-items: center; text-align: center; }
.closing img { width: 72px; height: 72px; margin-bottom: 26px; }
.closing .hero-actions { margin-top: 34px; }

/* ---------- Figures ---------- */
.figures { max-width: var(--wrap); width: 100%; margin: 64px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.figures div { padding-top: 18px; border-top: 1px solid var(--hair-strong); }
.figures dt { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.figures dd { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- Categories ---------- */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cat { display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left; padding: 18px; border-radius: 22px; background: var(--core); box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 600ms var(--spring), background-color 400ms var(--spring); }
.cat:hover { transform: translateY(-4px); background: var(--core-2); }
.cat:active { transform: scale(0.98); }
.cat-icons { display: flex; height: 40px; margin-bottom: 14px; }
.cat-icons img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 2px var(--core); transition: transform 600ms var(--spring); }
.cat-icons img + img { margin-left: -10px; }
.cat:hover .cat-icons img + img { transform: translateX(5px); }
.cat:hover .cat-icons img:nth-child(3) { transform: translateX(10px); }
.cat:hover .cat-icons img:nth-child(4) { transform: translateX(15px); }
.cat strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.cat > span:last-child { font-size: 13px; color: var(--muted); }

/* ---------- Fresh and popular lists ---------- */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lists .core { padding: 26px 18px 14px; height: 100%; }
.lists h3 { padding: 0 10px 14px; }
.rows { display: grid; }
.row-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 14px; text-align: left; transition: background-color 300ms var(--spring); }
.row-item:hover { background: rgba(255, 255, 255, 0.05); }
.row-item img { width: 40px; height: 40px; border-radius: 10px; }
.row-item span { display: grid; min-width: 0; }
.row-item strong { font-size: 15px; font-weight: 600; }
.row-item em { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* ---------- App page preview ---------- */
.page-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.page-mock { padding: 26px; display: grid; gap: 22px; }
.page-mock header { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.page-mock header img { width: 84px; height: 84px; border-radius: 20px; }
.page-mock header div { display: grid; min-width: 0; }
.page-mock header strong { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.page-mock header span:not(.pill) { color: var(--muted); font-size: 14px; }
.page-mock header em { font-style: normal; color: var(--muted); font-size: 14px; margin-top: 4px; }
.pill-solid { background: var(--fg); color: var(--bg); padding: 7px 22px; font-size: 14px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.facts div { padding: 14px 16px; background: var(--core-2); }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.whats-new { display: grid; gap: 6px; }
.whats-new strong { font-size: 15px; font-weight: 600; }
.whats-new p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.points { display: grid; gap: 26px; }
.points li { display: grid; gap: 6px; padding-left: 18px; border-left: 1px solid var(--hair-strong); }
.points strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.points span { color: var(--muted); font-size: 16px; }

/* ---------- Comparison ---------- */
.compare { display: grid; }
.compare [role="row"] { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; gap: 20px; padding: 18px 24px; border-top: 1px solid var(--hair); font-size: 16px; }
.compare [role="row"]:first-child { border-top: 0; }
.compare-head { font-size: 13px !important; color: var(--muted); }
.compare [role="rowheader"] { font-weight: 600; }
.compare [role="cell"]:nth-child(2) { color: var(--muted); }
.compare [role="columnheader"]:last-child { color: var(--fg); font-weight: 600; }

/* ---------- Submit your app ---------- */
.submit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.submit-text { display: grid; gap: 30px; }
.section-lede { color: var(--muted); max-width: 52ch; font-size: 18px; }
.submit-form { padding: 28px; display: grid; gap: 10px; }
.submit-form label { font-size: 14px; font-weight: 500; margin-top: 8px; }
.submit-form label:first-child { margin-top: 0; }
.submit-form label span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.submit-form input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--core-2); color: var(--fg); font: 400 16px/1 var(--font); box-shadow: inset 0 0 0 1px var(--hair-strong); transition: box-shadow 300ms var(--spring); }
.submit-form input::placeholder { color: #7f8998; }
.submit-form input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px rgba(77, 163, 255, 0.22); }
.submit-form input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
.field-help { font-size: 13px; color: var(--muted); }
.submit-button { margin-top: 14px; justify-self: start; border: 0; cursor: pointer; }
.submit-button[disabled] { opacity: 0.6; }
.submit-result { min-height: 24px; font-size: 15px; color: var(--muted); }
.submit-result.is-ok { color: #7ee8bd; }
.submit-result.is-warn { color: var(--warn); }
.submit-result.is-bad { color: var(--bad); }

/* ---------- Maker card ---------- */
.maker { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 32px; }
.maker img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair-strong), 0 0 0 6px rgba(255, 255, 255, 0.04); }
.maker-text { display: grid; gap: 2px; }
.maker-text strong { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.maker-text span { color: var(--muted); font-size: 15px; }
.maker-text p { margin-top: 10px; color: var(--muted); font-size: 16px; max-width: 50ch; }
.maker .cta { cursor: pointer; }
.maker .cta i svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.site-footer { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 150px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
.footer-top { display: grid; gap: 14px; align-content: start; }
.footer-top .brand { padding: 0; }
.footer-top p { color: var(--muted); font-size: 15px; max-width: 32ch; }
.footer-links { display: flex; gap: 64px; font-size: 15px; }
.footer-links div { display: grid; gap: 10px; align-content: start; }
.footer-links strong { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.footer-links a { color: var(--fg); padding: 2px 0; transition: color 300ms var(--spring); }
.footer-links a:hover { color: var(--brand); }
.footer-links .github { display: inline-flex; align-items: center; gap: 9px; }
.footer-links .github svg { width: 20px; height: 20px; }

/* ---------- Scroll reveal: heavy fade-up (JS adds .js; without it everything is visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 900ms var(--spring), transform 900ms var(--spring); transition-delay: var(--delay, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .mock, .dock-panel, .dock-scrim, .menu a { transition: none; animation: none; opacity: 1; transform: none; }
  .sheet, .sheet-scrim { animation: none; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1024px) {
  .bento-wide, .bento-narrow { grid-column: span 12; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-grid { grid-template-columns: 1fr; gap: 36px; }
  .submit-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .island { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); transform: none; width: auto; max-width: none; justify-content: space-between; }
  .island-icon, .burger { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .burger span { left: 14px; right: 14px; }
  .burger span:first-child { top: 18px; }
  .burger span:last-child { top: 25px; }
  h1 { font-size: clamp(34px, 10.5vw, 44px); }
  h2 { font-size: clamp(28px, 8vw, 36px); }
  .footer-links a, .inline-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-links div { gap: 0; }
  .questions summary { min-height: 44px; }
  .kbd-button { min-height: 36px; padding: 0 12px; }
  .motion-toggle { min-height: 44px; }
  .cat { padding: 16px; }
  .row-item { min-height: 60px; }
  .island-links, .island-get { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero { padding: 128px 16px 40px; }
  .lede { font-size: 17px; }
  .cta, .ghost { width: 100%; justify-content: space-between; }
  .ghost { justify-content: center; }
  .mock-stage { margin-top: 56px; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side, .mock-search { display: none; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card:nth-child(n+5) { display: none; }
  .section { padding: 96px 16px 0; }
  .bento .core { padding: 24px; }
  .rules { grid-template-columns: 1fr; }
  .closing { padding: 120px 16px 96px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; margin-top: 48px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lists { grid-template-columns: 1fr; }
  .maker { grid-template-columns: 72px minmax(0, 1fr); padding: 24px; gap: 18px; }
  .maker img { width: 72px; height: 72px; }
  .maker .cta { grid-column: 1 / -1; }
  .submit-form { padding: 22px; }
  .island-icon { margin-left: auto; }
  .burger { margin-left: 0 !important; }
  .page-mock header { grid-template-columns: 64px minmax(0, 1fr); }
  .page-mock header img { width: 64px; height: 64px; border-radius: 15px; }
  .page-mock header .pill { grid-column: 1 / -1; justify-self: start; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare [role="row"] { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; }
  .compare-head { display: none !important; }
  .compare [role="cell"]:nth-child(2)::before { content: "By hand: "; }
  .compare [role="cell"]:nth-child(3)::before { content: "OpenDMG: "; color: var(--muted); }
  .site-footer { grid-template-columns: 1fr; padding: 48px 16px 130px; }
  .footer-links { flex-wrap: wrap; gap: 32px 48px; }
  .marquee-track img { width: 56px; height: 56px; border-radius: 13px; }
  .dock { bottom: max(12px, env(safe-area-inset-bottom)); width: auto; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .palette-results { max-height: min(46dvh, 380px); }
  .dock-bar { min-height: 54px; }
  .dock-bar input { height: 54px; font-size: 16px; }
  .dock-hint { display: none; }
  .palette-foot { display: none; }
  .sheet .core { padding: 22px; }
  .sheet-facts { grid-template-columns: 1fr 1fr; }
  .sheet-close { min-height: 44px; }
  .status { padding: 4px 8px; }
}

/* =====================================================================
   Liquid glass and 3D (high-end-visual-design + ui-ux-pro-max).
   Colour orbs drift behind translucent panels; panels blur and saturate
   what is behind them and carry a highlight that follows the pointer.
   ===================================================================== */
.orb { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
.orb-a { width: 640px; height: 640px; left: -180px; top: -160px; background: #2f6bff; opacity: 0.42; }
.orb-b { width: 560px; height: 560px; right: -160px; top: 26vh; background: #7a4dff; opacity: 0.32; }
.orb-c { width: 620px; height: 620px; left: 24%; bottom: -280px; background: #12b5a0; opacity: 0.24; }
@media (prefers-reduced-motion: no-preference) {
  .orb-a { animation: orb-a 24s ease-in-out infinite alternate; }
  .orb-b { animation: orb-b 30s ease-in-out infinite alternate; }
  .orb-c { animation: orb-c 34s ease-in-out infinite alternate; }
}
@keyframes orb-a { to { transform: translate3d(220px, 160px, 0) scale(1.15); } }
@keyframes orb-b { to { transform: translate3d(-200px, 180px, 0) scale(0.9); } }
@keyframes orb-c { to { transform: translate3d(160px, -200px, 0) scale(1.1); } }
.motion-paused .orb, .motion-paused .orbit, .motion-paused .orbit img, .motion-paused .steps-card li { animation-play-state: paused !important; }
.backdrop::after { background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 60%, rgba(7, 9, 13, 0.7) 100%); }

/* Glass panels: the outer tray refracts, the inner plate stays readable. */
.shell {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.38);
}
.core { background: linear-gradient(180deg, rgba(13, 16, 22, 0.58), rgba(13, 16, 22, 0.76)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); }
/* Specular highlight that follows the pointer (position set by main.js). */
.core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.13), transparent 62%); transition: opacity 500ms var(--spring); }
.core:hover::after { opacity: 1; }
.island, .dock-bar {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.5);
}
.dock-bar:hover, .dock-bar:focus-within { background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.13)); }
.cat, .rules li, .eyebrow, .ghost, .motion-toggle, .submit-form input { background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.cat:hover { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); }
.eyebrow { color: #c3cad6; }

/* ---------- Hero stage: real screenshot in a glass window, icons orbiting in 3D ---------- */
.stage { position: relative; width: 100%; max-width: 1040px; margin: 96px auto 0; perspective: 1500px; perspective-origin: 50% 20%; transform-style: preserve-3d; }
.glass-window { margin: 0; padding: 10px; border-radius: 28px; transform-style: preserve-3d;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 80px 160px rgba(0, 0, 0, 0.65), 0 0 140px rgba(77, 163, 255, 0.16);
  transform: rotateX(var(--tilt, 15deg)) scale(var(--zoom, 0.92)); transform-origin: 50% 100%; will-change: transform; }
.glass-window img { width: 100%; height: auto; border-radius: 19px; }
.orbit { position: absolute; left: 50%; top: 44%; width: 0; height: 0; transform-style: preserve-3d; --r: 610px; transform: rotateX(-12deg) rotateZ(5deg); }
.orbit-b { --r: 730px; top: 52%; transform: rotateX(-18deg) rotateZ(-7deg); }
.orbit span { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--r)); }
.orbit img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14); transform: rotateY(calc(var(--i) * -36deg)); backface-visibility: visible; }
.orbit span:nth-child(1) { --i: 0; } .orbit span:nth-child(2) { --i: 1; } .orbit span:nth-child(3) { --i: 2; } .orbit span:nth-child(4) { --i: 3; } .orbit span:nth-child(5) { --i: 4; }
.orbit span:nth-child(6) { --i: 5; } .orbit span:nth-child(7) { --i: 6; } .orbit span:nth-child(8) { --i: 7; } .orbit span:nth-child(9) { --i: 8; } .orbit span:nth-child(10) { --i: 9; }
@media (prefers-reduced-motion: no-preference) {
  .orbit-a { animation: orbit-a 80s linear infinite; }
  .orbit-a img { animation: face-a 80s linear infinite; }
  .orbit-b { animation: orbit-b 110s linear infinite; }
  .orbit-b img { animation: face-b 110s linear infinite; }
}
@keyframes orbit-a { from { transform: rotateX(-12deg) rotateZ(5deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateZ(5deg) rotateY(360deg); } }
@keyframes orbit-b { from { transform: rotateX(-18deg) rotateZ(-7deg) rotateY(360deg); } to { transform: rotateX(-18deg) rotateZ(-7deg) rotateY(0deg); } }
/* Icons turn against the ring so they always face the viewer. */
@keyframes face-a { from { transform: rotateY(calc(var(--i) * -36deg)); } to { transform: rotateY(calc(var(--i) * -36deg - 360deg)); } }
@keyframes face-b { from { transform: rotateY(calc(var(--i) * -36deg - 360deg)); } to { transform: rotateY(calc(var(--i) * -36deg)); } }

/* ---------- Tour: three screenshots fanned out in 3D ---------- */
.fan { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; perspective: 1700px; }
.fan-item { margin: 0; padding: 8px 8px 0; border-radius: 22px; cursor: pointer;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 50px 110px rgba(0, 0, 0, 0.55);
  transition: transform 800ms var(--spring); will-change: transform; }
.fan-item img { width: 100%; height: auto; border-radius: 15px; }
.fan-item figcaption { display: grid; gap: 2px; padding: 14px 10px 16px; }
.fan-item figcaption strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.fan-item figcaption span { font-size: 14px; color: var(--muted); }
.fan-left { transform: rotateY(26deg) translateX(14%) scale(0.9); z-index: 1; }
.fan-center { transform: translateZ(80px) scale(1.08); z-index: 2; }
.fan-right { transform: rotateY(-26deg) translateX(-14%) scale(0.9); z-index: 1; }
.fan-item:hover, .fan-item:focus-visible { transform: rotateY(0deg) translateZ(140px) scale(1.14); z-index: 3; outline: none; }

/* ---------- Text and visual side by side ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split-text { display: grid; gap: 22px; justify-items: start; }
.split-text h2 { margin: 0; }
.split-reverse .split-text { order: 2; }
[data-tilt3d] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--spring); will-change: transform; }
.steps-card { margin: 0; padding: 14px; list-style: none; display: grid; gap: 6px; }
.steps-card li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 16px; }
.steps-card i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted); }
.steps-card span { display: grid; gap: 1px; color: var(--muted); font-size: 15px; }
.steps-card strong { color: var(--fg); font-size: 17px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .steps-card li { animation: step-row 7.5s var(--spring) infinite; }
  .steps-card li i { animation: step-dot 7.5s var(--spring) infinite; }
  .steps-card li:nth-child(2), .steps-card li:nth-child(2) i { animation-delay: 1.2s; }
  .steps-card li:nth-child(3), .steps-card li:nth-child(3) i { animation-delay: 2.4s; }
  .steps-card li:nth-child(4), .steps-card li:nth-child(4) i { animation-delay: 3.6s; }
  .steps-card li:nth-child(5), .steps-card li:nth-child(5) i { animation-delay: 4.8s; }
}
@keyframes step-row { 0%, 100% { background-color: transparent; } 6%, 22% { background-color: rgba(255, 255, 255, 0.07); } 34% { background-color: transparent; } }
@keyframes step-dot { 0%, 4% { background-color: rgba(255, 255, 255, 0.07); color: var(--muted); } 12%, 100% { background-color: rgba(52, 211, 153, 0.18); color: var(--ok); } }
.feed { padding: 22px 14px 12px; }
.feed-title { display: flex; align-items: center; gap: 10px; padding: 0 10px 12px; font-size: 14px; font-weight: 500; color: var(--muted); }

/* ---------- Roadmap ---------- */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.roadmap .core { height: 100%; padding: 26px; display: grid; gap: 10px; align-content: start; }
.roadmap p { color: var(--muted); font-size: 16px; }
.stage-tag { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.is-done .stage-tag { background: rgba(52, 211, 153, 0.14); color: #7ee8bd; }
.is-now .stage-tag { background: rgba(77, 163, 255, 0.18); color: #9ccbff; }
.is-now { box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 30px 80px rgba(0, 0, 0, 0.38), 0 0 60px rgba(77, 163, 255, 0.18); }

@media (prefers-reduced-motion: reduce) { .glass-window, .fan-item, [data-tilt3d] { transition: none; transform: none; } }
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-reverse .split-text { order: 0; }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbit { --r: 430px; } .orbit-b { --r: 520px; }
}
@media (max-width: 768px) {
  .stage { margin-top: 64px; }
  .glass-window { padding: 6px; border-radius: 18px; }
  .glass-window img { border-radius: 13px; }
  .orbit { --r: 190px; top: 40%; } .orbit-b { display: none; }
  .orbit span, .orbit img { width: 40px; height: 40px; border-radius: 10px; }
  .orbit span { left: -20px; top: -20px; }
  .fan { grid-template-columns: 1fr; gap: 18px; perspective: none; margin-top: 36px; }
  .fan-left, .fan-center, .fan-right, .fan-item:hover, .fan-item:focus-visible { transform: none; }
  .roadmap { grid-template-columns: 1fr; }
  .steps-card li { padding: 12px; }
  .orb { filter: blur(80px); }
}

/* Glass over light content (the screenshots) needs a dark base to stay readable. */
.island, .dock-bar, .dock-bar:hover, .dock-bar:focus-within {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.09)), rgba(9, 12, 17, 0.62);
}
/* The ring sits low so near icons pass along the window's bottom edge, not over its content. */
.orbit { top: 80%; }
.orbit-b { top: 90%; }
@media (max-width: 768px) { .orbit { top: 84%; } }

/* The orbit is drawn twice: one copy behind the window and one in front. Each icon fades
   between the copies as it crosses the side of the ring, so the window itself never has
   to be depth-sorted against the icons (which split it along a visible seam). */
.stage { perspective: none; transform-style: flat; }
.orbits { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 20%; transform-style: preserve-3d; pointer-events: none; }
.orbits-back { z-index: 0; }
.orbits-front { z-index: 2; }
.glass-window { position: relative; z-index: 1; transform: perspective(1500px) rotateX(var(--tilt, 15deg)) scale(var(--zoom, 0.92)); }
.orbits-front .orbit span:nth-child(n+4):nth-child(-n+8) img { opacity: 0; }
.orbits-back .orbit span:nth-child(-n+3) img, .orbits-back .orbit span:nth-child(n+9) img { opacity: 0; }
/* Opacity goes on the icon itself: on the span it would flatten the 3D transform of its child. */
@media (prefers-reduced-motion: no-preference) {
  .orbits-front .orbit-a img { animation: face-a 80s linear infinite, near 80s linear infinite; animation-delay: 0s, calc(var(--i) * -8s); }
  .orbits-back .orbit-a img { animation: face-a 80s linear infinite, far 80s linear infinite; animation-delay: 0s, calc(var(--i) * -8s); }
  .orbits-front .orbit-b img { animation: face-b 110s linear infinite, near 110s linear infinite; animation-delay: 0s, calc((var(--i) - 10) * 11s); }
  .orbits-back .orbit-b img { animation: face-b 110s linear infinite, far 110s linear infinite; animation-delay: 0s, calc((var(--i) - 10) * 11s); }
}
@keyframes near { 0%, 23.5% { opacity: 1; } 25%, 75% { opacity: 0; } 76.5%, 100% { opacity: 1; } }
@keyframes far { 0%, 23.5% { opacity: 0; } 25%, 75% { opacity: 1; } 76.5%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .glass-window { transform: none; } }

/* Calmer colour behind text: muted copy must stay readable on top of the orbs. */
.orb-a { opacity: 0.32; } .orb-b { opacity: 0.24; } .orb-c { opacity: 0.18; }
@media (max-width: 768px) { .orb-a { opacity: 0.22; width: 420px; height: 420px; } .orb-b { opacity: 0.16; width: 380px; height: 380px; } .orb-c { opacity: 0.12; width: 400px; height: 400px; } }

/* =====================================================================
   Isometric wall and lavender accent (idea: a tilted grid of app windows
   on a dark striped ground, with soft violet gradient buttons).
   ===================================================================== */
:root { --lav: linear-gradient(100deg, #8a92ff, #b3a4ff 55%, #dccfff); }
.cta, .pill-solid { background: var(--lav); color: #0b0d14; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 50px rgba(138, 146, 255, 0.35); }
.cta i { background: #0b0d14; color: #dccfff; }
.wall { position: relative; height: 660px; margin-top: 56px; border-radius: 32px; overflow: hidden; isolation: isolate;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 16px), #0b0d15;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 100px rgba(0, 0, 0, 0.5); }
.wall-plane { position: absolute; left: 50%; top: 50%; width: 1600px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: center;
  transform: translate(-50%, -50%) rotateX(52deg) rotateZ(18deg); }
.wall-col { display: grid; gap: 40px; will-change: transform; }
.wall-tile { padding: 9px; border-radius: 22px; background: linear-gradient(160deg, #1c2030, #12141d); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.14), 50px 70px 90px rgba(0, 0, 0, 0.55); }
.wall-tile img { width: 100%; height: auto; border-radius: 14px; opacity: 0.42; }
.wall-tile.is-hero { background: var(--lav); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 50px 70px 110px rgba(0, 0, 0, 0.6), 0 0 120px rgba(138, 146, 255, 0.45); }
.wall-tile.is-hero img { opacity: 1; }
.wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(7, 9, 13, 0.85) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .wall-col { animation: wall-up 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  .wall-col:nth-child(2) { animation-name: wall-down; }
}
@keyframes wall-up { from { transform: translateY(70px); } to { transform: translateY(-70px); } }
@keyframes wall-down { from { transform: translateY(-70px); } to { transform: translateY(70px); } }
.motion-paused .wall-col { animation-play-state: paused !important; }
.tour-notes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) and (min-width: 769px) { .tour-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tour-notes li { display: grid; gap: 4px; padding-left: 18px; box-shadow: inset 2px 0 0 rgba(179, 164, 255, 0.55); }
.tour-notes strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.tour-notes span { color: var(--muted); font-size: 15px; }
@media (max-width: 768px) {
  .wall { height: 380px; margin-top: 36px; border-radius: 22px; }
  .wall-plane { width: 1150px; gap: 22px; }
  .wall-col { gap: 22px; }
  .wall-tile { padding: 5px; border-radius: 13px; }
  .wall-tile img { border-radius: 9px; }
  .tour-notes { grid-template-columns: 1fr; gap: 18px; }
}
.island-get { background: var(--lav); color: #0b0d14; }