/*
Theme Name: VGM-Inspecties Modern
Theme URI: https://vgm-inspecties.nl
Author: VGM-Inspecties
Description: Modern, snel en mobiel WordPress-thema voor VGM-Inspecties.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vgm-inspecties-modern
*/

:root { --ink:#0a1b26; --navy:#071a26; --navy-2:#0d2d3d; --green:#7fc142; --green-dark:#5a9827; --cream:#f5f7f3; --muted:#5d6b72; --line:#dce3de; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
.site-header { height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,96px); background:white; position:relative; z-index:5; border-bottom:1px solid #e9eeea; }
.brand { display:flex; align-items:center; gap:14px; }
.official-logo{display:block;width:min(310px,42vw);height:68px;object-fit:contain;object-position:left center}
.brand-mark { width:60px; height:54px; background:var(--navy); color:white; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:-3px; font-style:italic; }
.brand-mark b { color:var(--green); font-size:25px; }.brand-mark span{font-size:22px}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:19px;letter-spacing:.01em}.brand-copy small{font-size:11px;color:#708087;margin-top:5px;letter-spacing:.03em}.site-header nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:650}.site-header nav a:not(.nav-cta):hover{color:var(--green-dark)}.nav-cta{background:var(--green);padding:13px 20px;border-radius:4px;color:#102014}
.hero { position:relative; min-height:660px; padding:95px clamp(24px,8vw,130px); color:white; background:radial-gradient(circle at 75% 40%,#17485a 0,#0d2c3b 30%,#071a26 65%); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr); align-items:center; gap:7vw; overflow:hidden; }
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to right,black,transparent)}
.hero-glow{position:absolute;width:450px;height:450px;border:1px solid rgba(127,193,66,.2);border-radius:50%;right:4%;top:13%}.hero-glow::before,.hero-glow::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;inset:55px}.hero-glow::after{inset:115px}
.hero-content,.hero-card{position:relative;z-index:1}.eyebrow{margin:0 0 18px;color:#a9d77d;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.18em}.eyebrow.dark{color:var(--green-dark)}h1{font-size:clamp(44px,5.3vw,78px);line-height:1.04;letter-spacing:-.045em;margin:0;max-width:850px}h1 span{color:var(--green)}.hero-lead{font-size:18px;color:#c3d0d5;max-width:710px;margin:27px 0 32px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:15px 21px;border-radius:4px;font-weight:750;font-size:14px;min-height:54px}.button.primary{background:var(--green);color:#0b2013}.button.secondary{border:1px solid rgba(255,255,255,.27);color:white}.button:hover{transform:translateY(-1px)}.trust-row{margin-top:35px;display:flex;gap:25px;flex-wrap:wrap;color:#dce4e7;font-size:13px}.trust-row i{font-style:normal;color:var(--green);margin-right:7px}
.hero-card{border:1px solid rgba(255,255,255,.15);padding:30px;background:rgba(255,255,255,.055);backdrop-filter:blur(6px)}.inspection-visual{height:220px;position:relative;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.05),transparent);display:grid;place-items:center;overflow:hidden}.inspection-visual::before{content:"VGM";font-weight:900;font-size:90px;letter-spacing:-10px;color:rgba(255,255,255,.06)}.scan-line{position:absolute;left:0;right:0;top:52%;height:2px;background:var(--green);box-shadow:0 0 18px var(--green)}.check{position:absolute;width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--navy);display:grid;place-items:center;font-size:35px;font-weight:900}.hero-card p{font-size:18px;font-weight:700;margin:22px 0 5px}.hero-card small{color:#aebfc5}
.quickbar{background:var(--green);padding:20px clamp(24px,8vw,130px);display:flex;align-items:center;justify-content:space-between;gap:20px}.quickbar p{display:flex;gap:18px;margin:0}.quickbar p span{opacity:.75}.quickbar a{font-weight:800;border-bottom:1px solid rgba(0,0,0,.35)}
.section{padding:105px clamp(24px,8vw,130px)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:48px}.section-heading h2,.approach h2,.about h2,.contact h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.035em;margin:0}.section-heading>p{max-width:510px;color:var(--muted);margin:0}.services{background:var(--cream)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{background:white;border:1px solid var(--line);padding:28px;min-height:410px;display:flex;flex-direction:column;transition:.2s}.service-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(10,27,38,.08);border-color:#b8c9bc}.service-top{display:flex;justify-content:space-between;align-items:center}.service-number{color:#9eaaa5;font-size:12px}.standard{font-size:10px;background:#edf4e8;color:#4e792d;padding:5px 8px;font-weight:800}.service-icon{width:58px;height:58px;margin:35px 0 28px;background:var(--navy);display:grid;place-items:center;border-radius:3px}.service-icon span{display:block;width:29px;height:26px;border:3px solid var(--green);border-radius:3px}.icon-2 span{border-radius:0;border-width:0 3px;background:repeating-linear-gradient(to bottom,var(--green) 0 3px,transparent 3px 8px)}.icon-3 span{border-radius:50%;border-width:4px}.icon-4 span{transform:rotate(45deg);border-radius:50% 3px 50% 3px}.service-card h3{font-size:20px;line-height:1.2;margin:0 0 14px}.service-card p{color:var(--muted);font-size:14px;margin:0 0 25px}.service-card a{margin-top:auto;font-weight:750;font-size:13px;color:#3e7320}.service-card a span{float:right}
.approach{padding:105px clamp(24px,8vw,130px);background:var(--navy);color:white;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.approach-copy>p:not(.eyebrow){color:#b6c4c9;max-width:610px}.approach ul{list-style:none;padding:15px 0;margin:0}.approach li{padding:9px 0;color:#e4eaec}.approach li span{color:var(--green);margin-right:12px}.text-link{display:inline-block;margin-top:12px;color:var(--green);font-weight:800;border-bottom:1px solid rgba(127,193,66,.5)}.steps{display:flex;flex-direction:column;justify-content:center}.steps article{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.13)}.steps article>span{width:42px;height:42px;border:1px solid var(--green);color:var(--green);display:grid;place-items:center;border-radius:50%;font-weight:800}.steps h3{margin:0 0 5px;font-size:19px}.steps p{margin:0;color:#aebdc2;font-size:14px}
.about{display:grid;grid-template-columns:.7fr 1.3fr;gap:10vw;align-items:center}.about-badge{aspect-ratio:1;max-width:390px;background:var(--green);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.about-badge strong{font-size:80px;letter-spacing:-9px;font-style:italic}.about-badge span{font-size:11px;font-weight:800;letter-spacing:.12em}.about>div:last-child>p:not(.eyebrow){color:var(--muted);max-width:680px;font-size:16px}
.contact{margin:0 clamp(24px,6vw,96px) 70px;background:var(--green);padding:65px clamp(30px,5vw,75px);display:flex;justify-content:space-between;align-items:center;gap:50px}.contact .eyebrow{color:#315d19}.contact>div:first-child{max-width:700px}.contact>div:first-child>p:last-child{max-width:620px}.button.light{background:var(--navy);color:white;min-width:210px}.contact-actions{display:flex;flex-direction:column;align-items:stretch;min-width:235px}.contact-phone{margin-top:10px;padding:11px 16px;text-align:center;border:1px solid rgba(7,26,38,.35);border-radius:4px;font-weight:800}.contact-phone:hover{background:rgba(255,255,255,.28)}.contact-actions p{font-size:12px;opacity:.7;margin:10px 0 0;text-align:center}footer{background:#061620;color:#cad5d9;padding:55px clamp(24px,8vw,130px) 30px;display:grid;grid-template-columns:1fr 1fr auto;gap:35px;align-items:center}.footer-brand{color:white}.footer-brand .brand-mark{border:1px solid #24404e}.footer-brand small{color:#899ba3}footer>p{font-size:13px}footer>p a:hover{color:var(--green)}footer>div:nth-of-type(2){display:flex;gap:22px;font-size:13px}footer>small{grid-column:1/-1;padding-top:25px;border-top:1px solid #19323e;color:#71868f}
@media(max-width:1000px){.site-header nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr}.hero-card{display:none}.service-grid{grid-template-columns:1fr 1fr}.approach{gap:6vw}.about{gap:6vw}footer{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.site-header{height:82px;padding:0 18px}.brand-mark{width:48px;height:44px}.brand-copy small{display:none}.brand-copy strong{font-size:16px}.nav-cta{padding:11px 13px;font-size:12px}.hero{min-height:auto;padding:72px 22px 65px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column}.button{width:100%}.trust-row{gap:12px;flex-direction:column}.quickbar{align-items:flex-start;flex-direction:column;padding:22px}.quickbar p{flex-direction:column;gap:2px}.section{padding:75px 22px}.section-heading{display:block}.section-heading>p{margin-top:20px}.service-grid{grid-template-columns:1fr}.service-card{min-height:355px}.approach{padding:75px 22px;grid-template-columns:1fr}.steps{margin-top:20px}.about{grid-template-columns:1fr}.about-badge{max-width:260px;margin:auto}.about-badge strong{font-size:58px}.contact{margin:0 14px 45px;padding:45px 24px;display:block}.contact-actions{margin-top:25px}footer{padding:45px 22px 25px;grid-template-columns:1fr}footer>div:nth-of-type(2){flex-wrap:wrap}}

/* Herkenbaar stekkersymbool voor elektrische arbeidsmiddelen */
.icon-1 span{position:relative;width:18px;height:23px;border:3px solid var(--green);border-radius:3px 3px 7px 7px}
.icon-1 span::before{content:"";position:absolute;width:3px;height:9px;background:var(--green);left:1px;top:-12px;box-shadow:8px 0 0 var(--green)}
.icon-1 span::after{content:"";position:absolute;width:3px;height:11px;background:var(--green);left:5px;bottom:-12px;border-radius:0 0 3px 3px}
.footer-brand{background:#fff;padding:8px 12px;width:max-content;max-width:100%}
.footer-brand .official-logo{width:240px;height:54px}

/* Persoon met valharnas */
.icon-3 span{position:relative;width:11px;height:11px;border:0;border-radius:50%;background:var(--green);margin-top:-26px}
.icon-3 span::before{content:"";position:absolute;left:-8px;top:14px;width:21px;height:27px;border:3px solid var(--green);border-top:0;clip-path:polygon(20% 0,50% 34%,80% 0,100% 10%,67% 47%,95% 100%,70% 100%,50% 61%,30% 100%,5% 100%,33% 47%,0 10%)}
.icon-3 span::after{content:"";position:absolute;left:-5px;top:22px;width:15px;height:12px;border-left:3px solid var(--green);border-right:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(45deg)}

/* Blad voor tuin- en parkmachines */
.icon-4 span{position:relative;width:31px;height:23px;border:3px solid var(--green);border-radius:100% 0 100% 0;transform:rotate(-15deg);background:transparent}
.icon-4 span::after{content:"";position:absolute;width:28px;height:3px;background:var(--green);left:-4px;top:12px;transform:rotate(-35deg);transform-origin:left center}

.safety-badge strong{font-size:82px;letter-spacing:0;font-style:normal;line-height:.9}
.safety-badge span{margin-top:18px;line-height:1.65}
.footer-name{display:flex;flex-direction:column;color:#fff;line-height:1.2}
.footer-name strong{font-size:24px;letter-spacing:.01em}
.footer-name span{margin-top:7px;color:#8fa1a9;font-size:12px}

/* Duidelijke, direct herkenbare categorie-iconen */
.service-icon.icon-3,.service-icon.icon-4{position:relative;overflow:hidden}
.service-icon.icon-3 span,.service-icon.icon-4 span{display:none}
.service-icon.icon-3::before{content:"🧗";font-size:35px;line-height:1;position:relative;z-index:2;filter:saturate(1.2)}
.service-icon.icon-3::after{content:"";position:absolute;right:9px;top:0;bottom:0;width:3px;background:var(--green);box-shadow:0 0 5px rgba(127,193,66,.5)}
.service-icon.icon-4::before{content:"🍃";font-size:36px;line-height:1;filter:saturate(1.25)}

.about-logo-panel{min-height:330px;background:var(--green);display:flex;align-items:center;justify-content:center;padding:42px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.about-logo-panel img{display:block;width:100%;max-width:330px;height:auto;background:#fff;padding:12px}

/* Tandwiel voor tuin- en parkmachines */
.service-icon.icon-4::before{content:"⚙";font-family:Arial,sans-serif;font-size:43px;line-height:1;color:var(--green);filter:none}

.service-icon.icon-3::before,.service-icon.icon-3::after{content:none!important;display:none!important}
.service-icon.icon-3 img{display:block;width:52px;height:52px;object-fit:contain}
.service-icon.icon-4::before{content:none!important;display:none!important}
.service-icon.icon-4 img{display:block;width:43px;height:43px;object-fit:contain}

/* Smalle ladder: de lange ladderbomen steken boven en onder de sporten uit */
.service-icon.icon-2 span{position:relative;width:18px;height:38px;border:0;border-left:3px solid var(--green);border-right:3px solid var(--green);border-radius:0;background:none}
.service-icon.icon-2 span::before{content:"";position:absolute;left:0;top:8px;width:12px;height:3px;background:var(--green);box-shadow:0 9px 0 var(--green),0 18px 0 var(--green)}

/* Zes diensten: hijsmiddelen en magazijnstellingen */
.service-grid{grid-template-columns:repeat(3,1fr)}
.service-icon.icon-5 span{position:relative;width:17px;height:30px;border:4px solid var(--green);border-radius:12px;transform:rotate(-38deg)}
.service-icon.icon-5 span::after{content:"";position:absolute;width:17px;height:30px;border:4px solid var(--green);border-radius:12px;left:12px;top:14px}
.service-icon.icon-5 img{display:block!important;width:43px!important;height:43px!important;max-width:none!important;object-fit:contain}
.service-icon.icon-6 span{position:relative;width:35px;height:34px;border:3px solid var(--green);border-top:0;border-bottom:0;border-radius:0}
.service-icon.icon-6 span::before{content:"";position:absolute;left:0;right:0;top:7px;height:3px;background:var(--green);box-shadow:0 10px 0 var(--green),0 20px 0 var(--green)}
@media(max-width:1000px){.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.service-grid{grid-template-columns:1fr}}