/* Valorem: gerichte verfijning van hero-inhoud, app, kennis en pakketten.
   Bestaande logo-, gloed-, pulse- en goudrandregels blijven in hun bronbestand. */

/* Minder uitleg in de rechter hero, met ruimte voor het belangrijkste. */
.hero-panel--luxe .hero-panel-kop{margin-bottom:16px}
.hero-panel--luxe .hero-panel-titel{margin:0 0 26px;font:600 clamp(1.55rem,2.3vw,1.9rem)/1.25 var(--serif);color:#fff;letter-spacing:-.02em}
.hero-panel--luxe .hero-panel-lijst{gap:15px}
.hero-panel--luxe .hero-panel-lijst li{padding-top:15px}
.hero-panel--luxe .hero-panel-lijst li:first-child{padding-top:0}
.hero-panel--luxe .hero-panel-lijst span{margin-top:3px;color:#c5d0e0}

/* Eén scherm centraal. De bestaande veeg-, sleep- en pijlbediening blijft. */
.app-presentatie{overflow:hidden}
.app-presentatie-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.app-presentatie-tekst,.app-presentatie-beeld{min-width:0}
.app-presentatie .section-head{max-width:470px;margin:0 0 26px;text-align:left}
.app-presentatie .section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.15}
.app-presentatie .section-head p:last-child{max-width:45ch}
.app-presentatie .app-slider{margin-top:0}
.app-presentatie .app-schermen{--breed:318px}
.app-presentatie-links{margin-top:28px;gap:12px}
.app-presentatie-links .btn{white-space:normal;text-align:center}
.app-scherm-keuzes{display:grid;gap:0;max-width:470px;border-top:1px solid var(--line)}
.app-scherm-keuzes[hidden]{display:none}
.app-scherm-keuzes button{position:relative;display:block;width:100%;padding:17px 16px 17px 22px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;color:var(--text-soft);font:inherit;transition:background .2s,color .2s}
.app-scherm-keuzes button::before{content:"";position:absolute;inset:17px auto 17px 0;width:3px;border-radius:2px;background:transparent}
.app-scherm-keuzes strong{display:block;font-size:1rem;font-weight:600;color:var(--ink)}
.app-scherm-keuzes span{display:block;margin-top:4px;font-size:.9rem;line-height:1.5}
.app-scherm-keuzes button:not([aria-pressed=true]) span{display:none}
.app-scherm-keuzes button[aria-pressed=true]{background:var(--paper);color:var(--text)}
.app-scherm-keuzes button[aria-pressed=true]::before{background:var(--gold-ink)}
.app-scherm-keuzes button:hover{background:var(--paper)}
.app-scherm-keuzes button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-3px}

/* Kennis: een hoofdartikel, directe nevenonderwerpen en compacte leesrijen. */
.kennis-opening{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,5vw,64px);align-items:center}
.kennis-uitgelicht{padding:clamp(28px,4vw,48px);border:1px solid #26416a;border-radius:var(--radius-lg);background:var(--ink);color:#d9e2ef}
.kennis-uitgelicht .eyebrow{color:var(--gold)}
.kennis-uitgelicht h2{margin:0 0 20px;color:#fff;font-size:clamp(1.9rem,3vw,2.65rem);line-height:1.18}
.kennis-uitgelicht>p:not(.eyebrow){max-width:45ch;margin-bottom:26px;line-height:1.7}
.kennis-uitgelicht .btn{white-space:normal;text-align:left}
.kennis-ernaast .eyebrow{margin:0 0 14px;color:var(--gold-ink)}
.kennis-ernaast ul{list-style:none;margin:0;padding:0}
.kennis-ernaast li{border-bottom:1px solid var(--line)}
.kennis-ernaast li:first-child{border-top:1px solid var(--line)}
.kennis-ernaast a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font:600 1.26rem/1.3 var(--serif);color:var(--ink);text-decoration:none}
.kennis-ernaast a svg,.kennis-artikel a svg{flex:none;width:20px;height:20px;color:var(--gold-ink)}
.kennis-ernaast a:hover span,.kennis-artikel a:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.kennis-themas{display:flex;align-items:baseline;gap:20px;margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.kennis-themas>span{flex:none;font-weight:600;color:var(--ink);font-size:.9rem}
.kennis-themas ul{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.kennis-themas a{display:inline-block;padding:5px 0;color:var(--text-soft);font-size:.9rem;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
.kennis-themas a:hover{color:var(--gold-ink);text-decoration-color:currentColor}
.kennis-overzicht{padding-top:0}
.kennis-thema{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:clamp(24px,6vw,80px);padding:46px 0;border-bottom:1px solid var(--line);scroll-margin-top:120px}
.kennis-thema:first-child{padding-top:16px}
.kennis-thema-kop h2{margin:0 0 10px;font-size:1.7rem;line-height:1.25}
.kennis-thema-kop p{margin:0;color:var(--text-soft);font-size:.86rem}
.kennis-artikel{padding:22px 0;border-top:1px solid var(--line)}
.kennis-artikel:first-child{padding-top:0;border-top:0}
.kennis-artikel:last-child{padding-bottom:0}
.kennis-artikel h3{margin:0 0 9px;font-size:1.35rem;line-height:1.35}
.kennis-artikel a{display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--ink);text-decoration:none}
.kennis-artikel p{max-width:64ch;margin:0;padding-right:44px;color:var(--text-soft);font-size:.95rem;line-height:1.65}

/* Pakketkaartgeometrie en goudrand blijven; gedeelde rijen lijnen de inhoud uit. */
.pakket-keuze-kort{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 24px}
.pakket-keuze-kort p{margin:0;padding:0 0 14px;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.5}
.pakket-keuze-kort strong{display:block;margin-bottom:5px;color:var(--ink);font-weight:600}
.pakket-keuze-kort span{display:block;color:var(--text-soft)}
@supports(grid-template-rows:subgrid){
 .pakket-presentatie--luxe .pakket-paar{row-gap:0}
 .pakket-presentatie--luxe .pakket-kaart{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
 .pakket-presentatie--luxe .pakket-kaart>.btn{align-self:end;margin-top:0}
}
@media(max-width:1000px){
 .app-presentatie-grid{gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .app-presentatie .app-schermen{--breed:290px}
 .app-scherm-keuzes button{padding:14px 12px 14px 20px}
 .app-scherm-keuzes span{font-size:.84rem}
 .app-presentatie-links{flex-direction:column;align-items:stretch}
}
@media(max-width:760px){
 .app-presentatie-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .app-presentatie-tekst{display:contents}
 .app-presentatie .section-head{max-width:580px;margin:0;grid-row:1}
 .app-presentatie-beeld{grid-row:2}
 .app-presentatie .app-schermen{--breed:min(74vw,300px);margin-inline:-22px}
 .app-scherm-keuzes{grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
 .app-scherm-keuzes button{padding:14px 16px;border-bottom:1px solid var(--line)}
 .app-scherm-keuzes button:last-child,.app-scherm-keuzes button:nth-last-child(2):nth-child(odd){border-bottom:0}
 .app-scherm-keuzes button:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
 .app-scherm-keuzes button:nth-child(odd){border-right:1px solid var(--line)}
 .app-scherm-keuzes button::before{inset:14px auto 14px 0}
 .app-scherm-keuzes span{font-size:.84rem}
 .app-presentatie-links{grid-row:4;margin-top:0;flex-direction:row;align-items:stretch}
 .app-presentatie-links .btn{flex:1;min-width:180px}
 .kennis-opening{grid-template-columns:minmax(0,1fr);gap:28px}
 .kennis-ernaast a{font-size:1.18rem;padding:18px 0}
 .kennis-themas{display:block;margin-top:30px}
 .kennis-themas ul{margin-top:12px;gap:5px 18px}
 .kennis-thema{grid-template-columns:minmax(0,1fr);gap:24px;padding:34px 0}
 .kennis-thema:first-child{padding-top:8px}
 .kennis-thema-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
 .kennis-thema-kop h2{margin:0;font-size:1.5rem}
 .kennis-thema-kop p{flex:none;font-size:.78rem}
 .kennis-artikel h3{font-size:1.22rem}
 .kennis-artikel p{padding-right:0;font-size:.9rem}
}
@media(max-width:720px){
 .pakket-keuze-kort{gap:18px}
 .pakket-keuze-kort p{font-size:.84rem}
 .pakket-presentatie--luxe .pakket-paar{row-gap:18px}
 .pakket-presentatie--luxe .pakket-kaart{display:flex;grid-row:auto}
 .pakket-presentatie--luxe .pakket-kaart>.btn{align-self:stretch;margin-top:auto}
}
@media(max-width:900px){
 .app-slider.is-slider .slider-knoppen{gap:6px}
 .app-slider .slider-stippen{gap:0}
 .app-slider .slider-stippen button{width:24px;min-width:24px;flex:none}
 .app-slider .slider-stippen button.is-actief{width:24px}
 .app-slider .slider-stippen button.is-actief::before{width:20px}
 .app-slider .slider-pijl{width:40px;min-width:40px;flex:none}
}
@media(prefers-reduced-motion:reduce){.app-scherm-keuzes button{transition:none}}

/* 20-9-2026 (Jawad: "4 en 6 verwerk"): de pakketkeuze links uitgelijnd, net als
   de kop erboven, en geen schaduw meer onder de gekozen knop. Staat hier omdat
   dit bestand na presentatie.css laadt. */
.pakket-tabs{margin-left:0}
.pakket-tabs button[aria-selected=true]{box-shadow:none}

/* =========================================================================
   21-9-2026, Jawad over de home op de telefoon: "maak dit alleen luxer en
   visueler, het ziet er droog uit".

   Er komt GEEN blok, GEEN kaart, GEEN icoon en GEEN foto bij: de teksten, de
   volgorde en de indeling blijven exact zoals ze zijn. Wat erbij komt is
   materiaal. Vier dingen:
     1. het marineblauw is geen vlakke kleur meer maar een koepel - licht
        bovenin, donker aan de onderrand - zodat de hero diepte krijgt;
     2. een ingegraveerd monogram (de V uit het beeldmerk) als watermerk, en
        fijne gegraveerde ringen zoals de guilloche op waardepapier;
     3. elke gouden haarlijn loopt van donker naar licht naar donker. Vlak goud
        oogt dof; vergelijk de notitie bij .brand-mark in styles.css ("goud is
        een metaal en dat zie je pas als de rand licht vangt", Jawad 10-9);
     4. de lichte vlakken worden warm papier met een lichtval, in plaats van
        koel schermgrijs, en de haarlijnen in de registers worden warm.
   Dit bestand laadt na styles.css en site-refresh.css, dus het wint zonder
   !important.
   ========================================================================= */

:root{
  /* de gouden haarlijn die licht vangt; overal via border-image, zodat er
     geen extra element bij komt dat de veegbaan van B14 zou breken */
  --goud-lijn:linear-gradient(90deg, rgba(193,154,74,0) 0%, rgba(193,154,74,.45) 7%,
              #e3c684 33%, rgba(193,154,74,.85) 58%, rgba(193,154,74,.4) 87%, rgba(193,154,74,0) 100%);
  --lijn-warm:#e7e1d5;   /* haarlijn op papier; --line is koel blauwgrijs */
}

/* --- 1. de hero: een koepel in plaats van een vlak ---------------------- */
.hero{
  background:radial-gradient(135% 82% at 50% -14%, #142b52 0%, #0b1e3c 44%, #07172f 74%, #050f25 100%);
}
/* de verlopen blijven, er komt een gouden haarlijn op de onderrand bij zodat
   de overgang naar het witte vlak eronder een rand heeft en geen knip */
.hero::before{
  background:
    var(--goud-lijn) left bottom/100% 1px no-repeat,
    radial-gradient(900px 420px at 78% 8%, rgba(193,154,74,.26), transparent 62%),
    radial-gradient(700px 380px at 8% 92%, rgba(59,110,158,.3), transparent 60%);
}
/* het raster van 64 px las als een blauwdruk; nu gegraveerde ringen */
.hero::after{
  opacity:.8; background-size:auto;
  background-image:
    repeating-radial-gradient(circle at 86% -2%, rgba(219,185,104,.1) 0 1px, transparent 1px 17px),
    repeating-radial-gradient(circle at 2% 104%, rgba(146,186,234,.07) 0 1px, transparent 1px 23px);
  -webkit-mask-image:radial-gradient(86% 78% at 74% 6%, #000 18%, transparent 100%);
  mask-image:radial-gradient(86% 78% at 74% 6%, #000 18%, transparent 100%);
}
/* het monogram als watermerk, half over de rechterrand heen. Het is de V uit
   het beeldmerk, door een masker gehaald zodat de kleur hier uit het
   goudverloop komt en niet uit de png. */
/* Het masker staat in een @supports: een browser die maskers niet kent, krijgt
   geen gouden rechthoek te zien maar helemaal niets. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .hero-merk{
    position:absolute; z-index:1; pointer-events:none;
    right:-11%; bottom:-16%; width:min(76vw,440px); aspect-ratio:1;
    background:linear-gradient(152deg, rgba(242,219,166,.3) 0%, rgba(193,154,74,.17) 44%, rgba(193,154,74,.04) 100%);
    -webkit-mask:url(mark-valorem-glyph.png) no-repeat center/contain;
    mask:url(mark-valorem-glyph.png) no-repeat center/contain;
  }
  @media (max-width:720px){
    /* op de telefoon lager en verder naar rechts, zodat de poot van de V niet
       door de regel met de kwalificatie heen loopt */
    .hero-merk{right:-24%; bottom:-19%; width:84vw}
  }
}
/* de regel met de kwalificatie hangt onder een gouden haarlijn in plaats van
   onder een vlak streepje (site-refresh.css zette hier border-top) */
.hero--focus .hero-badge{
  border-top:1px solid transparent; border-image:var(--goud-lijn) 1; color:#e2c88d;
}

/* --- 2. dezelfde koepel en gravure op de kop van elke andere pagina ------ */
.page-hero{
  background:radial-gradient(130% 96% at 74% -26%, #14294e 0%, #0a1c39 50%, #07172f 100%);
}
.page-hero::before{
  background:
    var(--goud-lijn) left bottom/100% 1px no-repeat,
    radial-gradient(720px 340px at 82% 0%, rgba(193,154,74,.24), transparent 62%);
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85;
  background-image:repeating-radial-gradient(circle at 88% -8%, rgba(219,185,104,.09) 0 1px, transparent 1px 17px);
  -webkit-mask-image:radial-gradient(78% 90% at 82% 0%, #000 12%, transparent 100%);
  mask-image:radial-gradient(78% 90% at 82% 0%, #000 12%, transparent 100%);
}

/* --- 3. warm papier met lichtval op de lichte vlakken -------------------- */
.section--alt{
  background-color:#f8f6f1;
  background-image:radial-gradient(1100px 420px at 86% -10%, rgba(193,154,74,.13), transparent 62%);
}

/* --- 4. goud dat licht vangt in de registers ---------------------------- */
.inv-lijst, .kennis-register{
  --line:var(--lijn-warm);
  border-top:1px solid transparent; border-image:var(--goud-lijn) 1;
}
/* het nummer groter, met een metaalverloop. Alle drie de stops halen op wit
   en op het papier hierboven meer dan 4,5:1, dus het blijft leesbaar. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .inv-nr{
    background-image:linear-gradient(135deg,#6f5622 0%,#8a6318 44%,#785d26 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.inv-nr{font-size:.95rem; letter-spacing:.2em}
.inv-pijl{border-color:rgba(193,154,74,.45)}
.inv-lijst a:hover .inv-pijl{border-color:var(--ink)}
.eyebrow::before{
  width:38px; opacity:1;
  background:linear-gradient(90deg, rgba(193,154,74,.2) 0%, #c19a4a 55%, rgba(193,154,74,.45) 100%);
}
.page-hero .eyebrow::before, .hero .eyebrow::before, .cta .eyebrow::before{
  background:linear-gradient(90deg, rgba(219,185,104,.25) 0%, #e3c684 55%, rgba(219,185,104,.5) 100%);
}

/* --- 5. de slotband als een akte: koepel en een gouden kaderlijn --------- */
.cta{background:radial-gradient(125% 130% at 18% -14%, #16305a 0%, #0a1c39 48%, #06132b 100%)}
.cta::after{
  content:""; position:absolute; inset:13px; z-index:1; pointer-events:none;
  border:1px solid rgba(193,154,74,.24); border-radius:15px;
}
@media (max-width:640px){.cta::after{inset:9px; border-radius:13px}}

/* --- 6. koppen breken evenwichtig af ------------------------------------ */
.hero h1, .page-hero h1, .section-head h2, .inv-kop h2, .cta h2{text-wrap:balance}

/* niets hiervan beweegt; wie beweging uit heeft staan ziet hetzelfde beeld */

/* --- 7. vervolg 21-9: papier dat je voelt, en het merk in de slotband ---- */
/* Heel fijne liggende lijnen, zoals geschept papier. Op 2,8% dekking zie je ze
   niet als streepjes maar als materiaal; zonder textuur bleef het vlak plat. */
.section--alt{
  background-image:
    radial-gradient(1100px 420px at 86% -10%, rgba(193,154,74,.13), transparent 62%),
    repeating-linear-gradient(0deg, rgba(122,95,39,.022) 0 1px, transparent 1px 7px);
}
/* het monogram ook in de slotband, tegenover de tekst; .cta > * staat op
   z-index 2, dus het blijft achter de kop en de knoppen */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .cta-merk{
    position:absolute; z-index:1; pointer-events:none;
    right:4%; top:50%; transform:translateY(-50%); width:min(28%,215px); aspect-ratio:1;
    background:linear-gradient(152deg, rgba(242,219,166,.26) 0%, rgba(193,154,74,.13) 46%, rgba(193,154,74,.03) 100%);
    -webkit-mask:url(mark-valorem-glyph.png) no-repeat center/contain;
    mask:url(mark-valorem-glyph.png) no-repeat center/contain;
  }
  @media (max-width:640px){.cta-merk{right:-14%; top:auto; bottom:-12%; transform:none; width:62%}}
}

/* 21-9-2026, bij de nieuwe kop ("Belastingadvies op niveau, administratie op
   orde."): met max-width 15ch brak de regel midden in "op niveau". Iets meer
   ruimte laat de kop op brede schermen bij de komma afbreken; text-wrap:balance
   houdt de twee regels even lang. */
.hero--stil h1{max-width:22ch}

/* 24-9-2026 (Jawad: "maak woordje niveau en orde goud gloeiend"): de twee
   kernwoorden in de kop als metaalgoud met een zachte gloed en een langzame
   glans, dezelfde goudglans als de merknaam in de app (keyframe in styles.css).
   Per woord een inline-block, zodat de gloed (filter) en het goudverloop
   (background-clip) op het woord zelf werken; niveau, orde, Expert en order
   hebben geen staartletters, dus er valt niets weg. Bij "minder beweging"
   staat de glans stil, de gloed blijft. */
.hero h1 .goud-woord{white-space:nowrap}
.hero h1 .goud-gloed{
  /* 24-9-2026, tweede versie: effen goud met een gloed via text-shadow. Het
     goudverloop met background-clip:text werd in Safari pas getekend nadat de
     binnenkomst van de kop klaar was, dus de woorden kwamen te laat (Jawad:
     "effect duurt te langzaam, moet faden op tijd"). */
  color:#e4c57c;
  text-shadow:0 0 18px rgba(219,185,104,.42), 0 0 2px rgba(255,236,190,.35);
}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .goud-gloed{animation:goud-adem 4.5s ease-in-out 1.2s infinite alternate}
}
@keyframes goud-adem{to{text-shadow:0 0 26px rgba(219,185,104,.62), 0 0 3px rgba(255,236,190,.5)}}