/* Hero 2 (25 sep 2026, website-audit + concurrenten).
   Mews/Apaleo: één kop, één zin, één knop, bewijs eronder, alles boven de vouw.
   Attractions.io/Apaleo: een echte plek en het product in één beeld.
   Daarom: geen tweede logo, slogan en doelgroep in één regel, geen alinea,
   rechts de plekfoto met de Booqi in de hand en de telefoon met de live gids. */
.hero .wrap{min-height:0;padding-block:clamp(36px,5vh,64px) clamp(44px,6vh,72px);grid-template-columns:1fr 1.02fr;gap:clamp(28px,4vw,64px)}
.hero .wordmark,.hero .ritual3,.hero .lead,.hero .voorwie{display:none !important}
.hero .kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 20px;max-width:36em;font-size:.95rem;line-height:1.5;color:hsl(calc(var(--hb-h,42.93) + -2.93) 30% 82%)}
.hero .kicker .rit{flex:none;padding:5px 12px;border-radius:999px;font-weight:700;letter-spacing:.02em;font-size:.82rem;color:#fff;background:color-mix(in srgb,var(--gold-b,var(--gold)) 30%,transparent);border:1px solid color-mix(in srgb,var(--gold-b,var(--gold)) 55%,transparent)}
.hero h1{font-size:clamp(2.2rem,1.25rem + 2.7vw,3.75rem);line-height:1.03;letter-spacing:-.03em;max-width:15ch}
.hero .sub{margin-top:18px;max-width:31em;font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);line-height:1.5;font-weight:500}
.hero .cta{margin-top:26px}
.hero .heroproof{margin-top:14px;opacity:.78}

/* rechts: plek + product + telefoon */
.hero .vis .herofold,.hero .vis .glow,.hero .vis .herobeam,.hero .vis .beamsvg{display:none !important}
.hero .vis{min-height:0 !important;padding:0 4% 7% 7%}
.hero .plek{position:relative;width:100%;aspect-ratio:1/1.02;max-height:min(640px,72vh);border-radius:30px;background-size:cover;background-position:center;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
.hero .plek::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,rgba(0,0,0,.42),transparent 48%);pointer-events:none}
.hero .plek{overflow:hidden}
/* de hand komt van onderen het beeld in: de snijlijn van de pols valt samen met de onderrand */
.hero .plek .hand{position:absolute;left:4%;bottom:0;width:60%;height:auto;z-index:2;filter:drop-shadow(0 24px 34px rgba(0,0,0,.45))}
.hero .vis .phone{position:absolute !important;right:0;bottom:2%;left:auto;top:auto;width:clamp(150px,13.5vw,205px) !important;transform:rotate(5deg) !important;animation:none !important;z-index:3;padding:7px;border-radius:32px}
.hero .vis .phone .scrn{border-radius:26px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-block:24px 40px}
  .hero h1{max-width:none}
  .hero .vis{padding:0 6% 12% 8%}
  .hero .plek{aspect-ratio:4/3.3;max-height:none;border-radius:22px}
  .hero .plek .hand{width:58%;left:3%;bottom:0}
  .hero .vis .phone{width:31% !important;right:0;bottom:-2%}
}

/* de cookiebalk: een klein kaartje linksonder, nooit over de knop */
.hbstory .cookiebar{left:16px;right:auto;margin:0;max-width:340px;padding:12px 14px;gap:10px;font-size:.8rem;line-height:1.45;flex-direction:column;align-items:flex-start}
.hbstory .cookiebar button{padding:7px 14px;font-size:.78rem}
@media (max-width:600px){.hbstory .cookiebar{right:16px;max-width:none;flex-direction:row;align-items:center}.hbstory .cookiebar span{flex:1}}

/* tegen de oudere regels in newhome.css (.hbstory .hero h1 met !important) */
.hbstory .hero h1{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.5rem) !important;line-height:1.04 !important;max-width:none}
.hbstory .hero .kicker .wie{background:none !important;-webkit-text-fill-color:currentColor !important;color:hsl(calc(var(--hb-h,42.93) + -2.93) 28% 80%) !important;padding:0;animation:none !important}
.hbstory .hero .wrap > div:first-child{order:1}
.hbstory .hero .vis{order:2}
@media (max-width:900px){
  .hbstory .hero h1{font-size:clamp(1.9rem,1.3rem + 3vw,2.5rem) !important}
  .hero .kicker{font-size:.86rem;margin-bottom:14px}
  .hero .sub{margin-top:12px}
  .hero .cta{margin-top:18px}
}

/* "Illustrative" stond als voetnoot onder een reusachtige 68%. De audit: het
   label hoort even zichtbaar te zijn als het getal. Nu een label bovenin. */
.measviz{position:relative}
.measviz .mvnote{position:absolute;top:16px;right:16px;max-width:52%;margin:0;padding:6px 12px;border-radius:12px;
  font-size:.8rem;font-weight:700;line-height:1.35;text-align:right;color:#fff;background:color-mix(in srgb,var(--gold-b,var(--gold)) 38%,rgba(0,0,0,.35))}

/* Uitvouwverhaal op de telefoon: het meebewegende vel draait daar niet (het
   script stuurt alleen desktop), dus stond bij elke kop alleen tekst op donker.
   Nu krijgt elke stap zijn eigen beeld: dicht, open, kaartzijde, omslagen,
   achterkant, scannen, en bij de app-stappen het echte scherm. */
.jstep .jmob{display:none}
@media (max-width:820px){
  .hbstory .jstick{display:none}
  .hbstory .jstep .jmob{display:block;width:100%;max-height:46vh;object-fit:contain;margin:0 0 16px}
  .hbstory .jstep[data-step="10"] .jmob,.hbstory .jstep[data-step="11"] .jmob,.hbstory .jstep[data-step="12"] .jmob,
  .hbstory .jstep[data-step="13"] .jmob,.hbstory .jstep[data-step="14"] .jmob,.hbstory .jstep[data-scherm] .jmob{
    width:62%;margin-inline:auto;border-radius:26px;box-shadow:0 0 0 6px #121214,0 24px 40px -18px rgba(0,0,0,.7)}
  .hbstory .jstep{margin:0 0 44px}
}
.hero .plek .hand.dicht{left:6%;bottom:6%;width:40%}