/* =====================================================================
   Triple Blue — high-end front-end
   Donker, cinematisch, beeldgedreven. Brand: navy + electric blue + cyan.
   ===================================================================== */
:root{
  --bg:#05070f; --bg-2:#080b1a; --bg-3:#0a0f24;
  --blue-deep:#0b2a8f; --blue:#2456ff; --blue-electric:#2f80ff; --cyan:#46dcff;
  --ink:#eef3ff; --ink-soft:#c6d2f2; --muted:#8d9bc4; --faint:#5b6892;
  --line:rgba(120,150,255,.14); --line-2:rgba(120,150,255,.28);
  --card:rgba(255,255,255,.022); --card-2:rgba(255,255,255,.04);
  --r:20px; --r-lg:28px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Sora',sans-serif;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--cyan);color:#02040a}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ambient achtergrond ------------------------------------------------ */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow::before,.glow::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);opacity:.45}
.glow::before{width:55vw;height:55vw;left:-15vw;top:-25vh;background:radial-gradient(circle,var(--blue-deep),transparent 70%)}
.glow::after{width:48vw;height:48vw;right:-15vw;bottom:-12vh;background:radial-gradient(circle,#16329e,transparent 70%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

main{position:relative;z-index:2}
.wrap{max-width:1220px;margin:0 auto;padding:0 30px}
.accent{background:linear-gradient(115deg,var(--blue-electric),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* navigatie ---------------------------------------------------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s;padding:24px 0;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(5,7,15,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:14px 0}
.nav-in{max-width:1220px;margin:0 auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between}
.brand-logo{height:30px;width:auto}
.nav-links{display:flex;gap:36px;font-size:.8rem;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.nav-links a{transition:.25s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--cyan);transition:.3s}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--line-2);color:var(--ink);padding:10px 22px;border-radius:40px;font-size:.74rem;text-transform:uppercase;letter-spacing:1.2px;transition:.3s}
.nav-cta:hover{background:var(--blue);border-color:var(--blue);box-shadow:0 0 34px rgba(36,86,255,.5)}
.burger{display:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* hero --------------------------------------------------------------- */
.hero{min-height:100vh;display:flex;align-items:flex-end;position:relative;padding:160px 0 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 70% 10%,rgba(36,86,255,.25),transparent 60%),
  linear-gradient(160deg,#0a1430,#05070f)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(70,220,255,.06) 50%,transparent 65%)}
.hero-clover{position:absolute;right:-60px;top:8%;width:min(46vw,560px);opacity:.07;filter:blur(.3px);z-index:-1;pointer-events:none}
.hero .wrap{width:100%}
.ticker{position:absolute;top:96px;left:0;right:0;z-index:1;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:inline-flex;white-space:nowrap;animation:slide 30s linear infinite}
.ticker-track span{font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:3px;text-transform:uppercase;color:var(--faint);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.ticker-track span::after{content:"\2726";color:var(--cyan);font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.76rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--cyan);margin-bottom:26px}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--cyan)}
.hero h1{font-family:'Anton',sans-serif;font-weight:400;line-height:.9;letter-spacing:.5px;font-size:clamp(3rem,9.5vw,8rem);text-transform:uppercase;margin-bottom:30px;max-width:14ch}
.hero p{max-width:560px;color:var(--ink-soft);font-size:1.14rem;margin-bottom:42px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn{padding:16px 36px;border-radius:46px;font-size:.84rem;letter-spacing:1px;text-transform:uppercase;font-weight:600;transition:.3s;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.btn-fill{background:linear-gradient(120deg,var(--blue),var(--blue-electric));color:#fff;box-shadow:0 12px 44px rgba(36,86,255,.4)}
.btn-fill:hover{transform:translateY(-3px);box-shadow:0 18px 56px rgba(47,128,255,.6)}
.btn-out{border:1px solid var(--line-2);color:var(--ink)}
.btn-out:hover{border-color:var(--cyan);color:var(--cyan)}
.hero-meta{margin-top:54px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;color:var(--faint);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase}
.hero-meta strong{color:var(--ink-soft);font-weight:600}
.hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan)}

/* secties ------------------------------------------------------------ */
section{padding:130px 0;position:relative}
.sec-head{margin-bottom:66px;max-width:740px}
.sec-tag{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.sec-tag::before{content:"";width:22px;height:1px;background:var(--cyan)}
.sec-head h2{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.04;letter-spacing:-1px}
.sec-head p{color:var(--muted);margin-top:22px;font-size:1.06rem}

/* over ons ----------------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:74px;align-items:center}
.about-grid .lead{color:var(--ink);font-size:1.3rem;line-height:1.5;margin-bottom:24px;font-family:'Syne',sans-serif;font-weight:600;letter-spacing:-.3px}
.about-grid p{color:var(--muted);margin-bottom:22px;font-size:1.05rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stat{padding:30px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:.35s}
.stat:hover{border-color:var(--line-2);background:var(--card-2);transform:translateY(-4px)}
.stat .n{font-family:'Anton',sans-serif;font-size:2.9rem;line-height:1;background:linear-gradient(120deg,var(--blue-electric),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--muted);font-size:.84rem;margin-top:10px;text-transform:uppercase;letter-spacing:1px;line-height:1.4}

/* diensten ----------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pillar{padding:44px 40px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);position:relative;overflow:hidden;transition:.4s}
.pillar::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(36,86,255,.16),transparent 58%);opacity:0;transition:.4s}
.pillar:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
.pillar:hover::before{opacity:1}
.picon{width:58px;height:58px;border-radius:16px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--cyan);margin-bottom:24px;background:rgba(70,220,255,.05);transition:.4s;position:relative}
.picon svg{width:26px;height:26px}
.pillar:hover .picon{background:rgba(70,220,255,.12);transform:rotate(-6deg)}
.pillar h3{font-family:'Syne',sans-serif;font-weight:800;font-size:1.62rem;margin:0 0 12px;letter-spacing:-.5px;position:relative}
.pillar p{color:var(--muted);font-size:.99rem;position:relative}
.pillar .arrow{margin-top:24px;color:var(--cyan);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;opacity:0;transform:translateX(-8px);transition:.4s;position:relative}
.pillar:hover .arrow{opacity:1;transform:translateX(0)}

/* showcase-band (groot signatuurbeeld) ------------------------------- */
.showcase{padding:0}
.showcase-inner{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:520px;display:flex;align-items:flex-end;border:1px solid var(--line)}
.showcase-img{position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,#0b2a8f,#070a18);transition:.6s}
.showcase-inner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(5,7,15,.92) 5%,rgba(5,7,15,.2) 60%,transparent)}
.showcase-cap{position:relative;z-index:2;padding:54px 56px;max-width:640px}
.showcase-cap h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.96;margin-bottom:16px}
.showcase-cap p{color:var(--ink-soft);font-size:1.06rem}

/* concept / feature -------------------------------------------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--bg-2),var(--bg-3))}
.feature-img{min-height:460px;position:relative;background:linear-gradient(160deg,#0b2a8f,#05070f)}
.feature-txt{padding:66px 58px;display:flex;flex-direction:column;justify-content:center}
.feature-txt h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.3rem);line-height:.96;margin-bottom:26px}
.feature-txt p{color:var(--muted);margin-bottom:18px;font-size:1.05rem}

/* werk / galerij ----------------------------------------------------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.gallery-grid figure{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.gallery-grid figure:nth-child(4n+1){aspect-ratio:4/5}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery-grid figure:hover img{transform:scale(1.08)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;font-size:.86rem;color:#fff;background:linear-gradient(transparent,rgba(5,7,15,.9));opacity:0;transition:.3s}
.gallery-grid figure:hover figcaption{opacity:1}

/* lege-staat beeld-placeholder (premium) ----------------------------- */
.ph{position:relative}
.ph::before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(45deg,rgba(120,150,255,.035) 0 12px,transparent 12px 24px)}
.ph-hint{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--faint);text-align:center;padding:24px}
.ph-hint svg{width:38px;height:38px;opacity:.5}
.ph-hint span{font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase}

/* clients ------------------------------------------------------------ */
.clients{text-align:center;padding:90px 0}
.client-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;margin-top:14px}
.client-row span{color:var(--faint);font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.5px;transition:.3s}
.client-row span:hover{color:var(--ink-soft)}

/* cta ---------------------------------------------------------------- */
.cta{position:relative;text-align:center;overflow:visible;margin-top:40px}
.cta-inner{position:relative;border-radius:var(--r-lg);overflow:hidden;padding:110px 30px;border:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#0b2a8f,#070a18)}
.cta-inner::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 120% at 50% 0,rgba(5,7,15,.55),rgba(5,7,15,.86))}
.cta-inner>*{position:relative;z-index:2}
.cta h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.6rem);line-height:.94;margin-bottom:22px}
.cta p{color:var(--ink-soft);max-width:520px;margin:0 auto 38px;font-size:1.1rem}

/* footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:80px 0 40px;position:relative;z-index:2}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:54px}
.foot-logo{height:30px;margin-bottom:22px}
.foot-col h4{font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:var(--muted);font-size:.94rem;margin-bottom:10px;transition:.25s}
.foot-col a:hover{color:var(--cyan)}
.copyright{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:28px;border-top:1px solid var(--line);color:var(--faint);font-size:.84rem}

/* scroll-reveal ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* responsive --------------------------------------------------------- */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .about-grid,.feature,.pillars{grid-template-columns:1fr;gap:34px}
  .feature-img{min-height:300px}
  .feature-txt{padding:44px 34px}
  .showcase-cap{padding:38px 30px}
  .ticker{display:none}
  .hero{padding:130px 0 60px}
  section{padding:90px 0}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .hero-meta{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}