:root{
  --ink:#13273b;          /* diep nachtblauw */
  --ink-soft:#3d5166;
  --paper:#f3f7fa;        /* ijsblauw wit */
  --card:#ffffff;
  --charge:#f5b82e;       /* energie-geel */
  --charge-deep:#d99b0a;
  --green:#1d8a5f;        /* euro-groen */
  --line:#dbe5ee;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15;letter-spacing:-0.02em}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--charge-deep);margin-bottom:14px;
}

/* ===== Hero ===== */
.hero{
  background:var(--ink);
  color:#fff;
  padding:88px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero::after{ /* subtiele kWh-puls */
  content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,184,46,.22),transparent 65%);
  pointer-events:none;
}
.hero .wrap{max-width:1140px}
.hero .eyebrow{color:var(--charge)}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:800;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--charge)}
.hero p.lead{margin-top:20px;max-width:52ch;font-size:1.1rem;color:#c6d4e2}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;
  padding:15px 28px;border-radius:999px;text-decoration:none;cursor:pointer;border:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible{outline:3px solid var(--charge);outline-offset:3px}
.btn-primary{background:var(--charge);color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,184,46,.35)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff}
.hero-note{margin-top:16px;font-size:.86rem;color:#8ea3b8}

/* ===== Codestrip in de hero: de code meteen in beeld ===== */
.hero-code{
  margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(245,184,46,.35);
  border-radius:999px;padding:10px 12px 10px 22px;width:fit-content;max-width:100%;
}
.hero-code .tag{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--charge);white-space:nowrap;
}
.hero-code-val{
  display:inline-flex;align-items:baseline;gap:12px;cursor:pointer;
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1.3rem,3.4vw,1.75rem);
  letter-spacing:.2em;color:#fff;background:transparent;border:none;padding:0;
}
.hero-code-val:hover{color:var(--charge)}
.hero-code-val:focus-visible{outline:3px solid var(--charge);outline-offset:4px;border-radius:6px}
.hero-code-val .hint{
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.02em;
  color:#8ea3b8;white-space:nowrap;
}
.hero-code-val.copied{color:var(--charge)}
.hero-code-val.copied .hint{color:var(--charge)}
.hero-code .gain{
  font-size:.82rem;font-weight:600;color:var(--ink);background:var(--charge);
  border-radius:999px;padding:7px 15px;white-space:nowrap;
}
@media (max-width:560px){
  .hero-code{border-radius:18px;padding:16px 18px;gap:10px}
  .hero-code-val{letter-spacing:.16em}
}

/* ===== Meeschuivende balk, verschijnt pas voorbij de hero ===== */
.railbar{
  position:fixed;left:0;right:0;top:0;z-index:80;
  background:rgba(19,39,59,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,184,46,.3);
  padding:10px 0;
  transform:translateY(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.railbar.show{transform:translateY(0)}
.railbar .wrap{display:flex;align-items:center;gap:16px;max-width:1140px}
.railbar .rb-code{
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.16em;
  color:#fff;background:transparent;border:1.5px dashed rgba(245,184,46,.55);
  border-radius:999px;padding:7px 18px;cursor:pointer;white-space:nowrap;
}
.railbar .rb-code:hover{border-color:var(--charge);color:var(--charge)}
.railbar .rb-code.copied{background:var(--green);border-color:var(--green);color:#fff}
.railbar .rb-txt{color:#c6d4e2;font-size:.88rem}
.railbar .btn{margin-left:auto;padding:11px 22px;font-size:.9rem}
@media (max-width:700px){
  .railbar .rb-txt{display:none}
  .railbar .wrap{gap:10px}
  .railbar .btn{padding:11px 16px;font-size:.85rem}
}
@media (prefers-reduced-motion: reduce){
  .railbar{transition:none}
}

/* Twee kolommen op breed scherm: tekst links, meter rechts */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0}
}

/* ===== Fee-meter: het signatuurelement ===== */
.meter-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px;width:100%;max-width:560px;margin:0;
  box-shadow:0 16px 40px rgba(19,39,59,.25);
}
@media (max-width:900px){
  .meter-card{margin:48px auto 0}
}
.meter-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:10px}
.meter-track{height:16px;border-radius:999px;background:#e8eef4;overflow:hidden;position:relative}
.meter-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--charge),var(--charge-deep));
  transition:width 1.3s cubic-bezier(.22,1,.36,1);
}
.meter-result{margin-top:16px;font-family:'Sora',sans-serif;font-size:1.05rem;text-align:center}
.meter-result .old{color:var(--ink-soft);text-decoration:line-through;font-weight:600}
.meter-result .new{color:var(--green);font-weight:800;font-size:1.35rem}
@media (prefers-reduced-motion: reduce){
  .meter-fill{transition:none}
  html{scroll-behavior:auto}
}

/* ===== Uitleg / stappen ===== */
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;margin-bottom:18px}
.section-intro{max-width:60ch;color:var(--ink-soft)}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:38px}
.flow-step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;position:relative;
}
.flow-step .icon{font-size:1.7rem;margin-bottom:12px;display:block}
.flow-step h3{font-size:1.02rem;margin-bottom:8px}
.flow-step p{font-size:.93rem;color:var(--ink-soft)}
.flow-step::after{
  content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  color:var(--charge-deep);font-size:1.3rem;font-weight:700;
}
.flow-step:last-child::after{content:""}
@media (max-width:760px){.flow-step::after{content:""}}

/* ===== Rekenvoorbeeld ===== */
.calc{
  background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:36px;margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;
}
.calc .big{font-family:'Sora',sans-serif;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;color:var(--charge)}
.calc p{color:#c6d4e2;font-size:.95rem}
.calc small{display:block;margin-top:10px;color:#8ea3b8;font-size:.8rem}
@media (max-width:700px){.calc{grid-template-columns:1fr}}

/* ===== Waarom Joulo ===== */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:38px}
.perk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.perk h3{font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.perk h3 span{color:var(--green)}
.perk p{font-size:.93rem;color:var(--ink-soft)}

/* ===== Referral-blok ===== */
.referral{
  background:linear-gradient(160deg,#fff8e8,#fff);
  border:2px solid var(--charge);border-radius:var(--radius);
  padding:44px 36px;text-align:center;
}
.referral h2{margin-bottom:10px}
.referral p{max-width:56ch;margin:0 auto;color:var(--ink-soft)}
.copybox{
  margin:28px auto 0;max-width:560px;display:flex;gap:0;
  border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
}
.copybox input{
  flex:1;border:none;padding:16px 18px;font-size:.95rem;font-family:'Inter',sans-serif;
  color:var(--ink);background:transparent;min-width:0;
}
.copybox input:focus{outline:none}
.copybox button{
  border:none;background:var(--ink);color:#fff;font-family:'Sora',sans-serif;font-weight:700;
  padding:0 26px;cursor:pointer;font-size:.95rem;transition:background .15s ease;white-space:nowrap;
}
.copybox button:hover{background:#1e3a56}
.copybox button.copied{background:var(--green)}
.copybox button:focus-visible{outline:3px solid var(--charge);outline-offset:-3px}
.referral .btn-primary{margin-top:22px}
.referral small{display:block;margin-top:18px;color:var(--ink-soft);font-size:.82rem}
.referral small.aka{margin-top:10px;font-size:.74rem;opacity:.62;letter-spacing:.01em}
.refcode-inline{color:var(--charge-deep);letter-spacing:.06em}
.code-display{
  margin:30px auto 14px;max-width:560px;display:flex;align-items:stretch;justify-content:center;gap:0;
  border:2px dashed var(--charge-deep);border-radius:14px;overflow:hidden;background:#fff;
}
.code-value{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);
  letter-spacing:.18em;color:var(--ink);padding:16px 12px;user-select:all;
}
.code-copy{
  border:none;background:var(--charge);color:var(--ink);font-family:'Sora',sans-serif;font-weight:700;
  padding:0 26px;cursor:pointer;font-size:.95rem;transition:background .15s ease;white-space:nowrap;
}
.code-copy:hover{background:var(--charge-deep)}
.code-copy.copied{background:var(--green);color:#fff}
.code-copy:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

/* ===== FAQ ===== */
details{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;margin-bottom:12px;
}
details summary{
  font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.4rem;color:var(--charge-deep);font-weight:400;flex-shrink:0}
details[open] summary::after{content:"–"}
details p{margin-top:12px;font-size:.93rem;color:var(--ink-soft)}

/* ===== Footer ===== */
footer{background:var(--ink);color:#8ea3b8;padding:36px 0;font-size:.82rem;text-align:center}
footer a{color:#c6d4e2}

/* ===== Taalkeuze ===== */
.langbar{background:#0d1c2b;font-size:.78rem}
.langbar .wrap{display:flex;gap:16px;align-items:center;justify-content:flex-end;padding-top:9px;padding-bottom:9px}
.langbar a{color:#93a8bd;text-decoration:none;letter-spacing:.09em;font-weight:500}
.langbar a:hover{color:var(--charge)}
.langbar strong{color:var(--charge);letter-spacing:.09em;font-weight:700}