/* khushagarwala.com — design system v2 (dark, dense, premium) */

:root {
  --bg:        #0c0c0d;
  --bg-2:      #131316;
  --bg-3:      #1a1a1d;
  --border:    #1f1f22;
  --border-2:  #2c2c30;
  --text:      #f0ede4;
  --text-2:    #b3b1a8;
  --text-3:    #6e6c66;
  --text-4:    #45433f;
  --accent:    #ff5b3a;
  --accent-d:  rgba(255, 91, 58, 0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); }
body {
  color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.5;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: "ss02", "ss03"; }

/* scroll progress */
.scroll-prog {
  position: fixed; top: 0; left: 0; right: 0; height: 1px;
  background: var(--accent);
  transform-origin: left; transform: scaleX(0);
  z-index: 999; pointer-events: none;
  transition: transform .08s linear;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───── nav ─────────────────────────────────────────────── */
nav.gn {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12, 12, 13, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.gn-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
}
.wordmark {
  font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; color: var(--text);
}
.wordmark .dot { color: var(--accent); }
.gn-links {
  display: flex; gap: 4px; align-items: center;
}
.gn-links a {
  font-size: 13px; color: var(--text-2);
  padding: 6px 12px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.gn-links a:hover { color: var(--text); background: var(--bg-2); }
.gn-links a.is-current { color: var(--text); }
.gn-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 8px;
}
.gn-meta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ───── mobile hamburger (injected by site.js) ─────────────── */
.gn-hamburger {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); width: 38px; height: 38px;
  border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0; transition: background .15s, border-color .15s;
}
.gn-hamburger:hover { background: var(--bg-2); border-color: var(--border-2); }
.gn-hamburger .bar {
  display: block; width: 16px; height: 1.5px;
  background: var(--text); border-radius: 1px;
  position: relative;
}
.gn-hamburger .bar::before,
.gn-hamburger .bar::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px;
  background: var(--text); border-radius: 1px;
  transition: transform .2s ease, top .2s ease;
}
.gn-hamburger .bar::before { top: -5px; }
.gn-hamburger .bar::after  { top:  5px; }
nav.gn.gn-open .gn-hamburger .bar { background: transparent; }
nav.gn.gn-open .gn-hamburger .bar::before { top: 0; transform: rotate(45deg); }
nav.gn.gn-open .gn-hamburger .bar::after  { top: 0; transform: rotate(-45deg); }
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ───── product subnav ──────────────────────────────────── */
nav.subnav {
  position: sticky; top: 56px; z-index: 99;
  background: rgba(19, 19, 22, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.subnav-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
}
.subnav-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
}
.subnav-links { display: flex; align-items: center; gap: 8px; }
.subnav-links a {
  font-size: 13px; color: var(--text-2);
  padding: 6px 12px; border-radius: 6px;
}
.subnav-links a:hover { color: var(--text); background: var(--bg-3); }
.subnav-cta {
  background: var(--accent); color: var(--bg) !important;
  font-weight: 500;
}
.subnav-cta:hover { background: var(--accent) !important; opacity: 0.9; }

/* ───── typography primitives ───────────────────────────── */
.label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.label .accent-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.display-xl {
  font-weight: 700;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
}
.display-xl .dot { color: var(--accent); }

.display {
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.h2 {
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lede {
  font-size: 18px; line-height: 1.55;
  color: var(--text-2);
  font-weight: 400;
}

/* ───── links / actions ─────────────────────────────────── */
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent); color: var(--bg);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
  border-color: var(--border-2); color: var(--text);
  background: transparent;
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--text-3); }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(2px); }

.link-quiet {
  color: var(--text-2);
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.link-quiet:hover { color: var(--text); border-color: var(--accent); }

/* ───── grid ────────────────────────────────────────────── */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }

/* ───── card / surface ─────────────────────────────────── */
.surface {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ───── footer ──────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  margin-top: 96px;
  padding: 32px 0 48px;
  color: var(--text-3);
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
}
.foot-row {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px;
}
.foot-row ul { display: flex; gap: 24px; }
.foot-row a:hover { color: var(--text); }

/* ───── responsive ──────────────────────────────────────── */
@media (max-width: 820px) {
  .wrap { padding: 0 20px; }
  .gn-meta { display: none; }
  .grid-12 { grid-template-columns: 1fr; gap: 16px; }
  .subnav-links a:not(.subnav-cta) { display: none; }

  .gn-row { padding: 14px 0; }
  .gn-hamburger { display: inline-flex; }

  /* Collapsed mobile menu */
  .gn-links {
    position: absolute;
    top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(12, 12, 13, 0.98);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px 16px;
    gap: 2px;
    max-height: 0; overflow: hidden;
    opacity: 0; pointer-events: none;
    transition: max-height .22s ease, opacity .18s ease;
  }
  .gn-links a {
    padding: 12px 10px; font-size: 15px;
    border-radius: 8px; color: var(--text);
  }
  .gn-links a:hover { background: var(--bg-2); }
  nav.gn.gn-open .gn-links {
    max-height: 70vh; opacity: 1; pointer-events: auto;
  }

  /* Product subnav compacts to a single pill row */
  .subnav-row { padding: 12px 0; }
  .subnav-title { font-size: 14px; }

  /* Footer: let the link list wrap cleanly */
  .foot-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot-row ul { flex-wrap: wrap; gap: 16px; row-gap: 6px; }

  /* Hero display sizes */
  .display-xl { font-size: clamp(52px, 14vw, 88px); letter-spacing: -0.035em; }
  .display    { font-size: clamp(36px, 9vw, 56px); }
  .h2         { font-size: clamp(22px, 5.5vw, 30px); }
}

@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  footer { margin-top: 64px; padding: 24px 0 40px; }
}