:root{
  --bg:#0A0A18; --panel:#14142B; --panel2:#1B1B38; --line:#2A2A52; --text:#F4F3FF; --muted:#A9A7CB;
  --pink:#FF3D71; --cyan:#22D3EE; --glow:#ff3d71;
  --head:'Bricolage Grotesque',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:400 1.0625rem/1.6 var(--body);color:var(--text);background:var(--bg)}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.5vw,4rem);font-weight:800;letter-spacing:-.02em}
.big{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);background:rgba(10,10,24,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:.5rem}
.logo{display:flex;align-items:center;gap:.5rem;font:800 1.6rem var(--head);text-decoration:none}
.logo span{color:var(--pink)}
.play{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--pink);position:relative;display:inline-block}
.play::after{content:"";position:absolute;left:.55rem;top:.4rem;border-left:.5rem solid var(--bg);border-top:.35rem solid transparent;border-bottom:.35rem solid transparent}
nav{display:flex;gap:1.25rem}
nav a{text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent;color:var(--muted)}
nav a:hover,nav a[aria-current]{color:var(--text);border-color:var(--pink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.btn{display:inline-block;background:var(--pink);color:var(--bg);font-weight:700;padding:.75rem 1.3rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:var(--body);text-align:center}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid #4a4a82}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,3rem);
  background:radial-gradient(48rem 26rem at 78% 45%,color-mix(in srgb,var(--glow) 38%,transparent),transparent 70%),var(--bg);transition:background .6s}
.hero h1{max-width:14ch}
.hero p{font-size:1.2rem;color:var(--muted);max-width:46ch}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.tv{max-width:520px;width:100%;justify-self:center}
.screen{--a:#ff3d71;--b:#7a1fff;position:relative;aspect-ratio:16/9;border:10px solid #1d1d3a;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 70px color-mix(in srgb,var(--a) 55%,transparent)}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);pointer-events:none}
.screen.zap{animation:zap .45s ease-out}
@keyframes zap{0%{filter:brightness(2.4) contrast(1.5);transform:scaleY(.96) skewX(2deg)}100%{filter:none;transform:none}}
.live{position:absolute;top:.8rem;left:.8rem;background:#ff1744;color:#fff;font:700 .75rem var(--body);padding:.15rem .5rem;border-radius:4px;letter-spacing:.06em}
.ch{position:absolute;top:.8rem;right:.8rem;font:700 .85rem var(--head);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.scene{position:absolute;left:1rem;bottom:1.6rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.scene strong{display:block;font:800 clamp(1.5rem,3.5vw,2.3rem) var(--head)}
.scene small{font-size:.95rem;opacity:.95}
.bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.25)}
.bar i{display:block;height:100%;width:0;background:#fff;animation:fill 3.2s linear forwards}
@keyframes fill{to{width:100%}}
.stand{width:34%;height:12px;margin:0 auto;background:#1d1d3a;border-radius:0 0 12px 12px}

/* marquee */
.rows{display:grid;gap:.8rem;padding:1rem 0 2.5rem;overflow:hidden}
.track{overflow:hidden}
.slide{display:flex;gap:.8rem;width:max-content}
.slide.left{animation:l 45s linear infinite}
.slide.right{animation:r 50s linear infinite}
@keyframes l{to{transform:translateX(-50%)}}
@keyframes r{from{transform:translateX(-50%)}to{transform:none}}
.rows:hover .slide{animation-play-state:paused}
.tile{width:210px;height:118px;border-radius:12px;background:linear-gradient(135deg,var(--a),var(--b));display:flex;align-items:flex-end;padding:.8rem;font:800 1.25rem var(--head);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45);flex:none}

/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:3rem clamp(1rem,4vw,2rem)}
.narrow{max-width:680px}
.lead{color:var(--muted);margin-top:-.25rem;margin-bottom:2rem}
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.steps li{display:flex;gap:1rem}
.steps b{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--pink);color:var(--bg);display:grid;place-items:center;font:800 1.2rem var(--head)}
.steps h3{font-size:1.25rem;margin-bottom:.2em}
.steps p{margin:0;color:var(--muted)}
.band{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-bottom:3rem}
.band p{margin:0;color:var(--muted)}

/* cards */
.grid{display:grid;gap:1.25rem}
.plans{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.devices{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.4rem;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:#4a4a82}
.card h2{font-size:1.35rem;margin:0}
.card p{color:var(--muted);margin:0 0 .5rem}
.card .btn{margin-top:auto}
.card.hl{border:2px solid var(--pink);box-shadow:0 0 40px rgba(255,61,113,.25)}
.badge{position:absolute;top:-.8rem;left:1rem;background:var(--pink);color:var(--bg);font-size:.8rem;font-weight:700;padding:.15rem .7rem;border-radius:99px}
.price{font:800 2.1rem var(--head)}
.sub{color:var(--muted);font-size:.95rem}
.brand{font-weight:700;color:var(--cyan)}
.ticks{list-style:none;padding:0;margin:.6rem 0 1rem;color:var(--muted);font-size:.95rem}
.ticks li::before{content:"✓ ";color:var(--cyan);font-weight:700}

/* forms */
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.3rem;font-weight:500}
input,textarea,select{font:inherit;color:var(--text);padding:.7rem .85rem;border:1px solid #3a3a6a;border-radius:8px;background:var(--panel)}
select option{background:var(--panel)}
.ok{background:#0f2f2c;border:1px solid #1d6b62;padding:1rem;border-radius:8px}
.error{background:#3a1220;border:1px solid #8a2a45;color:#ffd1dc;padding:.8rem 1rem;border-radius:8px;margin:0 0 .6rem}

/* landenkiezer */
.picker{border:1px solid var(--line);border-radius:12px;padding:1rem;margin:0;background:var(--panel)}
.picker legend{font:700 1.05rem var(--head);padding:0 .4rem}
.seg{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.seg label{display:block;position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;padding:.6rem 1rem;border:1.5px solid #3a3a6a;border-radius:99px;cursor:pointer;font-weight:700}
.seg input:checked+span{background:var(--pink);border-color:var(--pink);color:var(--bg)}
.seg input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
#pick-panel{display:grid;gap:.6rem;margin-top:.5rem}
#pick-panel[hidden]{display:none}
.pick-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.95rem}
.pick-tools span{margin-right:auto;color:var(--cyan);font-weight:700}
.pick-tools button{background:var(--panel2);color:var(--text);border:1px solid #3a3a6a;border-radius:6px;padding:.3rem .7rem;cursor:pointer;font:inherit;font-size:.9rem}
.pick-tools button:hover{border-color:var(--pink)}
#c-list{max-height:320px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.25rem;border:1px solid var(--line);border-radius:8px;padding:.4rem}
.c-item{display:flex!important;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:6px;cursor:pointer;font-weight:400!important;font-size:.97rem}
.c-item[hidden]{display:none!important}
.c-item:hover{background:var(--panel2)}
.c-item input{accent-color:var(--pink);width:1.05rem;height:1.05rem;padding:0}
.c-item img{border-radius:2px;object-fit:cover;background:var(--panel2)}

/* footer + chat */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.5rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
#chat-toggle{position:fixed;right:1rem;bottom:1rem;z-index:30;background:var(--cyan);color:var(--bg);border:0;border-radius:99px;padding:.8rem 1.2rem;font:700 1rem var(--body);cursor:pointer;box-shadow:0 4px 18px rgba(34,211,238,.35)}
#chat{position:fixed;z-index:31;right:1rem;bottom:1rem;width:min(360px,calc(100vw - 2rem));height:min(480px,calc(100vh - 2rem));background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.6)}
#chat[hidden]{display:none}
.chat-head{background:var(--panel2);padding:.8rem 1rem;display:flex;justify-content:space-between;font-weight:700}
.chat-head button{background:none;border:0;color:var(--text);font-size:1.4rem;cursor:pointer;line-height:1}
#chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:85%;padding:.5rem .8rem;border-radius:12px;font-size:.97rem}
.msg.bot{background:var(--panel2);align-self:flex-start}
.msg.me{background:var(--pink);color:var(--bg);align-self:flex-end}
#chat-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line)}
#chat-form input{flex:1;min-width:0}
#chat-form button{background:var(--cyan);color:var(--bg);border:0;border-radius:8px;padding:0 .9rem;font-weight:700;cursor:pointer}

@media (max-width:820px){.hero{grid-template-columns:1fr}.hero h1{max-width:none}}
@media (prefers-reduced-motion:reduce){.slide,.screen.zap,.bar i{animation:none}.bar i{width:100%}.card{transition:none}}

/* ===== v3: logo, accounts, bestellen, beheer ===== */
.logo img{display:block;height:40px;width:auto}
.logo span{color:var(--text)}
.inl{display:inline;margin:0}
.linkbtn{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:.25rem 0;border-bottom:2px solid transparent}
.linkbtn:hover{color:var(--text);border-color:var(--pink)}
.mt{margin-top:2.5rem}
.foot-brand{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-brand img{height:auto}
.btn.sm{padding:.45rem .9rem;font-size:.95rem}
.btn.off{background:var(--panel2);color:var(--muted);cursor:default;margin-top:auto}
.btn.sm.ghost{background:transparent;color:var(--text);border:1.5px solid #4a4a82}
code{background:var(--panel2);padding:.1rem .4rem;border-radius:4px;font-size:.92em}

.photo{background:#fff;border-radius:10px;aspect-ratio:4/3;display:grid;place-items:center;padding:.6rem;margin-bottom:.6rem}
.photo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.photo.small{width:130px;aspect-ratio:1;margin:0;flex:none}
.prodline{flex-direction:row;align-items:center;gap:1.2rem;margin-bottom:1.5rem}
.prodline:hover{transform:none}

.line{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.line.total{border:0;font-size:1.15rem;padding-top:.7rem}
.ref{font:800 2rem var(--head);letter-spacing:.06em;background:var(--panel);border:1px dashed var(--pink);border-radius:10px;padding:.5rem 1rem;display:inline-block;margin:.2rem 0 1rem}
.banks{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:1rem 0}
.banks .card:hover{transform:none}
.banks h3{margin:0 0 .4rem;color:var(--cyan)}
.acct{font:700 1.15rem var(--head);word-break:break-all}

.pill{display:inline-block;padding:.12rem .7rem;border-radius:99px;font-size:.85rem;font-weight:700;background:var(--panel2);color:var(--text)}
.st-nieuw{background:#4a3a0f;color:#ffd978}
.st-betaald{background:#0e3b45;color:#8cecff}
.st-verzonden{background:#2c2760;color:#c3bcff}
.st-afgerond,.st-actief{background:#0f3a2c;color:#8af0c0}
.st-geannuleerd{background:#33333f;color:#b9b9c9}
.st-verlopen{background:#4a1a2a;color:#ffb3c6}

.subs{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.subs .btn{margin-top:.6rem;align-self:flex-start}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.97rem}
.tbl th,.tbl td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{color:var(--muted);font-weight:500;font-size:.9rem}

/* beheer */
.wrap.wide{max-width:1200px}
.admin .card:hover{transform:none;border-color:var(--line)}
.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{text-decoration:none;gap:.1rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem}
.filters a{padding:.3rem .9rem;border:1px solid #3a3a6a;border-radius:99px;text-decoration:none;font-size:.95rem}
.filters a.on,.filters a:hover{background:var(--pink);border-color:var(--pink);color:var(--bg)}
.orow{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.orow-main{display:grid;gap:.15rem;min-width:0;flex:1 1 380px}
.inl-form{display:flex;gap:.5rem;align-items:center}
.arow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;align-items:end;margin-bottom:.8rem}
.arow label{display:grid;gap:.25rem;font-size:.9rem;color:var(--muted)}
.arow label.wide{grid-column:span 2}
.arow label.chk{display:flex;align-items:center;gap:.5rem;color:var(--text)}
.arow input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--pink);padding:0}
@media (max-width:560px){.arow label.wide{grid-column:auto}.prodline{flex-direction:column;align-items:flex-start}}

/* ===== v4: valuta, chat ===== */
.cur{display:inline-flex;border:1px solid #3a3a6a;border-radius:99px;overflow:hidden;margin-left:.5rem}
.cur a{padding:.2rem .7rem;font-size:.85rem;font-weight:700;border:0;color:var(--muted)}
.cur a:hover{color:var(--text)}
.cur a[aria-current]{background:var(--pink);color:var(--bg)}
.price.sm{font-size:1.4rem;display:block}
.warn{color:#ffd978}
.msg.wait{opacity:.6}

/* ===== v5: winkelwagen, video in tv ===== */
.cartlink .count{display:inline-block;min-width:1.35rem;padding:0 .35rem;border-radius:99px;background:var(--pink);color:var(--bg);font-size:.8rem;text-align:center;line-height:1.35rem}
.cartline{flex-direction:row;align-items:center;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap}
.cartline:hover{transform:none}
.cl-main{flex:1 1 220px;min-width:0;display:grid;gap:.1rem}
.cl-main a{color:var(--cyan)}
.cl-price{display:grid;justify-items:end;gap:.1rem;margin-left:auto}
.qty{display:grid;gap:.15rem;font-size:.85rem;color:var(--muted)}
.qty input{width:4.5rem;padding:.4rem .5rem}
.cl-actions{display:flex;justify-content:flex-end;margin-bottom:1rem}
.cartform .photo.small{width:80px}
.addform{margin-top:auto}
.addform .btn{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000}
.screen.vid::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 45%,rgba(0,0,0,.6))}
.screen::after{z-index:1}
.screen .live,.screen .ch,.screen .scene,.screen .bar{z-index:2}
.screen.vid .live{display:none}
.screen.vid .bar i{animation:none;transition:none}
.tv-ctl{position:absolute;top:.6rem;left:.6rem;z-index:3;display:flex;gap:.4rem}
.tv-ctl button{width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:rgba(10,10,24,.65);color:#fff;font-size:.85rem;cursor:pointer;display:grid;place-items:center}
.tv-ctl button:hover{background:rgba(10,10,24,.9)}

/* ===== v6 ===== */
.notice{padding:.6rem clamp(1rem,4vw,3rem);text-align:center;font-weight:700;font-size:.97rem}
.notice-storing{background:#F2B134;color:#10222E}
.notice-info{background:#22D3EE;color:#0A0A18}
.cred{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Consolas,monospace;background:var(--panel2);border:1px dashed #4a4a82;border-radius:8px;padding:.6rem .8rem;font-size:.95rem}
.proofs{padding-left:1.1rem;margin:.3rem 0 1rem}
.form label.chk,label.chk{display:flex;align-items:center;gap:.5rem;font-weight:400}
label.chk input{width:1.1rem;height:1.1rem;accent-color:var(--pink);padding:0}
input[type=file]{padding:.5rem}
.guide{margin-bottom:.8rem;gap:.6rem}
.guide:hover{transform:none}
.guide summary{cursor:pointer;font-size:1.1rem;list-style-position:inside}
.guide[open] summary{margin-bottom:.4rem}
.gsteps{margin:.6rem 0 0;padding-left:1.4rem;display:grid;gap:.45rem}
.gsteps li::marker{color:var(--pink);font-weight:700}
.vframe{position:relative;aspect-ratio:16/9;margin:.6rem 0;border-radius:10px;overflow:hidden;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfile{width:100%;border-radius:10px;margin:.6rem 0;background:#000}
.repcard{margin-bottom:1.2rem;gap:.8rem}
.repcard:hover{transform:none}
.repstats{display:flex;gap:2rem;flex-wrap:wrap}
.repstats div{display:grid}
.repstats b{font:800 1.4rem var(--head)}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:#4a4a82;stroke-width:1}
.chart .axis{fill:var(--muted);font:12px var(--body)}
.chart .val{fill:var(--text);font:700 12px var(--body)}
.chart .bar{fill:var(--pink)}
.chart .bar:hover{fill:var(--cyan)}