/* Atypisch — Solutions page (design system v2). Ticker = shared homepage component. */
/* Solutions-specific colorful touches */
/* Ecosystem grid — colored brand cards */
.eco-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .eco-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .eco-grid { grid-template-columns: repeat(3, 1fr); } }
.eco-card {
  position: relative;
  display: grid; grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ax2-rule-soft);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.eco-card::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent, var(--atyp-teal));
  transform: translateY(-4px);
  transition: transform 240ms ease;
}
.eco-card:hover::before { transform: translateY(0); }
.eco-card:hover {
  border-color: var(--ax2-ink);
  box-shadow: 0 14px 38px -20px rgba(15,23,42,0.22);
  transform: translateY(-2px);
}
.eco-card__role {
  font-family: var(--atyp-font-mono);
  font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax2-ink-faint);
  margin: 0;
}
.eco-card__name {
  font-family: var(--atyp-font-hero);
  font-weight: 700; font-size: 1.85rem;
  letter-spacing: -0.025em;
  color: var(--ax2-ink);
  margin: 0; line-height: 1;
}
.eco-card__name em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent, var(--atyp-teal)) 0%, var(--accent-2, #5eead4) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eco-card__body {
  font-size: 0.95rem; color: var(--ax2-ink-soft);
  line-height: 1.55; margin: 0;
}
.eco-card__foot {
  padding-top: 12px;
  border-top: 1px dashed var(--ax2-rule-soft);
  font-family: var(--atyp-font-mono);
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ax2-ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}

/* Stack panel — different background per category, brand-tinted */
.stack-panels {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 800px) { .stack-panels { grid-template-columns: repeat(2, 1fr); } }
.stack-panel {
  padding: 28px;
  border-radius: 16px;
  background: var(--bg, var(--ax2-paper));
  color: var(--fg, var(--ax2-ink));
  border: 1px solid var(--bd, var(--ax2-rule-soft));
}
.stack-panel h3 {
  font-family: var(--atyp-font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lbl, var(--ax2-ink-faint));
  font-weight: 500; margin: 0 0 16px;
}
.stack-panel--ink {
  --bg: #0a0f1a; --fg: #fff;
  --bd: rgba(255,255,255,0.10); --lbl: rgba(255,255,255,0.5);
}
.stack-panel--teal {
  --bg: linear-gradient(135deg, #0a1d2c 0%, #134e4a 100%);
  --fg: #fff; --bd: rgba(45,212,191,0.30); --lbl: rgba(45,212,191,0.95);
  background: var(--bg);
}
.stack-panel--violet {
  --bg: linear-gradient(135deg, #2a1b5e 0%, #6e3e8a 100%);
  --fg: #fff; --bd: rgba(192,132,252,0.30); --lbl: rgba(216,180,254,0.95);
  background: var(--bg);
}
.stack-panel--coral {
  --bg: linear-gradient(135deg, #842029 0%, #c8d6d3 100%);
  --fg: #fff; --bd: rgba(255,255,255,0.30); --lbl: rgba(255,255,255,0.85);
  background: var(--bg);
}
.stack-panel--lime {
  --bg: linear-gradient(135deg, #4a8c0c 0%, #98c63a 100%);
  --fg: #fff; --bd: rgba(255,255,255,0.30); --lbl: rgba(255,255,255,0.85);
  background: var(--bg);
}
.stack-panel .stack-pills span {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.stack-panel .stack-pills span::before {
  background: var(--atyp-teal);
}
.stack-panel--paper {
  --bg: var(--ax2-paper); --fg: var(--ax2-ink);
  --bd: var(--ax2-rule-soft);
}
.stack-panel--paper .stack-pills span {
  background: #fff; color: var(--ax2-ink);
  border-color: var(--ax2-rule-soft);
}

/* Trusted-by marquee — borrow from home */
.sol-trust {
  background: #0a0f1a;
  color: rgba(255,255,255,0.6);
  padding: 36px 0;
}
.sol-trust__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr; gap: 24px;
  align-items: center;
}
@media (min-width: 800px) {
  .sol-trust__inner { grid-template-columns: auto 1fr; gap: 56px; }
}
.sol-trust__label {
  font-family: var(--atyp-font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap; margin: 0;
}
.sol-trust__marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.sol-trust__track {
  display: inline-flex; gap: 64px;
  animation: sol-trust-scroll 40s linear infinite;
  white-space: nowrap; padding-right: 64px;
}
.sol-trust:hover .sol-trust__track { animation-play-state: paused; }
.sol-trust__logo {
  font-family: var(--atyp-font-heading); font-weight: 500;
  font-size: 0.95rem; color: rgba(255,255,255,0.6);
  letter-spacing: -0.01em; white-space: nowrap;
  display: inline-flex;
}
@keyframes sol-trust-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Big "sectors we work in" coverline — color blocks */
.sector-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 800px) { .sector-strip { grid-template-columns: repeat(5, 1fr); } }
.sector-tile {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.sector-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -20px rgba(15,23,42,0.30); }
.sector-tile--teal   { background: linear-gradient(160deg, #0a1d2c 0%, #134e4a 100%); }
.sector-tile--violet { background: linear-gradient(160deg, #2a1b5e 0%, #6e3e8a 100%); }
.sector-tile--coral  { background: linear-gradient(160deg, #842029 0%, #c8d6d3 100%); }
.sector-tile--lime   { background: linear-gradient(160deg, #4a8c0c 0%, #98c63a 100%); }
.sector-tile--ocean  { background: linear-gradient(160deg, #0f2942 0%, #2196f3 100%); }
.sector-tile__num {
  font-family: var(--atyp-font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.sector-tile__name {
  font-family: var(--atyp-font-heading);
  font-weight: 500; font-size: 1.15rem;
  letter-spacing: -0.012em; line-height: 1.2;
  color: #fff; margin: 0;
}
.sector-tile__count {
  font-family: var(--atyp-font-mono);
  font-size: 0.7rem; color: rgba(255,255,255,0.6);
  margin-top: 8px; display: block;
}
@media (min-width: 800px) { [data-dual-grid] { grid-template-columns: 1fr 1fr; } }