:root {
  --bg: #f6f0e8;
  --fg: #1c1917;
  --muted: rgba(28, 25, 23, 0.55);
  --accent: #7c5cff;
  --accent2: #e86a33;
  --glass: rgba(255, 255, 255, 0.45);
  --hub-bg: #161618;
  --hub-side: rgba(40, 40, 46, 0.95);
  --radius: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
}

.site-header {
  position: fixed; top: 0; z-index: 50; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2rem;
}
.brand {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--fg); font-weight: 700; font-size: 1.35rem;
}
.brand .ver {
  font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 0.5rem;
  background: rgba(28, 25, 23, 0.08); color: var(--muted);
}
.site-nav { display: flex; gap: 1rem; align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav-dl { color: var(--fg) !important; }

main { padding-top: 5.5rem; max-width: 72rem; margin: 0 auto; padding-inline: 1.5rem; }

.intro { text-align: center; padding: 2rem 0 2.5rem; }
.intro h1 {
  font-size: clamp(2.5rem, 8vw, 5.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 1.75rem;
}
.intro mark {
  background: none; color: inherit; position: relative; padding-left: 3.25rem;
}
.intro mark::before {
  content: '';
  position: absolute; left: 0; bottom: 0.15em; width: 2.75rem; height: 2.75rem;
  background: url('assets/icon.svg') center/contain no-repeat;
}
.intro-cta {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1rem;
}
.intro-sub { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 1.35rem; border-radius: 1rem; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: none; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s;
}
.btn-dark {
  background: var(--fg); color: #f6f0e8;
  box-shadow: 0 12px 40px rgba(28, 25, 23, 0.2);
}
.btn-dark:hover { transform: translateY(-2px); }
.btn-soft {
  background: rgba(28, 25, 23, 0.06); color: var(--fg);
}
.btn-ico::before {
  content: ''; width: 1.1rem; height: 1.1rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7c-1-1.15-1.9-1-2.9-.55-1 .45-1.95 1.55-2.75 2.8-.45.6-.9 1.85-.9 2.65 0 .28.06.5.1.62.04.02.1.04.2.04.8 0 1.8-.5 2.35-1.25zM19 10c-.1.08-1.8 1.1-1.8 3.1 0 2.5 2.2 3.4 2.3 3.45-.02.04-.4 1.15-1.25 2.35-.75 1.05-1.5 2.15-2.65 2.15s-1.45-.65-2.75-.65c-1.3 0-1.8.65-2.85.65s-1.9-1.05-2.7-2.2C4.3 16.1 3.5 14 3.5 11.9c0-3.15 2.05-4.85 4.25-4.85.95 0 1.95.65 2.6.65.6 0 1.65-.65 2.9-.65.5 0 2.35.05 3.35 1.55z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ——— Interactive scene (Alcove layout) ——— */
.scene {
  position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 15rem;
  border-radius: 2rem; overflow: hidden; isolation: isolate;
  background: #1c1917; user-select: none;
  box-shadow: 0 40px 100px rgba(28, 25, 23, 0.25);
}
.scene-wall {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 100%),
    linear-gradient(125deg, #c48b5c 0%, #6b8f5e 40%, #3d4a6b 100%);
}
.scene-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 7.5rem; height: 1.6rem; background: #000; border-radius: 0 0 1rem 1rem; z-index: 5;
}

.scene-menubar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 1.75rem;
  display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem;
  font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,.85);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.scene[data-locked='false'] .scene-menubar {
  opacity: 1; pointer-events: auto;
}
.mb-fill { flex: 1; }
.mb-stat {
  padding: 0.1rem 0.35rem; border-radius: 0.35rem;
  background: rgba(255,255,255,.1); font-variant-numeric: tabular-nums;
}
.mb-tray {
  border: none; background: rgba(255,255,255,.12); border-radius: 0.35rem; padding: 0.15rem;
  cursor: pointer; display: flex;
}
.mb-tray.active { background: rgba(124, 92, 255, 0.5); }

.scene-chips {
  position: absolute; top: 3.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.25rem; font-size: 0.8rem; font-weight: 700; color: #c4b5fd;
  opacity: 0; transition: opacity 0.5s 0.1s;
}
.scene[data-locked='false'] .scene-chips { opacity: 1; }
.chip { display: flex; align-items: center; gap: 0.35rem; }

.unlock {
  position: absolute; inset: 0; z-index: 8; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 28%;
}
.scene[data-locked='false'] .unlock { display: none; }
.unlock-shine {
  font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 700; color: rgba(255,255,255,.9);
  background: linear-gradient(105deg, #fff 20%, #c4b5fd 45%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 3s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

.scene-psst {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,.35);
}

.island-wrap {
  position: absolute; top: 0.35rem; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; align-items: center;
}
.island-pill {
  display: flex; align-items: center; gap: 0.5rem;
  height: 2rem; padding: 0 0.85rem; border-radius: 999px;
  background: #000; border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.pill-art {
  width: 1.25rem; height: 1.25rem; border-radius: 0.35rem;
  background: linear-gradient(135deg, #e8b84a, #6b3fa0);
}
.pill-wave {
  width: 2.5rem; height: 0.55rem; border-radius: 0.25rem;
  background: repeating-linear-gradient(90deg, transparent, #fff 2px, transparent 4px);
  animation: wave 0.9s linear infinite;
}
@keyframes wave { from { background-position: 0 0; } to { background-position: 16px 0; } }

.island-panel {
  margin-top: 0.5rem; width: min(34rem, 92vw);
  border-radius: 1.35rem; overflow: hidden;
  background: rgba(12, 12, 16, 0.72); backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: panelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: #fff; padding: 1rem 1.1rem;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.island-panel .row { display: flex; gap: 0.75rem; align-items: center; }
.island-panel .art-lg {
  width: 3.5rem; height: 3.5rem; border-radius: 0.65rem;
  background: linear-gradient(135deg, #f0c14b, #5c2d5e);
}
.island-panel .eq {
  display: flex; gap: 3px; align-items: flex-end; height: 2rem; margin-top: 0.75rem;
}
.island-panel .eq i {
  width: 4px; border-radius: 2px; background: #a78bfa;
  animation: eq 0.8s ease-in-out infinite alternate;
}
.island-panel .eq i:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.island-panel .eq i:nth-child(3) { animation-delay: 0.2s; height: 90%; }
.island-panel .eq i:nth-child(4) { animation-delay: 0.15s; height: 40%; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }

.nook-switch {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 9;
  display: flex; gap: 0.35rem; padding: 0.35rem; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
}
.nook-switch button {
  border: none; background: transparent; color: rgba(255,255,255,.7);
  font-size: 0.75rem; font-weight: 600; padding: 0.5rem 0.85rem; border-radius: 999px; cursor: pointer;
}
.nook-switch button.on { background: rgba(124, 92, 255, 0.45); color: #fff; }

.tray-pop {
  position: absolute; top: 2rem; right: 0.75rem; z-index: 11; width: 11rem;
  border-radius: 1rem; padding: 0.75rem;
  background: rgba(255,255,255,.85); backdrop-filter: blur(20px);
  color: var(--fg); font-size: 0.75rem; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.tray-pop header { font-weight: 800; margin-bottom: 0.5rem; }
.tray-metric { margin-bottom: 0.5rem; }
.tray-metric span { display: block; margin-bottom: 0.2rem; color: var(--muted); }
.bar { height: 4px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.bar i { display: block; height: 100%; background: #7c5cff; border-radius: inherit; }
.bar-blue i { background: #3b82f6; }
.tray-open-hub, .tray-links button {
  width: 100%; border: none; background: rgba(0,0,0,.06); border-radius: 0.5rem;
  padding: 0.4rem; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; cursor: pointer;
}

.hub-win {
  position: absolute; left: 6%; top: 14%; width: 68%; max-height: 72%; z-index: 7;
  border-radius: 0.85rem; overflow: hidden;
  background: var(--hub-bg); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  animation: hubIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hubIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.hub-win.minimized { display: none; }
.hub-title {
  display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.65rem;
  background: rgba(127,127,127,.15); color: rgba(255,255,255,.6); font-size: 0.75rem;
}
.hub-title .dots { display: flex; gap: 0.35rem; }
.hub-title i { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: block; background: #ff5f57; }
.hub-title i:nth-child(2) { background: #febc2e; }
.hub-title i:nth-child(3) { background: #28c840; }
.hub-close { margin-left: auto; border: none; background: rgba(255,255,255,.08); color: #fff; width: 1.5rem; height: 1.25rem; border-radius: 0.35rem; cursor: pointer; }
.hub-body { display: grid; grid-template-columns: 9.5rem 1fr; flex: 1; min-height: 0; overflow: hidden; }
.hub-side {
  background: var(--hub-side); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.hub-side button {
  border: none; background: transparent; color: rgba(255,255,255,.55); text-align: left;
  padding: 0.45rem 0.55rem; border-radius: 0.5rem; font-size: 0.72rem; cursor: pointer;
}
.hub-side button.on { background: rgba(124, 92, 255, 0.38); color: #fff; }
.hub-main { padding: 0.85rem; overflow: auto; color: #ececf2; font-size: 0.8rem; }
.hub-main h3 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.metric-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.metric-card {
  padding: 0.65rem; border-radius: 0.65rem; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.metric-card strong { font-size: 1.25rem; display: block; }

.dock-icon {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 9;
  width: 3.25rem; height: 3.25rem; border-radius: 0.85rem; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  animation: dockBounce 2.2s ease-in-out infinite;
}
@keyframes dockBounce { 50% { transform: translateY(-4px); } }

.feat-section { padding: 4rem 0 3rem; }
.feat-grid {
  display: grid; gap: 2rem 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  text-align: center; max-width: 56rem; margin: 0 auto 3rem;
}
.feat-grid article h2 { font-size: 1.35rem; margin: 0.75rem 0 0; line-height: 1.2; }
.feat-grid .ico { font-size: 2.5rem; }
.feat-foot { text-align: center; }
.gate { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }
.site-foot { text-align: center; padding: 2rem; color: var(--muted); font-size: 0.85rem; }
.site-foot a { color: inherit; }

@media (max-width: 640px) {
  .hub-body { grid-template-columns: 1fr; }
  .hub-side { flex-direction: row; flex-wrap: wrap; }
  .hub-win { width: 92%; left: 4%; top: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .unlock-shine, .pill-wave, .dock-icon, .island-panel { animation: none !important; }
}