/* ==========================================================================
   Cybex — site styles
   Dark, flat, minimal. Each product panel has its own palette.
   ========================================================================== */

:root {
  /* Fonts */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Page */
  --bg: #0c0c0d;
  --text: #f1f1ef;
  --text-2: #c4c4c8;      /* body copy on dark */
  --muted: #a4a4aa;       /* secondary copy, labels (7:1 on --bg) */
  --dim: #7d7d84;         /* hero second sentence only */
  --line: #26262a;
  --line-2: #34343a;      /* tag pills */
  --cybex-red: #dc1e37;   /* fills; white text on it is 4.9:1 */
  --cybex-red-text: #ff5468; /* red used as text on dark */

  /* Tiaris — green + yellow from its logo */
  --tiaris-bg: #10150f;
  --tiaris-visual: #172015;
  --tiaris-line: #232d20;
  --tiaris-chip: #3b4a2d;
  --tiaris-accent: #a3b37e;

  /* Whombat — warm cream with ink (its logo is dark ink) */
  --wb-bg: #f3ecde;
  --wb-line: #e4d9c2;
  --wb-ink: #2b221d;
  --wb-body: #4a3f37;
  --wb-muted: #6b5d52;
  --wb-chip-line: #cdbd98;
  --wb-chip-text: #6b5522;
  --wb-gold: #b99346;
  --wb-tile: #e8dec9;

  /* Fusebox — amber, from its dashboard */
  --fb-bg: #141210;
  --fb-term: #0b0b0b;
  --fb-line: #2d2819;
  --fb-chip: #54431c;
  --fb-accent: #f2b53d;
  --fb-tab-line: #3d3624;
  --fb-note: #8a8a90;

  /* Layout */
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-panel: 28px;
  --section-gap: clamp(80px, 11vw, 144px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.status {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, currentColor); flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-weight: 600;
  transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { gap: 12px; padding: 16px 28px; font-size: 16px; }
.btn--red { background: var(--cybex-red); color: #fff; }

.ulink {
  padding: 12px 0; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #55555b;
}
.ulink:hover { text-decoration-color: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  border: 1px solid; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.chip .dot { width: 7px; height: 7px; background: currentColor; }

/* Dividers between 1–4 columns. Stacks with top rules on phones, 2-up on
   tablets, N-up with vertical rules on desktop. Set --n and --rule inline. */
.cols { display: grid; grid-template-columns: 1fr; }
.cols > * { padding: 28px 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1100px) {
  .cols { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 0; border-top: 1px solid var(--rule); }
  .cols > * { border-top: 0; border-left: 1px solid var(--rule); padding: 32px 32px 40px; }
  .cols > :first-child { border-left: 0; padding-left: 0; }
  .cols > :last-child { padding-right: 0; }
}

/* ---------- header ---------- */
.site-header {
  padding-top: 24px; padding-bottom: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
}
.logo { display: inline-flex; padding: 8px 0; }
.logo img { display: block; height: 32px; width: auto; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; }
.site-nav a { padding: 12px 14px; color: var(--muted); }
.site-nav a:hover { color: var(--text); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(48px, 9vw, 112px); }
.hero .eyebrow { margin-bottom: 28px; }
.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 8.4vw, 124px); line-height: .96; letter-spacing: -.04em; text-wrap: balance;
}
.hero__title span { color: var(--dim); }
.hero__row { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.hero__lede { max-width: 520px; font-size: 20px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

.product-index { margin-top: clamp(56px, 8vw, 104px); }
.product-index > * { padding-bottom: 32px; }
.product-index__item { display: flex; flex-direction: column; gap: 10px; transition: background .2s; }
.product-index__item:hover { background: #151517; }
.product-index__name { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -.03em; }
.product-index__desc { color: var(--muted); font-size: 16px; }

/* ---------- sections ---------- */
.section { padding-top: var(--section-gap); }
.section .eyebrow { margin-bottom: 20px; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.h2 {
  max-width: 800px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 1; letter-spacing: -.035em; text-wrap: balance;
}
.section__intro { max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- product panels ---------- */
.products { margin-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.panel { border: 1px solid; border-radius: var(--radius-panel); padding: clamp(24px, 4vw, 56px); scroll-margin-top: 24px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.split--end { align-items: end; }
.panel__logo { margin-top: 28px; line-height: 0; }
.panel__logo img { display: block; width: auto; max-width: 100%; }
.panel__tagline {
  margin-top: 28px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em;
}
.panel__body { margin-top: 20px; max-width: 540px; font-size: 18px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Tiaris */
.panel--tiaris { background: var(--tiaris-bg); border-color: var(--tiaris-line); }
.panel--tiaris .chip { border-color: var(--tiaris-chip); color: var(--tiaris-accent); }
.panel--tiaris .panel__logo img { height: clamp(64px, 8vw, 96px); }
.panel--tiaris .panel__tagline { color: var(--tiaris-accent); }
.panel__main { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.panel--tiaris .panel__body { margin-top: 20px; max-width: 520px; }
.facts {
  margin-bottom: 32px; display: grid; grid-template-columns: auto 1fr;
  border-top: 1px solid var(--tiaris-line); font-size: 15px;
}
.facts dt, .facts dd { padding: 14px 0; border-bottom: 1px solid var(--tiaris-line); }
.facts dt {
  padding-right: 24px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.panel--tiaris .actions { margin-top: 0; }
.btn--accent { background: var(--tiaris-accent); color: #10150f; }
.panel__visual {
  min-height: 420px; padding: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px; border: 1px solid var(--tiaris-line); background: var(--tiaris-visual);
}
.panel__visual img { display: block; width: min(100%, 460px); height: auto; }

/* Whombat */
.panel--whombat { background: var(--wb-bg); border-color: var(--wb-line); color: var(--wb-ink); }
.panel--whombat .chip { border-color: var(--wb-chip-line); color: var(--wb-chip-text); }
.panel--whombat .chip .dot { background: var(--wb-gold); }
.panel--whombat .panel__logo img { height: clamp(52px, 7vw, 84px); }
.panel--whombat .panel__tagline { color: var(--wb-ink); font-weight: 700; }
.panel--whombat .panel__body { margin-top: 0; color: var(--wb-body); }
.btn--ink { margin-top: 24px; background: var(--wb-ink); color: var(--wb-bg); }
.agents { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 16px; }
.agents li { display: flex; flex-direction: column; gap: 0; }
.agents__img { aspect-ratio: 1 / 1; border-radius: 20px; background: var(--wb-tile); overflow: hidden; margin-bottom: 14px; }
.agents__img img { display: block; width: 100%; height: 100%; }
.agents__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.agents__role { margin-top: 2px; font-size: 14px; color: var(--wb-muted); }

/* Fusebox */
.panel--fusebox { background: var(--fb-bg); border-color: var(--fb-line); }
.panel--fusebox .panel__tagline { margin-top: 24px; color: var(--fb-accent); }
.panel--fusebox .panel__body { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.panel--fusebox .chip { border-color: var(--fb-chip); color: var(--fb-accent); }
.panel--fusebox .chip--quiet { border-color: var(--fb-line); color: var(--muted); }
.fusebox__name {
  margin-top: 28px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(40px, 6.2vw, 88px); line-height: 1; letter-spacing: -.06em;
}
.fusebox__name span { color: var(--fb-accent); }
.panel--fusebox .btn--accent { background: var(--fb-accent); color: var(--fb-bg); }

.shots { margin-top: 56px; }
.shots__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.shots__tabs button {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  background: transparent; color: var(--text-2); border: 1px solid var(--fb-tab-line);
}
.shots__tabs button[aria-pressed="true"] { background: var(--fb-accent); color: var(--fb-bg); border-color: var(--fb-accent); }
.shots__frame {
  border-radius: 16px; border: 1px solid var(--fb-line); background: var(--fb-term); overflow: hidden;
  aspect-ratio: 1800 / 1148;
}
.shots__frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
/* Phones: screenshots are dense dashboards. Show them at a readable size and let the frame scroll sideways. */
@media (max-width: 699px) {
  .shots__frame { aspect-ratio: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shots__frame img { width: 880px; max-width: none; height: auto; }
}
.shots__caption { margin-top: 14px; min-height: 24px; font-size: 15px; color: var(--muted); }

.features { margin-top: 48px; }
.features li { display: block; }
.features .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--fb-accent); }
.features h4 { margin: 12px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.features p { font-size: 15px; line-height: 1.55; color: var(--muted); }

.fusebox__bottom { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.terminal, .providers { background: var(--fb-term); border: 1px solid var(--fb-line); border-radius: 16px; padding: 24px; }
.terminal { font-family: var(--font-mono); font-size: 14px; line-height: 1.8; overflow-x: auto; }
.terminal .c { color: var(--dim); }
.terminal .gap { margin-top: 8px; }
.terminal .prompt { color: var(--fb-accent); }
.terminal .out { color: var(--muted); }
.terminal .nowrap { word-break: break-all; }
.providers .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.providers ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.providers li { padding: 6px 12px; border: 1px solid var(--fb-line); border-radius: 999px; font-size: 14px; }
.disclaimer { margin-top: 24px; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--fb-note); }

/* ---------- expertise ---------- */
.expertise { margin-top: 56px; }
.expertise .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; }
.num--red { color: var(--cybex-red-text); }
.expertise h3 { margin: 16px 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
.expertise p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.tags { margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: 13px; }

/* ---------- about ---------- */
.timeline { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px 24px; }
.timeline li { border-top: 1px solid var(--c); padding-top: 24px; }
.timeline__label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.timeline__name { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -.03em; }
.timeline p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: var(--section-gap);
  padding-top: 48px; padding-bottom: 56px;
  /* top rule that lines up with the content, not the outer padding box */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  font-size: 14px; color: var(--muted);
}
.site-footer img { display: block; height: 26px; width: auto; }
.site-footer .tagline { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .product-index__item { transition: none; }
}