/* vinOS · vinos.computer landing.
   Geist Sans + Geist Mono (Vercel, open source). Instrument Serif for
   italic accents. Big, clean, hypr.land-style. Zero framework.
   Light-mode palette so dark Hyprland screenshots pop against the page. */

:root {
  --bg:            #fbfaf7;
  --bg-elev:       #ffffff;
  --panel:         #f4f2ec;
  --panel-2:       #e9e6dd;
  --panel-border:  rgba(10,11,16,0.10);
  --panel-hover:   rgba(51,204,255,0.55);
  --text:          #0a0b10;
  --text-muted:    #4a5568;
  --text-dim:      #8b93a1;
  --accent:        #0891b2;
  --accent-2:      #7c3aed;
  --accent-3:      #0e7490;
  --accent-teal:   #0d9488;
  --accent-bright: #33ccff;
  --green:         #16a34a;
  --yellow:        #d97706;
  --red:           #dc2626;
  --dark-panel:    #0f1116;
  --dark-panel-2:  #1a1b26;
  --dark-panel-border: rgba(255,255,255,0.08);
  --dark-text:     #f5f6fa;
  --dark-text-muted: #a9b1d6;
  --dark-text-dim: #565f89;
  --font-sans:     "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-display:  "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif:    "Instrument Serif", Georgia, serif;
  --radius-lg:     8px;
  --radius-md:     6px;
  --radius-sm:     4px;
  --radius-pill:   999px;
  --shadow:        0 24px 60px rgba(10,11,16,0.12), 0 2px 8px rgba(10,11,16,0.06);
  --shadow-md:     0 8px 24px rgba(10,11,16,0.08);
  --shadow-mint:   0 20px 60px rgba(8,145,178,0.12);
  --shadow-dark:   0 24px 60px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  --transition:    all 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

/* subtle single glow behind the hero only */
body::before {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(160px);
  top: -400px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(8,145,178,0.07), transparent 60%);
}

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-3); }

code, kbd, pre, .font-mono { font-family: var(--font-mono); }
code {
  background: rgba(8,145,178,0.08);
  color: var(--accent-3);
  padding: 0.14em 0.5em;
  border-radius: 6px;
  font-size: 0.88em;
  font-weight: 500;
  border: 1px solid rgba(8,145,178,0.18);
}
em { font-family: var(--font-serif); font-style: italic; font-size: 1.08em; color: var(--accent-3); letter-spacing: 0; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; font-family: var(--font-display); }
h1.display   { font-size: clamp(2.8rem, 7.5vw, 5.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
h2.display-2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 1rem; letter-spacing: -0.02em; }
h3 { font-size: 1.24rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.015em; }
h4 { font-size: 0.94rem; font-weight: 600; letter-spacing: -0.005em; }

/* legacy .grad — kept for compatibility with older templates, now solid */
.grad { color: var(--accent); }
.accent-strong { color: var(--accent); }
.accent { color: var(--accent); }
.muted  { color: var(--text-muted); }
.dim    { color: var(--text-dim); }
.small  { font-size: 0.88rem; }
.ok     { color: var(--green); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 44px;
  background: rgba(251,250,247,0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--panel-border);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.03em; color: var(--text);
}
.brand:hover { color: var(--accent); }
.brand-caret, .hero-caret, .vinos-caret { animation: blink 1.15s infinite steps(1, end); }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.site-nav { display: flex; gap: 34px; font-size: 1rem; }
.site-nav a { color: var(--text-muted); font-weight: 500; }
.site-nav a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .site-header { padding: 16px 20px; }
  .site-nav { gap: 18px; font-size: 0.92rem; }
}

/* Layout */
main { max-width: 1280px; margin: 0 auto; padding: 0 44px 100px; }
@media (max-width: 640px) { main { padding: 0 20px 60px; } }
section { margin: 96px 0; }
@media (max-width: 640px) { section { margin: 64px 0; } }
.centered { text-align: center; }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 8px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0;
  margin-bottom: 16px;
  font-weight: 500;
  text-transform: none;
}
.section-lede {
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.5;
  max-width: 640px;
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.section-lede kbd { font-size: 0.78em; }
.section-head.centered .section-lede { margin-left: auto; margin-right: auto; }
.section-lead {
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.pill {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(8,145,178,0.08);
  border: 1px solid rgba(8,145,178,0.24);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
}
.hero-code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  padding: 0;
}

/* HERO */
.hero { padding: 20px 0 60px; }
.hero.centered .hero-eyebrow { display: flex; gap: 8px; margin-bottom: 32px; justify-content: center; }
.hero-mark-container {
  display: flex;
  justify-content: center;
  padding: 80px 0 40px;
  animation: hero-float 6s ease-in-out infinite alternate;
}
.hero-logo {
  filter: drop-shadow(0 20px 60px rgba(79,209,197,0.28));
  animation: hero-fade-in 1.2s ease-out both;
}
.vinos-stroke-l { transform-origin: center; animation: stroke-in-l 0.9s cubic-bezier(0.23, 1, 0.32, 1) both; }
.vinos-stroke-r { transform-origin: center; animation: stroke-in-r 0.9s 0.2s cubic-bezier(0.23, 1, 0.32, 1) both; }
.vinos-caret {
  animation: caret-in 0.4s 0.9s cubic-bezier(0.23, 1, 0.32, 1) both,
             blink 1.15s 1.3s infinite steps(1, end);
}
@keyframes hero-fade-in { from { opacity: 0; transform: scale(0.85);} to { opacity: 1; transform: scale(1);} }
@keyframes stroke-in-l { from { opacity: 0; transform: translateX(-40px) rotate(-6deg);} to { opacity: 1; transform: translateX(0) rotate(0);} }
@keyframes stroke-in-r { from { opacity: 0; transform: translateX(40px) rotate(6deg);} to { opacity: 1; transform: translateX(0) rotate(0);} }
@keyframes caret-in    { from { opacity: 0; transform: scaleX(0);} to { opacity: 1; transform: scaleX(1);} }
@keyframes hero-float  { from { transform: translateY(0);} to { transform: translateY(-10px);} }
@media (max-width: 640px) {
  .hero-mark-container { padding: 40px 0 20px; }
  .hero-logo { width: 170px; height: 170px; }
}

.hero h1 { max-width: 900px; margin: 0 auto 28px; }
.hero-lede {
  font-size: 1.35rem;
  color: var(--text-muted);
  margin: 0 auto 48px;
  max-width: 640px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.hero-sub { color: var(--text-dim); font-size: 0.98rem; margin-top: 28px; }
.hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 500; font-size: 0.98rem;
  transition: var(--transition);
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow-mint); }
.btn-ghost {
  color: var(--text);
  border-color: var(--panel-border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: #ffffff; }

/* HERO SCREENSHOT — full-bleed agentic workflow */
.hero-shot-section { margin: 32px auto 64px; max-width: 1400px; }
.hero-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--dark-panel);
  box-shadow: var(--shadow);
  position: relative;
}
.hero-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hero-shot figcaption {
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--dark-text-muted);
  background: var(--dark-panel-2);
  border-top: 1px solid var(--dark-panel-border);
  text-align: center;
}
.hero-shot.shot-missing { display: none; }

/* PITCH */
.pitch { padding: 40px 0; }

/* AGENT DEMO — kept dark on purpose: this is a terminal/chat mockup */
.agent-demo { }
.mockwin {
  background: var(--dark-panel);
  border: 1px solid var(--dark-panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-dark);
  color: var(--dark-text);
}
.mockwin.big { max-width: 900px; margin: 40px auto 30px; }
.mockwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--dark-panel-2);
  border-bottom: 1px solid var(--dark-panel-border);
}
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green  { background: #28c840; }
.mockwin-title {
  color: var(--dark-text-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-left: 14px;
  flex: 1;
  text-align: center;
}
.mockwin-body { padding: 28px 32px; font-size: 0.95rem; line-height: 1.65; min-height: 380px; }
.demo-body { min-height: 460px; }
.chat-msg { padding: 12px 0; }
.chat-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dark-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.chat-role.role-ai { color: var(--accent-bright); }
.chat-msg p { color: var(--dark-text); font-size: 1rem; line-height: 1.55; }
.chat-msg.user p { color: var(--dark-text-muted); }
.chat-code {
  margin-top: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--dark-panel-border);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 0.86rem;
  color: var(--dark-text);
  line-height: 1.7;
  overflow-x: auto;
}
.chat-code .line { display: block; white-space: pre; }
/* Syntax colors inside the dark .mockwin — use bright variants for contrast */
.tk-kw    { color: #bb9af7; font-weight: 500; }
.tk-fn    { color: #33ccff; }
.tk-str   { color: #9ece6a; }
.tk-type  { color: #e0af68; }
.tk-num   { color: #e0af68; }
.tk-decor { color: #7dcfff; }
.ai-followup { margin-top: 14px; color: var(--dark-text-muted); font-size: 0.95rem; }

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  width: 0;
  animation: type-in var(--tw-dur, 2s) var(--tw-delay, 0s) steps(var(--tw-len, 40)) forwards,
             tw-caret 1s var(--tw-delay, 0s) infinite steps(1, end);
  max-width: 100%;
}
@keyframes type-in { from { width: 0; } to { width: var(--tw-len, 40ch); } }
@keyframes tw-caret { 0%,49% { border-right-color: var(--accent);} 50%,100% { border-right-color: transparent;} }

.reveal { opacity: 0; animation: reveal-in 0.6s var(--reveal-delay, 3s) ease-out forwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cursor {
  display: inline-block;
  width: 8px; height: 18px;
  background: var(--accent);
  vertical-align: middle;
  animation: blink 1.05s infinite steps(1, end);
  margin-left: 2px;
}
.agent-caption {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
}
.agent-caption strong { color: var(--text); font-weight: 600; }

/* Typewriter cursor lives on white text in the dark mockup */
.typewriter { border-right-color: var(--accent-bright); }
@keyframes tw-caret { 0%,49% { border-right-color: var(--accent-bright);} 50%,100% { border-right-color: transparent;} }
.cursor { background: var(--accent-bright); }

/* FACTS */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 20px 0;
}
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; gap: 32px; } }
.fact { text-align: center; }
.fact-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--text);
}
.fact-unit {
  display: inline-block;
  font-size: 0.28em;
  color: var(--text-dim);
  font-weight: 500;
  vertical-align: super;
  margin-left: 6px;
  font-family: var(--font-mono);
}
.fact p { color: var(--text-muted); margin-top: 12px; font-size: 1.02rem; }

/* HOW */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  transition: var(--transition);
}
.step:hover { border-color: var(--panel-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.step h3 { color: var(--text); margin-bottom: 10px; font-size: 1.35rem; }
.step p { color: var(--text-muted); margin-bottom: 14px; font-size: 1.02rem; }
.step-link { display: inline-block; font-size: 0.94rem; color: var(--accent); font-weight: 500; }
.step-link.muted { color: var(--text-dim); }
.step-cmd {
  background: var(--dark-panel);
  border: 1px solid var(--dark-panel-border);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  color: var(--accent-bright);
  margin-top: 12px;
  font-family: var(--font-mono);
}
.step-cmd::before {
  content: "$ ";
  color: var(--dark-text-dim);
}
.how-note { max-width: 780px; color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; margin-top: 20px; }

/* FEATURES */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
}
@media (max-width: 700px) { .feature-list { grid-template-columns: 1fr; gap: 30px; } }
.feature-item h3 { color: var(--text); margin-bottom: 12px; font-size: 1.5rem; font-weight: 600; }
.feature-item p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }

/* Rich features: cards with a tag, longer prose, and an optional screenshot */
.feature-list-rich { gap: 56px 60px; margin-top: 12px; }
.feature-list-rich .feature-item {
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.feature-list-rich .feature-item:hover {
  border-color: var(--panel-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature-list-rich .feature-hero {
  grid-column: 1 / -1;
  background: var(--panel);
  border-color: rgba(8,145,178,0.28);
  border-left: 3px solid var(--accent);
}
.feature-list-rich .feature-hero h3 { font-size: 1.9rem; }
.feature-list-rich .feature-hero p { font-size: 1.12rem; }
.feature-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(8,145,178,0.10);
  border: 1px solid rgba(8,145,178,0.22);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  align-self: flex-start;
  font-weight: 500;
}
.feature-hero .feature-tag {
  color: #7c3aed;
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.28);
}
.feature-shot {
  margin: 20px 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--dark-panel);
  box-shadow: 0 8px 30px rgba(10,11,16,0.10);
  align-self: stretch;
}
.feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.feature-shot figcaption {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--dark-text-dim);
  background: var(--dark-panel-2);
  border-top: 1px solid var(--dark-panel-border);
  letter-spacing: 0.01em;
}
.feature-shot.shot-missing img,
.feature-shot.shot-missing figcaption { display: none; }
.feature-shot.shot-missing {
  display: none;
}

/* AI keybind cards get a subtle accent border */
.key-card-ai {
  background: var(--panel);
  border-color: rgba(8,145,178,0.28);
  border-left: 3px solid var(--accent);
}
.key-card-ai .key-label { color: var(--text); font-weight: 600; }

/* THEMES */
.themes-showcase {}
.theme-picker { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.swatch {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 22px 12px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.swatch:hover { border-color: var(--panel-hover); transform: translateY(-2px); color: var(--text); }
.swatch.active { border-color: var(--accent); color: var(--text); box-shadow: 0 4px 20px rgba(51,204,255,0.15); }
.swatch-strip {
  width: 68px; height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--c1) 0 33%, var(--c2) 33% 66%, var(--c3) 66% 100%);
}
.theme-preview {
  --th-a: #33ccff; --th-b: #bb9af7; --th-c: #c0caf5;
  --th-bg: #1a1b26; --th-bg2: #0d0e14;
  max-width: 940px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--panel-border);
}
.fake-desktop {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--th-bg) 0%, var(--th-bg2) 100%);
  overflow: hidden;
}
.fake-waybar {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  height: 38px;
  background: rgba(26,27,38,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--th-c);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wb-item { color: var(--th-c); }
.wb-center { flex: 1; text-align: center; color: var(--th-a); font-weight: 500; }
.wb-active { color: var(--th-a); }
.wb-mark {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--th-a);
  font-size: 1.05rem;
  letter-spacing: -0.05em;
}
.fake-wp {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--th-a) 22%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 25% 80%, color-mix(in srgb, var(--th-b) 16%, transparent) 0%, transparent 40%);
  z-index: 0;
}
.fake-walker {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  background: rgba(20,21,29,0.88);
  border: 2px solid color-mix(in srgb, var(--th-a) 55%, transparent);
  border-radius: 14px;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--th-c);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.55);
}
.walker-search {
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.walker-item { padding: 10px 14px; border-radius: 8px; transition: var(--transition); }
.walker-item.selected { background: color-mix(in srgb, var(--th-a) 20%, transparent); color: var(--th-c); }

/* KEYBOARD SHOWCASE */
.key-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .key-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .key-showcase { grid-template-columns: 1fr; } }
.key-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  transition: var(--transition);
}
.key-card:hover { border-color: var(--panel-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.key-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
kbd {
  display: inline-block;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-bottom: 2px solid rgba(10,11,16,0.18);
  border-radius: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(10,11,16,0.06);
}
.key-label { color: var(--text); font-size: 1.06rem; font-weight: 500; }

.keys-shot {
  margin: 60px auto 0;
  max-width: 940px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--dark-panel);
  box-shadow: var(--shadow-md);
}
.keys-shot img { display: block; width: 100%; height: auto; }
.keys-shot figcaption {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--dark-text-dim);
  background: var(--dark-panel-2);
  border-top: 1px solid var(--dark-panel-border);
  text-align: center;
}
.keys-shot.shot-missing { display: none; }

/* FIT CHECK */
.fit-list { max-width: 720px; margin: 40px auto; }
.fit-yes ul { list-style: none; padding: 0; }
.fit-yes li {
  padding: 16px 0 16px 40px;
  position: relative;
  color: var(--text);
  font-size: 1.18rem;
  border-bottom: 1px solid var(--panel-border);
  line-height: 1.5;
}
.fit-yes li:last-child { border-bottom: none; }
.fit-yes li::before {
  content: "✓";
  position: absolute; left: 0; top: 16px;
  color: var(--green);
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
}
.who-alt {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
  padding: 24px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.who-alt strong { color: var(--text); }

/* CTA FINAL */
.cta-final { padding: 60px 0; }
.cta-final h2 { margin-bottom: 20px; }

/* Doc pages */
.doc-content { max-width: 820px; margin: 60px auto 80px; }
.doc-content h1 { margin-bottom: 32px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.doc-content h2 { margin-top: 56px; margin-bottom: 20px; font-size: 1.8rem; }
.doc-content h3 { margin-top: 32px; font-size: 1.35rem; }
.doc-content p, .doc-content ul, .doc-content ol {
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}
.doc-content ul, .doc-content ol { padding-left: 28px; }
.doc-content li { margin-bottom: 8px; }
.doc-content strong { color: var(--text); font-weight: 600; }
.doc-content pre {
  background: var(--dark-panel);
  border: 1px solid var(--dark-panel-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--dark-text);
}
.doc-content pre code { background: transparent; color: var(--dark-text); padding: 0; border: none; font-size: inherit; }
.doc-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.98rem; }
.doc-content th, .doc-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-muted);
}
.doc-content th { background: var(--panel); color: var(--text); font-weight: 600; }
.doc-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 20px;
  margin: 24px 0;
  color: var(--text-muted);
  font-style: italic;
}
.doc-content hr { border: none; border-top: 1px solid var(--panel-border); margin: 40px 0; }
.doc-list { list-style: none; padding: 0; }
.doc-list li { padding: 12px 0; border-bottom: 1px solid var(--panel-border); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--panel-border);
  padding: 60px 44px 36px;
  background: var(--panel);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
}
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 44px 20px 28px; }
}
.site-footer h4 {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.site-footer a { display: block; color: var(--text-muted); font-size: 0.98rem; padding: 4px 0; }
.site-footer a:hover { color: var(--accent); }

/* ═══════════════════════ NEW DEV-FLAVORED SECTIONS ═══════════════════════ */

/* ARCHITECTURE DIAGRAM */
.arch-section { }
.arch-diagram {
  background: var(--dark-panel);
  border: 1px solid var(--dark-panel-border);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  overflow-x: auto;
  color: var(--dark-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  box-shadow: var(--shadow-md);
}
.arch-diagram pre {
  font-family: var(--font-mono);
  white-space: pre;
  margin: 0;
  color: var(--dark-text-muted);
}
.arch-diagram .ad-layer { color: var(--accent-bright); font-weight: 500; }
.arch-diagram .ad-comment { color: var(--dark-text-dim); font-style: normal; }

@media (max-width: 720px) {
  .arch-diagram { font-size: 0.68rem; padding: 16px; }
}

/* TERMINAL DEMO (replacement for chat mockup) */
.term-demo { max-width: 900px; margin: 32px auto 24px; }
.term-body {
  padding: 20px 24px;
  font-size: 0.86rem;
  line-height: 1.55;
  min-height: 480px;
  background: var(--dark-panel);
}
.term-body pre {
  font-family: var(--font-mono);
  white-space: pre-wrap;
  color: var(--dark-text-muted);
  margin: 0;
  overflow-x: auto;
}
/* terminal token colors — tokyo-night palette */
.term-body .tp  { color: var(--accent-bright); }              /* prompt $ */
.term-body .tc  { color: #c0caf5; font-weight: 500; }         /* command */
.term-body .tm  { color: var(--dark-text-dim); }              /* arrow */
.term-body .tg  { color: #9ece6a; font-weight: 500; }         /* ok green */
.term-body .ty  { color: #e0af68; }                           /* -- yellow */
.term-body .td  { color: var(--dark-text-dim); }              /* dim comment */
@media (max-width: 720px) {
  .term-body { padding: 14px 16px; font-size: 0.72rem; }
}

/* SPEC SHEET — what ships */
.ships-section { }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .spec-grid { grid-template-columns: 1fr; } }
.spec-block {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  background: var(--bg-elev);
  transition: var(--transition);
}
.spec-block:hover { border-color: rgba(8,145,178,0.30); }
.spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
}
.spec-key {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0;
}
.spec-count {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.spec-count .spec-unit {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 4px;
}
.spec-list {
  font-size: 0.82rem;
  line-height: 1.5;
}
.spec-list > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 4px 0;
}
.spec-list dt {
  color: var(--text-dim);
  font-weight: 400;
}
.spec-list dd {
  color: var(--text);
  font-weight: 500;
}

/* COMPARISON TABLE */
.compare-section { }
.compare-table-wrap {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--bg-elev);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.compare-table th,
.compare-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
}
.compare-table thead th {
  background: var(--panel);
  font-weight: 500;
  color: var(--text);
  font-size: 0.84rem;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--panel-border);
}
.compare-table thead th .col-name {
  font-family: var(--font-mono);
  font-weight: 500;
}
.compare-table thead th .col-name.muted { color: var(--text-dim); }
.compare-table tbody th {
  font-weight: 500;
  color: var(--text);
  font-size: 0.92rem;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.86rem; }
.compare-table td.cy { color: var(--green); font-weight: 500; }
.compare-table td.cy::before { content: "● "; color: var(--green); }
.compare-table td.cm { color: var(--yellow); }
.compare-table td.cm::before { content: "○ "; color: var(--yellow); }
.compare-table td.cn { color: var(--text-dim); }
.compare-table td.cn::before { content: "— "; color: var(--text-dim); }
.compare-table tbody tr:hover { background: rgba(8,145,178,0.03); }
@media (max-width: 720px) {
  .compare-table th, .compare-table td { padding: 10px 12px; font-size: 0.8rem; }
}

/* BUNDLE TABLE */
.bundles-section { }
.bundle-table-wrap {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--bg-elev);
}
.bundle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.bundle-table th,
.bundle-table td {
  padding: 12px 20px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
}
.bundle-table thead th {
  background: var(--panel);
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.bundle-table tbody th {
  color: var(--accent);
  font-weight: 500;
  width: 130px;
  font-family: var(--font-mono);
}
.bundle-table code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text);
  font-weight: 500;
  font-size: 0.86rem;
}
.bundle-table tbody td:last-child {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}
.bundle-table tbody tr:last-child th,
.bundle-table tbody tr:last-child td { border-bottom: none; }
.bundle-table tbody tr:hover { background: rgba(8,145,178,0.03); }
@media (max-width: 720px) {
  .bundle-table thead { display: none; }
  .bundle-table, .bundle-table tbody, .bundle-table tr, .bundle-table td, .bundle-table th { display: block; width: 100%; }
  .bundle-table tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--panel-border); }
  .bundle-table th, .bundle-table td { padding: 4px 0; border: none; }
}

/* KEYBINDING TABLE */
.keys-table-section { }
.keys-table-wrap {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--bg-elev);
  margin-bottom: 32px;
}
.keys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.keys-table th,
.keys-table td {
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--panel-border);
}
.keys-table thead th {
  background: var(--panel);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-dim);
  font-size: 0.76rem;
  letter-spacing: 0;
}
.keys-table tbody th {
  font-weight: 500;
  font-family: var(--font-mono);
  white-space: nowrap;
  width: 1%;
}
.keys-table tbody th kbd {
  padding: 3px 8px;
  font-size: 0.75rem;
  margin: 0 1px;
}
.keys-table td:nth-child(2) { color: var(--text); font-size: 0.9rem; }
.keys-table td:nth-child(3) {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.keys-table td:nth-child(3) code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-weight: 500;
}
.keys-table tr.kt-group td {
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0;
  padding: 8px 20px;
  border-bottom: 1px solid var(--panel-border);
}
.keys-table tbody tr:last-child th,
.keys-table tbody tr:last-child td { border-bottom: none; }
.keys-table tbody tr:not(.kt-group):hover { background: rgba(8,145,178,0.03); }
@media (max-width: 720px) {
  .keys-table th, .keys-table td { padding: 8px 12px; font-size: 0.8rem; }
  .keys-table td:nth-child(3) { display: none; }
}

/* Sharpen the swatches + walker corners */
.swatch { border-radius: var(--radius-md); }
.fake-waybar { border-radius: var(--radius-md); }
.fake-walker { border-radius: var(--radius-lg); }
.walker-item, .walker-search { border-radius: var(--radius-sm); }

/* Tighten step corners */
.step { border-radius: var(--radius-lg); padding: 24px 22px 22px; }
.feature-list-rich .feature-item { border-radius: var(--radius-lg); padding: 24px; }
.key-card { border-radius: var(--radius-lg); padding: 24px 22px; }
.who-alt { border-radius: var(--radius-lg); }

/* Section-head monospace hash style — treat the eyebrow as a shell-heading */
.arch-section .eyebrow,
.ships-section .eyebrow,
.compare-section .eyebrow,
.bundles-section .eyebrow,
.keys-table-section .eyebrow,
.features-modern .eyebrow,
.themes-showcase .eyebrow,
.wifi-showcase .eyebrow,
.who-modern .eyebrow,
.how .eyebrow,
.agent-demo .eyebrow {
  color: var(--text-dim);
  font-weight: 500;
}