:root{ --accent:#e93594 }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0a0a0a;color:#fff;font-family:"Bebas",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;scroll-behavior:smooth}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:clamp(16px,3vw,40px)}
/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Bebas",sans-serif;font-size:22px;letter-spacing:.06em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.menu a{opacity:.9;font-family:"Bebas",sans-serif;letter-spacing:.06em}
.menu .cta{background:var(--accent);color:#000;padding:10px 16px;border-radius:12px;font-weight:800;box-shadow:0 10px 24px -10px rgba(233,53,148,.65)}

.hero,.page-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero .bg,.page-hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:grayscale(100%);opacity:.95}
.hero .shade,.page-hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.65))}
.hero .inner,.page-hero .inner{position:relative;z-index:1;width:100%}

/* HERO watermark and centered stack */
.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:url("../img/logo-mobile.png");
  background-repeat:no-repeat;
  background-position:65% 50%;
  background-size:min(70vw, 900px);
  opacity:.06; filter:blur(1.5px);
}
.hero .inner.flex{display:grid;grid-template-columns:52% 48%;align-items:center;gap:24px}
.hero-right{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:300px;
}
.hero-right img.logo{
  width:min(40vw,520px); height:auto;
}

.hero-right .tagline{
  margin-top:100px; font-family:'Bebas',sans-serif;
  font-size:24px; line-height:1; letter-spacing:.06em;
  white-space:nowrap; text-align:center;
}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.btn-primary{background:var(--accent);color:#000;padding:12px 20px;border-radius:12px;font-weight:800;box-shadow:0 10px 24px -10px rgba(233,53,148,.65)}
.btn-secondary{border:1px solid rgba(255,255,255,.18);padding:12px 20px;border-radius:12px;font-weight:700;background:rgba(255,255,255,.05)}
.bounce{animation:bounceScale 3s ease-in-out infinite}
@keyframes bounceScale{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (max-width:900px){.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:url("../img/logo-mobile.png");
  background-repeat:no-repeat;
  background-position:65% 50%;
  background-size:min(70vw, 900px);
  opacity:.06; filter:blur(1.5px);
}.hero .inner.flex{grid-template-columns:1fr}.hero-right img.logo{
  width:min(40vw,520px); height:auto;
}
.hero-right{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:300px;
}}

/* Titles */
.title-gobold{font-weight:700;font-size:clamp(48px,9vw,110px);margin:0 0 8px}
.text-bebas{font-family:"Bebas",sans-serif;font-size:clamp(16px,2.2vw,23px);line-height:1.4;max-width:900px}

/* Contact layout + icon centering */
.section{padding:0}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px}
.grid-2{display:grid;gap:22px;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
form{display:grid;gap:12px}
input,textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px;color:#fff;font:inherit}
input::placeholder,textarea::placeholder{color:#9aa}
.icon-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px;flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:160px;height:64px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px}
.icon-btn img{height:26px;width:auto;display:block}
.icon-btn span{display:inline-block;line-height:1}

.footer{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;color:#bbb;font-size:14px;text-align:center;letter-spacing:.08em}


/* Hero background faded logo */
.hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:url("../img/logo-mobile.png");
  background-repeat:no-repeat;
  background-position:65% 50%;
  background-size:min(70vw, 900px);
  opacity:.06; filter:blur(1.5px);
}

/* Hero layout adjustments */
.hero-right{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:300px;
}
.hero-right img.logo{
  width:min(40vw,520px); height:auto;
}

.hero-right .tagline{
  margin-top:100px; font-family:'Bebas',sans-serif;
  font-size:24px; line-height:1; letter-spacing:.06em;
  white-space:nowrap; text-align:center;
}
.hero-right .btns{
  margin-top:100px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
}


/* === v17: hero logo groter & gecentreerd + contact icon fix === */
.hero .inner.flex{grid-template-columns:52% 48%;align-items:center}
.hero-right{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:260px}
.hero-right img.logo{width:clamp(320px, 30vw, 560px);height:auto}
.hero-right .tagline{margin-top:80px;font-size:19px;line-height:1.2;letter-spacing:.06em;white-space:nowrap;text-align:center}
.hero-right .btns{margin-top:80px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
@keyframes bounceScale{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.bounce{animation:bounceScale 2.8s ease-in-out infinite}

/* Desktop: geen zoom; focus links */
@media (min-width:1024px){
  .hero .bg{background-size:contain;background-repeat:no-repeat;background-position:left center}
}

/* Contact icons netjes gecentreerd */
.icon-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:12px;padding:12px 18px;min-width:180px;height:60px;
  border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.icon-btn img{height:26px;width:auto;display:block;flex:0 0 auto}
.icon-btn span{line-height:1;display:inline-block;transform:translateY(1px)}