/* ==========================================================================
   Websem.studio — start.css (pagina Start je project)
   Bron: Figma 521:5 (desktop 1920) / 522:83 (mobiel 390) · sectie 521:78 / 534:150
   Basis (fonts, tokens, header, footer, knoppen, shine) komt uit style.css.
   ========================================================================== */

/* ---------- Sectie + achtergrond (aurora, 38° gedraaid, blend screen) ---------- */
.sjp{
  position:relative; overflow:hidden; background:var(--c-bg);
  padding:146px var(--gutter) 96px; /* mobiel: 106 header + 40 */
  display:flex; flex-direction:column; align-items:center; gap:40px;
}
.sjp__aurora{
  position:absolute; z-index:0; pointer-events:none;
  width:760px; height:760px; left:calc(50% + 467px); top:576px;
  transform:translate(-50%,-50%) rotate(38deg);
  opacity:.63; mix-blend-mode:screen; object-fit:cover;
}

/* ---------- Intro ---------- */
.sjp__intro{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; max-width:881px; }
.sjp__eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  font-size:12px; font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.85); white-space:nowrap;
}
.sjp__title{
  font-size:clamp(4.25rem, 2.784rem + 6.013vw, 10rem); /* 68 → 160 */
  font-weight:500; line-height:.96; letter-spacing:-.045em;
}
.sjp__title .accent{ font-weight:300; letter-spacing:-.03em; font-variation-settings:"SOFT" 0, "WONK" 1; }
.sjp__lead{ font-size:var(--fs-lead); line-height:1.5; letter-spacing:-.01em; color:rgba(255,255,255,.6); }

/* ---------- Raster: formulier + zijkolom ---------- */
.sjp__grid{ position:relative; z-index:1; width:100%; max-width:780px; display:flex; flex-direction:column; gap:16px; }

/* kaartstijl (zelfde als prijskaarten: zwart 42% + radiale gloed, blur) */
.sjp-card{
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(255,255,255,.062) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,0) 78%),
    rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ---------- Formulier ---------- */
.sjp-form{ border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:32px; }
.sjp-form__head{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.sjp-form__title{ display:flex; flex-direction:column; gap:2px; font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:normal; }
.sjp-form__title h2{ font:inherit; letter-spacing:inherit; }
.sjp-form__title p{ color:rgba(255,255,255,.5); line-height:1.2; }

.sjp-group{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:22px; }
.sjp-group__title{
  float:left; width:100%; /* legend als gewone regel */
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.sjp-group__title + *{ clear:both; }
.sjp-row{ display:flex; flex-direction:column; gap:18px; }

.field{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.field__label{ font-size:14px; letter-spacing:-.01em; color:rgba(255,255,255,.72); }
.field__label i{ font-style:normal; color:#3b82f5; }
.field__label small{ font-size:13px; color:rgba(255,255,255,.4); }
.field__input{
  width:100%; height:48px; padding:0 16px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  font:inherit; font-size:15px; letter-spacing:-.01em; color:#fff; outline:none;
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.field__input::placeholder{ color:rgba(255,255,255,.4); }
.field__input:hover{ border-color:rgba(255,255,255,.3); }
.field__input:focus{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.field__input--area{ height:128px; padding:14px 16px; resize:vertical; line-height:1.45; }
.field__input:disabled{ opacity:.4; pointer-events:none; }
.field__input.is-invalid{ border-color:rgba(255,99,99,.75); }

/* verborgen echte radio/checkbox (blijft bereikbaar met toetsenbord) */
.pakket input, .chip input, .keuze input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }

/* radio-rondje */
.radio{ flex:none; width:18px; height:18px; border-radius:50%; border:1.2px solid rgba(255,255,255,.35); transition:border-color var(--dur-base), background-color var(--dur-base); }
input:checked ~ .radio,
input:checked ~ * .radio{ border-color:#fff; background:#fff url("../img/start/radio-on.svg") center / 18px 18px no-repeat; }

/* pakketkaarten */
.sjp-pakketten{ display:flex; flex-direction:column; gap:10px; }
.pakket{
  position:relative; min-width:0; cursor:pointer;
  display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14);
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.pakket__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pakket__name{ font-size:24px; font-weight:500; line-height:.9; letter-spacing:-.045em; white-space:nowrap; }
.pakket__price{ display:flex; align-items:baseline; gap:6px; font-size:16px; font-weight:600; line-height:1; letter-spacing:.05em; color:var(--c-price); }
.pakket__price{ position:relative; flex-wrap:wrap; align-items:center; gap:8px; } /* draagt de korting-popup */
.pakket__price s{ font-size:13px; font-weight:500; color:#6b6b6b; } /* oude prijs, zoals de prijskaarten op de homepage */
.pakket .price-deal{ letter-spacing:0; }
.pakket .price-deal__tip{ z-index:4; font-weight:400; letter-spacing:normal; cursor:default; } /* boven de rand-shine */
.pakket--advies .pakket__price{ font-size:14px; font-weight:500; letter-spacing:0; color:rgba(255,255,255,.7); }
.pakket__text{ font-size:13px; line-height:1.5; letter-spacing:-.01em; color:rgba(255,255,255,.55); }
.pakket:has(input:checked){ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.9); }

/* chips (pagina's + "Heb ik nog niet") */
.sjp-chips{ display:flex; gap:8px; }
.chip{ position:relative; flex:1 1 0; min-width:0; cursor:pointer; }
.chip span{
  display:flex; align-items:center; justify-content:center; height:46px; padding:0 16px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  font-size:14px; font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.85); white-space:nowrap;
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.chip input:checked + span{ background:#fff; border-color:#fff; color:#000; }
.sjp-url{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.sjp-url .field{ width:100%; }
.chip--none{ flex:none; }
.chip--none span{ height:33px; width:126px; font-size:12px; font-weight:400; }

/* contactkeuze */
.sjp-keuzes{ display:flex; flex-direction:column; gap:10px; }
.keuze{
  position:relative; min-width:0; cursor:pointer;
  display:flex; align-items:center; gap:12px; height:58px; padding:0 18px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14);
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.keuze__name{ flex:1 1 auto; font-size:15px; font-weight:500; letter-spacing:-.01em; }
.keuze__badge{ padding:4px 10px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.25); font-size:11px; font-weight:500; color:rgba(255,255,255,.75); }
.keuze:has(input:checked){ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.9); }

/* hover = rand licht op (alleen muis) + toetsenbordfocus zichtbaar */
@media (hover:hover){
  .pakket:hover, .keuze:hover{ border-color:rgba(255,255,255,.35); }
  .pakket:has(input:checked):hover, .keuze:has(input:checked):hover{ border-color:rgba(255,255,255,.9); }
  .chip:hover span{ border-color:rgba(255,255,255,.35); color:#fff; }
  .chip:hover input:checked + span{ color:#000; }
}
.pakket:has(input:focus-visible), .keuze:has(input:focus-visible), .chip input:focus-visible + span{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.is-invalid-group .pakket, .is-invalid-group .keuze{ border-color:rgba(255,99,99,.75); }

.sjp-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* verzenden: witte knop (MASK3 + shine uit style.css), vorm volgens Figma */
.sjp-send{ display:flex; flex-direction:column; gap:8px; }
.btn.sjp-send__btn{ width:100%; margin:0; padding:11px 14px; border-radius:10px; gap:8px; font-size:16px; line-height:normal; cursor:pointer; }
.sjp-send__btn img{ width:16px; height:16px; }
.btn-mask .btn-mask__label img{ filter:invert(1); } /* pijl wit op de onderlaag */
.sjp-send__btn.is-busy{ opacity:.6; pointer-events:none; }
.sjp-send__note{ font-size:13px; line-height:1.5; letter-spacing:-.01em; text-align:center; color:rgba(255,255,255,.45); }
.sjp-send__note.is-error{ color:rgba(255,130,130,.9); }

/* bedankt-melding na verzenden (nog geen Figma-ontwerp: tijdelijke versie) */
.sjp-thanks{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:8px 0; }
.sjp-thanks h2{ font-size:26px; font-weight:500; letter-spacing:-.02em; }
.sjp-thanks p{ font-size:15px; line-height:1.5; color:rgba(255,255,255,.7); max-width:520px; }

/* ---------- Zijkolom ---------- */
.sjp-side{ display:flex; flex-direction:column; gap:16px; }
.sjp-side__card{ padding:22px; }
.sjp-contact{ display:flex; flex-direction:column; gap:22px; }
.sjp-contact a, .sjp-contact p{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  font-size:15px; letter-spacing:-.01em; color:rgba(255,255,255,.75); width:max-content;
  transition:color var(--dur-base) var(--ease-out);
}
.sjp-contact a{ position:relative; }
.sjp-contact a::after{ /* hover-streep huisstijl (zie style.css) */
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out);
}
.sjp-contact a:hover{ color:#fff; }
.sjp-contact a:hover::after{ transform:scaleX(1); transform-origin:left; }

.sjp-steps{ display:flex; flex-direction:column; gap:22px; }
.sjp-steps__title{ font-size:18px; font-weight:500; letter-spacing:-.02em; }
.sjp-steps ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.sjp-steps li{ display:flex; align-items:flex-start; gap:14px; }
.sjp-steps__nr{
  flex:none; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); font-size:12px; font-weight:500; color:rgba(255,255,255,.8);
}
.sjp-steps li.is-active .sjp-steps__nr{ background:#fff; border-color:#fff; color:#000; }
.sjp-steps li > span:last-child{ display:flex; flex-direction:column; gap:3px; font-size:13px; line-height:1.45; letter-spacing:-.01em; color:rgba(255,255,255,.5); }
.sjp-steps strong{ font-size:15px; font-weight:500; line-height:normal; color:#fff; }

.sjp-person{ display:flex; flex-direction:column; gap:18px; }
.sjp-person__who{ display:flex; align-items:center; gap:14px; }
.sjp-avatar{
  flex:none; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font-size:18px; font-weight:500; overflow:hidden;
}
.sjp-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; } /* profielfoto Fabian */
.sjp-person__who > span:last-child{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:rgba(255,255,255,.5); }
.sjp-person__who strong{ font-size:16px; font-weight:500; color:#fff; }
.sjp-person p{ font-size:15px; line-height:1.5; letter-spacing:-.01em; color:rgba(255,255,255,.7); }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px){
  .sjp-row, .sjp-pakketten, .sjp-keuzes{ flex-direction:row; gap:16px; }
  .sjp-row .field, .pakket, .keuze{ flex:1 1 0; } /* naast elkaar pas vanaf tablet; op mobiel onder elkaar met eigen hoogte */
  .pakket--advies{ flex:.8 1 0; min-width:190px; } /* 3e optie "Advies nodig": iets smaller dan Website/Webshop */
  .sjp-pakketten, .sjp-keuzes, .sjp-chips{ gap:12px; }
  .sjp-url{ flex-direction:row; align-items:flex-end; gap:12px; }
  .chip--none span{ width:180px; height:48px; font-size:14px; font-weight:500; }
  .sjp-form{ padding:44px; gap:36px; }
  .sjp-form__title{ font-size:26px; }
  .sjp-side__card{ padding:28px; }
  .btn.sjp-send__btn{ padding:18px 19px; }
  .sjp__eyebrow{ font-size:13px; }
}
@media (min-width: 1024px){
  .sjp{ padding:266px var(--gutter) 180px; gap:72px; } /* 178 header + 88 */
  .sjp__intro{ gap:28px; }
  .sjp__title{ white-space:nowrap; }
  .sjp__title .accent{ letter-spacing:-.003em; }
  .sjp__aurora{ width:1500px; height:1500px; left:calc(50% + 60px); top:998px; }
  .sjp__grid{ max-width:1196px; display:grid; grid-template-columns:minmax(0, 780px) minmax(320px, 400px); align-items:start; }
  .sjp-side{ position:sticky; top:24px; }
}

/* ==========================================================================
   Chat-melding rechtsonder (Figma 680:937)
   data-state: hidden → mini (na 60 sec.) → full (klik) → fab (×). Alleen op deze pagina.
   ========================================================================== */
.chat{ position:fixed; z-index:140; right:16px; bottom:16px; display:flex; flex-direction:column; align-items:flex-end; pointer-events:none; }
.chat__card, .chat__fab{
  pointer-events:none; opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s;
}
.chat[data-state="mini"] .chat__card--mini,
.chat[data-state="full"] .chat__card--full,
.chat[data-state="fab"] .chat__fab{ pointer-events:auto; opacity:1; visibility:visible; transform:none; transition-delay:0s; }
/* de niet-actieve kaarten nemen geen ruimte in */
.chat:not([data-state="mini"]) .chat__card--mini,
.chat:not([data-state="full"]) .chat__card--full,
.chat:not([data-state="fab"]) .chat__fab{ position:absolute; right:0; bottom:0; }
/* meldingen buiten de eerste sectie (bij de footer) even weg; het WhatsApp-icoon blijft altijd staan */
.chat.is-away[data-state] .chat__card{ opacity:0; visibility:hidden; transform:translateY(24px); pointer-events:none; transition-delay:0s, 0s, .35s; }

/* kaart: zelfde glas als de prijskaarten, iets donkerder zodat hij boven de pagina leesbaar blijft */
.chat__card{
  position:relative; width:min(369px, calc(100vw - 32px)); padding:25px 25px 15px;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(255,255,255,.062) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,0) 78%),
    rgba(10,10,10,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
}
.chat__card--full{ display:flex; flex-direction:column; gap:20px; border-radius:20px; }

.chat__open{ display:block; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.chat__head{ display:flex; align-items:center; gap:20px; }
.chat__card--mini .chat__head{ padding-bottom:12px; }
.chat__avatar{
  flex:none; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:#111; border:1px solid rgba(255,255,255,.2); overflow:hidden;
  font-size:18px; font-weight:500; letter-spacing:-.01em; color:#fff;
}
.chat__avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; } /* profielfoto Fabian (img/avatar-fabian.webp, bron: "Profiel foto (fabian).jpeg") */
.chat__intro{ display:flex; flex-direction:column; gap:4px; min-width:0; white-space:nowrap; }
.chat__title{ font-size:25px; font-weight:600; line-height:1.2; color:#fff; }
.chat__title .accent{ font-size:30px; line-height:1; letter-spacing:0; font-variation-settings:"SOFT" 0, "WONK" 1; }
.chat__sub{ font-size:16px; line-height:1.25; color:rgba(255,255,255,.7); }
.chat__head--person .chat__intro{ gap:2px; }
.chat__head--person strong{ font-size:16px; font-weight:500; color:#fff; line-height:1.25; }
.chat__head--person .chat__intro span{ font-size:12px; color:rgba(255,255,255,.6); line-height:1.25; }

.chat__status{
  display:flex; align-items:center; justify-content:center; gap:8px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px; letter-spacing:-.01em; line-height:1.25; color:rgba(255,255,255,.8);
}
.chat__status i{ width:8px; height:8px; border-radius:50%; background:#51d969; box-shadow:0 0 6px 2px rgba(81,217,105,.25); animation:online-dot 4s ease-in-out infinite; }
/* zelfde rustige puls als de blauwe live-stip (style.css → live-dot): vooral de gloed ademt */
@keyframes online-dot{
  0%, 100%{ transform:scale(.97); box-shadow:0 0 2px 0 rgba(81,217,105,.15); }
  50%{ transform:scale(1.03); box-shadow:0 0 7px 2px rgba(81,217,105,.55); }
}
.chat__card--full .chat__status{ margin-top:-12px; } /* Figma: 8px tussen notitje en status */

.chat__text{ font-size:16px; line-height:1.3; color:rgba(255,255,255,.9); }
.chat__cta{ display:flex; flex-direction:column; gap:5px; }
/* witte knop: zelfde knop als "Verstuur aanvraag" (btn btn--primary → gloed + rand-shine bij hover), alleen breed met hoek 10 */
.btn.chat__wa{ display:flex; width:100%; margin:0; padding:12px 19px; border-radius:10px; gap:8px; font-size:16px; line-height:1.25; }
.chat__note{ font-size:12px; line-height:1.25; text-align:center; color:rgba(255,255,255,.5); }

.chat__close{
  position:absolute; top:-16px; right:-14px; width:30px; height:30px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(255,255,255,.16); color:#000;
  font:500 20px/1 var(--font-text); cursor:pointer; transition:transform .2s var(--ease-out);
}
.chat__close:hover{ transform:scale(1.08); }

.chat__fab{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); cursor:pointer;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.chat__fab:hover{ background:rgba(255,255,255,.2); }
.chat__fab img{ width:25px; height:25px; }

/* mobiel: rand-shine loopt vanzelf rond de ingeklapte melding (geen hover op een telefoon), tot je erop tikt */
@media (max-width: 767px){
  .chat[data-state="mini"] .chat__card--mini .shine--a{ animation-name:shine-a; }
  .chat[data-state="mini"] .chat__card--mini .shine--b{ animation-name:shine-b; }
}

@media (min-width: 768px){
  .chat{ right:32px; bottom:32px; }
}
/* mobiel (Figma 886:847): iets compacter, × blijft binnen het scherm */
@media (max-width: 767px){
  .chat__card{ padding:20px 20px 12px; }
  .chat__card--full{ gap:16px; }
  .chat__card--full .chat__status{ margin-top:-8px; }
  .chat__head{ gap:16px; }
  .chat__avatar{ width:44px; height:44px; }
  .chat__title{ font-size:22px; }
  .chat__title .accent{ font-size:26px; }
  .chat__sub, .chat__text{ font-size:15px; }
  .chat__close{ top:-14px; right:-6px; }
}
@media (prefers-reduced-motion: reduce){
  .chat__card, .chat__fab{ transform:none; transition:opacity .2s linear, visibility 0s linear .2s; }
  .chat__status i, .chat__card--mini .shine{ animation:none !important; }
}

/* Pakketkeuze past zich aan de breedte van het formulier aan (3 naast elkaar alleen als er ruimte is) */
.field:has(> .sjp-pakketten){ container-type:inline-size; }
@container (max-width: 640px){
  .sjp-pakketten{ flex-wrap:wrap; }
  .sjp-pakketten .pakket{ flex:1 1 calc(50% - 6px); }
  .sjp-pakketten .pakket--advies{ flex:1 1 100%; min-width:0; } /* Advies nodig op eigen regel eronder */
}
@container (max-width: 440px){
  .sjp-pakketten .pakket{ flex:1 1 100%; } /* te smal voor 2 naast elkaar: alles onder elkaar */
}