.tech-stack {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 28px;
}

.stack-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 48px;
}

.stack-copy { position: relative; z-index: 1; padding-block: 80px; }
.stack-copy h2 { max-width: 580px; }
.stack-copy > p { max-width: 420px; margin-bottom: 27px; }
.stack-domains { display: flex; flex-wrap: wrap; gap: 8px; max-width: 400px; }
.stack-domains span { font-size: .75rem; color: var(--muted); padding: 8px 12px; border: 1px solid var(--line); border-radius: 30px; }
.stack-note { display: flex; align-items: center; gap: 9px; margin-top: 32px; font-size: .75rem; color: var(--muted); }
.stack-note::before { content: ""; height: 5px; width: 5px; border-radius: 50%; background: var(--mint); }

.stack-stage {
  position: relative;
  height: 670px;
  width: calc(100% + max(56px, (100vw - 1280px) / 2));
  overflow: hidden;
  isolation: isolate;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
  mask-composite: intersect;
}
.stack-stage::before { content: ""; position: absolute; inset: 12% 0; border-radius: 50%; background: radial-gradient(ellipse, #55d3b010, transparent 68%); }
.stack-wall { position: absolute; top: 50%; left: 50%; width: 1072px; transform: translate(-50%, -50%) rotate(-45deg); }
.stack-row { display: flex; width: max-content; }
.stack-row:nth-child(even) { transform: translateX(-270px); }
.stack-group { display: flex; gap: 18px; list-style: none; padding: 0 18px 18px 0; margin: 0; }
.stack-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  width: 116px; height: 116px; flex: 0 0 116px; border: 1px solid var(--line); border-radius: 23px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: 0 7px 18px #0000000b;
}
.stack-tile img { display: block; width: 42px; height: 42px; object-fit: contain; opacity: .9; filter: saturate(.85); }
.stack-tile span { color: var(--muted); font-size: .68rem; font-weight: 550; white-space: nowrap; }
:root[data-theme="dark"] .stack-tile img { filter: saturate(.85) brightness(1.1); }
:root[data-theme="dark"] .stack-tile img[data-dark-invert] { filter: invert(1); }
:root[data-theme="dark"] .stack-tile img[src$="/aws.png"] { content: url("assets/stack/aws-dark.png"); filter: none; }
:root[data-theme="light"] .stack-stage::before { background: radial-gradient(ellipse, #b2d3b54a, transparent 68%); }

@media (max-width: 1100px) {
  .stack-layout { gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stack-stage { height: 610px; }
}
@media (max-width: 800px) {
  .stack-layout { grid-template-columns: 1fr; gap: 0; }
  .tech-stack { padding-top: 65px; padding-bottom: 0; }
  .stack-copy { padding-block: 0; }
  .stack-copy > p { max-width: 540px; }
  .stack-note { margin-top: 24px; }
  .stack-stage { width: calc(100% + 112px); margin-left: -56px; height: 490px; }
}
@media (max-width: 680px) {
  .stack-stage { width: calc(100% + 40px); margin-left: -20px; height: 430px; }
  .stack-wall { scale: .82; }
  .stack-copy h2 { font-size: 2.15rem; }
  .stack-copy > p { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-row { will-change: auto; }
}