:root{
  --shadow-soft:0 22px 55px rgba(0,0,0,0.34);
  --surface-strong:linear-gradient(180deg,rgba(18,20,27,0.96),rgba(10,12,16,0.94));
  --surface-soft:rgba(255,255,255,0.04);
  --success:#3fd78f;
}

body{
  background:
    radial-gradient(circle at top left,rgba(227,6,19,0.12),transparent 34%),
    radial-gradient(circle at bottom right,rgba(255,255,255,0.04),transparent 28%),
    radial-gradient(circle at top left,#1b1b24 0,#050509 45%,#000000 100%);
}

header{
  background:rgba(7,8,12,0.82) !important;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 45px rgba(0,0,0,0.16);
}

.header-inner{
  gap:32px;
}

.site-logo{
  display:flex;
  align-items:center;
  max-width:270px;
  width:100%;
  flex-shrink:0;
}

.site-logo img{
  width:100%;
  height:auto;
  max-height:56px;
  object-fit:contain;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

header nav{
  margin-left:auto;
}

header nav a{
  transition:color .25s ease,opacity .25s ease;
}

.btn,
.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.8rem;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
  box-shadow:0 14px 40px rgba(227,6,19,0.42);
}

.btn:hover,
.contact-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  box-shadow:0 18px 44px rgba(227,6,19,0.48);
}

.btn-outline{
  background:transparent !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  box-shadow:none !important;
  color:#fff !important;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.32) !important;
}

.section-header{
  margin-bottom:64px;
}

.section-kicker{
  letter-spacing:0.22em;
}

.section-title{
  letter-spacing:-0.04em;
}

.section-sub{
  line-height:1.75;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-bottom span:last-child{
  opacity:.8;
}

body.page-diensten .hero-services,
body.page-tuning .hero-tuning,
body.page-retrofitting .hero,
body.page-over-ons .hero,
body.page-contact .page-hero,
body.page-detailing .hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

body.page-diensten .hero-services::before,
body.page-tuning .hero-tuning::before,
body.page-retrofitting .hero::before,
body.page-over-ons .hero::before,
body.page-contact .page-hero::before,
body.page-detailing .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left,rgba(227,6,19,0.2),transparent 34%),
    linear-gradient(180deg,rgba(5,6,10,0.12),rgba(5,6,10,0.7));
  pointer-events:none;
}

body.page-diensten .hero-services{
  background:
    linear-gradient(135deg,rgba(0,0,0,0.82),rgba(0,0,0,0.9)),
    url('img/Diagnose.jpeg') center/cover no-repeat !important;
}

body.page-tuning .hero-tuning{
  background:
    linear-gradient(135deg,rgba(0,0,0,0.82),rgba(0,0,0,0.9)),
    url('img/FiestaST.jpeg') center/cover no-repeat !important;
}

body.page-retrofitting .hero{
  background:
    linear-gradient(135deg,rgba(0,0,0,0.8),rgba(0,0,0,0.9)),
    url('img/ambient.jpg') center/cover no-repeat !important;
}

body.page-over-ons .hero{
  min-height:68vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg,rgba(0,0,0,0.8),rgba(0,0,0,0.9)),
    url('img/Q8.jpeg') center/cover no-repeat !important;
}

body.page-contact .page-hero{
  padding:190px 0 110px;
  text-align:left;
  background:
    linear-gradient(135deg,rgba(0,0,0,0.82),rgba(0,0,0,0.9)),
    url('img/porsche.jpeg') center/cover no-repeat !important;
}

body.page-detailing .hero{
  background:
    linear-gradient(135deg,rgba(0,0,0,0.82),rgba(0,0,0,0.9)),
    url('img/porsche.jpeg') center/cover no-repeat !important;
}

body.page-diensten .hero-inner,
body.page-tuning .hero-tuning-inner,
body.page-retrofitting .hero-inner,
body.page-detailing .hero .container{
  position:relative;
  z-index:1;
}

body.page-diensten .hero-inner,
body.page-tuning .hero-tuning-inner,
body.page-detailing .hero .container{
  max-width:860px;
}

body.page-diensten .hero-tag,
body.page-tuning .hero-kicker,
body.page-detailing .hero-kicker,
body.page-retrofitting .eyebrow,
body.page-contact .page-hero h1,
body.page-over-ons .hero-card h1{
  position:relative;
  z-index:1;
}

body.page-diensten .hero-tag,
body.page-tuning .hero-kicker,
body.page-detailing .hero-kicker,
body.page-retrofitting .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
}

body.page-diensten .hero-title,
body.page-tuning .hero-title,
body.page-retrofitting .hero-title,
body.page-contact .page-hero h1,
body.page-detailing .hero h1,
body.page-over-ons .hero-card h1{
  font-size:clamp(2.8rem,6vw,4.8rem) !important;
  line-height:0.98 !important;
  letter-spacing:-0.06em !important;
}

body.page-diensten .hero-sub,
body.page-tuning .hero-sub,
body.page-retrofitting .hero-sub,
body.page-contact .page-hero p,
body.page-detailing .hero p,
body.page-over-ons .hero-card p{
  max-width:700px;
  font-size:1.03rem;
  line-height:1.8;
  color:#dce0e8 !important;
}

body.page-over-ons .hero-card{
  position:relative;
  z-index:1;
  background:rgba(7,8,12,0.72);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(16px);
  border-radius:28px;
  padding:34px;
  max-width:780px;
  box-shadow:var(--shadow-soft);
}

body.page-contact .page-hero h1{
  text-align:left;
}

body.page-contact .page-hero p{
  margin:18px 0 0;
}

body.page-contact .contact-intro-card,
body.page-over-ons .cta-box,
body.page-detailing .soon-strip,
body.page-detailing .current-box,
body.page-diensten .highlight-strip,
body.page-diensten .extra-box,
body.page-diensten .note-box,
body.page-tuning .calc-card,
body.page-tuning .calc-mini,
body.page-tuning .calc-brand,
body.page-tuning .cta-strip,
body.page-contact .contact-form,
body.page-contact .contact-info-card,
body.page-contact .map-card,
body.page-retrofitting .hero-card,
body.page-retrofitting .info-card,
body.page-retrofitting .service-card,
body.page-over-ons .value-card,
body.page-over-ons .workspace-photo,
body.page-detailing .service-card{
  background:var(--surface-strong) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:var(--shadow-soft);
}

body.page-diensten .service-card,
body.page-tuning .feature-card,
body.page-tuning .stage-card,
body.page-retrofitting .info-card,
body.page-retrofitting .service-card,
body.page-over-ons .value-card,
body.page-detailing .service-card{
  border-radius:26px;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

body.page-diensten .service-card:hover,
body.page-tuning .feature-card:hover,
body.page-tuning .stage-card:hover,
body.page-retrofitting .info-card:hover,
body.page-retrofitting .service-card:hover,
body.page-over-ons .value-card:hover,
body.page-detailing .service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(227,6,19,0.32) !important;
  box-shadow:0 24px 54px rgba(0,0,0,0.42);
}

body.page-diensten .service-grid,
body.page-detailing .services-grid{
  gap:22px;
}

body.page-tuning .feature-grid,
body.page-tuning .stage-grid,
body.page-over-ons .values-grid{
  gap:22px;
}

body.page-diensten .service-badge,
body.page-retrofitting .service-tag,
body.page-tuning .stage-badge,
body.page-tuning .calc-badge,
body.page-detailing .hero-badge,
body.page-diensten .highlight-item,
body.page-tuning .stat-chip{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
}

body.page-diensten .note-box,
body.page-tuning .calc-brand,
body.page-detailing .current-box,
body.page-over-ons .cta-box{
  border-radius:28px;
}

body.page-diensten .note-box .btn,
body.page-tuning .calc-card .btn,
body.page-tuning .cta-actions .btn,
body.page-diensten .contact-cta .btn-row .btn{
  box-shadow:none;
}

body.page-contact .contact-grid{
  align-items:start;
  gap:28px;
}

body.page-contact .contact-intro-card{
  max-width:860px;
  margin:-42px auto 34px;
  position:relative;
  z-index:2;
  border-radius:28px;
}

body.page-contact .contact-form,
body.page-contact .contact-info-card,
body.page-contact .map-card{
  border-radius:28px;
}

body.page-contact .contact-logo{
  width:min(260px,100%);
  margin:0 0 14px;
}

body.page-contact .contact-btn{
  width:100%;
  box-shadow:none;
}

body.page-contact .map-card{
  overflow:hidden;
}

body.page-over-ons .section-title{
  margin-bottom:28px;
}

body.page-over-ons .section-title h2{
  font-size:clamp(2rem,4vw,2.8rem);
  letter-spacing:-0.04em;
  margin-bottom:14px;
}

body.page-over-ons .section-title p{
  max-width:760px;
  color:var(--text-soft);
  line-height:1.8;
}

body.page-over-ons .workspace-photo{
  min-height:360px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

body.page-over-ons .workspace-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body.page-detailing .hero-note,
body.page-diensten .service-tagline,
body.page-tuning .calc-highlight,
body.page-retrofitting .hero-note{
  color:rgba(255,255,255,0.78);
}

body.page-retrofitting .service-media img{
  width:100%;
  height:240px;
  object-fit:cover;
}

body.page-retrofitting .service-content,
body.page-detailing .service-card,
body.page-diensten .service-card,
body.page-tuning .feature-card,
body.page-tuning .stage-card{
  position:relative;
}

body.page-retrofitting .service-footer .btn{
  padding:10px 18px !important;
  box-shadow:none;
}

body.page-contact .footer-bottom span:last-child,
body.page-diensten .footer-bottom span:last-child,
body.page-tuning .footer-bottom span:last-child,
body.page-retrofitting .footer-bottom span:last-child,
body.page-over-ons .footer-bottom span:last-child,
body.page-detailing .footer-bottom span:last-child{
  letter-spacing:0.08em;
}

@media (max-width:1080px){
  .site-logo{
    max-width:220px;
  }

  body.page-contact .contact-grid,
  body.page-diensten .extra-grid-main,
  body.page-tuning .calc-wrap{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:768px){
  .site-logo{
    max-width:176px;
  }

  .site-logo img{
    max-height:44px;
  }

  body.page-contact .contact-intro-card{
    margin:-26px 20px 26px;
  }

  body.page-over-ons .hero-card,
  body.page-contact .contact-intro-card,
  body.page-contact .contact-form,
  body.page-contact .contact-info-card,
  body.page-contact .map-card,
  body.page-detailing .soon-strip,
  body.page-detailing .current-box,
  body.page-diensten .highlight-strip,
  body.page-diensten .extra-box,
  body.page-diensten .note-box,
  body.page-tuning .calc-card,
  body.page-tuning .calc-mini,
  body.page-tuning .calc-brand{
    border-radius:22px;
  }

  body.page-diensten .hero-title,
  body.page-tuning .hero-title,
  body.page-retrofitting .hero-title,
  body.page-contact .page-hero h1,
  body.page-detailing .hero h1,
  body.page-over-ons .hero-card h1{
    font-size:2.7rem !important;
  }
}