/* Gorban — dark-mode + bright-orange layer on top of Salix (tokens.css → salix.css → this file).
   Same layout, radii, type and rhythm as Salix; only colours flip. */
:root {
  color-scheme: dark;
  --bg: #0A0A0B;           /* page */
  --white: #0A0A0B;        /* Salix uses --white for the page background */
  --panel: #111113;        /* header pill, panels, mock frames */
  --panel-2: #1C1C1F;      /* nested mock tray */
  --card: #161618;         /* mock shells + cards (Salix "white" surfaces) */
  --ink: #F4F4F5;
  --ink-deep: #FFFFFF;
  --body: #A1A1AA;
  --muted: #71717A;
  --placeholder: #8A8A93;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.07);

  /* Main colour: bright orange replaces the Salix blue */
  --blue: #FF6A1F;
  --orange-soft: #FFB13D;
  --cyan: #FF8A1F;         /* button underline */
  --rainbow: linear-gradient(90deg, #FFC24D 0%, #FF8A1F 33.039%, #FF5A1F 68.845%, #FF3D2E 100%);
}

body { background: var(--bg); }
::selection { background: rgba(255, 106, 31, .35); }

/* Frame */
.site-head .rail i { background: var(--bg); }

/* Buttons */
.btn { background: linear-gradient(180deg, #2A2A2E 0%, #151517 46%); border: 1px solid rgba(255,255,255,.14); }
.btn--glow { border: 0; border-bottom: 1.5px solid var(--cyan); }
.btn--white { color: #0A0A0B; background: #F4F4F5; border: 0; }
.btn--light { color: var(--ink); background: var(--panel); border: 1px solid rgba(255,255,255,.22); }
.btn--light:hover { background: #1A1A1D; }

/* Chips */
.chip { background: var(--card); filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.chip--hero { border: 1px solid rgba(255,255,255,.1); }

/* Product mocks: Salix white surfaces → dark card */
.m-shell, .m-main, .m-card, .m-inbox, .v-task, .v-tray .m-stat, .k-card, .an-shell, .tip, .m-pipe .tip { background: var(--card); }
.m-shell { border-color: rgba(255,255,255,.07); }
.m-seg .on { background: #26262A; color: var(--ink); }
.m-user b, .m-pipe .tip p b, .tip b { color: var(--ink); }
.m-pipe .tip { filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); border: 1px solid var(--line-2); }
.faces > * { border-color: var(--card); background: #2A2A2E; }
.v-bar span { background: var(--card); color: var(--ink); }
.deals th { background: #1B1B1E; }
.m-badge { background: var(--blue); }
.why-card .fit, .tool .fit { background: var(--panel); }

/* Proof: the one inverse (light) moment replaces Salix's dark quote card */
.stat-card { background: var(--panel); }
.stat-card--blue { background: var(--blue); }
.stat-card--pink { background: var(--pink); }
.quote-card { background: var(--panel); }
.quote-card--dark { background: #F4F4F5; color: #0A0A0B; }
.quote-card--dark .who small { color: #0A0A0B; opacity: .6; }

/* FAQ */
.faq-item { border-color: rgba(255,255,255,.1); }

/* Footer */
.socials a { background: #232327; }
.foot-menus a:hover { color: var(--blue); }

/* ───────── Case study (new section, built from Salix parts) ───────── */
.case { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.case .sec-head { width: min(780px, 100%); }
.case-panel { width: 100%; display: grid; grid-template-columns: 1fr 1.18fr; gap: 24px; padding: 12px; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-panel); }
.case-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 36px 28px 28px 36px; }
.case-copy .brand { color: var(--ink); }
.case-copy h3 { margin-top: 24px; color: var(--ink); }
.case-copy > div > p { margin-top: 12px; color: var(--body); max-width: 380px; }
.case-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.case-steps li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; font-size: 14px; line-height: 1.7; color: var(--body); }
.case-steps b { font-weight: 500; color: var(--ink); }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; border-top: 1.5px solid var(--line); }
.case-stats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.4; letter-spacing: -1.5px; color: var(--ink); }
.case-stats b em { font-style: normal; color: var(--blue); }
.case-stats span { display: block; font-size: 12px; line-height: 1.7; color: var(--body); }
.case-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.case-foot .who small { opacity: .8; }
.case-shot { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-shell); overflow: hidden; }
.case-tag { align-self: flex-end; margin: 18px 18px -12px 0; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; line-height: 1.7; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.case-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.case-shot .deals { border: 0; background: transparent; }
@media (max-width: 960px) {
  .case-panel { grid-template-columns: 1fr; }
  .case-copy { padding: 28px 20px 20px; }
}
@media (max-width: 480px) { .case-stats b { font-size: 26px; } .case-steps li { grid-template-columns: 1fr; gap: 0; } }