/* =========================================================================
   HollandschePassie - fresh overhaul stylesheet
   Keeps the brand palette (red / blue / green) on a modern dark theme.
   ========================================================================= */

:root {
    --hp-red:        #ee1f51;   /* logo bar / featured accents */
    --hp-red-deep:   #cd2526;
    --hp-blue:       #1874ff;   /* section accents / links */
    --hp-blue-deep:  #0e5ad6;
    --hp-green:      #51b759;   /* success / secondary accent + join CTAs */
    --hp-green-deep: #429947;
    --hp-pink:       #f51f1f;   /* rode tekst (titels / hero-highlight) */

    --bg:            #ffffff;
    --bg-2:          #f4f5f8;
    --surface:       #ffffff;
    --surface-2:     #f4f5f8;
    --line:          rgba(15,20,35,.10);
    --line-strong:   rgba(15,20,35,.20);

    --text:          #14161d;
    --muted:         #5b6072;
    --muted-2:       #8a8fa2;

    /* fixed light/dark helpers for content that sits on media */
    --on-media:      #ffffff;
    --on-media-mut:  rgba(255,255,255,.82);

    --radius:        16px;
    --radius-sm:     10px;
    --radius-lg:     26px;
    --shadow:        0 10px 30px rgba(15,20,35,.12);
    --shadow-lg:     0 24px 60px rgba(15,20,35,.18);
    --container:     1720px;
    --hdr-h:         64px;       /* header height */
    --usp-h:         clamp(82px, 4.4vw, 108px);  /* usp bar height (one row), scales with width */

    --font: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-x: none; }

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(24,116,255,.06), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(238,31,81,.05), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; }

.hp-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* Upcoming-blok: eerstvolgende geplande sexfilm met midi-image + info */
.hp-upnext { max-width: 1360px; margin: 0 auto 48px; padding: 0 20px; box-sizing: border-box; }
.hp-count { display: flex; gap: 12px; margin: 4px 0 6px; }
.hp-count__seg {
    position: relative; min-width: 76px; padding: 14px 12px 11px; text-align: center;
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(162deg, #2b3166 0%, #191c31 100%);
    box-shadow: 0 12px 26px -14px rgba(20,22,45,.75), inset 0 1px 0 rgba(255,255,255,.09);
}
.hp-count__seg::before {
    content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.hp-count__n {
    display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 900; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.hp-count__l { display: block; margin-top: 9px; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: rgba(255,255,255,.55); }
@media (max-width: 420px) { .hp-count { gap: 8px; } .hp-count__seg { min-width: 0; flex: 1; padding: 12px 6px 9px; } }
.hp-upnext__card {
    display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px);
    align-items: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: clamp(14px, 1.6vw, 20px);
}
.hp-upnext__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0c0e16; }
.hp-upnext__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-upnext__when {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--hp-green); color: #fff; font-weight: 800; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .3px; padding: .42em .85em; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.hp-upnext__body { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 8px clamp(10px, 1.4vw, 20px) 8px 0; }
.hp-upnext__k { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; text-transform: uppercase; font-size: .78rem; letter-spacing: .6px; color: var(--hp-blue); }
.hp-upnext__k i { color: var(--hp-red); }
.hp-upnext__title { font-size: clamp(21px, 2.3vw, 30px); font-weight: 900; line-height: 1.12; color: var(--text); margin: 0; }
.hp-upnext__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-weight: 600; font-size: .88rem; }
.hp-upnext__meta i { color: var(--hp-blue); margin-right: 5px; }
.hp-upnext__lead { color: var(--muted); line-height: 1.6; font-weight: 500; font-size: .95rem; margin: 0; }
.hp-upnext__body .hp-btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 720px) {
    .hp-upnext__card { grid-template-columns: 1fr; gap: 16px; }
    .hp-upnext__body { padding: 4px 6px 8px; text-align: left; }
}

.hp-section { padding: 54px 0; }
.hp-section--tight { padding: 34px 0; }

/* ---------- Buttons ------------------------------------------------------ */
.hp-btn {
    --btn-bg: var(--hp-green);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .85em 1.5em;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: .92rem;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
    box-shadow: 0 8px 22px rgba(81,183,89,.32);
    white-space: nowrap;
}
.hp-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hp-btn:active { transform: translateY(0); }
.hp-btn--green { --btn-bg: var(--hp-green); --btn-fg: #fff; box-shadow: 0 8px 22px rgba(81,183,89,.32); }
.hp-btn--red   { --btn-bg: var(--hp-red);  box-shadow: 0 8px 22px rgba(238,31,81,.30); }
.hp-btn--ghost {
    background: transparent; color: var(--text);
    border: 2px solid var(--line-strong); box-shadow: none;
}
.hp-btn--ghost:hover { border-color: var(--hp-blue); color: var(--hp-blue); }
.hp-hero .hp-btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hp-hero .hp-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }
.hp-btn--lg { font-size: 1.05rem; padding: 1em 1.9em; }
.hp-btn--xl { font-size: 1.15rem; padding: 1.05em 2.4em; }

/* ---------- Logo wordmark (pure CSS + mascotte asset) ------------------- */
.hp-logo {
    --logo-red: #ff0000;         /* matches the mascotte tile background */
    display: inline-flex;
    align-items: flex-end;       /* baseline-align the red bars + mascotte red */
    gap: 0;
    line-height: 1;
    user-select: none;
}
.hp-logo__bar {
    display: inline-flex;
    align-items: center;
    height: 1.32em;
    background: var(--logo-red);
    color: #fff;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.5px;
    text-transform: uppercase;
    padding: 0 .34em;
}
.hp-logo__bar--l { border-radius: 7px 0 0 7px; }
.hp-logo__bar--r { border-radius: 0 7px 7px 0; }
.hp-logo__bar--full { border-radius: 7px; }
.hp-logo__mascotte {
    height: 2.55em;              /* head pops above the bars */
    width: auto;
    margin: 0 -2px -.02em;       /* overlap the bar seams */
    position: relative;
    z-index: 2;
    object-fit: contain;
    object-position: bottom;
}
.hp-logo--sm { font-size: 38px; }
.hp-logo--lg { font-size: 38px; }

/* ---------- Header ------------------------------------------------------- */
.hp-topbar {
    background: linear-gradient(90deg, var(--hp-red), var(--hp-red-deep));
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: .85rem;
    padding: 7px 12px;
    letter-spacing: .3px;
}
.hp-topbar a { color: #fff; text-decoration: underline; }

.hp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
}
/* Blauwe lijn onder de menubar; groeit op scroll uit tot een CTA-strip (desktop).
   Als overlay onder de menubar (absoluut) i.p.v. in de flow, zodat het uitgroeien
   de sticky-header niet reflowt (voorkomt hapering bij het wisselen met de footer-bar). */
.hp-scrollcta {
    position: absolute; top: 100%; left: 0; right: 0;
    display: block; height: 8px; overflow: hidden;
    background: var(--hp-blue); text-decoration: none; transition: height .28s ease;
    will-change: height;
}
.hp-scrollcta__t {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 36px;
    color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: .8rem;
    white-space: nowrap; opacity: 0; transition: opacity .2s ease .05s;
}
.hp-header.is-scrolled .hp-scrollcta { height: 36px; }
.hp-header.is-scrolled .hp-scrollcta__t { opacity: 1; }
.hp-scrollcta__short { display: none; }   /* alleen op mobiel */
.hp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: var(--hdr-h);
}
.hp-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hp-nav a.hp-nav__link {
    padding: .55em .9em;
    border-radius: 999px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .4px;
    transition: color .15s, background .15s;
}
.hp-nav a.hp-nav__link:hover { color: var(--hp-blue); background: var(--bg-2); }
.hp-nav .hp-btn { box-shadow: none; }
.hp-nav__login { font-size: 1.15rem; padding: .45em .6em; }
.hp-nav__login .hp-login-txt { display: none; }   /* desktop: alleen icoon */

/* ---------- Header search + autocomplete -------------------------------- */
.hp-search { position: relative; flex: 0 1 400px; margin: 0 24px; min-width: 0; }
.hp-search__ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .95rem; pointer-events: none; }
.hp-search__input {
    width: 100%; height: 44px; padding: 0 16px 0 40px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
    font-family: var(--font); font-size: .92rem; font-weight: 600; color: var(--text); outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.hp-search__input::placeholder { color: var(--muted); font-weight: 500; }
.hp-search__input:focus { border-color: var(--hp-blue); background: #fff; box-shadow: 0 0 0 3px rgba(24,116,255,.12); }
.hp-search__results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 26px 54px -20px rgba(15,20,35,.45);
    max-height: min(70vh, 540px); overflow-y: auto; display: none;
}
.hp-search__results.is-open { display: block; }
.hp-search__group { padding: 6px 0; }
.hp-search__group + .hp-search__group { border-top: 1px solid var(--line); }
.hp-search__gt { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted-2); padding: 8px 16px 4px; }
.hp-search__item { display: flex; align-items: center; gap: 11px; padding: 10px 16px; color: var(--text); font-size: .9rem; font-weight: 600; cursor: pointer; min-width: 0; }
.hp-search__item:hover, .hp-search__item.is-active { background: var(--bg-2); color: var(--hp-blue); }
.hp-search__item > i { color: var(--muted-2); width: 16px; text-align: center; font-size: .85rem; flex: none; }
.hp-search__item span.txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-search__item .tag { margin-left: auto; font-size: .64rem; font-weight: 800; color: var(--muted-2); text-transform: uppercase; letter-spacing: .4px; flex: none; }
.hp-search__empty { padding: 18px 16px; color: var(--muted); font-size: .88rem; text-align: center; }
.hp-search-toggle { display: none; }
@media (max-width: 1080px) { .hp-search { flex-basis: 280px; margin: 0 14px; } }
@media (max-width: 820px) {
    /* desktop-inline search wordt op mobiel een uitklap-balk onder de header */
    .hp-search-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; margin-left: auto;
        background: transparent; border: none; color: var(--text);
        font-size: 1.25rem; cursor: pointer;
    }
    .hp-search {
        display: none; order: 99;
        position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 55;
        box-sizing: border-box;
        margin: 0; padding: 10px 14px; flex: 0 0 auto;
        background: #fff; border-bottom: 1px solid var(--line);
        box-shadow: 0 22px 44px -20px rgba(15,20,35,.4);
    }
    .hp-search.is-open { display: block; }
    .hp-search__ico { display: none; }                 /* geen loep in de balk (staat al in de header) */
    .hp-search__input { padding-left: 16px; font-size: 16px; }  /* 16px voorkomt iOS auto-zoom bij focus */
    .hp-search__results {
        position: static; margin-top: 8px; border: none; box-shadow: none;
        max-height: 62vh; border-radius: 0;
    }
    .hp-search__group + .hp-search__group { border-top: 1px solid var(--line); }
}

/* AdultPrime text lockup (used instead of the logo image) */
.hp-ap {
    font-weight: 900; text-transform: uppercase; letter-spacing: -.5px;
    line-height: 1; white-space: nowrap; color: var(--text);
}
.hp-ap .p { color: var(--hp-red); }
.hp-ap__net {
    display: block; font-size: .58em; letter-spacing: 3px;
    font-weight: 800; color: var(--muted-2); margin-top: 3px;
}
.hp-nav__ap { font-size: 1rem; margin: 0 6px; padding: .3em 0; }
.hp-burger {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    width: 42px; height: 42px;
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
}

/* ---------- Hero --------------------------------------------------------- */
.hp-hero {
    position: relative;
    /* hero + usp bar together exactly fill the fold (below the sticky header) */
    height: calc(100vh - var(--hdr-h) - var(--usp-h));
    height: calc(100dvh - var(--hdr-h) - var(--usp-h));
    min-height: 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hp-hero__media, .hp-hero__media video, .hp-hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* filter over de hero-video: iets meer contrast + kleur (desktop + mobiel) */
.hp-hero__media video, .hp-hero__media img { filter: contrast(1.1) saturate(1.22) brightness(1.02); }
.hp-hero__media::after {
    content: "";
    position: absolute; inset: 0;
    /* donkere overlay alleen op de onderste ~40%, achter de tekst/knoppen */
    background: linear-gradient(to top,
        rgba(8,9,14,.92) 0%,
        rgba(8,9,14,.6) 16%,
        rgba(8,9,14,.24) 30%,
        transparent 42%);
}
.hp-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 20px 54px;
}
/* modelnaam-pills linksboven op de reel */
.hp-hero__reelpills {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    display: flex; flex-wrap: wrap; gap: 8px; max-width: 72%;
}
.hp-hero__reelpills span,
.hp-hero__reelpills a {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(8,9,14,.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-size: .8rem; font-weight: 800;
    padding: .42em .85em; border-radius: 999px; line-height: 1;
    text-decoration: none;
}
.hp-hero__reelpills a { transition: background .18s ease, border-color .18s ease; }
.hp-hero__reelpills a:hover { background: rgba(238,31,81,.72); border-color: rgba(255,255,255,.5); }
.hp-hero__reelpills span i,
.hp-hero__reelpills a i { font-size: .72rem; opacity: .8; }

/* mobiel: alleen een gouden "4K"-pill rechtsboven */
.hp-hero__mob4k { display: none; }

/* Desktop (>=821px): trailer/afbeelding rechts ~60% i.p.v. over de volle breedte
   (voorkomt dat de 1024px-trailer wordt opgeblazen -> scherper). Tekst links op een
   donkere achtergrond; de media vloeit met een fade in de achtergrond over. */
@media (min-width: 821px) {
    /* Hoogte cappen t.o.v. de breedte: op hoge/portret-vensters wordt de hero anders
       zo hoog dat de 16:9-trailer verticaal wordt uitgesneden (je ziet maar een strook). */
    .hp-hero { align-items: center; background: #0d0f16; max-height: 48vw; min-height: 440px; }
    /* Ambient: dezelfde afbeelding sterk geblurd + verduisterd als achtergrond,
       zodat de kleuren van de trailer naar links doorbloeden (geen vlak zwart). */
    .hp-hero::before {
        content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background: var(--hero-amb, none) center/cover no-repeat;
        filter: blur(42px) brightness(.5) saturate(1.25);
        transform: scale(1.3);
    }
    /* extra donkere waas links, zodat de tekst leesbaar blijft (ver naar links, zodat
       de trailer maximaal zichtbaar blijft; de tekst leunt verder op de ambient + shadow) */
    .hp-hero::after {
        content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(to right,
            rgba(8,9,14,.7) 0%, rgba(8,9,14,.28) 8%, rgba(8,9,14,.05) 13%, transparent 16%);
    }
    .hp-hero__media {
        z-index: 1; left: auto; right: 0; width: 60%;
        /* waas op de linkerrand van de trailer; schaalt mee met de media, dus altijd
           op de linkerkant van de trailer (ook op mega-brede schermen) */
        -webkit-mask: linear-gradient(to right, transparent 0%, #000 20%);
        mask: linear-gradient(to right, transparent 0%, #000 20%);
    }
    /* trailer uitlijnen vanaf de rechterkant (linkerkant valt weg in de fade) */
    .hp-hero__media video, .hp-hero__media img { object-position: right center; }
    .hp-hero__media::after { display: none; }
    .hp-hero__inner { z-index: 3; padding-top: 30px; padding-bottom: 30px; }
    .hp-hero__title, .hp-hero__sub { max-width: min(560px, 38vw); }
    .hp-hero .hp-hero__cta { flex-wrap: nowrap; }   /* desktop: knoppen altijd naast elkaar */
    .hp-hero .hp-hero__cta .hp-btn { white-space: nowrap; }
    .hp-hero__title, .hp-hero__sub { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
}

/* Alleen hoge/minder-brede desktop-vensters: het donkere vlak verder naar links en
   de fade (waas) terug op de trailer, zodat de tekst genoeg donkere backing houdt
   maar de trailer toch goed zichtbaar blijft. */
@media (min-width: 821px) and (max-aspect-ratio: 3/2) {
    /* Trailer breder -> begint verder naar links, dus het donkere vlak schuift mee naar links. */
    .hp-hero__media {
        width: 74%;
        -webkit-mask: linear-gradient(to right, transparent 0%, #000 20%);
        mask: linear-gradient(to right, transparent 0%, #000 20%);
    }
    /* donkere waas achter de tekst, eindigt vóór de trailer scherp wordt */
    .hp-hero::after {
        background: linear-gradient(to right,
            rgba(8,9,14,.82) 0%, rgba(8,9,14,.6) 12%, rgba(8,9,14,.28) 22%, transparent 32%);
    }
    .hp-hero__title, .hp-hero__sub, .hp-hero__cta { max-width: min(460px, 30vw); }
}


/* badges rechtsboven */
.hp-hero__topbadges {
    position: absolute; top: 22px; right: 24px; z-index: 3;
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; max-width: 60%;
}

/* modelnamen + "Kijk video" in het film-info blok (rechtsonder, desktop) */
.hp-hero__cast-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.hp-hero__cast-pills a {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
    color: #fff; font-size: .86rem; font-weight: 700; padding: .42em .9em; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.hp-hero__cast-pills a:hover { background: rgba(255,255,255,.26); }
.hp-hero__cast-pills a i { font-size: .74rem; opacity: .8; }
.hp-hero__watch {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(8,9,14,.5); border: 1px solid rgba(255,255,255,.32); color: #fff;
    font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    padding: .55em 1.1em; border-radius: 999px; backdrop-filter: blur(6px);
    transition: background .15s ease, border-color .15s ease;
}
.hp-hero__watch:hover { background: var(--hp-blue); border-color: var(--hp-blue); }

/* onderste ~10% van de hero flink donkerder op desktop */
@media (min-width: 621px) {
    .hp-hero__media::after {
        background: linear-gradient(to top,
            rgba(3,4,7,.99) 0%,
            rgba(5,6,10,.9) 10%,
            rgba(8,9,14,.5) 24%,
            rgba(8,9,14,.18) 38%,
            transparent 50%);
    }
}
.hp-hero__badges {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.hp-hero__meta .hp-hero__badges { margin-bottom: 2px; justify-content: center; }
.hp-hero__badge {
    display: inline-flex; align-items: center; gap: .5em;
    background: rgba(238,31,81,.16);
    border: 1px solid rgba(238,31,81,.5);
    color: #fff;
    padding: .4em .9em;
    border-radius: 999px;
    font-weight: 800; font-size: .78rem; letter-spacing: 1px; text-transform: uppercase;
}
.hp-hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-red); box-shadow: 0 0 0 0 rgba(238,31,81,.7); animation: hp-pulse 1.8s infinite; }
@keyframes hp-pulse { 0%{box-shadow:0 0 0 0 rgba(238,31,81,.55);} 70%{box-shadow:0 0 0 10px rgba(238,31,81,0);} 100%{box-shadow:0 0 0 0 rgba(238,31,81,0);} }
.hp-hero__title {
    font-size: clamp(34px, 6vw, 76px);
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: -1px;
    max-width: 16ch;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.hp-hero__title { color: var(--on-media); }
.hp-hero__title .hl { color: var(--hp-pink); }
.hp-hero__title .hl2 { color: var(--hp-blue); }
.hp-hero__sub {
    margin: 16px 0 26px;
    font-size: clamp(15px, 2.2vw, 20px);
    color: var(--on-media-mut);
    max-width: 46ch;
    font-weight: 600;
}
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* film-info rechtsonder: minimale, klikbare tekststapel (linkt naar de video-pagina) */
.hp-hero__meta {
    position: absolute; right: 24px; top: 64px; bottom: auto; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    max-width: 44%; text-align: right; color: var(--on-media);
    padding: 6px 10px;
    transition: transform .2s ease;
}
/* zachte donkere waas die aan alle kanten uitvloeit (geen rand) */
.hp-hero__meta::before {
    content: ""; position: absolute; inset: -48px -60px -52px -60px; z-index: -1; pointer-events: none;
    background: radial-gradient(130% 150% at 80% 45%,
        rgba(4,5,9,.5) 0%,
        rgba(4,5,9,.36) 26%,
        rgba(4,5,9,.2) 46%,
        rgba(4,5,9,.08) 66%,
        rgba(4,5,9,0) 88%);
    filter: blur(12px);
}
.hp-hero__meta:hover { transform: translateY(-2px); }
.hp-hero__ftitle {
    color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-hero__meta:hover .hp-hero__ftitle { text-decoration: underline; }
.hp-hero__fmeta {
    display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end;
    color: var(--on-media-mut); font-size: .82rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hp-hero__fmeta i { margin-right: 4px; }
.hp-hero__fperf { color: rgba(255,255,255,.88); font-size: .85rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ---------- Section heading --------------------------------------------- */
.hp-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; margin-bottom: 26px; flex-wrap: wrap;
}
.hp-head__titles { min-width: 0; }
.hp-title {
    font-size: clamp(26px, 4.4vw, 50px);
    font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.5px;
}
.hp-title .feat { color: var(--hp-pink); }
.hp-title .sect { color: var(--hp-blue); }
.hp-title--white { color: var(--text); }
.hp-sub {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 12px; color: var(--muted); font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.4px; font-size: .78rem;
}
.hp-sub::before {
    content: ""; flex: none; width: 24px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--hp-pink), var(--hp-blue));
}
@media (max-width: 560px) {
    .hp-sub { align-items: flex-start; gap: 8px; letter-spacing: .8px; font-size: .72rem; }
    .hp-sub::before { margin-top: 6px; }
}
.hp-head__link { color: var(--hp-blue); font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .5px; white-space: nowrap; }
.hp-head__link:hover { color: var(--hp-green); }
.hp-nichebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hp-nichebar__label { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: .8rem; }
.hp-nichebar__sel {
    appearance: none; -webkit-appearance: none;
    padding: .62em 2.4em .62em 1em; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
    font-weight: 800; font-size: .9rem; cursor: pointer; max-width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231874ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1em center; background-size: 12px;
    transition: border-color .15s;
}
.hp-nichebar__sel:hover { border-color: var(--hp-blue); }
.hp-nichebar__sel:focus { outline: none; border-color: var(--hp-blue); }
.hp-sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-sortbar__label { color: var(--muted); font-weight: 700; font-size: .85rem; }
.hp-sortbar__opt { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--text); transition: background .15s, border-color .15s, color .15s; }
.hp-sortbar__opt:hover { border-color: var(--hp-blue); color: var(--hp-blue); }
.hp-sortbar__opt.is-active { background: var(--hp-blue); border-color: var(--hp-blue); color: #fff; }
.hp-modbtn { display: none; text-align: center; margin-top: 26px; }
@media (max-width: 620px) {
    .hp-head__link--mobhide { display: none; }   /* mobiel: header-link weg */
    .hp-modbtn { display: block; }               /* mobiel: button onder de modellen */
}

/* ---------- Video cards -------------------------------------------------- */
.hp-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
}
.hp-grid--3 { grid-template-columns: repeat(3, 1fr); }

.hp-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.hp-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }

.hp-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000 center/cover no-repeat;
    overflow: hidden;
}
.hp-card__media video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
.hp-card:hover .hp-card__media video.is-ready,
.hp-card__media video.autoplay-first { opacity: 1; }
.hp-card__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; z-index: 2;
    transition: transform .2s, background .2s;
}
.hp-card:hover .hp-card__play { transform: translate(-50%,-50%) scale(1.08); background: var(--hp-blue); border-color: var(--hp-blue); }
.hp-card__tags {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.hp-chip {
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    color: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; padding: .3em .6em; border-radius: 6px; border: 1px solid var(--line);
}
.hp-chip--red { background: var(--hp-red); border-color: transparent; }
.hp-chip--blue { background: var(--hp-blue); border-color: transparent; color:#04222e; }
.hp-chip--4k { background: linear-gradient(135deg, #ffd94a, #f0a500); color: #3a2600; border-color: transparent; }

.hp-badge-new {
    display: inline-flex; align-items: center; gap: .45em;
    background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-deep));
    color: #fff; font-size: .68rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; padding: .38em .7em .38em .6em; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(24,116,255,.45); border: 1px solid rgba(255,255,255,.25);
}
.hp-badge-new .dot {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.8); animation: hp-pulse-new 1.8s infinite;
}
@keyframes hp-pulse-new {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.hp-card__dur {
    position: absolute; right: 10px; bottom: 10px; z-index: 3;
    background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .25em .55em; border-radius: 6px;
    transition: opacity .2s ease;
}
@media (hover: hover) {
    .hp-card:hover .hp-card__dur { opacity: 0; }
}
.hp-card__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hp-card__title {
    font-size: .98rem; font-weight: 800; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-card__perf { color: var(--hp-blue); font-size: .82rem; font-weight: 700; }
.hp-card__meta { color: var(--muted-2); font-size: .76rem; display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.hp-card__meta i { margin-right: 4px; }
.hp-card__link { position: absolute; inset: 0; z-index: 4; }
.hp-card__link.behind { z-index: 1; }

/* rank badge for top rated */
.hp-rank {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, var(--hp-blue), var(--hp-blue-deep));
    box-shadow: 0 6px 14px rgba(24,116,255,.35);
}
.hp-card:nth-child(1) .hp-rank { background: linear-gradient(135deg,#ffcf3f,#f0a500); color:#3a2600; }

/* ---------- Bento mosaic (Laatste updates) ------------------------------ */
.hp-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    grid-template-areas:
        "feat feat feat feat feat feat a a a b b b"
        "feat feat feat feat feat feat c c c d d d"
        "e e e e f f f f g g g g";
}
.hp-bento > *:nth-child(1) { grid-area: feat; }
.hp-bento > *:nth-child(2) { grid-area: a; }
.hp-bento > *:nth-child(3) { grid-area: b; }
.hp-bento > *:nth-child(4) { grid-area: c; }
.hp-bento > *:nth-child(5) { grid-area: d; }
.hp-bento > *:nth-child(6) { grid-area: e; }
.hp-bento > *:nth-child(7) { grid-area: f; }
.hp-bento > *:nth-child(8) { grid-area: g; }

/* Featured full-bleed tile (also reused as the ranked #1 hero) */
.hp-feat {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
    min-height: 340px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hp-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hp-feat__media, .hp-feat__media img, .hp-feat__media video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hp-feat__media video { opacity: 0; transition: opacity .35s ease; z-index: 1; }
.hp-feat__media video.autoplay-first,
.hp-feat__media video.is-ready { opacity: 1; }
.hp-feat::after {
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(to top, rgba(6,7,12,.94) 3%, rgba(6,7,12,.32) 42%, rgba(6,7,12,0) 70%);
}
.hp-feat__body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px; color:var(--on-media); }
.hp-feat__tags { position:absolute; top:18px; left:18px; z-index:3; display:flex; gap:8px; }
.hp-feat__dur { position:absolute; right:18px; top:18px; z-index:3; background:rgba(0,0,0,.7); color:#fff; font-size:.78rem; font-weight:700; padding:.3em .6em; border-radius:6px; }
.hp-feat__title { font-size:clamp(22px,2.3vw,34px); font-weight:900; line-height:1.08; text-shadow:0 2px 14px rgba(0,0,0,.5); max-width:22ch; }
.hp-feat__perf { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.hp-feat__perf span {
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
    color:#fff; font-size:.8rem; font-weight:700; padding:.3em .7em; border-radius:999px;
    backdrop-filter:blur(4px);
}
.hp-feat__meta { margin-top:14px; color:var(--on-media-mut); font-size:.86rem; font-weight:700; display:flex; gap:16px; flex-wrap:wrap; }
.hp-feat__meta i { margin-right:5px; }
.hp-feat__link { position:absolute; inset:0; z-index:4; }

/* ---------- Ranked editorial list (Best bekeken) ------------------------ */
.hp-ranked { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:30px; }
.hp-ranked__hero { grid-column:1; }
.hp-ranked__hero .hp-feat { height:100%; }
.hp-rank-big {
    position:absolute; top:2px; left:16px; z-index:2;
    font-size:clamp(90px,9vw,150px); font-weight:900; line-height:1;
    color:transparent; -webkit-text-stroke:3px rgba(255,255,255,.7);
    text-stroke:3px rgba(255,255,255,.7); pointer-events:none;
}
.hp-ranked__list { grid-column:2; display:flex; flex-direction:column; }
.hp-rankrow {
    position:relative; display:grid; grid-template-columns:46px 132px 1fr; gap:14px;
    align-items:center; padding:12px 4px; border-top:1px solid var(--line); flex:1; min-height:0;
    transition:background .15s ease;
}
.hp-rankrow:first-child { border-top:none; }
.hp-rankrow:hover { background:var(--bg-2); }
.hp-rankrow__num {
    font-size:1.7rem; font-weight:800; color:var(--muted-2); text-align:center;
    font-variant-numeric:tabular-nums; line-height:1;
}
.hp-rankrow__thumb { position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000 center/cover no-repeat; }
.hp-rankrow__thumb .p { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; opacity:.85; font-size:.9rem; }
.hp-rankrow__info { min-width:0; }
.hp-rankrow__title {
    font-weight:800; font-size:.96rem; line-height:1.22;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-rankrow:hover .hp-rankrow__title { text-decoration:underline; }
.hp-rankrow__perf { color:var(--hp-red); font-size:.8rem; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-rankrow__meta { color:var(--muted-2); font-size:.77rem; margin-top:3px; }
.hp-rankrow__views { color:var(--text); font-weight:800; }
.hp-rankrow__link { position:absolute; inset:0; z-index:2; }

@media (max-width:1200px) {
    .hp-bento { grid-template-columns:repeat(2,1fr); grid-template-areas:none; }
    .hp-bento > * { grid-area:auto !important; }
    .hp-bento > *:nth-child(1) { grid-column:1 / -1; }
    .hp-feat { min-height:300px; aspect-ratio:16/9; }
}
@media (max-width:900px) {
    .hp-ranked { grid-template-columns:1fr; gap:22px; }
    .hp-ranked__hero, .hp-ranked__list { grid-column:1; }
}
@media (max-width:620px) {
    .hp-bento { grid-template-columns:1fr; gap:14px; }
    .hp-feats { grid-template-columns:1fr; }
    .hp-feat { min-height:0; }
    .hp-feat__body { padding:20px; }
    .hp-rankrow { grid-template-columns:30px 96px 1fr; gap:10px; }
    .hp-rankrow__num { font-size:1.2rem; }
    .hp-rankrow__perf { font-size:.74rem; }
}

/* equal-width button row (both sizes, also side by side on mobile) */
.hp-btnrow {
    display: flex; justify-content: center; gap: 14px;
    margin: 36px auto 0; max-width: 560px;
}
.hp-btnrow .hp-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
@media (max-width: 480px) {
    .hp-btnrow { gap: 10px; }
    .hp-btnrow .hp-btn { font-size: .82rem; padding: .95em .6em; gap: .35em; }
}

/* ---------- Clean video grid (Laatste updates) -------------------------- */
.hp-vgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 24px;
}
.hp-vcard {
    display: flex; flex-direction: column;
    background: transparent; border: none; box-shadow: none;
    transition: transform .28s cubic-bezier(.2,.6,.2,1);
}
.hp-vcard:hover { transform: translateY(-4px); }
.hp-vthumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #e9ebf0 center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(15,20,35,.06);
    transition: box-shadow .28s ease;
}
.hp-vcard:hover .hp-vthumb {
    box-shadow: inset 0 0 0 1px rgba(15,20,35,.06), 0 12px 26px -12px rgba(15,20,35,.30);
}
/* CTA-placeholders die de laatste rij vullen (alleen desktop, 4-koloms) */
.hp-vcard--ph { display: none; }
@media (min-width: 1101px) { .hp-vcard--ph { display: flex; } }
.hp-vph {
    position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 16px 20px 14px; text-align: center;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line);
    box-shadow: inset 0 3px 0 0 var(--hp-red);
    transition: transform .25s ease;
}
.hp-vph:hover { transform: translateY(-3px); }
.hp-vph::before {
    content: "\201C"; position: absolute; top: 4px; left: 14px;
    font-family: Georgia, 'Times New Roman', serif; font-size: 62px; line-height: 1;
    color: rgba(238,31,81,.13); font-weight: 700; pointer-events: none;
}
.hp-vph__q { position: relative; z-index: 1; font-style: italic; font-weight: 600; font-size: .9rem; line-height: 1.45; color: var(--text); }
.hp-vph__a { font-size: .72rem; color: var(--muted); font-weight: 800; }
.hp-vthumb video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity .35s ease;
}
.hp-vcard:hover .hp-vthumb video.is-ready,
.hp-vthumb video.autoplay-first { opacity: 1; }
.hp-vplay {
    position: absolute; inset: 0; margin: auto;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.55);
    opacity: .92; transition: opacity .25s ease, transform .25s ease;
    z-index: 2; padding-left: 2px;
}
.hp-vcard:hover .hp-vplay { opacity: 0; transform: scale(.9); }
.hp-vdur {
    position: absolute; right: 8px; bottom: 8px; z-index: 3;
    padding: 2px 6px; border-radius: 6px;
    font-weight: 600; font-size: 11px; color: #fff; background: rgba(10,12,18,.72);
    transition: opacity .2s ease;
}
.hp-vcard:hover .hp-vdur { opacity: 0; }
.hp-vbadge {
    position: absolute; left: 8px; top: 8px; z-index: 3;
    padding: 3px 9px; border-radius: 999px;
    font-weight: 800; font-size: 11px; letter-spacing: .04em; color: #4a2c00;
    background: linear-gradient(180deg, #ffdf7e, #f5b823);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hp-vbadge--free { background: linear-gradient(180deg, #6fe07a, #34af47); color: #fff; font-weight: 500; font-size: 10px; }
.hp-vtrend {
    position: absolute; left: 8px; top: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-weight: 800; font-size: 11px; letter-spacing: .04em; color: #fff;
    background: linear-gradient(180deg, #ff3b6b, var(--hp-red));
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.hp-vtrend i { font-size: .9em; }
.hp-v4k {
    position: absolute; right: 8px; top: 8px; z-index: 3;
    padding: 3px 8px; border-radius: 999px;
    font-weight: 800; font-size: 11px; letter-spacing: .04em; color: #4a2c00;
    background: linear-gradient(180deg, #ffdf7e, #f5b823);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.hp-vnet { display: inline-flex; align-items: center; gap: 5px; color: var(--hp-green); font-weight: 700; }
.hp-vnet .fa { font-size: 11px; }
.hp-vstudio {
    position: absolute; right: 8px; bottom: 8px; z-index: 3;
    padding: 2px 8px; border-radius: 6px;
    font-weight: 700; font-size: 11px; color: #fff;
    background: rgba(10,12,18,.72); backdrop-filter: blur(2px);
}
.hp-vtag {
    position: absolute; left: 8px; top: 8px; z-index: 3;
    padding: 3px 8px; border-radius: 6px;
    font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.hp-vtag--new { background: var(--hp-red); }
.hp-vtag--uhd { background: rgba(10,12,18,.72); }
.hp-vlink { position: absolute; inset: 0; z-index: 4; }
.hp-vmeta { padding: 12px 2px 0; }
.hp-vtitle {
    font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text); margin: 0 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-vtitle a:hover { color: var(--hp-blue); }
.hp-vperf {
    font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--hp-blue); margin: 0 0 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-vperf a:hover { color: var(--hp-red); }
.hp-vdesc {
    font-weight: 500; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-vsub { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 12px; color: var(--muted); }
.hp-vsub .dot { width: 3px; height: 3px; border-radius: 50%; background: #c3c7d1; flex: none; }

@media (max-width: 1100px) { .hp-vgrid { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; } }
@media (max-width: 760px)  { .hp-vgrid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } #nieuwste .hp-vgrid .hp-vcard:nth-child(n+7) { display: none; } }
@media (max-width: 560px)  {
    .hp-vgrid { grid-template-columns: 1fr; gap: 20px; }
    #nieuwste .hp-vgrid .hp-vcard:nth-child(n+7) { display: none; }  /* max 6 op mobiel (alleen homepage-updates) */
}

/* ---------- Popularity leaderboard (Populairste sexfilms) --------------- */
/* Reuses the clean card (.hp-vcard/.hp-vthumb): borderless, inset ring, hover lift.
   Distinguished purely by the ranking in the light meta zone. */
.hp-pop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.hp-popmeta { padding: 12px 2px 0; }
.hp-popviews { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; color: var(--text); margin-top: 3px; }
.hp-popviews .num { font-weight: 700; }
.hp-popviews .date { color: var(--muted); font-weight: 500; }
.hp-popviews .dot { width: 3px; height: 3px; border-radius: 50%; background: #c3c7d1; flex: none; }
@media (max-width: 1400px) { .hp-pop { grid-template-columns: repeat(3, 1fr); gap: 28px 22px; } }
@media (max-width: 960px)  { .hp-pop { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } .hp-pop > .hp-vcard:nth-child(n+7) { display: none; } }
@media (max-width: 560px)  {
    .hp-pop { grid-template-columns: 1fr; gap: 20px; }
    .hp-pop > .hp-vcard:nth-child(n+7) { display: none; }
}

/* ---------- Pornoster-detailpagina -------------------------------------- */
.hp-performer { display: block; }
.hp-performer__head { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.hp-performer__photo {
    width: 132px; height: 132px; flex: none; aspect-ratio: 1 / 1; border-radius: 50%;
    background: #000 center/cover no-repeat; border: 1px solid var(--line);
    box-shadow: var(--shadow); object-fit: cover; display: block;
}
.hp-vthumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.hp-performer__label { font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: .5px; }
.hp-performer__label .feat { color: var(--hp-pink); } .hp-performer__label .sect { color: var(--hp-blue); }
/* Vlaamse pornoster: kleuren van de Vlaamse/Belgische vlag (geel + zwart) */
.hp-performer__label--vl .feat { color: #d9a400; } .hp-performer__label--vl .sect { color: #e2231a; }
.hp-performer__name { font-size: clamp(30px, 4.4vw, 52px); font-weight: 900; text-transform: uppercase; color: var(--text); line-height: 1; margin: 4px 0 10px; }
.hp-performer__stats { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; color: var(--muted); font-weight: 600; }
.hp-performer__stats b { color: var(--text); }
.hp-performer__feats { display: contents; }   /* desktop: pills inline in de stats-rij */
.hp-performer__feat {
    padding: .2em .7em; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
    font-weight: 700; font-size: .82rem; color: var(--text);
}
@media (max-width: 720px) {
    /* mobiel: eigen rij onder de stats, compact zodat cup/haar/ogen op 1 rij passen */
    .hp-performer__feats { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
    .hp-performer__feat { font-size: .64rem; padding: .22em .55em; }
}
.hp-performer__bio { color: var(--muted); max-width: none; margin: 0 0 14px; line-height: 1.7; font-weight: 500; }
.hp-performer__bio-wrap { margin-bottom: 18px; }
.hp-performer__bio-wrap .hp-performer__bio:last-child { margin-bottom: 0; }
.hp-biotoggle { display: none; }   /* alleen mobiel zichtbaar (zie media query) */
.hp-model__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.hp-btn--wide { width: 100%; justify-content: center; }
.hp-btnrow--single { display: flex; justify-content: center; }
.hp-joinbar { padding: 0 0 40px; }
.hp-joinbar .hp-btnrow { margin-top: 0; }
@media (max-width: 720px) {
    /* Avatar links, naam/stats rechts -> bespaart verticale ruimte */
    .hp-performer__head { flex-direction: row; align-items: center; text-align: left; gap: 14px; margin-bottom: 18px; }
    .hp-performer__photo { width: 116px; height: 116px; }
    .hp-performer__id { min-width: 0; }
    .hp-performer__label { font-size: 14px; }
    .hp-performer__name { font-size: clamp(24px, 7vw, 34px); margin: 2px 0 8px; overflow-wrap: anywhere; }
    .hp-performer__stats { justify-content: flex-start; gap: 8px 12px; }
    .hp-performer__cta { display: flex; justify-content: center; }
    .hp-performer__cta .hp-btn { width: 100%; justify-content: center; }
    /* Bio: max 3 regels met uitklap */
    .hp-performer__bio-wrap { position: relative; max-height: 5.4em; overflow: hidden; transition: max-height .25s ease; }
    .hp-performer__bio-wrap::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
        background: linear-gradient(to top, var(--bg, #fff), transparent); pointer-events: none;
    }
    .hp-performer__bio-wrap.is-open { max-height: 200em; }
    .hp-performer__bio-wrap.is-open::after { display: none; }
    .hp-biotoggle {
        display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 18px; padding: 6px 0;
        background: none; border: none; color: var(--hp-blue); font-weight: 800; font-size: 14px; cursor: pointer;
    }
    .hp-biotoggle .fa { transition: transform .2s ease; }
    .hp-biotoggle[aria-expanded="true"] .fa { transform: rotate(180deg); }
}

/* ---------- Sexfilm-detailpagina --------------------------------------- */
.hp-crumbs { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 18px; letter-spacing: .2px; }
.hp-crumbs a { color: var(--hp-blue); }
.hp-crumbs span { margin: 0 4px; }
.hp-crumbs .cur { color: var(--muted); margin: 0; }
.hp-film { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
.hp-film__media {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
    background: #000 center/cover no-repeat; box-shadow: var(--shadow);
}
.hp-film__poster, .hp-film__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-film__player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #000; }
.hp-clipcta {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 20px; cursor: pointer;
    background: linear-gradient(180deg, rgba(10,12,18,.5), rgba(10,12,18,.84));
}
.hp-clipcta[hidden] { display: none; }
.hp-clipplay {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
    width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer; padding-left: 6px;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.7rem;
    background: var(--hp-red); box-shadow: 0 10px 34px rgba(238,31,81,.55); transition: transform .15s ease;
}
.hp-clipplay:hover { transform: translate(-50%, -50%) scale(1.08); }
.hp-clipplay[hidden] { display: none; }

/* Mobiele promo-bar onderaan: schuift omhoog zodra de clip speelt */
.hp-clipbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 28px 20px; padding-bottom: calc(28px + env(safe-area-inset-bottom));
    text-align: center; background: var(--hp-blue); color: #fff;
    transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 -10px 30px rgba(0,0,0,.32);
    will-change: transform; backface-visibility: hidden;
}
.hp-clipbar__t { font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1.22; letter-spacing: .3px; }
.hp-clipbar__big { display: inline-block; font-size: 2rem; line-height: 1.12; }
/* Desktop: tekst links, knop rechts (mobiel blijft gestapeld) */
@media (min-width: 761px) {
    .hp-clipbar { flex-direction: row; justify-content: center; gap: 40px; text-align: left; }
    .hp-clipbar .hp-clipbar__btn { flex: none; font-size: 1.5rem; padding: .7em 1.8em; }
    .hp-clipbar__u { margin-left: 3em; }
}
/* Desktop: ogen-afbeelding als achtergrond links in de bar (tijdelijk uit, misschien later terug)
@media (min-width: 761px) {
    .hp-clipbar { overflow: hidden; }
    .hp-clipbar > * { position: relative; z-index: 1; }
    .hp-clipbar::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: -4.5%; width: 41%; z-index: 0;
        background: url('https://static.imctransfer.com/static_01/adultprime/eyes.png') center 22% / cover no-repeat;
        -webkit-mask: linear-gradient(90deg, #000 90%, transparent 100%);
        mask: linear-gradient(90deg, #000 90%, transparent 100%);
    }
}
*/
.hp-clipbar__u { position: relative; display: inline-block; padding-bottom: .38em; }
.hp-clipbar__u::after {
    content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: .4em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M4%209%20C%2055%203%20105%2012%20155%207%20C%20205%203%20250%206%20296%2010%22%20fill%3D%22none%22%20stroke%3D%22%23f5b301%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
@media (min-width: 761px) { .hp-clipbar__big { font-size: 2.5rem; line-height: 1.1; } }
.hp-clipbar__btn { font-size: 1.1rem; padding: .9em 2em; }
.hp-clipbar.is-on { transform: translateY(0); }
/* On-demand trailer (alle schermen): poster boven de video tot je speelt
   (voorkomt iOS' eigen play-knop), overlay + lock pas tonen na play */
#filmvideo { z-index: 0; }
.hp-film__media:not(.is-playing) .hp-film__poster { z-index: 2; }
.hp-film__media.is-playing #filmvideo { z-index: 3; }
.hp-film__media:not(.is-playing) .hp-film__play { display: none; }
@media (max-width: 760px) { .hp-clipbar__t { font-size: 1.15rem; } }
.hp-clipcta__box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hp-clipcta__k { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: clamp(15px, 2.4vw, 21px); text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.hp-film__poster { z-index: 0; }
.hp-film__vid { z-index: 1; }
.hp-film__play {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; text-decoration: none;
    background: linear-gradient(180deg, rgba(10,12,18,.12), rgba(10,12,18,.55));
    transition: background .2s ease;
}
.hp-film__play:hover { background: linear-gradient(180deg, rgba(10,12,18,.28), rgba(10,12,18,.62)); }
.hp-film__playbtn {
    width: 74px; height: 74px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--hp-red); color: #fff; font-size: 1.4rem;
    box-shadow: 0 10px 30px rgba(238,31,81,.5); transition: transform .18s ease;
}
.hp-film__play:hover .hp-film__playbtn { transform: scale(1.08); }
.hp-film__playtxt { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: .82rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hp-film__title { font-size: clamp(24px, 3vw, 38px); font-weight: 900; line-height: 1.12; color: var(--text); margin: 0 0 14px; }
.hp-film__lead { color: var(--text); font-weight: 500; line-height: 1.65; margin: 0 0 18px; }
.hp-film__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-weight: 600; font-size: .9rem; margin-bottom: 20px; }
.hp-film__meta i { color: var(--hp-blue); margin-right: 4px; }
.hp-film__uhd { color: var(--text); }
.hp-film__uhd i { color: #f0a500 !important; }
.hp-film__perfs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.hp-film__perfslabel { font-weight: 800; color: var(--muted); text-transform: uppercase; font-size: .74rem; letter-spacing: 1px; margin-right: 2px; }
.hp-perfpill {
    display: inline-flex; align-items: center; gap: 6px; padding: .5em 1em; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
    font-weight: 700; font-size: .85rem; transition: border-color .15s, color .15s, background .15s;
}
.hp-perfpill i { color: var(--hp-pink); font-size: .8em; }
a.hp-perfpill:hover { border-color: var(--hp-pink); color: var(--hp-pink); }
.hp-film__desc { max-width: none; margin: 34px 0 0; }
.hp-film__dh { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.hp-film__desc p { color: var(--muted); line-height: 1.75; font-weight: 500; margin: 0; }
.hp-film__altdesc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.hp-film__altdesc.is-open { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; }
.hp-readmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 2px 0; background: none; border: none; color: var(--hp-blue); font-weight: 800; font-size: 14px; cursor: pointer; }
.hp-readmore .fa { transition: transform .2s ease; }
.hp-readmore[aria-expanded="true"] .fa { transform: rotate(180deg); }
.hp-film__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hp-tag {
    display: inline-block;
    padding: .42em .85em; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line);
    color: var(--muted); font-weight: 700; font-size: .78rem;
}
a.hp-tag--link { text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
a.hp-tag--link:hover { background: var(--hp-blue); border-color: var(--hp-blue); color: #fff; }
.hp-readmore--mob { display: none; }
.hp-inlink { color: var(--hp-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; }
.hp-inlink:hover { color: var(--hp-pink); }
@media (max-width: 860px) {
    .hp-film { grid-template-columns: 1fr; gap: 20px; }
    .hp-film__title { font-size: 24px; }
    /* originele omschrijving op mobiel: max 3 regels + lees meer */
    .hp-film__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-bottom: 4px; }
    .hp-film__lead.is-open { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; margin-bottom: 8px; }
    .hp-readmore--mob { display: inline-flex; margin-top: 2px; margin-bottom: 4px; }
    .hp-film__meta { margin-bottom: 14px; }
}

/* SEO-tekstblok (onder overzichtspagina's) - site-breed */
.hp-seo { max-width: none; }
.hp-seo h2 { font-size: clamp(18px, 2vw, 22px); font-weight: 800; color: var(--text); margin: 28px 0 10px; }
.hp-seo p { color: var(--muted); line-height: 1.8; font-weight: 500; margin: 0 0 14px; }
.hp-seo a { color: var(--hp-blue); font-weight: 700; }
.hp-seo a:hover { text-decoration: underline; }
.hp-seo ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.hp-seo li { color: var(--muted); line-height: 1.6; font-weight: 500; padding-left: 18px; position: relative; }
.hp-seo li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(90deg, var(--hp-pink), var(--hp-blue)); }
.hp-seo li strong, .hp-seo li a { color: var(--text); }
.hp-seo li a { color: var(--hp-blue); }

/* pagination */
.hp-pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 30px; }
.hp-pager__num, .hp-pager__nav {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 40px; height: 40px; justify-content: center; padding: 0 13px;
    border-radius: 10px; border: 1px solid var(--line); background: #fff;
    color: var(--text); font-weight: 700; font-size: .92rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hp-pager__num:hover, .hp-pager__nav:hover { border-color: var(--hp-blue); color: var(--hp-blue); }
.hp-pager__num.is-active { background: var(--hp-blue); border-color: var(--hp-blue); color: #fff; }
.hp-pager__dots { padding: 0 4px; color: var(--muted); }

/* ---------- Model cards -------------------------------------------------- */
.hp-models { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
.hp-model { position: relative; }
.hp-model__ph {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2) center/cover no-repeat;
    border: 1px solid var(--line);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.hp-model:hover .hp-model__ph { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--hp-pink); }
/* Fallback zonder avatar: merk-gradient met initialen */
.hp-model__ph--noimg { background: linear-gradient(150deg, #2f3a63 0%, #1c2038 55%, #3a2140 100%); }
.hp-model__initials {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 2.6rem; letter-spacing: 1px;
    color: rgba(255,255,255,.9); text-shadow: 0 2px 10px rgba(0,0,0,.35);
    padding-bottom: 34px;
}
.hp-model__ph::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 4%, transparent 46%);
}
.hp-model__rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--hp-red); color:#fff; font-weight:900; font-size:.72rem;
    padding:.25em .55em; border-radius:6px; letter-spacing:.5px;
}
.hp-model__over {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hp-model__name { font-weight: 900; text-transform: uppercase; font-size: .92rem; letter-spacing: .3px; color: var(--on-media); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hp-model__count { color: var(--on-media-mut); font-size: .72rem; font-weight: 700; }
.hp-model__btn {
    opacity: 0; transform: translateY(6px);
    transition: opacity .2s, transform .2s;
    background: var(--hp-blue); color: #fff; font-weight: 800; font-size: .72rem;
    text-transform: uppercase; padding: .5em 1em; border-radius: 999px;
}
.hp-model:hover .hp-model__btn { opacity: 1; transform: translateY(0); }
.hp-model__link { position: absolute; inset: 0; z-index: 3; }

/* ---------- Reels / snips ------------------------------------------------ */
.hp-reels { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
.hp-reel {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hp-reel:hover { box-shadow: var(--shadow); }
.hp-reel__btn { transition: transform .18s ease; }
@media (hover: hover) { .hp-reel:hover .hp-reel__btn { transform: scale(1.12); } }
.hp-reel video { position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:calc(100% + 2px); object-fit:cover; }
.hp-reel::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8), transparent 45%); z-index:1; }
.hp-reel__tag {
    position:absolute; top:10px; left:10px; z-index:2;
    display:inline-flex; align-items:center; gap:.35em;
    background: rgba(0,0,0,.55); color:#fff; font-size:.66rem; font-weight:800;
    text-transform:uppercase; padding:.3em .55em; border-radius:6px; letter-spacing:.4px;
}
.hp-reel__over { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px; text-align:center; }
.hp-reel__name { font-weight:900; font-size:.9rem; color: var(--on-media); text-shadow:0 2px 6px rgba(0,0,0,.6); }
.hp-reel__btn { display:inline-block; margin-top:8px; background:var(--hp-green); color:#fff; font-weight:800; font-size:.66rem; text-transform:uppercase; padding:.45em .9em; border-radius:999px; }
.hp-reel__link { position:absolute; inset:0; z-index:3; }

/* ---------- USP bar (site-wide strip under the hero) -------------------- */
.hp-uspband { width: 100%; }
.hp-uspbar {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
    height: var(--usp-h);
    background: var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    align-content: stretch;
}
.hp-usp {
    position: relative; background: #fff;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 1.1vw, 22px);
    padding: 14px clamp(14px, 1.4vw, 30px); min-width: 0;
    transition: background .15s ease;
}
.hp-usp:hover { background: var(--bg-2); }
.hp-usp__ico {
    flex: none;
    width: clamp(42px, 2.7vw, 54px); height: clamp(42px, 2.7vw, 54px);
    border-radius: clamp(11px, .9vw, 15px);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem); color: #fff;
    background: linear-gradient(135deg, #9aa1ad, #6f7682);
}
.hp-usp--red   .hp-usp__ico { background: linear-gradient(135deg, #a6adb8, #7b828e); color:#fff; }
.hp-usp--green .hp-usp__ico { background: linear-gradient(135deg, #8f96a2, #626a76); color:#fff; }
.hp-usp--gold  .hp-usp__ico { background: linear-gradient(135deg, #b0b6c1, #868d99); color:#fff; }
.hp-usp__txt { min-width: 0; }
.hp-usp__v { font-weight: 900; font-size: clamp(1rem, 1.05vw, 1.28rem); line-height: 1.1; color: var(--text); white-space: nowrap; }
.hp-usp__v .plus { color: var(--hp-green); }
.hp-usp__l { color: var(--muted); font-size: clamp(.7rem, .74vw, .86rem); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.hp-usp__link { position: absolute; inset: 0; }

@media (max-width: 1080px) { :root { --usp-h: 200px; } .hp-uspbar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { :root { --usp-h: 300px; } .hp-uspbar { grid-template-columns: repeat(2, 1fr); } .hp-usp { padding: 14px; gap: 10px; } }

/* ---------- CTA strip ---------------------------------------------------- */
.hp-cta {
    text-align: center;
    background:
        radial-gradient(600px 200px at 50% 0%, rgba(238,31,81,.18), transparent 70%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
}
.hp-cta h2 { font-size: clamp(24px, 3.4vw, 40px); text-transform: uppercase; }
.hp-cta p { color: var(--muted); margin: 12px auto 22px; max-width: 52ch; font-weight: 600; }

/* ---------- About / AdultPrime ------------------------------------------ */
.hp-about {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center;
    background: transparent; border: none;
    border-radius: var(--radius-lg); padding: 0;
}
.hp-about h2 { font-size: clamp(24px, 3.4vw, 40px); text-transform: uppercase; margin-bottom: 14px; }
.hp-about h2 .hl { color: var(--hp-pink); }
.hp-about p { color: var(--muted); margin: 0 0 14px; font-weight: 500; }
.hp-perks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.hp-perks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.hp-perks i { color: var(--hp-green); margin-top: 3px; font-size: 1.1rem; flex: none; }

/* SEO body article (right column) */
.hp-about--article { align-items: start; grid-template-columns: 1fr 1.25fr; }
.hp-about--split { align-items: center; grid-template-columns: 1.2fr 1fr; margin-top: 44px; }
.hp-midpage { position: relative; display: block; margin: 44px 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hp-midpage img { width: 100%; height: auto; display: block; }
.hp-midpage::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(10,12,18,.62) 0%, rgba(10,12,18,.28) 34%, rgba(10,12,18,0) 62%);
}
.hp-midpage__over {
    position: absolute; z-index: 2; left: clamp(18px, 4vw, 58px); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.hp-logo--mid { font-size: clamp(28px, 5.6vw, 66px); }
.hp-midpage__sub {
    color: #fff; font-weight: 900; font-style: italic; text-transform: uppercase;
    font-size: clamp(18px, 3.6vw, 40px); letter-spacing: .5px; margin-left: clamp(24px, 4.5vw, 60px);
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.hp-midpage__cta { align-self: center; margin-top: 16px; font-size: .82rem; padding: .72em 1.35em; box-shadow: 0 8px 22px rgba(81,183,89,.42); white-space: normal; text-align: center; }
@media (max-width: 620px) {
    .hp-midpage { display: none; }
    .hp-dvds__long { display: none; }
    .hp-trust__pay { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; justify-items: center; align-items: center; }
    .hp-trust__pay img { height: auto; width: 100%; max-width: 130px; }
}
.hp-dvds { margin-top: 44px; }
.hp-dvds--top { margin-top: 0; }
.hp-dvds__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 18px; }
.hp-dvd { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease; background: #000; }
.hp-dvd:hover { transform: translateY(-4px); }
.hp-dvd img { width: 100%; height: auto; aspect-ratio: 608 / 879; object-fit: cover; display: block; }
@media (max-width: 900px) { .hp-dvds__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .hp-dvds__row { grid-template-columns: repeat(2, 1fr); } }
.hp-about__article--full { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 48px; align-items: start; }
.hp-about__sec { break-inside: avoid; }
.hp-about__sec h3 { margin-top: 22px; }
@media (max-width: 860px) {
    .hp-about--split { grid-template-columns: 1fr; }
    .hp-about__article--full { grid-template-columns: 1fr; gap: 4px; margin-top: 28px; }
}
.hp-about__article h3 {
    font-size: 1.12rem; font-weight: 900; color: var(--text);
    margin: 22px 0 8px; text-transform: none; letter-spacing: 0;
}
.hp-about__article h3:first-child { margin-top: 0; }
.hp-about__article h3::before {
    content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px;
    background: var(--hp-red); margin-right: 10px; vertical-align: middle;
}
.hp-about__article p { color: var(--muted); font-size: .92rem; line-height: 1.65; margin: 0 0 12px; font-weight: 500; }
.hp-about__article a { color: var(--hp-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.hp-about__article a:hover { color: var(--hp-blue-deep); }

/* Left-column fillers: trust + popular stars */
.hp-side-blocks { margin-top: 32px; display: grid; gap: 24px; }
.hp-trust {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px;
}
.hp-trust__title { font-weight: 900; font-size: 1.45rem; line-height: 1.2; display: flex; align-items: center; gap: 12px; }
.hp-trust__title i { color: var(--hp-green); font-size: 1.5rem; }
.hp-trust ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 9px; }
.hp-trust li { color: var(--muted); font-size: .89rem; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.hp-trust li i { color: var(--hp-green); font-size: .85rem; }
.hp-trust__pay { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hp-trust__pay img { height: 46px; width: auto; border: none; background: none; border-radius: 0; }

.hp-stars__t { font-weight: 900; text-transform: uppercase; font-size: .82rem; letter-spacing: .6px; margin-bottom: 14px; color: var(--muted); }
.hp-stars__row { display: flex; flex-wrap: wrap; gap: 16px; }
.hp-star { width: 74px; text-align: center; }
.hp-star img {
    width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--line); transition: border-color .15s ease, transform .15s ease;
}
.hp-star:hover img { border-color: var(--hp-red); transform: translateY(-2px); }
.hp-star span {
    display: block; font-size: .72rem; font-weight: 700; margin-top: 7px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-about__side {
    background: linear-gradient(160deg, #1b1e2b, #0f1017);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: 30px 26px; text-align: center; color: var(--on-media);
}
.hp-about__side p { color: rgba(255,255,255,.72) !important; }
.hp-ap--side { display: inline-block; font-size: 2rem; color: #fff; margin-bottom: 16px; }
.hp-ap--side .hp-ap__net { color: rgba(255,255,255,.55); text-align: center; }
.hp-about__side .hp-btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.hp-about__side .hp-btn--ghost:hover { border-color: var(--hp-blue); color: var(--hp-blue); }
.hp-about__side img { margin: 0 auto 16px; max-height: 40px; width: auto; }
.hp-network-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #1874ff, #18aaff);
    border: none; color: #fff; font-weight: 800; text-transform: uppercase;
    font-size: .72rem; letter-spacing: .8px; padding: .55em 1.1em; border-radius: 999px;
    margin-bottom: 18px; box-shadow: 0 6px 18px rgba(24,116,255,.32);
}
.hp-network-badge .fa { font-size: .82em; opacity: .95; }

/* ---------- Footer ------------------------------------------------------- */
.hp-footer {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
    padding: 40px 0 30px;
}
/* Extra ruimte zodat de vaste promo-bar de footer niet overlapt (desktop) */
@media (min-width: 761px) { .hp-footer--promo { padding-bottom: 270px; } }
.hp-footer__grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.hp-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.hp-footer__links a { color: var(--muted); font-weight: 700; font-size: .85rem; }
.hp-footer__links a:hover { color: #fff; }
.hp-footer__common {
    color: var(--muted-2); font-size: .76rem; margin-top: 24px;
    padding-top: 22px; border-top: 1px solid var(--line);
    text-align: center; line-height: 1.7;
}
.hp-footer__common p { margin: 0 0 10px; }
.hp-footer__common a { color: var(--muted); text-decoration: underline; }
.hp-footer__common a:hover { color: var(--hp-blue); }
.hp-footer__common img { display: inline-block; height: 32px; width: auto; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1080px) {
    .hp-grid { grid-template-columns: repeat(3, 1fr); }
    .hp-models { grid-template-columns: repeat(4, 1fr); }
    .hp-reels { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
    :root { --hdr-h: 52px; }
    /* mobiel: dunne lijn (4px), groeit op scroll uit tot compacte CTA (kleiner, mag 2 regels) */
    .hp-scrollcta { height: 4px; }
    .hp-header.is-scrolled .hp-scrollcta { height: auto; }
    .hp-scrollcta__t {
        height: auto; min-height: 34px; padding: 6px 12px; gap: 7px;
        font-size: clamp(.74rem, 3.6vw, .92rem); letter-spacing: .3px;
        white-space: normal; text-align: center; line-height: 1.2;
    }
    .hp-scrollcta__long { display: none; }
    .hp-scrollcta__short { display: inline; }
    .hp-header__inner { justify-content: flex-start; gap: 10px; padding-left: 10px; padding-right: 12px; overflow: hidden; }
    .hp-burger { order: -1; flex: none; }            /* hamburger vóór het logo */
    .hp-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .hp-logo--sm { font-size: 22px; }
    /* nette, lichte dropdown die bij het witte thema past */
    .hp-nav {
        display: none; position: absolute; top: var(--hdr-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; padding: 6px 16px 18px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 22px 44px -20px rgba(15,20,35,.4);
    }
    .hp-nav.is-open { display: flex; }
    .hp-nav a.hp-nav__link {
        text-align: left; font-size: 1rem; font-weight: 700; letter-spacing: 0;
        text-transform: none; color: var(--text);
        padding: 15px 6px; border-radius: 0;
        border-bottom: 1px solid var(--line);
        display: flex; align-items: center; gap: 10px;
    }
    .hp-nav a.hp-nav__link:hover,
    .hp-nav a.hp-nav__link:active { background: var(--bg-2); color: var(--hp-blue); }
    .hp-nav__ap { display: none; }                       /* brand-lockup niet in het menu */
    .hp-nav__login .hp-login-txt { display: inline; }    /* in het menu wél 'Login' tonen */
    .hp-nav .hp-btn { width: 100%; justify-content: center; margin-top: 14px; font-size: 1rem; }
    .hp-burger { display: flex; align-items: center; justify-content: center; }
    .hp-about { grid-template-columns: 1fr; }
    .hp-hero__meta { display: none; }
    .hp-stats { grid-template-columns: repeat(2, 1fr); }
    .hp-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .hp-section { padding: 22px 0; }
    .hp-btnrow { margin-top: 16px; }
    .hp-modbtn { margin-top: 16px; }
    .hp-grid { grid-template-columns: 1fr; gap: 14px; }
    .hp-models { grid-template-columns: repeat(3, 1fr); }
    .hp-reels { grid-template-columns: repeat(2, 1fr); }
    .hp-reels .hp-reel:nth-child(n+5) { display: none; }   /* op mobiel max 4 reels (2x2) */
    .hp-card__body { padding: 10px 11px 13px; }
    .hp-card__title { font-size: .86rem; }
    /* Mobiele volgorde: updates direct onder de hero, USP-balk verbergen.
       (desktop ongewijzigd) */
    body { display: flex; flex-direction: column; min-height: 100svh; }
    .hp-header  { order: -3; }
    .hp-hero    { order: -2; }
    #nieuwste   { order: -1; }
    .hp-uspband { display: none; }

    /* hero (met portret-reel) vult de fold onder de header; svh = stabiel bij het
       in-/uitklappen van de adresbalk, dus geen zoom-hapering tijdens scrollen */
    .hp-hero { height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h)); align-items: flex-end; }
    .hp-hero__topbadges { display: none; }   /* geen Uitgelicht/4K-badges op mobiel */
    .hp-hero__mob4k {
        display: inline-flex; position: absolute; top: 14px; right: 14px; z-index: 3;
        background: linear-gradient(135deg, #ffd94a, #f0a500); color: #3a2600;
        font-weight: 900; font-size: .82rem; letter-spacing: .5px;
        padding: .38em .72em; border-radius: 8px; line-height: 1;
    }
    /* tekst + knoppen netjes onderaan uitgelijnd */
    .hp-hero__inner { padding: 22px 20px 30px; }
    .hp-hero__sub { margin: 6px 0 16px; }        /* titel + tekst dichter op elkaar */
    /* keep both hero CTAs side by side on mobile */
    .hp-hero__cta { flex-wrap: nowrap; gap: 10px; }
    .hp-hero__cta .hp-btn {
        flex: 1 1 0; min-width: 0; justify-content: center;
        font-size: .8rem; padding: .85em .7em; gap: .35em;
    }
}
@media (max-width: 420px) {
    .hp-models { grid-template-columns: repeat(2, 1fr); }
    .hp-reels { grid-template-columns: repeat(2, 1fr); }
}

/* 18+ leeftijdsverificatie */
.hp-agegate {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 18, .88);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.age-ok .hp-agegate { display: none; }
.hp-agegate__card {
    background: #fff; color: var(--text);
    border-radius: var(--radius-lg);
    padding: 36px 30px; max-width: 460px; width: 100%;
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.hp-agegate__logo { justify-content: center; margin-bottom: 22px; font-size: 30px; max-width: 100%; }
.hp-agegate__logo .hp-logo__bar { white-space: nowrap; }
.hp-agegate__t { font-size: 1.5rem; font-weight: 900; margin: 0 0 10px; text-transform: uppercase; }
.hp-agegate__p { color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0 0 26px; }
.hp-agegate__btns { display: flex; flex-direction: column; gap: 12px; }
.hp-agegate__btns .hp-btn { width: 100%; justify-content: center; }
@media (max-width: 420px) {
    .hp-agegate__card { padding: 30px 22px; }
    .hp-agegate__t { font-size: 1.3rem; }
    .hp-agegate__logo { font-size: 24px; }
}


/* "NIEUW"-badge half op het logo (rechtsboven) */
.hp-logo{ position: relative; overflow: visible; }
.hp-new{
    position: absolute; top: auto; bottom: 0; right: 0;
    transform: translate(-34%, 60%);
    display: inline-flex; align-items: center; z-index: 6;
    background: linear-gradient(135deg,#12c46a,#0aa856);
    color: #fff; font-weight: 900; font-style: italic; text-transform: uppercase;
    font-size: 12px; letter-spacing: .5px; line-height: 1; white-space: nowrap;
    padding: 5px 8px; border-radius: 6px;
    box-shadow: 0 2px 9px rgba(0,0,0,.35);
}
.hp-new .fa{ font-size: 10px; }
@media (max-width: 560px){
    .hp-new{ font-size: 10px; padding: 4px 6px; }   /* op mobiel zichtbaar, iets kleiner */
    .hp-header__inner{ overflow: visible; }          /* niet afknippen zodat de badge zichtbaar blijft */
}


/* X (Twitter) link in de footer */
.hp-footer__links .hp-x{ display: inline-flex; align-items: center; gap: 7px; }
.hp-footer__links .hp-x svg{ width: 17px; height: 17px; }
.hp-footer__links .hp-x .hp-x__t{ }

/* SEO-bio pagina (Daphne Laat e.d.) */
.hp-bio{ max-width: none; margin: 0; }
.hp-bio__hero{ display:block; border-radius:16px; overflow:hidden; margin-bottom:18px; box-shadow:0 12px 34px rgba(0,0,0,.4); }
.hp-bio__hero img{ width:100%; height:auto; display:block; }
.hp-bio .hp-sub{ margin-top:4px; }
.hp-bio p{ font-size:1.05rem; line-height:1.75; margin:0 0 18px; }
.hp-bio h2{ margin:30px 0 12px; }
.hp-bio__img{ width:100%; height:auto; border-radius:14px; margin:22px 0; display:block; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.hp-socials{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 8px; }
.hp-social{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; color:#fff; text-decoration:none; font-weight:800; font-size:.95rem; }
.hp-social:hover{ filter:brightness(1.06); }
.hp-social--ig{ background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.hp-social--x{ background:#000; }
.hp-bio__films{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.hp-bio__films img{ width:100%; height:auto; border-radius:10px; display:block; }
.hp-bio__cta{ display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 8px; }
@media (max-width:640px){ .hp-bio__films{ grid-template-columns:repeat(2,1fr); } }