:root{
  --card-w: 520px;
  --card-h: calc(520px * 1038 / 665);
  --radius: 18px;
  --shadow: 0 16px 40px rgba(0,0,0,.12);
  --duration: .6s;
  --explain-w: min(38vw, 560px);
}

@media (max-width: 1200px){
  :root{ --card-w: 440px; --card-h: calc(440px * 1038 / 665); }
}
@media (max-width: 980px){
  :root{ --card-w: 380px; --card-h: calc(380px * 1038 / 665); }
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background: radial-gradient(120% 120% at 30% 20%, #ffffff, #f5f6f8 55%, #eef1f5 100%);
  color:#0f172a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 32px 24px 26px;
  margin-bottom: 12px;
}
.logo{ height: 72px; width:auto; display:block; }

.stage{
  max-width: 1600px;
  margin: 0 auto 56px;
  padding: 0 24px 24px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.layout{
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(320px, var(--explain-w));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  justify-content: center;
}

/* Stack */
.stack-wrap{ display:grid; place-items:center; perspective: 1400px; }
.stack{ position: relative; width: var(--card-w); height: var(--card-h); }
.card{
  position:absolute; left:50%; top:50%;
  width: var(--card-w); height: var(--card-h);
  transform: translate(-50%,-50%) translate(var(--stackX,0px), var(--stackY,0px)) rotate(var(--stackR,0deg)) scale(.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.10));
  transition: transform var(--duration) cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  z-index: var(--stackZ, 1);
  opacity: 1;
  overflow:hidden;
}
.card.is-top{ filter: drop-shadow(0 16px 30px rgba(0,0,0,.16)); }
.card img{ width:100%; height:100%; object-fit:cover; display:block; border-radius: inherit; }

/* One path: move left then back to base (no right-under step) */
.card.to-left{
  transform:
    translate(-50%,-50%)
    translate(calc(var(--stackX,0px) - var(--card-w) - 80px),
              calc(var(--stackY,0px) - 10px))
    rotate(calc(var(--stackR,0deg) - 8deg))
    scale(.94);
}

/* Explain */
.explain{ width: 100%; }
.explain-inner{
  display:flex; align-items:flex-start; gap: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 1.8vw, 24px);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06) inset;
  backdrop-filter: blur(2px);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.explain.show .explain-inner{ transform: translateY(0); opacity: 1; }

.badge{
  display:grid; place-items:center;
  width: 72px; height: 72px; border-radius: 12px;
  background: #e9eef6;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 6px rgba(0,0,0,.06) inset;
  flex: 0 0 auto;
}
.badge span{ font-size: 36px; line-height: 1; color: var(--badge-fg, #0f172a); font-weight: 800; }

.copy h2{ margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 26px); }
.copy p{ margin: 0; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.45; }

/* Bottom logo */
.below-logo{
  display:block; width: min(60vw, 480px); height:auto; opacity:.98;
  margin-top: 8px; margin-bottom: 28px;
}

/* Small screens */
@media (max-width: 880px){
  .layout{ grid-template-columns: 1fr; }
  :root{ --explain-w: min(90vw, 560px); }
}