/* =============================================================
   EM Launchpad — homepage-hero: "één draad"
   Rustige compositie: tekst linksonder, rechts een groot object
   uit bewegende lijnen (canvas, zie fx.js sectie 2). Werkt bovenop
   de v2-skin.
   ============================================================= */

body[data-skin="v2"] .hero.hero-lines{
  position:relative;overflow:hidden;isolation:isolate;padding:0;
  min-height:calc(100vh - 86px);min-height:max(calc(100svh - 86px),600px);
  display:flex;flex-direction:column;background:#0a0b0a;
}
.hero-lines .hl-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}

/* labels die op het oppervlak van de bol meedraaien */
.hero-lines .hl-tags{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-lines .hl-tag{
  position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,241,234,.88);
  background:rgba(12,13,11,.62);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;will-change:transform,opacity;
}
.hero-lines .hl-tag i{width:6px;height:6px;border-radius:50%;background:#35c27f;box-shadow:0 0 0 3px rgba(53,194,127,.18)}

.hero-lines .hl-grid{
  position:relative;z-index:2;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;align-items:end;padding-top:clamp(24px,5svh,64px);padding-bottom:clamp(36px,6svh,72px);
}
.hero-lines .hl-copy{max-width:640px}
.hero-lines .hl-stage{align-self:center;justify-self:center;width:min(600px,40vw);aspect-ratio:1;border-radius:50%}
/* zonder JS: een zachte bol als plaatshouder */
.hero-lines:not(.is-js) .hl-stage{
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.07),transparent 62%);
}

.hero-lines .hl-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.66);
}
.hero-lines .hl-eyebrow::before{content:"";width:26px;height:1px;background:var(--uline)}
body[data-skin="v2"] .hero-lines .hl-h1{
  margin:20px 0 0;max-width:none;font-weight:800;font-size:clamp(40px,4.3vw,66px);
  line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance;
}
.hero-lines .hl-lede{margin:22px 0 0;max-width:46ch;font-size:17.5px;line-height:1.6;color:rgba(244,241,234,.72)}
.hero-lines .hl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.hero-lines .hl-pill{
  display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 20px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#f4f1ea;text-decoration:none;
  font-family:var(--font);font-weight:600;font-size:15px;transition:background .2s ease,border-color .2s ease;
}
.hero-lines .hl-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.hero-lines .hl-pill svg{width:14px;height:14px}

/* instap: de kop staat er meteen, de rest schuift zacht in als de draden samentrekken */
.hero-lines.is-js .hl-copy > :not(.hl-h1){opacity:.001;transform:translateY(10px)}
.hero-lines.is-js.is-live .hl-copy > :not(.hl-h1){opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.hero-lines.is-live .hl-copy > :nth-child(3){transition-delay:.9s}
.hero-lines.is-live .hl-copy > :nth-child(4){transition-delay:1.15s}
.hero-lines.is-live .hl-copy > :nth-child(1){transition-delay:.6s}

/* onderrand: dunne lijn met de feiten, zoals een colofon */
.hero-lines .hl-foot{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;
  padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:rgba(244,241,234,.55);
}
.hero-lines .hl-foot b{font-weight:600;color:#e6c46e}
.hero-lines .hl-foot a{color:rgba(244,241,234,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.hero-lines .hl-foot a:hover{color:#fff;border-color:#4fd394}

@media (max-width:820px){
  body[data-skin="v2"] .hero.hero-lines{min-height:max(calc(100svh - 74px),560px)}
  .hero-lines .hl-grid{grid-template-columns:1fr;gap:4px;align-items:start;padding-top:4px;padding-bottom:32px}
  .hero-lines .hl-stage{order:-1;width:min(82vw,420px)}
  body[data-skin="v2"] .hero-lines .hl-h1{font-size:clamp(34px,9.6vw,44px);margin-top:14px}
  .hero-lines .hl-lede{font-size:15.5px;margin-top:16px}
  .hero-lines .hl-cta{margin-top:22px}
  .hero-lines .hl-cta .btn{width:100%;justify-content:center;height:52px}
  .hero-lines .hl-pill{height:auto;padding:8px 2px;border:0;background:none;font-family:var(--mono);font-size:13px}
  .hero-lines .hl-foot{flex-direction:column;align-items:flex-start;gap:6px;font-size:11px}
  .hero-lines .hl-tag{font-size:10px;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){
  .hero-lines.is-js .hl-copy > :not(.hl-h1){opacity:1;transform:none;transition:none}
}