/* ========================================================================= Gatcha — gedeelde basis-stylesheet voor de game- (/) en insights-pagina (/insights/) Merk-tokens, typografie, header/footer en alle sectie-stijlen staan hier, zodat beide pagina's gegarandeerd identiek ogen en op één plek te onderhouden zijn. Fonts (Montserrat / Rubik / Permanent Marker) worden via Google Fonts in de van elke pagina geladen. ========================================================================= */ :root{ /* Merkkleuren — overgenomen uit de live gatcha.eu theme-tokens */ --primary:#5170ff; /* paars/blauw (blue-dark) */ --primary-dk:#3a4fd6; /* donkerder voor hover */ --primary-lt:#E9ECFF; /* lichte paarse tint voor achtergronden */ --accent:#c1ff72; /* signature lime-groen */ --accent-dk:#7fae1b; /* donkerder lime voor leesbare tekst-accenten */ --dark:#191919; /* merk-zwart (header, footer, donkere secties) */ --dark-soft:#23262f; --text:#191919; --muted:#5b6573; --light:#F6F7FB; --border:#E6E8F0; --warm:#FFFCF5; --danger:#EF4444; --warn:#F59E0B; --success:#16A34A; } /* Per-pagina accent: game = lime, insights = paars. Eén variabele i.p.v. dubbele regels. */ .page-game{--page-accent:var(--accent);--page-accent-ink:var(--dark);--page-accent-strong:var(--accent-dk);--page-accent-soft:#EEFFD0} .page-insights{--page-accent:var(--primary);--page-accent-ink:#fff;--page-accent-strong:var(--primary);--page-accent-soft:#E9ECFF} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text);background:#fff;line-height:1.6;font-size:16px;overflow-x:hidden} img{max-width:100%;display:block} h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{font-family:'Rubik',sans-serif} section[id]{scroll-margin-top:84px} /* ===== Buttons (pill — zoals live gatcha.eu) ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.74rem 1.5rem;border-radius:9999px; font-family:'Montserrat',sans-serif;font-weight:800;font-size:.95rem;text-decoration:none;border:2px solid transparent; cursor:pointer;transition:filter .15s,background .15s,color .15s;line-height:1.15} .btn-primary{background:var(--page-accent);color:var(--page-accent-ink);border-color:var(--page-accent)} .btn-primary:hover{filter:brightness(.94)} .btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-secondary:hover{background:var(--primary);color:#fff} .btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)} .btn-dark:hover{background:#000} .btn-cta{background:var(--accent);color:var(--dark);border-color:var(--accent)} .btn-cta:hover{filter:brightness(.95)} /* ===== Site header (merk-gematcht, donker) ===== */ .site-header{background:var(--dark);position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(255,255,255,.08)} .site-header .inner{max-width:1280px;margin:0 auto;padding:.6rem 1.5rem;display:flex;align-items:center;gap:2rem} .site-header .logo{display:flex;align-items:center;flex-shrink:0} .site-header .logo img{height:42px;width:auto;display:block} .site-header nav.main-nav{flex:1;display:flex;gap:1.8rem;align-items:center} .site-header nav.main-nav a{color:#fff;text-decoration:none;font-size:.94rem;font-weight:600;font-family:'Montserrat',sans-serif} .site-header nav.main-nav a:hover{color:var(--accent)} .header-right{display:flex;align-items:center;gap:1rem} /* Taalswitcher (NL/EN) */ .lang{position:relative} .lang>button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.8rem; padding:.38rem .7rem;border-radius:9999px;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-family:'Montserrat',sans-serif} .lang>button svg{width:10px;height:10px} .lang ul{position:absolute;right:0;top:130%;background:#fff;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.22); list-style:none;padding:.3rem;min-width:78px;display:none} .lang:hover ul,.lang.open ul{display:block} .lang ul a{display:block;padding:.35rem .65rem;color:var(--text);text-decoration:none;font-weight:700;font-size:.82rem;border-radius:6px} .lang ul a:hover{background:var(--light)} /* Hamburger (mobiel) */ .hamburger{display:none;background:transparent;border:none;cursor:pointer;width:30px;height:22px;position:relative;padding:0} .hamburger span{position:absolute;left:0;height:2.5px;width:100%;background:#fff;border-radius:3px;transition:.25s} .hamburger span:nth-child(1){top:0} .hamburger span:nth-child(2){top:9.5px} .hamburger span:nth-child(3){top:19px} /* Mobiel overlay-menu */ .mobile-menu{position:fixed;inset:0;background:var(--dark);z-index:400;display:flex;flex-direction:column; padding:1.4rem 1.5rem 2rem;transform:translateX(100%);transition:transform .28s ease;visibility:hidden} .mobile-menu.open{transform:translateX(0);visibility:visible} .mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem} .mobile-menu .mm-top img{height:40px} .mobile-menu .mm-close{background:transparent;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer} .mobile-menu nav{display:flex;flex-direction:column;gap:.4rem} .mobile-menu nav a{color:#fff;text-decoration:none;font-size:1.3rem;font-weight:700;font-family:'Rubik',sans-serif; padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08)} .mobile-menu nav a:hover{color:var(--accent)} .mobile-menu .mm-actions{margin-top:auto;display:flex;flex-direction:column;gap:1rem;padding-top:2rem} .mobile-menu .mm-actions .btn{width:100%} .mobile-menu .mm-lang{display:flex;gap:1rem;color:#8a93a8;font-size:.85rem;font-weight:700} .mobile-menu .mm-lang a{color:#8a93a8;text-decoration:none} .mobile-menu .mm-lang a:hover{color:var(--accent)} body.menu-open{overflow:hidden} /* ===== Layout / typografie ===== */ .section{padding:5rem 1.5rem;position:relative} .section.dark{background:var(--dark);color:#fff} .section.warm{background:var(--warm)} .section.tint{background:var(--primary-lt)} .container{max-width:1280px;margin:0 auto;width:100%} .eyebrow{font-size:.78rem;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:3px;margin-bottom:1rem;font-family:'Montserrat',sans-serif} .dark .eyebrow{color:var(--accent)} .h1{font-size:clamp(2.3rem,4.8vw,3.8rem);line-height:1.05;font-weight:900;letter-spacing:-1.2px} .h2{font-size:clamp(1.8rem,3.5vw,2.7rem);line-height:1.12;font-weight:800;letter-spacing:-.5px;margin-bottom:1rem} .h3{font-size:1.3rem;font-weight:700;line-height:1.25;margin-bottom:.5rem} .lead{font-size:1.1rem;color:var(--muted);line-height:1.6;max-width:680px} .dark .lead{color:#b5bcd0} .hl{background:linear-gradient(180deg,transparent 55%,var(--accent) 55%,var(--accent) 92%,transparent 92%);padding:0 .1em} /* ===== HERO — game (V1) ===== */ .hero-game{background:linear-gradient(135deg,#fff 0%,var(--primary-lt) 100%); padding:4.5rem 1.5rem 5rem;position:relative;overflow:hidden} .hero-game::before{content:"";position:absolute;top:-150px;right:-100px;width:600px;height:600px; border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 60%);opacity:.4} .hero-game::after{content:"";position:absolute;bottom:-100px;left:-150px;width:400px;height:400px; border-radius:50%;background:radial-gradient(circle,var(--primary) 0%,transparent 60%);opacity:.18} .hero-game .row{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem; align-items:center;position:relative;z-index:2} @media(max-width:980px){.hero-game .row{grid-template-columns:1fr;gap:2rem}} .hero-game .sticker-row{display:flex;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap} .sticker{display:inline-block;background:var(--accent);color:var(--dark);padding:.22rem .7rem;font-size:.68rem;font-weight:800; border-radius:4px;letter-spacing:1.2px;text-transform:uppercase;transform:rotate(-2deg);box-shadow:0 4px 14px rgba(143,204,26,.4);font-family:'Montserrat',sans-serif} .sticker.purple{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(81,112,255,.3);transform:rotate(2deg)} .sticker.warm{background:#FF6B6B;color:#fff;transform:rotate(-3deg);box-shadow:0 4px 14px rgba(255,107,107,.35)} .hero-game h1{margin-bottom:1.3rem} .hero-game h1 .word{display:inline-block} .hero-game h1 .w1{color:var(--primary)} .hero-game h1 .w2{color:var(--dark)} .hero-game h1 .w3{color:var(--accent-dk)} .hero-game h1 .dot{color:var(--accent-dk)} .hero-game .subline{font-size:1.2rem;color:var(--text);max-width:560px;margin-bottom:2rem} .hero-game .cta-stack{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.5rem} .hero-game .trust{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.92rem} .hero-game .trust .avs{display:flex} .hero-game .trust .avs div{width:32px;height:32px;border-radius:50%;border:3px solid #fff;margin-right:-12px} .hero-game .trust .avs div:nth-child(1){background:linear-gradient(135deg,#FF6B6B,#FFB84D)} .hero-game .trust .avs div:nth-child(2){background:linear-gradient(135deg,#7C3AED,#EC4899)} .hero-game .trust .avs div:nth-child(3){background:linear-gradient(135deg,#10B981,#3B82F6)} .hero-game .trust .avs div:nth-child(4){background:linear-gradient(135deg,var(--primary),var(--accent-dk))} .game-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px} .game-phone{width:280px;background:var(--dark);border-radius:36px;padding:1.5rem 1rem; box-shadow:0 30px 80px rgba(11,15,31,.3);position:relative;z-index:3;transform:rotate(-4deg)} .game-phone::before{content:"";position:absolute;top:.6rem;left:50%;transform:translateX(-50%); width:80px;height:8px;background:#000;border-radius:5px} .game-phone .ph-screen{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dk) 100%); border-radius:20px;padding:1rem;color:#fff} .game-phone .ph-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem} .game-phone .ph-title{font-size:.85rem;font-weight:800} .game-phone .ph-coins{font-size:.75rem;font-weight:800;color:var(--accent);background:rgba(0,0,0,.3);padding:.2rem .5rem;border-radius:8px} .game-phone .ph-lead{background:var(--accent);color:var(--dark);border-radius:12px;padding:.7rem .85rem;margin-bottom:.8rem;text-align:center} .game-phone .ph-lead .pos{font-size:.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase} .game-phone .ph-lead .nm{font-size:1rem;font-weight:800;margin-top:.2rem} .game-phone .ph-lead .lvl{font-size:.7rem;font-weight:700;color:var(--dark)} .game-phone .ph-list{background:rgba(255,255,255,.08);border-radius:12px;padding:.5rem .6rem} .game-phone .ph-row{display:flex;justify-content:space-between;align-items:center;padding:.32rem 0;font-size:.72rem;border-bottom:1px solid rgba(255,255,255,.08)} .game-phone .ph-row:last-child{border-bottom:none} .game-phone .ph-rank{color:var(--accent);font-weight:800;width:1.2rem} .game-phone .ph-name{flex:1;margin-left:.3rem;font-weight:600} .game-phone .ph-score{font-weight:800;color:#fff} .game-phone .ph-cta{margin-top:.8rem;background:var(--accent);color:var(--dark);text-align:center;font-weight:800;padding:.55rem;border-radius:12px;font-size:.75rem} .game-missie{position:absolute;top:5%;right:0;background:#fff;border-radius:14px;padding:.8rem 1rem; box-shadow:0 14px 40px rgba(0,0,0,.18);max-width:200px;transform:rotate(5deg);border:1px solid var(--border);z-index:4} .game-missie .tag{font-size:.6rem;font-weight:800;color:var(--accent-dk);background:#F5FED9;padding:.15rem .4rem;border-radius:3px;letter-spacing:1px;text-transform:uppercase;display:inline-block;margin-bottom:.4rem} .game-missie .tx{font-size:.85rem;font-weight:700;line-height:1.3;color:var(--dark)} .game-missie .ok{margin-top:.5rem;font-size:.7rem;color:var(--success);font-weight:700;display:flex;align-items:center;gap:.3rem} .game-badge{position:absolute;bottom:8%;left:5%;background:var(--accent);color:var(--dark);border-radius:50%;width:90px;height:90px; display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;box-shadow:0 14px 40px rgba(143,204,26,.5);transform:rotate(-10deg);z-index:4} .game-badge .lvl{font-size:.62rem;font-weight:800;letter-spacing:1px;text-transform:uppercase} .game-badge .n{font-size:1.8rem;line-height:1;font-family:'Rubik',sans-serif} .game-coins{position:absolute;top:18%;left:5%;background:var(--dark);color:#fff;border-radius:12px;padding:.7rem .9rem; box-shadow:0 14px 40px rgba(0,0,0,.2);transform:rotate(-5deg);z-index:4} .game-coins .c{color:var(--accent);font-size:1.5rem;font-weight:800;line-height:1;display:flex;align-items:center;gap:.3rem;font-family:'Rubik',sans-serif} .game-coins .lbl{font-size:.7rem;color:#b5bcd0;margin-top:.15rem} /* ===== HERO — insights (V2) ===== */ .hero-biz{background:linear-gradient(180deg,#fff 0%,var(--light) 100%);padding:4.5rem 1.5rem 5rem;position:relative;overflow:hidden} .hero-biz::before{content:"";position:absolute;top:-100px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,var(--primary-lt) 0%,transparent 70%)} .hero-biz .row{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;position:relative;z-index:2} @media(max-width:980px){.hero-biz .row{grid-template-columns:1fr;gap:2rem}} .hero-biz .sticker-row{display:flex;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap} .hero-biz h1{margin:1rem 0 1.2rem} .hero-biz h1 .em{color:var(--primary);position:relative} .hero-biz h1 .em::after{content:"";position:absolute;bottom:-3px;left:0;right:0;height:8px;background:var(--accent);z-index:-1;opacity:.55} .hero-biz .subline{font-size:1.15rem;color:var(--text);max-width:560px;margin-bottom:1.8rem} .hero-biz .cta-stack{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.4rem} .hero-biz .trust{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.85rem} .hero-biz .trust .avs{display:flex} .hero-biz .trust .avs div{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-right:-10px} .hero-biz .trust .avs div:nth-child(1){background:linear-gradient(135deg,#7C3AED,#EC4899)} .hero-biz .trust .avs div:nth-child(2){background:linear-gradient(135deg,#10B981,#3B82F6)} .hero-biz .trust .avs div:nth-child(3){background:linear-gradient(135deg,#F59E0B,#EF4444)} .hero-biz .trust .avs div:nth-child(4){background:linear-gradient(135deg,var(--primary),var(--accent-dk))} .biz-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px} .dashboard{background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(81,112,255,.18);padding:1.4rem;border:1px solid var(--border); position:relative;transform:perspective(900px) rotateY(-4deg) rotateX(2deg);width:100%;max-width:520px} .dashboard .d-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:.8rem;border-bottom:1px solid var(--border);margin-bottom:1rem} .dashboard .d-title{font-size:.95rem;font-weight:800} .dashboard .d-tabs{display:flex;gap:.6rem;font-size:.72rem;font-weight:700} .dashboard .d-tabs span{padding:.2rem .55rem;border-radius:5px;color:var(--muted)} .dashboard .d-tabs span.active{background:var(--primary-lt);color:var(--primary)} .dashboard .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem} .dashboard .kpi{background:var(--light);padding:.7rem .8rem;border-radius:8px;border-left:3px solid var(--primary)} .dashboard .kpi:nth-child(2){border-color:var(--accent-dk)} .dashboard .kpi:nth-child(3){border-color:var(--success)} .dashboard .kpi .v{font-size:1.5rem;font-weight:900;line-height:1;color:var(--dark);font-family:'Rubik',sans-serif} .dashboard .kpi .l{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:.25rem} .dashboard .kpi .delta{font-size:.7rem;color:var(--success);font-weight:700;margin-top:.15rem} .dashboard .chart{height:120px;background:linear-gradient(180deg,var(--primary-lt) 0%,#fff 100%);border-radius:8px;position:relative;overflow:hidden;border:1px solid var(--border)} .dashboard .chart svg{position:absolute;inset:0;width:100%;height:100%} .dashboard .legend{display:flex;gap:1rem;margin-top:.6rem;font-size:.7rem;color:var(--muted)} .dashboard .legend span{display:flex;align-items:center;gap:.3rem} .dashboard .legend i{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block} .dashboard .legend i.acc{background:var(--accent-dk)} .floating-stat{position:absolute;right:-2rem;bottom:-1rem;z-index:3;background:var(--dark);color:#fff;padding:.9rem 1.2rem;border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.18);transform:rotate(-3deg);max-width:230px} .floating-stat .pct{color:var(--accent);font-size:1.6rem;font-weight:900;line-height:1;font-family:'Rubik',sans-serif} .floating-stat .lbl{font-size:.78rem;color:#b5bcd0;margin-top:.2rem} .floating-game{position:absolute;left:-1.5rem;top:-1.5rem;z-index:3;background:#fff;color:var(--text);padding:.7rem .9rem;border-radius:12px; box-shadow:0 14px 40px rgba(143,204,26,.25);transform:rotate(3deg);max-width:200px;border-top:4px solid var(--accent-dk)} .floating-game .tag{font-size:.6rem;font-weight:800;color:var(--accent-dk);background:#F5FED9;padding:.15rem .4rem;border-radius:3px;letter-spacing:1px;text-transform:uppercase;display:inline-block;margin-bottom:.4rem} .floating-game .tx{font-size:.82rem;font-weight:700;line-height:1.3;color:var(--dark)} /* ===== Logobar ===== */ .logobar{padding:2rem 1.5rem;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center} .logobar .label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:3px;margin-bottom:1.2rem} .logobar .logos{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;align-items:center} .logobar .logos div{height:34px;background:#9CA3AF;color:#fff;display:grid;place-content:center;font-weight:700;font-size:.78rem;border-radius:4px;opacity:.55} @media(max-width:760px){.logobar .logos{grid-template-columns:repeat(3,1fr)}} /* ===== Pijn-secties ===== */ .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem} @media(max-width:980px){.three-col{grid-template-columns:1fr}} .dare-card{background:#fff;padding:2rem;border-radius:14px;border:2px solid var(--dark);position:relative;transition:transform .15s,box-shadow .15s;cursor:default} .dare-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.1)} .dare-card .nr{position:absolute;top:-22px;left:1.5rem;background:var(--accent);color:var(--dark);width:44px;height:44px;border-radius:50%; display:grid;place-content:center;font-weight:900;font-size:1.2rem;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.15);font-family:'Rubik',sans-serif} .dare-card:nth-child(2) .nr{background:var(--primary);color:#fff} .dare-card:nth-child(3) .nr{background:#FF6B6B;color:#fff} .dare-card .dare-line{font-size:.78rem;font-weight:800;color:var(--accent-dk);letter-spacing:2px;text-transform:uppercase;margin:1rem 0 .5rem} .dare-card:nth-child(2) .dare-line{color:var(--primary)} .dare-card:nth-child(3) .dare-line{color:#FF6B6B} .dare-card h3{font-size:1.35rem;margin-bottom:.7rem;line-height:1.2} .dare-card p{color:var(--muted);font-size:.95rem;line-height:1.5} .pain-card{background:#fff;padding:2rem;border-radius:14px;border:1px solid var(--border);border-top:6px solid var(--primary);position:relative;overflow:hidden} .pain-card:nth-child(2){border-top-color:var(--accent-dk)} .pain-card:nth-child(3){border-top-color:var(--dark)} .pain-card::before{content:"";position:absolute;top:-50px;right:-50px;width:140px;height:140px;border-radius:50%;background:var(--primary-lt);opacity:.4;z-index:0} .pain-card:nth-child(2)::before{background:#F5FED9} .pain-card:nth-child(3)::before{background:#E5E7EB} .pain-card>*{position:relative;z-index:1} .pain-card .ico{width:60px;height:60px;border-radius:14px;background:var(--primary-lt);display:grid;place-content:center;font-size:1.8rem;margin-bottom:1rem} .pain-card:nth-child(2) .ico{background:#F5FED9} .pain-card:nth-child(3) .ico{background:#E5E7EB} .pain-card h3{font-size:1.3rem;margin-bottom:.6rem;line-height:1.2} .pain-card p{color:var(--muted);font-size:.95rem;line-height:1.5} /* ===== Video-sectie ===== */ .video-section{background:linear-gradient(180deg,#fff,var(--light));padding:5rem 1.5rem;text-align:center} .video-section h2{margin-bottom:1rem} .video-section .lead{margin:0 auto 2rem} .video-wrap{max-width:920px;margin:0 auto;border-radius:20px;overflow:hidden;position:relative;background:var(--primary);aspect-ratio:16/9; box-shadow:0 30px 80px rgba(81,112,255,.28);cursor:pointer;display:block;text-decoration:none} .video-wrap::before{content:"";position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&q=80") center/cover;opacity:.4;mix-blend-mode:overlay} .video-wrap .vid-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(81,112,255,.82),rgba(25,25,25,.55));display:flex;flex-direction:column;justify-content:space-between;padding:2rem;color:#fff} .video-wrap .vid-host{display:flex;align-items:center;gap:.6rem;font-size:.88rem} .video-wrap .vid-host .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#F59E0B,#EF4444);border:2px solid #fff} .video-wrap .vid-host strong{color:#fff;display:block;font-size:.95rem;font-weight:800} .video-wrap .vid-host span{color:#dcd7ff;font-size:.78rem} .video-wrap .vid-title{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;line-height:1.05;max-width:540px;color:#fff;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.3)} .video-wrap .vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--danger);display:grid;place-content:center;box-shadow:0 14px 40px rgba(239,68,68,.45);transition:transform .2s} .video-wrap:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)} .video-wrap .vid-play::after{content:"";display:block;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff;margin-left:5px} .video-wrap .vid-bottom{display:flex;justify-content:space-between;align-items:flex-end} .video-wrap .vid-duration{background:rgba(0,0,0,.55);color:#fff;padding:.3rem .7rem;border-radius:6px;font-size:.78rem;font-weight:800} .video-proof{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:720px;margin:1.5rem auto 0} @media(max-width:680px){.video-proof{grid-template-columns:1fr}} .vp-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem 1.4rem;display:flex;align-items:center;gap:1rem;text-align:left} .vp-card .av-stack{display:flex} .vp-card .av-stack div{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-right:-12px} .vp-card .av-stack div:nth-child(1){background:linear-gradient(135deg,#7C3AED,#EC4899)} .vp-card .av-stack div:nth-child(2){background:linear-gradient(135deg,#10B981,#3B82F6)} .vp-card .av-stack div:nth-child(3){background:linear-gradient(135deg,#F59E0B,#EF4444)} .vp-card .vp-stat{font-size:1rem;font-weight:800;color:var(--dark);line-height:1.2} .vp-card .vp-stat span{display:block;font-size:.78rem;color:var(--muted);font-weight:500;margin-top:.1rem} .vp-card .star{font-size:1.6rem} /* ===== Voor wie — toggle ===== */ .vor-section{background:linear-gradient(135deg,var(--primary-lt) 0%,#F5FED9 100%)} .vor-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem} @media(max-width:980px){.vor-split{grid-template-columns:1fr}} .vor-card{background:#fff;padding:2.2rem;border-radius:16px;border:2px solid transparent;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text);display:block} .vor-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.1)} .vor-card.active{border-color:var(--page-accent)} .vor-card .vlabel{font-size:.78rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem} .vor-card .vlabel.game{color:var(--accent-dk)} .vor-card .vlabel.biz{color:var(--primary)} .vor-card h3{font-size:1.6rem;font-weight:900;line-height:1.15;margin-bottom:.6rem} .vor-card p{color:var(--muted);font-size:1rem;margin-bottom:1.2rem} .vor-card .pill{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.92rem} .vor-card .pill.game{color:var(--accent-dk)} .vor-card .pill.biz{color:var(--primary)} .vor-card .pill.current::before{content:"\2713 ";font-weight:900} /* ===== 5 stappen ===== */ .steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:2rem;position:relative} @media(max-width:980px){.steps5{grid-template-columns:1fr;gap:1.2rem}} .step5{background:#fff;padding:1.5rem 1.2rem;border-radius:14px;border:1px solid var(--border);text-align:center;position:relative} .step5 .nr{width:48px;height:48px;border-radius:50%;background:var(--page-accent);color:var(--page-accent-ink);display:grid;place-content:center; font-weight:900;font-size:1.2rem;margin:0 auto 1rem;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.12);font-family:'Rubik',sans-serif} .step5:nth-child(2) .nr{background:#7C3AED;color:#fff} .step5:nth-child(3) .nr{background:var(--primary);color:#fff} .step5:nth-child(4) .nr{background:#FF6B6B;color:#fff} .step5:nth-child(5) .nr{background:var(--dark);color:var(--accent)} .step5 h4{font-size:1.05rem;font-weight:700;margin-bottom:.3rem;color:var(--dark);font-family:'Rubik',sans-serif} .step5 p{font-size:.83rem;color:var(--muted);line-height:1.4} .step5 .duration{font-size:.7rem;color:var(--primary);font-weight:700;margin-top:.4rem;display:block} .step5 .ico-circle{width:60px;height:60px;border-radius:14px;display:grid;place-content:center;font-size:1.8rem;margin:0 auto .8rem;background:var(--page-accent-soft)} .step5:nth-child(2) .ico-circle{background:#EDE9FE} .step5:nth-child(3) .ico-circle{background:var(--primary-lt)} .step5:nth-child(4) .ico-circle{background:#FEE2E2} .step5:nth-child(5) .ico-circle{background:#23262f;color:var(--accent)} @media(min-width:981px){ .step5:not(:last-child)::after{content:"\2192";position:absolute;right:-.7rem;top:50%;transform:translateY(-50%);color:var(--page-accent-strong);font-size:1.5rem;font-weight:800;z-index:1} } /* ===== Vergelijking ===== */ .compare{background:#fff;border-radius:14px;border:1px solid var(--border);overflow:hidden;margin-top:2rem} .compare table{width:100%;border-collapse:collapse} .compare th,.compare td{text-align:left;padding:1rem;font-size:.95rem;border-bottom:1px solid var(--border)} .compare th{background:var(--dark);color:#fff;font-weight:800;font-size:.82rem;letter-spacing:1px;text-transform:uppercase;font-family:'Montserrat',sans-serif} .compare th:nth-child(2){background:var(--page-accent);color:var(--page-accent-ink)} .compare th:nth-child(2)::before{content:"\2605 "} .compare tr:hover td:not(:first-child){background:var(--light)} .compare td:first-child{font-weight:700;background:#FAFAFA} .compare td.yes{color:var(--success);font-weight:800;text-align:center} .compare td.no{color:var(--danger);font-weight:800;text-align:center} .compare .nope-cta{margin:1.5rem;background:var(--warm);padding:1.2rem 1.5rem;border-radius:12px;border-left:6px solid var(--page-accent-strong)} .compare .nope-cta strong{color:var(--page-accent-strong)} /* ===== Cases ===== */ .case-volume{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem} @media(max-width:980px){.case-volume{grid-template-columns:1fr}} .case-c{background:#fff;padding:2rem;border-radius:14px;border:1px solid var(--border);display:flex;flex-direction:column;gap:.7rem} .case-c .logo-b{background:linear-gradient(135deg,#7C3AED,#EC4899);color:#fff;padding:.4rem .7rem;border-radius:4px;font-weight:800;font-size:.78rem;width:fit-content} .case-c:nth-child(2) .logo-b{background:linear-gradient(135deg,#10B981,#3B82F6)} .case-c:nth-child(3) .logo-b{background:linear-gradient(135deg,#F59E0B,#EF4444)} .case-c .sec{font-size:.7rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1.5px} .case-c .big{font-size:2.2rem;font-weight:900;color:var(--primary);line-height:1;font-family:'Rubik',sans-serif} .case-c .desc{font-size:.95rem;color:var(--text);line-height:1.5} .case-c blockquote{font-style:italic;font-size:.92rem;color:var(--muted);padding-left:.8rem;border-left:3px solid var(--accent)} .case-c .auth{font-size:.78rem;color:var(--muted);font-weight:700} .case-volume-row{margin-top:2rem;background:var(--light);border-radius:14px;padding:2rem;display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center} @media(max-width:760px){.case-volume-row{grid-template-columns:1fr;text-align:center}} .case-volume-row .mini-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem} .case-volume-row .mini-logos div{height:42px;background:#9CA3AF;color:#fff;display:grid;place-content:center;border-radius:6px;font-size:.7rem;font-weight:700;opacity:.6} .case-volume-row .vol-text strong{font-size:2rem;color:var(--primary);font-weight:900;display:block;line-height:1;font-family:'Rubik',sans-serif} .case-volume-row .vol-text small{color:var(--muted);font-size:.85rem} /* ===== Pricing ===== */ .pricing-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;align-items:stretch} @media(max-width:980px){.pricing-row{grid-template-columns:1fr}} .price-card{background:#fff;padding:2rem;border-radius:16px;border:1px solid var(--border);display:grid;grid-template-rows:auto auto auto 1fr auto;gap:1rem} .price-card.popular{border:3px solid var(--page-accent);box-shadow:0 14px 40px rgba(81,112,255,.18);position:relative} .price-card.popular::before{content:"Meest gekozen";position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--page-accent);color:var(--page-accent-ink); padding:.3rem .8rem;border-radius:50px;font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase} .price-card .pname{font-size:1.35rem;font-weight:900;font-family:'Rubik',sans-serif} .price-card .pdesc{font-size:.88rem;color:var(--muted);line-height:1.5;min-height:3.5rem} .price-card .price{display:flex;align-items:baseline;gap:.3rem;margin-top:.5rem} .price-card .price .amt{font-size:3rem;font-weight:900;color:var(--dark);line-height:1;font-family:'Rubik',sans-serif} .price-card .price .unit{font-size:.85rem;color:var(--muted)} .price-card ul{list-style:none;display:flex;flex-direction:column;gap:.45rem} .price-card ul li{padding-left:1.6rem;position:relative;font-size:.95rem;line-height:1.4} .price-card ul li::before{content:"\2713";position:absolute;left:0;color:var(--success);font-weight:900} .price-card .btn{justify-content:center;width:100%} /* ===== FAQ ===== */ .faq{margin-top:2rem;display:flex;flex-direction:column;gap:.7rem} .faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden} .faq-item summary{cursor:pointer;padding:1.1rem 1.4rem;font-weight:800;display:flex;justify-content:space-between;align-items:center;font-size:1rem;list-style:none;font-family:'Rubik',sans-serif} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-size:1.4rem;color:var(--primary);font-weight:800;margin-left:1rem} .faq-item[open] summary::after{content:"\2212"} .faq-item .body{padding:0 1.4rem 1.2rem;color:var(--muted);font-size:.95rem;line-height:1.6} /* ===== Photo / waarom het werkt ===== */ .photo-section{background:var(--light);position:relative;overflow:hidden} .photo-row{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;margin-top:2rem} @media(max-width:980px){.photo-row{grid-template-columns:1fr}} .photo-collage{position:relative;padding:2rem 1rem;min-height:380px} .photo-collage .main-photo{width:100%;border-radius:18px;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#7C3AED,#EC4899);box-shadow:0 24px 60px rgba(0,0,0,.18)} .photo-collage .graffiti{position:absolute;top:-6px;left:-18px;z-index:3;font-family:'Permanent Marker',cursive;font-size:3.5rem;color:var(--dark);transform:rotate(-10deg);text-shadow:2px 2px 0 var(--accent);letter-spacing:0} .photo-collage .polaroid{position:absolute;background:#fff;padding:.5rem .5rem 1.5rem;border-radius:4px;box-shadow:0 14px 30px rgba(0,0,0,.18);width:140px} .photo-collage .polaroid div.img{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#10B981,#3B82F6);border-radius:2px} .photo-collage .polaroid.p1{top:10px;right:-20px;transform:rotate(8deg);z-index:2} .photo-collage .polaroid.p1 div.img{background:linear-gradient(135deg,#F59E0B,#EF4444)} .photo-collage .polaroid.p2{bottom:0;left:-10px;transform:rotate(-6deg);z-index:2} @media(max-width:600px){.photo-collage .polaroid{display:none}.photo-collage .graffiti{font-size:2.5rem}} .photo-text h2{margin-bottom:1rem} .photo-text ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:1.5rem 0} .photo-text ul li{padding-left:2rem;position:relative;font-size:1.05rem;line-height:1.4} .photo-text ul li::before{content:"";position:absolute;left:0;top:.3rem;width:22px;height:22px;border-radius:6px;background:var(--success)} .photo-text ul li::after{content:"\2713";position:absolute;left:5px;top:.25rem;color:#fff;font-weight:800;font-size:.85rem} /* ===== Final CTA ===== */ .final-cta{background:var(--dark);color:#fff;text-align:center;padding:5rem 1.5rem;position:relative;overflow:hidden} .final-cta::before,.final-cta::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%} .final-cta::before{background:var(--primary);top:-100px;right:-50px;opacity:.4} .final-cta::after{background:var(--accent);bottom:-100px;left:-50px;opacity:.15} .final-cta .container{position:relative;z-index:2} .final-cta h2{color:#fff} .final-cta .cta-group{justify-content:center;display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem} /* ===== Footer (merk-gematcht, donker) ===== */ .site-footer{background:var(--dark);color:#aeb6c4;padding:4rem 1.5rem 2rem} .site-footer .inner{max-width:1280px;margin:0 auto} .site-footer .columns{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:2.5rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:2.5rem;margin-bottom:1.5rem} @media(max-width:760px){.site-footer .columns{grid-template-columns:1fr;gap:2rem}} .site-footer .f-logo img{height:46px;width:auto;margin-bottom:1.1rem} .site-footer p.f-tag{font-size:.9rem;color:#9aa3b2;max-width:320px;line-height:1.65} .site-footer h4{font-size:.78rem;color:#fff;text-transform:uppercase;letter-spacing:2px;margin-bottom:1.1rem;font-weight:800;font-family:'Montserrat',sans-serif} .site-footer ul{list-style:none;display:flex;flex-direction:column;gap:.6rem} .site-footer a{color:#aeb6c4;text-decoration:none;font-size:.9rem} .site-footer a:hover{color:var(--accent)} .site-footer .contact-list{font-size:.9rem;line-height:1.95;color:#aeb6c4} .site-footer .contact-list a{color:#aeb6c4} .site-footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.6rem;font-size:.8rem;flex-wrap:wrap;color:#8a93a8} .site-footer .bottom .legal{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center} .site-footer .bottom a{color:#8a93a8} .site-footer .bottom .credit a{color:var(--accent);font-weight:700} /* ===== Responsive header ===== */ @media(max-width:900px){ .site-header nav.main-nav{display:none} .site-header .header-right .lang,.site-header .header-right .btn-cta{display:none} .hamburger{display:block} }