:root{
  --bg:#ffffff; --fg:#0a0a0a; --sub:#6b6b6b; --line:#eaeaea; --chip:#f4f4f4; --black:#0a0a0a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html { scroll-snap-type: none; }

body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55}

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

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--fg);font-weight:600;text-decoration:none}
.btn--black{background:var(--black);border-color:var(--black);color:#fff}

/* ---------- HERO ---------- */
.hero{
  position:relative;background:url('../images/jebbio_phones.png') no-repeat center center/cover;
  height:100vh;display:flex;align-items:center;justify-content:center
}
.hero__overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:2rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.35))
}
.hero h1{font-size:3rem;margin:.2rem 0 .5rem}
.hero h2{font-size:1.8rem;margin:.2rem 0 1rem}
.hero p{font-size:1.1rem;margin:0 0 2rem}
.store-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.store-buttons__btn img{height:48px;display:block}

/* ---------- HOW TO ---------- */
.how-to{background:#fff;padding:60px 20px;text-align:center}
.how-to h2{font-size:2rem;margin-bottom:40px}
.steps{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.step{
  flex:1 1 200px;max-width:250px;position:relative;background:#f9f9f9;padding:32px 20px 24px;border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;text-align:center
}
.step:hover{transform:translateY(-5px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.step-number{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:36px;height:36px;background:#000;color:#fff;font-weight:700;
  font-size:1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.step img{width:60px;height:60px;margin:16px 0}
.step h3{margin:.25rem 0 .5rem;color:#000}
.step p{color:#333}

/* ---------- PRO TIP ---------- */
.pro-tip{
  background:#f9f9f9;border-left:4px solid #ff9800;padding:1rem 1.5rem;border-radius:8px;margin:2rem 0;text-align:left
}
.pro-tip h3{margin:.2rem 0 .6rem;color:#ff9800}
.pro-tip ul{list-style:none;padding:0;margin:0}
.pro-tip li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;font-size:.95rem;line-height:1.5}
.pro-tip li::before{content:"👉 ";position:relative;left:0;top:0}

/* ===============================
   Boxes preview (CLEAN VERSION)
   =============================== */

.boxes-preview {
  padding: 64px 0;
  background: #fff;
}

.boxes-preview .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Controls --- */
.boxes-preview__controls {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.boxes-preview select {
  height: 42px;
  width: 150px;
  padding: 0 18px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 700;
  border: none;
  appearance: none;
  cursor: pointer;
}

/* --- Meta --- */
.boxes-preview__meta {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f7f7;
  font-weight: 600;
}

.boxes-preview__pager {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.boxes-preview__pos {
  font-weight: 800;
}

/* ===============================
   Horizontal snap scroller
   =============================== */

.boxes-preview__box {
  width: 100%;
  margin-top: 18px;
  display: flex;
  justify-content: center;
  overflow: hidden; /* ✅ hides other boxes */
}

.boxes-preview__field {
  position: relative;
}

/* Chevron accessory */
.boxes-preview__field::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;

  color: #fff;
  font-size: 14px;
  opacity: 0.85;
}


/* viewport */
.jp-snap {
  display: flex;
  gap: 150px;                /* ✅ separation between boxes */
  padding: 0 50vw;          /* center snapping trick */
  box-sizing: content-box;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;

  scrollbar-width: none;
}
.jp-snap::-webkit-scrollbar {
  display: none;
}

/* individual box */
.jp-snap__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

/* ===============================
   Box card
   =============================== */

.jp-box-shell {
  background: #fff;
  border-radius: 16px;
  /*box-shadow: 0 12px 32px rgba(0,0,0,.10);*/
  padding: 14px 14px 18px;
}

/* ===============================
   Fret pill
   =============================== */

.jp-fret-pill {
  display: inline-flex;
  gap: 18px;
  padding: 6px 0px;
  border-radius: 999px;
  background: #000;
}

.jp-fret-pill__n {
  width: 44px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

/* ===============================
   Grid
   =============================== */

.jp-grid {
  margin-top: 10px;
  display: inline-flex;
  gap: 18px;
  align-items: flex-start;
}

.jp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* ===============================
   Notes
   =============================== */

.jp-note {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  border: 2px solid transparent;
}

.jp-note.inScale {
  border-color: #000;
  color: #000;
}

.jp-note.root {
  background: #000;
  color: #fff;
}

.jp-note.alt {
  outline: 2px dashed #000;
  outline-offset: -4px;
}

.jp-note.muted {
  visibility: hidden;
}

/* ===============================
   Error
   =============================== */

.boxes-preview__error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #ffe8e8;
  border: 1px solid #ffbcbc;
  border-radius: 10px;
  font-weight: 600;
  color: #8a0000;
}

/* ===== Mobile fixes for boxes preview ===== */
@media (max-width: 520px) {
  /* Don't crop the active box */
  .boxes-preview__box {
    overflow: visible;
  }

  /* Make the scroller behave like a normal carousel on mobile */
  .jp-snap {
    gap: 16px;            /* instead of 150px */
    padding: 0 16px;      /* instead of 50vw */
    scroll-padding: 0 16px;
    box-sizing: border-box;
  }

  /* Ensure each item fits inside the viewport */
  .jp-snap__item {
    width: calc(100vw - 32px);
    max-width: 420px;
  }

  .jp-box-shell {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
  }

  /* Scale down the grid so it actually fits */
  .jp-note {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .jp-fret-pill__n {
    width: 32px;
    font-size: 11px;
  }

  .jp-grid { gap: 10px; }
  .jp-fret-pill { gap: 10px; }
  .jp-col { gap: 8px; }

  /* Controls should wrap on small screens */
  .boxes-preview__controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .boxes-preview select {
    width: 44vw;          /* two pills next to each other */
    min-width: 140px;
  }
}

.jp-footnote{
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.35;
  color: #666;
  text-align: center;
  max-width: 720px;
  padding: 10px 12px;
  border-top: 1px solid #eee;
}

.jp-footnote__mark{
  font-weight: 800;
  margin-right: 6px;
}

@media (max-width: 520px){
  .jp-footnote{
    font-size: 11px;
    padding: 10px 14px;
    margin-left: 16px;
    margin-right: 16px;
  }
}




/* ---------- TESTIMONIALS ---------- */
.testimonials{padding:36px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonials .container{max-width:900px;margin:0 auto;padding:0 24px}
.quotes{display:grid;gap:16px;grid-template-columns:1fr}
.quote{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.quote p{margin:.2rem 0 .6rem;color:var(--fg);font-style:italic}
.quote .who{color:var(--sub);font-size:.9rem}
@media (min-width:820px){.quotes{grid-template-columns:1fr 1fr}}

/* ---------- CONTACT ---------- */
.contact{padding:40px 0}
.contact .container{max-width:900px}
.contact h3{margin-bottom:.35rem}
.contact p{color:var(--sub);margin:.2rem 0 1rem}
.contact__form{display:flex;flex-direction:column;gap:12px}
.contact__form .row{display:flex;gap:12px}
.contact__form input,.contact__form textarea{
  width:100%;padding:.9rem .95rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--fg)
}
.confirmation.ok{color:#0a8f2f;margin-top:.5rem}
.confirmation.err{color:#b00020;margin-top:.5rem}

input.valid, textarea.valid {
  border: 2px solid #22c55e; /* green */
  outline: none;
}
input.invalid, textarea.invalid {
  border: 2px solid #ef4444; /* red */
  outline: none;
}
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.success-message {
    color: #28a745; /* mooi groen */
    font-weight: 600;
    margin-top: 1rem;
}

.contact .container{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}



/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);background:#fff}
.footer__row{display:flex;align-items:center;gap:12px;padding:20px 24px}
.footer__logo{height:40px;opacity:.85}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,0,0,.06)
}
.cookie-banner__inner{
  max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between
}
.cookie-banner p{margin:0;color:var(--fg);font-size:.95rem}
.cookie-banner a{color:inherit;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px}
@media (max-width:720px){
  .cookie-banner__inner{flex-direction:column;align-items:stretch}
  .cookie-banner__actions{justify-content:flex-end}
}

/* ---------- Responsive small tweaks ---------- */
@media (max-width:940px){
  .hero{min-height:72vh}
  .contact__form .row{flex-direction:column}
}

/* --- NAV --- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid var(--line);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; padding:10px 24px; }
.nav__brand img{ height:50px; display:block; }

/* Desktop menu */
.nav__menu{ display:flex; gap:18px; align-items:center; }
.nav__menu a{ text-decoration:none; color:var(--fg); font-weight:600; font-size:.95rem; padding:8px 6px; border-radius:8px; }
.nav__menu a:hover{ background:var(--chip); }

/* Hamburger (hidden on desktop) */
.nav__toggle{
  display:none; position:relative; width:40px; height:40px; border:1px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer;
}
.nav__toggle span{
  position:absolute; left:8px; right:8px; height:2px; background:#000; transition:transform .2s ease, opacity .2s ease;
}
.nav__toggle span:nth-child(1){ top:12px; }
.nav__toggle span:nth-child(2){ top:19px; }
.nav__toggle span:nth-child(3){ top:26px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile layout */
@media (max-width: 860px){
  .nav__toggle{ display:block; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    display:grid; gap:4px; padding:10px 16px 14px;
    background:#fff; border-bottom:1px solid var(--line);
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav__menu a{ padding:10px 8px; border-radius:8px; }
  .site-header.open .nav__menu{
    opacity:1; transform: translateY(0); pointer-events:auto;
  }
}

/* Optional: anchor offset so sticky header doesn’t cover section titles */
:target{ scroll-margin-top: 80px; }