/* =========================================================
   DiamondCode IPTV — Light theme (rood / wit / zwart)
   ========================================================= */

:root{
  /* Basis */
  --white:      #ffffff;
  --bg:         #ffffff;
  --bg-soft:    #f6f6f8;
  --ink:        #0d0d0f;      /* zwart */
  --ink-2:      #17171c;

  --text:       #101014;
  --muted:      #5a6070;
  --dim:        #868c9b;

  /* Rood */
  --red:        #ED1C24;
  --red-2:      #c9111a;
  --red-3:      #ff4a50;
  --red-soft:   rgba(237,28,36,.08);
  --red-line:   rgba(237,28,36,.22);

  /* Lijnen en vlakken */
  --stroke:     rgba(13,13,15,.10);
  --stroke-2:   rgba(13,13,15,.20);
  --surface:    #ffffff;
  --surface-2:  #fafafb;

  /* Op donkere vlakken */
  --on-dark:      #f4f4f6;
  --on-dark-mut:  #a2a7b4;
  --on-dark-line: rgba(255,255,255,.14);

  --grad:      linear-gradient(120deg, var(--red) 0%, var(--red-2) 100%);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow:    0 18px 44px -20px rgba(13,13,15,.30);
  --shadow-sm: 0 8px 22px -12px rgba(13,13,15,.22);
  --shadow-red:0 14px 32px -14px rgba(237,28,36,.55);

  --wrap: 1220px;
  --nav-h: 74px;

  --ff: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 8px)}
body{
  margin:0;
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is nodig omdat de height-attributen op <img> (voor layout shift)
   anders de aspect-ratio-regels overschrijven. */
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.14; font-weight:800; letter-spacing:-.025em}
p,figure,figcaption{margin:0}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}

/* Compacte sectie-afstanden */
section{padding:58px 0; position:relative}
.sec-head{text-align:center; max-width:720px; margin:0 auto 34px}
.sec-head p{color:var(--muted); margin-top:12px; font-size:.98rem}

/* Afwisselende vlakken geven ritme zonder extra witruimte */
.band-soft{background:var(--bg-soft)}
.band-dark{background:var(--ink); color:var(--on-dark)}
.band-dark .sec-head p{color:var(--on-dark-mut)}

h2.title{font-size:clamp(1.7rem, 3.4vw, 2.6rem)}
.grad{color:var(--red)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:.94rem;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
  white-space:nowrap; border:1.5px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow-red)}
.btn-primary:hover{background:var(--red-2); box-shadow:0 18px 38px -14px rgba(237,28,36,.7)}
.btn-ghost{border-color:var(--stroke-2); background:#fff; color:var(--ink)}
.btn-ghost:hover{border-color:var(--red); color:var(--red)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#000}
.btn-wa{background:#25d366; color:#06210f; box-shadow:0 12px 30px -14px rgba(37,211,102,.8)}
.btn-block{width:100%}
.btn-lg{padding:16px 32px; font-size:.98rem}
.band-dark .btn-ghost{background:transparent; border-color:var(--on-dark-line); color:#fff}
.band-dark .btn-ghost:hover{border-color:var(--red); color:#ff6b70}

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.header.stuck{border-bottom-color:var(--stroke); box-shadow:0 6px 24px -18px rgba(13,13,15,.6)}
.header .wrap{display:flex; align-items:center; gap:26px}

.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.18rem; letter-spacing:-.035em; color:var(--ink)}
.brand .mark{width:38px; height:38px; flex:0 0 auto}
.brand span b{color:var(--red)}

.nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.nav a{
  padding:9px 14px; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--muted);
  transition:color .2s, background .2s;
}
.nav a:hover{color:var(--ink); background:var(--bg-soft)}
.nav a.active{color:var(--red); background:var(--red-soft)}
.header-cta{display:flex; align-items:center; gap:10px}
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1.5px solid var(--stroke-2); background:#fff; font-size:1.05rem; color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  padding:calc(var(--nav-h) + 46px) 0 52px; overflow:hidden;
  background:
    radial-gradient(60% 70% at 82% 22%, rgba(237,28,36,.10), transparent 70%),
    radial-gradient(50% 60% at 8% 8%, rgba(13,13,15,.05), transparent 70%),
    var(--white);
}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:52px; align-items:center}
.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing:-.04em}
.hero .lead{color:var(--muted); font-size:1.03rem; margin-top:18px; max-width:56ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.trust-row{display:flex; flex-wrap:wrap; gap:20px 26px; margin-top:28px; padding-top:24px; border-top:1px solid var(--stroke)}
.trust-row div{display:flex; align-items:center; gap:9px; font-size:.87rem; color:var(--muted); font-weight:600}
.trust-row i{color:var(--red)}

/* hero visual */
.hero-visual{position:relative}
.screen{
  border-radius:var(--r-lg); border:1px solid var(--stroke); overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
  transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);
}
.screen-bar{display:flex; align-items:center; gap:6px; padding:11px 15px; border-bottom:1px solid var(--stroke); background:var(--bg-soft)}
.screen-bar i{width:9px; height:9px; border-radius:50%; background:#d3d5dc}
.screen-bar i:nth-child(1){background:#ff5f57} .screen-bar i:nth-child(2){background:#febc2e} .screen-bar i:nth-child(3){background:#28c840}
.screen-bar span{margin-left:8px; font-size:.68rem; color:var(--dim); letter-spacing:.06em; font-weight:700}
.screen-body{padding:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; background:#fff}
.screen-body img{aspect-ratio:2/3; object-fit:cover; border-radius:8px; border:1px solid var(--stroke)}

.float-card{
  position:absolute; display:flex; align-items:center; gap:11px;
  padding:12px 16px; border-radius:14px;
  background:#fff; border:1px solid var(--stroke);
  box-shadow:var(--shadow); animation:bob 5s ease-in-out infinite;
}
.float-card i{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--red-soft); color:var(--red); font-size:.95rem}
.float-card b{display:block; font-size:.92rem; color:var(--ink)} .float-card small{color:var(--dim); font-size:.74rem}
.fc-1{top:-64px; left:-22px}
.fc-2{bottom:-24px; right:-16px; animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Stats (zwarte balk) ---------- */
.stats{padding:0}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--on-dark-line);
}
.stat{background:var(--ink); padding:26px 20px; text-align:center; transition:background .25s}
.stat:hover{background:#1b1b21}
.stat i{font-size:1.05rem; color:var(--red-3); margin-bottom:9px; display:block}
.stat b{display:block; font-size:1.75rem; font-weight:800; letter-spacing:-.03em; color:#fff}
.stat span{color:var(--on-dark-mut); font-size:.82rem; font-weight:600}

/* ---------- Platform grid ---------- */
/* ---------- Logotegels (streamingdiensten + sport) ----------
   Alleen het logo, geen bijschrift. De naam staat in alt/title. */
.platforms-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.sports-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.platform,.sport{
  display:grid; place-items:center; min-height:96px;
  padding:18px 20px; border-radius:var(--r);
  border:1px solid var(--stroke); background:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, box-shadow .25s;
}
.platform:hover,.sport:hover{transform:translateY(-5px); border-color:var(--red-line); box-shadow:var(--shadow-sm)}
.platform img,.sport img{max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain}
.grid-note{text-align:center; margin-top:20px; color:var(--muted); font-size:.88rem}
.grid-note b{color:var(--ink)}

/* ---------- Poster spinner ---------- */
.spinner-sec{overflow:hidden}
.reel{
  position:relative; margin-bottom:14px;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* Geen flex-gap maar margin-right per poster: de track bevat twee identieke
   reeksen en translateX(-50%) valt alleen naadloos samen wanneer elke poster
   zijn eigen tussenruimte meeneemt. */
.reel-track{display:flex; width:max-content; will-change:transform}
.reel-a .reel-track{animation:slide-l 62s linear infinite}
.reel-b .reel-track{animation:slide-r 68s linear infinite}
.reel:hover .reel-track{animation-play-state:paused}
@keyframes slide-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slide-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.poster{
  position:relative; flex:0 0 auto; width:172px; margin-right:14px; border-radius:12px; overflow:hidden;
  border:1px solid var(--stroke); background:#fff;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, box-shadow .3s;
}
.poster img{aspect-ratio:2/3; object-fit:cover; width:100%}
.poster figcaption{
  position:absolute; inset:auto 0 0 0; padding:30px 12px 10px;
  background:linear-gradient(to top,rgba(5,5,8,.94),transparent);
  font-size:.78rem; font-weight:700; color:#fff; opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s;
}
.poster:hover{transform:scale(1.05); border-color:var(--red); box-shadow:0 16px 34px -16px rgba(237,28,36,.6); z-index:2}
.poster:hover figcaption{opacity:1; transform:translateY(0)}
.reel-label{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.reel-label i{color:var(--red)}

/* ---------- Devices ---------- */
.devices-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.device{
  padding:24px 20px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  border:1px solid var(--stroke); background:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, box-shadow .25s;
}
.device::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.device:hover{transform:translateY(-5px); border-color:var(--red-line); box-shadow:var(--shadow-sm)}
.device:hover::before{transform:scaleX(1)}
.device .ico{
  width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  background:var(--red-soft); color:var(--red); font-size:1.15rem; margin-bottom:15px;
}
.device h3{font-size:1rem; margin-bottom:7px}
.device p{color:var(--muted); font-size:.85rem}
.device .apps{margin-top:13px; display:flex; flex-wrap:wrap; gap:6px}
.device .apps span{font-size:.68rem; padding:4px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); background:var(--bg-soft)}

/* ---------- Pricing ---------- */
/* align-items:stretch + flexkolom: alle kaarten even hoog, zodat de
   bestelknop onderaan bij alle drie op dezelfde lijn staat. */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.plan{
  position:relative; border-radius:var(--r-xl); padding:28px 24px 26px;
  border:1px solid var(--stroke); background:#fff;
  display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s, box-shadow .28s;
}
.plan:hover{transform:translateY(-6px); border-color:var(--red-line); box-shadow:var(--shadow)}

/* Uitgelicht pakket: zwart met rode accenten */
.plan.featured{
  background:var(--ink); border-color:var(--ink); color:var(--on-dark);
  box-shadow:0 26px 56px -26px rgba(13,13,15,.6);
}
.plan.featured:hover{border-color:var(--red)}
.plan.featured .plan-tag{color:var(--on-dark-mut)}
.plan.featured h3{color:#fff}
.plan.featured .sub{color:var(--on-dark-mut)}
.plan.featured .price .amt{color:#fff}
.plan.featured .price .cur,.plan.featured .price .per{color:var(--on-dark-mut)}
.plan.featured .feats{border-top-color:var(--on-dark-line)}
.plan.featured .feats li{color:var(--on-dark-mut)}
.plan.featured .feats li.hi{color:#fff}
.plan.featured .permonth{background:rgba(237,28,36,.18); border-color:rgba(237,28,36,.4); color:#ff8085}

.ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:6px 18px; border-radius:999px; background:var(--red); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  box-shadow:var(--shadow-red);
}
.plan-tag{font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:7px}
.plan-tag i{color:var(--red)}
.plan h3{font-size:1.35rem; margin:10px 0 3px}
.plan .sub{color:var(--muted); font-size:.84rem}
.plan .price{display:flex; align-items:flex-start; gap:3px; margin:18px 0 16px}
.plan .price .cur{font-size:1.2rem; font-weight:700; color:var(--muted); margin-top:6px}
.plan .price .amt{font-size:2.8rem; font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--ink)}
.plan .price .per{align-self:flex-end; color:var(--dim); font-size:.82rem; font-weight:600; margin-bottom:6px}
.plan .permonth{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:.79rem; font-weight:700; color:var(--red);
  background:var(--red-soft); border:1px solid var(--red-line);
  padding:6px 12px; border-radius:999px; margin-bottom:20px;
}
/* De bestelknop staat onder de featurelijst; flex:1 duwt hem naar de onderkant. */
.plan .btn{margin-top:22px}
.pay-alt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px; font-size:.8rem; font-weight:600; color:var(--muted);
  transition:color .2s;
}
.pay-alt:hover{color:#25d366}
.plan.featured .pay-alt{color:var(--on-dark-mut)}
.plan.featured .pay-alt:hover{color:#25d366}
.feats{display:grid; gap:9px; align-content:start; flex:1; border-top:1px solid var(--stroke); padding-top:18px}
.feats li{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--muted)}
.feats li i{color:var(--red); font-size:.75rem; margin-top:5px; flex:0 0 auto}
.feats li.hi{color:var(--ink); font-weight:700}

/* lifetime banner */
.lifetime{
  margin-top:22px; border-radius:var(--r-xl); padding:32px 36px; display:grid;
  grid-template-columns:1fr auto; gap:30px; align-items:center;
  background:var(--ink); color:var(--on-dark); border:1px solid var(--ink);
  position:relative; overflow:hidden;
}
.lifetime::after{
  content:""; position:absolute; inset:auto -60px -120px auto; width:340px; height:340px;
  border-radius:50%; background:rgba(237,28,36,.22); filter:blur(70px); pointer-events:none;
}
.lifetime > *{position:relative; z-index:1}
.lifetime .lt-tag{
  display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#ff6b70; margin-bottom:10px;
}
.lifetime h3{font-size:clamp(1.3rem,2.6vw,1.85rem); margin-bottom:9px; color:#fff}
.lifetime h3 .grad{color:#ff6b70}
.lifetime p{color:var(--on-dark-mut); max-width:62ch; font-size:.9rem}
.lt-feats{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.lt-feats span{display:inline-flex; align-items:center; gap:7px; font-size:.77rem; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid var(--on-dark-line); background:rgba(255,255,255,.05)}
.lt-feats i{color:#ff6b70}
.lt-buy{text-align:center; min-width:220px}
.lt-buy .amt{font-size:3rem; font-weight:800; letter-spacing:-.045em; line-height:1; display:block; color:#fff}
.lt-buy small{color:var(--on-dark-mut); font-size:.77rem; display:block; margin:5px 0 16px}

.guarantee{
  margin-top:22px; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:18px; border-radius:var(--r); border:1.5px dashed var(--red-line); background:var(--red-soft);
  text-align:center; flex-wrap:wrap;
}
.guarantee i{font-size:1.35rem; color:var(--red)}
.guarantee b{display:block; color:var(--ink)} .guarantee small{color:var(--muted)}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s}
/* Rastercellen mogen nooit breder worden dan hun kolom (standaard min-width:auto). */
.stats-grid>*,.platforms-grid>*,.sports-grid>*,.devices-grid>*,.price-grid>*,.steps>*,.reviews-grid>*,.contact-grid>*,.f-grid>*{min-width:0}
.step{position:relative; padding:26px 22px; border-radius:var(--r-lg); border:1px solid var(--stroke); background:#fff}
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:20px; right:22px; font-size:2.2rem; font-weight:800;
  color:var(--red); opacity:.16;
}
.step .ico{width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--red-soft); color:var(--red); font-size:1.05rem; margin-bottom:14px}
.step h3{font-size:1rem; margin-bottom:7px}
.step p{color:var(--muted); font-size:.85rem}

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin-inline:auto; display:grid; gap:9px}
.qa{border:1px solid var(--stroke); border-radius:var(--r); background:#fff; overflow:hidden; transition:border-color .25s, box-shadow .25s}
.qa.open{border-color:var(--red-line); box-shadow:var(--shadow-sm)}
.qa button{width:100%; display:flex; align-items:center; gap:15px; padding:17px 20px; text-align:left; font-weight:700; font-size:.94rem; color:var(--ink)}
.qa button .chev{margin-left:auto; color:var(--red); transition:transform .3s; flex:0 0 auto}
.qa.open button .chev{transform:rotate(180deg)}
.qa button > i:first-child{color:var(--red); font-size:.88rem; flex:0 0 auto}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .35s ease}
.qa .ans p{padding:0 20px 18px 50px; color:var(--muted); font-size:.88rem}

/* ---------- Reviews ---------- */
.reviews-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.review{
  border-radius:var(--r-lg); border:1px solid var(--stroke); background:#fff; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s, border-color .25s, box-shadow .25s;
}
.review:hover{transform:translateY(-5px); border-color:var(--red-line); box-shadow:var(--shadow)}
.review .shot{position:relative; overflow:hidden; background:var(--ink)}
.review .shot img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.review:hover .shot img{transform:scale(1.06)}
.review .shot .tag{
  position:absolute; left:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700; color:#fff;
  background:rgba(13,13,15,.62); padding:5px 11px; border-radius:999px;
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
}
.review .shot .tag i{color:#ff6b70; font-size:.7rem}
.review .body{padding:18px; display:flex; flex-direction:column; gap:12px; flex:1}
.review .stars{color:var(--red); font-size:.78rem; display:flex; gap:2px}
.review p{color:var(--muted); font-size:.85rem; flex:1}
.review .who{display:flex; align-items:center; gap:10px; padding-top:13px; border-top:1px solid var(--stroke)}
.review .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--red); color:#fff; font-weight:800; font-size:.82rem}
.review .who b{display:block; font-size:.87rem; color:var(--ink)} .review .who small{color:var(--dim); font-size:.74rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact-card{padding:30px; border-radius:var(--r-xl); border:1px solid var(--stroke); background:#fff}
.contact-card h3{font-size:1.3rem; margin-bottom:10px}
.contact-card > p{color:var(--muted); font-size:.9rem; margin-bottom:20px}
.c-list{display:grid; gap:10px}
.c-item{display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:var(--r); border:1px solid var(--stroke); background:var(--bg-soft); transition:border-color .25s, transform .25s, background .25s}
.c-item:hover{border-color:var(--red); background:#fff; transform:translateX(3px)}
.c-item i{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--red-soft); color:var(--red); font-size:1rem; flex:0 0 auto}
.c-item small{display:block; color:var(--dim); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.c-item b{font-size:.94rem; word-break:break-word; color:var(--ink)}

.form{display:grid; gap:13px}
.field{display:grid; gap:6px}
.field label{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-sm); font:inherit; font-size:.92rem;
  background:#fff; border:1.5px solid var(--stroke); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{resize:vertical; min-height:100px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft)}
.form-note{font-size:.76rem; color:var(--dim); display:flex; align-items:center; gap:7px}
.form-note i{color:var(--red)}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:var(--on-dark); padding:52px 0 0}
.footer .brand{color:#fff}
/* De laatste kolom is breder: daar staan het e-mailadres en de betaallogo's. */
.f-grid{display:grid; grid-template-columns:1.5fr .9fr .9fr 1.6fr; gap:34px; padding-bottom:36px}
.f-col h4{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:15px}
.f-col p{color:var(--on-dark-mut); font-size:.85rem; margin-top:13px; max-width:34ch}
.f-col li{margin-bottom:9px}
.f-col li a{color:var(--on-dark-mut); font-size:.86rem; transition:color .2s; display:inline-flex; align-items:center; gap:8px}
.f-col li a:hover{color:#ff6b70}
.f-col li a i{font-size:.64rem; color:var(--red)}
.socials{display:flex; gap:8px; margin-top:18px}
.socials a{width:38px; height:38px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--on-dark-line); background:rgba(255,255,255,.04); color:var(--on-dark-mut); transition:all .25s}
.socials a:hover{color:#fff; background:var(--red); border-color:var(--red); transform:translateY(-3px)}
/* Betaallogo's staan op witte chips: de merkkleuren komen niet tot hun recht
   op de zwarte footer. */
.pay{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.pay span{
  display:inline-grid; place-items:center;
  height:36px; min-width:50px; padding:0 9px;
  border-radius:8px; background:#fff; border:1px solid rgba(255,255,255,.2);
  transition:transform .2s;
}
.pay span:hover{transform:translateY(-2px)}
/* Gelijke logohoogte, breedte volgt het merk — anders vallen de brede
   woordmerken (PayPal, Visa) weg naast de vierkante iDEAL-ruit. */
.pay img{max-height:22px; max-width:62px; width:auto; height:auto; object-fit:contain}
.f-bottom{border-top:1px solid var(--on-dark-line); padding:18px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.f-bottom p{color:var(--on-dark-mut); font-size:.8rem}
.f-bottom nav{display:flex; gap:20px; flex-wrap:wrap}
.f-bottom nav a{color:var(--on-dark-mut); font-size:.8rem; transition:color .2s}
.f-bottom nav a:hover{color:#ff6b70}

/* ---------- Juridische pagina's ---------- */
.legal-hero{
  padding:calc(var(--nav-h) + 44px) 0 40px; text-align:center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(237,28,36,.10), transparent 70%),
    var(--white);
}
.legal-hero h1{font-size:clamp(1.9rem,4vw,2.9rem)}
.legal-hero .lead{color:var(--muted); font-size:1rem; margin:14px auto 0; max-width:64ch}
.legal-date{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:.78rem; font-weight:700; color:var(--muted);
  background:#fff; border:1px solid var(--stroke); padding:7px 14px; border-radius:999px;
}
.legal-date i{color:var(--red)}

/* 404 */
.err-code{
  font-size:clamp(4rem,12vw,7rem); font-weight:800; line-height:1;
  letter-spacing:-.05em; color:var(--red); opacity:.18; margin-bottom:-6px;
}
.err-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}
.err-links{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:30px; padding-top:24px; border-top:1px solid var(--stroke);
  max-width:640px; margin-inline:auto;
}
.err-links a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--muted); background:#fff; border:1px solid var(--stroke);
  transition:border-color .2s, color .2s, transform .2s;
}
.err-links a:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px)}
.err-links i{color:var(--red); font-size:.8rem}

.legal{
  max-width:820px; margin-inline:auto; padding:36px 40px;
  background:#fff; border:1px solid var(--stroke); border-radius:var(--r-xl);
}
.legal h2{
  display:flex; align-items:center; gap:11px;
  font-size:1.12rem; margin:34px 0 12px; color:var(--ink); scroll-margin-top:96px;
}
.legal h2:first-child{margin-top:0}
.legal h2 i{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:10px; background:var(--red-soft); color:var(--red); font-size:.85rem;
}
.legal p{color:var(--muted); font-size:.92rem; margin-bottom:12px}
.legal ul{display:grid; gap:9px; margin:0 0 14px}
.legal li{
  position:relative; padding-left:24px; color:var(--muted); font-size:.92rem;
}
.legal li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--red);
}
.legal b{color:var(--ink); font-weight:700}
.legal a{color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:var(--red-2)}

.legal-contact{margin-top:40px; padding-top:30px; border-top:1px solid var(--stroke)}
.legal-contact h2{margin-top:0}
.legal-contact-list{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.legal-contact-list a{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:13px 15px; border-radius:var(--r); border:1px solid var(--stroke);
  background:var(--bg-soft); transition:border-color .25s, background .25s, transform .25s;
}
.legal-contact-list a:hover{border-color:var(--red); background:#fff; transform:translateY(-2px)}
.legal-contact-list i{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:11px; background:var(--red-soft); color:var(--red); font-size:.95rem;
}
.legal-contact-list small{display:block; color:var(--dim); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.legal-contact-list b{font-size:.85rem; color:var(--ink); word-break:break-word; font-weight:700}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:800;
  display:flex; align-items:center; gap:11px; padding:13px 20px 13px 15px;
  border-radius:999px; background:#25d366; color:#06210f; font-weight:700; font-size:.9rem;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.75); transition:transform .25s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}
.wa-float i{font-size:1.3rem}
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:999px; border:2px solid #25d366;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1); opacity:.7}100%{transform:scale(1.32); opacity:0}}

/* ---------- Reveal bij scrollen ----------
   Alleen verbergen wanneer JavaScript actief is (html.js). Zonder JS,
   of wanneer het script faalt, blijft alle inhoud gewoon zichtbaar. */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1)}
.js .rv.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
/* Tussen 820 en 1150px staat de navigatie krap naast de bestelknop. */
@media (max-width:1150px){
  .header .wrap{gap:12px}
  .nav a{padding:9px 10px; font-size:.84rem}
  .header-cta .btn{padding:12px 18px; font-size:.86rem}
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .screen{transform:none}
  .platforms-grid{grid-template-columns:repeat(4,1fr)}
  .sports-grid{grid-template-columns:repeat(4,1fr)}
  .devices-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr; gap:28px}
  .price-grid{grid-template-columns:1fr; max-width:500px; margin-inline:auto}
  .lifetime{grid-template-columns:1fr; text-align:center; justify-items:center}
  .lt-feats{justify-content:center}
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:3px;
    padding:14px 18px 20px; background:#fff;
    border-bottom:1px solid var(--stroke); box-shadow:0 18px 40px -24px rgba(13,13,15,.7);
    transform:translateY(-150%); transition:transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .nav.open{transform:none}
  .nav a{padding:13px 16px; border-radius:11px}
  .burger{display:grid; place-items:center}
  .header-cta .btn{display:none}
  /* .nav staat hier position:fixed en valt dus buiten de flexflow; zonder deze
     regel schuift de burgerknop tegen het logo aan in plaats van naar rechts. */
  .header-cta{margin-left:auto}
  section{padding:42px 0}
  .sec-head{margin-bottom:26px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .stat{padding:22px 16px}
  .stat b{font-size:1.5rem}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{padding:24px 20px}
  .legal{padding:26px 22px}
  .legal-contact-list{grid-template-columns:1fr}
  .legal-hero{padding:calc(var(--nav-h) + 30px) 0 30px}
  .float-card{display:none}
  .poster{width:140px}
  .hero{padding:calc(var(--nav-h) + 32px) 0 40px}
}
@media (max-width:560px){
  .platforms-grid{grid-template-columns:repeat(3,1fr)}
  .sports-grid{grid-template-columns:repeat(2,1fr)}
  .devices-grid,.reviews-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .lifetime{padding:26px 20px}
  .wa-float span{display:none}
  .wa-float{padding:15px; right:14px; bottom:14px}
  .btn{padding:13px 20px}
  .screen-body{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rv{opacity:1; transform:none}
}