.zp-acc{display:grid;gap:10px} .zp-acc__item{ border-radius:var(--radius-lg); border:1px solid rgba(235,241,228,.10); background:linear-gradient(180deg,rgba(16,21,20,.72),rgba(11,18,11,.52)); box-shadow:0 18px 70px rgba(0,0,0,.38); overflow:hidden; } .zp-acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border:0; background:transparent; cursor:pointer; text-align:left; color:rgba(235,233,223,.92); transition:background-color .2s; } .zp-acc__btn:hover{ background:rgba(255,255,255,.03); } .zp-acc__q{font-weight:700;letter-spacing:-.01em;font-size:1.05rem} .zp-acc__icon{ width:32px; height:32px; border-radius:999px; border:1px solid rgba(235,241,228,.10); background:rgba(6,8,8,.22); position:relative; flex:0 0 auto; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease; } .zp-acc__icon::before, .zp-acc__icon::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:rgba(235,233,223,.84); transform:translate(-50%,-50%); transition:background-color .3s; } .zp-acc__icon::after{transform:translate(-50%,-50%) rotate(90deg)} .zp-acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1), padding-bottom .4s ease, opacity .4s ease; padding:0 20px; opacity:0; visibility:hidden; } .zp-acc__inner{overflow:hidden} .zp-acc__a{ color:rgba(235,233,223,.74); max-width:74ch; line-height:1.6; } .zp-acc__item.is-open .zp-acc__btn{ color:var(--zp-bone); } .zp-acc__item.is-open .zp-acc__icon{ transform:rotate(45deg); border-color:var(--zp-stroke-2); box-shadow:var(--shadow-neon); background:rgba(199,255,0,.1); } .zp-acc__item.is-open .zp-acc__icon::before, .zp-acc__item.is-open .zp-acc__icon::after{ background:var(--zp-accent); } .zp-acc__item.is-open .zp-acc__panel{ grid-template-rows:1fr; padding-bottom:20px; opacity:1; visibility:visible; } @media (max-width:680px){ .zp-acc__btn{padding:16px} .zp-acc__panel{padding:0 16px} .zp-acc__item.is-open .zp-acc__panel{padding-bottom:16px} .zp-acc__q{font-size:1rem} }