/* =======================================
   Basis & variabelen (donker + balans)
======================================= */
:root{
  --bg: #1d68b9bc;
  --panel: rgba(10, 47, 90, 0.65);
  --text: #f4f7fb;
  --muted: #9aa3b2;

  --brand: #7C5CFF;
  --brand-2: #5EEAD4;

  --accent: #8c38d9;
  --ok: #22c55e;
  --warn: #f59e0b;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);

  --pink: #e84393;
  --violet: #a643e8;
  --danger: #f50606;
  --info: #3b82f6;
  --error: #ef4444;
  --warning: #eab308;
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.container{ max-width: 1100px; margin-inline:auto; padding: 24px; }

/* ==========================
   Header
========================== */
.site-header{ text-align:center; padding: 40px 24px 10px; }
.site-header h1{ margin:0 0 6px; font-size: clamp(28px, 4vw, 40px); letter-spacing:.3px; }
.subtitle{ margin:0; color: var(--muted); }

/* ==========================
   Accordions
========================== */
.accordion{ display: grid; gap: 14px; margin-bottom: 28px; }
.section-title{ margin: 10px 0 6px; }

.accordion-item{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Trigger */
.accordion-trigger{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  color: var(--text);
  border: 0;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
}
.accordion-trigger:focus-visible{
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 6px;
}

.accordion-trigger .title{ font-size: 1.05rem; }
.accordion-trigger .price{ margin-left:auto; display:flex; align-items:baseline; gap:8px; }
.amount{ font-weight:800; font-size: 1.1rem; letter-spacing:.2px; color:#fff; }
.note{ color: var(--muted); font-size:.92rem; }

.badge{
  display:inline-block;
  font-size:.75rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#0b0c10;
  font-weight: 800;
}

/* Chevron */
.chev{ width:22px; height:22px; margin-left: 6px; flex: 0 0 auto; transition: transform .2s ease; fill:none; stroke: currentColor; stroke-width:2; opacity:.85; }
.accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Panel */
.accordion-panel{
  padding: 0 18px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.accordion-panel > *{ margin-top: 12px; }
.lead{ color: var(--muted); }

.features{ margin: 0 0 0 18px; padding: 0; }
.features li{ margin:.35rem 0; }

.small{ font-size:.92rem; }
.muted{ color: var(--muted); }
.footnote{ margin-top: 6px; }

/* Pills / tags */
.pill{
  display:inline-block;
  font-size:.75rem;
  padding: 3px 8px;
  border-radius: 999px;
  color:#0b0c10;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  font-weight: 800;
}
.pill.ok{ background: linear-gradient(135deg, var(--brand-2), #b8fff1); }
.pill.warn{ background: linear-gradient(135deg, var(--warn), #ffd89b); color:#111; }
.pill.brand{ background: linear-gradient(135deg, var(--brand), #b8a6ff); }

/* Populaire item net iets opvallender */
.accordion-item.pop{ outline: 2px solid var(--brand-2); }

/* ==========================
   Extra info
========================== */
.info-note{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 10px;
}

/* ==========================
   Footer
========================== */
.site-footer{ text-align:center; color: var(--muted); padding: 16px 0 26px; }

/* ==========================
   Responsive
========================== */
@media (max-width: 720px){
  .accordion-trigger{ align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .accordion-trigger .price{ margin-left:0; }
}