/* CaveWall — Nocturne theme (tokens sourced from design/_ds/nocturne/styles.css) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-section: #262a60;
  --color-section-glow: #353b80;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

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


body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }
a { color: var(--color-neutral-400); text-decoration: none; }
a:hover { color: var(--color-accent-300); }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 40px; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 15px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 13px 22px; border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px;
}
.elev-sm { box-shadow: var(--shadow-sm); }

/* — topbar — */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(14px);
}
.nav {
  display: flex; align-items: center; gap: 30px;
  padding: 18px 40px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 500; margin-right: auto; color: var(--color-text);
}
.nav-brand:hover { color: var(--color-text); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--color-accent); border: 1px solid var(--color-accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 15px; }
.nav-actions { display: flex; gap: 12px; }

/* — hero — */
.hero { padding: 84px 40px 40px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
}
.eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-300); margin-bottom: var(--space-4);
}
.hero h1 { font-size: 62px; margin: 0 0 var(--space-6); }
.accent-glow { color: var(--color-accent); text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.hero-sub {
  font-size: 19px; line-height: 1.6; color: var(--color-neutral-300);
  max-width: 44ch; margin: 0 0 var(--space-8);
}
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.install-cmd {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 10px 10px 10px 16px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  font-family: 'SF Mono', 'Menlo', monospace; font-size: 13.5px; max-width: fit-content;
}
.install-cmd .ph-terminal { color: var(--color-accent); flex: none; }
.install-cmd code { color: var(--color-neutral-200); white-space: nowrap; overflow-x: auto; }
.install-cmd-copy {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--color-neutral-400); cursor: pointer;
}
.install-cmd-copy:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
.install-cmd-copy.copied { color: var(--color-accent); }
.install-note { font-size: 12.5px; color: var(--color-neutral-500); margin-top: 8px; max-width: 52ch; }
.install-note a { color: var(--color-neutral-400); text-decoration: underline; text-underline-offset: 2px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-400); }
.badge .ph, .badge .ph-fill { color: var(--color-accent); }

/* — demo — */
.demo-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 40px 90px rgba(0,0,0,0.6);
  border: 1px solid var(--color-neutral-800);
  container-type: inline-size;
}
.demo-titlebar {
  position: relative; z-index: 3; height: 30px; display: flex; align-items: center; gap: 16px;
  padding: 0 14px; background: color-mix(in srgb, #0c0d16 55%, transparent);
  backdrop-filter: blur(8px); font-size: 12px; color: #d8d8e2;
}
.demo-titlebar .left { display: flex; gap: 16px; align-items: center; }
.demo-titlebar .left strong { font-weight: 600; }
.demo-titlebar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }

.wall {
  position: relative; aspect-ratio: 16/10.5; cursor: pointer; background: #12101f; overflow: hidden;
}
.wall-bg {
  position: absolute; inset: 0; background-size: 240% 240%;
  animation: drift 14s ease-in-out infinite;
  transition: background 0.4s ease;
}
.wall-bg.no-anim { animation: none; }
.wall video.wall-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.35s ease;
}
.wall video.wall-video.active { opacity: 1; }
.wall-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 10%, transparent 40%, rgba(0,0,0,0.4));
}
.wall-hint {
  position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #d8d8e2; background: color-mix(in srgb, #14151f 80%, transparent);
  border: 1px solid var(--color-neutral-800); border-radius: 999px; padding: 6px 12px;
  backdrop-filter: blur(10px); pointer-events: none; transition: opacity 0.2s ease;
}
.wall-hint .ph { color: var(--color-accent); }

@keyframes drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.panel {
  position: absolute; top: 6cqw; right: 2.4cqw; z-index: 4; width: 34cqw; padding: 2cqw;
  border-radius: 1.6cqw; background: color-mix(in srgb, #14151f 88%, transparent);
  border: 1px solid var(--color-neutral-800); backdrop-filter: blur(18px); box-shadow: var(--shadow-md);
}
.panel h5 {
  font-size: 1.6cqw; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-400); margin: 0 0 1.6cqw; font-weight: 500;
}
.panel-label {
  font-size: 1.3cqw; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 1.4cqw 0 0.8cqw;
}
.swatch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-bottom: 0.4cqw;
}
.swatch {
  display: block; aspect-ratio: 1; border-radius: 0.8cqw; border: none; padding: 0;
  cursor: pointer; outline-offset: 1px; position: relative; overflow: hidden;
}
.swatch.selected { outline: 2px solid var(--color-accent); }
.swatch video, .swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch-upload {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.8cqw;
  border: 1px dashed var(--color-neutral-600); background: transparent; color: var(--color-accent);
  cursor: pointer; font-size: 2cqw;
}
.swatch-upload:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.panel-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.6cqw; color: var(--color-neutral-300); padding: 0.8cqw 0;
}
.dot-row { display: flex; gap: 0.9cqw; }
.dot {
  width: 2cqw; height: 2cqw; border-radius: 50%; border: none; padding: 0; cursor: pointer; outline-offset: 2px;
}
.dot.selected { outline: 2px solid var(--color-accent); }
.toggle {
  display: inline-block; width: 4cqw; height: 2.3cqw; border-radius: 999px;
  background: var(--color-accent); position: relative; flex: none;
}
.toggle::after {
  content: ""; position: absolute; top: 0.28cqw; right: 0.28cqw;
  width: 1.74cqw; height: 1.74cqw; border-radius: 50%; background: #fff;
}
.demo-caption { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--color-neutral-400); }
.demo-caption .ph { color: var(--color-accent); }

/* — icon appearance selector — */
.icon-mode-row { display: flex; gap: 0.9cqw; margin-bottom: 0.4cqw; }
.icon-mode-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5cqw;
  background: transparent; border: none; padding: 0.4cqw; border-radius: 0.8cqw; cursor: pointer;
}
.icon-mode-btn.selected { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.icon-mode-swatch {
  width: 3.2cqw; height: 3.2cqw; border-radius: 0.9cqw; display: grid; place-items: center;
  font-size: 1.7cqw;
}
.icon-mode-label { font-size: 1.15cqw; color: var(--color-neutral-400); }
.icon-mode-btn.selected .icon-mode-label { color: var(--color-text); }
.icon-mode-default { background: color-mix(in srgb, var(--color-accent) 14%, #2a2c38); color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); }
.icon-mode-dark { background: #17181f; color: #eef0f8; border: 1px solid #3a3d4a; }
.icon-mode-clear { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: color-mix(in srgb, var(--color-accent) 70%, white); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); backdrop-filter: blur(4px); }
.icon-mode-tinted { background: var(--color-accent); color: #14151f; border: 1px solid color-mix(in srgb, var(--color-accent) 80%, black); }

/* — dock mock — mimics the macOS Dock (glass tray, glossy squircle icons,
   fisheye magnification via script.js, running dots + name tooltips) — */
.dock {
  position: absolute; left: 50%; bottom: 1.7cqw; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: flex-end; gap: 0.7cqw; padding: 0.7cqw 0.85cqw;
  border-radius: 1.7cqw;
  background:
    linear-gradient(to bottom, color-mix(in srgb, #fff 15%, transparent), color-mix(in srgb, #fff 3%, transparent)),
    color-mix(in srgb, #1a1b26 52%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-top-color: color-mix(in srgb, #fff 28%, transparent);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 1.4cqw 3cqw rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.dock-slot, .dock-icon {
  position: relative; flex: none;
  width: 3.1cqw; height: 3.1cqw; border-radius: 0.78cqw; /* macOS squircle-ish */
  display: grid; place-items: center; font-size: 1.7cqw; color: #fff;
  transform-origin: bottom center;
  transition: transform 0.12s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow:
    inset 0 0.08cqw 0 rgba(255,255,255,0.4),
    inset 0 -0.12cqw 0.24cqw rgba(0,0,0,0.28),
    0 0.35cqw 0.6cqw rgba(0,0,0,0.35);
}
/* glossy top highlight on every icon */
.dock-slot::before, .dock-icon::before {
  content: ""; position: absolute; left: 0.1cqw; right: 0.1cqw; top: 0.1cqw; height: 48%;
  border-radius: 0.68cqw 0.68cqw 60% 60% / 0.68cqw 0.68cqw 90% 90%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.42), rgba(255,255,255,0.04));
  pointer-events: none;
}
/* running-app indicator dot below the tray */
.dock-slot.is-running::after, .dock-icon.is-running::after {
  content: ""; position: absolute; bottom: -0.95cqw; left: 50%; transform: translateX(-50%);
  width: 0.42cqw; height: 0.42cqw; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 0 0.3cqw rgba(255,255,255,0.4);
}
/* name tooltip on hover */
.dock-tip {
  position: absolute; bottom: calc(100% + 1cqw); left: 50%; transform: translateX(-50%) scale(0.9);
  padding: 0.35cqw 0.7cqw; border-radius: 0.5cqw; white-space: nowrap;
  font-size: 1.1cqw; font-weight: 600; color: #f4f4f8;
  background: color-mix(in srgb, #1a1b26 88%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  box-shadow: 0 0.4cqw 1cqw rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 6;
}
.dock-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 0.45cqw solid transparent; border-top-color: color-mix(in srgb, #1a1b26 88%, transparent);
}
.dock-slot:hover .dock-tip, .dock-icon:hover .dock-tip { opacity: 1; transform: translateX(-50%) scale(1); }

/* app-icon colors (glossy gradient faces, Apple-ish palette) */
.dock-app-finder  { background: linear-gradient(160deg, #6fb8ff 0%, #1f7bff 52%, #0a56d6 100%); }
.dock-app-safari  { background: linear-gradient(160deg, #64c8ff 0%, #1f8dff 55%, #0e63e6 100%); }
.dock-app-messages{ background: linear-gradient(160deg, #74f27f 0%, #2fd44f 55%, #12b03e 100%); }
.dock-app-music   { background: linear-gradient(160deg, #ff7d8f 0%, #fb2f49 55%, #e01536 100%); }

/* icon-appearance modes retint every app icon in the dock, like macOS.
   Default keeps the full-color glossy faces above. */
.dock.mode-dark .dock-slot {
  background: linear-gradient(160deg, #262732, #101118); color: #ececf2;
}
.dock.mode-clear .dock-slot {
  background: color-mix(in srgb, #fff 12%, transparent); color: #f5f5fa;
  backdrop-filter: blur(4px);
}
.dock.mode-tinted .dock-slot {
  background: linear-gradient(160deg, #2c2d38, #17181f);
  color: color-mix(in srgb, var(--color-accent) 82%, white);
}

.dock-divider { align-self: center; width: 1px; height: 2.4cqw; margin: 0 0.15cqw; background: color-mix(in srgb, #fff 22%, transparent); }

/* the live CaveWall icon keeps its appearance-mode theming */
.dock-icon { transition: transform 0.12s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease, color 0.2s ease; }
.dock-icon-default { background: color-mix(in srgb, var(--color-accent) 16%, #23242f); color: var(--color-accent); }
.dock-icon-dark { background: #101116; color: #f2f2f6; }
.dock-icon-clear { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: color-mix(in srgb, var(--color-accent) 75%, white); backdrop-filter: blur(6px); }
.dock-icon-tinted { background: var(--color-accent); color: #14151f; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* — sections — */
section { padding: 96px 40px; }
section:first-of-type { padding-top: 96px; }
.section-head p { font-size: 19px; line-height: 1.6; color: var(--color-neutral-300); margin: 14px 0 48px; max-width: 60ch; }
.section-head h2 { font-size: 38px; max-width: 22ch; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  font-size: 24px; color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  margin-bottom: 20px;
}
.feature-grid h3 { font-size: 21px; margin: 0 0 10px; }
.feature-grid p { color: var(--color-neutral-300); font-size: 15px; }

.power-section { padding-top: 0; }
.power-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.power-card { padding: 22px; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }
.power-icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 19px; color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  margin-bottom: 14px;
}
.power-card h3 { font-size: 17px; margin: 0 0 8px; }
.power-card p { font-size: 13px; color: var(--color-neutral-300); }

.stat-section { padding-top: 0; }
.stat-band {
  background: linear-gradient(140deg, var(--color-section), var(--color-section-glow));
  border-radius: 20px; padding: 64px; position: relative; overflow: hidden;
}
.stat-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 85% 15%, color-mix(in srgb, var(--color-accent) 35%, transparent), transparent 60%);
}
.stat-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat-num { font-size: 54px; line-height: 1; letter-spacing: -0.02em; color: #fff; margin-bottom: 10px; font-family: var(--font-heading); }
.stat-label { color: var(--color-accent-200); font-size: 15px; }

.how-section { padding-top: 0; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.how-step { padding-top: 22px; border-top: 1px solid var(--color-neutral-800); }
.how-step .num { font-size: 13px; color: var(--color-accent); letter-spacing: 0.1em; margin-bottom: 14px; }
.how-step h4 { font-size: 19px; margin: 0 0 8px; }
.how-step p { color: var(--color-neutral-300); font-size: 14px; }

.support-section { padding-top: 0; }
.support-card { padding: 48px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.support-card > div:first-child { flex: 1; min-width: 280px; }
.support-card h2 { font-size: 32px; margin: 0 0 12px; }
.support-card p { color: var(--color-neutral-300); font-size: 16px; }
.support-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.support-actions .btn { justify-content: center; }
.support-note { font-size: 12px; color: var(--color-neutral-500); text-align: center; }

.closing-section { padding-top: 0; text-align: center; }
.closing-section h2 { font-size: 46px; margin: 0 0 var(--space-4); }
.closing-section p { color: var(--color-neutral-300); font-size: 18px; margin: 0 0 var(--space-8); }
.closing-ctas { display: flex; gap: 14px; align-items: center; justify-content: center; }

footer { border-top: 1px solid var(--color-neutral-800); padding: 34px 0; }
.footer-row { display: flex; align-items: center; gap: 16px; color: var(--color-neutral-500); font-size: 13px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--color-text); }
.footer-mark {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; color: var(--color-accent); border: 1px solid var(--color-accent);
}
.footer-links { display: flex; gap: 30px; margin-left: auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .feature-grid, .power-grid, .stat-grid, .how-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; }
  .nav-links { display: none; }
  section { padding: 64px 20px; }
  .hero { padding: 48px 20px 20px; }
  .wrap { padding-inline: 20px; }
}