:root{ --ink:#102238;--muted:#697b8d;--navy:#0a2540;--navy-soft:#0d2b46; --cyan:#0777be;--cyan-dark:#045f97;--surface:#fff; --brand-blue:#0777be;--brand-blue-dark:#045f97;--brand-green:#327f3e;--brand-green-dark:#25612e; --canvas:#f4f7f9;--line:#dce6eb;--line-strong:#c8d6de;--danger:#b62d24; --success:#2c6e37;--warning:#825b00;--radius:16px;--radius-sm:10px; --shadow:0 12px 28px rgba(7,26,45,.07);--shadow-lg:0 20px 48px rgba(3,18,32,.14); font-family:"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink);font-synthesis:none;color-scheme:light } /* Donkere modus: overschrijft de tokens + de losstaande selectors die niet via een token lopen. Het gros van de site (kaarten, dropdowns, tabellen, formulieren) gebruikt al deze variabelen en volgt dus automatisch mee zodra data-theme="dark" op staat. */ @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ink:#e7eef5;--muted:#90a4b7;--surface:#131a24; --cyan:#2f9fe0;--cyan-dark:#5fb8ea;--brand-blue:#2f9fe0;--brand-blue-dark:#5fb8ea; --brand-green:#3fae52;--brand-green-dark:#6ecb82; --canvas:#090d13;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18); --danger:#ff7a6b;--success:#5cd67a;--warning:#ffb238;color-scheme:dark; --shadow:0 12px 28px rgba(0,0,0,.35);--shadow-lg:0 20px 48px rgba(0,0,0,.5); }} :root[data-theme="dark"]{ --ink:#e7eef5;--muted:#90a4b7;--surface:#131a24; --cyan:#2f9fe0;--cyan-dark:#5fb8ea;--brand-blue:#2f9fe0;--brand-blue-dark:#5fb8ea; --brand-green:#3fae52;--brand-green-dark:#6ecb82; --canvas:#090d13;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18); --danger:#ff7a6b;--success:#5cd67a;--warning:#ffb238;color-scheme:dark; --shadow:0 12px 28px rgba(0,0,0,.35);--shadow-lg:0 20px 48px rgba(0,0,0,.5); } :root[data-theme="dark"] .topbar{background:rgba(10,24,38,.9)} :root[data-theme="dark"] .site-footer{background:rgba(10,24,38,.9)} :root[data-theme="dark"] .domain-check button{background:linear-gradient(135deg,#2f9142,#1c6b30)} :root[data-theme="dark"] .domain-float-icon,:root[data-theme="dark"] .feature-icon,:root[data-theme="dark"] .checklist-card h3 i{background:linear-gradient(135deg,#1a7fc4,#2f9142)} :root[data-theme="dark"] .nextra-product-card.featured{box-shadow:0 20px 45px rgba(0,0,0,.45)} :root[data-theme="dark"] .nextra-featured-badge{box-shadow:0 8px 18px rgba(0,0,0,.4)} :root[data-theme="dark"] .domain-check,:root[data-theme="dark"] .feature-card,:root[data-theme="dark"] .legal-toc,:root[data-theme="dark"] .category-tile,:root[data-theme="dark"] .nextra-product-card,:root[data-theme="dark"] .segmented,:root[data-theme="dark"] .trust-strip-item,:root[data-theme="dark"] .checklist-card,:root[data-theme="dark"] .detail-card,:root[data-theme="dark"] .status-item,:root[data-theme="dark"] .kb-card,:root[data-theme="dark"] .spec-table-wrap,:root[data-theme="dark"] .price-comparison-table-wrap,:root[data-theme="dark"] .domain-scan-row,:root[data-theme="dark"] .contact-card{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)} :root[data-theme="dark"] .nav-dropdown-panel,:root[data-theme="dark"] .cookie-banner-inner,:root[data-theme="dark"] .status-modal{box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)} :root[data-theme="dark"] .hero{background:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/26px 26px,linear-gradient(120deg,var(--navy) 0%,#0c3f63 55%,#1e4f28 135%)} :root[data-theme="dark"] .cta-banner{background:linear-gradient(120deg,var(--navy),#1e4f28)} :root[data-theme="dark"] .segmented button.active{background:linear-gradient(135deg,#1a7fc4,#0d5a91)} :root[data-theme="dark"] .nextra-featured-badge,:root[data-theme="dark"] .nextra-actions a:not(.secondary){background:linear-gradient(135deg,#1a7fc4,#0d5a91)} :root[data-theme="dark"] .btn.primary{border-color:transparent;background:linear-gradient(135deg,#1a7fc4,#0d5a91);box-shadow:0 10px 22px rgba(0,0,0,.4)} :root[data-theme="dark"] .btn.primary:hover{box-shadow:0 14px 28px rgba(0,0,0,.45)} :root[data-theme="dark"] .nextra-free-badge,:root[data-theme="dark"] .checklist-card li i,:root[data-theme="dark"] .price-comparison-badge{background:rgba(92,214,122,.18);color:#8fe0a5} :root[data-theme="dark"] .domain-scan-status.available{background:rgba(92,214,122,.18);color:#8fe0a5} :root[data-theme="dark"] .domain-scan-status.taken{background:rgba(255,122,107,.18)} :root[data-theme="dark"] .price-comparison-us,:root[data-theme="dark"] .price-comparison-table tbody td:nth-child(2){background:rgba(92,214,122,.08)} :root[data-theme="dark"] .status-modal{background:var(--surface);color:var(--ink)} :root[data-theme="dark"] body.nav-open nav.site-nav{background:var(--surface)} *{box-sizing:border-box} html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background-color:var(--line-strong);border-radius:20px;border:3px solid var(--canvas);background-clip:padding-box} body{margin:0;overflow-x:clip;background:var(--canvas);line-height:1.6;color:var(--ink)} a{color:var(--cyan-dark);text-underline-offset:3px} ::selection{background:rgba(7,119,190,.22)} :root[data-theme="dark"] ::selection{background:rgba(47,159,224,.35)} img{max-width:100%} button,input{font:inherit} button,a{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,transform .18s ease} :focus-visible{outline:3px solid rgba(7,119,190,.3);outline-offset:2px} h1,h2,h3{letter-spacing:-.025em;line-height:1.16;margin:0 0 .5em} p{margin:0 0 1em} /* Topbar */ .topbar{position:sticky;top:0;z-index:40;display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:24px;padding:0 max(20px,calc((100% - 1240px)/2));border-bottom:1px solid var(--line);background:rgba(253,254,254,.92);backdrop-filter:blur(8px);box-shadow:0 2px 16px rgba(37,110,68,.06)} .brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-size:20px;font-weight:850;letter-spacing:-.02em;white-space:nowrap} .brand img{display:block;height:30px;width:auto} nav.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap} nav.site-nav a{padding:10px 13px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:700} nav.site-nav a:hover{background:var(--canvas);color:var(--ink)} nav.site-nav a.active{color:var(--cyan-dark)} .nav-dropdown{position:relative} .nav-dropdown-trigger{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit} .nav-dropdown-trigger:hover,.nav-dropdown.open .nav-dropdown-trigger{background:var(--canvas);color:var(--ink)} .nav-dropdown-trigger.active{color:var(--cyan-dark)} .nav-dropdown-trigger i{font-size:10px;transition:transform .18s ease} .nav-dropdown.open .nav-dropdown-trigger i{transform:rotate(180deg)} .nav-dropdown-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:220px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-lg);z-index:50} .nav-dropdown.open .nav-dropdown-panel{display:flex;flex-direction:column;gap:2px} .nav-dropdown-panel a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700} .nav-dropdown-panel a:hover{background:var(--canvas)} .nav-dropdown-panel a i{width:16px;color:var(--cyan-dark)} .topbar-actions{display:flex;align-items:center;gap:10px} .menu-toggle{display:none;border:1px solid var(--line);border-radius:9px;background:var(--surface);width:42px;height:42px;font-size:17px;color:var(--ink);cursor:pointer} .theme-toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:15px;cursor:pointer} .theme-toggle:hover{background:var(--canvas);color:var(--ink)} .theme-toggle .fa-sun{display:none} :root[data-theme="dark"] .theme-toggle .fa-sun{display:block} :root[data-theme="dark"] .theme-toggle .fa-moon{display:none} /* Zelfde overrides als hierboven, maar voor bezoekers die geen expliciete keuze maakten en wiens systeem donkere modus als voorkeur heeft. */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .topbar{background:rgba(10,24,38,.9)} :root:not([data-theme="light"]) .site-footer{background:rgba(10,24,38,.9)} :root:not([data-theme="light"]) .domain-check button{background:linear-gradient(135deg,#2f9142,#1c6b30)} :root:not([data-theme="light"]) .domain-float-icon,:root:not([data-theme="light"]) .feature-icon,:root:not([data-theme="light"]) .checklist-card h3 i{background:linear-gradient(135deg,#1a7fc4,#2f9142)} :root:not([data-theme="light"]) .nextra-product-card.featured{box-shadow:0 20px 45px rgba(0,0,0,.45)} :root:not([data-theme="light"]) .nextra-featured-badge{box-shadow:0 8px 18px rgba(0,0,0,.4)} :root:not([data-theme="light"]) .domain-check,:root:not([data-theme="light"]) .feature-card,:root:not([data-theme="light"]) .legal-toc,:root:not([data-theme="light"]) .category-tile,:root:not([data-theme="light"]) .nextra-product-card,:root:not([data-theme="light"]) .segmented,:root:not([data-theme="light"]) .trust-strip-item,:root:not([data-theme="light"]) .checklist-card,:root:not([data-theme="light"]) .detail-card,:root:not([data-theme="light"]) .status-item,:root:not([data-theme="light"]) .kb-card,:root:not([data-theme="light"]) .spec-table-wrap,:root:not([data-theme="light"]) .price-comparison-table-wrap,:root:not([data-theme="light"]) .domain-scan-row,:root:not([data-theme="light"]) .contact-card{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05)} :root:not([data-theme="light"]) .nav-dropdown-panel,:root:not([data-theme="light"]) .cookie-banner-inner,:root:not([data-theme="light"]) .status-modal{box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)} :root:not([data-theme="light"]) .hero{background:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/26px 26px,linear-gradient(120deg,var(--navy) 0%,#0c3f63 55%,#1e4f28 135%)} :root:not([data-theme="light"]) .cta-banner{background:linear-gradient(120deg,var(--navy),#1e4f28)} :root:not([data-theme="light"]) .segmented button.active{background:linear-gradient(135deg,#1a7fc4,#0d5a91)} :root:not([data-theme="light"]) .nextra-featured-badge,:root:not([data-theme="light"]) .nextra-actions a:not(.secondary){background:linear-gradient(135deg,#1a7fc4,#0d5a91)} :root:not([data-theme="light"]) .btn.primary{border-color:transparent;background:linear-gradient(135deg,#1a7fc4,#0d5a91);box-shadow:0 10px 22px rgba(0,0,0,.4)} :root:not([data-theme="light"]) .btn.primary:hover{box-shadow:0 14px 28px rgba(0,0,0,.45)} :root:not([data-theme="light"]) .nextra-free-badge,:root:not([data-theme="light"]) .checklist-card li i,:root:not([data-theme="light"]) .price-comparison-badge{background:rgba(92,214,122,.18);color:#8fe0a5} :root:not([data-theme="light"]) .domain-scan-status.available{background:rgba(92,214,122,.18);color:#8fe0a5} :root:not([data-theme="light"]) .domain-scan-status.taken{background:rgba(255,122,107,.18)} :root:not([data-theme="light"]) .price-comparison-us,:root:not([data-theme="light"]) .price-comparison-table tbody td:nth-child(2){background:rgba(92,214,122,.08)} :root:not([data-theme="light"]) .status-modal{background:var(--surface);color:var(--ink)} :root:not([data-theme="light"]) body.nav-open nav.site-nav{background:var(--surface)} :root:not([data-theme="light"]) ::selection{background:rgba(47,159,224,.35)} :root:not([data-theme="light"]) .theme-toggle .fa-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .fa-moon{display:none} } /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap} .btn:hover{border-color:var(--line-strong);transform:translateY(-1px)} .btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));color:#fff;box-shadow:0 10px 22px rgba(7,119,190,.28)} .btn.primary:hover{box-shadow:0 14px 28px rgba(7,119,190,.36)} .btn.ghost{border-color:rgba(255,255,255,.4);background:transparent;color:#fff} .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} .btn.large{padding:15px 26px;font-size:15.5px;border-radius:12px} .btn.small{padding:7px 13px;font-size:12.5px;border-radius:8px} .btn.full{width:100%} /* Layout */ .container{width:min(1240px,calc(100% - 40px));margin:0 auto} section{padding:76px 0} section.tight{padding:44px 0} .eyebrow{display:inline-block;margin-bottom:12px;color:var(--cyan-dark);font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .section-head{max-width:680px;margin:0 auto 44px;text-align:center} .section-head h2{font-size:32px} .section-head p{color:var(--muted);font-size:16px;margin:0} .muted{color:var(--muted)} /* Hero */ .hero{position:relative;padding:96px 0 84px;background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/26px 26px,linear-gradient(120deg,var(--navy) 0%,#0c3f63 55%,var(--brand-green-dark) 135%);color:#fff;overflow:hidden} .hero::after{content:'';position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(50,127,62,.35),transparent 70%);pointer-events:none} .hero-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:30px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12.5px;font-weight:800;margin-bottom:20px} .hero h1{font-size:46px;margin:0 0 18px} .hero p.lead{font-size:17px;color:rgba(255,255,255,.82);max-width:520px;margin:0 0 30px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px} .hero-trust{display:flex;flex-wrap:wrap;gap:22px} .hero-trust span{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.75);font-weight:650} .hero-trust i{color:#7fe0a8} .hero-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:26px;backdrop-filter:blur(6px)} .price-teaser{display:inline-flex;align-items:baseline;gap:7px;margin-bottom:22px;font-size:14.5px;color:rgba(255,255,255,.8)} .price-teaser strong{font-size:32px;font-weight:900;color:#fff} .price-teaser:empty{display:none} .band-white{background:var(--surface)} .hero-panel h3{font-size:15px;margin:0 0 4px} .hero-panel p{font-size:13px;color:rgba(255,255,255,.7);margin:0 0 16px} /* Domain checker */ .domain-check{display:flex;gap:8px;background:var(--surface);border-radius:12px;padding:6px;box-shadow:var(--shadow)} .domain-check input{flex:1;border:0;background:transparent;padding:10px 12px;font-size:14.5px;color:var(--ink);min-width:0} .domain-check input:focus{outline:none} .domain-check button{border:0;border-radius:9px;background:linear-gradient(135deg,var(--brand-green),var(--brand-green-dark));color:#fff;font-weight:800;padding:10px 18px;cursor:pointer;font-size:14px} [data-domain-result]{margin-top:14px;font-size:13.5px;min-height:20px;color:rgba(255,255,255,.9)} [data-domain-result] a{color:#8fe3b6;font-weight:800} /* Homepage hero (playful illustrated variant) */ .hero-home{padding:64px 0 110px;overflow:visible;background:var(--canvas)} .hero-home::after{content:none} .hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none} .hero-bg::before{content:'';position:absolute;top:-22%;left:-10%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(50,127,62,.16),transparent 70%)} .hero-bg::after{content:'';position:absolute;top:-28%;right:-12%;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(7,119,190,.14),transparent 70%)} .hero-home .hero-inner{position:relative;z-index:1} .hero-home .hero-badge{background:var(--surface);border-color:var(--line);color:var(--brand-blue-dark);box-shadow:var(--shadow)} .hero-home h1{color:var(--ink)} .hero-home p.lead{color:var(--muted)} .hero-home .hero-trust span{color:var(--ink)} .hero-home .hero-trust i{color:var(--brand-green-dark)} .hero-illustration{display:flex;justify-content:center;align-items:center;height:300px;min-height:0;overflow:hidden} .hero-illustration img{max-width:100%;max-height:100%;width:auto;height:auto;min-height:0;min-width:0;display:block;object-fit:contain} .domain-float-wrap{position:absolute;left:0;right:0;bottom:-64px;z-index:2} .domain-float-card{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:22px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);padding:26px 30px} .domain-float-text{display:flex;align-items:center;gap:16px;flex:1;min-width:240px} .domain-float-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-green));color:#fff;font-size:18px} .domain-float-text h3{font-size:16.5px;margin:0 0 4px;color:var(--ink)} .domain-float-text p{font-size:13px;color:var(--muted);margin:0} .domain-float-card form{flex:1;min-width:280px} .domain-float-card .domain-check{border:1px solid var(--line)} .domain-float-card [data-domain-result]{width:100%;margin-top:12px;color:var(--ink)} .domain-float-card [data-domain-result] a{color:var(--brand-green-dark)} .after-hero{padding-top:150px} @media (max-width:940px){ .hero-home{padding-bottom:48px} .hero-illustration{order:-1;height:220px;margin:0 auto} /* Op mobiel stapelt deze kaart verticaal (icoon+tekst+formulier) en wordt daardoor veel hoger dan op desktop — een vast negatief bottom-offset (voor het "zwevende" effect) raakte dan uit balans met de content erboven (Mijn Nextra-knop/vertrouwensbadges) en ging daar overheen liggen. Op mobiel daarom gewoon in de normale document-flow laten staan i.p.v. absoluut positioneren, dan past de ruimte zich altijd vanzelf aan de werkelijke hoogte aan (ook als een zoekresultaat extra tekst toevoegt). */ .domain-float-wrap{position:static;margin-top:28px} .domain-float-card{flex-direction:column;align-items:stretch;text-align:center} .domain-float-text{flex-direction:column;text-align:center} .after-hero{padding-top:64px} } /* Interior-page hero (light illustrated variant, compact height) */ .hero-light{padding:56px 0;overflow:visible;background:var(--canvas)} .hero-light::after{content:none} .hero-light .hero-inner{position:relative;z-index:1} .hero-light h1{color:var(--ink)} .hero-light p.lead{color:var(--muted);margin-left:0} .hero-light .price-teaser{color:var(--muted)} .hero-light .price-teaser strong{color:var(--ink)} .hero-light .hero-actions{justify-content:flex-start;margin-bottom:0} .hero-light .btn.ghost{border-color:var(--line);background:var(--surface);color:var(--ink)} .hero-light .btn.ghost:hover{border-color:var(--line-strong);background:var(--canvas)} .hero-light .hero-illustration{height:200px} @media (max-width:940px){ .hero-light .hero-illustration{order:-1;height:160px;margin:0 auto} .hero-light .hero-actions{justify-content:center} } /* USP / feature grid */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .grid.three{grid-template-columns:repeat(3,1fr)} .grid.two{grid-template-columns:repeat(2,1fr)} .feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)} .feature-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-green));color:#fff;font-size:19px;margin-bottom:16px} .feature-card h3{font-size:16.5px;margin:0 0 6px} .feature-card p{color:var(--muted);font-size:14px;margin:0} /* Legal document pages */ .legal-shell{max-width:1000px;margin:0 auto;display:flex;align-items:flex-start;gap:48px} .legal-doc{max-width:720px;flex:1;min-width:0} .legal-doc .legal-updated{color:var(--muted);font-size:13px;margin-bottom:8px} .legal-toc{flex:0 0 250px;position:sticky;top:78px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)} .legal-toc strong{display:block;margin-bottom:12px;font-size:14px} .legal-toc ol{margin:0;padding-left:19px} .legal-toc li{margin-bottom:0;padding:8px 0;border-bottom:1px solid var(--line)} .legal-toc li:last-child{border-bottom:0;padding-bottom:0} .legal-toc a{color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.35;display:block} .legal-toc a:hover{color:var(--cyan-dark)} .legal-doc article{padding:30px 0;border-bottom:1px solid var(--line)} .legal-doc article:first-of-type{padding-top:0} .legal-doc article:last-of-type{border-bottom:0;padding-bottom:0} .legal-doc h2{font-size:20px;scroll-margin-top:80px} .legal-doc h3{font-size:15.5px;margin-top:1.6em} .legal-doc p{color:var(--ink);font-size:14.5px} .legal-doc ol,.legal-doc ul{padding-left:22px;color:var(--ink);font-size:14.5px} .legal-doc li{margin-bottom:.6em} .legal-doc li>ol,.legal-doc li>ul{margin-top:.6em} .legal-doc strong{font-weight:800} @media (max-width:900px){.legal-shell{flex-direction:column;gap:28px}.legal-toc{position:static;width:100%;flex:none}} /* Cookie notice */ .cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:16px max(20px,calc((100% - 1240px)/2));transform:translateY(120%);transition:transform .4s ease} .cookie-banner.visible{transform:translateY(0)} .cookie-banner-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px 24px} .cookie-banner-inner p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);flex:1;min-width:220px} .cookie-banner-inner a{color:var(--cyan-dark)} .cookie-banner-inner .btn{flex:none} @media (max-width:600px){.cookie-banner{padding:12px}.cookie-banner-inner{padding:16px 18px}} /* Category tiles */ .category-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);overflow:hidden} .category-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} .category-tile .cat-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--canvas);color:var(--cyan-dark);font-size:18px} .category-tile h3{font-size:17px;margin:0} .category-tile p{color:var(--muted);font-size:13.5px;margin:0} .category-tile .price-teaser{display:flex;margin:0;font-size:12.5px;color:var(--muted)} .category-tile .price-teaser strong{font-size:15px;font-weight:800;color:var(--cyan-dark)} .category-tile .cat-link{margin-top:auto;font-size:13px;font-weight:800;color:var(--cyan-dark);display:flex;align-items:center;gap:6px} /* Product section (fed by catalog.js) */ .product-type-section{margin-bottom:56px} .product-type-section:last-child{margin-bottom:0} .product-type-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)} .product-type-head h2{font-size:23px;margin:0} [data-nextra-products]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px} [data-nextra-products]:empty::before{content:'Producten laden…';grid-column:1/-1;color:var(--muted);font-size:14px;padding:14px 0} .nextra-product-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)} .nextra-product-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)} .nextra-product-card.featured{border-color:var(--brand-blue);box-shadow:0 20px 45px rgba(7,119,190,.22)} .nextra-product-card.featured:hover{transform:translateY(-4px)} .nextra-featured-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:30px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));color:#fff;font-size:11px;font-weight:900;letter-spacing:.02em;box-shadow:0 8px 18px rgba(7,119,190,.35);white-space:nowrap} .nextra-product-card .nextra-type{display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:30px;background:var(--canvas);color:var(--cyan-dark);font-size:10.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px} .nextra-product-card h3{font-size:18px;margin:0 0 6px} .nextra-product-card p{color:var(--muted);font-size:13.5px;margin:0 0 14px} .nextra-product-card ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px} .nextra-product-card li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink)} .nextra-product-card li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--brand-green);flex:0 0 auto;margin-top:2px;font-size:11px} .nextra-price{font-size:26px;font-weight:900;color:var(--ink);margin-top:auto} .nextra-price small{font-size:12px;font-weight:650;color:var(--muted)} .nextra-renewal-note{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted)} .nextra-free-badge{display:inline-flex;align-items:center;gap:6px;margin:6px 0 16px;padding:4px 10px;border-radius:30px;background:#e4f8f0;color:var(--brand-green-dark);font-size:11.5px;font-weight:800} /* Prijs-toggles */ .price-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:34px} .segmented{display:inline-flex;padding:4px;border-radius:11px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)} .segmented button{border:0;background:transparent;padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:800;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:7px} .segmented button.active{background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));color:#fff} .segmented-badge{padding:2px 7px;border-radius:20px;background:rgba(50,127,62,.14);color:var(--brand-green-dark);font-size:10px;font-weight:800} .segmented button.active .segmented-badge{background:rgba(255,255,255,.22);color:#fff} .nextra-actions{display:flex;gap:9px} .nextra-actions a{flex:1;text-align:center;padding:11px 12px;border-radius:9px;text-decoration:none;font-weight:800;font-size:13px;border:1px solid var(--line)} .nextra-actions a:not(.secondary){background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));color:#fff;border-color:transparent} .nextra-actions a.secondary{background:var(--surface);color:var(--ink)} .nextra-actions a.secondary:hover{border-color:var(--line-strong)} /* FAQ */ [data-nextra-faq],[data-nextra-faq-page]{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto} [data-nextra-faq-tabs]{display:flex;justify-content:center;margin-bottom:22px} .faq-tabs{flex-wrap:wrap;justify-content:center} .nextra-faq{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 20px} .nextra-faq summary{padding:16px 0;font-weight:800;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px} .nextra-faq summary::-webkit-details-marker{display:none} .nextra-faq summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:12px;color:var(--muted);flex:0 0 auto} .nextra-faq[open] summary::after{content:'\f077'} .nextra-faq p{padding-bottom:16px;margin:0;color:var(--muted);font-size:14px} .nextra-faq .rich-content{padding-bottom:16px;color:var(--muted);font-size:14px} .nextra-faq .rich-content p{margin:0 0 12px} .nextra-faq .rich-content p:last-child{margin-bottom:0} .rich-content img{max-width:100%;border-radius:12px;margin:10px 0;display:block} .rich-content h1,.rich-content h2,.rich-content h3{margin:16px 0 8px;letter-spacing:-.01em;color:var(--ink)} .rich-content ul,.rich-content ol{margin:0 0 12px;padding-left:22px} .rich-content blockquote{margin:12px 0;padding:8px 16px;border-left:3px solid var(--brand-blue);color:var(--muted)} .rich-content a{color:var(--brand-blue-dark);text-decoration:underline} .rich-content b,.rich-content strong{font-weight:700} /* Trust strip */ .trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .trust-strip-item{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:30px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px;font-weight:800;color:var(--ink)} .trust-strip-item i{color:var(--brand-green-dark);font-size:15px} /* Story rows (editorial detail sections) */ .story-list{max-width:960px;margin:0 auto} .story-row{display:flex;gap:44px;align-items:center;padding:38px 0;border-bottom:1px solid var(--line)} .story-row:first-child{padding-top:0} .story-row:last-child{border-bottom:0;padding-bottom:0} .story-row:nth-child(even){flex-direction:row-reverse} .story-image{flex:0 0 auto;width:220px} .story-image img{width:100%;height:auto;display:block} .story-text{flex:1;min-width:0} .story-text h3{font-size:20px;margin:6px 0 10px} .story-text p{color:var(--muted);font-size:14.5px;margin:0 0 8px} .story-text p:last-child{margin-bottom:0} @media (max-width:700px){.story-row,.story-row:nth-child(even){flex-direction:column;gap:18px}.story-image{width:170px}} /* Checklist cards */ .checklist-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)} .checklist-card h3{display:flex;align-items:center;gap:12px;font-size:17px;margin:0 0 18px} .checklist-card h3 i{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-green));color:#fff;font-size:15px} .checklist-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .checklist-card li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--canvas)} .checklist-card li:first-child{padding-top:0} .checklist-card li:last-child{padding-bottom:0;border-bottom:0} .checklist-card li i{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#e4f8f0;color:var(--brand-green-dark);font-size:10px} /* Detail cards */ .detail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)} .detail-card h3{font-size:19px;margin:0 0 10px} .detail-card p{color:var(--muted);font-size:14.5px;margin:0 0 10px} .detail-card p:last-child{margin-bottom:0} .spec-toggle-wrap{text-align:center;margin-top:22px} .status-list{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto} .status-item{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--warning);border-radius:var(--radius-sm);padding:20px 24px;box-shadow:var(--shadow);transition:box-shadow .15s ease,transform .15s ease} .status-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)} .status-item.resolved{border-left-color:var(--brand-green)} .status-item .eyebrow{margin-bottom:6px} .status-item h3{font-size:16.5px;margin:0 0 6px} .status-item p{color:var(--muted);font-size:14px;margin:0 0 8px} .status-item p:last-of-type{margin-bottom:0;color:var(--ink)} .status-item-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--cyan-dark);font-size:12.5px;font-weight:800} .job-card{text-decoration:none;color:inherit;border-left-color:var(--cyan)} /* Kennisbank */ .kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:960px;margin:0 auto} .kb-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease} .kb-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .kb-card .feature-icon{margin-bottom:14px} .kb-card .eyebrow{margin-bottom:8px} .kb-card h3{margin:0;font-size:16px;line-height:1.35} .kb-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--cyan-dark);font-size:12.5px;font-weight:800} .kb-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:20px 0} /* Status incident modal */ .status-modal{border:0;border-radius:var(--radius);padding:28px 30px;max-width:560px;width:min(560px,calc(100% - 40px));box-shadow:var(--shadow-lg)} .status-modal::backdrop{background:rgba(6,20,34,.55)} .status-modal .eyebrow{margin-bottom:8px} .status-modal h2{font-size:20px;margin:0 0 18px} .status-modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center} .status-modal-close:hover{color:var(--ink);border-color:var(--line-strong)} .status-timeline{max-height:55vh;overflow-y:auto} .status-timeline-item{padding:14px 0;border-bottom:1px solid var(--line)} .status-timeline-item:last-child{border-bottom:0;padding-bottom:0} .status-timeline-item .eyebrow{margin-bottom:6px} .status-timeline-item p{margin:0;color:var(--ink);font-size:14px;line-height:1.5} @media (max-width:600px){.status-modal{padding:24px 20px}} /* Vacature-sollicitatie modal (hergebruikt .status-modal-chrome) */ .vacature-modal{max-width:620px;width:min(620px,calc(100% - 40px));max-height:85vh;overflow-y:auto} .vacature-modal .form-status{margin-top:14px} /* Specification table */ .spec-table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)} .spec-table{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px} .spec-table th,.spec-table td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap} .spec-table thead th{background:var(--canvas);font-weight:900;color:var(--ink)} .spec-table tbody tr:last-child td{border-bottom:0} .spec-table td:first-child,.spec-table th:first-child{text-align:left;font-weight:750;position:sticky;left:0;background:var(--surface);z-index:1} .spec-table thead th:first-child{background:var(--canvas)} .spec-yes{color:var(--brand-green-dark)} .spec-no{color:var(--line-strong)} /* Price comparison table (domeinnamen) */ .price-comparison-table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);background:var(--surface)} .price-comparison-table{width:100%;border-collapse:collapse;font-size:14px} .price-comparison-table th,.price-comparison-table td{padding:16px 20px;text-align:center;white-space:nowrap} .price-comparison-table thead th{padding-bottom:18px;font-weight:800} .price-comparison-table thead th img{max-height:34px;max-width:130px;object-fit:contain;vertical-align:middle} .price-comparison-table thead th.price-comparison-us img{max-height:64px;max-width:230px} .price-comparison-table thead th:first-child{text-align:left;font-weight:700;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em} .price-comparison-table tbody td:first-child{text-align:left;font-weight:750;color:var(--ink)} .price-comparison-table tbody tr td{border-top:1px solid var(--line)} .price-comparison-us{background:rgba(50,127,62,.06)} .price-comparison-table tbody td:nth-child(2){background:rgba(50,127,62,.06)} .price-comparison-badge{display:inline-block;padding:4px 12px;border-radius:20px;background:#e4f8f0;color:var(--brand-green-dark);font-weight:800} @media (max-width:640px){.price-comparison-table th,.price-comparison-table td{padding:12px 14px}} /* Domain extension scan */ [data-domain-scan-results]{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .domain-scan-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)} .domain-scan-name{font-weight:800;font-size:15px;flex:1 1 180px;min-width:0} .domain-scan-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:30px;white-space:nowrap} .domain-scan-status.pending{background:var(--canvas);color:var(--muted)} .domain-scan-status.available{background:#e5f7ec;color:#1a7d4a} .domain-scan-status.taken{background:#fbe9e7;color:var(--danger)} .domain-scan-status.unknown{background:var(--canvas);color:var(--muted)} .domain-scan-actions{display:flex;align-items:center;gap:12px} .domain-scan-price{font-weight:800;color:var(--ink);font-size:14px;white-space:nowrap} @media (max-width:560px){.domain-scan-row{flex-direction:column;align-items:flex-start;gap:10px}.domain-scan-name{flex:none}.domain-scan-actions{width:100%;justify-content:space-between}} /* Contact form */ .contact-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start} .contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)} .form-field{margin-bottom:18px} .form-field label{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:7px} .form-field input,.form-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--ink);font-family:inherit;background:var(--canvas);box-sizing:border-box} .form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--cyan);background:var(--surface)} .form-field textarea{resize:vertical;min-height:140px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-status{margin-top:14px;font-size:13.5px;font-weight:700} .form-status.ok{color:var(--brand-green-dark,#1a7d4a)} .form-status.error{color:var(--danger)} .contact-side{display:flex;flex-direction:column;gap:16px} .contact-side .feature-card{padding:22px} .contact-side .feature-card h3{font-size:15px} .contact-side .feature-card p{margin:0 0 12px} @media (max-width:860px){.contact-layout{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}} /* CTA banner */ .cta-banner{position:relative;border-radius:24px;padding:56px;text-align:center;overflow:hidden;background:linear-gradient(120deg,var(--navy),var(--brand-green-dark));color:#fff} .cta-banner h2{font-size:28px;margin:0 0 12px} .cta-banner p{color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 26px} .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Footer */ .site-footer{background:var(--navy);color:rgba(255,255,255,.75);padding:56px 0 26px;margin-top:60px} .footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)} .footer-col{flex:1;min-width:160px} .footer-col.footer-brand{flex:1.4;min-width:220px} .footer-col strong{display:block;color:#fff;font-size:14px;margin-bottom:14px} .footer-col a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;padding:5px 0} .footer-col a:hover{color:#fff} .footer-col span{display:block;color:rgba(255,255,255,.5);font-size:12.5px;padding:5px 0} .footer-brand p{font-size:13.5px;color:rgba(255,255,255,.65);max-width:280px} .footer-social{display:flex;gap:10px;margin-top:14px} .footer-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);color:#fff} .footer-social a:hover{background:rgba(255,255,255,.18)} .footer-social svg{width:16px;height:16px;fill:currentColor} .footer-payments{padding-top:26px} .footer-payments-label{display:block;margin-bottom:10px;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .pay-icons{display:flex;flex-wrap:wrap;gap:8px} .pay-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font-size:11px;font-weight:700} .pay-chip svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto} .pay-chip i{width:15px;font-size:13px;text-align:center} .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.5)} /* Responsive */ @media (max-width:940px){ .hero-inner{grid-template-columns:1fr} .hero h1{font-size:34px} .grid,.grid.three{grid-template-columns:repeat(2,1fr)} nav.site-nav,.topbar-actions .btn.large{display:none} .menu-toggle{display:block} .topbar-actions{gap:8px} body.nav-open nav.site-nav{display:flex;position:absolute;top:58px;left:0;right:0;z-index:60;background:var(--surface);flex-direction:column;align-items:stretch;padding:10px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 58px);overflow-y:auto} nav.site-nav a{padding:13px} .nav-dropdown-trigger{width:100%;justify-content:space-between} .nav-dropdown-panel{position:static;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0;width:100%} .nav-dropdown.open .nav-dropdown-panel{display:flex} .menu-toggle,.nav-dropdown-trigger,nav.site-nav a{touch-action:manipulation} } @media (max-width:720px){ section{padding:52px 0} .grid,.grid.three{grid-template-columns:1fr} .cta-banner{padding:36px 22px} .footer-grid{grid-template-columns:1fr} } @media (max-width:480px){ .hero h1{font-size:28px} .cta-actions,.hero-actions{flex-direction:column} .cta-actions .btn,.hero-actions .btn{width:100%} .domain-check{flex-direction:column} .domain-check button{width:100%} }