/* ==========================================================================
   PAGE-OOGDRUPPELEN — /oogdruppelen in merkstijl "De druppel".
   Header/nav/footer/tokens komen uit base.css.
   ========================================================================== */

.container-narrow{max-width:800px;margin:0 auto;padding:0 32px}

/* ==========================================================================
   HERO — foto met ink-overlay, tekst onderin
   ========================================================================== */
.page-hero{background:var(--bg);padding:0}
.hero-img-wrap{position:relative;min-height:440px;overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
.hero-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(16,51,62,.42) 0%, rgba(16,51,62,.38) 40%, rgba(11,39,49,.88) 100%);
}
.hero-content{
  position:relative;z-index:1;
  width:100%;max-width:1240px;margin:0 auto;
  padding:72px 40px 56px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-style:normal;font-weight:700;
  color:#fff;font-size:.98rem;letter-spacing:0;text-transform:none;margin-bottom:16px;
  animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both;
}
.hero-badge::before{
  content:"";width:11px;height:11px;flex-shrink:0;
  border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--amber);
}
.hero-badge svg{display:none}
.page-hero h1{
  font-family:var(--font-display);font-size:clamp(2.3rem,4vw,3.5rem);
  font-weight:600;color:#fff;line-height:1.08;letter-spacing:-.02em;margin-bottom:16px;
  max-width:780px;
  animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .08s both;
}
.hero-lead{
  color:rgba(255,255,255,.92);font-size:1.13rem;max-width:640px;line-height:1.7;
  animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .16s both;
}

/* ==========================================================================
   ALERT
   ========================================================================== */
.medical-notice{
  background:var(--amber-bg);border:1px solid var(--amber-border);
  border-radius:var(--radius-xs);padding:20px 24px;margin-bottom:40px;
  display:flex;gap:12px;align-items:flex-start;
}
.medical-notice svg{color:var(--amber-text);flex-shrink:0;margin-top:3px;width:18px;height:18px}
.medical-notice p{font-size:1rem;color:var(--amber-text);line-height:1.6;margin:0}
.medical-notice strong{font-weight:700}

/* ==========================================================================
   SECTIONS / HEADINGS
   ========================================================================== */
.section{padding:96px 0}
.section-grey{background:var(--mist-2)}
.section-purple{background:#fff}
h2{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,2.7rem);
  font-weight:600;color:var(--ink);line-height:1.12;letter-spacing:-.015em;margin-bottom:16px;
}
h3{
  font-family:var(--font-display);font-size:clamp(1.4rem,2vw,1.75rem);
  font-weight:600;color:var(--ink);line-height:1.22;margin-bottom:12px;margin-top:40px;
}
h3:first-child{margin-top:0}
.lead{color:var(--muted);margin-bottom:38px;font-size:1.14rem;line-height:1.65;max-width:720px}
p{color:var(--muted);line-height:1.75;margin-bottom:16px;font-size:1.02rem}
p:last-child{margin-bottom:0}

/* ==========================================================================
   USE CASES GRID
   ========================================================================== */
.use-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:32px}
.use-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:26px 24px;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.use-card:hover{box-shadow:var(--shadow-sm);border-color:var(--teal-bright)}
.use-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--mist);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.use-icon svg{width:20px;height:20px;color:var(--teal)}
.use-card h3{font-family:var(--font-body);margin-top:0;font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.use-card p{font-size:.98rem;color:var(--muted);line-height:1.55;margin-bottom:0}

/* ==========================================================================
   STEPS — echte volgorde, dus nummers zijn hier op hun plek
   ========================================================================== */
.steps-list{list-style:none;counter-reset:steps;margin-top:24px}
.steps-list li{counter-increment:steps;display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.steps-list li:last-child{border-bottom:none}
.step-num{
  width:46px;height:46px;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.05rem;flex-shrink:0;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.step-num span{transform:rotate(-45deg)}
.step-text h3{font-family:var(--font-body);margin-top:0;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.step-text p{font-size:1rem;color:var(--muted);line-height:1.65;margin-bottom:0}

/* ==========================================================================
   MISTAKES / TIPS
   ========================================================================== */
.checklist{list-style:none;margin-top:16px}
.checklist li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--muted);line-height:1.6}
.checklist li:last-child{border-bottom:none}
.icon-warn{color:var(--amber-text);flex-shrink:0;margin-top:2px;font-size:1.05rem;font-weight:700}
.icon-tip{color:var(--green);flex-shrink:0;margin-top:2px;font-size:1.05rem;font-weight:700}

/* ==========================================================================
   TWO-COL
   ========================================================================== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.two-col-wide{display:grid;grid-template-columns:2fr 1fr;gap:52px;align-items:start}

/* ==========================================================================
   INFO CARD
   ========================================================================== */
.info-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:32px;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.info-card:hover{box-shadow:var(--shadow-sm);border-color:var(--teal-bright)}
.info-card h3{margin-top:0;font-size:1.25rem}

/* ==========================================================================
   WARNING BOX
   ========================================================================== */
.warning-box{
  background:var(--amber-bg);border:1px solid var(--amber-border);
  border-radius:var(--radius-xs);padding:22px 26px;margin-top:24px;
}
.warning-box p{color:var(--amber-text);font-size:1rem;margin-bottom:0}
.warning-box strong{color:var(--amber-text)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}
details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease;
}
details:hover{border-color:var(--teal-bright);box-shadow:var(--shadow-sm)}
summary{
  padding:20px 26px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  list-style:none;color:var(--ink);font-size:1.08rem;transition:background .2s ease;
}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--porcelain)}
.faq-plus{color:var(--teal);font-size:1.4rem;font-weight:400;flex-shrink:0;margin-left:16px;transition:transform .2s ease}
details[open] summary{border-bottom:1px solid var(--line);background:var(--mist-2)}
details[open] .faq-plus{transform:rotate(45deg)}
.faq-body{padding:18px 26px;color:var(--muted);font-size:1rem;line-height:1.7}

/* ==========================================================================
   SUMMARY BOX — de ene donkere band op deze pagina
   ========================================================================== */
.summary-box{
  background:var(--ink);
  border-radius:var(--radius);padding:44px;color:#fff;
}
.summary-box h2{color:#fff;margin-bottom:16px}
.summary-box p{color:rgba(255,255,255,.87);line-height:1.75}
.summary-box .btn{margin-top:26px}

/* ==========================================================================
   BUTTONS — basis uit base.css; hier de witte variant op ink
   ========================================================================== */
.summary-box .btn-white,.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--mist)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:900px){
  .two-col,.two-col-wide{grid-template-columns:1fr}
  .hero-content{padding:44px 24px 36px}
}
@media(max-width:640px){
  .hero-content{padding:32px 20px 28px}
}

@media(max-width:640px){
  .container-narrow{padding:0 18px}
  .hero-img-wrap{min-height:360px}
  .hero-content{padding:32px 20px 28px}
  .use-grid{grid-template-columns:1fr 1fr}
  .section{padding:60px 0}
  .summary-box{padding:30px}
}