/* Skills Viewer site styles, shared by every page. Catppuccin Mocha. */

/* Catppuccin Mocha palette */
:root {
  --base:     #1e1e2e;
  --mantle:   #181825;
  --crust:    #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text:     #cdd6f4;
  --lavender: #b4befe;
  --blue:     #89b4fa;
  --sapphire: #74c7ec;
  --teal:     #94e2d5;
  --green:    #a6e3a1;
  --yellow:   #f9e2af;
  --peach:    #fab387;
  --maroon:   #eba0ac;
  --red:      #f38ba8;
  --mauve:    #cba6f7;
  --pink:     #f5c2e7;
  /* Skills Viewer's accent is the violet the application itself reads with. */
  --accent:        var(--mauve);
  --accent-rgb:    203, 166, 247;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Navigation */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(24, 24, 37, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface0);
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav-brand img { width: 30px; height: 30px; }
.nav-brand span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 1.75rem; }
.nav-right a.nav-link {
  color: var(--subtext1);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.18s;
}
.nav-right a.nav-link:hover { color: var(--text); }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--accent);
  color: var(--crust);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  transition: opacity 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--surface0);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--surface1);
  transition: background 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface1); transform: translateY(-1px); }

/* A button whose label is preceded by artwork rather than plain text. Sized in
   em against the button's own type, so the two stay in proportion if that type
   ever changes. At one line box the artwork could not be read, so the mark
   takes 1.8 times that and this button is deliberately taller than a text-only
   one beside it. display: block drops the inline descender space that would
   otherwise add a stray couple of pixels under the picture. */
.btn-secondary img {
  display: block;
  height: 2.7em;
  width: auto;
}


/* Hero */
.hero { max-width: 1100px; margin: 0 auto; padding: 5.5rem 2rem 3rem; text-align: center; }

.hero-icon {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.5));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

h1 {
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 1.4rem;
}
h1 .accent { color: var(--accent); }

.hero-desc {
  font-size: 1.1rem;
  color: var(--subtext1);
  max-width: 600px;
  margin: 0 auto 2.75rem;
  line-height: 1.75;
}
.hero-desc strong { color: var(--text); font-weight: 600; }

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4.5rem; }
.hero-cta .btn-primary, .hero-cta .btn-secondary { font-size: 0.975rem; padding: 0.7rem 1.75rem; }

.shot {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--surface1);
  background: var(--crust);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 36px 90px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(var(--accent-rgb), 0.05);
}
.shot img { width: 100%; height: auto; display: block; }

.hero-shot { max-width: 620px; margin: 0 auto; }

/* Stats bar */
.stats-bar { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.stat { text-align: center; padding: 0 1rem; }
.stat + .stat { border-left: 1px solid var(--surface1); }
.stat-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; margin-bottom: 0.4rem; }
.stat-label { font-size: 0.8rem; color: var(--subtext0); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }

/* Section wrapper */
.section { max-width: 1100px; margin: 0 auto; padding: 5.5rem 2rem; }
.section-label {
  display: inline-block;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 1rem; }
.section-sub { font-size: 1.025rem; color: var(--subtext1); max-width: 560px; line-height: 1.75; margin-bottom: 3.5rem; }

/* Features grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)); gap: 1.25rem; }
.feat {
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 16px;
  padding: 1.75rem;
  transition: border-color 0.2s, transform 0.2s;
}
.feat:hover { border-color: var(--surface2); transform: translateY(-3px); }
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.ic-green  { background: rgba(166,227,161,0.15); color: var(--green); }
.ic-red    { background: rgba(243,139,168,0.15); color: var(--red); }
.ic-blue   { background: rgba(137,180,250,0.15); color: var(--blue); }
.ic-teal   { background: rgba(148,226,213,0.15); color: var(--teal); }
.ic-peach  { background: rgba(250,179,135,0.15); color: var(--peach); }
.ic-sapp   { background: rgba(116,199,236,0.15); color: var(--sapphire); }
.ic-lav    { background: rgba(180,190,254,0.15); color: var(--lavender); }
.ic-yellow { background: rgba(249,226,175,0.15); color: var(--yellow); }
.ic-mauve  { background: rgba(203,166,247,0.15); color: var(--mauve); }
.ic-pink   { background: rgba(245,194,231,0.15); color: var(--pink); }
/* A tenth card would sit alone on a fourth row, so it spans the grid and
   lays out horizontally, reading as a closing note rather than a leftover. */
.feat-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; }
.feat-wide .feat-icon { flex: 0 0 auto; margin-bottom: 0; }
.feat-wide .feat-wide-body { display: flex; flex-direction: column; gap: 0.35rem; }
.feat-wide h3 { margin: 0; }
.feat-wide p { margin: 0; }
@media (max-width: 700px) {
  .feat-wide { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
.feat h3 { font-size: 0.975rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
.feat p { font-size: 0.875rem; color: var(--subtext0); line-height: 1.65; }

.divider { max-width: 1100px; margin: 0 auto; height: 1px; background: var(--surface0); }

/* Split section (text + screenshot) */
.split-band { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-grid .split-text p { color: var(--subtext1); font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }
.split-grid .split-text ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.split-grid .split-text li { font-size: 0.925rem; color: var(--subtext1); line-height: 1.55; padding-left: 1.5rem; position: relative; }
.split-grid .split-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

/* Code block */
.code-block { background: var(--crust); border: 1px solid var(--surface0); border-radius: 14px; overflow: hidden; }
.code-block-head {
  background: var(--surface0);
  padding: 0.55rem 1rem;
  font-size: 0.775rem;
  color: var(--subtext0);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--surface1);
}
.code-block pre {
  padding: 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.81rem;
  line-height: 1.8;
  color: var(--text);
  overflow-x: auto;
}
.tc { color: var(--overlay1); }
.tk { color: var(--blue); }
.ta { color: var(--green); }
.tf { color: var(--peach); }
.ts { color: var(--teal); }

.cli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }

/* Architecture */
.arch-figure {
  display: block;
  width: 100%;
  max-width: 880px;
  margin: 1.75rem auto 0;
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 14px;
  padding: 1.75rem;
}
.arch-figure svg { width: 100%; height: auto; display: block; }

/* Install */
.install-band { background: var(--mantle); border-top: 1px solid var(--surface0); border-bottom: 1px solid var(--surface0); }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.install-grid .install-text p { color: var(--subtext1); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.75rem; }
.install-grid .install-text .note { margin-top: 1.25rem; font-size: 0.8rem; color: var(--overlay1); }
code.inline { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--peach); }

/* Download */
#download .section-sub { margin-bottom: 1.25rem; }
.dl-version {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent);
  border: 1px solid var(--surface1);
  border-radius: 999px;
  padding: 4px 14px;
}
.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.dl-card {
  background: var(--crust);
  border: 1px solid var(--surface0);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-card .ico { font-size: 30px; }
.dl-card h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.dl-card .req { color: var(--subtext0); font-size: 13px; margin: 0; }
.dl-card .btn-primary { margin: 14px auto 4px; }
.dl-card .meta {
  color: var(--subtext0);
  font-size: 12.5px;
  min-height: 1.2em;
  margin: 0;
}
.dl-card .how { color: var(--subtext0); font-size: 13px; margin: 8px 0 0; }
.dl-card code {
  background: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--peach);
}
.dl-links {
  text-align: center;
  color: var(--subtext0);
  font-size: 14px;
  margin: 18px 0 0;
}
.dl-links a { color: var(--accent); text-decoration: none; }
.dl-links a:hover { text-decoration: underline; }

/* Footer */
footer { border-top: 1px solid var(--surface0); padding: 3rem 2rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.footer-brand img { width: 26px; height: 26px; }
.footer-brand span { font-size: 1rem; font-weight: 700; color: var(--subtext1); }
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a { color: var(--subtext0); text-decoration: none; font-size: 0.875rem; transition: color 0.18s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--surface0); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.footer-bottom p { font-size: 0.8rem; color: var(--overlay1); }
.footer-bottom .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { background: var(--surface0); color: var(--subtext0); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; }

/* Screenshot caption */
.shot-caption { text-align: center; font-size: 0.82rem; color: var(--overlay1); margin-top: 0.85rem; }

/* Responsive */
@media (max-width: 768px) {
  .split-grid, .install-grid, .cli-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  .nav-right .nav-link { display: none; }
  .hero { padding: 3rem 1.25rem 2rem; }
  .section { padding: 3.5rem 1.25rem; }
  .features-grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--surface1); }
  .stats-inner { flex-direction: column; gap: 1.25rem; }
}

/* Entrance animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fadeUp 0.52s ease both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.38s; }

/* Prose pages (why.html) */
.prose p {
  color: var(--subtext1);
  font-size: 1.025rem;
  max-width: 820px;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }