/* Steam&Drive — gedeelde stijl voor alle pagina's */

:root{
  --radius: 1rem;
  --background: oklch(12% .012 135);
  --foreground: oklch(99% 0 0);
  --card: oklch(17% .014 135);
  --card-foreground: oklch(99% 0 0);
  --primary: oklch(75% .19 130);
  --primary-foreground: oklch(12% .012 135);
  --secondary: oklch(23% .02 135);
  --secondary-foreground: oklch(99% 0 0);
  --muted: oklch(23% .02 135);
  --muted-foreground: oklch(79% .012 135);
  --border: oklch(100% 0 0/.12);
  --glass: oklch(100% 0 0/.06);
  --glass-strong: oklch(100% 0 0/.11);
  --hairline: oklch(100% 0 0/.12);
  --gradient-page: linear-gradient(135deg, oklch(10% .008 135) 0%, oklch(16% .026 135) 52%, oklch(12% .02 130) 100%);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background: oklch(12% .012 135)}
body{
  background: var(--gradient-page);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family: var(--font-display); line-height:1.12; letter-spacing:-0.01em}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color: var(--primary); text-transform:uppercase;
  background: var(--glass); border:1px solid var(--hairline);
  padding:.4em 1em; border-radius:999px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 1.6em; border-radius:999px; font-weight:600; font-size:.98rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary); color:var(--primary-foreground)}
.btn-primary:hover{opacity:.92}
.btn-ghost{background:var(--glass); color:var(--foreground); border-color:var(--hairline)}
.btn-ghost:hover{background:var(--glass-strong)}
.btn-block{width:100%}

/* Nav */
header.site-header{
  position:sticky; top:0; z-index:50;
  background: oklch(12% .012 135 / .78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1180px; margin:0 auto; gap:10px}
.nav .brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700; font-size:1.1rem; white-space:nowrap}
.nav .brand img{height:30px; width:auto}
.nav nav{display:flex; align-items:center; gap:28px}
.nav nav a{font-size:.95rem; color:var(--muted-foreground); transition:color .15s ease}
.nav nav a:hover, .nav nav a.active{color:var(--foreground)}
.nav .cta{display:flex; align-items:center; gap:12px; flex-shrink:0}
.nav-toggle{display:none; background:none; border:1px solid var(--hairline); border-radius:.6em; color:var(--foreground); padding:.5em .7em; font-size:1.1rem}

@media (max-width: 420px){
  .nav{padding:12px 14px}
  .nav .brand{font-size:.92rem; gap:.4em}
  .nav .brand img{height:24px}
  .nav .cta{gap:8px}
  .nav .cta .btn-primary{padding:.7em 1.1em; font-size:.88rem}
}

@media (max-width: 860px){
  .nav nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--background); flex-direction:column; align-items:flex-start; padding:24px; gap:20px; border-bottom:1px solid var(--hairline)}
  .nav nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .nav .cta .btn-ghost{display:none}
  .nav{position:relative}
}

/* Hero */
.hero{padding:72px 0 56px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.4rem); margin:.5em 0 .4em}
.hero h1 .accent{color:var(--primary)}
.hero p.lead{color:var(--muted-foreground); font-size:1.08rem; max-width:52ch; margin-bottom:1.8em}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.4em}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap}
.hero-stats .stat b{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--primary)}
.hero-stats .stat span{font-size:.85rem; color:var(--muted-foreground)}
.hero-media{position:relative; border-radius:1.4rem; overflow:hidden; border:1px solid var(--hairline)}
.hero-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.hero-media .flag{position:absolute; left:16px; bottom:16px; background:var(--glass-strong); backdrop-filter:blur(10px); border:1px solid var(--hairline); border-radius:1rem; padding:12px 16px}
.hero-media .flag b{display:block; font-family:var(--font-display); color:var(--primary)}

/* Sections */
section{padding:64px 0}
.section-head{max-width:620px; margin:0 auto 40px; text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:.5em}
.section-head p{color:var(--muted-foreground)}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:28px;
}
.glass{background:var(--glass); border:1px solid var(--hairline); border-radius:var(--radius); backdrop-filter:blur(10px)}

/* Why-steam grid */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.feature-grid{grid-template-columns:1fr}}
.feature{padding:24px; text-align:left}
.feature .ico{width:40px; height:40px; border-radius:.8em; background:var(--glass-strong); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--primary); font-size:1.2rem}
.feature h3{font-size:1.05rem; margin-bottom:.4em}
.feature p{color:var(--muted-foreground); font-size:.92rem}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px}
@media (max-width:760px){.pricing-grid{grid-template-columns:1fr}}
.price-card{display:flex; flex-direction:column; gap:14px; position:relative}
.price-card h3{font-size:1.2rem}
.price-card .price{font-family:var(--font-display); font-size:2rem; color:var(--primary)}
.price-card p.desc{color:var(--muted-foreground); font-size:.92rem; min-height:2.6em}
.price-card ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin:6px 0 10px}
.price-card ul li{font-size:.9rem; color:var(--foreground); display:flex; gap:.6em; align-items:flex-start}
.price-card ul li:before{content:"✓"; color:var(--primary); font-weight:700}
.price-card.flagship{
  grid-column:1 / -1; border:1px solid oklch(75% .19 130 / .5);
  background:linear-gradient(135deg, oklch(23% .05 130/.9), var(--card));
}
.price-card.flagship .badge{
  position:absolute; top:-12px; left:28px; background:var(--primary); color:var(--primary-foreground);
  font-size:.75rem; font-weight:700; padding:.35em .9em; border-radius:999px; letter-spacing:.03em;
}
.price-card.flagship .price-flagship-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center}
@media (max-width:760px){.price-card.flagship .price-flagship-grid{grid-template-columns:1fr}}

.addons{margin-top:28px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:760px){.addons{grid-template-columns:1fr}}
.addons .card{padding:20px}
.addons h4{font-size:1rem; margin-bottom:.3em}
.addons p{color:var(--muted-foreground); font-size:.88rem}

/* Before/after */
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr}}
.ba-item{border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline)}
.ba-images{display:grid; grid-template-columns:1fr 1fr}
.ba-images figure{position:relative; margin:0}
.ba-images img{aspect-ratio:3/4; object-fit:cover; width:100%}
.ba-images figcaption{position:absolute; top:10px; left:10px; background:oklch(12% .012 135/.7); font-size:.72rem; padding:.25em .7em; border-radius:999px}
.ba-caption{padding:16px; font-size:.9rem; color:var(--muted-foreground)}

/* Testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi{padding:24px}
.testi .stars{color:var(--primary); margin-bottom:10px; letter-spacing:.1em}
.testi p.quote{font-size:.95rem; margin-bottom:16px}
.testi .who{display:flex; align-items:center; gap:10px}
.testi .avatar{width:34px; height:34px; border-radius:50%; background:var(--glass-strong); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary); font-size:.85rem}
.testi .who span{display:block; font-size:.82rem; color:var(--muted-foreground)}

/* Service area */
.area-pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.area-pill{background:var(--glass); border:1px solid var(--hairline); border-radius:999px; padding:.5em 1.1em; font-size:.88rem}
.map-embed{border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); margin-top:28px}
.map-embed iframe{width:100%; height:360px; border:0; display:block; filter:grayscale(.2) invert(.92) contrast(.9)}

/* CTA band */
.cta-band{
  border-radius:1.6rem; padding:56px 40px; text-align:center;
  background:linear-gradient(135deg, oklch(23% .05 130/.9), var(--card));
  border:1px solid var(--hairline);
}
.cta-band h2{margin-bottom:.4em}
.cta-band p{color:var(--muted-foreground); margin-bottom:1.6em}

/* Footer */
footer.site-footer{border-top:1px solid var(--hairline); padding:40px 0; margin-top:40px}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.footer-grid .brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:700}
.footer-grid .brand img{height:26px}
.footer-links{display:flex; gap:22px; flex-wrap:wrap}
.footer-links a{color:var(--muted-foreground); font-size:.9rem}
.footer-note{color:var(--muted-foreground); font-size:.8rem; margin-top:20px; text-align:center}

/* Page header (binnenpaginas) */
.page-hero{padding:56px 0 24px; text-align:center}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem); margin:.4em 0}
.page-hero p{color:var(--muted-foreground); max-width:60ch; margin:0 auto}

/* Generic two-col */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}

/* Form */
form.contact-form{display:flex; flex-direction:column; gap:16px}
form.contact-form label{font-size:.88rem; color:var(--muted-foreground); margin-bottom:6px; display:block}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; background:var(--secondary); border:1px solid var(--hairline); color:var(--foreground);
  border-radius:.8em; padding:.85em 1em; font-family:var(--font-sans); font-size:.95rem;
}
form.contact-form textarea{min-height:120px; resize:vertical}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus{outline:2px solid var(--primary); outline-offset:1px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem; color:var(--muted-foreground)}

/* Contact info cards */
.contact-info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px}
@media (max-width:760px){.contact-info-grid{grid-template-columns:1fr}}
.contact-info-grid .card{text-align:center}
.contact-info-grid .ico{width:44px; height:44px; border-radius:50%; background:var(--glass-strong); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--primary); font-size:1.3rem}

/* B2B */
.b2b-usp{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px}
@media (max-width:700px){.b2b-usp{grid-template-columns:1fr}}

/* Badges */
.tag{display:inline-block; background:var(--glass); border:1px solid var(--hairline); border-radius:999px; padding:.3em .9em; font-size:.78rem; color:var(--muted-foreground); margin-right:8px; margin-bottom:8px}