/* Hundred site — gedeelde animaties & account-pop-up (subpagina's) */

/* subtiele dividers tussen blokken */
body > .section + .section,
body > .proof + .section,
body > .section + .dark-band,
body > .dark-band + .section { border-top: 1px solid #E9EDF1; }

/* architectuur-verhaal: stappen lichten één voor één op */
@media (prefers-reduced-motion: no-preference) {
  .arch-story .arch-step, .arch-story .arch-arrow { opacity: .25; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .arch-story .arch-step { transform: translateY(14px); }
  .arch-story.play .arch-step, .arch-story.play .arch-arrow { opacity: 1; transform: none; }
  .arch-story.play > *:nth-child(1) { transition-delay: .05s; }
  .arch-story.play > *:nth-child(2) { transition-delay: .5s; }
  .arch-story.play > *:nth-child(3) { transition-delay: .65s; }
  .arch-story.play > *:nth-child(4) { transition-delay: 1.1s; }
  .arch-story.play > *:nth-child(5) { transition-delay: 1.25s; }
}

/* account-aanmaak pop-up */
.acct-overlay { position: fixed; inset: 0; background: rgba(15,27,45,.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.acct-overlay.open { display: flex; animation: acct-fade .25s ease; }
.acct-overlay.open .acct-modal { animation: acct-pop .35s cubic-bezier(.22,.61,.36,1); }
@keyframes acct-fade { from { opacity: 0; } }
@keyframes acct-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .acct-overlay.open, .acct-overlay.open .acct-modal { animation: none; } }
.acct-modal { background: #fff; border-radius: var(--r-lg, 24px); max-width: 440px; width: 100%; padding: 32px; position: relative; box-shadow: 0 24px 60px rgba(15,27,45,.3); }
.acct-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: var(--gray, #F3F5F7); border-radius: 50%; font: 400 18px/1 var(--font); color: var(--fg-muted); cursor: pointer; }
.acct-close:hover { background: var(--border, #DDE2E7); color: var(--fg); }
.acct-modal h3 { font: 700 24px/1.2 var(--font); letter-spacing: -0.01em; margin-top: 16px; color: var(--fg); }
.acct-sub { font: 400 14px/1.55 var(--font); color: var(--fg-muted); margin-top: 8px; }
.acct-modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.acct-modal input {
  font: 400 14px/1 var(--font); color: var(--fg);
  background: #fff; border: 1px solid var(--border, #DDE2E7); border-radius: 12px;
  padding: 13px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.acct-modal input::placeholder { color: #A8B2BC; }
.acct-modal input:focus { border-color: var(--blue, #2E7DD1); box-shadow: 0 0 0 3px rgba(46,125,209,.15); }
.acct-modal .form-note { font: 400 12px/1.5 var(--font); color: var(--fg-muted); margin-top: 4px; }