:root{--navy:var(--color-navy);--lime:var(--color-accent);--white:var(--color-off-white);--muted:#afbbc7;--line:var(--color-white-alpha-1c)}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,Arial,sans-serif}.topbar{height:65px;padding:0 max(5.5vw,35px);display:flex;align-items:center;gap:52px;border-bottom:1px solid var(--color-white-alpha-12);background:var(--color-navy-alpha-f2);position:relative;z-index:4}.brand{font-size:2rem;font-weight:900;letter-spacing:-.09em;color:var(--color-white);text-decoration:none}.brand i{color:var(--lime);font-style:normal}.topbar nav{display:flex;gap:31px;margin:auto}.topbar nav a,.langs button{color:#f2f5f8;text-decoration:none;background:none;border:0;font-size:.7rem;white-space:nowrap;cursor:pointer}.topbar nav a.active{color:var(--color-white);border-bottom:2px solid var(--lime);padding-bottom:9px}.langs{display:flex;gap:20px}.langs button{color:#aeb9c4;padding:0}.langs button.on{color:var(--lime)}.hero{position:relative;min-height:570px;overflow:hidden;background:linear-gradient(90deg,#040d18f5 0%,#040d18d9 38%,#040d184d 71%,#040d181c),url('../img/players-hero.webp') 61% center/cover no-repeat}.copy{position:relative;z-index:2;padding:105px 6.2vw;max-width:850px}.eyebrow{font-size:.67rem;letter-spacing:.27em;color:#cdd6df;margin:0 0 21px}.eyebrow:before{content:"";display:inline-block;width:30px;height:2px;background:var(--lime);vertical-align:middle;margin-right:13px}h1,h2{letter-spacing:-.075em;line-height:.84;margin:0;font-weight:900}h1{font-size:clamp(3.3rem,6.2vw,7rem)}h1 em,h2 em{color:var(--lime);font-style:normal}.lead{font-size:1.18rem;line-height:1.5;max-width:470px;color:#dae2e9;margin:28px 0}.cta{display:inline-block;background:var(--lime);color:var(--color-navy);text-decoration:none;font-size:.72rem;font-weight:900;letter-spacing:.04em;padding:17px 23px}.cta b{font-size:1.25rem;margin-left:24px}.flow{position:absolute;right:-1%;top:12%;width:46%;height:68%;opacity:.22;mix-blend-mode:screen}.flow svg{height:100%;width:100%}.flow path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 15;animation:flow 5s linear infinite}.blue{stroke:var(--color-blue)}.lime{stroke:var(--lime);animation-duration:6.5s!important;animation-delay:-2s}@keyframes flow{to{stroke-dashoffset:-130}}.steps,.split{padding:88px max(6vw,35px)}.steps{border-top:1px solid var(--line)}.steps h2,.split h2{font-size:clamp(2.8rem,5vw,5.3rem)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}.cards article{border:1px solid #254158;padding:30px;min-height:210px;background:#0a1828}.cards span{color:var(--lime);font-size:.75rem}.cards h3{font-size:1.5rem;letter-spacing:-.05em;margin:23px 0 12px}.cards p,.split>p{color:var(--muted);line-height:1.55}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;background:var(--color-surface-light);color:var(--color-navy)}.split .eyebrow{color:#506070}.split>p{font-size:1.2rem;color:#304151;align-self:end;margin:0}.bottom{padding:76px 6vw;background:var(--lime);display:flex;justify-content:space-between;align-items:center;color:var(--color-navy)}.bottom p{font-size:clamp(1.7rem,3vw,3.2rem);font-weight:900;letter-spacing:-.06em;margin:0}.bottom .cta{background:var(--color-navy);color:var(--color-white)}@media(max-width:850px){.topbar{gap:20px;padding:0 4vw}.topbar nav{display:none}.langs{margin-left:auto}.hero{min-height:620px;background-position:64% center}.copy{padding:95px 7vw}.flow{width:70%;opacity:.13}.cards,.split{grid-template-columns:1fr;gap:22px}.bottom{display:block}.bottom .cta{margin-top:23px}}@keyframes metricPulse{50%{opacity:.25;transform:scale(1.8)}}@media(max-width:850px){}

/* Op gsm blijft de hero volledig leesbaar. */
@media(max-width:760px){}

/* Navigatie gelijk aan de homepagina. */
.topbar nav a{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}

/* "Stel je pakket samen": three combinable modules, what is always included and optional guidance. */
.package{padding:88px max(6vw,35px);background:var(--color-surface-light);color:var(--color-navy)}
.package .eyebrow{color:#506070}
.package h2{margin:0;font-size:clamp(2.8rem,5vw,5.3rem)}
.package-lead{margin:18px 0 0;color:#304151;font-size:1.15rem;line-height:1.5}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.package .pillar-card{display:flex;flex-direction:column;align-items:flex-start;min-height:340px;padding:32px 30px 30px;background:var(--color-navy);border:1px solid var(--color-white-alpha-22);color:#f7f9f5;text-align:left}
.package .pillar-card *{text-align:left}
.package .pillar-top{gap:16px}
.package .pillar-index{color:var(--color-accent);font-size:1.05rem;font-weight:900;letter-spacing:.08em}
.package-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.package-note{padding:30px 30px 28px;border:1px solid #cfd9d4;background:var(--color-white)}
.package-note.included{background:var(--color-accent);border-color:var(--color-accent)}
.package-note .note-kicker{margin:0 0 12px;font-size:.66rem;font-weight:800;letter-spacing:.14em}
.package-note h3{margin:0 0 10px;font-size:1.5rem;line-height:1.05;letter-spacing:-.04em}
.package-note p{margin:0;line-height:1.55}
.package-note ul{margin:12px 0;padding:0 0 0 1.15rem;line-height:1.7}
.package-note .note-small{margin-top:6px;color:#5b6b78;font-size:.85rem}
@media(max-width:1000px){.package-grid{grid-template-columns:1fr}.package .pillar-card{min-height:0}.package-extras{grid-template-columns:1fr}}
@media(max-width:700px){.package{padding:64px max(6vw,24px)}}

/* Package: heading like the clubs section (title left, lead right); notes only as tall as their content. */
.package-head{display:grid;grid-template-columns:1.1fr .9fr;column-gap:80px;align-items:end}
.package-head .eyebrow,.package-head h2{grid-column:1}
.package-head .package-lead{grid-column:2;grid-row:1/3;align-self:end;margin:0;color:#52606c;font-size:1.08rem;line-height:1.55}
.package .pillar-index{font-size:.74rem;letter-spacing:.14em}
.package-extras{align-items:start}
.package-note.included{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:26px 30px}
.package-note.included .note-kicker{margin:0}
.package-note.included p:not(.note-kicker){font-size:1.05rem;font-weight:700}
.cards article>span{letter-spacing:.14em}
.cards article>span i{font-style:normal}
@media(max-width:1000px){.package-head{display:block}.package-head .package-lead{margin-top:16px}}

.package-extras{align-items:stretch}
.package-note.included{align-content:center}

/* Package cards: label first, icon on its own row below it, then the title and text. */
.package .pillar-top{flex-direction:column;align-items:flex-start;gap:14px}
.package .pillar-card h3{margin-top:22px}

/* Package heading: the short lead sits directly under the title, not detached on the far right. */
.package-head{display:block}
.package-head .package-lead{margin:18px 0 0;max-width:560px;color:#304151;font-size:1.15rem;line-height:1.5}

/* Package notes: a slim "always included" bar, then the optional guidance below it (text left, options right). */
.package-extras{grid-template-columns:1fr;align-items:start}
.package-note.included{padding:18px 30px;align-content:center}
.package-note.included p:not(.note-kicker){font-size:1rem}
.package-note.optional{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:56px;align-items:start}
.package-note.optional .note-kicker,.package-note.optional h3,.package-note.optional>p:not(.note-kicker):not(.note-small){grid-column:1}
.package-note.optional ul{grid-column:2;grid-row:1/4;align-self:center;margin:0}
.package-note.optional .note-small{grid-column:1;margin-top:14px}
@media(max-width:1000px){.package-note.optional{display:block}.package-note.optional ul{margin:12px 0}}

/* Hero: main call to action plus a quieter link to the sample profile. */
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:27px}
.hero-actions .cta{margin:0}
.cta.cta-ghost{background:transparent;color:var(--color-white);border:1px solid var(--color-white-alpha-66)}
.cta.cta-ghost:hover,.cta.cta-ghost:focus-visible{border-color:var(--color-accent);color:var(--color-accent)}
@media(max-width:560px){.hero-actions{flex-direction:column;align-items:stretch}}