/* CareCollab — "binnenkort live"-pagina. Structuur 1-op-1 nagebouwd van een Soonix/
   Temlis-waitlist-template (referentiescreenshot van de gebruiker), met CareCollab's
   eigen merkkleuren/font in plaats van het zwart/cyaan origineel.
   Kleuren/Inter per marketingsite/css/style.css :root (Brand_identity_carecollab.pdf). */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --cc-navy: #1B3A52;
  --cc-navy-deep: #12293B;
  --cc-white: #FFFFFF;
  --cc-mist: #F4F6F7;
  --cc-cream: #F5F1E4;
  --cc-peach: #F6CFC5;
  --cc-mint: #CFE8DE;
  --cc-sage: #B9C9A0;
  --cc-gold: #F2C955;
  --cc-amber: #E8835A;
  --cc-amber-deep: #d9683c;
  --border-soft: rgba(27,58,82,0.1);
  --shadow-soft: 0 2px 14px rgba(27,58,82,0.06);
  --shadow-lift: 0 16px 40px rgba(27,58,82,0.14);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Terug naar Inter voor koppen: CareCollab's merkregel is één typeface merkbreed, geen
     apart display-font (zie marketingsite/css/style.css). De Lora-serif-uitzondering van
     de Soonix-vergelijking is hiermee weer teruggedraaid. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Zachte, effen paneelkleur (cream-getint, geen puur wit) voor de countdown-vakken en
     FAQ-kaarten — Soonix gebruikt daar een licht neutraal grijs i.p.v. wit; dit is de
     CareCollab-tint van dat idee (afgeleid van --cc-cream i.p.v. een generiek grijs). */
  --cc-panel: #F1EEE4;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

html, body{
  margin: 0;
  /* Veiligheidsnet: een enkel element dat op een smal scherm net te breed is (bv. de
     countdown-rij) mag nooit de hele pagina horizontaal scrollbaar maken. */
  overflow-x: hidden;
}

body{
  background: var(--cc-mist);
  color: var(--cc-navy);
  font-family: var(--font-body);
}

/* ---- Hero ---- */
.hero{
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(56px, 10vw, 96px) 24px 48px;
  text-align: center;
}

.hero__logo{
  width: auto;
  height: 40px;
  margin-bottom: 36px;
}

.hero__title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 6vw, 46px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--cc-navy);
}

.hero__lead{
  font-size: 16px;
  line-height: 1.6;
  color: var(--cc-navy);
  opacity: 0.7;
  margin: 0 auto 32px;
  max-width: 440px;
}

/* Eén doorlopende buitenpil (zoals Soonix: "Your email address ... Join waitlist" is
   optisch één element), met de knop er als kleinere pil in genest — geen twee losse
   pillen met een gat ertussen zoals de vorige versie. */
.signup{
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;
  background: var(--cc-panel);
  border-radius: 999px;
  padding: 6px;
}

.signup input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 8px 10px 18px;
  font-size: 16px;
  font-family: inherit;
  color: var(--cc-navy);
  border: none;
  background: transparent;
}

.signup input:focus{
  outline: none;
}

.signup input.invalid{
  color: var(--cc-amber-deep);
}

.signup button{
  flex: 0 0 auto;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--cc-white);
  background: var(--cc-amber);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.signup button:hover{ background: var(--cc-amber-deep); }
.signup button:disabled{ opacity: 0.6; cursor: default; }

.fineprint{
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--cc-navy);
  opacity: 0.55;
}
.fineprint.is-success{ color: #2f6b4f; opacity: 1; font-weight: 600; }
.fineprint.is-error{ color: var(--cc-amber-deep); opacity: 1; font-weight: 600; }

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.social-proof{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--cc-navy);
  opacity: 0.75;
}

.avatar-stack{ display: flex; }

.avatar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--cc-white);
  margin-left: -10px;
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center 40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%231B3A52' fill-opacity='.55'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7' fill='%231B3A52' fill-opacity='.55'/%3E%3C/svg%3E");
}
.avatar:first-child{ margin-left: 0; }
.avatar--mint{ background-color: var(--cc-mint); }
.avatar--peach{ background-color: var(--cc-peach); }
.avatar--sage{ background-color: var(--cc-sage); }
.avatar--gold{ background-color: var(--cc-gold); }
.avatar--sm{ width: 26px; height: 26px; }

.countdown{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 0;
}

/* Zonder dit past de rij van 4 vakken + scheidingstekens niet op een smal scherm — de
   flex-rij zou dan (zonder wrap hierboven) breder worden dan de viewport en zo de hele
   pagina horizontaal laten scrollen. Kleinere maten i.p.v. laten wrappen naar 2 regels,
   dat blijft visueel rustiger. */
@media (max-width: 420px){
  .countdown{ gap: 6px; }
  .countdown__unit{ min-width: 56px; padding: 10px 12px; }
  .countdown__value{ font-size: 20px; }
  .countdown__label{ font-size: 9px; }
}

.countdown__unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--cc-panel);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 66px;
}

.countdown__value{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--cc-navy);
  font-variant-numeric: tabular-nums;
}

.countdown__label{
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-navy);
  opacity: 0.55;
}

.countdown__sep{
  color: var(--cc-navy);
  opacity: 0.35;
  font-weight: 700;
  transform: translateY(-8px);
}

/* ---- Doorlopende achtergrond achter hero + telefoon-sectie samen ----
   Eén ononderbroken gradient-vlak achter beide secties i.p.v. elke sectie een eigen
   achtergrond te geven — dat laatste gaf een harde rechte naad op de grens tussen de
   twee. De radial-gradients zelf doofden niet volledig uit vóór de onderrand (gemeten:
   op de naad sprong de kleur in 1px van rgb(245,240,239) naar rgb(244,246,247) — de
   ellipsen se "transparent 70%"-punt lag voorbij de 100%-onderrand van deze wrapper).
   In plaats van de radial-gradient-wiskunde opnieuw uit te rekenen (foutgevoelig, en
   verandert elke keer dat de inhoud van hero/telefoon-sectie van hoogte verandert): een
   mask-fade op de wrapper zelf, die 'm de laatste 12% naar volledig transparant laat
   gaan. Daaronder ligt gewoon body's eigen --cc-mist-achtergrond — exact dezelfde kleur
   als waar de FAQ-sectie op staat, dus geen enkel kleurverschil meer mogelijk op de naad. */
.teaser-bg{
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 28% 62%, rgba(207,232,222,0.55), transparent 70%),
    radial-gradient(ellipse 65% 50% at 76% 78%, rgba(246,207,197,0.45), transparent 70%),
    var(--cc-mist);
  mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
}

/* ---- Phone section ----
   Echte fotorealistische iPhone 16-mockup (door de gebruiker aangeleverd,
   images/iphone-16-mockup.jpg — bijgesneden tot alleen het toestel+schaduw, geen wit
   canvasrandje) i.p.v. een zelfgetekend CSS-frame. .phone-screen is een overlay die
   precies over het (bijna edge-to-edge) zwarte scherm van de foto valt — percentages
   uitgemeten op de foto zelf, zie de git-geschiedenis voor de meetmethode. Daarin komt
   ons eigen app-screenshot, met dezelfde fade-naar-wit-truc als eerder zodat alleen een
   glimp van het scherm te zien is. */
.phone-section{
  position: relative;
  padding: 24px 24px clamp(40px, 8vw, 72px);
  display: flex;
  justify-content: center;
}

.phone-wrap{
  position: relative;
  width: clamp(220px, 27vw, 300px);
}

/* Toont alleen het bovenste deel van het toestel (geen thuisbalk/onderhoek/schaduw-
   ellips) én laat dat deel geleidelijk oplossen in de achtergrond — zoals het Soonix-
   referentiesjabloon: de telefoon zelf (rand incluis) vervaagt, geen harde afsnijlijn.
   mask-image staat hier op .phone-crop zelf (het kijkvenster), niet op .phone-inner: de
   verlopen zijn zo relatief aan het KORTE zichtbare venster, niet aan de volledige (grotendeels
   verborgen) fotohoogte — anders zou het verloop pas diep onder de zichtbare rand pas
   op gang komen. Werkt op de bestaande transparante PNG, geen apart bestand voor nodig. */
.phone-crop{
  position: relative;
  width: 100%;
  aspect-ratio: 0.8;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%);
}

.phone-inner{
  position: relative;
  width: 100%;
}

.phone-photo{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.floating-card{
  position: absolute;
  top: 8%;
  left: -22%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cc-white);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lift);
  z-index: 3;
}

.floating-card__icon{
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cc-mint);
  color: var(--cc-navy);
  font-weight: 800;
  font-size: 16px;
}

.floating-card__text{
  display: flex;
  flex-direction: column;
  text-align: left;
  white-space: nowrap;
}

.floating-card__label{
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cc-navy);
  opacity: 0.5;
}

.floating-card__value{
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-navy);
}

.floating-pill{
  position: absolute;
  top: 22%;
  right: -14%;
  display: flex;
  background: var(--cc-white);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: var(--shadow-lift);
  z-index: 3;
}

@media (max-width: 680px){
  .floating-card, .floating-pill{ display: none; }
}

/* ---- FAQ ---- */
.faq{
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(56px, 10vw, 96px) 24px;
  text-align: center;
}

.faq__title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 5vw, 34px);
  margin: 0 0 14px;
}

.faq__lead{
  font-size: 15px;
  line-height: 1.6;
  color: var(--cc-navy);
  opacity: 0.7;
  margin: 0 0 40px;
}

.faq__list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.faq-item{
  background: var(--cc-panel);
  border-radius: 16px;
  overflow: hidden;
}

.faq-item__question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--cc-navy);
  text-align: left;
  cursor: pointer;
}

.faq-item__toggle{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cc-navy);
  position: relative;
}

.faq-item__toggle::before,
.faq-item__toggle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--cc-white);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.faq-item__toggle::after{ transform: translate(-50%, -50%) rotate(90deg); }

.faq-item.is-open .faq-item__toggle::after{ transform: translate(-50%, -50%) rotate(0deg); }
.faq-item.is-open .faq-item__toggle::before{ transform: translate(-50%, -50%) rotate(45deg); }
.faq-item.is-open .faq-item__toggle::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.faq-item__answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.faq-item.is-open .faq-item__answer{ max-height: 320px; }

.faq-item__answer p{
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-navy);
  opacity: 0.75;
}

.faq-item__answer a{ color: var(--cc-amber-deep); }

/* ---- Footer ---- */
.footer{
  text-align: center;
  padding: 32px 24px 56px;
}

.footer__link{
  font-size: 14px;
  color: var(--cc-navy);
  opacity: 0.7;
  text-decoration: none;
}
.footer__link:hover{ text-decoration: underline; }

.footer__copy{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--cc-navy);
  opacity: 0.45;
}