/* ============================================================
   GROWTH LABS — Dark Cyber design system
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Cabinet Grotesk';src:url('/assets/fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabinet Grotesk';src:url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---- tokens ---- */
:root{
  --gl-bg:#030712; --gl-surface:rgba(17,24,39,.7); --gl-glass-blur:12px;
  --gl-border:rgba(255,255,255,.1); --gl-fg:#e5e7eb; --gl-muted:#9ca3af;
  --c-cyan:#22d3ee; --c-purple:#a855f7; --c-pink:#f472b6;
  --c-blob-cyan:#06b6d4; --c-blob-purple:#8b5cf6;
  --gl-grad:linear-gradient(135deg,var(--c-cyan),var(--c-purple),var(--c-pink));
  --gl-ease:cubic-bezier(.23,1,.32,1);
  --accent:var(--c-cyan);
  --gl-font-display:"Cabinet Grotesk",system-ui,sans-serif;
  --gl-font-body:"Satoshi",system-ui,-apple-system,sans-serif;
  --nav-bg:rgba(9,14,26,.8); --gl-maxw:1200px;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--gl-font-body); font-weight:400;
  background:var(--gl-bg); color:var(--gl-fg); line-height:1.6;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;color:inherit;}
h1,h2,h3,h4{font-family:var(--gl-font-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
::selection{background:var(--c-purple);color:#fff;}

/* ---- global background FX (no per-page markup) ---- */
body::before{ /* grid dots */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 100%);
}
body::after{ /* ambient blobs */
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 28%, color-mix(in srgb,var(--c-blob-cyan) 14%,transparent), transparent 70%),
    radial-gradient(42% 42% at 82% 72%, color-mix(in srgb,var(--c-blob-purple) 14%,transparent), transparent 70%);
  filter:blur(80px);
  animation:gl-drift 32s var(--gl-ease) infinite alternate;
}
@keyframes gl-drift{to{transform:translate3d(4%,-3%,0) scale(1.12);}}

/* ---- layout helpers ---- */
.gl-container{width:100%;max-width:var(--gl-maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
.gl-section{padding-block:clamp(4rem,9vw,7.5rem);}
.gl-eyebrow{
  font-family:var(--gl-font-display);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;font-size:.78rem;color:var(--accent);margin:0 0 1rem;
}

/* ---- gradient text ---- */
.gl-gradient-text{
  background:var(--gl-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---- glass card ---- */
.gl-glass{
  background:var(--gl-surface);
  -webkit-backdrop-filter:blur(var(--gl-glass-blur));backdrop-filter:blur(var(--gl-glass-blur));
  border:1px solid var(--gl-border);border-radius:1.25rem;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gl-glass{background:#0b1220;}
}

/* ---- 3D tilt card (JS sets --rx / --ry) ---- */
.gl-tilt{
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transform-style:preserve-3d;
  transition:transform .25s var(--gl-ease), box-shadow .4s var(--gl-ease), border-color .4s;
  will-change:transform;
}
.gl-tilt:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--gl-border));box-shadow:0 30px 60px -30px color-mix(in srgb,var(--accent) 45%,transparent);}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--gl-ease),transform .7s var(--gl-ease);transition-delay:var(--reveal-delay,0ms);}
.reveal.is-visible{opacity:1;transform:none;}

/* ---- buttons ---- */
.gl-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;font-family:var(--gl-font-display);font-weight:800;letter-spacing:-.01em;border:1px solid transparent;transition:transform .3s var(--gl-ease),box-shadow .3s,border-color .3s,background .3s;}
.gl-btn--pill{background:#fff;color:#030712;box-shadow:0 10px 30px -10px rgba(255,255,255,.35);}
.gl-btn--pill:hover{transform:translateY(-3px);box-shadow:0 16px 40px -12px rgba(255,255,255,.45);}
.gl-btn--ghost{background:transparent;color:var(--gl-fg);border-color:var(--gl-border);}
.gl-btn--ghost:hover{border-color:var(--accent);color:#fff;transform:translateY(-3px);}

/* ---- available badge ---- */
.gl-badge-available{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--gl-border);background:rgba(255,255,255,.04);font-size:.82rem;font-weight:500;color:var(--gl-fg);}
.gl-badge-available::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);animation:gl-pulse 2s var(--gl-ease) infinite;}
@keyframes gl-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);}70%{box-shadow:0 0 0 8px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

/* ---- zig-zag rows ---- */
.gl-zigzag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.gl-zigzag + .gl-zigzag{margin-top:clamp(2.5rem,6vw,5rem);}
.gl-zigzag:nth-child(even) .gl-zigzag__media{order:2;}
.gl-zigzag__media{border-radius:1.25rem;overflow:hidden;border:1px solid var(--gl-border);transform:perspective(1000px) rotateY(-3deg);transition:transform .6s var(--gl-ease);}
.gl-zigzag:nth-child(even) .gl-zigzag__media{transform:perspective(1000px) rotateY(3deg);}
.gl-zigzag__media:hover{transform:perspective(1000px) rotateY(0deg) scale(1.02);}
@media(max-width:760px){.gl-zigzag{grid-template-columns:1fr;}.gl-zigzag:nth-child(even) .gl-zigzag__media{order:0;}}

/* ---- 4-col metadata grid ---- */
.gl-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.gl-meta-grid h4{font-family:var(--gl-font-display);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gl-muted);margin:0 0 .4rem;}
.gl-meta-grid a,.gl-meta-grid p{margin:0;color:var(--gl-fg);}
.gl-meta-grid a:hover{color:var(--accent);}
@media(max-width:680px){.gl-meta-grid{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   SHARED SKELETON (markup in header.php / footer.php)
   ============================================================ */

/* ---- nav ---- */
[data-skeleton="nav"]{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1.25rem,4vw,2.5rem);
  background:var(--nav-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gl-border);
}
[data-skeleton="nav"] .gl-logo{display:flex;align-items:center;}
[data-skeleton="nav"] .gl-logo img{height:34px;width:auto;background:#f5f5f2;padding:4px 8px;border-radius:10px;}
[data-skeleton="nav"] .gl-nav-links{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);}
[data-skeleton="nav"] .gl-nav-links a{color:var(--gl-muted);font-weight:500;font-size:.95rem;transition:color .3s var(--gl-ease);}
[data-skeleton="nav"] .gl-nav-links a:hover,[data-skeleton="nav"] .gl-nav-links a[aria-current="page"]{color:var(--accent);}
.gl-nav-toggle{display:none;background:rgba(255,255,255,.05);border:1px solid var(--gl-border);border-radius:.5rem;padding:.45rem .8rem;color:var(--gl-fg);}
/* offset fixed nav so page content starts below it */
body{padding-top:64px;}
@media(max-width:760px){
  [data-skeleton="nav"] .gl-nav-links{display:none;}
  [data-skeleton="nav"] .gl-nav-links.is-open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--gl-border);padding:1rem clamp(1.25rem,4vw,2.5rem);gap:1rem;}
  .gl-nav-toggle{display:block;}
}

/* ---- contact section ---- */
[data-skeleton="contact"]{padding:clamp(3rem,8vw,6rem) clamp(1.25rem,4vw,2.5rem);}
[data-skeleton="contact"] .gl-contact-inner{
  max-width:var(--gl-maxw);margin-inline:auto;position:relative;overflow:hidden;
  padding:clamp(2rem,5vw,4rem);border-radius:1.75rem;
  background:var(--gl-surface);-webkit-backdrop-filter:blur(var(--gl-glass-blur));backdrop-filter:blur(var(--gl-glass-blur));
  border:1px solid var(--gl-border);
}
[data-skeleton="contact"] .gl-contact-inner::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 35%,transparent),transparent);top:-120px;right:-80px;filter:blur(40px);pointer-events:none;}
[data-skeleton="contact"] h2{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 .5rem;}
[data-skeleton="contact"] .gl-contact-lead{color:var(--gl-muted);margin:0 0 2rem;max-width:40ch;}
.gl-form{display:grid;gap:1rem;max-width:640px;position:relative;z-index:1;}
.gl-form label{display:grid;gap:.4rem;font-weight:500;font-size:.92rem;color:var(--gl-muted);}
.gl-form input,.gl-form textarea{width:100%;padding:.85rem 1rem;font:inherit;color:var(--gl-fg);background:rgba(255,255,255,.05);border:1px solid var(--gl-border);border-radius:.7rem;transition:border-color .3s var(--gl-ease);}
.gl-form input:focus,.gl-form textarea:focus{border-color:var(--accent);outline:none;}
.gl-form button{justify-self:start;display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.8rem;border-radius:999px;background:#fff;color:#030712;font-family:var(--gl-font-display);font-weight:800;border:none;transition:transform .3s var(--gl-ease);}
.gl-form button:hover{transform:translateY(-3px);}
.gl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}
.gl-form-status{margin:.5rem 0 0;font-weight:500;color:var(--accent);}
.gl-form-status[hidden]{display:none;}
.gl-contact-meta{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--gl-border);position:relative;z-index:1;}

/* ---- footer ---- */
[data-skeleton="footer"]{padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,2.5rem);border-top:1px solid var(--gl-border);}
[data-skeleton="footer"] .gl-foot-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));max-width:var(--gl-maxw);margin-inline:auto;}
[data-skeleton="footer"] h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gl-muted);margin:0 0 .8rem;}
[data-skeleton="footer"] ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;}
[data-skeleton="footer"] a{color:var(--gl-fg);font-size:.95rem;transition:color .3s var(--gl-ease);}
[data-skeleton="footer"] a:hover{color:var(--accent);}
[data-skeleton="footer"] > p{max-width:var(--gl-maxw);margin:2rem auto 0;color:var(--gl-muted);font-size:.85rem;}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  .reveal{opacity:1!important;transform:none!important;}
  .gl-tilt{transform:none!important;}
}

/* ---- small screens: ease GPU load ---- */
@media (max-width:760px){
  body::after{filter:blur(60px);animation:none;}
}

/* ============================================================
   SCROLL-RAKET — rechts langs de scrollbar, onder → boven
   Markup in header.php, positie gezet door base.js
   ============================================================ */
.gl-rocket{
  position:fixed;right:.45rem;top:0;bottom:0;width:34px;z-index:60;
  pointer-events:none;opacity:1;transition:opacity .4s var(--gl-ease);
}
.gl-rocket[data-idle="true"]{opacity:0;}
.gl-rocket__track{
  position:absolute;left:50%;top:84px;bottom:32px;width:1px;transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.14) 10%,rgba(255,255,255,.14) 90%,transparent);
}
.gl-rocket__trail{
  position:absolute;left:50%;bottom:32px;width:2px;height:0;transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(to top,transparent,color-mix(in srgb,var(--accent) 75%,transparent));
}
.gl-rocket__ship{
  position:absolute;left:50%;top:0;width:22px;will-change:transform;
  transform:translate(-50%,0);
}
.gl-rocket__ship svg{
  width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 45%,transparent));
}
.gl-rocket__hull{stroke:var(--c-cyan);}
.gl-rocket__mesh{stroke:color-mix(in srgb,var(--c-cyan) 55%,transparent);stroke-width:.7;}
.gl-rocket__port{stroke:var(--c-purple);}
.gl-rocket__fin{stroke:var(--c-purple);}
.gl-rocket__flame{
  stroke:var(--c-pink);fill:color-mix(in srgb,var(--c-pink) 22%,transparent);
  transform-origin:12px 33px;
  animation:gl-rocket-burn .45s steps(2,end) infinite alternate;
}
@keyframes gl-rocket-burn{from{transform:scaleY(.75);opacity:.75;}to{transform:scaleY(1.25);opacity:1;}}
@media(max-width:760px){.gl-rocket{display:none;}}

/* ============================================================
   CASE-FIGUREN — wireframe-illustratie per case (includes/figures.php)
   Zelfde SVG op de kaart in /case-studies en in de hero van de case-pagina
   ============================================================ */
.gl-figure{position:relative;width:100%;}
.gl-figure svg{width:100%;height:100%;display:block;overflow:visible;}
.gl-figure__grid{stroke:rgba(255,255,255,.07);}
.gl-figure__line{stroke:var(--c-cyan);opacity:.75;}
.gl-figure__bars{stroke:color-mix(in srgb,var(--c-cyan) 45%,transparent);}
.gl-figure__dot{stroke:var(--c-purple);opacity:.85;}
.gl-figure__accent{stroke:var(--c-pink);}

/* Ingekaderde variant voor de case-hero's — zelfde look als de visual op /drone-fotografie */
.gl-figure-frame{
  position:relative;border:1px solid var(--gl-border);border-radius:1.25rem;overflow:hidden;
  background:
    radial-gradient(70% 70% at 50% 30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
    linear-gradient(165deg,rgba(255,255,255,.04),transparent);
  padding:clamp(1rem,3vw,1.75rem);
}
.gl-figure-frame .gl-figure{aspect-ratio:4/3;}
.gl-figure-frame--hero{max-width:620px;margin-block:clamp(1.5rem,4vw,2.5rem);}