/* ============================================================
   AVL-Install — gedeelde site-stijl (subpagina's)
   Tokens + nav + footer + typografie matchen home.html 1-op-1.
   Bron-van-waarheid voor de Astro-port van SiteNav/SiteFooter/Hero.
   ============================================================ */
@font-face{font-family:"Milker";src:url("/fonts/Milker.otf") format("opentype");font-weight:400;font-display:swap;}
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --stage:#0A0A0B; --obsidian:#06060A; --panel:#0E0F14; --panel-2:#12131A;
  --champ:#D4B98C; --champ-x:#F2E5C8; --champ-l:#EBD9B0; --signal:#5EA6E0;
  --fg1:#F2E5C8; --fg2:rgba(235,217,176,.74); --fg3:rgba(235,217,176,.52); --fg4:rgba(235,217,176,.30);
  --line:rgba(212,185,140,.15); --line-soft:rgba(212,185,140,.32);
  --fd:"Milker",sans-serif; --fh:"Milker",sans-serif; --fb:"Google Sans Flex",system-ui,sans-serif; --fm:"JetBrains Mono",ui-monospace,monospace;
  --maxw:1320px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --ease:cubic-bezier(0.16,1,0.30,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}
body{margin:0;background:var(--obsidian);color:var(--fg2);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--champ);color:var(--obsidian);}
a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;position:relative;z-index:2;}
@media(max-width:720px){.wrap{padding:0 22px;}}

/* fx + atmosfeer */
.fx-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.fx-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);}
#spot{position:fixed;inset:0;z-index:55;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .6s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(212,185,140,.13),rgba(94,166,224,.05) 36%,transparent 62%);}
body.spot-on #spot{opacity:1;}
.atmo{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(110px);mix-blend-mode:screen;will-change:transform;}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){#spot{display:none;}.orb{animation:none!important;opacity:.22!important;}.fx-grain,.fx-scan{display:none;}}
.rv{will-change:transform,opacity,filter;}
/* herbruikbare tech-section-visual (rechts achter de hero-tekst, gedimd, hero-stijl) */
.section-viz{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(68%,820px);height:auto;opacity:.22;mix-blend-mode:screen;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 72% 82% at 68% 50%,#000 22%,transparent 76%);mask-image:radial-gradient(ellipse 72% 82% at 68% 50%,#000 22%,transparent 76%);animation:secViz 18s ease-in-out infinite;}
@keyframes secViz{0%,100%{transform:translateY(-50%) scale(1);opacity:.20;}50%{transform:translateY(-50%) scale(1.025);opacity:.27;}}
@media(prefers-reduced-motion:reduce){.section-viz{opacity:.15;animation:none;}}
@media(max-width:820px){.section-viz{width:128%;right:-14%;opacity:.13;}}
/* herbruikbare in-content visual voor subpagina-body's */
.page-figure{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:16/7;background:#000;margin:clamp(40px,6vh,72px) 0 0;box-shadow:0 30px 80px rgba(0,0,0,.45);}
.page-figure img{width:100%;height:100%;object-fit:cover;opacity:.9;display:block;}
.page-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,10,.72),transparent 50%),linear-gradient(90deg,rgba(6,6,10,.5),transparent 45%);}
.page-figure figcaption{position:absolute;left:clamp(20px,3vw,34px);bottom:clamp(16px,2.5vw,26px);z-index:2;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--champ-l);}
.page-figure figcaption::before{content:"⚡ ";color:var(--champ);}
@media(max-width:680px){.page-figure{aspect-ratio:4/3;}}

/* typografie */
.eyebrow{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champ);}
h2.sec{font-family:var(--fd);font-weight:400;font-size:clamp(26px,3.1vw,42px);line-height:.98;letter-spacing:-.005em;text-transform:uppercase;color:var(--fg1);margin:16px 0 0;max-width:860px;}
h2.sec em{font-style:normal;color:var(--champ);}
.lead{color:var(--fg2);font-size:clamp(15px,1.3vw,18px);line-height:1.6;font-weight:300;max-width:620px;margin:22px 0 0;}
.meta{font-family:var(--fm);font-size:11px;color:var(--fg3);letter-spacing:.10em;text-transform:uppercase;line-height:1.7;}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:46px;}
@media(max-width:720px){.head{flex-direction:column;align-items:flex-start;gap:18px;}}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-size:12px;font-weight:300;text-transform:uppercase;letter-spacing:.14em;padding:13px 22px;border-radius:999px;cursor:pointer;border:1px solid var(--line-soft);transition:all .3s var(--ease);}
.btn--champ{background:rgba(212,185,140,.16);color:var(--champ-x);}
.btn--champ:hover{background:rgba(212,185,140,.3);transform:translateY(-1px);box-shadow:0 10px 34px rgba(212,185,140,.18);}
.btn--ghost{background:rgba(255,255,255,.02);color:var(--champ);}
.btn--ghost:hover{background:rgba(212,185,140,.10);border-color:var(--line-soft);}
section{position:relative;}
.laser{height:1px;width:100%;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-soft) 18%,rgba(245,229,200,.6) 50%,var(--line-soft) 82%,transparent);opacity:.6;}

/* NAV */
.nav-shell{position:fixed;top:18px;left:18px;right:18px;z-index:60;display:flex;justify-content:center;pointer-events:none;}
.nav{width:100%;max-width:var(--maxw);pointer-events:auto;display:flex;align-items:center;justify-content:space-between;padding:9px 14px 9px 20px;border-radius:999px;background:rgba(10,10,12,.45);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);border:1px solid var(--line-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 40px rgba(0,0,0,.5);}
.nav__logo{height:44px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));}
.nav__l{display:flex;gap:24px;}
.nav__l a{font-family:var(--fb);font-size:13px;font-weight:300;text-transform:uppercase;letter-spacing:.16em;color:var(--fg3);transition:color .25s;}
.nav__l a:hover{color:var(--champ-x);}
.nav__l a[aria-current]{color:var(--champ-x);font-weight:500;text-shadow:0 0 16px rgba(212,185,140,.7),0 0 5px rgba(212,185,140,.45);}
.nav__l a[href="laadpaal-install.html"]{color:var(--signal);text-shadow:0 0 12px rgba(94,166,224,.55);transition:color .25s,text-shadow .25s;}
.nav__l a[href="laadpaal-install.html"]:hover,.nav__l a[href="laadpaal-install.html"][aria-current]{color:#d4ecff;text-shadow:0 0 18px rgba(94,166,224,.9);}
.nav__cta{font-family:var(--fb);font-size:11.5px;font-weight:300;text-transform:uppercase;letter-spacing:.14em;padding:10px 18px;border-radius:999px;color:var(--champ-x);background:rgba(212,185,140,.16);border:1px solid var(--line-soft);}
@media(max-width:820px){.nav__l{display:none;}}

/* PAGE HERO (subpagina's — compacter dan home full-bleed) */
.phero{padding:clamp(150px,22vh,230px) 0 clamp(56px,8vh,90px);position:relative;overflow:hidden;}
.phero .orb{width:640px;height:480px;left:50%;top:-6%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(212,185,140,.12),transparent 64%);}
.phero h1{font-family:var(--fd);font-weight:400;text-transform:uppercase;font-size:clamp(25px,3.0vw,40px);line-height:1.1;letter-spacing:.012em;color:var(--champ-x);margin:16px 0 0;max-width:840px;}
.phero h1 em{font-style:normal;color:var(--champ);}
.phero .sub{color:var(--fg2);font-size:clamp(15px,1.4vw,19px);line-height:1.6;font-weight:300;max-width:660px;margin:24px 0 0;}
.phero .pcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}

/* PROSE / long-form */
.prose{max-width:720px;}
.prose h2{font-family:var(--fd);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);color:var(--champ-x);margin:48px 0 0;letter-spacing:.005em;line-height:1.05;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--fg2);font-size:clamp(15px,1.3vw,17.5px);line-height:1.7;font-weight:300;margin:18px 0 0;}
.prose p strong{color:var(--champ-x);font-weight:500;}

/* FOOTER */
footer{background:var(--obsidian);border-top:1px solid var(--line);padding:60px 0 34px;position:relative;z-index:2;}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;}
.foot__logo{height:40px;margin-bottom:16px;opacity:.6;filter:drop-shadow(0 0 10px rgba(212,185,140,.18));}
.foot__addr{color:var(--fg3);font-size:14px;line-height:1.7;font-weight:300;}
.foot__addr a{color:var(--champ-l);}
.foot__col h4{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg4);margin:6px 0 16px;}
.foot__col a{display:block;color:var(--fg3);font-size:14px;margin-bottom:11px;transition:color .25s;font-weight:300;}
.foot__col a:hover{color:var(--champ-x);}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--fg4);font-family:var(--fm);font-size:11px;letter-spacing:.04em;}
.foot__bottom .credit{color:var(--fg3);}
@media(max-width:820px){.foot{grid-template-columns:1fr;gap:28px;}}