.is-stack-section {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.is-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.is-content-col {
  position: relative;
  height: 400px;
}
.is-panel {
  position: absolute;
  top: 50%; left: 0; width: 100%;
  transform: translateY(-40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.is-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
.is-panel-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.is-panel-title {
  font-size: clamp(26px,4.5vw,46px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 24px;
}
.is-panel-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 32px;
}
.is-panel-features {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text2);
  font-size: 15px;
  font-weight: 500;
}
.is-panel-features li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.is-panel-features li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.is-stack-col {
  position: relative;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-stack-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.is-layer {
  position: absolute;
  width: 75%;
  left: 12.5%;
  top: 50%;
  cursor: pointer;
  transition: filter 0.3s ease;
  will-change: transform;
}
.is-layer[data-index="0"] { z-index: 6; }
.is-layer[data-index="1"] { z-index: 5; }
.is-layer[data-index="2"] { z-index: 4; }
.is-layer[data-index="3"] { z-index: 3; }
.is-layer[data-index="4"] { z-index: 2; }
.is-layer[data-index="5"] { z-index: 1; }
.is-layer[data-index="6"] { z-index: 0; }
.is-layer[data-index="7"] { z-index: -1; }
.is-layer[data-index="8"] { z-index: -2; }
.is-layer[data-index="9"] { z-index: -3; }

.is-layer img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.is-layer-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #111;
  font-weight: 800;
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  width: 90%;
  text-transform: uppercase;
}
.is-layer:hover {
  filter: brightness(1.1);
}
.is-layer.active {
  filter: brightness(1.25) drop-shadow(0 0 30px rgba(232,168,84,0.3));
}
.is-layer.active img {
  transform: scale(1.15);
}
@media(max-width: 900px) {
  .is-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px;
  }
  .is-content-col { height: auto; min-height: 196px; }
  .is-panel { position: relative; top: 0; transform: translateY(20px); }
  .is-panel.active { transform: translateY(0); position: relative; }
  .is-panel:not(.active) { position: absolute; }
  .is-stack-col { height: 500px; }
}

/* ---------------------------------
   3D CSS STACK ADAPTATION
--------------------------------- */
.is-stack-col {
  perspective: clamp(2800px, 260vw, 5200px);
}
.is-stack-container {
  position: relative;
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
  animation: hover-stack 10s ease-in-out infinite;
}
@keyframes hover-stack {
  0%, 100% { transform: rotateX(50deg) rotateZ(45deg) translateZ(0); }
  50% { transform: rotateX(48.2deg) rotateZ(46.4deg) translateZ(16px); }
}

.is-layer {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  cursor: pointer;
  transform-style: preserve-3d;
  background: transparent !important;
  border: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.is-layer-face {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(232,168,84,0.78);
  background:
    linear-gradient(135deg, rgba(232,168,84,.42), rgba(232,168,84,.16) 52%, rgba(232,168,84,.36)),
    linear-gradient(#14100a, #14100a);
  box-shadow: inset 0 0 90px rgba(232,168,84,.22), 0 0 40px rgba(232,168,84,.10);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  overflow: hidden;
}

.is-layer-under {
  position: absolute;
  inset: 0;
  transform: translateZ(-11px);
  background: linear-gradient(#2a1e0c, #2a1e0c);
  border: 3px solid rgba(232,168,84,.30);
  transition: background 0.5s ease, border-color 0.5s ease;
}

.is-layer-name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate(18%, 18%) rotate(-45deg);
  pointer-events: none;
}
.is-layer-name span {
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(9px, 1.2vw, 15px);
  transform: scaleY(1.1);
  color: rgba(250,248,245,0.7);
  opacity: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
  transition: color 0.5s ease, text-shadow 0.5s ease, opacity 0.5s ease;
}

.is-layer-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.5s ease;
}
.is-layer-art .st { stroke: var(--gold); fill: none; stroke-width: 2; opacity: 0.7; }
.is-layer-art .st-d { stroke: var(--gold); fill: none; stroke-width: 1.5; opacity: 0.32; }
.is-layer-art .fl { fill: var(--gold); opacity: 0.16; }
.is-layer-art .fl-2 { fill: #ebd693; opacity: 0.28; }

/* Dimmed state when focused */
.is-stack-section.is-focus .is-layer .is-layer-face {
  border-color: rgba(232,168,84,.32);
  background:
    linear-gradient(135deg, rgba(232,168,84,.16), rgba(232,168,84,.06) 52%, rgba(232,168,84,.13)),
    linear-gradient(#100d08, #100d08);
  box-shadow: inset 0 0 60px rgba(232,168,84,.08);
}
.is-stack-section.is-focus .is-layer .is-layer-art { opacity: 0.5; }
.is-stack-section.is-focus .is-layer .is-layer-under {
  background: linear-gradient(#181206, #181206);
  border-color: rgba(232,168,84,.15);
}
.is-stack-section.is-focus .is-layer .is-layer-name span { opacity: 1; color: rgba(250,248,245,.7); }

/* Active State */
.is-stack-section.is-focus .is-layer.active .is-layer-face,
.is-layer.active .is-layer-face {
  border-color: #ebd693;
  background:
    linear-gradient(135deg, rgba(232,168,84,.74), rgba(232,168,84,.34) 52%, rgba(232,168,84,.62)),
    linear-gradient(#1d1609, #1d1609);
  box-shadow: inset 0 0 90px rgba(235,214,147,.42), 0 0 120px 12px rgba(232,168,84,.52);
}
.is-stack-section.is-focus .is-layer.active .is-layer-art,
.is-layer.active .is-layer-art { opacity: 1; }
.is-stack-section.is-focus .is-layer.active .is-layer-under,
.is-layer.active .is-layer-under {
  background: linear-gradient(#4a3512, #4a3512);
  border-color: rgba(232,168,84,.45);
}
.is-stack-section.is-focus .is-layer.active .is-layer-name span,
.is-layer.active .is-layer-name span { color: #1a1204; text-shadow: 0 1px 0 rgba(255,255,255,.28); }

/* ---------------------------------
   LIGHT MODE OVERRIDES
--------------------------------- */
/* Inactive Plates (Base & Focused Stack) */
:root.light .is-layer-face,
:root.light .is-stack-section.is-focus .is-layer .is-layer-face {
  background: linear-gradient(135deg, rgba(232,168,84,.62), rgba(240,200,140,.34) 52%, rgba(226,160,72,.55)), #fffdf8;
  border-color: rgba(160, 106, 32, 0.55);
  box-shadow: inset 0 0 70px rgba(255,255,255,0.6), 0 18px 34px -18px rgba(90,62,20,0.42);
}
:root.light .is-layer-under,
:root.light .is-stack-section.is-focus .is-layer .is-layer-under {
  background: #f7ede1;
  border-color: rgba(160, 106, 32, 0.55);
}
:root.light .is-layer-name span,
:root.light .is-stack-section.is-focus .is-layer .is-layer-name span {
  color: #7d5314;
  text-shadow: none;
}
:root.light .is-layer-art,
:root.light .is-stack-section.is-focus .is-layer .is-layer-art {
  opacity: 1; /* Was 0.4, causing them to be too faint */
}
:root.light .is-layer-art .st { stroke: #8a5c1c; opacity: 0.5; }
:root.light .is-layer-art .st-d { stroke: #8a5c1c; opacity: 0.25; }
:root.light .is-layer-art .fl { fill: #8a5c1c; opacity: 0.15; }
:root.light .is-layer-art .fl-2 { fill: #b47a24; opacity: 0.28; }

:root.light .is-layer:hover {
  filter: brightness(1.02); /* Very subtle, avoids muddying the colors */
}
:root.light .is-layer.active,
:root.light .is-layer.active:hover {
  filter: drop-shadow(0 0 20px rgba(232, 168, 84, 0.2)); /* Removed brightness to keep the gold pure */
}

/* Active / Focused Plate */
:root.light .is-stack-section.is-focus .is-layer.active .is-layer-face,
:root.light .is-layer.active .is-layer-face {
  background: linear-gradient(135deg, rgba(228,152,44,.96), rgba(243,196,110,.85) 52%, rgba(222,146,38,.96)), linear-gradient(#f0b869, #f0b869);
  border-color: #a86c18;
  box-shadow: inset 0 0 60px rgba(255,255,255,.35), 0 0 90px 6px rgba(232,168,84,.55), 0 20px 36px -18px rgba(90,62,20,.5);
}
:root.light .is-stack-section.is-focus .is-layer.active .is-layer-under,
:root.light .is-layer.active .is-layer-under {
  background: #a5701c;
  border-color: rgba(110,70,16,.6);
}
:root.light .is-stack-section.is-focus .is-layer.active .is-layer-name span,
:root.light .is-layer.active .is-layer-name span {
  color: #2b1c04;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
:root.light .is-stack-section.is-focus .is-layer.active .is-layer-name svg,
:root.light .is-layer.active .is-layer-name svg {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
:root.light .is-stack-section.is-focus .is-layer.active .is-layer-art,
:root.light .is-layer.active .is-layer-art {
  opacity: 1;
}

@media (max-width: 480px) {
  .is-inner {
    padding: 60px 16px;
    gap: 24px;
  }
}