/* =========================================================
   CRMMeter — Coming Soon
   Losstaande statische pagina. Geen build, geen dependencies.
   ========================================================= */

:root{
  /* Kleuren */
  --primary:#2563FF;
  --primary-bright:#0066FF;
  --navy:#0B1533;
  --soft-blue:#EFF4FF;
  --ink:#0F172A;
  --white:#FFFFFF;
  --gray-100:#F1F5F9;
  --gray-300:#D6DDE8;
  --gray-500:#78859C;

  /* Radius */
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  /* Schaduw — bewust subtiel */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 28px rgba(15,23,42,.07);
  --shadow-lg:0 24px 64px rgba(11,21,51,.10);

  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{margin:0; padding:0;}

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}

img{max-width:100%; height:auto; display:block;}
ul{margin:0; padding:0; list-style:none;}
h1,p{margin:0;}

a{color:inherit;}
:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

/* =========================================================
   Achtergrond: fingerprint-motief, zeer subtiel
   ========================================================= */
.bg-fingerprint{
  position:fixed;
  top:50%; right:-26vw;
  width:min(980px, 86vw);
  transform:translateY(-50%);
  color:var(--primary);
  opacity:.035;
  pointer-events:none;
  z-index:0;
  animation:fpDrift 44s ease-in-out infinite alternate;
}
.bg-fingerprint img{
  width:100%;
  height:auto;
  display:block;
}

@keyframes fpDrift{
  from{transform:translateY(-50%) rotate(0deg) scale(1);}
  to{transform:translateY(-52%) rotate(5deg) scale(1.05);}
}

/* Zachte kleurgloed linksboven — geen neon, alleen diepte */
body::before{
  content:"";
  position:fixed;
  top:-30vh; left:-15vw;
  width:70vw; height:70vw;
  max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(37,99,255,.07) 0%, rgba(37,99,255,0) 68%);
  pointer-events:none;
  z-index:0;
}

/* =========================================================
   Paginaframe
   ========================================================= */
.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  max-width:1240px;
  margin:0 auto;
  padding:32px 40px 28px;
}

.site-header{flex:0 0 auto; padding-bottom:8px;}

.logo{display:inline-block; text-decoration:none;}
.logo img{height:34px; width:auto;}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px, 6vw, 88px);
  align-items:center;
  padding:clamp(24px, 4vh, 56px) 0;
}

.hero-copy{max-width:660px; animation:riseIn .7s cubic-bezier(.2,.7,.3,1) both;}

.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px 7px 12px;
  background:var(--soft-blue);
  color:var(--primary);
  border-radius:var(--r-full);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:26px;
}
.badge-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--primary-bright);
  flex-shrink:0;
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.45; transform:scale(.82);}
}

.headline{
  font-size:clamp(33px, 3.5vw, 50px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--navy);
  text-wrap:balance;
}
.nowrap{white-space:nowrap;}

.subheadline{
  font-size:clamp(21px, 2vw, 28px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--primary);
  margin-top:18px;
}

.supporting{
  font-size:clamp(16px, 1.15vw, 18px);
  color:var(--gray-500);
  max-width:50ch;
  margin-top:22px;
}

@keyframes riseIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:none;}
}

/* =========================================================
   Visual: matcher-kaart
   ========================================================= */
.hero-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  animation:riseIn .7s cubic-bezier(.2,.7,.3,1) .12s both;
}

.matcher{
  width:100%;
  max-width:430px;
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:22px;
}

.matcher-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--gray-100);
}

.matcher-label{
  font-size:13px;
  font-weight:700;
  color:var(--gray-500);
  letter-spacing:.02em;
  transition:color .35s ease;
}
.matcher.is-done .matcher-label{color:var(--primary);}

.matcher-dots{display:inline-flex; gap:4px;}
.matcher-dots i{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gray-300);
  animation:dotWave 1.3s ease-in-out infinite;
}
.matcher-dots i:nth-child(2){animation-delay:.16s;}
.matcher-dots i:nth-child(3){animation-delay:.32s;}
@keyframes dotWave{
  0%,60%,100%{opacity:.35; transform:translateY(0);}
  30%{opacity:1; transform:translateY(-3px);}
}
.matcher.is-done .matcher-dots{opacity:0; transition:opacity .3s ease;}

/* ── kaartenlijst ── */
.matcher-body{position:relative; padding:18px 0 4px;}

.crm-list{display:flex; flex-direction:column; gap:10px;}

.crm-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  background:var(--white);
  border:1.5px solid var(--gray-300);
  border-radius:var(--r-sm);
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.2,.7,.3,1),
    border-color .45s ease,
    box-shadow .45s ease,
    filter .45s ease;
}

/* 1. rustig verschijnen */
.crm-card.is-in{opacity:1; transform:none;}

/* 2. scannen */
.crm-card.is-scanning{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,255,.10);
}

/* 3. afvallers naar de achtergrond */
.crm-card.is-out{
  opacity:.34;
  transform:scale(.96);
  filter:saturate(.4);
}

/* 4. winnaar naar voren */
.crm-card.is-match{
  border-color:var(--primary);
  background:var(--soft-blue);
  transform:scale(1.035);
  box-shadow:0 10px 26px rgba(37,99,255,.16);
}

.crm-mark{
  width:32px; height:32px;
  flex-shrink:0;
  border-radius:9px;
  background:var(--gray-100);
  color:var(--gray-500);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  transition:background .45s ease, color .45s ease;
}
.crm-card.is-match .crm-mark{background:var(--primary); color:var(--white);}

.crm-name{
  font-size:15px;
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.crm-meter{
  margin-left:auto;
  width:56px;
  height:5px;
  flex-shrink:0;
  border-radius:var(--r-full);
  background:var(--gray-100);
  overflow:hidden;
}
.crm-meter i{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--r-full);
  background:var(--gray-300);
  transition:width .7s cubic-bezier(.2,.7,.3,1), background .45s ease;
}
.crm-card.is-scored .crm-meter i{width:var(--w);}
.crm-card.is-match .crm-meter i{background:var(--primary); width:100%;}

/* ── scanlijn ── */
.scanline{
  position:absolute;
  left:0; right:0;
  top:18px;
  height:56px;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg,
    rgba(37,99,255,0) 0%,
    rgba(37,99,255,.09) 45%,
    rgba(37,99,255,0) 100%);
  opacity:0;
  pointer-events:none;
}
.matcher.is-scanning .scanline{
  opacity:1;
  animation:scanSweep 1.55s cubic-bezier(.45,0,.55,1);
}
@keyframes scanSweep{
  0%{transform:translateY(0);}
  100%{transform:translateY(174px);}
}

/* ── resultaatregel ── */
.matcher-result{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--gray-100);
  font-size:14.5px;
  font-weight:700;
  color:var(--primary);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.matcher.is-done .matcher-result{opacity:1; transform:none;}

.check{
  width:22px; height:22px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--primary);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
}
.check svg{width:14px; height:14px;}

.visual-caption{
  font-size:13.5px;
  color:var(--gray-500);
  text-align:center;
  max-width:330px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--gray-100);
  font-size:13px;
  color:var(--gray-500);
}
.footer-status{font-weight:600;}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet / smallere desktop */
@media (max-width:1020px){
  .page{padding:28px 32px 24px;}
  .hero{
    grid-template-columns:1fr;
    gap:44px;
    justify-items:center;
    text-align:center;
    padding:32px 0 40px;
  }
  .hero-copy{max-width:640px;}
  .supporting{margin-left:auto; margin-right:auto;}
  .bg-fingerprint{right:-30vw; opacity:.04;}
}

/* Mobiel */
@media (max-width:640px){
  .page{padding:22px 16px 20px; min-height:auto;}
  .logo img{height:28px;}

  .hero{gap:34px; padding:26px 0 34px;}
  .badge{margin-bottom:20px;}

  .headline{font-size:clamp(29px, 8.2vw, 38px); line-height:1.12;}
  /* Op smalle schermen mag "47 tabbladen" gewoon afbreken */
  .nowrap{white-space:normal;}

  .subheadline{margin-top:14px;}
  .supporting{margin-top:18px; font-size:16px;}

  .matcher{padding:18px; max-width:100%;}
  .crm-card{padding:12px 13px; gap:10px;}
  .crm-name{font-size:14.5px;}
  .crm-meter{width:44px;}

  .site-footer{
    justify-content:center;
    text-align:center;
    gap:6px;
    flex-direction:column;
  }
}

@media (max-width:360px){
  .crm-meter{display:none;}
}

/* Lage viewporthoogte op desktop: compacter, geen scroll forceren */
@media (min-width:1021px) and (max-height:760px){
  .page{padding-top:24px; padding-bottom:20px;}
  .hero{padding:16px 0;}
  .badge{margin-bottom:18px;}
  .headline{font-size:clamp(30px, 3.1vw, 42px);}
  .supporting{margin-top:16px;}
  .matcher{padding:18px;}
  .crm-list{gap:8px;}
}

/* =========================================================
   prefers-reduced-motion
   Toon de visual in een rustige, statische eindstate.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .bg-fingerprint{animation:none;}
  .badge-dot{animation:none;}
  .matcher-dots{display:none;}
  .scanline{display:none;}

  /* Statische eindstate: kaarten zichtbaar, match uitgelicht */
  .crm-card{opacity:1; transform:none;}
  .crm-card.is-out{opacity:.5; transform:none; filter:none;}
  .crm-card.is-match{transform:none;}
  .crm-meter i{transition:none;}
  .matcher-result{opacity:1; transform:none;}
}