/* Osightly — osightly.nl
   Kleuren/tussenruimte staan hier als CSS custom properties met een vaste fallback-
   waarde; assets/js/config-loader.js overschrijft ze live vanuit assets/data/config.json
   zodra dat geladen is (dus het "Osightly webbeheer"-tabblad in de Runner App kan hier
   direct op inhaken zonder dat deze CSS opnieuw gebouwd hoeft te worden).

   Kleuren = de echte Osees/Osightly-huisstijl (zelfde tokens als dashboard.css/--bid2-*):
   inkt is donker PAARS (#2e233c), geen zwart. Geen randlijnen: afwisseling komt uit
   achtergrondkleur (licht/donker paars/goud-tint), niet uit borders. */

:root{
  --paper:#fff8f1; --paper-deep:#f3e9d9;
  --ink:#2e233c; --ink-soft:#5c5468; --ink-faint:#8c8598;
  --aubergine:#6c5f86; --aubergine-deep:#4b4165;
  --yellow:#ffd906; --yellow-deep:#8a6a1e; --yellow-tint:#fbf0c8;
  --gold:#d1ab62; --green:#385847; --taupe:#ada19a;
  --surface:#ffffff;
  --on-dark:#fff8f1; --on-dark-soft:rgba(255,248,241,.78); --on-dark-faint:rgba(255,248,241,.55);

  --wrap-max: 1120px;
  --section-y: 84px;
  --section-y-mobile: 52px;
  --card-pad: 26px;
  --card-radius: 14px;
  --shadow-card: 0 18px 40px -28px rgba(46,35,60,.35);
}

/* Echte huisstijlfonts, zelfde bestanden als de Runner App/dashboard, zelf gehost
   (geen Google Fonts) voor snelheid: assets/fonts/ komt rechtstreeks van de server mee. */
@font-face{ font-family:'Apparel Display'; src:url('../fonts/ApparelDisplay-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apparel Display'; src:url('../fonts/ApparelDisplay-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apparel Display'; src:url('../fonts/ApparelDisplay-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'HK Nova'; src:url('../fonts/HKNova-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'HK Nova'; src:url('../fonts/HKNova-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--paper); color:var(--ink);
  font-family:'HK Nova', -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* Apparel Display is een zwaar, geometrisch lettertype: bij een krappe line-height/
   negatieve letter-spacing (prima bij een lichte serif als Fraunces) wordt het
   onleesbaar. Ruime regelhoogte, geen negatieve spatiëring. */
.display{ font-family:'Apparel Display', 'HK Nova', sans-serif; font-weight:700; line-height:1.28; letter-spacing:0; text-wrap:balance; }
.eyebrow{ text-transform:uppercase; font-size:11.5px; letter-spacing:0.14em; font-weight:700; color:var(--yellow-deep); }
.section-dark .eyebrow{ color:var(--yellow); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 32px; }
@media(max-width:720px){ .wrap{ padding:0 20px; } }

/* ---------- knoppen : identiek aan de echte CTA op osees.nl ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 25px; border-radius:50px;
  font-size:14.5px; font-weight:900; font-family:'HK Nova',sans-serif;
  background:var(--yellow); color:var(--ink); border:none;
  transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(46,35,60,.5); }
.btn-ghost{ background:var(--surface); color:var(--ink); }
.btn-ghost:hover{ background:var(--paper-deep); box-shadow:none; }
.section-dark .btn-ghost{ background:rgba(255,248,241,.12); color:var(--on-dark); }
.section-dark .btn-ghost:hover{ background:rgba(255,248,241,.2); }
.btn-dark{ background:var(--ink); color:var(--yellow); }
.btn-dark:hover{ background:var(--aubergine-deep); }
.btn-small{ padding:9px 18px; font-size:13px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--aubergine); outline-offset:2px; }

section{ padding:var(--section-y) 0; }
@media(max-width:720px){ section{ padding:var(--section-y-mobile) 0; } }
h2.display{ font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:18px; }
p.lead{ font-size:17px; color:var(--ink-soft); max-width:60ch; }

/* ---------- achtergrond-afwisseling i.p.v. scheidingslijnen ----------
   Geen borders tussen secties: ritme komt uit achtergrondkleur. */
.section-dark{ background:var(--ink); color:var(--on-dark); }
.section-dark h2, .section-dark h3, .section-dark h1{ color:var(--on-dark); }
.section-dark p, .section-dark .lead{ color:var(--on-dark-soft); }
.section-tint{ background:var(--paper-deep); }
.section-surface{ background:var(--surface); }

/* ---------- HEADER / MENU ----------
   Structuur bewust gelijk aan het echte osees.nl-menu: logo links, horizontale
   links + CTA rechts op desktop, hamburger + uitklapmenu onder 860px. Geen
   scheidingslijn onder de header (past niet bij de huisstijl). */
header{ position:sticky; top:0; z-index:50; background:rgba(255,248,241,.92); backdrop-filter:blur(10px); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; }
.logo{ display:flex; align-items:center; gap:2px; min-width:0; }

/* Het beeldmerk (gele ring) is letterlijk de "O" van het woord, zoals bij het Osees-
   woordmerk: geen los icoon + los woord, maar één doorlopend geheel. */
.logo-mark-o{ width:24px; height:24px; flex:none; margin-right:1px; transform:translateY(1px); }
.brand-woordmerk{ font-family:"HK Nova",-apple-system,sans-serif; color:var(--ink); font-size:20px; letter-spacing:.01em; white-space:nowrap; }
.logo-sub{ font-size:12px; color:var(--ink-faint); font-weight:500; white-space:nowrap; display:flex; align-items:center; gap:6px; margin-left:10px; }
.logo-sub .osees-woordmerk{ height:16px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; font-weight:700; color:var(--ink-soft); list-style:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:16px; flex:none; }
.nav-burger{ display:none; width:40px; height:40px; border-radius:8px; background:var(--surface); align-items:center; justify-content:center; cursor:pointer; flex:none; }
.nav-burger span, .nav-burger::before, .nav-burger::after{ content:""; display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-burger{ flex-direction:column; gap:4px; }
@media(max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-right [data-menu-cta]{ display:none; }
}
@media(max-width:480px){
  .logo-sub{ display:none; }
}
.mobile-menu{ display:none; flex-direction:column; gap:2px; padding:0 20px 18px; }
.mobile-menu.is-open{ display:flex; }
.mobile-menu a{ padding:12px 4px; font-size:15px; font-weight:700; }
.mobile-menu .btn{ margin-top:12px; justify-content:center; }

/* ---------- HERO ----------
   Donkere, paarse achtergrond (huisstijlkleur), zodat de pagina niet één vlakke
   ondergrond is en er meteen ruimte/diepte in zit. */
.hero{ padding-top:64px; padding-bottom:64px; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.22; margin-bottom:22px; }
.price-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--ink); font-weight:700; font-size:13.5px; padding:7px 14px; border-radius:100px; margin-bottom:22px; }
.hero-sub{ font-size:13.5px; color:var(--on-dark-faint); margin-top:12px; }

/* ---------- kaarten / lagen ---------- */
.lagen-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px; }
@media(max-width:760px){ .lagen-grid{ grid-template-columns:1fr; } }
.laag{ background:var(--surface); border-radius:var(--card-radius); padding:var(--card-pad); box-shadow:var(--shadow-card); }
.laag-num{ font-family:'Apparel Display','HK Nova',sans-serif; color:var(--yellow-deep); font-size:14px; margin-bottom:8px; }
.laag h3{ font-size:16.5px; font-weight:900; margin-bottom:10px; }
.laag p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.duiding-box{ margin-top:28px; background:var(--ink); color:var(--on-dark); border-radius:var(--card-radius); padding:24px 28px; font-size:15px; line-height:1.6; }
.duiding-box strong{ color:var(--yellow); }

.showcase-head{ max-width:640px; margin-bottom:34px; }
.showcase-head p{ font-size:15.5px; color:var(--ink-soft); margin-top:10px; }
.section-dark .showcase-head p{ color:var(--on-dark-soft); }
.demo-link{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:700; font-size:14.5px; color:var(--ink); border-bottom:2px solid var(--yellow); padding-bottom:2px; }
.section-dark .demo-link{ color:var(--on-dark); }

.showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media(max-width:900px){ .showcase-grid{ grid-template-columns:1fr; } }
.showcase-visual{ background:var(--surface); border-radius:var(--card-radius); padding:18px; box-shadow:var(--shadow-card); }
.showcase-visual img{ border-radius:8px; }

/* ---------- tussentijdse CTA (tussen "wat je krijgt" en de rest van de pagina) ---------- */
.cta-tussentijds{ padding:36px 0; }
.cta-tussentijds-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; }
.cta-tussentijds-kop{ font-family:'Apparel Display','HK Nova',sans-serif; font-size:1.1rem; font-weight:700; display:block; margin-bottom:4px; }
.cta-tussentijds-sub{ color:var(--ink-soft); font-size:14px; }

/* ---------- wat dit niet is ---------- */
.niet p{ font-size:15.5px; margin-bottom:16px; max-width:62ch; }
.upsell-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
@media(max-width:700px){ .upsell-row{ grid-template-columns:1fr; } }
.upsell-box{ background:var(--surface); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow-card); }
.upsell-box b{ display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--yellow-deep); margin-bottom:6px; }

/* ---------- voor wie ---------- */
.voorwie-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:8px; }
@media(max-width:760px){ .voorwie-grid{ grid-template-columns:1fr; } }
.voorwie-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:16px; font-weight:700; }
.voorwie-col ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.voorwie-col li{ font-size:15px; padding-left:20px; position:relative; }
.voorwie-col.ja li::before{ content:"+"; position:absolute; left:0; color:var(--yellow-deep); font-weight:900; }
.voorwie-col.nee li::before{ content:"\2013"; position:absolute; left:0; color:var(--ink-faint); }

/* ---------- hoe het werkt ---------- */
.werkt p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:14px; max-width:68ch; }

/* ---------- vergelijkingstabel ---------- */
.vergelijk-tafel-wrap{ overflow-x:auto; margin-top:28px; border-radius:var(--card-radius); background:var(--surface); box-shadow:var(--shadow-card); }
table.vergelijk{ width:100%; border-collapse:collapse; min-width:560px; font-size:13.5px; }
table.vergelijk th, table.vergelijk td{ padding:11px 16px; text-align:left; }
table.vergelijk tbody tr:nth-child(even){ background:var(--paper); }
table.vergelijk th{ font-weight:900; font-family:'Apparel Display','HK Nova',sans-serif; background:var(--paper-deep); font-size:12.5px; }
table.vergelijk th.kol, table.vergelijk td.kol{ text-align:center; }
table.vergelijk .ja{ color:var(--green); font-weight:900; }
table.vergelijk .nee{ color:var(--ink-faint); }
table.vergelijk th.premium{ background:var(--yellow-tint); }
table.vergelijk td.groep{ font-weight:700; padding-top:18px; color:var(--ink-faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- prijs ---------- */
.prijs-ladder{ display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:18px; align-items:stretch; margin-top:32px; }
@media(max-width:900px){ .prijs-ladder{ grid-template-columns:1fr; } }
.prijs-kaart{ background:var(--surface); border-radius:var(--card-radius); padding:28px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.prijs-kaart.is-featured{ background:var(--ink); color:var(--on-dark); }
.prijs-naam{ font-family:'Apparel Display','HK Nova',sans-serif; font-size:1.2rem; margin-bottom:4px; }
.prijs-bedrag{ font-family:'Apparel Display','HK Nova',sans-serif; font-size:2rem; color:var(--yellow-deep); margin-bottom:12px; }
.prijs-kaart.is-featured .prijs-bedrag{ color:var(--yellow); }
.prijs-kaart p.desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; flex-grow:1; margin-bottom:18px; }
.prijs-kaart.is-featured p.desc{ color:var(--on-dark-soft); }
.prijs-kaart .btn{ align-self:flex-start; }
.gesprek-note{ margin-top:22px; font-size:13.5px; color:var(--ink-faint); text-align:center; }

/* ---------- en dan ---------- */
.endan p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:14px; max-width:68ch; }

.site-footer{ padding:44px 20px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-size:13px; color:var(--ink-faint); }
.site-footer .osees-woordmerk{ height:15px; width:auto; opacity:.85; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:100; }
.skip-link:focus{ left:12px; top:12px; }