/* iCt Horse — gedeelde staging shell stijlen
   Palette + font + header + intro + menu + page-transition + reveal + footer */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#070b14;--card:#0c1a2a;
  --teal-green:#59c5a8;--green:#69c996;--teal:#54c3b1;
  --mid-teal:#23a396;--dark-teal:#178384;--deep-teal:#095263;
  --green-mid:#5baf56;--green-dark:#77b036;--yellow-green:#abcb3e;
  --amber:#ce9016;--orange:#fa8f1a;--coral:#f85b32;
  --line-teal:#8cd6c1;--line-green:#96d9b6;--line-mid:#69c0b6;
  --wm-dark:#336589;--wm-mid:#41779c;--wm-light:#4e88ae;
  --tagline:#767877;--mint:#e5f4ed;--cream:#fdeacc;
  --text:#e5f4ed;--dim:#767877;--border:#0d2535;
  --font:'Space Grotesk',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;line-height:1.6}
a{color:var(--teal-green)}

/* ── Cursor ── */
@media(pointer:coarse){body,body *{cursor:auto!important}}
@media(max-width:768px){body,body *{cursor:auto!important}}

/* ── Intro (alleen op homepage) ── */
#intro{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 1s;overflow:hidden}
#intro.done{opacity:0;pointer-events:none}
#intro-svg{display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:78vh}
#intro-svg svg{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;overflow:visible}
#itext{position:absolute;bottom:18%;text-align:center;font-size:1.1rem;color:var(--tagline);letter-spacing:.3em;opacity:0;transition:opacity .8s;left:0;right:0}
#itext.show{opacity:1}
#skip{position:absolute;bottom:30px;right:30px;background:0 0;border:1px solid var(--dim);color:var(--dim);padding:8px 20px;border-radius:20px;font:inherit;font-size:.85rem;transition:.3s;z-index:10001;cursor:pointer}
#skip:hover{border-color:var(--teal-green);color:var(--teal-green)}

/* ── Page transition overlay ── */
#ptrans{position:fixed;inset:0;z-index:9000;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(7,11,20,.92);opacity:0;transition:opacity .15s}
#ptrans.active{opacity:1;pointer-events:auto}
#ptrans canvas{width:120px;height:200px}
#ptrans .ptrans-svg{display:flex;align-items:center;justify-content:center}
#ptrans .ptrans-svg svg{height:160px;width:auto;display:block}

/* ── Header ── */
header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:16px;padding:12px 24px;background:rgba(7,11,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(140,214,193,.1)}
#mbtn{transition:transform .3s;line-height:0;cursor:pointer}
#mbtn:hover{transform:scale(1.12)}
#mbtn img{height:44px}
.brand{font-size:1.4rem;font-weight:600}
.brand b{color:var(--wm-light)}
.brand span{color:var(--wm-mid)}
.brand a{color:inherit;text-decoration:none}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
#mbtn img{animation:pulse 3s ease-in-out infinite}

/* ── Menu overlay ── */
#mnu{position:fixed;inset:0;z-index:5000;background:rgba(7,11,20,.97);opacity:0;pointer-events:none;transition:opacity .4s}
#mnu.open{opacity:1;pointer-events:auto}
#mnu canvas{position:absolute;inset:0;width:100%;height:100%}
#mnav{position:relative;z-index:1;height:100%}
.mi{position:absolute;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:1.15rem;font-weight:500;opacity:0;transition:all .3s;white-space:nowrap}
.mi .d{width:var(--mi-dot,14px);height:var(--mi-dot,14px);border-radius:50%;transition:all .3s;flex-shrink:0}
.mi:hover .d{transform:scale(1.6);box-shadow:0 0 20px var(--c),0 0 40px var(--c)}
.mi:hover{color:var(--c);transform:scale(1.06)}
#mcl{position:absolute;top:20px;right:30px;z-index:2;background:0 0;border:0;color:var(--dim);font-size:2.5rem;line-height:1;transition:.3s;cursor:pointer}
#mcl:hover{color:var(--teal-green);transform:rotate(90deg)}

/* ── Page content area ── */
.page{padding-top:80px;min-height:100vh}

/* ── Page hero (sub-pagina, niet homepage) ── */
.page-hero{min-height:48vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 24px 60px;border-bottom:1px solid var(--border);position:relative}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(89,197,168,.035) 1px,transparent 0);background-size:50px 50px;pointer-events:none}
.page-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--mint);margin-bottom:16px;line-height:1.1;position:relative}
.page-hero h1 .gradient{background:linear-gradient(90deg,var(--dark-teal),var(--teal),var(--green),var(--yellow-green),var(--amber),var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero p{color:var(--dim);font-size:1.15rem;max-width:650px;line-height:1.7;position:relative}
.back-link{display:inline-block;margin-top:24px;color:var(--teal-green);text-decoration:none;font-size:.9rem;position:relative}
.back-link:hover{color:var(--green)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(89,197,168,.1);border:1px solid rgba(89,197,168,.3);border-radius:100px;padding:6px 16px;font-size:.85rem;color:var(--teal-green);margin-bottom:28px;position:relative}

/* ── Container ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Section (sub-pagina) ── */
.section{padding:64px 0;border-bottom:1px solid var(--border)}
.section:last-of-type{border-bottom:none}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;color:var(--mint);margin-bottom:12px}
.section-header p{color:var(--dim);font-size:1.05rem;max-width:600px;margin:0 auto}
.section h2.section-title{font-size:1.5rem;font-weight:700;color:var(--mint);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}

/* ── Cards (gedeelde generieke kaart) ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin:32px 0}
.cards-grid.wide{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.cards-grid.narrow{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards-grid.compact{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:28px;transition:all .3s ease;text-decoration:none;display:block;color:inherit;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--teal-green));transform:scaleX(0);transition:.4s;transform-origin:left}
.card:hover::before{transform:scaleX(1)}
.card:hover{border-color:rgba(89,197,168,.3);transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.card .icon{font-size:2rem;margin-bottom:12px;display:block}
.card .icon-lg{font-size:2.5rem}
.card h3{color:var(--mint);font-size:1.15rem;margin-bottom:8px}
.card p{color:var(--dim);font-size:.92rem;margin-bottom:12px;line-height:1.6}
.card .subtitle{color:var(--teal-green);font-size:.8rem;font-weight:600;margin-bottom:8px}
.card .evidence{font-size:.8rem;color:var(--teal-green);font-weight:600;display:flex;align-items:center;gap:6px;margin-top:8px}
.card .learn-more{color:var(--teal-green);font-size:.85rem;font-weight:600;text-decoration:none}
.card .link{color:var(--teal-green);text-decoration:none;font-size:.85rem;font-weight:600}

/* Variant: project-card with header/body */
.card .card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.card .card-header .icon{margin-bottom:0}
.card .metrics{display:flex;gap:16px;font-size:.8rem;color:var(--dim);border-top:1px solid var(--border);padding-top:12px;margin-top:12px;flex-wrap:wrap}
.card .metrics span{display:inline-block}

/* Variant: company-item */
.card.company-item{text-align:center;padding:20px}
.card.company-item .label{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.card.company-item .value{font-size:1.05rem;font-weight:700;color:var(--mint)}
.card.company-item .value a{color:var(--teal-green);text-decoration:none}

/* ── Tags ── */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;background:rgba(89,197,168,.12);color:var(--teal-green)}
.tag-blue{background:rgba(78,136,174,.15);color:var(--wm-light)}
.tag-green{background:rgba(105,201,150,.12);color:var(--green)}
.tag-orange{background:rgba(206,144,22,.15);color:var(--amber)}
.tag-purple{background:rgba(248,91,50,.12);color:var(--coral)}
.tag-red{background:rgba(248,91,50,.15);color:var(--coral)}

/* ── Status badges ── */
.status,.badge{font-size:.7rem;padding:3px 10px;border-radius:100px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.status-live,.badge-new{background:rgba(105,201,150,.18);color:var(--green)}
.status-prod,.badge-core{background:rgba(89,197,168,.18);color:var(--teal-green)}
.status-poc{background:rgba(206,144,22,.18);color:var(--amber)}
.status-research{background:rgba(248,91,50,.18);color:var(--coral)}

/* ── Card top accent variants ── */
.card.accent-red::before{background:var(--coral)}
.card.accent-blue::before{background:var(--teal-green)}
.card.accent-green::before{background:var(--green)}
.card.accent-purple::before{background:var(--coral)}
.card.accent-orange::before{background:var(--amber)}

/* ── Quote / blockquote ── */
.quote-box{border-left:3px solid var(--teal-green);padding:20px 28px;margin:32px 0;background:rgba(89,197,168,.05);border-radius:0 12px 12px 0;max-width:700px}
.quote-box p{color:var(--mint);font-style:italic;font-size:1.1rem}
blockquote{max-width:650px;font-size:1.2rem;line-height:1.8;color:var(--dim);border-left:3px solid var(--teal-green);padding-left:24px;font-style:italic;margin:32px auto}

/* ── Buttons ── */
.btn{display:inline-block;padding:14px 32px;border-radius:30px;font:inherit;font-size:1rem;font-weight:500;text-decoration:none;transition:.3s;border:none;cursor:pointer}
.btn-primary,.bp{background:var(--teal-green);color:var(--bg)}
.btn-primary:hover,.bp:hover{background:var(--green);box-shadow:0 0 30px rgba(89,197,168,.4)}
.btn-secondary,.bs{background:0 0;color:var(--teal-green);border:1px solid var(--teal-green)}
.btn-secondary:hover,.bs:hover{background:rgba(89,197,168,.1)}

/* ── Stats (projecten hero) ── */
.stats{display:flex;gap:32px;margin-top:32px;flex-wrap:wrap;justify-content:center;position:relative}
.stat-item{text-align:center}
.stat-item .num{font-size:2.5rem;font-weight:700;color:var(--mint);display:block}
.stat-item .lbl{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}

/* ── Filter bar (projecten) ── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:24px 0;border-bottom:1px solid var(--border)}
.filter-btn{background:var(--card);border:1px solid var(--border);border-radius:100px;padding:6px 16px;color:var(--dim);font-size:.85rem;cursor:pointer;transition:all .2s;font-family:inherit}
.filter-btn:hover,.filter-btn.active{border-color:var(--teal-green);color:var(--teal-green);background:rgba(89,197,168,.1)}

/* ── CTA section ── */
.cta-section{text-align:center;padding:80px 24px}
.cta-section h2{color:var(--mint);margin-bottom:16px;font-size:1.8rem}
.cta-section p{color:var(--dim);margin-bottom:32px;max-width:500px;margin-left:auto;margin-right:auto}

/* ── Reveal on scroll ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.vis{opacity:1;transform:none}

/* ── Footer ── */
footer{text-align:center;padding:40px 24px;color:var(--dim);font-size:.85rem;border-top:1px solid var(--border)}
footer a{color:var(--teal-green);text-decoration:none}
footer a:hover{color:var(--green)}

/* ── Mobile ── */
@media(max-width:768px){
  .cards-grid,.cards-grid.wide,.cards-grid.narrow{grid-template-columns:1fr}
  .cards-grid.compact{grid-template-columns:repeat(2,1fr)}
  header{padding:10px 16px}
  .page-hero{padding:60px 16px 40px}
  .section{padding:48px 0}
  .container{padding:0 16px}
}