/* =========================================================================
   Fource AI Agency — visitekaartje-stijl (zwart · vier circuit-kleuren)
   ========================================================================= */
:root{
  --ink:#000000;
  --panel:rgba(255,255,255,0.025);
  --panel-2:rgba(255,255,255,0.045);
  --line:rgba(255,255,255,0.09);
  --line-2:rgba(255,255,255,0.14);
  --light:#E9ECF3;
  --muted:#8A93A3;
  --slate:#6E7C8D;          /* "AGENCY" wordmark */
  --green:#33C55E;
  --red:#EA4361;
  --orange:#F5A623;         /* primair accent (rol + tagline op de kaart) */
  --blue:#3B8EEA;
}

*,*::before,*::after{box-sizing:border-box;}
html{font-family:'DM Sans',sans-serif;background:var(--ink);color:var(--light);}
body{margin:0;background:var(--ink);}
.font-display{font-family:'Syne',sans-serif;}

/* fijne filmkorrel */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
}

/* zachte kleur-gloed op de achtergrond */
.glow-blob{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;}

/* ---- Tekstaccenten ---- */
.t-green{color:var(--green);}
.t-red{color:var(--red);}
.t-orange{color:var(--orange);}
.t-blue{color:var(--blue);}
.t-slate{color:var(--slate);}
.t-muted{color:var(--muted);}
.t-light{color:var(--light);}

/* Vier-kleuren gradient op merkwoord (echo van het logo) */
.grad-four{
  background:linear-gradient(100deg,var(--green) 0%,var(--orange) 42%,var(--red) 70%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Eyebrow / kicker met gekleurd streepje */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Syne',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}
.eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:var(--orange);}
.eyebrow.g::before{background:var(--green);}
.eyebrow.r::before{background:var(--red);}
.eyebrow.b::before{background:var(--blue);}

/* Wordmark-tagline zoals op de kaart */
.tagline{
  font-family:'Syne',sans-serif;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--orange);font-size:12px;
}

/* ---- Knoppen ---- */
.btn-primary{
  background:var(--orange);color:#0A0A0F;font-family:'Syne',sans-serif;font-weight:800;
  border-radius:12px;box-shadow:0 0 30px rgba(245,166,35,0.28),0 2px 10px rgba(0,0,0,0.5);
  transition:all .2s ease;border:1px solid rgba(245,166,35,0.6);
}
.btn-primary:hover{background:#ffb733;box-shadow:0 0 48px rgba(245,166,35,0.45),0 4px 18px rgba(0,0,0,0.55);transform:translateY(-2px);}
.btn-ghost{
  border:1px solid var(--line-2);background:rgba(255,255,255,0.03);color:var(--light);
  font-family:'Syne',sans-serif;font-weight:700;border-radius:12px;transition:all .2s ease;
}
.btn-ghost:hover{border-color:rgba(245,166,35,0.55);background:rgba(245,166,35,0.06);color:var(--orange);transform:translateY(-2px);}

/* ---- Nav ---- */
.nav-glass{
  background:rgba(0,0,0,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-link{font-size:14px;color:var(--muted);transition:color .18s ease;}
.nav-link:hover{color:var(--light);}

/* ---- Circuit-traces (handtekening van het merk) ---- */
.traces{width:100%;height:auto;display:block;}

/* ---- Hoekframe (camera-brackets zoals op de kaart) ---- */
.corner-frame{position:relative;}
.corner-frame > .cf{position:absolute;width:26px;height:26px;pointer-events:none;}
.corner-frame > .cf-tl{top:0;left:0;border-top:2px solid var(--green);border-left:2px solid var(--green);border-top-left-radius:4px;}
.corner-frame > .cf-tr{top:0;right:0;border-top:2px solid var(--red);border-right:2px solid var(--red);border-top-right-radius:4px;}
.corner-frame > .cf-bl{bottom:0;left:0;border-bottom:2px solid var(--orange);border-left:2px solid var(--orange);border-bottom-left-radius:4px;}
.corner-frame > .cf-br{bottom:0;right:0;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue);border-bottom-right-radius:4px;}

/* ---- Kaarten ---- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;transition:all .26s ease;
}
.card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-4px);}

/* Service-kaart met accentrand per kleur */
.svc{position:relative;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:all .28s ease;}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--orange));opacity:.9;}
.svc:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.svc .ic{
  width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent,#F5A623) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#F5A623) 30%,transparent);
}

/* Icoonblokjes klein (features) */
.ic-sm{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent,#F5A623) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,#F5A623) 28%,transparent);}

/* Sector-chip */
.chip{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);transition:all .2s ease;}
.chip:hover{border-color:var(--line-2);background:var(--panel-2);}
.chip .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* Gekleurde contact-stipjes zoals op de kaart */
.cdot{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0;}

/* Prijskaart uitgelicht */
.pricing-popular{border-color:rgba(245,166,35,0.5)!important;background:rgba(245,166,35,0.04);box-shadow:0 0 60px rgba(245,166,35,0.08);}

/* Pulse-stip */
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(51,197,94,0.55);}50%{box-shadow:0 0 0 6px rgba(51,197,94,0);}}
.pulse{animation:pulseDot 2s ease-in-out infinite;}

/* Waveform */
.wave-bar{width:3px;border-radius:3px;background:var(--orange);animation:waveAnim 1.2s ease-in-out infinite;transform-origin:bottom center;}
@keyframes waveAnim{0%,100%{transform:scaleY(0.25);opacity:.5;}50%{transform:scaleY(1);opacity:1;}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .wave-bar,.pulse{animation:none;}
}

/* Formulier */
.field{
  width:100%;background:#08090C;border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;color:#fff;font-size:14px;transition:border-color .18s ease;
}
.field::placeholder{color:var(--muted);}
.field:focus{outline:none;border-color:var(--orange);}
.label{display:block;font-family:'Syne',sans-serif;font-weight:600;font-size:13px;color:var(--muted);margin-bottom:6px;}

/* Scrollbar */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:#1c1c22;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--orange);}

/* Divider met vier-kleuren streepjes (kaart-onderrand) */
.four-rule{display:inline-flex;gap:8px;align-items:center;}
.four-rule i{display:block;width:30px;height:4px;border-radius:2px;}