@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Open+Sans:wght@300;400;600&display=swap');

  /* =====================================================================
     LANDINGSPAGINA-STIJL · René Diepeveen
     ---------------------------------------------------------------------
     Wordt samen met main.css geladen. main.css bepaalt de root font-size
     (10px, met responsive scaling). Dit bestand overschrijft de root NIET,
     zodat rem's hier hetzelfde betekenen als in main.css en de ingesloten
     footer correct rendert. Alle maten zijn daarom in de 10px-schaal
     (1rem = 10px); de body-tekst staat op 1.7rem = 17px.
     ===================================================================== */

  /* ---------- MERK-TOKENS ---------- */
  :root {
    --rd-blue:   #c2d7e8;
    --rd-lblue:  #f8fbfc;
    --rd-brown:  #8b7550;
    --rd-brown-dark: #6f5b3c;
    --rd-lbrown: #deccaf;
    --rd-cream:  #f9f6f1;
    --rd-text:   #525252;
    --rd-white:  #ffffff;

    --serif: 'Playfair Display', Georgia, serif;
    --sans:  'Open Sans', Arial, sans-serif;

    --maxw: 1100px;      /* leesbreedte binnen secties */
    --pad-x: 5.95rem;    /* horizontale sectiepadding (desktop) = 59.5px */
    --wave-h: 34px;      /* hoogte van de golf-scheiding */
  }

  html { scroll-behavior: smooth; }

  /* Body: font-size in rem (10px-basis) i.p.v. een vaste px-root, zodat
     main.css de root blijft bepalen en de footer niet mee-vergroot. */
  body.landing {
    background: var(--rd-lblue);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.7rem;   /* 17px op 10px-root */
    line-height: 1.75;
    color: var(--rd-text);
  }

  .landing h1, .landing h2, .landing h3 { font-family: var(--serif); font-weight: 500; }

  /* Neutraliseer main.css-regels die via body.page in de landing lekken
     (o.a. `.page h1 { display:flex; height:16rem; padding-bottom:6rem }`
     en de globale h1/h2/h3-kleuren en -line-heights). De component-classes
     hieronder zetten daarna de gewenste waarden per element. */
  .landing h1, .landing h2, .landing h3 {
    display: block;
    height: auto;
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 1.2;
  }

  /* ---------- HERBRUIKBARE ELEMENTEN ---------- */

  /* Inhoud-omhulsel: houdt tekst op leesbare breedte, gecentreerd */
  .landing .inner { max-width: var(--maxw); margin: 0 auto; }

  /* Knop */
  .landing .btn {
    display: inline-block;
    background: var(--rd-brown);
    color: var(--rd-white);
    padding: 1.53rem 3.4rem;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.53rem;
    letter-spacing: 0.03em;
    transition: background 0.25s, transform 0.2s;
    white-space: nowrap;
  }
  .landing .btn.scrollbtn {
    align-self: flex-end;
  }
  .landing .btn:hover { background: var(--rd-brown-dark); transform: translateY(-1px); }
  .landing .btn.on-dark { background: var(--rd-white); color: var(--rd-brown); }
  .landing .btn.on-dark:hover { background: var(--rd-lbrown); }

  /* Sectietitel + subtitel (gecentreerd) */
  .landing .section-title {
    text-align: center;
    color: var(--rd-brown);
    font-size: clamp(2.89rem, 3vw, 4.08rem);
    line-height: 1.3;
    margin-bottom: 1.7rem;
  }
  .landing .section-subtitle {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 5.95rem;
    color: var(--rd-text);
    font-size: 1.7rem;
  }

  /* Eyebrow / label boven een kop */
  .landing .eyebrow {
    font-size: 1.22rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rd-brown);
  }

  /* GOLF-SCHEIDING — signatuur-element van de site.
     Twee kleuren per golf:
       .from-X = achtergrond = kleur van de sectie BOVEN de golf
       .to-Y   = svg-vulling  = kleur van de sectie ONDER de golf
     Zo is er geen overlap/negatieve marge nodig en ontstaat er geen naad. */
  .landing .wave { display: block; line-height: 0; font-size: 0; }
  .landing .wave svg { display: block; width: 100%; height: var(--wave-h); }

  .landing .wave.from-hero   { background: var(--rd-brown); } /* hero eindigt in bruin */
  .landing .wave.from-cream  { background: var(--rd-cream); }
  .landing .wave.from-blue   { background: var(--rd-blue); }
  .landing .wave.from-white  { background: var(--rd-white); }
  .landing .wave.from-lbrown { background: var(--rd-lbrown); }

  .landing .wave.to-cream  svg path { fill: var(--rd-cream); }
  .landing .wave.to-blue   svg path { fill: var(--rd-blue); }
  .landing .wave.to-white  svg path { fill: var(--rd-white); }
  .landing .wave.to-lbrown svg path { fill: var(--rd-lbrown); }

  /* Merk-logo (twee in elkaar grijpende krommen). Herkleuren via
     .brand-mark--light (voor donkere achtergronden). */
  .landing .brand-mark { width: 52px; height: auto; display: block; }
  .landing .brand-mark .mark-a { fill: #87bac6; }  /* blauw */
  .landing .brand-mark .mark-b { fill: #c8aa7b; }  /* goudbruin */
  .landing .brand-mark--light .mark-a,
  .landing .brand-mark--light .mark-b { fill: var(--rd-white); }

  /* ---------- HERO ---------- */
  .landing .hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Rustige merk-gradient: zacht blauw dat afzakt naar warm bruin */
    background: linear-gradient(165deg, #7fa6c1 0%, #a9c0cf 32%, #c9b998 62%, var(--rd-brown) 100%);
  }
  /* Zachte lichtcirkel als subtiel sfeeraccent (optioneel weglaatbaar) */
  .landing .hero::before {
    content: '';
    position: absolute;
    top: 8%; right: 12%;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  }

  .landing .hero nav {
    position: relative; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
    padding: 3.4rem var(--pad-x);
  }
  .landing .nav-logo { display: flex; align-items: center; gap: 1.45rem; }
  .landing .nav-logo-text {
    font-family: var(--serif);
    font-size: 1.79rem;
    color: var(--rd-white);
    letter-spacing: 0.04em;
  }
  .landing .nav-links { display: flex; gap: 3.74rem; }
  .landing .nav-links a {
    color: var(--rd-white);
    text-decoration: none;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    opacity: 0.9;
    transition: opacity 0.2s;
  }
  .landing .nav-links a:hover { opacity: 1; text-decoration: underline; }

  .landing .hero-content {
    position: relative; z-index: 3;
    flex: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0 8.5rem;
    max-width: var(--maxw);
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
  }
  .landing .hero-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.92);
    margin-bottom: 1.7rem;
    text-shadow: 0 1px 12px rgba(0,0,0,0.18);
  }
  .landing .hero-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(4.08rem, 5.6vw, 7.14rem);
    color: var(--rd-white);
    line-height: 1.12;
    /* max-width: 760px; */
    text-shadow: 0 2px 24px rgba(0,0,0,0.2);
  }
  .landing .hero-title em { font-style: italic; color: #fff6ea; }
  .landing .hero-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(2rem, 2.4vw, 2.8rem);
    color: rgba(255,255,255,0.92);
    margin-top: 2.21rem;
    /* max-width: 500px; */
    text-shadow: 0 1px 12px rgba(0,0,0,0.18);
  }

  /* ---------- INTRO / SPIEGEL ---------- */
  .landing .intro { background: var(--rd-cream); padding: 9.35rem var(--pad-x) 10.2rem; }
  .landing .intro-lead {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.96rem, 2.1vw, 2.55rem);
    color: var(--rd-brown);
    line-height: 1.65;
    max-width: 740px;
    margin-bottom: 5.95rem;
  }
  .landing .intro-grid {
    /* display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 6.8rem;
    align-items: center; */
  }
  .landing .intro-grid h2 {
    color: var(--rd-brown);
    font-size: clamp(2.55rem, 2.8vw, 3.4rem);
    line-height: 1.3;
    margin-bottom: 2.21rem;
  }
  .landing .intro-grid p { margin-bottom: 1.87rem; font-size: 1.67rem; }

  /* Ronde beeldplek — vervang de gradient door een <img> indien gewenst */
  .landing .intro-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 14px 44px rgba(139,117,80,0.28);
    background: linear-gradient(140deg, #a9c0cf 0%, var(--rd-brown) 100%);
  }
  .landing .intro-image img { width: 100%; height: 100%; object-fit: cover; }

  .landing ul.checklist { 
    list-style: none; 
    margin-top: 1.7rem; 
    margin-left: 0 !important; 
    max-width: 600px;
  }
  .landing .checklist li {
    padding: 1.19rem 0 1.19rem 2.38rem;
    border-bottom: 1px solid var(--rd-lbrown);
    font-size: 1.58rem;
    color: var(--rd-brown);
    position: relative;
  }
  .landing .checklist li::before {
    content: '~';
    position: absolute; left: 0;
    color: var(--rd-brown);
  }

  /* ---------- SHIFT / KAARTEN ---------- */
  .landing .shift { background: var(--rd-blue); padding: 10.2rem var(--pad-x); }
  .landing .shift .section-title,
  .landing .shift .section-subtitle { color: #3d4f5c; }
  .landing .shift .section-title { color: var(--rd-brown); }

  .landing .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.25rem; }
  .landing .card {
    background: var(--rd-white);
    border-radius: 18px;
    padding: 4.42rem 4.08rem;
    box-shadow: 0 12px 36px rgba(45,67,86,0.1);
  }
  .landing .card .eyebrow { margin-bottom: 1.7rem; display: block; }
  .landing .card h3 { font-size: 2.21rem; color: var(--rd-brown); margin-bottom: 2.04rem; }
  .landing .card ul { 
    list-style: none; 
    margin-left:0px !important;
  }
  .landing .card ul li {
    font-size: 1.53rem;
    line-height: 1.5em;
    padding: 0.5rem 0 0.5rem 2rem;
    border-bottom: 1px solid var(--rd-cream);
    position: relative;
  }
  .landing .card ul li::before {
    content: '→';
    position: absolute; left: 0;
    color: var(--rd-brown);
    font-size: 1.36rem;
  }

  /* ---------- AANBOD / DETAILKAART ---------- */
  .landing .offer { background: var(--rd-cream); padding: 10.2rem var(--pad-x); }
  .landing .offer-inner { max-width: 1000px; margin: 0 auto; }
  .landing .offer-card {
    background: linear-gradient(155deg, var(--rd-brown) 0%, #a07f52 100%);
    color: var(--rd-white);
    border-radius: 22px;
    padding: 5.95rem;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 5.1rem;
    align-items: center;
    box-shadow: 0 18px 50px rgba(139,117,80,0.3);
    line-height: normal;
  }
  .landing .offer-card .eyebrow { color: var(--rd-lbrown); display: block; margin-bottom: 2.04rem; }
  .landing .offer-card h2 {
    font-size: clamp(2.89rem, 3vw, 3.91rem);
    color: var(--rd-white);
    margin-bottom: 0.68rem;
  }
  .landing .offer-card .subtitle {
    font-family: var(--serif);
    font-style: italic;
    color: var(--rd-lbrown);
    font-size: 1.79rem;
    margin-bottom: 3.06rem;
  }
  .landing .offer-card .promise { font-size: 1.65rem; color: rgba(255,255,255,0.92); margin-bottom: 3.06rem; }
  .landing .offer-outcomes { list-style: none; margin-bottom: 0.85rem; }
  .landing .offer-outcomes li {
    font-size: 1.53rem;
    padding: 0.94rem 0 0.94rem 2.21rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.95);
    position: relative;
  }
  .landing .offer-outcomes li::before { content: '~'; position: absolute; left: 0; color: var(--rd-lbrown); }

  .landing .offer-side { text-align: center; }
  .landing .offer-price { font-family: var(--serif); font-size: 4.42rem; color: var(--rd-white); }
  .landing .offer-price span {
    display: block;
    font-family: var(--sans);
    font-size: 1.22rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rd-lbrown);
    margin-bottom: 0.68rem;
  }
  .landing .offer-price small {
    display: block;
    font-family: var(--sans);
    font-size: 1.22rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.51rem;
  }
  .landing .offer-side .btn { margin-top: 2.38rem; }
  .landing .note-english-version { 
    margin-top: 40px; 
    font-size: 1.5rem; 
    line-height: 3rem;
    color: var(--rd-lbrown); 
  }
  .landing .note-english-version a {
    color: var(--rd-white);
    text-decoration: none;
  }

  /* ---------- STAPPEN / VERLOOP ---------- */
  .landing .flow { background: var(--rd-white); padding: 10.2rem var(--pad-x); }
  .landing .flow .inner { max-width: 1000px; }
  .landing .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.4rem; }
  .landing .step { text-align: center; padding: 2.55rem 1.7rem; }
  .landing .step-circle {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--rd-cream);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.87rem;
    font-family: var(--serif);
    font-size: 2.21rem;
    color: var(--rd-brown);
  }
  .landing .step h3 { font-size: 1.79rem; color: var(--rd-brown); margin-bottom: 1.02rem; }
  .landing .step p { font-size: 1.45rem; color: #6b6b64; line-height: 1.65; }

  /* ---------- QUOTE-BAND (signatuur van de site) ---------- */
  .landing .quote-band { background: var(--rd-lbrown); padding: 10.2rem var(--pad-x); text-align: center; }
  .landing .quote-band .inner { position: relative; max-width: 760px; }
  .landing .quote-band p {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(2.04rem, 2.2vw, 2.72rem);
    color: var(--rd-white);
    line-height: 1.55;
  }
  .landing .quote-mark {
    font-family: var(--serif);
    font-size: 8.5rem;
    line-height: 0;
    color: rgba(255,255,255,0.55);
    position: absolute;
  }
  .landing .quote-mark.open  { top: 0.68rem; left: -0.34rem; }
  .landing .quote-mark.close { bottom: -2.38rem; right: 0; }

  /* ---------- CTA ---------- */
  .landing .cta-band {
    background: linear-gradient(135deg, var(--rd-brown), #a07f52);
    padding: 9.35rem var(--pad-x);
    text-align: center;
    color: var(--rd-white);
  }
  .landing .cta-band h2 { font-size: clamp(3.06rem, 3.5vw, 4.08rem); margin-bottom: 1.7rem; color: var(--rd-white); }
  .landing .cta-band p { max-width: 480px; margin: 0 auto 3.91rem; color: var(--rd-lbrown); font-size: 1.65rem; }


  .landing img.round-img {
    margin: 4rem -17rem 4rem 6rem;
  }

  /* ---------- ROOT-SCHAAL / BREAKPOINT-OVERRIDES ----------
     main.css verkleint op smallere schermen de root font-size
     (7.5px tussen 1400–1799px, 5px onder 1399px). De landingspagina is
     echter ontworpen op een vaste 10px-root met eigen fluïde schaling via
     clamp()/vw en de 768px-breakpoint hieronder. We draaien die krimp
     daarom terug zodat de landing-secties niet mee-verkleinen.
     (Geldt alleen op landingspagina's, want dit bestand wordt daar alleen
     geladen.)

     De INGESLOTEN header en footer (main.css-styling) moeten juist wél
     meeschalen zoals op de rest van de site. Omdat we de root vastzetten op
     10px, schalen we ze terug met `zoom`, met dezelfde factor als de
     root-krimp in main.css: 0.75 (= 7.5/10) en 0.5 (= 5/10). `zoom` behoudt
     de volle breedte van de band en schaalt alleen de inhoud. */
  @media only screen and (min-width: 1400px) and (max-width: 1799px) {
    html { font-size: 10px; }
    .landing > header,
    .landing footer { zoom: 0.75; }
  }
  @media only screen and (max-width: 1399px) {
    html { font-size: 10px; }
    .landing footer { zoom: 0.5; }
  }
  /* De header krijgt in main.css ONDER 768px vaste px-maten (mobiele
     header met hamburger-icoon); die zijn root-onafhankelijk en mogen dus
     niet mee-geschaald worden. Daarom zoomen we de header alleen tot aan
     de mobiele breakpoint. (De footer blijft ook op mobiel rem-gebaseerd
     en schaalt dus wél mee, zie hierboven.) */
  @media only screen and (min-width: 768px) and (max-width: 1399px) {
    .landing > header { zoom: 0.5; }
  }
  

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 768px) {
    :root { --pad-x: 2.55rem; }
    .landing .intro-grid, .landing .card-grid, .landing .steps, .landing .offer-card, .landing .footer-inner {
      grid-template-columns: 1fr;
    }
    .landing .nav-links { display: none; }
    .landing .intro-image { max-width: 240px; margin: 0 auto; }
    .landing .offer-side { margin-top: 2.55rem; }
    .landing .quote-mark.open  { left: -0.17rem; }
    .landing .quote-mark.close { right: -0.17rem; }
  }