/* ============================================================
   HARTslag — Merkstijl & Websitevoorstel
   Design tokens + components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

:root{
  /* Brand */
  --red:        #E11B22;
  --red-deep:   #B5141A;
  --red-soft:   #FBEAEA;
  --red-tint:   #F7D9DA;

  --ink:        #16233B;   /* deep navy — text & dark sections */
  --ink-2:      #1D2D49;   /* layered navy */
  --navy:       #0F1A2C;   /* darkest navy */

  /* Warm neutrals */
  --paper:      #FAF7F2;   /* page background */
  --paper-2:    #F2ECE2;   /* alt section / cards */
  --paper-3:    #EBE3D6;
  --white:      #FFFFFF;
  --slate:      #54607A;   /* body muted */
  --slate-2:    #8C93A3;   /* captions */
  --line:       #E7DFD2;   /* warm hairline */
  --line-dark:  rgba(255,255,255,.14);

  /* Type */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans:    'Mulish', system-ui, sans-serif;
  --serif:   'Newsreader', Georgia, serif;

  --maxw: 1180px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(22,35,59,.06), 0 2px 8px rgba(22,35,59,.05);
  --shadow:    0 8px 30px rgba(22,35,59,.10), 0 2px 8px rgba(22,35,59,.06);
  --shadow-lg: 0 30px 70px rgba(15,26,44,.18), 0 8px 24px rgba(15,26,44,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- proposal shell ---------- */
.proposal{ }
.section{ padding:84px 0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wrap-wide{ max-width:1320px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:800;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--red); border-radius:2px;
}
.eyebrow.on-dark{ color:#ff6a6f; }
.eyebrow.on-dark::before{ background:#ff6a6f; }

.sec-head{ max-width:760px; margin-bottom:44px; }
.sec-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4vw,46px); line-height:1.04; letter-spacing:-.02em;
  margin:16px 0 14px;
}
.sec-head p{ color:var(--slate); font-size:18px; max-width:620px; }

/* heartbeat divider */
.pulse{ display:block; color:var(--red); }
.pulse path{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   PROPOSAL COVER
   ============================================================ */
.cover{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(225,27,34,.07), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
  padding:30px 0 76px;
}
.cover-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 36px;
}
.cover-bar img{ height:46px; width:auto; }
.cover-bar .meta{ font-size:13px; color:var(--slate-2); font-weight:600; letter-spacing:.02em; text-align:right; }
.cover-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:48px; align-items:end; }
.cover h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px,6vw,72px); line-height:.98; letter-spacing:-.03em;
}
.cover h1 .accent{ color:var(--red); }
.cover .lead{ margin-top:24px; font-size:20px; color:var(--slate); max-width:560px; }
.cover .lead .serif{ font-family:var(--serif); font-style:italic; color:var(--ink); }
.cover-note{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm);
}
.cover-note h4{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; margin-bottom:12px; }
.cover-note ul{ list-style:none; display:grid; gap:11px; }
.cover-note li{ display:flex; gap:11px; font-size:14.5px; color:var(--slate); }
.cover-note li b{ color:var(--ink); font-weight:700; }
.cover-note .dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--red); margin-top:7px; }

/* ============================================================
   GENERIC styleguide blocks
   ============================================================ */
.alt{ background:var(--paper-2); }
.dark{ background:var(--ink); color:#EAEDF2; }
.dark h2{ color:#fff; }
.dark .sec-head p{ color:#A7B0C2; }

.card-label{
  font-family:var(--sans); font-weight:800; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2);
  margin-bottom:16px;
}

/* ---- color palette ---- */
.swatch-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.swatch{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--white); box-shadow:var(--shadow-sm);
}
.swatch .chip{ height:120px; display:flex; align-items:flex-end; padding:14px; }
.swatch .info{ padding:13px 15px 16px; }
.swatch .name{ font-family:var(--display); font-weight:700; font-size:15px; }
.swatch .hex{ font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--slate); letter-spacing:.04em; margin-top:2px; }
.swatch .use{ font-size:12.5px; color:var(--slate-2); margin-top:7px; line-height:1.45; }
.chip .tag{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:20px; }

/* ---- typography specimen ---- */
.type-grid{ display:grid; grid-template-columns:1fr; gap:0; }
.type-row{ display:grid; grid-template-columns:130px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line); align-items:baseline; }
.type-row:first-child{ border-top:none; }
.type-meta{ font-size:12.5px; color:var(--slate-2); font-weight:700; letter-spacing:.04em; line-height:1.5; }
.type-meta b{ display:block; color:var(--ink); font-size:13px; }
.sp-display{ font-family:var(--display); font-weight:700; font-size:52px; line-height:1; letter-spacing:-.025em; }
.sp-h2{ font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-.02em; }
.sp-serif{ font-family:var(--serif); font-style:italic; font-size:30px; color:var(--ink); }
.sp-body{ font-family:var(--sans); font-size:18px; color:var(--slate); max-width:560px; }
.sp-eyebrow{ font-family:var(--sans); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:800; font-size:15px;
  padding:14px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  letter-spacing:.01em; white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 6px 18px rgba(225,27,34,.28); }
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 10px 24px rgba(225,27,34,.34); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ondark-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ondark-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }

/* ---- pills / tags ---- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
}
.pill-red{ background:var(--red-soft); color:var(--red-deep); }
.pill-ink{ background:rgba(22,35,59,.07); color:var(--ink); }
.pill-dark{ background:rgba(255,255,255,.12); color:#fff; }

/* ---- component showcase grid ---- */
.comp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.comp-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.comp-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ============================================================
   PILLAR CARDS (reused on homepage)
   ============================================================ */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pillar{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pillar .icn{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--red-soft); color:var(--red); margin-bottom:20px;
}
.pillar .icn svg{ width:26px; height:26px; }
.pillar h3{ font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.01em; margin-bottom:9px; }
.pillar p{ color:var(--slate); font-size:15.5px; }
.pillar .num{ position:absolute; top:22px; right:26px; font-family:var(--display); font-weight:700; font-size:15px; color:var(--line); }

/* ============================================================
   BROWSER FRAME (for homepage mock)
   ============================================================ */
.browser{
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); background:#fff;
}
.browser-bar{
  display:flex; align-items:center; gap:14px; padding:13px 18px;
  background:#EDE7DD; border-bottom:1px solid var(--line);
}
.dots{ display:flex; gap:7px; }
.dots span{ width:12px; height:12px; border-radius:50%; }
.dots span:nth-child(1){ background:#FF5F57; }
.dots span:nth-child(2){ background:#FEBC2E; }
.dots span:nth-child(3){ background:#28C840; }
.urlbar{
  flex:1; max-width:360px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:6px 14px; font-size:12.5px; color:var(--slate);
  display:flex; align-items:center; gap:8px; font-weight:600;
}
.urlbar svg{ width:12px; height:12px; color:#28a745; }

/* ============================================================
   HOMEPAGE (rendered inside browser frame)
   ============================================================ */
.site{ font-size:16px; background:var(--paper); }
.site .swrap{ width:100%; max-width:1140px; margin:0 auto; padding:0 40px; }

/* header */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(250,247,242,.86); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-nav{ display:flex; align-items:center; gap:26px; height:74px; }
.site-nav .logo{ height:48px; width:auto; margin-right:auto; }
.site-nav a.nl{ font-weight:700; font-size:14.5px; color:var(--ink); opacity:.82; transition:opacity .15s, color .15s; position:relative; }
.site-nav a.nl:hover{ opacity:1; color:var(--red); }
.site-nav a.nl.active{ opacity:1; }
.site-nav a.nl.active::after{ content:""; position:absolute; left:0; right:0; bottom:-27px; height:2px; background:var(--red); }
.nav-links{ display:flex; gap:24px; align-items:center; }

/* generic site section */
.s-block{ padding:84px 0; }
.s-block.tight{ padding:64px 0; }
.s-tag{ font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.s-block h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,3.4vw,42px); line-height:1.05; letter-spacing:-.02em; margin:14px 0; }
.s-lead{ color:var(--slate); font-size:18px; max-width:620px; }

/* HERO base (used inside homepage = direction A) */
.hero{
  position:relative; padding:64px 0 72px;
  background:
    radial-gradient(900px 500px at 88% 0%, rgba(225,27,34,.06), transparent 55%),
    var(--paper);
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(36px,4.6vw,58px); line-height:1.02; letter-spacing:-.025em;
}
.hero h1 .accent{ color:var(--red); }
.hero .sub{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink); margin-top:18px; }
.hero p.body{ color:var(--slate); font-size:17px; margin-top:18px; max-width:520px; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-visual{ position:relative; }

/* image placeholders */
.ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
  border:1px solid var(--line);
  display:grid; place-items:center; color:var(--slate-2);
}
.ph .ph-cap{ font-family:'Mulish',monospace; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); background:rgba(255,255,255,.7); padding:6px 12px; border-radius:20px; backdrop-filter:blur(2px); }
.ph.dark{
  background:repeating-linear-gradient(135deg, #1a2840 0 14px, #16233B 14px 28px);
  border-color:rgba(255,255,255,.08); color:#7e8aa3;
}
.ph.dark .ph-cap{ background:rgba(15,26,44,.5); color:#aab4c8; }
.ph.red{
  background:repeating-linear-gradient(135deg, #e6332c 0 14px, #d81f24 14px 28px);
  border-color:rgba(255,255,255,.12); color:#fff;
}
.ph.red .ph-cap{ background:rgba(0,0,0,.18); color:#fff; }

/* floating agenda chip in hero */
.float-chip{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:13px; align-items:center;
}
.float-chip .cal{ width:46px; height:46px; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-content:center; text-align:center; line-height:1; }
.float-chip .cal .d{ font-family:var(--display); font-weight:700; font-size:19px; }
.float-chip .cal .m{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; opacity:.85; }
.float-chip .t b{ font-family:var(--display); font-size:14px; display:block; }
.float-chip .t span{ font-size:12px; color:var(--slate-2); }

/* intro split */
.intro-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.intro-split p{ color:var(--slate); font-size:16.5px; margin-top:16px; }

/* platform band */
.platform{ background:var(--ink); color:#E7EAF1; border-radius:var(--radius-lg); padding:54px 56px; position:relative; overflow:hidden; }
.platform .pulse-bg{ position:absolute; inset:0; opacity:.5; color:rgba(255,255,255,.06); pointer-events:none; }
.platform-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; }
.platform h2{ color:#fff; font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; line-height:1.08; }
.platform p{ color:#AEB7C9; font-size:16.5px; margin-top:16px; }
.platform .stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.platform .stat{ background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:14px; padding:22px; }
.platform .stat .big{ font-family:var(--display); font-weight:700; font-size:38px; color:#fff; line-height:1; }
.platform .stat .lab{ font-size:13px; color:#9aa4ba; margin-top:8px; }

/* initiative cards */
.init-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.init{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.init:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.init .img{ aspect-ratio:4/3; }
.init .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.init .cat{ font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:9px; }
.init h3{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em; line-height:1.1; }
.init p{ color:var(--slate); font-size:14.5px; margin-top:9px; flex:1; }
.init .link{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:var(--ink); margin-top:16px; transition:gap .18s, color .18s; }
.init:hover .link{ gap:11px; color:var(--red); }

/* featured initiative (large) */
.init-featured{
  display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin-bottom:22px;
  background:var(--ink); color:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.init-featured .img{ min-height:340px; }
.init-featured .body{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.init-featured .cat{ color:#ff7a7e; font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.init-featured h3{ font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; margin:12px 0 14px; line-height:1.05; }
.init-featured p{ color:#AEB7C9; font-size:16px; max-width:420px; }

/* agenda list */
.agenda{ display:grid; gap:14px; }
.ag-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ag-item:hover{ transform:translateX(4px); box-shadow:var(--shadow-sm); }
.ag-date{ text-align:center; min-width:64px; }
.ag-date .d{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1; color:var(--ink); }
.ag-date .m{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-top:4px; }
.ag-main h4{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; }
.ag-main .loc{ font-size:13.5px; color:var(--slate-2); font-weight:700; margin-top:3px; display:flex; align-items:center; gap:6px; }
.ag-main p{ font-size:14px; color:var(--slate); margin-top:7px; max-width:560px; }
.ag-go{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:all .2s; }
.ag-item:hover .ag-go{ background:var(--red); border-color:var(--red); color:#fff; }

/* audience chips */
.aud-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.aud-tags{ display:flex; flex-wrap:wrap; gap:11px; }
.aud-tags .at{
  background:var(--white); border:1px solid var(--line); border-radius:999px; padding:12px 20px;
  font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:9px;
}
.aud-tags .at .d{ width:7px; height:7px; border-radius:50%; background:var(--red); }

/* CTA band */
.cta-band{ position:relative; background:var(--red); color:#fff; border-radius:var(--radius-lg); padding:60px 56px; overflow:hidden; text-align:center; }
.cta-band .pulse-bg{ position:absolute; inset:0; color:rgba(255,255,255,.16); opacity:.6; }
.cta-band h2{ font-family:var(--display); font-weight:700; font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; color:#fff; position:relative; }
.cta-band p{ max-width:560px; margin:14px auto 0; color:rgba(255,255,255,.92); font-size:17px; position:relative; }
.cta-band .cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:30px; position:relative; }

/* footer */
.site-footer{ background:var(--navy); color:#aeb8cc; padding:60px 0 30px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-dark); }
.site-footer .logo{ height:88px; margin-bottom:18px; }
.site-footer h5{ color:#fff; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.04em; margin-bottom:16px; }
.site-footer ul{ list-style:none; display:grid; gap:10px; }
.site-footer a{ font-size:14px; color:#aeb8cc; transition:color .15s; }
.site-footer a:hover{ color:#fff; }
.site-footer .tagline{ font-size:14.5px; max-width:280px; line-height:1.6; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:#7d889e; flex-wrap:wrap; gap:12px; }
.soc{ display:flex; gap:10px; }
.soc a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:grid; place-items:center; color:#aeb8cc; transition:all .2s; }
.soc a:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ============================================================
   HERO VARIATIONS
   ============================================================ */
.variant-stack{ display:grid; gap:34px; }
.variant{ }
.variant-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.variant-head .badge{
  font-family:var(--display); font-weight:700; font-size:13px; color:#fff; background:var(--ink);
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
}
.variant-head h3{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em; }
.variant-head .desc{ color:var(--slate); font-size:14.5px; }
.variant-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }

/* Variation A — Licht & ruimte */
.hv{ height:480px; position:relative; overflow:hidden; }
.hvA{ background:radial-gradient(700px 420px at 90% -10%, rgba(225,27,34,.07), transparent 60%), var(--paper); display:grid; grid-template-columns:1fr 1fr; }
.hvA .txt{ padding:54px; display:flex; flex-direction:column; justify-content:center; }
.hvA h1{ font-family:var(--display); font-weight:700; font-size:40px; line-height:1.03; letter-spacing:-.025em; }
.hvA h1 .accent{ color:var(--red); }
.hvA .sub{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink); margin-top:14px; }
.hvA .row{ display:flex; gap:11px; margin-top:26px; flex-wrap:wrap; }
.hvA .vis{ position:relative; padding:30px 30px 30px 0; }
.hvA .vis .ph{ height:100%; }

/* Variation B — Kloppend hart (dark) */
.hvB{ background:var(--ink); color:#fff; display:grid; place-items:center; text-align:center; }
.hvB .pulse-bg{ position:absolute; inset:0; color:rgba(255,255,255,.07); }
.hvB .inner{ position:relative; max-width:720px; padding:0 40px; }
.hvB .logo-mark{ height:42px; margin:0 auto 26px; opacity:.95; }
.hvB h1{ font-family:var(--display); font-weight:700; font-size:46px; line-height:1.03; letter-spacing:-.025em; }
.hvB h1 .accent{ color:#ff5a60; }
.hvB .sub{ font-family:var(--serif); font-style:italic; font-size:20px; color:#B9C2D4; margin-top:16px; }
.hvB .row{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* Variation C — Beeld-gedragen */
.hvC{ position:relative; }
.hvC .bg{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,#1a2840 0 16px,#16233B 16px 32px); }
.hvC .scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,26,44,.92) 0%, rgba(15,26,44,.7) 42%, rgba(15,26,44,.25) 100%); }
.hvC .ph-cap-abs{ position:absolute; top:18px; right:20px; font-family:'Mulish'; font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#aab4c8; background:rgba(15,26,44,.5); padding:6px 12px; border-radius:20px; }
.hvC .content{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:50px 54px; max-width:680px; }
.hvC h1{ font-family:var(--display); font-weight:700; font-size:44px; line-height:1.03; letter-spacing:-.025em; color:#fff; }
.hvC h1 .accent{ color:#ff5a60; }
.hvC .sub{ font-family:var(--serif); font-style:italic; font-size:19px; color:#cfd6e4; margin-top:14px; }
.hvC .row{ display:flex; gap:11px; margin-top:26px; flex-wrap:wrap; }
.hvC .chips{ display:flex; gap:9px; margin-bottom:22px; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cover-grid{ grid-template-columns:1fr; gap:34px; }
  .swatch-grid{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:1fr; }
  .init-grid{ grid-template-columns:repeat(2,1fr); }
  .init-featured{ grid-template-columns:1fr; }
  .init-featured .img{ min-height:220px; }
  .platform-grid,.intro-split,.aud-grid,.hero-grid{ grid-template-columns:1fr; gap:34px; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .comp-grid{ grid-template-columns:1fr; }
  .hvA{ grid-template-columns:1fr; } .hvA .vis{ display:none; }
  .nav-links{ display:none; }
}
@media (max-width:560px){
  .section{ padding:56px 0; }
  .swatch-grid,.init-grid{ grid-template-columns:1fr; }
  .type-row{ grid-template-columns:1fr; gap:10px; }
  .foot-top{ grid-template-columns:1fr; }
  .platform,.cta-band{ padding:36px 26px; }
  .hv{ height:auto; min-height:420px; }
}