/* ==========================================================================
   Tokens (from Figma)
   ========================================================================== */
:root {
  --bg: #0b0b0b;
  --panel: #1a1a1a;
  --card: #1f1f1f;
  --surface: #161616;
  --button: #272727;

  --text: #ffffff;
  --text-soft: #ededed;
  --text-muted: #9a9a9a;
  --text-sub: #888892;
  --text-dim: #6e6e6e;
  --text-label: #656565;
  --icon-soft: #adadad;

  --line-thumb: #2a2a2a;
  --line-promo: #232323;
  --line-panel: rgba(255, 255, 255, 0.05);
  --line-tabs: rgba(255, 255, 255, 0.07);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-w: 246px;
  --gutter: 12px;
  --pad-x: 32px;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.icon,
.promo__cta svg,
.card__open svg,
.menu-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* "Shine" gradient border used on cards, active nav, chips and buttons.
   Bright top-left and bottom-right corners, transparent in the middle. */
.shine { position: relative; }
.shine::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, var(--shine, 0.15)) 0%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, var(--shine, 0.15)) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  padding: var(--gutter) var(--gutter) var(--gutter) 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.logo {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar {
  position: sticky;
  top: var(--gutter);
  height: calc(100vh - var(--gutter) * 2);
  height: calc(100dvh - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 16px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar__logo { padding-left: 6px; align-self: flex-start; }

.nav { display: flex; flex-direction: column; gap: 24px; }

.nav__group { display: flex; flex-direction: column; gap: 2px; }

.nav__label {
  height: 18px;
  padding: 0 8px 6px 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-label);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav__item .icon { width: 16px; height: 16px; color: var(--text-dim); }
.nav__item > span:not(.chip) { flex: 1; min-width: 0; white-space: nowrap; }

a.nav__item:not(.is-active):hover { background: rgba(255, 255, 255, 0.04); color: var(--text-soft); }

.nav__item.is-active {
  border-radius: 8px;
  color: var(--text);
  background: linear-gradient(180deg, #3a3a3a 0%, #222222 100%);
}
.nav__item.is-active .icon { color: var(--text); }

.nav__item.is-soon { cursor: default; }

.chip {
  --shine: 0.08;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 17px;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(145deg, #0b0b0b 0%, #252525 100%);
  font-size: 9.5px;
  line-height: 1;
}
.chip > span {
  background: linear-gradient(255deg, #fff 0%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.8;
}

/* ---- Promo card ---- */
.promo {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line-promo);
  border-radius: 14px;
  background:
    radial-gradient(circle at 95% 5%, rgba(168, 84, 247, 0.18), rgba(168, 84, 247, 0) 56%),
    radial-gradient(circle at 80% 10%, rgba(237, 102, 217, 0.10), rgba(237, 102, 217, 0) 83%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.promo__brand { display: flex; align-items: center; gap: 9px; }

.promo__logo {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--text-soft);
  color: #0e0e0e;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.promo__logo:has(img) {
  background: none;
  box-shadow: none;
}
.promo__logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.promo__name { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.promo__name strong { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.promo__name span { font-size: 10.5px; color: var(--text-dim); }

.promo__copy { display: flex; flex-direction: column; gap: 6px; }
.promo__title { font-size: 14px; font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; color: var(--text-soft); }
.promo__text { font-size: 11.5px; line-height: 1.48; color: var(--text-muted); }

.promo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  margin: 2px; /* room for the 2px outside stroke */
  border-radius: 9px;
  background: #1e1e1e;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  box-shadow: 0 0 0 2px #050505, inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Background wipe (same technique as the reference):
   fills in from the left on hover, leaves to the right on hover-out */
.promo__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #2c2c2c;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo__cta:hover::before {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.promo__cta-label { transition: color 0.3s ease; }
.promo__cta:hover .promo__cta-label { color: #fff; }

/* Arrow swap: current arrow flies out top-right, a new one slides in from bottom-left */
.promo__cta-icon {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
}
.promo__cta-icon svg {
  position: absolute;
  inset: 0;
  width: 13px;
  height: 13px;
  stroke-width: 2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo__cta-icon svg:last-child { transform: translate(-100%, 100%); }
.promo__cta:hover .promo__cta-icon svg:first-child { transform: translate(100%, -100%); }
.promo__cta:hover .promo__cta-icon svg:last-child { transform: none; }

/* ==========================================================================
   Main panel
   ========================================================================== */
.main {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-panel);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 32px rgba(0, 0, 0, 0.5);
  padding-bottom: 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px var(--pad-x);
}

.topbar__title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.topbar__title h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.topbar__title p { font-size: 14px; line-height: 1.25; color: var(--text-sub); }

.topbar__controls { display: flex; gap: 8px; flex: none; }
.topbar__controls:empty { display: none; }

/* ---- Tabs (sticky filter bar) ---- */
.tabs-bar {
  /* distance between the viewport top and the pill once stuck
     = --sticky-top minus --plate-pad-top (desktop: 24 - 12 = 12px, same as the page gutter) */
  --sticky-top: 24px;
  --plate-inset: 16px;   /* pill's horizontal inset from the panel edges */
  --plate-pad-top: 12px; /* pill space above the tab labels */
  --plate-pad-bottom: 4px; /* pill space below the 24px tab row; 12 + 16/2 = 4 + 24 - 16/2 keeps labels centred */
  position: sticky;
  top: var(--sticky-top);
  z-index: 10;
  border-bottom: 1px solid var(--line-tabs);
  transition: border-color 0.2s ease;
}

/* The floating pill that snaps in behind the tabs once stuck.
   It has exactly the same width as the scrolling .tabs box below,
   so labels are clipped at the pill's edges instead of overflowing it. */
.tabs-bar::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--plate-pad-top) * -1);
  bottom: calc(var(--plate-pad-bottom) * -1);
  left: var(--plate-inset);
  right: var(--plate-inset);
  border-radius: 14px;
  background: rgba(31, 31, 31, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transition:
    opacity 0.18s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot = the "snap" */
  pointer-events: none;
}

.tabs-bar.is-stuck { border-bottom-color: transparent; }
.tabs-bar.is-stuck::after { opacity: 1; transform: none; }

/* The scroll box is inset by the same amount as the pill, so anything
   scrolled past its edges is cut off right where the pill ends */
.tabs {
  margin: 0 var(--plate-inset);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
          mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__track {
  display: flex;
  gap: 24px;
  /* labels still line up with the page content (--pad-x from the panel edge) */
  padding: 0 calc(var(--pad-x) - var(--plate-inset));
  width: max-content;
  min-width: 100%;
}

.tab {
  position: relative;
  display: inline-grid;
  height: 24px;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-sub);
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* reserve bold width so tabs don't shift when activated */
.tab::after {
  content: attr(data-label);
  font-weight: 700;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.tab:hover { color: var(--text-soft); }
.tab[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.tab[aria-pressed="true"]::before { transform: scaleX(1); }

/* ---- Grid ---- */
.grid {
  display: grid;
  /* at least 300px per card, never more than 5 per row */
  grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 4 * 20px) / 5)), 1fr));
  gap: 24px 20px;
  padding: 24px var(--pad-x) 0;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card__thumb {
  position: relative;
  aspect-ratio: 1440 / 880;
  border-radius: 11px;
  overflow: hidden;
  background: var(--surface);
}
.card__thumb::after { /* inside stroke over the image */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-thumb);
  border-radius: inherit;
  pointer-events: none;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 0;
  height: 32px;
}

.card__name {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__open {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--button);
  color: var(--icon-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.card__open svg { width: 13px; height: 13px; stroke-width: 1.75; }

/* Arrow swap on card hover (same motion as the Book a call CTA) */
.card__open-icon {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
}
.card__open-icon svg {
  position: absolute;
  inset: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card__open-icon svg:last-child { transform: translate(-100%, 100%); }
.card:hover .card__open-icon svg:first-child,
.card:focus-visible .card__open-icon svg:first-child { transform: translate(100%, -100%); }
.card:hover .card__open-icon svg:last-child,
.card:focus-visible .card__open-icon svg:last-child { transform: none; }

/* ---- Card hover: soft light that follows the cursor ---- */
@property --shine {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.15;
}

.card {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
  transition: --shine 0.5s ease, background-color 0.5s ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.card__thumb,
.card__meta { position: relative; }

@media (hover: hover) {
  .card:hover { --shine: 0.32; background-color: #222; }
  .card:hover::after { opacity: 1; }
  .card:hover .card__open { background: #333; color: var(--text); }
  .card:hover .card__thumb img { transform: scale(1.02); filter: brightness(1.04); }
}
.card__thumb img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; }

.empty {
  grid-column: 1 / -1;
  padding: 64px 0;
  text-align: center;
  color: var(--text-sub);
}

/* ==========================================================================
   Mobile bar + drawer
   ========================================================================== */
.mobile-bar { display: none; }
.scrim { display: none; }

@media (max-width: 900px) {
  :root { --pad-x: 20px; --gutter: 8px; }

  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 22px;
    background: rgba(11, 11, 11, 0.85);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }

  .menu-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--line-promo);
    color: var(--text-soft);
  }
  .menu-btn svg { width: 18px; height: 18px; }

  .shell {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--gutter) var(--gutter);
  }

  .sidebar {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: auto;
    left: 0;
    width: min(280px, 85vw);
    height: 100vh;
    height: 100dvh; /* excludes mobile browser toolbars, so nothing hides behind them */
    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-right: 1px solid var(--line-promo);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  /* in the drawer the promo sits right under the menu instead of
     being pushed to the very bottom, so it's always in view */
  .sidebar .promo { margin-top: 0; }

  .sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    background: rgba(0, 0, 0, 0.6);
  }
  .scrim[hidden] { display: none; }

  .tabs-bar {
    /* pill sits 6px under the 60px mobile bar */
    --sticky-top: calc(env(safe-area-inset-top, 0px) + 60px + 6px + var(--plate-pad-top));
    --plate-inset: 8px;
  }

  .topbar { padding-top: 24px; padding-bottom: 20px; }
  .topbar__title h1 { font-size: 21px; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .topbar__title p { line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .tabs-bar::after { transform: none; }
}

/* ==========================================================================
   Simple content pages (About)
   ========================================================================== */
.prose {
  max-width: 640px;
  padding: 8px var(--pad-x) 16px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.prose > * + * { margin-top: 16px; }
.prose h2 {
  margin: 40px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.prose a {
  color: var(--text-soft);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.prose a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Logo typing animation (driven by script.js)
   ========================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.logo__caret {
  display: inline-block;
  width: 0.15rem;
  height: 1.05em;
  margin-left: 2px;
  background: currentColor;
  opacity: 0.85;
  animation: caret-blink 1s steps(1, end) infinite;
}
/* solid caret while characters are being typed or deleted */
.logo.is-typing .logo__caret { animation: none; }

@keyframes caret-blink {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo__caret { display: none; }
}

/* ==========================================================================
   Letter scramble (buttons with [data-scramble], driven by script.js)
   ========================================================================== */
.scramble-char {
  display: inline-block;
  text-align: center;
  white-space: pre;
}
.scramble-char.is-glyph { opacity: 0.7; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}