*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#dbeafe;line-height:1.6;background:#03152A;overflow-x:hidden;min-height:100vh;
  background:linear-gradient(180deg,#03152A 0%,#061F3E 100%)}

img{max-width:100%;height:auto;display:block}
a{color:#93c5fd;text-decoration:none;transition:color .2s}
a:hover{color:#bfdbfe}

.container{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}

/* ─── Background ─── */
.page-bg{position:fixed;inset:0;z-index:-50;
  background:linear-gradient(180deg,#03152A 0%,#061F3E 100%)}

/* ─── Typography ─── */
h1,h2,h3,h4{color:#fff;line-height:1.25;font-weight:700}
h1{font-size:clamp(1.75rem,4vw,3rem);margin-bottom:1.5rem}
h2{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:1rem}
h3{font-size:1.25rem;margin-bottom:.75rem}
p{margin-bottom:1rem;color:rgba(219,234,254,.8)}
strong{color:#fff}

/* ─── Section spacing ─── */
section{padding:4rem 1rem;position:relative}
section+section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.2),transparent)}

/* ─── Hero ─── */
.hero{padding:4rem 1rem 3rem;text-align:center}
.hero h1{max-width:42rem;margin-left:auto;margin-right:auto}
.hero .subtitle{font-size:1.125rem;max-width:38rem;margin:0 auto 2.5rem;color:rgba(191,219,254,.9)}

/* ─── Card wrapper (for the bonuskaart image) ─── */
.card-frame{position:relative;max-width:26rem;margin:0 auto 2rem;padding:.75rem;
  background:linear-gradient(180deg,#0c3975,#061d40);
  border-radius:.75rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.card-frame::before{content:"";position:absolute;inset:-3rem;border-radius:50%;
  background:rgba(59,130,246,.15);filter:blur(48px);z-index:-1}
.card-frame img{border-radius:.5rem}

/* ─── Info box ─── */
.info-box{display:flex;align-items:center;justify-content:center;gap:.75rem;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);border-radius:.75rem;
  padding:1rem 1.5rem;max-width:42rem;margin:1.5rem auto 2rem;
  font-weight:500;color:#fff;font-size:1.125rem}
.info-box svg{flex-shrink:0;width:1.25rem;height:1.25rem;color:#93c5fd}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.75rem;border-radius:9999px;font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;
  border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(37,99,235,.4)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.5);color:#fff}
.btn svg{width:1.25rem;height:1.25rem;transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}

/* ─── Cards ─── */
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:.75rem;padding:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.2);
  transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-icon{width:3.5rem;height:3.5rem;border-radius:.75rem;display:flex;align-items:center;
  justify-content:center;margin-bottom:1.25rem;
  background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff}
.card-icon svg{width:1.75rem;height:1.75rem}

/* ─── Grid layouts ─── */
.grid-3{display:grid;gap:2rem}
.grid-2{display:grid;gap:2rem}
@media(min-width:48rem){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* ─── Section headings ─── */
.section-header{text-align:center;margin-bottom:3rem}
.section-header p{max-width:42rem;margin-left:auto;margin-right:auto;color:rgba(191,219,254,.7)}

/* ─── Steps ─── */
.step{display:flex;gap:1rem;align-items:flex-start}
.step-number{flex-shrink:0;width:3rem;height:3rem;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#fff;
  background:linear-gradient(135deg,#60a5fa,#2563eb);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.step .tip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  border-radius:.5rem;padding:1rem;margin-top:1rem;font-size:.875rem;font-style:italic;
  color:rgba(191,219,254,.9)}

/* ─── Reviews ─── */
.stars{display:flex;gap:.25rem}
.stars svg{width:1.25rem;height:1.25rem}
.star-filled{fill:#facc15;color:#facc15}
.star-empty{fill:#6b7280;color:#6b7280}
.review-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;margin-bottom:.5rem}
.review-meta .author{color:#fff;font-weight:600}
.review-meta time{color:rgba(191,219,254,.6);font-size:.875rem}

.rating-summary{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}
.rating-summary .score{color:#fff;font-size:1.25rem;font-weight:700}
.rating-summary .count{color:rgba(191,219,254,.7)}

/* ─── FAQ accordion ─── */
details{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:.75rem;margin-bottom:1rem;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.15)}
details summary{padding:1.25rem 1.5rem;font-weight:700;font-size:1.125rem;color:#fff;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  transition:background .2s}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"＋";font-size:1.25rem;color:rgba(191,219,254,.6);transition:transform .2s}
details[open] summary::after{content:"−"}
details summary:hover{background:rgba(255,255,255,.03)}
details .faq-answer{padding:0 1.5rem 1.25rem;border-top:1px solid rgba(255,255,255,.1);
  color:rgba(219,234,254,.8)}

/* ─── Keywords box ─── */
.keywords-box{margin-top:3rem;padding:1.5rem;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);border-radius:.75rem}
.keywords-box h3{font-size:1.125rem;margin-bottom:1rem}
.keywords-box p{color:rgba(191,219,254,.6);font-size:.875rem;line-height:1.8}

/* ─── Footer ─── */
footer{padding:3rem 1rem 2rem;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.2),transparent)}
.footer-grid{display:grid;gap:3rem}
@media(min-width:48rem){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.footer-brand span:first-child{color:#fff;font-weight:700;font-size:1.5rem}
.footer-brand .badge{background:#fff;color:#093166;padding:.125rem .5rem;border-radius:.375rem;
  font-size:.75rem;font-weight:700}
.footer-links{list-style:none}
.footer-links li+li{margin-top:.75rem}
.footer-links a{color:rgba(219,234,254,.8)}
.footer-links a:hover{color:#93c5fd}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:1.5rem}
@media(min-width:48rem){.footer-bottom{grid-template-columns:repeat(3,1fr)}}
.footer-bottom h4{color:#fff;font-size:.875rem;margin-bottom:.75rem}
.footer-bottom ul{list-style:none;font-size:.875rem;color:rgba(191,219,254,.5)}
.footer-bottom li+li{margin-top:.5rem}
.footer-bottom p{font-size:.875rem;color:rgba(191,219,254,.5)}
.footer-heart{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:.875rem;color:rgba(191,219,254,.4)}

/* ─── Blog / sub-page layout ─── */
.page{min-height:100vh;padding:4rem 1rem}
.page .container{max-width:56rem}
.page header{text-align:center;margin-bottom:3rem}
.back-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:2.5rem;
  color:#93c5fd;font-weight:500}
.back-link:hover{color:#bfdbfe}

/* ─── Two-col hero (bonuskaart-ah page) ─── */
.split{display:flex;flex-direction:column;gap:2.5rem;align-items:center}
@media(min-width:48rem){.split{flex-direction:row}
  .split>*{flex:1}}

/* ─── Screenreader only ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── Misc ─── */
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.mt-4{margin-top:2rem}
@media(min-width:48rem){.md-text-left{text-align:left}}