/* =====================================================================
   Aura  -  auravibetoday.com
   De dienst is een meditatie-app die je 's avonds op je telefoon opent.
   De site laat dat product zien: nachtblauw met een aurora-gloed, en het
   scherm van de app zelf in de hero, in de sessiekaarten en in de chat.
   Alles is in CSS getekend; er is geen fotomateriaal van de dienst.
   Bewust anders dan theauravibe-us.com, dat licht violet en pastel is.
   ===================================================================== */

:root{
  --paper:#f7f6f3;
  --paper-2:#efeeea;
  --surface:#ffffff;
  --surface-2:#f4f3ef;
  --line:#e3e1db;
  --line-2:#cfccc3;

  --text:#1a2422;
  --text-2:#4c5a56;
  --muted:#7f8b86;

  --aqua:#2f6f66;
  --aqua-2:#3d8c81;
  --aqua-wash:#e6efec;
  --peach:#b8714a;
  --peach-wash:#f6ece5;
  --night:#132420;

  --grad-cta:linear-gradient(120deg,#2f6f66,#255a53);

  --head:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --r-xl:34px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --shadow:0 1px 2px rgba(26,36,34,.04), 0 18px 40px -28px rgba(26,36,34,.4);
  --shadow-2:0 2px 6px rgba(26,36,34,.06), 0 34px 70px -34px rgba(26,36,34,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--body);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
svg{display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--head); font-weight:600; line-height:1.08; letter-spacing:-.02em}
h4{margin:0; font-weight:600}
p{margin:0}
ul,ol{margin:0}
::selection{background:var(--aqua-wash)}

.wrap{width:min(1160px, calc(100% - 2.6rem)); margin-inline:auto}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--text); color:var(--night); padding:.8rem 1.1rem}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--aqua); outline-offset:3px; border-radius:6px}

/* ================================ KNOPPEN ================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; padding:.85rem 1.9rem; border:0; border-radius:999px;
  font-family:var(--body); font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer; background:var(--grad-cta); color:#ffffff;
  box-shadow:0 16px 32px -18px rgba(47,111,102,.5);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease)}
.btn:hover{transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 22px 40px -18px rgba(47,111,102,.6)}
.btn:active{transform:translateY(0)}
.btn-lg{min-height:60px; padding:1rem 2.2rem; font-size:1.05rem}
.btn-block{width:100%}
.btn-ghost{background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--text)}

/* ================================= KOP ================================= */
.top{position:sticky; top:0; z-index:100; background:rgba(247,246,243,.88);
  backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:1rem; padding:.75rem 0}
.logo{display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none}
.logo img{height:34px; width:auto}

.burger{display:none; margin-left:auto; width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:14px; background:var(--surface);
  align-items:center; justify-content:center}
.burger span{position:relative; display:block; width:18px; height:1.8px; border-radius:2px; background:var(--text)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.8px;
  border-radius:2px; background:var(--text); transition:.22s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.top[data-open="true"] .burger span{background:transparent}
.top[data-open="true"] .burger span::before{top:0; transform:rotate(45deg)}
.top[data-open="true"] .burger span::after{top:0; transform:rotate(-45deg)}

.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:.15rem; list-style:none; padding:0; margin:0}
.nav a{display:block; text-decoration:none; color:var(--text-2); font-size:.94rem; font-weight:500;
  padding:.55rem .8rem; border-radius:999px; transition:.16s var(--ease)}
.nav a:hover{color:var(--text); background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--aqua); background:var(--aqua-wash)}
.nav-cta-li{margin-left:.6rem}
.nav .nav-cta{background:var(--grad-cta); color:#ffffff; padding:.65rem 1.25rem; min-height:44px;
  display:flex; align-items:center; font-weight:600}
.nav .nav-cta:hover{color:#ffffff; filter:brightness(1.06)}

/* ================================ HERO ================================ */
.hero{position:relative; overflow:hidden; min-height:min(86vh,740px); display:flex; align-items:center;
  padding-block:clamp(3.4rem,8vw,6rem); color:var(--text); isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:#efece7 url("/img/breed.jpg") center right/cover no-repeat}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(247,246,243,.97) 0%, rgba(247,246,243,.92) 30%,
             rgba(247,246,243,.55) 52%, rgba(247,246,243,0) 74%)}
.hero-inner{max-width:30rem}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.73rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--aqua-2); margin-bottom:1.2rem;
  padding:.4rem .95rem .4rem .7rem; border-radius:999px;
  background:var(--aqua-wash); border:1px solid rgba(47,111,102,.22)}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--aqua);
  box-shadow:0 0 0 4px rgba(47,111,102,.14)}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.2rem); line-height:1.02}
.hero h1 em{font-style:italic; color:var(--peach)}
.hero-sub{margin-top:1.4rem; font-size:clamp(1.02rem,1.4vw,1.13rem); color:var(--text-2); max-width:32rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.price-tag{display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.15rem; margin-top:1.4rem;
  padding:.6rem 1.1rem; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:.9rem; color:var(--text-2); box-shadow:var(--shadow)}
.price-tag b{color:var(--text); font-weight:600}

/* ============================ DE APP ZELF ============================ */
/* de motor zet dit blok naast .wrap, dus positioneren ten opzichte van .hero */
.phone{position:absolute; z-index:1; right:max(2.5vw, calc(50% - 545px)); top:50%;
  transform:translateY(-50%); width:clamp(248px,25vw,296px); aspect-ratio:9/17.2;
  border-radius:42px; padding:11px; background:linear-gradient(160deg,#2a4356,#0d1a26);
  box-shadow:0 40px 90px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.09)}
.phone::before{content:""; position:absolute; left:50%; top:19px; transform:translateX(-50%);
  width:74px; height:6px; border-radius:99px; background:rgba(255,255,255,.16); z-index:2}
.phone-screen{height:100%; border-radius:32px; padding:1.5rem 1.25rem 1.3rem;
  background:linear-gradient(175deg,#15304a,#0a1621 62%);
  display:flex; flex-direction:column; color:var(--text); overflow:hidden}
.ps-top{display:flex; justify-content:space-between; align-items:center; font-size:.7rem;
  color:var(--muted); margin-bottom:1.2rem}
.ps-sig{width:22px; height:9px; border-radius:2px; border:1px solid var(--muted); position:relative}
.ps-sig::after{content:""; position:absolute; inset:1.5px auto 1.5px 1.5px; width:12px;
  border-radius:1px; background:var(--muted)}
.ps-tag{font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--aqua-2);
  text-align:center}
.ps-art{position:relative; margin:1rem auto 1.3rem; width:min(148px,60%); aspect-ratio:1;
  display:grid; place-items:center}
.ps-ring{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16)}
.ps-ring.r1{inset:0; animation:adem 9s var(--ease) infinite}
.ps-ring.r2{inset:12%; border-color:rgba(94,200,192,.5); animation:adem 9s var(--ease) infinite .7s}
.ps-ring.r3{inset:20%; background:radial-gradient(circle at 38% 32%, rgba(143,222,214,.9), rgba(63,159,176,.55) 60%, rgba(20,48,68,.4));
  border-color:transparent; animation:adem 9s var(--ease) infinite 1.4s}
.ps-breathe{position:relative; z-index:1; font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; color:#ffffff; font-weight:700; white-space:nowrap}
@keyframes adem{0%,100%{transform:scale(1); opacity:.92} 50%{transform:scale(1.08); opacity:1}}
.ps-title{font-family:var(--head); font-size:1.16rem; text-align:center}
.ps-sub{font-size:.72rem; color:var(--muted); text-align:center; margin-top:.15rem}
.ps-wave{display:flex; align-items:center; justify-content:space-between; gap:2px;
  height:34px; margin-top:1.2rem}
.ps-wave span{flex:1; border-radius:2px; background:rgba(255,255,255,.16); height:var(--h)}
.ps-wave span:nth-child(-n+11){background:var(--aqua)}
.ps-time{display:flex; justify-content:space-between; font-size:.66rem; color:var(--muted); margin-top:.4rem}
.ps-controls{display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-top:auto;
  padding-top:1.4rem}
.pc{position:relative; width:22px; height:22px; opacity:.8}
.pc.back::before,.pc.fwd::before{content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); border-top:7px solid transparent; border-bottom:7px solid transparent}
.pc.back::before{border-right:10px solid var(--text-2)}
.pc.fwd::before{border-left:10px solid var(--text-2)}
.pc.play{width:52px; height:52px; border-radius:50%; background:var(--grad-cta); opacity:1;
  box-shadow:0 12px 26px -12px rgba(94,200,192,.9)}
.pc.play::after{content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-left:15px solid #ffffff; border-top:10px solid transparent; border-bottom:10px solid transparent}

/* =============================== BANDEN =============================== */
.section{padding-block:clamp(3.2rem,6vw,5rem)}
.band{background:var(--paper-2); border-block:1px solid var(--line)}
.band-ink{position:relative; overflow:hidden; background:var(--night); color:#c4d5cf; border-block:0}
.band-ink h2{color:#fff}
.band-ink .close p{color:#a9bcb6}
.band-ink .price-tag{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#c4d5cf; box-shadow:none}
.band-ink .price-tag b{color:#fff}
.band-ink .btn{background:#fff; color:var(--night); box-shadow:0 16px 32px -18px rgba(0,0,0,.6)}
.band-ink .btn:hover{background:#eef3f1; color:var(--night)}
.band-ink::before{content:""; position:absolute; inset:0;
  background:radial-gradient(50% 130% at 50% 112%, rgba(47,111,102,.1), transparent 70%)}
.band-ink .wrap{position:relative}
.band-ink .close p{color:var(--text-2)}

.sec-head{max-width:40rem; margin-bottom:clamp(2rem,3.4vw,2.8rem)}
.sec-head h2{font-size:clamp(1.95rem,3.6vw,2.7rem)}
.sec-head p{margin-top:1rem; color:var(--text-2)}
.sec-head.center{margin-inline:auto; text-align:center}

/* =============================== CIJFERS =============================== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.stat{padding:1.7rem 1.1rem; text-align:center; background:var(--surface)}
.stat b{display:block; font-family:var(--head); font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  color:var(--aqua)}
.stat span{display:block; margin-top:.5rem; font-size:.85rem; color:var(--muted)}

/* ============================= PRAKTIJKEN ============================= */
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1.1rem}
.tool{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.7rem 1.5rem; box-shadow:var(--shadow); transition:transform .2s var(--ease), border-color .2s var(--ease)}
.tool:hover{transform:translateY(-3px); border-color:var(--line-2)}
.tool-ic{display:grid; place-items:center; width:48px; height:48px; border-radius:16px;
  margin-bottom:1.2rem; background:var(--c-wash); color:var(--c)}
.tool-ic svg{width:23px; height:23px}
.tool h3{font-size:1.16rem}
.tool p{margin-top:.6rem; color:var(--text-2); font-size:.95rem}
[data-c="sage"] {--c:#2f6f66; --c-wash:#e6efec}
[data-c="night"]{--c:#3c5f7d; --c-wash:#e7edf3}
[data-c="clay"] {--c:#b8714a; --c-wash:#f6ece5}
[data-c="gold"] {--c:#94742f; --c-wash:#f4efe2}

/* =============================== SESSIES =============================== */
/* Kaarten die eruitzien als de rijen in de app: hoes, duur en een afspeelknop. */
.sessions{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem}
.session{display:block; text-decoration:none; border-radius:var(--r-l); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .2s var(--ease), border-color .2s var(--ease)}
.session:hover{transform:translateY(-4px); border-color:var(--line-2)}
.session-art{position:relative; display:block; aspect-ratio:16/10;
  background:var(--grad-art)}
.session-art::before{content:""; position:absolute; inset:0;
  background:radial-gradient(58% 70% at 30% 24%, var(--c-wash), transparent 72%),
             radial-gradient(46% 56% at 78% 78%, var(--c-wash), transparent 76%)}
.session-art::after{content:""; position:absolute; left:16%; right:16%; top:50%; height:38px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--c) 0 2px, transparent 2px 7px);
  -webkit-mask-image:radial-gradient(70% 100% at 50% 50%, #000 40%, transparent 100%);
  mask-image:radial-gradient(70% 100% at 50% 50%, #000 40%, transparent 100%);
  opacity:.5}
.session-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.94);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.9)}
.session-play::after{content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-left:13px solid var(--aqua); border-top:8px solid transparent; border-bottom:8px solid transparent}
.session-body{display:block; padding:1rem 1.2rem 1.2rem}
.session-tag{display:block; font-size:.71rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.session-name{display:block; margin-top:.3rem; font-family:var(--head); font-size:1.1rem; color:var(--text)}

/* ================================ SPLIT ================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center}
.split.reverse > div:first-child{order:2}

/* ================================ ZENI ================================ */
.chat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.5rem; box-shadow:var(--shadow-2); display:grid; gap:.8rem}
.chat-head{display:flex; align-items:center; gap:.5rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line); font-size:.9rem}
.chat-head b{font-weight:600}
.chat-head span:last-child{color:var(--muted); font-size:.82rem; margin-left:auto}
.chat-dot{width:9px; height:9px; border-radius:50%; background:var(--aqua);
  box-shadow:0 0 0 4px rgba(47,111,102,.14)}
.bubble{max-width:82%; padding:.85rem 1.1rem; border-radius:18px; font-size:.95rem; line-height:1.6}
.bubble.you{margin-left:auto; background:var(--paper-2); color:var(--text); border-bottom-right-radius:6px}
.bubble.zeni{background:var(--aqua); color:#fff; border-bottom-left-radius:6px; font-weight:500}

/* ================================ WEEK ================================ */
.week{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.6rem 1.7rem 1.3rem; box-shadow:var(--shadow-2)}
.week-head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.week-head b{font-family:var(--head); font-size:1.2rem}
.week-badge{background:var(--peach-wash); border:1px solid rgba(184,113,74,.28); border-radius:999px;
  padding:.28rem .8rem; font-size:.78rem; color:var(--peach)}
.week-bars{display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; align-items:end;
  height:150px; margin-top:1.4rem; padding-bottom:1.4rem; position:relative}
.wday{position:relative; height:100%}
.wbar{position:absolute; inset:auto 0 0 0; height:var(--h); border-radius:8px 8px 3px 3px;
  background:var(--paper-2)}
.wday.good .wbar{background:linear-gradient(180deg,#4d9a8e,#2f6f66)}
.wday.calm .wbar{background:linear-gradient(180deg,#d59468,#b8714a)}
.wday.low  .wbar{background:var(--line-2)}
.wlab{position:absolute; inset:auto 0 -1.35rem 0; text-align:center; font-size:.74rem; color:var(--muted)}
.week-foot{margin-top:.4rem; font-size:.88rem; color:var(--text-2)}

/* ================================ DOELEN ================================ */
.goals{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.9rem}
.goal{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:1.15rem 1.3rem; transition:.18s var(--ease)}
.goal:hover{border-color:var(--aqua); background:var(--aqua-wash); transform:none}
.goal b{display:block; font-family:var(--head); font-size:1.08rem; font-weight:600}
.goal span{display:block; margin-top:.15rem; font-size:.88rem; color:var(--muted)}

/* =============================== STAPPEN =============================== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:s}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.8rem 1.6rem; counter-increment:s; box-shadow:var(--shadow)}
.step::before{content:"0" counter(s); display:block; font-family:var(--head); font-size:1.5rem;
  color:var(--aqua); margin-bottom:.9rem}
.step h3{font-size:1.15rem}
.step p{margin-top:.6rem; color:var(--text-2); font-size:.95rem}

/* =============================== LIJSTEN =============================== */
.lines{list-style:none; padding:0; display:grid; gap:.7rem; margin-top:1.4rem}
.lines li{position:relative; padding-left:1.9rem; color:var(--text-2); font-size:.98rem}
.lines li::before{content:""; position:absolute; left:0; top:.5em; width:15px; height:8px;
  border-left:2px solid var(--aqua); border-bottom:2px solid var(--aqua); transform:rotate(-45deg)}

/* ================================ PRIJS ================================ */
.pricebox{display:grid; grid-template-columns:1.05fr 1fr; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-2)}
.pricebox-main{position:relative; padding:clamp(1.9rem,3vw,2.8rem)}
.pricebox-main::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 0% 0%, var(--aqua-wash), transparent 62%)}
.pricebox-main > *{position:relative}
.pricebox-side{padding:clamp(1.9rem,3vw,2.8rem); background:var(--paper-2);
  border-left:1px solid var(--line); display:flex; align-items:center}
.pricebox-side .factrow{width:100%}
.amount{display:flex; align-items:baseline; gap:.55rem}
.amount .num{font-family:var(--head); font-size:clamp(2.6rem,5.4vw,3.6rem); line-height:1;
  color:var(--text)}
.amount .per{color:var(--muted)}
.amount-sub{margin-top:.6rem; font-size:.92rem; color:var(--muted)}
.fine{margin-top:1.4rem; font-size:.8rem; line-height:1.7; color:var(--muted)}
.factrow{display:grid; gap:1.1rem}
.fact{display:flex; gap:.9rem; align-items:flex-start}
.fact-ic{width:38px; height:38px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
  background:var(--aqua-wash); border:1px solid rgba(47,111,102,.2); color:var(--aqua)}
.fact-ic svg{width:18px; height:18px}
.fact b{display:block; font-size:.96rem; font-weight:600}
.fact > div > span{display:block; font-size:.9rem; color:var(--text-2); margin-top:.15rem}

/* =============================== VRAGEN =============================== */
.qa{display:grid; gap:.7rem; max-width:52rem}
.qa details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.qa details[open]{border-color:var(--aqua); background:var(--surface)}
.qa summary{cursor:pointer; list-style:none; padding:1.1rem 3rem 1.1rem 1.3rem;
  font-weight:600; position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:""; position:absolute; right:1.3rem; top:1.4rem; width:9px; height:9px;
  border-right:2px solid var(--aqua); border-bottom:2px solid var(--aqua);
  transform:rotate(45deg); transition:transform .2s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg); top:1.65rem}
.qa .a{padding:0 1.3rem 1.2rem; color:var(--text-2); font-size:.96rem}
.qa .a a{color:var(--aqua-2)}

/* ================================ TIPS ================================ */
.tips{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1.1rem}
.tip{padding:1.5rem 0 0; border-top:1px solid var(--line-2)}
.tip h3{font-size:1.1rem}
.tip p{margin-top:.55rem; color:var(--text-2); font-size:.95rem}

/* =============================== SLOT =============================== */
.close{text-align:center; max-width:42rem; margin-inline:auto}
.close h2{font-size:clamp(2.1rem,4.4vw,3rem)}
.close p{margin-top:1rem}
.close .hero-cta{justify-content:center; margin-top:1.8rem}
.close .price-tag{margin-inline:auto}

/* =============================== INHOUD =============================== */
.page-hero{position:relative; overflow:hidden; padding-block:clamp(2.6rem,4.6vw,3.8rem);
  border-bottom:1px solid var(--line); background:var(--paper-2)}
.page-hero::before{content:""; position:absolute; inset:-60% -10% auto -10%; height:200%;
  background:radial-gradient(32% 42% at 18% 64%, rgba(47,111,102,.09), transparent 72%),
             radial-gradient(30% 38% at 82% 28%, rgba(184,113,74,.08), transparent 74%)}
.page-hero .wrap{position:relative}
.page-hero .back{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-2)}
.page-hero .back::before{content:"\2190"}
.page-hero h1{margin-top:1rem; font-size:clamp(2.1rem,4.4vw,3rem)}
.page-hero .lead{margin-top:1rem; color:var(--text-2); max-width:48rem}
.page-hero .updated{margin-top:.8rem; font-size:.82rem; color:var(--muted)}

.doc{padding-block:clamp(2.6rem,4.6vw,3.8rem)}
.doc-card{max-width:52rem}
.doc-card h2{font-size:clamp(1.3rem,2.3vw,1.6rem); margin-top:2.6rem}
.doc-card h2:first-of-type{margin-top:0}
.doc-card .note + h2, .doc-card .info-cards + h2, .doc-card .toc + h2,
.doc-card .contact-grid + h2, .doc-card .qa + h2{margin-top:2.6rem}
.doc-card h3{font-size:1.05rem; margin-top:1.6rem}
.doc-card p{margin-top:.95rem; color:var(--text-2)}
.doc-card ul,.doc-card ol{margin-top:.95rem; padding-left:1.3rem; display:grid; gap:.5rem; color:var(--text-2)}
.doc-card a{color:var(--aqua-2)}
.doc-card hr{border:0; border-top:1px solid var(--line); margin:2.6rem 0}

.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.4rem 1.6rem; margin-bottom:2.6rem}
.toc h2{font-size:.72rem!important; margin:0!important; font-family:var(--body); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.toc ol{display:block; margin-top:1rem; columns:2; column-gap:2rem; list-style:none; padding-left:0}
.toc li{margin-bottom:.45rem; break-inside:avoid}
.toc a{font-size:.94rem; color:var(--text-2); text-decoration:none}
.toc a:hover{color:var(--aqua-2)}

.note{background:var(--peach-wash); border:1px solid rgba(184,113,74,.24);
  border-left:3px solid var(--peach); border-radius:var(--r-s);
  padding:1.15rem 1.35rem; margin-top:1.7rem; font-size:.96rem; color:var(--text-2)}
.note strong{color:var(--text)}

.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-bottom:2.2rem}
.info-cards .ic{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:1.1rem 1.25rem}
.info-cards .l{font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.info-cards .v{margin-top:.3rem; font-family:var(--head); font-size:1.1rem}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.9rem}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:1.8rem}
.contact-card h2{margin-top:0!important; font-size:1.2rem}
.contact-row{display:flex; gap:.85rem; align-items:flex-start; margin-top:1.1rem}
.contact-row .ic{width:36px; height:36px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-cta); color:#ffffff}
.contact-row .ic svg{width:17px; height:17px}
.contact-row .l{font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.contact-row .v{font-size:.96rem}
.contact-row .v a{color:var(--aqua-2)}

.end-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* =============================== VOET =============================== */
.foot{background:var(--night); color:#a9bcb6; padding-block:clamp(2.8rem,5vw,3.8rem) 1.9rem;
  border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.2rem}
.foot h4{color:#9ec9bf; font-size:.71rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem}
.foot ul{list-style:none; padding:0; margin:0}
.foot li a{display:flex; align-items:center; min-height:42px; text-decoration:none; color:#bccdc7; font-size:.93rem}
.foot li a:hover{color:#fff}
.foot-brand .logo{margin-bottom:1.1rem}
.foot .logo img{filter:none}
.foot-tag{font-size:.92rem; max-width:34ch; color:#8ba39c}
.foot-contact{margin-top:1rem; font-size:.92rem}
.foot-contact a{color:#bccdc7; text-decoration:none}
.foot-contact a:hover{color:#fff}
.foot-base{margin-top:2.6rem; padding-top:1.7rem; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:.7rem; text-align:center}
.foot-disc{font-size:.79rem; line-height:1.7; color:#8ba39c; max-width:940px; margin-inline:auto}
.foot-disc a{color:#bccdc7}
.foot-copy{font-size:.85rem; font-weight:600; color:#fff}
.foot-addr{font-size:.78rem; color:#8ba39c}
.foot-addr a{color:#bccdc7}

/* =============================== KLEIN =============================== */
@media (max-width:1080px){
  .phone{position:static; transform:none; margin:2.8rem auto 0}
  .hero-inner{max-width:none}
}
@media (max-width:1000px){
  .pricebox{grid-template-columns:1fr}
  .pricebox-side{border-left:0; border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.reverse > div:first-child{order:0}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{position:absolute; left:0; right:0; top:100%; display:none; background:var(--paper);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding-bottom:.9rem}
  .top[data-open="true"] .nav{display:block}
  .nav ul{flex-direction:column; align-items:stretch; width:min(1160px,calc(100% - 2.6rem)); margin-inline:auto}
  .nav a{padding:.85rem .9rem; font-size:1rem; min-height:48px; display:flex; align-items:center; border-radius:14px}
  .nav-cta-li{margin-left:0; margin-top:.6rem}
  .nav .nav-cta{justify-content:center}
  .stats{grid-template-columns:1fr 1fr}
  .info-cards{grid-template-columns:1fr}
  .toc ol{columns:1}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{width:calc(100% - 1.9rem)}
  .sessions{grid-template-columns:1fr 1fr; gap:.8rem}
  .goals{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .week-bars{height:120px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   RITME
   Niet elke sectie is kop + zin + raster met gelijke kaartjes. Dat patroon
   is precies wat een pagina gegenereerd doet ogen. Hieronder de vormen die
   daarvan afwijken: een lijst met haarlijnen, een afspeellijst, een tabel
   met een gewone week, en chips in plaats van kaartjes.
   ===================================================================== */

/* kop links, inhoud rechts */
.stick{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem)}
.stick-l{position:sticky; top:110px; align-self:start}
.stick-l .sec-head{margin-bottom:1.4rem}
.stick-note{color:var(--muted); font-size:.93rem; max-width:30ch}

/* praktijken als lijst */
.prac-list{display:grid}
.prac{display:grid; grid-template-columns:auto auto 1fr; gap:1.2rem; align-items:start;
  padding:1.6rem 0; border-top:1px solid var(--line)}
.prac:first-child{border-top:0; padding-top:0}
.prac:last-child{padding-bottom:0}
.prac-n{font-family:var(--head); font-size:.95rem; color:var(--muted); padding-top:.35rem}
.prac-ic{display:grid; place-items:center; width:42px; height:42px; border-radius:14px;
  background:var(--c-wash); color:var(--c)}
.prac-ic svg{width:21px; height:21px}
.prac-b h3{font-size:1.14rem}
.prac-b p{margin-top:.4rem; color:var(--text-2); font-size:.95rem; max-width:46ch}

/* sessies als afspeellijst */
.tracks{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow)}
.trk-head,.trk{display:grid; grid-template-columns:2.2rem 2.4rem 1fr 10rem 5rem; align-items:center;
  gap:.6rem; padding:.85rem 1.4rem}
.trk-head{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); background:var(--paper-2)}
.trk{text-decoration:none; border-top:1px solid var(--line); transition:background .16s var(--ease)}
.trk:first-of-type{border-top:0}
.trk:hover{background:var(--surface-2)}
.trk-n{font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.trk-play{width:30px; height:30px; border-radius:50%; background:var(--c-wash); position:relative}
.trk-play::after{content:""; position:absolute; left:55%; top:50%; transform:translate(-50%,-50%);
  border-left:9px solid var(--c); border-top:6px solid transparent; border-bottom:6px solid transparent}
.trk-t{font-family:var(--head); font-size:1.06rem}
.trk-c{font-size:.86rem; color:var(--muted)}
.trk-d{font-size:.86rem; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}

/* een gewone week, als tabel */
.tabelwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--surface); box-shadow:var(--shadow)}
.rooster{width:100%; border-collapse:collapse; min-width:640px; font-size:.93rem}
.rooster th,.rooster td{text-align:left; padding:.95rem 1.3rem; border-top:1px solid var(--line);
  vertical-align:top}
.rooster thead th{border-top:0; background:var(--paper-2); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rooster tbody th{font-weight:600; color:var(--text); white-space:nowrap}
.rooster td b{display:block; font-weight:500; color:var(--text)}
.rooster td span{display:block; font-size:.8rem; color:var(--muted); margin-top:.1rem}
.rooster .num{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.rooster tbody tr:hover{background:var(--surface-2)}
.tabelwrap + .fine{margin-top:1rem}

/* doelen als chips */
.goals{display:flex; flex-wrap:wrap; gap:.6rem}
.goal{display:inline-flex; align-items:baseline; gap:.6rem; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:.7rem 1.2rem; text-decoration:none;
  transition:.16s var(--ease)}
.goal:hover{border-color:rgba(94,200,192,.55); background:var(--surface-2); transform:none}
.goal b{display:inline; font-family:var(--body); font-size:.96rem; font-weight:600}
.goal i{font-style:normal; font-size:.86rem; color:var(--muted)}

/* stappen als tijdlijn in plaats van drie gelijke kaartjes */
.steps{position:relative; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem)}
.steps::before{content:""; position:absolute; left:6%; right:6%; top:19px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.step{position:relative; background:transparent; border:0; box-shadow:none; padding:0}
.step::before{content:counter(s); display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; margin-bottom:1.4rem; background:var(--paper); color:var(--aqua);
  border:1px solid var(--line-2); font-family:var(--head); font-size:1rem}
.step h3{font-size:1.12rem}

@media (max-width:1000px){
  .stick{grid-template-columns:1fr}
  .stick-l{position:static}
  .trk-head,.trk{grid-template-columns:1.8rem 2.2rem 1fr 4.6rem}
  .trk-c{display:none}
  .steps{grid-template-columns:1fr; gap:1.6rem}
  .steps::before{display:none}
}

/* De pil-eyebrow hoort bij de hero. Boven elke sectie dezelfde pil herhalen maakt
   het ritme juist weer eentonig; daar wordt het een klein kapitaaltje met streep. */
.sec-head .eyebrow{display:flex; align-items:center; gap:.9rem; padding:0; margin-bottom:1rem;
  background:none; border:0; border-radius:0; color:var(--muted)}
.sec-head .eyebrow::before{content:""; width:26px; height:1px; border-radius:0; background:var(--line-2);
  box-shadow:none; flex:0 0 auto}


/* het app-blok onder de hero: telefoon rechts, tekst links */
.app-band{background:var(--paper-2); border-block:1px solid var(--line)}
.app-vis{display:grid; place-items:center}
.app-band .phone{position:static; transform:none; width:clamp(250px,24vw,290px)}

/* De telefoon blijft een scherm in het donker, ook nu de site licht is. De
   tekstkleuren daarbinnen dus expliciet, anders erven ze het donkere inktgrijs
   van de pagina en verdwijnt de titel in het scherm. */
.phone-screen{color:#eaf2f4}
.ps-top,.ps-sub,.ps-time{color:#7d949c}
.ps-sig{border-color:#7d949c}
.ps-sig::after{background:#7d949c}
.ps-tag{color:#8fded6}
.ps-title{color:#eaf2f4}
.ps-ring{border-color:rgba(255,255,255,.18)}
.ps-ring.r2{border-color:rgba(143,222,214,.55)}
.ps-ring.r3{background:radial-gradient(circle at 38% 32%, rgba(143,222,214,.95), rgba(63,159,176,.6) 60%, rgba(20,48,68,.45))}
.ps-breathe{color:#06131a}
.ps-wave span{background:rgba(255,255,255,.18)}
.ps-wave span:nth-child(-n+11){background:#5ec8c0}
.pc.back::before{border-right-color:#7d949c}
.pc.fwd::before{border-left-color:#7d949c}
.pc.play{background:linear-gradient(120deg,#5ec8c0,#3f9fb0); box-shadow:0 12px 26px -12px rgba(94,200,192,.9)}
.pc.play::after{border-left-color:#06131a}

/* hero: knoppen naast elkaar, prijsregel compacter */
.hero-inner{max-width:33rem}
.hero .price-tag{padding:.5rem 1rem; font-size:.86rem; box-shadow:0 10px 24px -18px rgba(26,36,34,.6)}
.hero .hero-cta{gap:.7rem}

/* Tweede fotomoment: het slotblok krijgt het detail van haar handen als
   ondergrond, met een donkere sluier eroverheen zodat de tekst leesbaar blijft. */
.band-ink{background:var(--night) url("/img/detail.jpg") center 30%/cover no-repeat}
.band-ink::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,36,32,.9), rgba(19,36,32,.82))}

/* =====================================================================
   STRAK TREKKEN
   Gelijke maten, koppen die netjes afbreken en geen losse woorden op een
   eigen regel. Dit is het verschil tussen "het staat er" en "het is af".
   ===================================================================== */

/* koppen breken evenwichtig af in plaats van met een los woord op regel twee */
h1,h2,h3,.hero h1,.sec-head h2{text-wrap:balance}
p,.lead,.hero-sub,.sec-head p{text-wrap:pretty}

/* één leesmaat voor lopende tekst, overal hetzelfde */
.sec-head{max-width:42rem}
.sec-head p{max-width:56ch}
.hero-sub{max-width:30rem}
.page-hero .lead{max-width:56ch}
.stick-note{max-width:34ch}

/* kaarten in een rij even hoog, tekst netjes bovenaan */
.tools,.tips,.goals,.steps{align-items:stretch}
.tip{display:flex; flex-direction:column}
.step{display:flex; flex-direction:column}

/* de twee kolommen van de prijskaart beginnen op dezelfde hoogte */
.pricebox-side{align-items:flex-start}
.pricebox-main .fine{max-width:52ch}

/* de lijst met praktijken: nummer, pictogram en tekst netjes uitgelijnd */
.prac{align-items:center}
.prac-n{padding-top:0; width:1.6rem; font-variant-numeric:tabular-nums}
.prac-b p{max-width:52ch}

/* gelijke ademruimte tussen alle secties, en iets meer lucht rond de banden */
.section{padding-block:clamp(3.4rem,6vw,5.2rem)}
.band + .section, .section + .band{border-top-color:var(--line)}

/* de afsluiter mag de grootste kop van de pagina zijn, dat sluit de opbouw af */
.close h2{font-size:clamp(2.2rem,4.8vw,3.2rem); max-width:18ch; margin-inline:auto}
.close p{max-width:46ch; margin-inline:auto}

/* cijferblok: de vier waarden op dezelfde regel, ook als het label twee regels wordt */
.stat{display:flex; flex-direction:column; justify-content:flex-start}
.stat span{margin-top:auto; padding-top:.5rem}

/* voettekst: de vier kolommen beginnen op dezelfde lijn */
.foot-grid{align-items:start}

/* de sessielijst: getallen rechts uitgelijnd en even breed */
.trk-n,.trk-d{font-variant-numeric:tabular-nums}

/* zes tips vullen twee volle rijen van drie; bij vier kolommen bleef de laatste
   rij half leeg en dat oogt slordig */
.tips{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .tips{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .tips{grid-template-columns:1fr} }

/* Op een telefoon snijdt de liggende foto weg naar de lege wand en dekt de
   sluier haar helemaal af. Daar dus de staande uitsnede, met haar bovenin en
   de tekst op het uitgevloeide deel eronder. */
@media (max-width:860px){
  .hero{min-height:0; padding-block:clamp(13rem,58vw,19rem) clamp(2.4rem,7vw,3.2rem)}
  .hero::before{background-image:url("/img/staand.jpg"); background-position:center 6%;
    background-size:cover}
  .hero::after{background:linear-gradient(180deg,
    rgba(247,246,243,0) 0%, rgba(247,246,243,.15) 26%, rgba(247,246,243,.88) 46%,
    rgba(247,246,243,.99) 60%)}
  .hero h1{font-size:clamp(2.5rem,10vw,3.2rem)}
}