/* Expanding panels: the centrepiece, inspired by the video */
.panels{display:flex;gap:14px;height:min(470px,72svh)}
.panel{--c1:#F0C766;--c2:#D1607A;--c3:#7B3FB5;position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;isolation:isolate;
  background:var(--bg-2);transition:flex-grow .65s cubic-bezier(.22,.8,.24,1),height .5s cubic-bezier(.22,.8,.24,1)}
.panel::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--c1),var(--c2) 58%,var(--c3));transition:opacity .5s}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,17,31,0) 30%,rgba(10,17,31,.88));opacity:0;transition:opacity .5s}
.panel.active{flex-grow:5.2}
.panel.active::before{opacity:.68}
.panel.active::after{opacity:1}
.panel:nth-child(2){--c1:#47D6C2;--c2:#5BB0FF;--c3:#B07CF2}
.panel:nth-child(3){--c1:#FFA24D;--c2:#F2634B;--c3:#C2417A}
.panel:nth-child(4){--c1:#8B5CF6;--c2:#5B6CF2;--c3:#2E8BFF}

/* the full-panel tab button (keyboard + touch target) */
.tab{position:absolute;inset:0;width:100%;background:none;border:0;cursor:pointer;color:#fff;z-index:1}
.tab:focus-visible{outline-offset:-4px}

/* closed face: vertical title + outlined number */
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:26px;pointer-events:none;transition:opacity .25s}
.face i{display:block;width:1.5px;height:52px;background:rgba(255,255,255,.85);margin-bottom:12px}
.face b{writing-mode:vertical-rl;font-weight:600;font-size:1rem;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.face em{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:600 2.7rem/1 var(--sans);font-style:normal;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.78)}
.panel.active .face{opacity:0}

/* decorative art (stands in for the photo in the video) */
.art{position:absolute;top:63%;left:50%;width:132px;height:132px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;opacity:.35;transition:opacity .5s,transform .6s cubic-bezier(.22,.8,.24,1),top .6s cubic-bezier(.22,.8,.24,1),left .6s cubic-bezier(.22,.8,.24,1)}
.art svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.art img{width:112px;height:112px;border-radius:24px;object-fit:cover;box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.panel.active .art{top:25%;left:82%;opacity:.92}

/* open face: text and action */
.open{position:absolute;left:0;right:0;bottom:0;padding:30px;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .4s;pointer-events:none;z-index:2}
.panel.active .open{opacity:1;transform:none;transition-delay:.28s}
.open>div{width:clamp(280px,36vw,500px)}
.open h3{font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin-bottom:8px}
.open p{font-size:.88rem;color:rgba(255,255,255,.82);margin-bottom:18px}
.open ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
.open li{font-size:.86rem;color:rgba(255,255,255,.82);padding-left:16px;position:relative}
.open li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold-hi)}
.open li strong{color:#fff;font-weight:600}
.open .btn{pointer-events:auto}
.panel:not(.active) .open .btn{visibility:hidden}

@media (max-width:860px){
  .panels{flex-direction:column;height:auto}
  .panel{flex:none;height:78px}
  .panel.active{height:var(--open-h,380px)}
  .face{flex-direction:row;align-items:center;padding:0 22px;gap:14px}
  .face i{width:30px;height:1.5px;margin:0}
  .face b{writing-mode:horizontal-tb}
  .face em{left:auto;right:22px;bottom:auto;top:50%;transform:translateY(-50%);font-size:2rem}
  .art{top:50%;width:96px;height:96px;opacity:0}.panel.active .art{top:20%;left:50%;opacity:.92}.art img{width:84px;height:84px}
  .open{padding:22px}.open>div{width:100%}
}