/* ============================================================
   Testopmaak homepage, editorial richting.
   Alleen gebruikt door test-homepage.html. Raakt de live site niet.
   Behoudt: Plus Jakarta Sans, paars-magenta huisstijl, brand-purple.
   Verandert: geen kaarten, grote typografie, volle-kleur beeld dat
   over de rand loopt, haarlijnen in plaats van omkaderde vakjes.
   ============================================================ */

:root {
  --t-bg: #faf7f2;          /* warme off-white, iets warmer dan de site */
  --t-bg-2: #f2ece4;
  --t-ink: #17102a;
  --t-ink-soft: #4a4458;
  --t-ink-mute: #8b8598;
  --t-line: #ded5c8;
  --t-accent: #7c3aed;
  --t-magenta: #d946ef;
  --t-deep: #1a0d2e;
}

.t-page {
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow-x: clip;
}
.t-page ::selection { background: var(--t-accent); color: #fff; }

.t-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.t-narrow { max-width: 660px; }

/* ---------- typografie ---------- */
.t-page h1, .t-page h2, .t-page h3 {
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
  margin: 0; text-wrap: balance; color: var(--t-ink);
}
.t-page h1 { font-size: clamp(46px, 7.4vw, 96px); }
.t-page h2 { font-size: clamp(34px, 5.2vw, 68px); }
.t-page h3 { font-size: clamp(21px, 2.3vw, 30px); letter-spacing: -0.025em; }
.t-page p { margin: 0 0 20px; line-height: 1.62; color: var(--t-ink-soft); font-size: clamp(16px, 1.25vw, 18px); text-wrap: pretty; }
.t-page p strong { color: var(--t-ink); font-weight: 700; }
.t-lede { font-size: clamp(19px, 1.7vw, 23px) !important; line-height: 1.5 !important; font-style: normal; color: var(--t-ink) !important; }
.t-accent { color: var(--t-accent); }

/* ---------- knoppen ---------- */
.t-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-magenta) 100%);
  color: #fff; text-decoration: none; border: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 19px 34px; border-radius: 999px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.t-btn:hover { background: linear-gradient(135deg, var(--t-magenta) 0%, var(--t-accent) 100%); transform: translateY(-2px); }
.t-btn-line { background: none; color: var(--t-accent); border: 1.5px solid var(--t-accent); }
.t-btn-line:hover { background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-magenta) 100%); color: #fff; border-color: transparent; }
.t-btn-light { background: #fff; color: var(--t-accent); }
.t-btn-light:hover { background: linear-gradient(135deg, #c084fc 0%, #f0abfc 100%); color: var(--t-deep); }

/* ---------- secties ---------- */
.t-sec { padding: clamp(80px, 11vw, 168px) 0; }
.t-sec-tight { padding: clamp(56px, 7vw, 104px) 0; }

/* ---------- hero ---------- */
.t-hero { position: relative; padding: clamp(48px, 7vw, 104px) 0 clamp(64px, 9vw, 128px); }
.t-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.t-hero h1 { margin-bottom: 26px; }

/* beeldcompositie in de hero.
   Was schuin en door elkaar; nu recht en netjes gestapeld. De grote shot
   staat vlak en loopt over de rechterrand, de tweede zit er links onder
   met een minieme kanteling zodat het geen platte collage wordt, en de
   telefoon staat rechtop vooraan. */
.t-collage { position: relative; height: clamp(300px, 34vw, 460px); }
.t-collage img {
  position: absolute; display: block; height: auto; border-radius: 14px;
  box-shadow: 0 30px 64px -24px rgba(23, 16, 42, 0.34), 0 3px 12px -5px rgba(23, 16, 42, 0.16);
}
.t-shot-a { width: 96%;  top: 2%;    left: 16%;  z-index: 2; }
.t-shot-b { width: 46%;  bottom: 3%; left: -2%;  z-index: 3; }
.t-phone  { width: 12.5%; bottom: -2%; left: 41%; z-index: 4; border-radius: 14px !important; }

/* ---------- lijst met haarlijnen in plaats van kaarten ---------- */
.t-list { border-top: 1px solid var(--t-line); margin-top: clamp(34px, 5vw, 64px); }
.t-row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--t-line);
  text-decoration: none; color: inherit; position: relative;
}
a.t-row:hover .t-row-title { color: var(--t-accent); }
.t-row-num { font-size: 14px; font-weight: 700; color: var(--t-ink-mute); letter-spacing: 0.04em; padding-top: 6px; }
.t-row-title { font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; transition: color 0.25s ease; }
.t-row-text { font-size: 16px; line-height: 1.6; color: var(--t-ink-soft); }
.t-row-go { font-size: 22px; color: var(--t-ink-mute); align-self: center; transition: transform 0.25s ease, color 0.25s ease; }
a.t-row:hover .t-row-go { color: var(--t-accent); }

/* ---------- volvlak kleurpaneel ---------- */
.t-panel {
  background:
    radial-gradient(50% 70% at 92% -8%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, var(--t-accent) 0%, var(--t-magenta) 100%);
  color: #fff; border-radius: clamp(20px, 3vw, 36px);
  padding: clamp(44px, 6.5vw, 96px); position: relative; overflow: hidden;
}
.t-panel h2, .t-panel h3 { color: #fff; }
.t-panel p { color: rgba(255, 255, 255, 0.92); }
/* de gloed zit in de achtergrond, niet in een gefilterde laag: een filter
   krijgt een eigen compositielaag die op de RECHTHOEK wordt geknipt en dus
   een vierkant vlak toont binnen een ronde box */
.t-panel::after { content: none; }
.t-panel > * { position: relative; z-index: 1; }
.t-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }

/* ---------- case, volle kleur, geen kaartchroom ---------- */
.t-case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: center; margin-bottom: clamp(56px, 8vw, 116px); }
.t-case:last-child { margin-bottom: 0; }
.t-case.flip .t-case-media { order: 2; }
.t-case-media { position: relative; }
.t-case-media img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 30px 64px -28px rgba(23, 16, 42, 0.4); }
.t-case-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--t-accent); margin-bottom: 14px; }
.t-case h3 { margin-bottom: 14px; }
.t-case-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--t-ink); text-decoration: none; border-bottom: 1.5px solid var(--t-ink); padding-bottom: 3px; font-size: 15px; }
.t-case-link:hover { color: var(--t-accent); border-color: var(--t-accent); }

/* ---------- prijsrijen ---------- */
.t-price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto;
  gap: clamp(16px, 3vw, 44px); align-items: center;
  padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--t-line);
}
.t-price-name { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; }
.t-price-num { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.035em; color: var(--t-accent); white-space: nowrap; }
.t-price-num span { font-size: 15px; font-weight: 600; color: var(--t-ink-mute); letter-spacing: 0; }

/* ---------- citaat ---------- */
.t-quote { font-size: clamp(26px, 3.6vw, 46px); font-weight: 600; line-height: 1.22; letter-spacing: -0.03em; color: var(--t-ink); margin: 0 0 28px; text-wrap: balance; }
.t-quote-by { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--t-ink-soft); }
.t-stars { color: #f59e0b; font-size: 17px; letter-spacing: 2px; }

/* ---------- persoon ---------- */
.t-person { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.t-person img { width: 100%; height: auto; display: block; border-radius: 20px; }

/* ---------- afsluitende CTA als afgeronde box ----------
   De donkere behandeling zit op de INNERLIJKE wrap, niet op de sectie zelf.
   Stond hij op de sectie, dan liep het blok door tot de schermrand. De
   sectie levert nu de buitenmarge, de wrap is de box. Zelfde kleuren en
   maten als .final-cta in editorial.css, zodat elke pagina hetzelfde toont. --- */
.t-sec.t-dark { padding: 0 clamp(20px, 4vw, 56px) clamp(64px, 9vw, 128px); background: none; }
.t-sec.t-dark > .t-wrap {
  background:
    radial-gradient(44% 60% at 6% 2%, rgba(217, 70, 239, 0.3) 0%, rgba(217, 70, 239, 0) 66%),
    radial-gradient(50% 66% at 97% 97%, rgba(124, 58, 237, 0.32) 0%, rgba(124, 58, 237, 0) 68%),
    radial-gradient(120% 140% at 12% 0%, #3b1a63 0%, var(--t-deep) 58%);
  color: #fff; border-radius: clamp(22px, 3vw, 34px);
  padding: clamp(48px, 6vw, 92px) clamp(30px, 5vw, 76px);
  max-width: 1320px; margin: 0 auto;
  position: relative; overflow: hidden;
}
.t-dark h2 { color: #fff; }
.t-dark p { color: rgba(255, 255, 255, 0.8); }

/* ---------- kleine meta-regel ---------- */
.t-meta { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-ink-mute); margin-bottom: 18px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .t-hero-grid { grid-template-columns: 1fr; }
  .t-collage { height: clamp(230px, 54vw, 370px); margin-top: 26px; }
  .t-shot-a { width: 94%; left: 8%; }
  .t-shot-b { width: 48%; left: -3%; }
  .t-phone { width: 12%; left: 44%; }
  .t-panel-grid, .t-person { grid-template-columns: 1fr; }
  .t-case { grid-template-columns: 1fr; gap: 24px; }
  .t-case.flip .t-case-media { order: 0; }
  .t-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 8px; }
  .t-row-text { grid-column: 2 / 4; }
  .t-price-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .t-price-row > :nth-child(3) { grid-column: 1 / 3; }
  .t-price-row > :nth-child(4) { grid-column: 1 / 3; }
}
@media (max-width: 560px) {
  .t-row { grid-template-columns: 36px minmax(0, 1fr); }
  .t-row-go { display: none; }
  .t-row-text { grid-column: 2 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .t-page * { transition: none !important; animation: none !important; }
}

/* ---------- donkere afsluiter tegen de footer aan ----------
   De globale footer heeft margin-top: 80px en de body is wit, dus tussen
   de donkere CTA en de even donkere footer verscheen een witte strook.
   Beide zijn #1a0d2e, dus zonder die marge lopen ze in elkaar door. */
.t-page ~ footer { margin-top: 0; }


/* ---------- kleurrijke iconen per rij ----------
   Elke dienst krijgt een eigen tint uit de paars-magenta familie plus twee
   naburige tinten, zodat de lijst kleur heeft zonder van de huisstijl af te
   wijken. De cijfers verdwijnen, het icoon draagt de kleur. */
.t-row-mark {
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; flex-shrink: 0;
}
.t-row-mark.c1 { background: linear-gradient(140deg, #7c3aed, #a855f7); }
.t-row-mark.c2 { background: linear-gradient(140deg, #2563eb, #7c3aed); }
.t-row-mark.c3 { background: linear-gradient(140deg, #d946ef, #f472b6); }
.t-row-mark.c4 { background: linear-gradient(140deg, #0d9488, #22c55e); }
.t-row-mark.c5 { background: linear-gradient(140deg, #ea580c, #f59e0b); }
.t-row-mark.c6 { background: linear-gradient(140deg, #6d28d9, #d946ef); }
.t-row { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.35fr) auto; align-items: start; }
.t-row-title { align-self: center; }
.t-row-text { align-self: center; }

/* ---------- scroll-reveal ----------
   De hero heeft bewust GEEN reveal: die mag niet achter JavaScript
   verdwijnen, dat kostte eerder 7,7s LCP op mobiel.
   Rijen binnen één lijst komen trapsgewijs binnen via --i, secties
   krijgen een gewone opkomst. Alles valt terug op zichtbaar zodra
   .reveal-done op <html> staat (het vangnet in main.js). */
.reveal-row { opacity: 1; transform: none; }
.js .reveal-row {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal-row.visible { opacity: 1; transform: translateY(0); }

/* de casebeelden komen iets anders binnen dan de tekstblokken, zodat het
   niet zes keer dezelfde beweging is */
.js .t-case.reveal { transform: translateY(24px); }
.js .t-case.reveal .t-case-media img { transform: scale(0.97); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.js .t-case.reveal.visible .t-case-media img { transform: scale(1); }

/* panelen schuiven niet, die faden alleen: een groot gekleurd vlak dat
   omhoog schuift trekt te veel aandacht naar de beweging zelf */
.js .t-panel.reveal { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-row, .js .t-case.reveal, .js .t-case.reveal .t-case-media img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================================================
   MOBIELE REGELS ACHTERAAN
   Ze stonden eerder in het bestand dan de kleuren- en icoonregels, en een
   latere gewone regel wint van een eerdere media query. Daardoor hield de
   .t-row op mobiel zijn vier desktopkolommen en werd de tekst tot een lint
   van twee woorden breed geperst. Deze query hoort dus ACHTERAAN te staan.
   ============================================================ */
@media (max-width: 900px) {
  .t-row {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: 6px; align-items: center;
    padding: clamp(20px, 4vw, 28px) 0;
  }
  .t-row-title { font-size: clamp(19px, 5vw, 24px); }
  .t-row-text { grid-column: 2 / 3; font-size: 15px; }
  .t-row-go { display: none; }
  .t-row-mark { width: 40px; height: 40px; font-size: 21px; border-radius: 11px !important; }

  /* prijsrijen: naam en prijs op één regel, de rest eronder, knop over de
     volle breedte met de tekst gecentreerd */
  .t-price-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .t-price-row > :nth-child(3) { grid-column: 1 / 3; }
  .t-price-row > :nth-child(4) { grid-column: 1 / 3; width: 100%; justify-content: center; text-align: center; }
}

/* ---------- hero-animatie ----------
   Pure CSS, dus hij speelt af zodra de pagina rendert en hangt niet aan
   JavaScript. De H1 animeert ALLEEN transform en houdt opacity 1: zodra je
   de kop achter een fade zet, telt hij niet meer mee voor de LCP en dat
   kostte eerder 7,7s op mobiel. */
@keyframes tHeroRise { from { transform: translateY(18px); } to { transform: translateY(0); } }
@keyframes tHeroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tHeroBeeld { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.t-hero h1 { animation: tHeroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.t-hero .t-lede { animation: tHeroFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.t-hero .t-lede + p { animation: tHeroFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.t-hero .t-lede + p + div { animation: tHeroFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.t-collage { animation: tHeroBeeld 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }

@media (prefers-reduced-motion: reduce) {
  .t-hero h1, .t-hero .t-lede, .t-hero .t-lede + p,
  .t-hero .t-lede + p + div, .t-collage { animation: none; }
}

/* ---------- hero vult het scherm ----------
   73px is de nav (72px + 1px rand). svh in plaats van vh, want vh telt op
   mobiel de adresbalk mee en dan valt de knop net onder de vouw.
   Alleen als er ook echt ruimte voor is: onder 700px hoog zou het de tekst
   samendrukken, dus daar houdt de hero zijn gewone hoogte. */
@media (min-height: 700px) {
  .t-hero {
    min-height: calc(100svh - 73px);
    display: flex; align-items: center;
    padding-top: clamp(32px, 4vw, 64px);
    padding-bottom: clamp(40px, 5vw, 80px);
  }
  .t-hero > .t-wrap { width: 100%; }
}