/* Slogan in de hero */
.slogan{
  display:inline-block;                 /* helpt bij background-clip */
  font-family:Poppins,Manrope,Arial,sans-serif;
  font-weight:800;
  line-height:1;
  letter-spacing:.5px;
  margin:0 0 6px;
  text-transform:uppercase;
  font-size:clamp(42px,7vw,86px);

  /* gradient tekst, cross-browser */
  background-image:linear-gradient(135deg,var(--a1),var(--a2));
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;  /* belangrijk voor Chrome/Safari/Firefox */
          color:transparent;
}
.tagline{
  margin:6px 0 14px;
  font-size:1.02rem;
  color:var(--muted);
}


:root{
  --bg:#f7f9fc; --paper:#ffffff; --ink:#0f172a; --muted:#6b7280; --line:#e8edf3;
  --a1:#ff7a00; --a2:#ffb267; --ring:rgba(255,122,0,.25);
  --blob1:#ffd7b0; --blob2:#ffe9d7; --blob3:#fff2e8;
  --shadow:0 10px 30px rgba(15,23,42,.06); --radius:16px; --radius-lg:22px;
}
[data-theme="mint"]{ --a1:#10b981; --a2:#7ce7c4; --ring:rgba(16,185,129,.25); --blob1:#c9ffeee; --blob2:#e6fff7; --blob3:#f3fffb;}
[data-theme="violet"]{ --a1:#8b5cf6; --a2:#c4b5fd; --ring:rgba(139,92,246,.28); --blob1:#ece4ff; --blob2:#f3ecff; --blob3:#faf7ff;}
[data-theme="blue"]{ --a1:#3b82f6; --a2:#93c5fd; --ring:rgba(59,130,246,.28); --blob1:#e1efff; --blob2:#eaf3ff; --blob3:#f6faff;}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.7; font-size:16px;
  overflow-x:hidden;
}
.container{max-width:1140px; margin:0 auto; padding:0 22px}
.narrow{max-width:780px}
.accent{background:linear-gradient(135deg,var(--a1),var(--a2)); -webkit-background-clip:text; background-clip:text; color:transparent}
a:focus,button:focus{outline:3px solid var(--ring); outline-offset:2px; border-radius:12px}
.lead{color:var(--muted); font-size:1.06rem}

/* Header */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.75);
  backdrop-filter: saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.hdr__in{min-height:72px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand__logo{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800;
  background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:var(--shadow)}
.brand__txt{font-family:Poppins,Manrope,Arial,sans-serif; font-weight:800; letter-spacing:.2px}
.nav ul{display:flex; gap:6px; list-style:none; margin:0; padding:0}
.nav a{display:inline-block; padding:10px 14px; text-decoration:none; color:inherit; border-radius:12px; position:relative}
.nav a:is(:hover,.is-active){background:#fff}
.nav a:is(:hover,.is-active)::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  animation:slidebar 1.5s ease-in-out infinite;
}
@keyframes slidebar{0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
.nav__toggle{display:none; width:44px; height:44px; border:0; background:#fff; border-radius:12px; box-shadow:var(--shadow)}
.nav__toggle span{display:block; width:22px; height:2px; background:#1f2937; margin:5px auto}

/* Theme chips */
.themes{display:flex; gap:8px; align-items:center}
.chip{
  border:1px solid var(--line); background:#fff; padding:6px 10px; border-radius:999px; font-size:.85rem; cursor:pointer;
  box-shadow:var(--shadow); user-select:none;
}
.chip:hover{transform:translateY(-1px)}
.chip[data-set="orange"]::before{content:""; display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; background:linear-gradient(135deg,#ff7a00,#ffb267)}
.chip[data-set="mint"]::before{background:linear-gradient(135deg,#10b981,#7ce7c4)}
.chip[data-set="violet"]::before{background:linear-gradient(135deg,#8b5cf6,#c4b5fd)}
.chip[data-set="blue"]::before{background:linear-gradient(135deg,#3b82f6,#93c5fd)}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(800px 280px at 10% -10%, #fff, #ffffff00 60%),
    radial-gradient(800px 280px at 90% -20%, #fff, #ffffff00 60%),
    linear-gradient(180deg,#fff,var(--bg) 62%);
  padding:80px 0 40px;
}
.hero__in{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.hero h1{font-family:Poppins,Manrope,Arial; font-size:clamp(28px,4.4vw,48px); line-height:1.1; margin:0 0 12px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:800; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.03)}
.btn--ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.hero__actions{display:flex; gap:10px; margin-top:10px}

/* Animated blobs */
.blob{position:absolute; filter:blur(40px); opacity:.7; pointer-events:none}
.blob.b1{width:480px; height:480px; left:-120px; top:-140px; background:radial-gradient(circle,var(--blob1),transparent 60%); animation:floaty 15s ease-in-out infinite}
.blob.b2{width:520px; height:520px; right:-160px; top:-120px; background:radial-gradient(circle,var(--blob2),transparent 60%); animation:floaty 18s ease-in-out infinite reverse}
.blob.b3{width:420px; height:420px; left:40%; top:260px; background:radial-gradient(circle,var(--blob3),transparent 60%); animation:floaty 22s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(20px) scale(1.05)}}

/* Section: scripts grid */
.section{padding:42px 0}
.section h2{font-family:Poppins,Manrope,Arial; font-size:1.6rem; margin:0 0 16px}
.under{
  height:4px; width:80px; background:linear-gradient(90deg,var(--a1),var(--a2));
  border-radius:3px; margin:4px 0 14px; animation:hue 10s linear infinite;
}
@keyframes hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 6; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0; transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, box-shadow .2s ease;
}
.card.revealed{transform:translateY(0); opacity:1}
.card:hover{box-shadow:0 16px 40px rgba(15,23,42,.08)}
.card h3{margin:0 0 8px; font-size:1.12rem}
.card p{margin:0 0 10px; color:var(--muted)}
.card__meta{display:flex; align-items:center; justify-content:space-between; gap:10px}
.link{font-weight:700; text-decoration:none; background:linear-gradient(135deg,var(--a1),var(--a2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.link:hover{opacity:.85}

/* Icons (inline SVG container) */
.ico{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:var(--shadow)}

/* CTA */
.cta{padding:44px 0 64px}
.cta__in{
  text-align:center; background:linear-gradient(135deg,#ffffff,#fff6ee); border:1px solid #ffe4cf;
  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow)
}

/* Detail: Over & Contact */
.split{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 8px}
.tag{display:inline-block; padding:6px 10px; border:1px dashed #ffd9c2; border-radius:999px; margin:4px 6px 0 0; font-size:.85rem; background:#fff}

/* Modal */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(15,23,42,.35); z-index:60; padding:20px}
.modal.open{display:grid}
.modal__card{max-width:720px; width:100%; background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.18); padding:18px}
.modal__head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.modal__body{margin-top:8px}
.xbtn{border:0; background:#fff; border:1px solid var(--line); width:38px; height:38px; border-radius:10px; cursor:pointer}
.features{margin:10px 0 0 0; padding:0 0 0 18px}
.modal .btn{margin-top:12px}

/* Footer */
.ftr{border-top:1px solid var(--line); background:#fff}
.ftr__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.mini-logo{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2))}
.ftr__copy{padding:8px 0 22px; color:#93a0b2}

/* Back to top */
.topbtn{position:fixed; left:16px; bottom:16px; width:46px; height:46px; border-radius:12px; border:0; color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2)); box-shadow:var(--shadow); display:none; z-index:55; cursor:pointer}
.topbtn.show{display:block}

/* Responsive */
@media (max-width:980px){ .grid .card{grid-column:span 12} .hero__in{grid-template-columns:1fr} }
@media (max-width:760px){
  .nav__toggle{display:block}
  .nav{display:none; position:fixed; top:72px; left:16px; right:16px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); z-index:60}
  .nav.open{display:block}
  .nav ul{flex-direction:column; gap:6px; padding:8px}
  .themes{display:none}
}

/* Motion respect */
@media (prefers-reduced-motion:reduce){
  .blob,.under{animation:none}
  .card{transition:none}
}

html, body { overflow-x: hidden; }
.section, .hero, .container { overflow-x: clip; }