/* GGPrepaid · site (startpagina en volgende pagina's). Huisstijl: rood #e21e26, zwart #1c1c1c, wit, Roboto. */
:root{
  --red:#e21e26; --red-d:#a3141a; --ink:#1c1c1c; --ink-2:#2a2a2a; --mut:#6d6d6d;
  --paper:#ffffff; --soft:#f4f4f4; --line:#e6e6e6;
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1);
}
/* Roboto zelf gehost (variabel lettertype 100–900, OFL); geen aanvragen naar Google Fonts */
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:Roboto;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--red);margin:0 0 14px}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(34px,4.6vw,58px);font-weight:900}
.red{color:var(--red)}
p,li,summary,.intro{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.intro{max-width:46ch;color:var(--ink-2);font-size:18px;margin:18px 0 0}
/* patroon als masker: elke kleur mogelijk, scherp op elk scherm */
.pattern{position:absolute;inset:0;pointer-events:none;background:currentColor;-webkit-mask:url(/img/pattern-lines.webp) center/cover no-repeat;mask:url(/img/pattern-lines.webp) center/cover no-repeat}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Roboto;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;text-decoration:none;padding:11px 20px;border-radius:99px;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.sm{padding:7px 15px;font-size:13px}
.btn svg{width:16px;height:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,transform .4s var(--ease)}
.top.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.top.hide{transform:translateY(-100%)}
.top .wrap{display:flex;align-items:center;gap:26px;height:68px;max-width:none;padding:0 clamp(16px,3vw,48px)}
.logo{width:160px;flex:none}
.nav{display:flex;gap:24px;margin-left:auto;font-weight:500;font-size:15px}
.nav a{text-decoration:none;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);transition:right .3s var(--ease)}
.nav a:hover::after{right:0}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font-family:Roboto;font-weight:500;font-size:15px;padding:8px 4px}
.lang-btn svg{width:12px;height:12px;transition:transform .2s}
.lang-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.25);min-width:84px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s var(--ease)}
.lang ul.open{opacity:1;transform:none;pointer-events:auto}
.lang li a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;text-decoration:none;font-size:15px;font-weight:500}
.lang li a:hover{background:var(--soft)}
.lang li a[aria-current]{color:var(--red)}
/* GGPoker.be: volledig logo, wit op een zwarte headerknop en zwart op een witte zwevende knop rechtsonder */
.btn.gg-btn{padding:13px 20px}
.gg-btn img{height:17px;width:auto;display:block}
.gg-float{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;align-items:center;padding:14px 20px;border-radius:99px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.gg-float img{height:17px;width:auto;display:block}
.gg-float:hover{transform:translateY(-3px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;padding:110px 0 50px;display:flex;align-items:center;background:#fff;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(40px,4.9vw,74px);font-weight:900}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em;white-space:nowrap}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:up .9s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.08s}
.hero h1 .line:nth-child(3)>span{animation-delay:.16s}
@keyframes up{to{transform:none}}
.hero .intro{font-size:20px;max-width:32ch;margin-top:24px;opacity:0;animation:fade .8s .45s forwards}
.hero .row{opacity:0;animation:fade .8s .6s forwards}
@keyframes fade{to{opacity:1}}
.chips{display:flex;gap:8px;margin-top:30px;align-items:center;flex-wrap:wrap}
.chips small{font-family:Roboto;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--mut);margin-right:6px}
.chip{font-family:Roboto;font-weight:700;font-size:15px;border:2px solid var(--ink);background:#fff;border-radius:99px;height:40px;padding:0 16px;cursor:pointer;transition:.2s}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.chip:hover{transform:translateY(-2px)}

.stage{position:relative;height:min(620px,72vh);perspective:1400px;user-select:none;-webkit-user-select:none}
.deck{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out}
.pcard{position:absolute;left:50%;top:50%;width:min(290px,54%);aspect-ratio:638/1000;margin:0;transition:transform .9s var(--ease);cursor:pointer;will-change:transform;transform:translate(-50%,-50%)}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.pcard.flipped .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face img{width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.22)) drop-shadow(0 0 1px rgba(0,0,0,.25))}
.face.back{transform:rotateY(180deg)}
.pcard:not(.flipped) .face.back,.pcard.flipped .face:not(.back){pointer-events:none}
.pcard:not(.flipped) .scratch canvas{cursor:pointer}
.pcard{opacity:1;transition:transform .9s var(--ease),opacity .45s ease}
.deck:not(.dealt) .pcard{opacity:0;transform:translate(-50%,-38%) scale(.86)!important;transition:none}
.pcard .scratch{container-type:inline-size;position:absolute;left:10.34%;width:79.31%;top:46.1%;height:7.6%;border-radius:6px;overflow:hidden}
.scratch .code{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;font-family:Roboto;font-weight:800;letter-spacing:.06em;font-size:6.4cqw;white-space:nowrap;font-variant-numeric:tabular-nums}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.hint{position:absolute;right:2%;bottom:7%;z-index:5;background:var(--ink);color:#fff;font-family:Roboto;font-weight:700;font-size:13px;letter-spacing:.04em;padding:8px 14px;border-radius:99px;display:flex;gap:8px;align-items:center;animation:bob 2.4s ease-in-out infinite;transition:opacity .4s}
.hint.done{opacity:0;pointer-events:none}
@keyframes bob{50%{transform:translateY(-6px)}}
.toast{position:absolute;left:50%;bottom:1%;transform:translate(-50%,20px);opacity:0;z-index:6;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 20px 40px -12px rgba(0,0,0,.3);font-size:15px;max-width:330px;text-align:center;transition:.5s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--red)}

/* Sectiemarges: boven 200 / onder 240 (gsm 110 / 132). Bewust ongelijk: de witruimte boven een grote titel
   telt optisch mee, zo lijken boven en onder even groot (feedback Mathias 05/10). */
/* ---------- vier redenen ---------- */
.usps{padding:200px 0 240px;background:var(--soft);position:relative;overflow:clip}
.usps .wrap,.faq .wrap{position:relative}
.usps .head{margin-bottom:50px}
.ugrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usp{position:relative;border:2px solid var(--ink);border-radius:var(--r);padding:24px 22px 0;overflow:hidden;background:#fff;min-height:400px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.usp:hover{transform:translateY(-8px);box-shadow:8px 8px 0 var(--red)}
.usp .n{font-family:Roboto;font-weight:800;color:var(--red);font-size:15px}
.usp h3{font-size:clamp(24px,2.3vw,31px);font-weight:900;margin:8px 0 10px}
.usp p{margin:0;color:var(--ink-2)}
.usp .art{margin:auto -22px 0;padding-top:18px;height:236px}
/* cover snijdt enkel de witte zijkanten weg; de bovenkant blijft altijd zichtbaar, ook bij hover */
.usp .art img{width:100%;height:calc(100% + 12px);object-fit:cover;object-position:50% 0;transition:transform .6s var(--ease)}
.usp:hover .art img{transform:translateY(-12px)}
.usp .art img.zoom{object-position:38% 0;transform:scale(1.35);transform-origin:28% 10%}
.usp:hover .art img.zoom{transform:translateY(-12px) scale(1.35)}

/* ---------- stappen ---------- */
.how{background:var(--ink);color:#fff;padding:200px 0 240px;position:relative;overflow:clip}
.how .pattern{color:#fff;opacity:.09}
.how .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'head device' 'step device';column-gap:70px;align-items:center}
.how-head{grid-area:head;align-self:end}
.stepper{grid-area:step;align-self:start;margin-top:40px;border-top:1px solid rgba(255,255,255,.16);padding-top:30px}
.how-device{grid-area:device}
.stepper .num{font-family:Roboto;font-weight:800;font-size:15px;letter-spacing:.06em;color:#9a9a9a}
.stepper .num b{color:var(--red);font-size:44px;letter-spacing:0;margin-right:6px;vertical-align:-6px}
.step-text{min-height:118px;margin-top:10px}
.step-text h3{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.step-text p{margin:8px 0 0;color:#bdbdbd}
.step-text.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateX(18px)}}
.ctrl{display:flex;align-items:center;gap:14px;margin-top:22px}
.arrow{width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s}
.arrow:hover:not(:disabled){background:#fff;color:var(--ink)}
.arrow:disabled{opacity:.3;cursor:default}
.arrow.next{background:var(--red);border-color:var(--red)}
.arrow.next:hover:not(:disabled){background:#fff;border-color:#fff}
.arrow svg{width:18px;height:18px}
.dots{display:flex;gap:6px;margin-left:8px}
.dots button{width:28px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.22);cursor:pointer;padding:0}
.dots button.on{background:var(--red)}
.device{width:min(380px,100%);margin-left:auto;background:#fff;color:var(--ink);border-radius:34px;padding:14px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);border:8px solid #000}
.screen{border-radius:22px;background:var(--soft);height:440px;padding:22px;position:relative;overflow:hidden}
.screen .bar{display:flex;justify-content:space-between;align-items:center;font-family:Roboto;font-weight:700;font-size:14px}
.pane{position:absolute;inset:66px 22px 22px;opacity:0;transform:translateX(24px);transition:.5s var(--ease);display:flex;flex-direction:column;gap:12px;pointer-events:none}
.pane.on{opacity:1;transform:none}
.pane.out{transform:translateX(-24px)}
.ui-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-family:Roboto;font-weight:700}
.ui-field{background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px;font-weight:500;min-height:55px}
.ui-field.focus{border-color:var(--ink)}
.ui-btn{background:var(--ink);color:#fff;border-radius:12px;padding:13px;text-align:center;font-family:Roboto;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ui-btn.red{background:var(--red)}
.pane.on .pulse{animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(226,30,38,.18)}}
.ui-method{display:flex;align-items:center;justify-content:space-between;background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:500}
.pane.on .ui-method.pick{animation:pick .5s .35s both}
@keyframes pick{to{border-color:var(--red);box-shadow:0 0 0 4px rgba(226,30,38,.12)}}
.ui-method img{height:15px;width:auto}
.ui-code{font-family:Roboto;font-weight:800;letter-spacing:.14em;font-size:19px;min-height:27px}
.ui-code .caret{display:inline-block;width:2px;height:21px;background:var(--red);vertical-align:-4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ui-count{font-family:Roboto;font-weight:800;font-size:64px;line-height:1}
.ui-ok{width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-bottom:6px;transform:scale(0)}
.pane.on .ui-ok{animation:pop .5s .1s var(--ease) forwards}
@keyframes pop{to{transform:none}}
.tap{position:absolute;left:0;top:0;margin:-17px 0 0 -17px;width:34px;height:34px;border-radius:50%;background:rgba(226,30,38,.25);border:2px solid var(--red);opacity:0;pointer-events:none}
.pane.on .tap{animation:tap 1.1s var(--tap-delay,.55s) var(--ease) both}
@keyframes tap{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1)}}

/* ---------- geschenk ---------- */
.gift{position:relative;padding:200px 0 240px;background:#fff;overflow:hidden}
.gift .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;z-index:1}
.gift .intro{font-size:19px}
.name-field{display:flex;margin-top:24px;max-width:300px}
.gift .name-field + .chips{margin-top:12px}
.name-field input{flex:1;min-width:0;height:44px;border:2px solid var(--ink);border-radius:99px;padding:0 18px;font:inherit;font-size:16px;background:#fff;outline:0}
.name-field input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(226,30,38,.12)}
.gift-card{margin:0;display:flex;justify-content:center;perspective:1200px}
.gift-stack{position:relative;width:min(300px,70%);transform:rotate(6deg);perspective:1200px}
.gift-stack img{width:100%}
/* cadeaulabel: hangt met een rood touwtje aan de kaart en toont de naam die je intypt; één SVG-vorm, dus overal een rand */
.gift-stack{margin-right:24%}
.tag{--u:2.2px;position:absolute;left:86%;top:-12%;width:74%;aspect-ratio:240/96;pointer-events:none;z-index:2;transform:rotate(-8deg);transform-origin:1.7% 92%;animation:sway 4s ease-in-out infinite}
.tag-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18))}
.tag-text{position:absolute;left:calc(var(--u) * 49.2);top:12%;bottom:12%;display:flex;flex-direction:column;justify-content:center;min-width:0}
.tag-text small{font-size:calc(var(--u) * 4.6);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mut);line-height:1.2}
.tag-text b{font-size:calc(var(--u) * 9);font-weight:900;color:var(--red);line-height:1.15;white-space:nowrap}
.tag-text b.pop{animation:pop2 .35s var(--ease)}
@keyframes sway{50%{transform:rotate(-3deg)}}
@keyframes pop2{40%{transform:scale(1.12)}}
.gift-card img{filter:drop-shadow(0 30px 34px rgba(0,0,0,.25)) drop-shadow(0 0 1px rgba(0,0,0,.25));transition:transform .5s var(--ease)}
.gift-card img.out{transform:translateY(-26px) rotateY(90deg);transition:transform .22s cubic-bezier(.5,0,.9,.4)}
.gift-card img.in{transform:translateY(-26px) rotateY(-90deg);transition:none}
.gift-card:hover img{transform:translateY(-6px)}

/* ---------- faq ---------- */
.faq{padding:200px 0 240px;background:var(--soft);position:relative;overflow:clip}
.faq .tools{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:34px 0 18px}
.search{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:99px;height:44px;padding:0 18px;box-sizing:border-box;background:#fff;flex:1 1 340px}
.search input{border:0;outline:0;font:inherit;font-size:16px;flex:1;min-width:0;background:transparent}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cat{font-family:Roboto;font-weight:700;font-size:14px;border:2px solid var(--line);background:#fff;border-radius:99px;height:44px;padding:0 16px;cursor:pointer}
.cat[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.qcount{font-size:14px;color:var(--mut);margin:0 0 6px}
details{border-bottom:1.5px solid var(--line)}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:700;font-size:19px;letter-spacing:-.01em}
details summary::-webkit-details-marker{display:none}
details summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);position:relative;transition:.3s var(--ease)}
details summary .pm::before,details summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:.3s var(--ease)}
details summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm{background:var(--red);border-color:var(--red)}
details[open] summary .pm::before,details[open] summary .pm::after{background:#fff}
details[open] summary .pm::after{transform:rotate(0)}
details .a{color:var(--ink-2);padding:0 60px 24px 0;font-size:17px;max-width:900px}
details .a p{margin:0 0 10px}
details:hover summary{color:var(--red)}
mark{background:rgba(226,30,38,.16);color:inherit;border-radius:3px}
.empty{padding:30px 0;color:var(--mut);display:none}

/* ---------- contact ---------- */
.contact{background:var(--red);color:#fff;padding:200px 0 240px;position:relative;overflow:hidden}
.contact .pattern{color:#fff;opacity:.3}
.contact .wrap{position:relative}
.contact h2{font-size:clamp(40px,5.6vw,76px)}
.contact .intro{color:#fff;opacity:.94;font-size:19px}
.contact .btn{background:#fff;color:var(--ink);border-color:#fff}
.contact .btn.ghost{background:transparent;color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-alt{margin:22px 0 0;font-size:17px}
.contact-alt a{color:#fff;font-weight:700}
.form{display:grid;gap:14px;background:#fff;color:var(--ink);border-radius:var(--r);padding:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.form label{display:grid;gap:6px}
.form label span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.form input,.form textarea{font:inherit;font-size:16px;border:2px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff;color:var(--ink);outline:0;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-size:13px;color:var(--mut)}
.form-note a{color:var(--ink)}
.form-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact .form .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.form-status{font-size:14px;font-weight:500}
.form-status.err{color:var(--red)}
.form.busy{opacity:.7;pointer-events:none}
.form .bad{border-color:var(--red)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#cfcfcf;padding:70px 0 40px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1fr auto auto;gap:40px 96px}
footer .logo{width:180px;margin-bottom:22px}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--red)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer h4{font-family:Roboto;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:#8a8a8a;margin:0 0 16px}
.age{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;border:2px solid #fff;color:#fff;font-family:Roboto;font-weight:800;font-size:17px;margin-right:14px;flex:none}
.rg{display:flex;align-items:center}
.rg span:last-child{max-width:46ch}
.legal{grid-column:1/-1;border-top:1px solid #333;padding-top:24px;margin-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#8a8a8a;font-size:13px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- secties schermhoog (desktop); site.js scrolt vloeiend per sectie ---------- */
@media (min-width:1001px) and (min-height:640px){
  .hero,main>section{min-height:100vh}
  main>:is(.usps,.how,.gift,.faq,.contact){display:flex;flex-direction:column;justify-content:center;padding:96px 0 64px}
  main>section>.wrap{width:100%}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .wrap,.gift .wrap,.contact-grid{grid-template-columns:1fr}
  .contact-grid{gap:36px}
  .hero h1{font-size:clamp(40px,8vw,64px)}
  .gift-card{margin-top:40px}
  .stage{height:520px}
  .ugrid{grid-template-columns:1fr 1fr}
  .how .wrap{grid-template-columns:1fr;grid-template-areas:'head' 'device' 'step';row-gap:28px}
  .stepper{margin-top:0}
  .device{margin:0 auto}
  .gift .wrap{gap:50px}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .top .wrap{gap:14px}
  .logo{width:132px}
  .top .btn{display:none}
  .hero{padding-top:96px}
  .stage{height:430px}
  .pcard{width:50%}
  .ugrid{grid-template-columns:1fr}
  .usp{min-height:350px}
  .how,.usps,.faq,.contact,.gift{padding:110px 0 132px}
  /* geschenk: geen naam en label op gsm, kaart gecentreerd; waardekeuze op een eigen lijn */
  .name-field,.tag{display:none}
  .gift-stack{width:56%;margin:0 auto}
  .gift .chips{gap:6px}
  .gift .chip{height:38px;padding:0 12px;font-size:14px}
  /* stappen: knoppen dicht onder het toestel, alles op één schermhoogte */
  .how .wrap{row-gap:14px}
  .stepper{padding-top:14px}
  .stepper .num b{font-size:34px;vertical-align:-4px}
  .step-text{min-height:84px;margin-top:4px}
  .step-text h3{font-size:20px}
  .ctrl{margin-top:10px}
  /* faq-filters op één lijn; past het niet, dan veeg je opzij */
  .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none;padding:0 13px;font-size:13px}
  /* footer: GGPrepaid en Info naast elkaar onder het logo */
  footer .wrap{grid-template-columns:1fr 1fr;gap:32px 24px}
  footer .wrap > div:first-child{grid-column:1/-1}
  .screen{height:290px;padding:16px}
  .pane{inset:52px 16px 16px;gap:9px}
  .ui-field,.ui-method,.ui-btn{padding:10px 12px;font-size:14px}
  .ui-field{min-height:46px}
  .ui-count{font-size:48px}
  .hero h1 .line{white-space:normal}
  details .a{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .line>span{transform:none}.hero .intro,.hero .row,.chips{opacity:1}
  .rv,.ui-ok{opacity:1;transform:none!important}
}