:root{
  --bg:#e9eef6;
  --ink:#1f2a3a;
  --muted:#7a879a;
}

/* section */
.packwall{ padding:48px 0; background:linear-gradient(180deg,#eef3f9 0%, #e7edf7 100%); }
.packwall__grid{
  width:min(1200px,92vw); margin:auto;
  display:grid; gap:28px;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}

/* === PACK 3D === */
.pack{
  --th: 40px;                  /* thickness (override per box inline) */
  --radius: 18px;
  --shine: rgba(255,255,255,.8);

  position:relative; height:340px;
  perspective: 1100px; transform-style:preserve-3d;
}
.pack__inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s;
  filter: drop-shadow(0 20px 28px rgba(20,30,56,.18));
}
.pack:hover .pack__inner{ transform: rotateY(-14deg) rotateX(6deg); }

/* FRONT (your content) */
.pack__front{
  position:absolute; inset:0; border-radius:var(--radius);
  transform: translateZ(calc(var(--th)/2));
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px;

  /* glossy gradient + soft vignette */
  background:
    radial-gradient(110% 120% at 78% 10%, var(--shine), transparent 55%),
    radial-gradient(140% 110% at 15% 90%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:
    0 12px 22px rgba(18,33,66,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  position:relative; overflow:hidden;
}

/* gloss streak */
.pack__front::after{
  content:""; position:absolute; inset:-40% -40%;
  background: linear-gradient(70deg, transparent 45%, rgba(255,255,255,.25) 50%, transparent 55%);
  transform: rotate(-10deg) translateX(-20%);
  transition: transform .8s ease;
  pointer-events:none;
}
.pack:hover .pack__front::after{ transform: rotate(-10deg) translateX(0%); }

/* SPINE (side face) */
.pack__spine{
  position:absolute; top:0; right:0; width:var(--th); height:100%;
  transform-origin:left; transform: rotateY(90deg) translateZ(calc(var(--th)/2));
  border-radius:0 var(--radius) var(--radius) 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, var(--c2) 0%, #1b2230 100%);
  box-shadow:
    inset -10px 0 22px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.pack__spine::after{
  content: attr(data-spine);
  writing-mode: vertical-rl; text-orientation: mixed;
  position:absolute; inset:16px 8px auto auto;
  color:#cdd6e6; letter-spacing:.16em; font:700 12px/1.1 system-ui;
}

/* TOP (thin face) */
.pack__top{
  position:absolute; left:0; top:0; width:100%; height:var(--th);
  transform-origin:bottom; transform: rotateX(90deg) translateZ(calc(var(--th)/2));
  border-radius:var(--radius) var(--radius) 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
    linear-gradient(0deg, rgba(0,0,0,.08), transparent 60%);
}

/* content inside front */
.pack__brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pack__logo{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
             background: rgba(255,255,255,.22); backdrop-filter: blur(4px); font-size:18px; }
.pack__brandname{ font:600 12px/1 system-ui; letter-spacing:.08em; opacity:.9; }

.pack__title{ margin:.3rem 0 0; font:800 20px/1.2 Inter,system-ui; letter-spacing:.2px; }
.pack__meta{ margin:.4rem 0 0; font:700 13px/1.1 system-ui; opacity:.95; }
.pack__desc{ margin:.5rem 0 0; font:500 12px/1.6 system-ui; opacity:.9; color:#eef1ff; }

/* focus & reduced motion */
.pack:focus-within .pack__inner{ outline:2px solid #0ea5e9; outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  .pack__inner, .pack__front::after{ transition:none; }
  .pack:hover .pack__inner{ transform:none; }
}