:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --accent:#2563eb;
  --muted:#6b7280;
  --radius:12px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); padding:32px; color:#0f172a}

.container{max-width:1900px; margin:0 auto}
h1{font-size:1.6rem; margin-bottom:8px}
p.lead{color:var(--muted); margin-bottom:20px}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px}
.accordion{display:flex; flex-direction:column; gap:8px}

.item{border-radius:10px; overflow:hidden}
.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; background:linear-gradient(180deg, rgba(2,6,23,0.02), transparent);
  border:1px solid rgba(15,23,42,0.04);
}
.header h3{font-size:1rem; margin:0}
.header p{margin:0; color:var(--muted); font-size:0.9rem}

.icon{
  width:36px; height:36px; display:inline-grid; place-items:center; border-radius:10px; background:transparent; transition:transform .28s ease;
  flex:0 0 36px; position:relative
}
.icon svg{width:18px; height:18px; transition:transform .28s ease}

.content{
  max-height:0; overflow:hidden; transition:max-height .32s ease, padding .28s ease; padding:0 16px; border-left:1px solid rgba(15,23,42,0.03); border-right:1px solid rgba(15,23,42,0.03);
  background:linear-gradient(180deg, rgba(2,6,23,0.01), transparent);
}
.content-inner{padding:12px 0; color:#111827}

/* open states */
.item.open .icon{transform:rotate(180deg); background:rgba(37,99,235,0.06)}
.item.open .icon svg{transform:rotate(45deg)}
.item.open .content{padding:12px 16px}

/* small screens */
@media (max-width:520px){
  .header{padding:12px}
  .content-inner{font-size:0.95rem}
}