/* Homepage sections — Masterpiece */

/* ——— HERO ——— */
.cdx-hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--cdx-nav) + var(--cdx-space-6)) 0 var(--cdx-space-8);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cdx-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 40%, rgba(61, 158, 255, 0.09), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(26, 111, 212, 0.06), transparent 50%),
    var(--cdx-void);
}
.cdx-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - (var(--cdx-pad) * 2), var(--cdx-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.cdx-hero__copy { min-width: 0; }
.cdx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--cdx-space-6);
}
.cdx-hero__trust {
  margin-top: var(--cdx-space-5);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: #b4bcc8;
}

/* Canvas — custom interface composition */
.cdx-canvas {
  position: relative;
  min-height: 28rem;
  perspective: 1200px;
}
.cdx-canvas__desk {
  position: absolute;
  inset: 8% 4% 4% 8%;
  border: 1px solid var(--cdx-line-strong);
  border-radius: var(--cdx-r);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
    var(--cdx-surface);
  box-shadow: var(--cdx-shadow);
  overflow: hidden;
  transform: rotateY(-4deg) rotateX(2deg);
  transform-origin: center;
  transition: transform var(--cdx-normal) var(--cdx-ease);
}
.cdx-canvas__guides {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(61,158,255,0.12) 47px, rgba(61,158,255,0.12) 48px),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(61,158,255,0.08) 47px, rgba(61,158,255,0.08) 48px);
  pointer-events: none;
}
.cdx-canvas__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--cdx-line);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--cdx-mono);
  font-size: 0.7rem;
  color: var(--cdx-faint);
}
.cdx-canvas__dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: #3a4454;
}
.cdx-canvas__dot:nth-child(1) { background: #ff5f57; }
.cdx-canvas__dot:nth-child(2) { background: #febc2e; }
.cdx-canvas__dot:nth-child(3) { background: #28c840; }
.cdx-canvas__screen {
  padding: 1.1rem;
  display: grid;
  gap: 0.75rem;
}
.cdx-canvas__hero-block {
  min-height: 5.5rem;
  border-radius: var(--cdx-r-sm);
  background: linear-gradient(120deg, rgba(61,158,255,0.18), rgba(16,21,29,0.9));
  border: 1px solid rgba(61,158,255,0.28);
  display: grid;
  align-content: center;
  padding: 1rem 1.1rem;
  gap: 0.4rem;
}
.cdx-canvas__hero-block strong {
  font-family: var(--cdx-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--cdx-text);
  font-weight: 700;
}
.cdx-canvas__hero-block em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--cdx-muted);
}
.cdx-canvas__rows {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
}
.cdx-canvas__card {
  min-height: 4.5rem;
  border-radius: var(--cdx-r-sm);
  border: 1px solid var(--cdx-line);
  background: rgba(255,255,255,0.03);
  padding: 0.7rem 0.75rem;
  font-size: 0.72rem;
  color: var(--cdx-muted);
  line-height: 1.35;
}
.cdx-canvas__card strong {
  display: block;
  color: var(--cdx-text);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.cdx-canvas__code {
  position: absolute;
  left: 0; bottom: 12%;
  width: 38%;
  padding: 0.75rem;
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r-sm);
  background: rgba(11, 14, 20, 0.88);
  backdrop-filter: blur(8px);
  font-family: var(--cdx-mono);
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--cdx-muted);
  z-index: 2;
}
.cdx-canvas__code em {
  font-style: normal;
  color: var(--cdx-cyan);
}
.cdx-canvas__phone {
  position: absolute;
  right: 0; bottom: 0;
  width: 8.5rem;
  height: 16rem;
  border: 1px solid var(--cdx-line-strong);
  border-radius: 1rem;
  background: var(--cdx-elevated);
  box-shadow: var(--cdx-shadow);
  z-index: 3;
  overflow: hidden;
  padding: 0.65rem 0.55rem;
}
.cdx-canvas__phone-notch {
  width: 2.5rem; height: 0.3rem;
  margin: 0 auto 0.6rem;
  border-radius: 999px;
  background: #2a3344;
}
.cdx-canvas__phone-block {
  height: 3.5rem;
  margin-bottom: 0.45rem;
  border-radius: var(--cdx-r-sm);
  background: linear-gradient(140deg, rgba(61,158,255,0.35), rgba(61,158,255,0.08));
}
.cdx-canvas__phone-line {
  height: 0.4rem;
  margin-bottom: 0.35rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
}
.cdx-canvas__phone-line:nth-child(3) { width: 70%; }
.cdx-canvas__phone-line:nth-child(4) { width: 85%; }
.cdx-canvas__phone-line:nth-child(5) { width: 55%; }
.cdx-canvas__phone-cta {
  margin-top: 0.55rem;
  height: 1.35rem;
  border-radius: 3px;
  background: var(--cdx-blue);
  opacity: 0.9;
}

/* Motion enhances — headline stays readable from first paint */
.cdx-hero__copy > *,
.cdx-canvas__desk,
.cdx-canvas__phone,
.cdx-canvas__code {
  opacity: 1;
}
.js-ready .cdx-hero__copy .cdx-lead,
.js-ready .cdx-hero__copy .cdx-hero__actions,
.js-ready .cdx-hero__copy .cdx-hero__trust {
  animation: cdx-rise var(--cdx-slow) var(--cdx-ease) both;
}
.js-ready .cdx-hero__copy .cdx-lead { animation-delay: 60ms; }
.js-ready .cdx-hero__copy .cdx-hero__actions { animation-delay: 120ms; }
.js-ready .cdx-hero__copy .cdx-hero__trust { animation-delay: 180ms; }
.js-ready .cdx-canvas__desk {
  animation: cdx-assemble 900ms var(--cdx-ease) 80ms both;
}
.js-ready .cdx-canvas__phone {
  animation: cdx-rise 800ms var(--cdx-ease) 200ms both;
}
.js-ready .cdx-canvas__code {
  animation: cdx-rise 800ms var(--cdx-ease) 260ms both;
}
@keyframes cdx-rise {
  from { opacity: 0.65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cdx-assemble {
  from { opacity: 0.7; transform: rotateY(-4deg) rotateX(2deg) translateY(10px) scale(0.99); }
  to { opacity: 1; transform: rotateY(-4deg) rotateX(2deg) translateY(0) scale(1); }
}

/* ——— PATHS ——— */
.cdx-paths {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--cdx-gutter);
}
.cdx-path {
  display: flex;
  flex-direction: column;
  padding: var(--cdx-space-6);
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  text-decoration: none !important;
  color: inherit;
  min-height: 14rem;
  transition: border-color var(--cdx-fast), background var(--cdx-fast);
  position: relative;
  overflow: hidden;
}
.cdx-path:hover {
  border-color: rgba(61, 158, 255, 0.45);
  background: var(--cdx-elevated);
  color: inherit;
}
.cdx-path--large {
  grid-row: 1 / span 2;
  min-height: 100%;
  background:
    linear-gradient(160deg, rgba(61,158,255,0.1), transparent 45%),
    var(--cdx-surface);
}
.cdx-path h3 {
  margin: 0 0 var(--cdx-space-3);
  font-family: var(--cdx-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--cdx-text);
}
.cdx-path--large .cdx-path__preview { min-height: 11rem; }
.cdx-path__preview-ui {
  display: grid;
  gap: 0.4rem;
  height: 100%;
}
.cdx-path__preview-ui .row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 0.35rem;
}
.cdx-path__preview-ui .row span,
.cdx-path__preview-ui .hero {
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: rgba(255, 255, 255, 0.04);
}
.cdx-path__preview-ui .hero {
  height: 3.2rem;
  background: linear-gradient(115deg, rgba(61, 158, 255, 0.28), rgba(255, 255, 255, 0.04));
}
.cdx-path__preview-ui .row span { height: 2.4rem; }
.cdx-path__preview-ui .cta {
  height: 1.35rem;
  width: 38%;
  border-radius: 3px;
  background: var(--cdx-blue);
  opacity: 0.85;
}
.cdx-path__preview--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  align-content: stretch;
}
.cdx-path__preview--split > span {
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  min-height: 100%;
}
.cdx-path__preview--split > span:first-child {
  background: #cfc8bb;
}
.cdx-path__preview--split > span:last-child {
  background: linear-gradient(140deg, rgba(61, 158, 255, 0.35), rgba(16, 21, 29, 0.9));
}
.cdx-path__preview--stack {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 0.35rem;
}
.cdx-path__preview--stack > span {
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: rgba(255, 255, 255, 0.04);
}
.cdx-path__preview--stack > span:first-child {
  height: 1.1rem;
  width: 55%;
  background: rgba(61, 158, 255, 0.35);
}
.cdx-path p {
  margin: 0;
  color: var(--cdx-muted);
  flex: 1;
  max-width: 32ch;
}
.cdx-path__cta {
  margin-top: var(--cdx-space-5);
  color: var(--cdx-text);
  font-weight: 600;
  font-size: 0.95rem;
}
.cdx-path:hover .cdx-path__cta { color: var(--cdx-cyan); }
.cdx-path__preview {
  margin-top: var(--cdx-space-5);
  min-height: 8.5rem;
  border-radius: var(--cdx-r-sm);
  border: 1px solid var(--cdx-line);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.85rem;
  display: grid;
  gap: 0.45rem;
}
.cdx-path__preview-bar {
  height: 0.45rem;
  width: 42%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.cdx-path__preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.cdx-path__preview-row span {
  height: 2.6rem;
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: rgba(61, 158, 255, 0.08);
}

/* ——— SHOWCASE ——— */
.cdx-show__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-3);
  align-items: center;
  margin-bottom: var(--cdx-space-5);
}
.cdx-seg {
  display: inline-grid;
  grid-auto-flow: column;
  border: 1px solid var(--cdx-line-strong);
  border-radius: var(--cdx-r);
  overflow: hidden;
  background: var(--cdx-surface);
}
.cdx-seg button {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  background: transparent;
  color: var(--cdx-muted);
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--cdx-line);
  white-space: nowrap;
}
.cdx-seg button:last-child { border-right: 0; }
.cdx-seg button[aria-selected="true"] {
  background: var(--cdx-blue);
  color: #061018;
}
.cdx-show__frame {
  border: 1px solid var(--cdx-line-strong);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-height: 18rem;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: max-width var(--cdx-normal) var(--cdx-ease);
}
/* Device widths — left-aligned to section rail, never float in empty void */
.cdx-show__frame[data-device="tablet"] {
  max-width: 40rem;
}
.cdx-show__frame[data-device="mobile"] {
  max-width: 22.5rem;
  padding: 1.15rem 1.1rem 1.25rem;
}
.cdx-show__pane { display: none; min-width: 0; }
.cdx-show__pane.is-active {
  display: block;
  animation: cdx-fade var(--cdx-normal) var(--cdx-ease);
}
@keyframes cdx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cdx-show__pane h3 {
  margin: 0.65rem 0 0.35rem;
  font-family: var(--cdx-display);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  letter-spacing: -0.03em;
}
.cdx-show__pane .cdx-lead {
  max-width: none;
  font-size: 1rem;
}
.cdx-show__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: var(--cdx-space-5);
  min-width: 0;
}
.cdx-show__frame[data-device="tablet"] .cdx-show__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cdx-show__frame[data-device="tablet"] .cdx-show__tile:last-child {
  grid-column: 1 / -1;
}
.cdx-show__frame[data-device="mobile"] .cdx-show__grid {
  grid-template-columns: 1fr;
}
.cdx-show__tile {
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r-sm);
  background: rgba(255,255,255,0.025);
  padding: 0.9rem 1rem;
  min-height: 0;
  min-width: 0;
  color: var(--cdx-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  display: grid;
  gap: 0.45rem;
}
.cdx-show__tile strong {
  display: block;
  color: var(--cdx-text);
  margin-bottom: 0;
  font-family: var(--cdx-display);
}
.cdx-show__tile-viz {
  height: 3.25rem;
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: linear-gradient(135deg, rgba(61, 158, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.cdx-show__frame[data-layout="commerce"] .cdx-show__tile-viz {
  background: linear-gradient(135deg, rgba(62, 207, 142, 0.2), rgba(61, 158, 255, 0.12));
}
.cdx-show__frame[data-layout="booking"] .cdx-show__tile-viz {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 18%, rgba(61, 158, 255, 0.2) 18%, rgba(61, 158, 255, 0.2) 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}
.cdx-show__frame[data-device="desktop"] .cdx-show__grid {
  grid-template-columns: 1.2fr 1fr 0.9fr;
}
.cdx-show__frame[data-device="tablet"] .cdx-show__grid {
  grid-template-columns: 1fr 1fr;
}
.cdx-show__frame[data-device="mobile"] .cdx-show__grid {
  grid-template-columns: 1fr;
}
.cdx-show__frame[data-device="mobile"] .cdx-show__tile-viz {
  height: 4.5rem;
}
.cdx-show__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--cdx-space-5);
}
.cdx-chip {
  min-height: 2.15rem;
  padding: 0 0.8rem;
  border-radius: var(--cdx-r);
  border: 1px solid var(--cdx-line);
  background: transparent;
  color: var(--cdx-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.cdx-chip[aria-pressed="true"] {
  border-color: var(--cdx-blue);
  color: var(--cdx-text);
  background: rgba(61, 158, 255, 0.12);
}

/* ——— REMASTER ——— */
.cdx-compare-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: var(--cdx-space-5) 0 var(--cdx-space-4);
}
.cdx-compare {
  position: relative;
  height: clamp(20rem, 42vw, 26rem);
  border: 1px solid var(--cdx-line-strong);
  border-radius: var(--cdx-r);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  background: var(--cdx-elevated);
}
.cdx-compare__after,
.cdx-compare__before {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cdx-compare__after {
  background: #0d121a;
  color: var(--cdx-text);
  z-index: 0;
}
.cdx-compare__before {
  width: 52%;
  z-index: 1;
  background: #d8d2c6;
  color: #2a2a2a;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.cdx-compare__pane-inner.cdx-compare__skin--dated { background: #d8d2c6; color: #2a2a2a; }
.cdx-compare__pane-inner.cdx-compare__skin--paper { background: #ece7dc; color: #333; }
.cdx-compare__pane-inner.cdx-compare__skin--chaos { background: #c9c2b4; color: #222; }
.cdx-compare__pane-inner.cdx-compare__skin--mail { background: #ddd8ce; color: #2a2a2a; }
.cdx-compare__pane-inner.cdx-compare__skin--slow { background: #cfc9bd; color: #333; }
.cdx-compare__pane-inner.cdx-compare__skin--obsidian { background: #0d121a; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--slate { background: #101820; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--ink { background: #0a0e14; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--editorial { background: #0e1118; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--signal { background: #0b1220; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--commerce { background: #0c1410; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--calendar { background: #0d121a; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--form { background: #0e131c; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--sections { background: #0b0f16; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--fast { background: #0a1210; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--portal { background: #0c1018; color: var(--cdx-text); }
.cdx-compare__pane-inner.cdx-compare__skin--social { background: #0d1018; color: var(--cdx-text); }
.cdx-compare__pane-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-sizing: border-box;
  overflow: hidden;
}
/* Nachher: Inhalt rechts, sichtbar bei ~50% Slider */
.cdx-compare__after .cdx-compare__pane-inner {
  padding-left: clamp(1.1rem, 46%, 28rem);
}
.cdx-compare__pane-inner .cdx-badge { width: fit-content; flex-shrink: 0; }
.cdx-compare__pane-inner h3 { flex-shrink: 0; }
.cdx-compare__pane-inner > p { flex-shrink: 0; }
.cdx-compare__pane-inner .cdx-compare__mock {
  flex: 1;
  min-height: 0;
  margin-top: 0.15rem;
}
.cdx-compare__pane-inner .cdx-compare__tags {
  flex-shrink: 0;
  margin-top: auto;
}
.cdx-compare__pane-inner--before {
  font-family: "Times New Roman", Times, serif;
}
.cdx-compare__pane-inner--before .cdx-badge {
  border-color: #999;
  color: #444;
  background: #ebe6dc;
  width: fit-content;
}
.cdx-compare__pane-inner h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-family: var(--cdx-display);
}
.cdx-compare__pane-inner--before h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1rem;
  letter-spacing: 0;
}
.cdx-compare__pane-inner p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 34ch;
  opacity: 0.9;
}
.cdx-compare__pane-inner--after p { color: var(--cdx-muted); }
.cdx-compare__mock {
  margin-top: 0;
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r-sm);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.55rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.cdx-compare__pane-inner--before .cdx-compare__mock {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.4);
}
.cm {
  height: 100%;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.68rem;
  line-height: 1.3;
}
.cm button { pointer-events: none; font: inherit; }

/* Design */
.cm--design-old .cm__marquee {
  background: #1a3a8a;
  color: #ff0;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}
.cm--design-old .cm__table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  flex: 1;
  background: #999;
  border: 2px inset #ccc;
}
.cm--design-old .cm__table i {
  background: #eee;
  min-height: 1.8rem;
  font-style: normal;
}
.cm--design-old .cm__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cm--design-old .cm__links span {
  color: #00c;
  text-decoration: underline;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 0.65rem;
}
.cm--design-new .cm__hero {
  flex: 1.2;
  border-radius: 4px;
  background: linear-gradient(125deg, rgba(61, 158, 255, 0.45), rgba(16, 21, 29, 0.95));
  border: 1px solid rgba(61, 158, 255, 0.35);
  display: grid;
  align-content: end;
  padding: 0.55rem;
  gap: 0.25rem;
}
.cm--design-new .cm__hero em {
  height: 0.35rem;
  width: 28%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  font-style: normal;
}
.cm--design-new .cm__hero strong {
  font-size: 0.75rem;
  font-family: var(--cdx-display);
  font-weight: 700;
}
.cm--design-new .cm__trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
}
.cm--design-new .cm__trio span {
  height: 2rem;
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: rgba(255, 255, 255, 0.05);
}
.cm--design-new .cm__bar {
  height: 0.55rem;
  width: 36%;
  border-radius: 3px;
  background: var(--cdx-blue);
}

/* Mobile */
.cm--mobile-old {
  align-items: center;
  justify-content: center;
}
.cm--mobile-old .cm__phone-tiny {
  width: 4.2rem;
  height: 7.5rem;
  border: 2px solid #666;
  border-radius: 0.55rem;
  background: #bbb;
  overflow: hidden;
  position: relative;
}
.cm--mobile-old .cm__desk-squeeze {
  width: 14rem;
  height: 100%;
  transform: scale(0.28);
  transform-origin: top left;
  background: #eee;
  padding: 0.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
}
.cm--mobile-old .cm__desk-squeeze b {
  background: #999;
  min-height: 3rem;
  font-weight: 400;
}
.cm--mobile-old .cm__scroll-hint {
  position: absolute;
  bottom: 0.25rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.5rem;
  color: #600;
  font-weight: 700;
}
.cm--mobile-new {
  align-items: center;
  justify-content: center;
}
.cm--mobile-new .cm__phone {
  width: 5.5rem;
  height: 9.5rem;
  border: 1px solid var(--cdx-line-strong);
  border-radius: 0.75rem;
  background: #0a0e14;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cm--mobile-new .cm__notch {
  width: 1.8rem;
  height: 0.22rem;
  margin: 0 auto 0.2rem;
  border-radius: 999px;
  background: #2a3344;
}
.cm--mobile-new .cm__m-hero {
  height: 2.4rem;
  border-radius: 4px;
  background: linear-gradient(140deg, rgba(61, 158, 255, 0.4), rgba(255, 255, 255, 0.05));
}
.cm--mobile-new .cm__m-btn {
  height: 1.15rem;
  border-radius: 4px;
  background: var(--cdx-blue);
}
.cm--mobile-new .cm__m-btn--ghost {
  background: transparent;
  border: 1px solid var(--cdx-line-strong);
}
.cm--mobile-new .cm__m-lines {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.15rem;
}
.cm--mobile-new .cm__m-lines i {
  height: 0.35rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  font-style: normal;
}
.cm--mobile-new .cm__m-lines i:last-child { width: 70%; }

/* Nav */
.cm--nav-old .cm__mega {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
  flex: 1;
}
.cm--nav-old .cm__mega span {
  background: #e8e2d6;
  border: 1px solid #aaa;
  padding: 0.35rem 0.3rem;
  font-size: 0.58rem;
  color: #00a;
  text-decoration: underline;
}
.cm--nav-new .cm__topnav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}
.cm--nav-new .cm__logo {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  background: var(--cdx-blue);
}
.cm--nav-new nav {
  display: flex;
  gap: 0.55rem;
  flex: 1;
  color: var(--cdx-muted);
  font-size: 0.62rem;
}
.cm--nav-new .cm__cta-pill {
  width: 3.2rem;
  height: 0.9rem;
  border-radius: 4px;
  background: var(--cdx-blue);
  font-style: normal;
}
.cm--nav-new .cm__nav-body {
  flex: 1;
  border-radius: 4px;
  border: 1px solid var(--cdx-line);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
}
.cm--nav-new .cm__nav-body em {
  width: 45%;
  height: 0.55rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  font-style: normal;
}

/* Type */
.cm--type-old p {
  margin: 0;
  font-size: 0.72rem;
  color: #777;
  font-family: Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.2;
}
.cm--type-new .cm__display {
  font-family: var(--cdx-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.cm--type-new .cm__lead {
  color: var(--cdx-muted);
  font-size: 0.72rem;
  max-width: 22ch;
}
.cm--type-new .cm__body {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.cm--type-new .cm__body i {
  height: 0.28rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  font-style: normal;
}
.cm--type-new .cm__body i:nth-child(2) { width: 88%; }
.cm--type-new .cm__body i:nth-child(3) { width: 64%; }

/* CTA */
.cm--cta-old .cm__wall {
  flex: 1;
  display: grid;
  gap: 0.3rem;
}
.cm--cta-old .cm__wall i {
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.12);
  min-height: 1.6rem;
  font-style: normal;
}
.cm--cta-old .cm__footer-link {
  font-size: 0.58rem;
  color: #666;
  text-decoration: underline;
  opacity: 0.7;
}
.cm--cta-new .cm__cta-hero {
  flex: 1;
  border-radius: 6px;
  border: 1px solid rgba(61, 158, 255, 0.35);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(61, 158, 255, 0.25), transparent 55%),
    rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.75rem;
}
.cm--cta-new .cm__cta-hero strong {
  font-family: var(--cdx-display);
  font-size: 0.9rem;
}
.cm--cta-new .cm__big-btn {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0 0.85rem;
  border-radius: 5px;
  background: var(--cdx-blue);
  color: #061018;
  font-weight: 700;
  font-size: 0.7rem;
}
.cm--cta-new .cm__cta-hero em {
  font-style: normal;
  font-size: 0.58rem;
  color: var(--cdx-muted);
}

/* Shop */
.cm--shop-old .cm__pdf {
  background: #fff;
  border: 1px dashed #888;
  padding: 0.45rem;
  font-family: var(--cdx-mono);
  font-size: 0.62rem;
  color: #444;
}
.cm--shop-old .cm__plist {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.62rem;
  flex: 1;
}
.cm--shop-old .cm__plist td {
  border: 1px solid #aaa;
  padding: 0.3rem 0.4rem;
  background: #f5f2ea;
}
.cm--shop-new .cm__products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
  flex: 1;
}
.cm--shop-new article {
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cm--shop-new article b {
  height: 2.2rem;
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(62, 207, 142, 0.35), rgba(61, 158, 255, 0.15));
  font-weight: 400;
}
.cm--shop-new article span { color: var(--cdx-text); font-size: 0.58rem; }
.cm--shop-new article em { font-style: normal; color: var(--cdx-good); font-weight: 700; }
.cm--shop-new .cm__cart {
  align-self: flex-end;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  background: var(--cdx-blue);
  color: #061018;
  font-weight: 700;
  font-size: 0.62rem;
}

/* Booking */
.cm--book-old {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.65rem;
}
.cm--book-old .cm__phone-call {
  font-size: 1rem;
  font-weight: 700;
  font-family: "Times New Roman", Times, serif;
  color: #1a1a1a;
}
.cm--book-old .cm__note {
  font-size: 0.65rem;
  color: #555;
  max-width: 16ch;
}
.cm--book-new .cm__week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}
.cm--book-new .cm__week span {
  text-align: center;
  padding: 0.35rem 0;
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  color: var(--cdx-faint);
  font-size: 0.58rem;
}
.cm--book-new .cm__week .is-free {
  border-color: rgba(61, 158, 255, 0.5);
  color: var(--cdx-text);
  background: rgba(61, 158, 255, 0.12);
}
.cm--book-new .cm__slots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
  flex: 1;
  align-content: center;
}
.cm--book-new .cm__slots button {
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  background: transparent;
  color: var(--cdx-muted);
  padding: 0.45rem 0;
  font-size: 0.65rem;
}
.cm--book-new .cm__slots .is-on {
  background: var(--cdx-blue);
  border-color: var(--cdx-blue);
  color: #061018;
  font-weight: 700;
}
.cm--book-new .cm__confirm {
  text-align: center;
  padding: 0.4rem;
  border-radius: 4px;
  background: rgba(61, 158, 255, 0.2);
  border: 1px solid rgba(61, 158, 255, 0.4);
  font-weight: 600;
  font-size: 0.65rem;
}

/* Forms */
.cm--form-old .cm__field {
  height: 0.85rem;
  border: 1px solid #888;
  background: #fff;
  border-radius: 1px;
}
.cm--form-old .cm__field.is-err {
  border-color: #c00;
  background: #ffe8e8;
}
.cm--form-old .cm__err {
  color: #c00;
  font-size: 0.58rem;
  font-weight: 700;
}
.cm--form-new .cm__steps {
  display: flex;
  gap: 0.35rem;
}
.cm--form-new .cm__steps i {
  flex: 1;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-style: normal;
}
.cm--form-new .cm__steps .is-on { background: var(--cdx-blue); }
.cm--form-new .cm__step-label {
  color: var(--cdx-muted);
  font-size: 0.62rem;
}
.cm--form-new .cm__choices {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}
.cm--form-new .cm__choices span {
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  padding: 0.45rem 0.55rem;
  color: var(--cdx-muted);
}
.cm--form-new .cm__choices .is-on {
  border-color: var(--cdx-blue);
  color: var(--cdx-text);
  background: rgba(61, 158, 255, 0.12);
}
.cm--form-new .cm__next {
  align-self: flex-end;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  background: var(--cdx-blue);
  color: #061018;
  font-weight: 700;
  font-size: 0.65rem;
}

/* Structure */
.cm--struct-old .cm__chaos {
  position: relative;
  flex: 1;
  min-height: 8rem;
}
.cm--struct-old .cm__chaos span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1px solid #666;
  background: rgba(180, 160, 120, 0.55);
  transform: rotate(-3deg);
}
.cm--struct-old .cm__chaos span:nth-child(2) { transform: rotate(4deg); background: rgba(140, 150, 170, 0.5); }
.cm--struct-old .cm__chaos span:nth-child(3) { transform: rotate(2deg); }
.cm--struct-old .cm__chaos span:nth-child(4) { transform: rotate(-5deg); background: rgba(160, 140, 140, 0.5); }
.cm--struct-new {
  display: grid;
  grid-template-rows: 1.4fr 1fr 1fr 0.85fr;
  gap: 0.3rem;
}
.cm--struct-new .cm__sec {
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  padding: 0 0.55rem;
}
.cm--struct-new .cm__sec label {
  font-size: 0.62rem;
  color: var(--cdx-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cm--struct-new .cm__sec:first-child {
  background: linear-gradient(120deg, rgba(61, 158, 255, 0.22), transparent);
}

/* Speed */
.cm--speed-old .cm__spinner {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0.4rem auto;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: #666;
  border-radius: 50%;
  animation: cm-spin 0.9s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm__load-bars {
  display: grid;
  gap: 0.35rem;
  flex: 1;
}
.cm__load-bars > div {
  display: grid;
  gap: 0.15rem;
}
.cm__load-bars span {
  display: block;
  height: 0.45rem;
  border-radius: 2px;
  background: #c44;
}
.cm__load-bars em {
  font-style: normal;
  font-size: 0.55rem;
  color: #555;
}
.cm__load-bars--good span { background: var(--cdx-good); }
.cm__load-bars--good em { color: var(--cdx-muted); }
.cm__lcp {
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: #a30;
  font-family: var(--cdx-mono);
}
.cm__lcp.is-good { color: var(--cdx-good); }
.cm--speed-new .cm__ready {
  text-align: center;
  font-weight: 700;
  color: var(--cdx-good);
  font-size: 0.8rem;
  padding: 0.35rem;
  border: 1px solid rgba(62, 207, 142, 0.35);
  border-radius: 4px;
  background: rgba(62, 207, 142, 0.08);
}

/* Portal */
.cm--portal-old .cm__mail {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}
.cm--portal-old .cm__mail div {
  background: #fff;
  border: 1px solid #aaa;
  padding: 0.4rem 0.45rem;
  font-size: 0.62rem;
  color: #444;
  font-family: "Times New Roman", Times, serif;
}
.cm--portal-new {
  display: grid;
  grid-template-columns: 0.32fr 1fr;
  gap: 0.35rem;
  flex: 1;
}
.cm--portal-new aside {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cdx-line);
}
.cm--portal-new main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.cm--portal-new .cm__dash-head {
  font-family: var(--cdx-display);
  font-weight: 700;
  font-size: 0.75rem;
}
.cm--portal-new .cm__docs {
  display: grid;
  gap: 0.25rem;
  flex: 1;
}
.cm--portal-new .cm__docs span {
  border: 1px solid var(--cdx-line);
  border-radius: 3px;
  padding: 0.4rem 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.6rem;
  color: var(--cdx-muted);
}

/* Social */
.cm--social-old {
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.cm--social-old .cm__icons {
  display: flex;
  gap: 0.55rem;
}
.cm--social-old .cm__icons span {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #999;
  color: #eee;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
}
.cm--social-old .cm__dead {
  color: #666;
  font-size: 0.62rem;
}
.cm--social-new {
  display: grid;
  gap: 0.3rem;
}
.cm--social-new article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem;
  align-items: center;
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
}
.cm--social-new article b {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: rgba(61, 158, 255, 0.25);
  color: var(--cdx-cyan);
  display: grid;
  place-items: center;
  font-size: 0.5rem;
}
.cm--social-new article span { font-size: 0.62rem; color: var(--cdx-text); }
.cm--social-new article em { font-style: normal; font-size: 0.5rem; color: var(--cdx-faint); }

@media (prefers-reduced-motion: reduce) {
  .cm--speed-old .cm__spinner { animation: none; border-top-color: #666; }
}
.cdx-compare__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cdx-compare__tags span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r-sm);
  color: var(--cdx-muted);
}
.cdx-compare__pane-inner--before .cdx-compare__tags span {
  border-color: rgba(0, 0, 0, 0.2);
  color: #555;
}
.cdx-compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 52%;
  width: 2.75rem;
  margin-left: -1.375rem;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  z-index: 3;
}
.cdx-compare__handle::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(242, 244, 247, 0.55);
  transform: translateX(-50%);
}
.cdx-compare__handle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.65rem; height: 1.65rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(242, 244, 247, 0.7);
  background: var(--cdx-elevated);
  box-shadow: inset 0 0 0 1px rgba(61, 158, 255, 0.45);
}

/* ——— SOCIAL ——— */
.cdx-social {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--cdx-gutter);
  align-items: start;
}
.cdx-social__feed {
  display: grid;
  gap: 0.75rem;
}
.cdx-social__post {
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  padding: 1.1rem 1.2rem;
  transition: border-color var(--cdx-fast), transform var(--cdx-fast);
}
.cdx-social__post.is-new {
  border-color: rgba(61, 158, 255, 0.45);
  animation: cdx-fade var(--cdx-normal) var(--cdx-ease);
}
.cdx-social__post-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--cdx-faint);
  margin-bottom: 0.45rem;
}
.cdx-social__post-meta strong { color: var(--cdx-blue); font-weight: 600; }
.cdx-social__post h3 {
  margin: 0 0 0.35rem;
  font-family: var(--cdx-display);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.cdx-social__post p {
  margin: 0;
  color: var(--cdx-muted);
  font-size: 0.95rem;
}
.cdx-social__plats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.cdx-social__plat {
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  padding: 1rem;
}
.cdx-social__plat h3 {
  margin: 0 0 0.35rem;
  font-family: var(--cdx-display);
  font-size: 1rem;
}
.cdx-social__plat p {
  margin: 0;
  color: var(--cdx-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.cdx-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin-top: var(--cdx-space-5);
  color: var(--cdx-muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cdx-benefits span { position: relative; }
.cdx-benefits span::before {
  content: "";
  display: inline-block;
  width: 0.4rem; height: 0.4rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--cdx-blue);
  vertical-align: 0.1em;
}

/* ——— CAPABILITIES ——— */
.cdx-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cdx-gutter);
}
.cdx-cap {
  padding: var(--cdx-space-5);
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  transition: border-color var(--cdx-fast);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cdx-cap:hover, .cdx-cap:focus-within {
  border-color: rgba(61, 158, 255, 0.35);
}
.cdx-cap h3 {
  margin: 0 0 var(--cdx-space-3);
  font-family: var(--cdx-display);
  font-size: 1.2rem;
  color: var(--cdx-text);
  line-height: 1.2;
}
.cdx-cap ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cdx-muted);
  font-size: 0.95rem;
  display: grid;
  gap: 0.35rem;
}
.cdx-cap__benefit {
  margin-top: var(--cdx-space-4);
  padding-top: var(--cdx-space-3);
  border-top: 1px solid var(--cdx-line);
  color: var(--cdx-text);
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 1;
}

/* ——— PROJECTS ——— */
.cdx-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cdx-gutter);
}
.cdx-project {
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r);
  background: var(--cdx-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cdx-project__visual {
  height: 13.5rem;
  background: #0a0e15;
  border-bottom: 1px solid var(--cdx-line);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.cdx-project__chrome {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  color: var(--cdx-faint);
  font-family: var(--cdx-mono);
}
.cdx-project__chrome i {
  width: 0.35rem; height: 0.35rem;
  border-radius: 50%;
  background: #3a4454;
  font-style: normal;
}
.cdx-project__chrome i:nth-child(1) { background: #ff5f57; }
.cdx-project__chrome i:nth-child(2) { background: #febc2e; }
.cdx-project__chrome i:nth-child(3) { background: #28c840; }
.cdx-project__screen {
  flex: 1;
  border: 1px solid var(--cdx-line);
  border-radius: 4px;
  background: var(--cdx-surface);
  padding: 0.55rem;
  display: grid;
  gap: 0.35rem;
  min-height: 0;
}
.cdx-project__screen .nav {
  height: 0.55rem;
  width: 62%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.cdx-project__screen .hero {
  height: 2.4rem;
  border-radius: 3px;
  background: linear-gradient(120deg, rgba(61, 158, 255, 0.4), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(61, 158, 255, 0.25);
}
.cdx-project__screen .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  flex: 1;
}
.cdx-project__screen .cols b {
  display: block;
  min-height: 2.6rem;
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 400;
}
.cdx-project--system .cdx-project__screen {
  grid-template-columns: 0.35fr 1fr;
  grid-template-rows: auto 1fr;
}
.cdx-project--system .cdx-project__screen .nav { grid-column: 1 / -1; }
.cdx-project--system .cdx-project__screen .side {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  border: 1px solid var(--cdx-line);
}
.cdx-project--system .cdx-project__screen .main {
  display: grid;
  gap: 0.3rem;
}
.cdx-project--system .cdx-project__screen .main span {
  height: 1.4rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cdx-line);
}
.cdx-project--commerce .cdx-project__screen .cols {
  grid-template-columns: 1fr 1fr 1fr;
}
.cdx-project--commerce .cdx-project__screen .hero {
  background: linear-gradient(120deg, rgba(62, 207, 142, 0.25), rgba(61, 158, 255, 0.2));
}
.cdx-project__meta {
  font-size: 0.75rem;
  color: var(--cdx-faint);
  letter-spacing: 0.02em;
}
.cdx-project__body {
  padding: var(--cdx-space-5);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.cdx-project__cat {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cdx-muted);
  font-weight: 600;
}
.cdx-project h3 {
  margin: 0;
  font-family: var(--cdx-display);
  font-size: 1.25rem;
}
.cdx-project p {
  margin: 0;
  color: var(--cdx-muted);
  font-size: 0.95rem;
  flex: 1;
}
.cdx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cdx-tags span {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--cdx-line);
  border-radius: var(--cdx-r-sm);
  color: var(--cdx-faint);
}

/* ——— TRUST / CTA ——— */
.cdx-trust {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--cdx-space-7);
  align-items: end;
}
.cdx-trust__person {
  color: var(--cdx-muted);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cdx-trust__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--cdx-line-strong);
  background:
    radial-gradient(circle at 35% 30%, rgba(61, 158, 255, 0.45), transparent 55%),
    var(--cdx-elevated);
  display: grid;
  place-items: center;
  font-family: var(--cdx-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cdx-text);
  flex-shrink: 0;
}
.cdx-trust__person strong {
  display: block;
  color: var(--cdx-text);
  font-size: 1.125rem;
  margin-bottom: 0.2rem;
}
.cdx-cta {
  border: 1px solid var(--cdx-line-strong);
  border-radius: var(--cdx-r);
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(61,158,255,0.12), transparent 55%),
    var(--cdx-surface);
}
.cdx-cta .cdx-h2 { max-width: 20ch; }

/* Remaster band — break the repeated card rhythm */
.cdx-remaster-band {
  border-block: 1px solid var(--cdx-line);
  background: var(--cdx-ink);
  padding: var(--cdx-space-9) 0;
}
.cdx-remaster-band .cdx-compare {
  margin-top: var(--cdx-space-6);
}

@media (max-width: 960px) {
  .cdx-hero__inner { grid-template-columns: 1fr; }
  .cdx-hero__copy { order: 0; }
  .cdx-canvas { order: 1; min-height: 20rem; }
  .cdx-canvas__desk { transform: none; inset: 0 10% 16% 0; }
  .cdx-canvas__code { display: none; }
  .cdx-compare__after .cdx-compare__pane-inner {
    padding-left: 1.1rem;
  }
  .cdx-compare__pane-inner .cdx-compare__mock {
    min-height: 6.5rem;
  }
  .cdx-paths { grid-template-columns: 1fr; }
  .cdx-path--large { grid-row: auto; }
  .cdx-show__toolbar { flex-direction: column; align-items: stretch; }
  .cdx-seg { width: 100%; grid-auto-columns: 1fr; }
  .cdx-show__frame[data-device="desktop"],
  .cdx-show__frame[data-device="tablet"],
  .cdx-show__frame[data-device="mobile"] {
    max-width: 100%;
  }
  .cdx-show__grid,
  .cdx-show__frame[data-device="tablet"] .cdx-show__grid,
  .cdx-show__frame[data-device="mobile"] .cdx-show__grid {
    grid-template-columns: 1fr;
  }
  .cdx-show__frame[data-device="tablet"] .cdx-show__tile:last-child {
    grid-column: auto;
  }
  .cdx-caps { grid-template-columns: 1fr 1fr; }
  .cdx-projects { grid-template-columns: 1fr; }
  .cdx-trust { grid-template-columns: 1fr; }
  .cdx-social { grid-template-columns: 1fr; }
  .cdx-social__plats { grid-template-columns: 1fr 1fr; }
  .cdx-compare__pane-inner { min-width: 20rem; }
}
@media (max-width: 640px) {
  .cdx-social__plats { grid-template-columns: 1fr; }
  .cdx-compare { height: 22rem; }
}
@media (max-width: 640px) {
  .cdx-caps { grid-template-columns: 1fr; }
  .cdx-hero { min-height: auto; padding-top: calc(var(--cdx-nav) + 1.5rem); }
  .cdx-canvas__phone { width: 6.5rem; height: 12.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .cdx-hero__copy .cdx-lead,
  .js-ready .cdx-hero__copy .cdx-hero__actions,
  .js-ready .cdx-hero__copy .cdx-hero__trust,
  .js-ready .cdx-canvas__desk,
  .js-ready .cdx-canvas__phone,
  .js-ready .cdx-canvas__code,
  .cdx-show__pane.is-active {
    animation: none;
  }
}