/* ==========================================================================
   KAMP EFFECTS — site styles · v1.0
   Layered on top of kamp-tokens.css. Never hard-code a hex here either —
   if a value isn't a token, question it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELF-HOSTED FONTS — uncomment after placing woff2 files in assets/fonts/
   (see the TODO in functions.php), then remove the TEMP Google Fonts enqueue.
-----------------------------------------------------------------------------
@font-face{font-family:'Outfit';src:url('../fonts/outfit-v11-latin-200.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/outfit-v11-latin-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/outfit-v11-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fonts/outfit-v11-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-v8-latin-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-v8-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-v8-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-v8-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-v19-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-v19-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
--------------------------------------------------------------------------- */

/* ---------- base additions ---------- */
html{scroll-behavior:smooth}
body{line-height:1.7}
a{color:var(--gloed);text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s5)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--violet)}
h1{font-family:var(--display);font-weight:200;letter-spacing:.04em;line-height:1.12}
h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.6vw,38px);letter-spacing:.03em}
h3{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.05em}
.muted{color:var(--linnen-60)}
.mono{font-family:var(--mono)}
.btn{display:inline-block}
.btn-sm{padding:8px 18px;font-size:13px}

/* ---------- nav ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(5,1,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rand)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--linnen)}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--nacht);border:1px solid var(--rand-sterk);position:relative;overflow:hidden;flex:none}
.brand .mark::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-4%;height:62%;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--nacht);box-shadow:0 -7px 15px 2px rgba(146,72,232,.9),0 -2px 6px rgba(213,151,243,.95)}
.brand .wm{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.32em}
.navlinks{display:flex;align-items:center;gap:var(--s6)}
.navlinks a{font-size:14px;color:var(--linnen-60);transition:color .2s}
.navlinks a:hover,.navlinks a.active,.navlinks .current-menu-item a{color:var(--linnen)}
.navlinks a.btn{color:var(--linnen)}
.menu-btn{display:none;background:none;border:1px solid var(--rand-sterk);border-radius:var(--r-s);color:var(--linnen);font-family:var(--mono);font-size:11px;letter-spacing:.15em;padding:8px 14px;cursor:pointer}
@media (max-width:760px){
  .navlinks{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(5,1,7,.97);border-bottom:1px solid var(--rand);flex-direction:column;align-items:flex-start;padding:var(--s5);gap:var(--s4)}
  .navlinks.open{display:flex}
  .menu-btn{display:block}
}

/* ---------- the dawn (signature) ---------- */
.dawn-wrap{position:relative;overflow:hidden}
.dawn{position:absolute;left:-45%;right:-45%;bottom:-62%;height:120%;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--nacht);box-shadow:0 -30px 90px 10px rgba(146,72,232,.55),0 -8px 32px rgba(213,151,243,.8)}
.dawn.low{box-shadow:0 -18px 55px 3px rgba(146,72,232,.32),0 -5px 18px rgba(213,151,243,.4)}
.dawn.high{box-shadow:0 -50px 120px 18px rgba(146,72,232,.68),0 -12px 44px rgba(213,151,243,.95),0 -2px 12px rgba(250,246,241,.55)}

/* ---------- layout ---------- */
main{padding-top:64px}
section{padding:var(--s9) 0}
section.tight{padding:var(--s7) 0}
.sec-head{max-width:60ch;margin-bottom:var(--s7)}
.sec-head p{color:var(--linnen-60);margin-top:var(--s3)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6);align-items:center}
.card{background:var(--doek);border:1px solid var(--rand);border-radius:var(--r-l);padding:var(--s5)}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:14.5px;color:var(--linnen-60)}

/* ---------- hero ---------- */
.hero{text-align:center;padding:var(--s9) 0 0}
.hero h1{font-size:clamp(36px,6.4vw,68px);margin:var(--s4) auto}
.hero p.sub{color:var(--linnen-60);max-width:46ch;margin:0 auto var(--s6);font-size:17px}
.hero .cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.hero.left{text-align:left;padding-bottom:0}
.hero.left .cta{justify-content:flex-start}
.hero-dawn{height:min(300px,34vw);margin-top:var(--s7);animation:dawnrise 1.6s var(--ease-hill) both}
@keyframes dawnrise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.factstrip{border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);padding:var(--s4) 0}
.factstrip .wrap{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);justify-content:center}
.factstrip span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--linnen-40)}

/* ---------- product cards ---------- */
.product{background:var(--doek);border:1px solid var(--rand);border-radius:var(--r-l);overflow:hidden;transition:border-color .25s,transform .25s var(--ease-hill);display:flex;flex-direction:column}
.product:hover{border-color:rgba(146,72,232,.5);transform:translateY(-3px)}
.product .art{height:140px}
.product .body{padding:var(--s5);flex:1;display:flex;flex-direction:column}
.product .cat{font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--violet);text-transform:uppercase}
.product h3{margin:var(--s2) 0}
.product p{font-size:14px;color:var(--linnen-60);flex:1}
.product .row{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s4);font-family:var(--mono);font-size:12px}
.soon{filter:saturate(.45);opacity:.8}

/* ---------- plugin mock ---------- */
.plugin{background:var(--doek);border:1px solid var(--rand-sterk);border-radius:var(--r-l);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 120px rgba(146,72,232,.08)}
.plugin-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rand);background:rgba(250,246,241,.02)}
.plugin-head .t{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:var(--s3)}
.plugin-head .t i{width:22px;height:22px;border-radius:6px;background:var(--nacht);border:1px solid var(--rand-sterk);position:relative;overflow:hidden}
.plugin-head .t i::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-4%;height:62%;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--nacht);box-shadow:0 -6px 12px 2px rgba(146,72,232,.9)}
.plugin-head .preset{font-family:var(--mono);font-size:10px;color:var(--linnen-60);border:1px solid var(--rand);border-radius:var(--r-pill);padding:4px 12px}
.plugin-body{padding:var(--s4)}
.graph{background:var(--nacht);border:1px solid var(--rand);border-radius:var(--r-m);overflow:hidden}
.ctl-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--linnen-40);margin:var(--s4) 0 var(--s2)}
.ctl-value{font-family:var(--mono);font-size:12px;color:var(--gloed)}
.plugin-meters{display:flex;gap:var(--s5);align-items:flex-end;justify-content:center;padding:var(--s6) var(--s4);background:var(--nacht);border:1px solid var(--rand);border-radius:var(--r-m)}
.plugin-meters-readout{text-align:center;min-width:72px;padding-bottom:var(--s1)}
.plugin-presets{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.plugin-presets .preset{font-family:var(--mono);font-size:10px;color:var(--linnen-60);border:1px solid var(--rand);border-radius:var(--r-pill);padding:4px 12px}
.plugin-presets .preset.active{color:var(--gloed);border-color:rgba(146,72,232,.5);box-shadow:0 0 16px rgba(146,72,232,.2)}

/* ---------- specs / pricing / faq ---------- */
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs td{padding:var(--s3) var(--s2);border-top:1px solid var(--rand);vertical-align:top}
.specs td:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--linnen-40);width:200px;white-space:nowrap}
.pricebox{background:var(--doek);border:1px solid rgba(146,72,232,.45);border-radius:var(--r-l);padding:var(--s6);max-width:420px;box-shadow:0 0 80px rgba(146,72,232,.12)}
.pricebox .amount{font-family:var(--display);font-weight:200;font-size:52px;letter-spacing:.02em}
.pricebox .per{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--linnen-40)}
.pricebox ul{list-style:none;margin:var(--s5) 0;display:grid;gap:var(--s2)}
.pricebox li{font-size:14px;color:var(--linnen-60);padding-left:22px;position:relative}
.pricebox li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:5px;border-radius:5px 5px 0 0;box-shadow:0 -2px 5px 1px rgba(146,72,232,.9);background:var(--doek)}
details{border-top:1px solid var(--rand);padding:var(--s4) 0}
details:last-of-type{border-bottom:1px solid var(--rand)}
summary{cursor:pointer;font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.03em;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--violet);font-size:18px;transition:transform .25s var(--ease-hill)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--linnen-60);font-size:14.5px;margin-top:var(--s3);max-width:64ch}

/* ---------- prose (story + legal pages via page.php) ---------- */
.prose{max-width:62ch}
.prose p{margin-bottom:var(--s5);color:var(--linnen-60);font-size:17px}
.prose p strong,.prose strong{color:var(--linnen);font-weight:500}
.prose h2{margin:var(--s7) 0 var(--s3)}
.prose h3{margin:var(--s6) 0 var(--s2)}
.prose ul,.prose ol{margin:0 0 var(--s5) 20px;color:var(--linnen-60)}
.prose li{margin-bottom:var(--s2)}
.prose a{color:var(--gloed);text-decoration:none}
.prose a:hover{color:var(--linnen)}
.pull{font-family:var(--display);font-weight:300;font-size:clamp(20px,3vw,28px);letter-spacing:.04em;line-height:1.4;color:var(--linnen);border-left:2px solid var(--violet);padding-left:var(--s5);margin:var(--s7) 0}

/* ---------- newsletter ---------- */
.newscta{position:relative;overflow:hidden;border:1px solid var(--rand);border-radius:var(--r-l);text-align:center;padding:var(--s8) var(--s5) var(--s9)}
.newscta .dawn{bottom:-78%}
.newscta form{position:relative;display:flex;gap:var(--s2);max-width:440px;margin:var(--s5) auto 0;flex-wrap:wrap;justify-content:center}
.newscta input{flex:1;min-width:220px;background:var(--paneel);border:1px solid var(--rand-sterk);border-radius:var(--r-pill);padding:12px 20px;color:var(--linnen);font-family:var(--body);font-size:14px}
.newscta input::placeholder{color:var(--linnen-40)}
.newscta input:focus{outline:none;border-color:var(--violet)}
.newscta .hp-field{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.newscta-privacy{position:relative;font-size:13px;margin-top:var(--s3)}
.newscta-privacy a{color:var(--linnen-60);text-decoration:none}
.newscta-privacy a:hover{color:var(--linnen)}
.newscta-feedback{position:relative;font-size:13px;margin-top:var(--s3)}
.newscta-feedback.is-success{color:var(--gloed)}
.newscta-feedback.is-error{color:var(--signaal)}
.newscta.is-busy .btn-primary{opacity:.7;cursor:wait}
.newscta.is-success .kamp-newsletter{display:none}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rand);padding:var(--s8) 0 var(--s6);margin-top:var(--s8)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6)}
.foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--linnen-40);margin-bottom:var(--s3)}
.foot a{display:block;font-size:14px;color:var(--linnen-60);margin-bottom:var(--s2)}
.foot a:hover{color:var(--linnen)}
.foot .brand{margin-bottom:var(--s3)}
.foot-tag{font-size:13px;max-width:30ch;margin-top:var(--s3)}
.legal{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--rand);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--linnen-40)}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:var(--s10) 0 0}
.notfound .code{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--violet)}