/* ============================================================================
   case-study-premium.css — premium case-study template (.csx)
   Warm off-white canvas · terracotta accent · charcoal type · white cards.
   Fully scoped under .csx so it never leaks into other pages. Used by
   js/case-study-template.js. Hero stays light in both themes (like the
   homepage hero); the rest follows the theme toggle.
   ========================================================================== */

.csx {
  --csx-bg:          var(--b-bg, #FAF6F0);
  --csx-bg-alt:      var(--b-alt, #F3ECE2);
  --csx-card:        #FFFFFF;
  --csx-ink:         var(--b-ink, #231F1C);
  --csx-ink-2:       var(--b-ink2, #5B524B);
  --csx-ink-3:       var(--b-ink3, #7A6F66);
  --csx-line:        rgba(35, 31, 28, 0.10);
  --csx-accent:      var(--b-a, #B8512F);
  --csx-accent-2:    var(--b-a2, #9A3F20);
  --csx-accent-soft: rgba(var(--b-rgb, 184, 81, 47), 0.10);
  --csx-shadow:      0 1px 2px rgba(35, 31, 28, 0.04), 0 14px 34px -18px rgba(70, 40, 22, 0.22);
  --csx-radius:      20px;
  --csx-serif:       var(--font-display);

  background: var(--csx-bg);
  color: var(--csx-ink);
  font-family: var(--font-body);
  overflow-x: clip;
}
:root[data-theme="dark"] .csx {
  --csx-bg:          var(--b-bg-dk, #171310);
  --csx-bg-alt:      var(--b-alt-dk, #1E1914);
  --csx-card:        var(--b-card-dk, #26201A);
  --csx-ink:         var(--b-ink-dk, #F5EFE8);
  --csx-ink-2:       var(--b-ink2-dk, #CFC4B9);
  --csx-ink-3:       var(--b-ink3-dk, #A4988D);
  --csx-line:        rgba(255, 255, 255, 0.10);
  --csx-accent:      var(--b-a-dk, #E0734B);
  --csx-accent-2:    var(--b-a2-dk, #F08A63);
  --csx-accent-soft: rgba(var(--b-rgb-dk, 224, 115, 75), 0.18);
  --csx-shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -18px rgba(0, 0, 0, 0.6);
}

.csx *, .csx *::before, .csx *::after { box-sizing: border-box; }
.csx h1, .csx h2, .csx h3, .csx p, .csx ul, .csx ol, .csx dl, .csx dd, .csx figure { margin: 0; padding: 0; }
.csx ul, .csx ol { list-style: none; }
.csx-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ── Scroll reveal (enabled by JS via .csx-js; visible by default) ───── */
.csx-js .csx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.csx-js .csx-reveal--scale { transform: scale(0.96) translateY(14px); }
.csx-js .csx-reveal.is-in { opacity: 1; transform: none; }
.csx-d1 { transition-delay: 70ms !important; }  .csx-d2 { transition-delay: 140ms !important; }
.csx-d3 { transition-delay: 210ms !important; } .csx-d4 { transition-delay: 280ms !important; }
.csx-d5 { transition-delay: 350ms !important; } .csx-d6 { transition-delay: 420ms !important; }
.csx-d7 { transition-delay: 490ms !important; } .csx-d8 { transition-delay: 560ms !important; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.csx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform 220ms var(--ease-out), background 220ms ease, box-shadow 220ms ease, border-color 220ms ease, color 220ms ease;
}
.csx-btn svg { transition: transform 220ms var(--ease-out); }
.csx-btn:hover svg { transform: translateX(3px); }
.csx-btn:focus-visible { outline: 3px solid var(--csx-accent); outline-offset: 3px; }
.csx-btn--primary { background: var(--csx-accent); color: #fff; box-shadow: 0 12px 26px -10px rgba(var(--b-rgb, 184, 81, 47), 0.7); }
.csx-btn--primary:hover { background: var(--csx-accent-2); transform: translateY(-2px); }
.csx-btn--ghost { color: var(--csx-ink); border-color: rgba(35, 31, 28, 0.22); background: transparent; }
.csx-btn--ghost:hover { border-color: var(--csx-ink); transform: translateY(-2px); }
.csx-btn--light { background: #fff; color: #231F1C; }
.csx-btn--light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
.csx-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.csx-btn--outline:hover { border-color: #fff; transform: translateY(-2px); }
.csx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.csx-cta-row--center { justify-content: center; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.csx .csx-hero.hero--light {
  /* hero stays light in both themes */
  --csx-ink: var(--b-ink, #231F1C); --csx-ink-2: var(--b-ink2, #5B524B); --csx-ink-3: var(--b-ink3, #7A6F66); --csx-card: #fff;
  --csx-line: rgba(35, 31, 28, 0.10); --csx-accent: var(--b-a, #B8512F); --csx-accent-2: var(--b-a2, #9A3F20); --csx-accent-soft: rgba(var(--b-rgb, 184, 81, 47), 0.10);
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * var(--navbar-height, 72px));
  padding: calc(var(--navbar-height, 72px) + clamp(40px, 6vw, 72px)) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(60% 55% at 88% 8%, rgba(var(--b-rgb, 184, 81, 47), 0.14), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgba(var(--b-rgb, 184, 81, 47), 0.08), transparent 70%),
    var(--b-bg, #FAF6F0);
  color: var(--b-ink, #231F1C);
}
.csx-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.csx-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.csx-orb--1 { width: 380px; height: 380px; top: -120px; right: 8%; background: rgba(var(--b-rgb, 184, 81, 47), 0.16); }
.csx-orb--2 { width: 300px; height: 300px; bottom: -120px; left: -60px; background: rgba(var(--b-rgb, 184, 81, 47), 0.10); }

.csx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.csx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--csx-ink-3); margin-bottom: 22px; }
.csx-crumb a { color: var(--csx-ink-2); text-decoration: none; }
.csx-crumb a:hover { color: var(--csx-accent); }
.csx-crumb [aria-current] { color: var(--csx-ink); font-weight: 600; }
.csx-kicker {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--csx-accent); background: var(--csx-accent-soft); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.csx-title { font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; margin-bottom: 18px; }
.csx-lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--csx-ink-2); max-width: 52ch; margin-bottom: 28px; }

/* Layered browser frames */
.csx-hero__visual { position: relative; }
.csx-stack { position: relative; width: 100%; }
.csx-stack--flat { aspect-ratio: 1 / 0.9; }
.csx-frame {
  background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 34px 60px -24px rgba(70, 40, 22, 0.45), 0 2px 6px rgba(35, 31, 28, 0.06);
}
.csx-frame__bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: var(--b-alt, #F1E9DE); border-bottom: 1px solid var(--csx-line); }
.csx-frame__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(35, 31, 28, 0.2); }
.csx-frame__bar i:first-child { background: #D9694A; }
.csx-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: opacity 160ms ease; }
.csx-stack .csx-frame { position: absolute; }
.csx-frame--main { width: 84%; top: 6%; right: 0; z-index: 2; }
.csx-frame--a    { width: 50%; bottom: 0; left: 0; z-index: 3; }
.csx-frame--b    { width: 34%; top: 0; left: 3%; z-index: 1; }
@keyframes csxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
  .csx-frame--a { animation: csxFloat 7s ease-in-out infinite; }
  .csx-frame--b { animation: csxFloat 9s ease-in-out infinite 1.2s; }
}

/* Facts bar */
.csx-facts {
  display: flex; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px);
  background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: var(--csx-radius);
  box-shadow: var(--csx-shadow); padding: 22px 6px;
}
.csx-fact { flex: 1 1 160px; padding: 6px 22px; border-left: 1px solid var(--csx-line); min-width: 0; }
.csx-fact:first-child { border-left: 0; }
.csx-fact--wide { flex: 2 1 280px; }
.csx-fact dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csx-ink-3); margin-bottom: 6px; }
.csx-fact dd { font-size: 15px; font-weight: 600; color: var(--csx-ink); line-height: 1.4; }
.csx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.csx-tags span { font-size: 13px; font-weight: 600; color: var(--csx-accent); background: var(--csx-accent-soft); padding: 4px 11px; border-radius: 999px; }

/* ── Sections ────────────────────────────────────────────────────────── */
.csx-sec { padding: clamp(64px, 9vw, 110px) 0; background: var(--csx-bg); }
.csx-sec--alt { background: var(--csx-bg-alt); }
.csx-head { max-width: 780px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.csx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--csx-ink-3); margin-bottom: 14px; }
.csx-eyebrow b { color: var(--csx-accent); font-family: var(--font-mono); font-size: 14px; }
.csx-eyebrow i { width: 28px; height: 2px; background: var(--csx-accent); border-radius: 2px; }
.csx-h2, .csx-final h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
.csx-h2 em, .csx-final h2 em { font-family: var(--csx-serif); font-style: normal; font-weight: 800; color: var(--csx-accent); letter-spacing: -0.01em; }
.csx-sub { margin-top: 16px; font-size: 1.05rem; line-height: 1.75; color: var(--csx-ink-2); max-width: 68ch; }
.csx-note { margin-top: 28px; font-size: 14px; font-style: italic; color: var(--csx-ink-3); }

/* Cards + grids */
.csx-grid { display: grid; gap: 20px; }
.csx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.csx-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.csx-card {
  background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: var(--csx-radius);
  padding: 26px; box-shadow: var(--csx-shadow);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease;
}
.csx-card:hover { transform: translateY(-4px); border-color: rgba(var(--b-rgb, 184, 81, 47), 0.35); box-shadow: 0 22px 44px -22px rgba(var(--b-rgb, 184, 81, 47), 0.4); }
.csx-card h3 { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.csx-card p { font-size: 15px; line-height: 1.65; color: var(--csx-ink-2); }
.csx-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--csx-accent-soft); color: var(--csx-accent); margin-bottom: 16px; flex: none; }
.csx-ico--lg { width: 48px; height: 48px; border-radius: 14px; }

/* Requirements */
.csx-req ul { display: grid; gap: 12px; margin-top: 14px; }
.csx-req li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--csx-ink-2); }
.csx-req li svg { flex: none; margin-top: 3px; color: var(--csx-accent); }

/* Approach timeline */
.csx-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; position: relative; }
.csx-steps::before { content: ''; position: absolute; top: 21px; left: 3%; right: 3%; height: 2px; background: linear-gradient(90deg, var(--csx-accent), var(--csx-line)); }
.csx-step__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--csx-bg); border: 2px solid var(--csx-accent); color: var(--csx-accent);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; transition: background 250ms ease, color 250ms ease, transform 250ms var(--ease-out);
}
.csx-step:hover .csx-step__dot { background: var(--csx-accent); color: #fff; transform: scale(1.08); }
.csx-step h3 { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
.csx-step p { font-size: 14px; line-height: 1.55; color: var(--csx-ink-2); }

/* Design */
.csx-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 28px; }
.csx .cs-shot { border-radius: 16px; border-color: var(--csx-line); background: var(--csx-card); box-shadow: var(--csx-shadow); }
.csx .cs-shot:hover { border-color: var(--csx-accent); box-shadow: 0 22px 44px -20px rgba(var(--b-rgb, 184, 81, 47), 0.45); }
.csx-swatches, .csx-fonts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.csx-swatch, .csx-font { display: grid; gap: 4px; min-width: 130px; padding: 14px; background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: 16px; }
.csx-swatch span { height: 56px; border-radius: 10px; border: 1px solid var(--csx-line); }
.csx-swatch b, .csx-font b { font-size: 14px; }
.csx-swatch i, .csx-font i { font-size: 13px; font-style: normal; color: var(--csx-ink-3); }
.csx-font span { font-family: var(--csx-serif); font-size: 2.2rem; line-height: 1; color: var(--csx-accent); }

/* Solution — feature explorer */
.csx-explorer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.csx-feats { display: grid; gap: 12px; }
.csx-feat {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; text-align: left; width: 100%;
  background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: 18px; padding: 18px 20px; cursor: pointer;
  font-family: inherit; color: inherit; transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms var(--ease-out), background 250ms ease;
}
.csx-feat:hover { transform: translateX(4px); }
.csx-feat:focus-visible { outline: 3px solid var(--csx-accent); outline-offset: 2px; }
.csx-feat.is-active { border-color: var(--csx-accent); box-shadow: 0 18px 36px -22px rgba(var(--b-rgb, 184, 81, 47), 0.55); }
.csx-feat__n { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--csx-accent); padding-top: 2px; }
.csx-feat__t { font-weight: 700; font-size: 1.02rem; }
.csx-feat__d { font-size: 14px; line-height: 1.55; color: var(--csx-ink-2); margin-top: 3px; }
.csx-stage { position: sticky; top: 96px; }
.csx-frame--stage { box-shadow: 0 40px 70px -30px rgba(70, 40, 22, 0.5); }
.csx-stage img.is-swapping { opacity: 0; }

/* Technology & architecture */
.csx-arch { display: flex; align-items: stretch; gap: 14px; padding: 22px; margin-bottom: 24px; background: var(--csx-card); border: 1px dashed rgba(var(--b-rgb, 184, 81, 47), 0.45); border-radius: 24px; }
.csx-layer { flex: 1 1 0; min-width: 0; padding: 18px; border-radius: 16px; background: var(--csx-bg); border: 1px solid var(--csx-line); }
.csx-layer__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csx-accent); margin-bottom: 12px; }
.csx-layer__items { display: flex; flex-wrap: wrap; gap: 8px; }
.csx-layer__items b { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--csx-card); border: 1px solid var(--csx-line); }
.csx-link { display: grid; place-items: center; color: var(--csx-accent); flex: none; }
.csx-tech b { display: block; font-family: var(--font-heading); font-size: 1.02rem; margin-bottom: 6px; color: var(--csx-accent); }
.csx-tech { padding: 20px; }

/* Testing */
.csx-pipeline { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.csx-pipe { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: var(--csx-shadow); }
.csx-pipe span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--csx-accent); color: #fff; font-size: 13px; font-family: var(--font-mono); }
.csx-pipe:not(:last-child)::after { content: '→'; margin-left: 6px; color: var(--csx-accent); font-weight: 700; }
.csx-cat { padding: 22px; }
.csx-cat .csx-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px; }

/* Deployment */
.csx-deploy { display: flex; gap: 8px; }
.csx-dep { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.csx-dep__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--csx-accent); color: #fff; margin-bottom: 8px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--csx-accent-soft); }
.csx-dep:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; background: linear-gradient(90deg, var(--csx-accent), rgba(var(--b-rgb, 184, 81, 47), 0.25)); }
.csx-dep b { font-family: var(--font-heading); font-size: 1.02rem; }
.csx-dep i { font-style: normal; font-size: 14px; color: var(--csx-ink-2); }

/* Results */
.csx-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 20px; }
.csx-metrics li { text-align: center; }
.csx-metrics b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--csx-accent); line-height: 1.1; }
.csx-metrics span { font-size: 14px; color: var(--csx-ink-2); }
.csx-outcome { display: flex; flex-direction: column; }
.csx-outcome p { color: var(--csx-ink); font-weight: 500; font-size: 1rem; }
.csx-ba { margin-top: 28px; background: var(--csx-card); border: 1px solid var(--csx-line); border-radius: var(--csx-radius); box-shadow: var(--csx-shadow); overflow: hidden; }
.csx-ba__head, .csx-ba__row { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 20px; padding: 16px 24px; align-items: center; }
.csx-ba__head { background: var(--csx-bg-alt); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csx-ink-3); }
.csx-ba__row { border-top: 1px solid var(--csx-line); }
.csx-ba__label { font-weight: 700; }
.csx-ba__before { color: var(--csx-ink-3); text-decoration: line-through; text-decoration-color: rgba(var(--b-rgb, 184, 81, 47), 0.45); }
.csx-ba__after { color: var(--csx-ink); font-weight: 600; }
.csx-ba__after::before { content: '→  '; color: var(--csx-accent); }
.csx-quote { margin-top: 28px; padding: clamp(28px, 4vw, 44px); background: var(--csx-card); border: 1px solid var(--csx-line); border-left: 4px solid var(--csx-accent); border-radius: var(--csx-radius); box-shadow: var(--csx-shadow); }
.csx-quote blockquote { font-family: var(--csx-serif); font-style: normal; font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.45; }
.csx-quote figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.csx-quote figcaption span { font-size: 14px; color: var(--csx-ink-3); }

/* Roadmap */
.csx-phase__tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csx-accent); background: var(--csx-accent-soft); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.csx-phase ul { display: grid; gap: 10px; margin-top: 12px; }
.csx-phase li { display: flex; gap: 10px; font-size: 15px; color: var(--csx-ink-2); }
.csx-phase li svg { flex: none; margin-top: 3px; color: var(--csx-accent); }

/* Final CTA */
.csx-final { padding: 0 0 clamp(64px, 9vw, 110px); background: var(--csx-bg); }
.csx-final__card {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  padding: clamp(40px, 7vw, 84px) clamp(22px, 5vw, 64px); border-radius: 32px;
  background: radial-gradient(70% 90% at 80% 0%, rgba(var(--b-rgb, 184, 81, 47), 0.55), transparent 65%), linear-gradient(135deg, var(--b-deep, #2C2420), var(--b-deep2, #181310));
  box-shadow: 0 40px 80px -36px rgba(35, 20, 12, 0.7);
}
.csx-final__card h2 { color: #fff; max-width: 18ch; margin: 0 auto 16px; }
.csx-final__card h2 em { color: var(--b-a-dk, #F2A07F); }
.csx-final__card p { max-width: 54ch; margin: 0 auto 30px; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.csx-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: rgba(255, 255, 255, 0.72); font-size: 15px; text-decoration: none; }
.csx-next b { color: #fff; }
.csx-next:hover { color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .csx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .csx-steps::before { display: none; }
  .csx-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .csx-hero__grid { grid-template-columns: 1fr; }
  .csx-hero__visual { max-width: 640px; width: 100%; margin-inline: auto; }
  .csx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csx-explorer { grid-template-columns: 1fr; }
  .csx-stage { position: static; order: -1; }
}
@media (max-width: 900px) {
  .csx-grid--3 { grid-template-columns: 1fr; }
  .csx-arch { flex-direction: column; }
  .csx-link svg { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .csx-facts { padding: 8px 18px; }
  .csx-fact, .csx-fact--wide { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--csx-line); padding: 14px 4px; }
  .csx-fact:first-child { border-top: 0; }
  .csx-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csx-deploy { flex-direction: column; gap: 22px; }
  .csx-dep { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; flex-wrap: wrap; }
  .csx-dep__dot { margin: 0; }
  .csx-dep b { align-self: center; }
  .csx-dep i { flex-basis: 100%; padding-left: 48px; margin-top: -10px; }
  .csx-dep:not(:last-child)::after { top: 40px; left: 16px; right: auto; width: 2px; height: calc(100% - 12px); background: rgba(var(--b-rgb, 184, 81, 47), 0.35); }
  .csx-ba__head { display: none; }
  .csx-ba__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .csx-ba__before::before { content: 'Before: '; text-decoration: none; display: inline-block; color: var(--csx-ink-3); font-weight: 600; }
}
@media (max-width: 640px) {
  .csx-steps { grid-template-columns: 1fr; row-gap: 0; }
  .csx-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; position: relative; padding-bottom: 22px; }
  .csx-step__dot { grid-row: 1 / span 2; margin: 0; }
  .csx-step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; background: var(--csx-line); }
  .csx-grid--4 { grid-template-columns: 1fr; }
  .csx-pipe:not(:last-child)::after { display: none; }
  .csx-frame--b { display: none; }
  .csx-frame--main { width: 92%; }
  .csx-frame--a { width: 56%; }
  .csx-cta-row .csx-btn { flex: 1 1 100%; }
}
@media (max-width: 400px) { .csx-grid--5 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .csx *, .csx *::before, .csx *::after { animation: none !important; transition: none !important; }
  .csx-js .csx-reveal { opacity: 1; transform: none; }
}


/* ============================================================================
   DEVICE MOCKUPS — phone · laptop · laptop + phone
   Mobile projects → phones · web → laptop · custom → laptop with a phone.
   ========================================================================== */

/* Phone — iPhone-style: titanium frame, dynamic island, side buttons */
.csx-phone {
  position: relative; margin: 0; width: 100%; aspect-ratio: 9 / 19.5;
  background: #05070a; border: 6px solid #1c2128; border-radius: 17% / 8%; overflow: visible;
  box-shadow: 0 0 0 1.5px #5b6470, 0 0 0 2.5px #0b0e12, inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 38px 50px -22px rgba(10, 20, 36, 0.6);
}
.csx-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13% / 6%; background: #fff; transition: opacity 160ms ease; }
.csx-phone__notch { position: absolute; z-index: 2; top: 2%; left: 50%; width: 29%; height: 2.5%; transform: translateX(-50%); background: #000; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.csx-phone::before, .csx-phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a424d, #1c2128); }
.csx-phone::before { left: -9.5px; top: 17%; height: 11%; }
.csx-phone::after { right: -9.5px; top: 25%; height: 9%; }

/* Laptop */
.csx-laptop { position: relative; margin: 0; width: 100%; }
.csx-laptop__screen {
  position: relative; background: #17120F; border: 9px solid #17120F; border-bottom-width: 11px;
  border-radius: 16px 16px 4px 4px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(40, 22, 12, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.csx-laptop__screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 5px; background: #fff; transition: opacity 160ms ease; }
.csx-laptop__base {
  position: relative; display: block; height: 13px; width: 114%; margin-left: -7%;
  background: linear-gradient(#dcd5cc, #b7aea4); border-radius: 0 0 18px 18px;
  box-shadow: 0 22px 28px -14px rgba(40, 22, 12, 0.5);
}
.csx-laptop__base::after { content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; transform: translateX(-50%); background: #a2998f; border-radius: 0 0 8px 8px; }
.csx img.is-swapping { opacity: 0; }

/* Hero stacks */
.csx-stack--laptop { aspect-ratio: 1 / 0.84; }
.csx-stack--laptop .csx-laptop { position: absolute; top: 2%; right: 5%; width: 82%; z-index: 2; }
.csx-stack--laptop .csx-frame--a { position: absolute; bottom: 0; left: 0; width: 38%; z-index: 3; }

.csx-stack--mix { aspect-ratio: 1 / 0.84; }
.csx-stack--mix .csx-laptop { position: absolute; top: 0; left: 0; width: 80%; z-index: 1; }
.csx-stack--mix .csx-phone--over { position: absolute; right: 1%; bottom: 0; width: 25%; z-index: 2; }

.csx-stack--phone { aspect-ratio: 1 / 0.9; }
.csx-stack--phone .csx-phone { position: absolute; }
.csx-phone--main { left: 50%; top: 0; width: 33%; z-index: 3; transform: translateX(-50%); }
.csx-stack--phone .csx-phone--l { left: 6%;  top: 14%; width: 27%; z-index: 1; transform: rotate(-6deg); }
.csx-stack--phone .csx-phone--r { right: 6%; top: 14%; width: 27%; z-index: 2; transform: rotate(6deg); }
@keyframes csxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: no-preference) {
  .csx-stack--phone .csx-phone--l   { animation: csxBob 8s ease-in-out infinite 0.6s; }
  .csx-stack--phone .csx-phone--r   { animation: csxBob 9s ease-in-out infinite 1.4s; }
  .csx-stack--phone .csx-phone--main{ animation: csxBob 7s ease-in-out infinite; }
  .csx-stack--mix .csx-phone--over  { animation: csxBob 7s ease-in-out infinite 0.8s; }
}

/* Solution stages */
.csx-stage--phone {
  display: grid; place-items: center; padding: clamp(24px, 5vw, 48px) 20px;
  background: radial-gradient(60% 60% at 50% 35%, var(--csx-accent-soft), transparent 72%), var(--csx-card);
  border: 1px solid var(--csx-line); border-radius: 28px; box-shadow: var(--csx-shadow);
}
.csx-stage--phone .csx-phone { width: min(270px, 68%); }
.csx-stage--mix { position: relative; padding-bottom: 6%; }
.csx-stage--mix .csx-laptop { width: 90%; }
.csx-stage--mix .csx-phone--over { position: absolute; right: 0; bottom: 0; width: 24%; z-index: 2; }
.csx-laptop--stage { max-width: 100%; }

/* Design gallery — phone thumbs */
.csx-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 28px); margin-bottom: 28px; }
.csx .csx-shot--phone { width: clamp(150px, 21vw, 200px); flex: none; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 34px; overflow: visible; }
.csx .csx-shot--phone:hover { border: 0; box-shadow: none; transform: translateY(-6px); }
.csx .csx-shot--phone .cs-shot__overlay { border-radius: 32px; }
.csx .csx-shot--phone .cs-shot__cap { font-size: 13px; padding-inline: 10px; text-align: center; }
.csx-minihead { margin: 8px 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--csx-ink-3); text-align: center; }

@media (max-width: 1024px) {
  .csx-stack--laptop, .csx-stack--mix, .csx-stack--phone, .csx-stack--flat { max-width: 640px; margin-inline: auto; }
  .csx-stage--mix, .csx-stage--phone { max-width: 640px; margin-inline: auto; width: 100%; }
}
@media (max-width: 640px) {
  .csx-phone { border-width: 4px; }
  .csx-phone::before, .csx-phone::after { display: none; }
  .csx-laptop__screen { border-width: 6px; border-bottom-width: 8px; border-radius: 10px 10px 3px 3px; }
  .csx-laptop__base { height: 9px; }
  .csx-stack--phone .csx-phone--main { width: 38%; }
  .csx-stack--phone .csx-phone--l, .csx-stack--phone .csx-phone--r { width: 30%; }
  .csx .csx-shot--phone { width: calc(50% - 12px); }
}