:root{
  --navy:#0b2a66;
  --blue:#1f66ff;
  --yellow:#f4b400;
  --bg:#f6f8fd;
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --border:rgba(15,23,42,.12);
  --shadow:0 18px 40px rgba(15,23,42,.10);
  --radius:16px;
  --max:1120px;
}

:root[data-theme="dark"]{
  --bg: #070b14;
  --card: #0b1224;
  --text: #e6ecff;
  --muted: rgba(230,236,255,0.75);

  --border: rgba(230,236,255,0.10);
  --shadow: 0 18px 40px rgba(0,0,0,0.40);
}

:root[data-theme="dark"] .header{
  background: rgba(11,18,36,0.70);
  border-bottom-color: rgba(230,236,255,0.08);
}

:root[data-theme="dark"] .nav-link:hover{
  background: rgba(230,236,255,0.08);
}

:root[data-theme="dark"] .footer{
  background: rgba(11,18,36,0.75);
}

:root[data-theme="dark"] .btn-outline-dark{
  background: #f4b400;
  color: black;
}

:root[data-theme="dark"] .nav-link{
  color: rgba(230,236,255,0.92);
}

:root[data-theme="dark"] .nav-link:hover{
  background: rgba(230,236,255,0.08);
}

/* Dark mode: hamburger knop fix */
:root[data-theme="dark"] .nav-toggle{
  background: rgba(11,18,36,0.60);
  border-color: rgba(230,236,255,0.14);
}

/* de 3 streepjes wit maken */
:root[data-theme="dark"] .burger,
:root[data-theme="dark"] .burger::before,
:root[data-theme="dark"] .burger::after{
  background: rgba(230,236,255,0.92);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  cursor: default;
}

a{color:inherit;text-decoration:none}

h1,h2,h3{
  margin:0 0 .6rem;
  line-height:1.15;
}

h1{
  font-size:clamp(2.0rem,4.2vw,3.1rem);
  letter-spacing:-.02em;
  font-weight:800;
}

h2{
  font-size:clamp(1.5rem,2.6vw,2.0rem);
  letter-spacing:-.02em;
  font-weight:800;
}

h3{
  font-size:1.05rem;
  font-weight:800;
  color:var(--text);
}

p{
  margin:0 0 1rem;
  color:var(--muted);
}

.container{
  width:min(var(--max),calc(100% - 2rem));
  margin:0 auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:8px;
  background:var(--card);
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  z-index:9999;
}
.skip-link:focus{left:12px}

/* Header */

.header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.header.elevated{
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
}

.logo{
  display:flex;
  align-items:center;
}

.logo-pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 16px;

  /* premium blue gradient */
  background: linear-gradient(135deg, #0b2a66, #0a2458);

  /* subtiele border + schaduw */
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 28px rgba(15,23,42,0.18);

  position: relative;
  overflow: hidden;
}

.logo-pill::after{
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    600px 120px at 20% 10%,
    rgba(255,255,255,0.22),
    transparent 55%
  );

  pointer-events: none;
}

.logo-img{
  height: 68px; /* mag groot blijven */
  width: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}

.nav-menu{
  display:flex;
  gap:10px;
  align-items:center;
}

.nav-link{
  padding:10px 10px;
  border-radius:10px;
  color:var(--text);
  font-weight:800;
  font-size:.95rem;
}

.nav-link:hover{
  background:rgba(15,23,42,.05);
}

.cta{
  margin-left:6px;
  background:var(--yellow);
  color:#1b1400;
  font-weight:900;
  padding:12px 16px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(244,180,0,.25);
  border:1px solid rgba(244,180,0,.5);
}

.cta:hover{filter:brightness(.98)}

/* Hero */
.hero{
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(31,102,255,.35), transparent 60%),
    radial-gradient(900px 500px at 10% 30%, rgba(244,180,0,.20), transparent 55%),
    linear-gradient(90deg, rgba(11,42,102,.98), rgba(11,42,102,.78));
  color:#fff;
  padding:84px 0 84px;
}

.hero-inner{
  display:flex;
  align-items:center;
  min-height:340px;
}

.hero-content{max-width:760px}

.hero-content h1{
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.hero-content p{
  color:rgba(255,255,255,.92);
  font-size:1.05rem;
  max-width:60ch;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.hero-mini{
  margin-top:14px;
  font-size:.95rem;
  color:rgba(255,255,255,.88);
}

.hero-mail{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-yellow{
  background:var(--yellow);
  color:#1b1400;
  border-color:rgba(244,180,0,.6);
}

.btn-blue{
  background:var(--blue);
  color:#fff;
  box-shadow:0 12px 26px rgba(31,102,255,.22);
}

.btn-outline{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.40);
}

.btn-outline-dark{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(15,23,42,.14);
}

/* Strip cards */
.strip{
  margin-top:-40px;
  padding-bottom:18px;
}

.strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.strip-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 16px;
  text-align:center;
  box-shadow:var(--shadow);
}

.strip-card .icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 14px;

  background: rgba(31,102,255,0.10);
  border: 1px solid rgba(31,102,255,0.20);
}

.icon-svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #1f66ff;          /* jouw logo blauw */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strip-card h3{
  color:var(--blue);
  letter-spacing:.04em;
}

.strip-card p{
  font-size:.92rem;
  margin:0;
  color:var(--muted);
}

/* Sections & grids */
.section{padding:64px 0}

.section-soft{
  background:linear-gradient(180deg, rgba(11,42,102,.04), rgba(11,42,102,0));
}

.section-head{margin-bottom:22px}

.section-head p{max-width:70ch}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.card ul{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}

.card li{margin:6px 0}

.project-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tag{
  font-size:.82rem;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(31,102,255,.10);
  color:var(--blue);
  border:1px solid rgba(31,102,255,.18);
  font-weight:800;
}

.tag-muted{
  background:rgba(71,85,105,.10);
  color:var(--muted);
  border-color:rgba(71,85,105,.20);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Form */
.form{
  display:grid;
  gap:12px;
}

label{
  display:grid;
  gap:6px;
  font-weight:800;
  color:var(--text);
}

input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  background:#fff;
  outline:none;
  font:inherit;
}

input:focus,textarea:focus{
  border-color:rgba(31,102,255,.55);
  box-shadow:0 0 0 4px rgba(31,102,255,.12);
}

.honeypot{display:none!important}

/* Footer */
.footer{
  background:#fff;
  border-top:1px solid var(--border);
  padding:22px 0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.footer p{
  margin:0;
  color:var(--muted);
}

.footer a{
  color:var(--blue);
  font-weight:900;
}

/* Mobile nav */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}

.burger{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  position:relative;
  margin:0 auto;
}

.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--text);
}

.burger::before{top:-6px}
.burger::after{top:6px}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 980px){
  .strip-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 860px){
  .nav-toggle{display:inline-grid;place-items:center}

  .nav-menu{
    display:none;
    position:absolute;
    right:0;
    top:54px;
    width:min(320px, calc(100vw - 2rem));
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 18px 40px rgba(15,23,42,.12);
  }

  .nav-menu.open{display:flex}
  .cta{display:none}
    .grid-2{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .strip{margin-top:-28px}
  .strip-grid{grid-template-columns:1fr}
}

/* Services (Diensten) */
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.service-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.service-lead{
  margin: 0 0 12px;
  color: var(--muted);
}

.service-tag{
  font-size: .82rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31,102,255,.10);
  border: 1px solid rgba(31,102,255,.18);
  color: var(--blue);
  white-space: nowrap;
}

.service-tag-strong{
  background: rgba(244,180,0,.22);
  border-color: rgba(244,180,0,.45);
  color: #5a3b00;
}

.service-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.service-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
}

.service-list li::before{
  content: "✓";
  font-weight: 900;
  color: var(--blue);
  margin-top: 1px;
}

.service-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Featured card accent */
.service-featured{
  border-color: rgba(244,180,0,.55);
  box-shadow: 0 22px 60px rgba(244,180,0,.14);
}

/* Responsive */
@media (max-width: 860px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* Werkwijze - Timeline */
.timeline{
  margin-top: 18px;
  display: grid;
  gap: 16px;
  position: relative;
}

.timeline-item{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
}

/* verticale lijn */
.timeline-item::before{
  content:"";
  position:absolute;
  left: 26px;
  top: 52px;
  bottom: -16px;
  width: 2px;
  background: rgba(31,102,255,0.18);
}

.timeline-item:last-child::before{
  display:none;
}

.timeline-dot{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;

  background: rgba(31,102,255,0.12);
  border: 1px solid rgba(31,102,255,0.25);
  color: var(--blue);

  box-shadow: 0 14px 30px rgba(31,102,255,0.10);
}

.timeline-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.timeline-card:hover{
  transform: translateY(-2px);
  border-color: rgba(31,102,255,.25);
  box-shadow: 0 22px 55px rgba(15,23,42,.14);
}

.timeline-card h3{
  margin: 0 0 6px;
}

.timeline-card p{
  margin: 0;
  color: var(--muted);
}

@media (max-width: 860px){
  .timeline-item{
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .timeline-item::before{
    left: 22px;
  }
}

/* Prijzen (upgrade) */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top: 18px;
}

.pricing-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.pricing-card:hover{
  transform: translateY(-3px);
  border-color: rgba(31,102,255,.25);
  box-shadow: 0 22px 55px rgba(15,23,42,.14);
}

.pricing-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.pricing-badge{
  font-size:.82rem;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(31,102,255,.10);
  border: 1px solid rgba(31,102,255,.18);
  color: var(--blue);
  white-space:nowrap;
}

.pricing-badge-strong{
  background: rgba(244,180,0,.22);
  border-color: rgba(244,180,0,.45);
  color:#5a3b00;
}

.pricing-price{
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 6px 0 2px;
}

.pricing-sub{
  margin: 0 0 14px;
  color: var(--muted);
}

.pricing-list{
  list-style:none;
  padding:0;
  margin: 0 0 16px;
  display:grid;
  gap:8px;
}

.pricing-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
}

.pricing-list li::before{
  content:"✓";
  font-weight:900;
  color: var(--blue);
  margin-top:1px;
}

.pricing-cta{
  margin-top:auto;
  width:100%;
}

/* Featured pricing card */
.pricing-featured{
  border-color: rgba(244,180,0,.55);
  box-shadow: 0 26px 70px rgba(244,180,0,.14);
  position: relative;
  overflow:hidden;
}

.pricing-featured::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 200px at 30% 0%, rgba(244,180,0,.18), transparent 55%);
  pointer-events:none;
}

.pricing-featured *{position:relative; z-index:1;}

@media (max-width: 860px){
  .pricing-grid{grid-template-columns: 1fr;}
}

/* Contact (premium) */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top: 18px;
}

.contact-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.contact-card h3{
  margin-bottom: 6px;
}

.contact-badges{
  display:grid;
  gap:10px;
  margin: 14px 0 14px;
}

.contact-badge{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(31,102,255,0.06);
  border: 1px solid rgba(31,102,255,0.14);
  display:grid;
  gap:2px;
}

.contact-badge:hover{
  border-color: rgba(31,102,255,0.25);
}

.badge-title{
  font-size: .82rem;
  font-weight: 900;
  color: var(--blue);
}

.badge-value{
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.contact-cta{
  width: 50%;
  margin-top: 6px;
}

.contact-small{
  margin-top: 12px;
  font-size: .92rem;
  color: var(--muted);
}

.contact-small.subtle{
  opacity: .75;
}

/* Form styling */
.contact-form{
  margin-top: 10px;
  gap: 12px;
}

.form-row{
  display:grid;
  gap:6px;
}

.form-row label{
  font-weight: 900;
  color: var(--text);
}

.contact-submit{
  width: 100%;
  height: 48px;
  border-radius: 999px;
}

/* responsive */
@media (max-width: 860px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}

/* Dark mode switch */
/* Theme switch with icons */
.theme-switch{
  display:flex;
  align-items:center;
}

.theme-switch-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.theme-switch-track{
  width: 58px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  position: relative;

  background: rgba(15,23,42,0.10);
  border: 1px solid rgba(15,23,42,0.16);

  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Icons */
.theme-icon{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: .65;
  transition: opacity .18s ease;
}

.theme-svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(15,23,42,0.75);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Thumb */
.theme-switch-thumb{
  width: 24px;
  height: 24px;
  border-radius: 999px;

  background: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.18);

  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease;
  z-index: 1;
}

/* ON */
.theme-switch-input:checked + .theme-switch-track{
  background: rgba(31,102,255,0.18);
  border-color: rgba(31,102,255,0.30);
  box-shadow: 0 10px 24px rgba(31,102,255,0.10);
}

.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb{
  transform: translate(26px, -50%);
}

/* Active icon highlight */
.theme-switch-input:not(:checked) + .theme-switch-track .theme-icon-sun{
  opacity: 1;
}
.theme-switch-input:checked + .theme-switch-track .theme-icon-moon{
  opacity: 1;
}

/* Focus */
.theme-switch-input:focus-visible + .theme-switch-track{
  outline: 3px solid rgba(31,102,255,0.25);
  outline-offset: 3px;
}

/* Dark mode: switch icons */
:root[data-theme="dark"] .theme-switch-track{
  background: rgba(230,236,255,0.06);
  border-color: rgba(230,236,255,0.12);
}

:root[data-theme="dark"] .theme-svg{
  stroke: rgba(230,236,255,0.85);
}

:root[data-theme="dark"] .theme-switch-thumb{
  background: rgba(230,236,255,0.92);
}

/* Dark mode form inputs */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea{
  background: rgba(230,236,255,0.06);
  border: 1px solid rgba(230,236,255,0.14);
  color: var(--text);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{
  color: rgba(230,236,255,0.45);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus{
  border-color: rgba(31,102,255,0.55);
  box-shadow: 0 0 0 4px rgba(31,102,255,0.18);
}