/* ============================================================
   Tjep's Analytics-agent — animatie
   Stylesheet-deel voor de OpenContent template.
   - Los bestand: geef het dezelfde naam als de template en zet het in
     dezelfde map (template.cshtml + template.css). Dan laadt DNN het als
     stylesheet en komt Razor er niet aan.
   - Plak deze CSS NIET in de cshtml: de at-regels (import, container,
     keyframes) laten Razor struikelen.
   - Laad je Spectral + Hanken Grotesk al site-breed? Haal de import weg.
   - Accentkleur wijzigen: --ta-a en --ta-tint op .ta-stage.
   - Alles schaalt mee met de containerbreedte (--u = 1/1080 van de breedte).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,500;0,600;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* --- basis ------------------------------------------------- */
.ta-anim{width:100%;container-type:inline-size}
.ta-anim *{box-sizing:border-box}
.ta-anim .ta-stage{
  --u:0.0925926cqw;
  --ta-a:#28A745;
  --ta-tint:rgb(234,246,236);
  --ta-ink:#15120E;
  --ta-ink60:#6E6A64;
  --ta-ink40:#8A857D;
  --ta-faint:#B4AFA6;
  --ta-border:#ECE9E3;
  --ta-track:#F0EDE7;
  --ta-serif:'Spectral',Georgia,serif;
  position:relative;width:100%;background:transparent;overflow:hidden;
  padding:0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ta-ink)}
.ta-anim .ta-board{display:flex;flex-direction:column}

/* --- kop --------------------------------------------------- */
.ta-anim .ta-eyebrow{display:flex;align-items:center;gap:calc(10*var(--u));margin-bottom:calc(11*var(--u))}
.ta-anim .ta-dot{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:calc(3*var(--u));background:var(--ta-a)}
.ta-anim .ta-brand{font-size:calc(13*var(--u));font-weight:800;letter-spacing:.2em;color:var(--ta-a);text-transform:uppercase}
.ta-anim .ta-agent{font-size:calc(13*var(--u));font-weight:700;letter-spacing:.2em;color:var(--ta-faint);text-transform:uppercase}
.ta-anim .ta-title{font-family:var(--ta-serif);font-size:calc(44*var(--u));font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
.ta-anim .ta-sub{font-size:calc(18.5*var(--u));line-height:1.45;color:var(--ta-ink60);margin:calc(11*var(--u)) 0 0;max-width:calc(880*var(--u))}

/* --- sectiekop --------------------------------------------- */
.ta-anim .ta-kicker{display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(24*var(--u))}
.ta-anim .ta-kicker-label{font-size:calc(13.5*var(--u));font-weight:800;letter-spacing:.14em;color:var(--ta-a)}
.ta-anim .ta-rule{flex:1;height:1px;background:#E4E1DB}

/* --- funnel-bouwer ----------------------------------------- */
.ta-anim .ta-build{display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(14*var(--u));flex-wrap:wrap}
.ta-anim .ta-node{display:flex;align-items:center;gap:calc(8*var(--u));background:#fff;border:1px solid var(--ta-border);border-radius:calc(10*var(--u));padding:calc(9*var(--u)) calc(13*var(--u));box-shadow:0 calc(5*var(--u)) calc(14*var(--u)) rgba(20,18,14,.05)}
.ta-anim .ta-node-num{font-size:calc(11.5*var(--u));font-weight:800;color:var(--ta-a)}
.ta-anim .ta-node-label{font-size:calc(14*var(--u));font-weight:600}
.ta-anim .ta-link{width:calc(20*var(--u));height:1.5px;background:#DCD8D1;border-radius:1px}
.ta-anim .ta-add{display:flex;align-items:center;gap:calc(6*var(--u));border:1.5px dashed #CDE7D6;background:var(--ta-tint);color:var(--ta-a);border-radius:calc(10*var(--u));padding:calc(9*var(--u)) calc(13*var(--u));font-size:calc(13.5*var(--u));font-weight:700}
.ta-anim .ta-add svg{width:calc(12*var(--u));height:calc(12*var(--u));flex-shrink:0}

/* --- panelen ----------------------------------------------- */
.ta-anim .ta-panel{margin-top:calc(15*var(--u));background:#fff;border:1px solid var(--ta-border);border-radius:calc(18*var(--u));padding:calc(20*var(--u)) calc(24*var(--u));box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(20,18,14,.05)}
.ta-anim .ta-panel-head{display:flex;align-items:center;gap:calc(12*var(--u));flex-wrap:wrap}
.ta-anim .ta-panel-label{font-size:calc(12*var(--u));font-weight:800;letter-spacing:.12em;color:var(--ta-ink40);text-transform:uppercase}
.ta-anim .ta-devices{display:flex;gap:calc(6*var(--u));margin-left:auto}
.ta-anim .ta-dev{display:flex;align-items:center;gap:calc(6*var(--u));border:1px solid var(--ta-border);border-radius:999px;padding:calc(5*var(--u)) calc(12*var(--u));font-size:calc(12.5*var(--u));font-weight:600;color:var(--ta-ink40)}
.ta-anim .ta-dev svg{width:calc(12*var(--u));height:calc(12*var(--u));flex-shrink:0}
.ta-anim .ta-dev--on{border-color:var(--ta-a);background:var(--ta-tint);color:var(--ta-a);font-weight:700}

/* --- funnel-stappen ---------------------------------------- */
.ta-anim .ta-steps{display:flex;flex-direction:column;gap:calc(11*var(--u));margin-top:calc(15*var(--u))}
.ta-anim .ta-step{display:flex;align-items:center;gap:calc(12*var(--u))}
.ta-anim .ta-step-label{width:calc(196*var(--u));font-size:calc(13.5*var(--u));font-weight:700}
.ta-anim .ta-step-track{flex:1;height:calc(22*var(--u));background:var(--ta-track);border-radius:calc(6*var(--u));position:relative;overflow:hidden}
.ta-anim .ta-step-fill{position:absolute;left:0;top:0;bottom:0;background:var(--ta-a);border-radius:calc(6*var(--u))}
.ta-anim .ta-step-fill--weak{background:repeating-linear-gradient(135deg,#28A745 0,#28A745 calc(7*var(--u)),#4FBE6C calc(7*var(--u)),#4FBE6C calc(14*var(--u)))}
.ta-anim .ta-step-val{width:calc(64*var(--u));font-size:calc(13.5*var(--u));font-weight:700;color:var(--ta-ink60);text-align:right}
.ta-anim .ta-flag{display:flex;align-items:center;gap:calc(7*var(--u));margin-top:calc(14*var(--u));padding-top:calc(13*var(--u));border-top:1px solid var(--ta-border);font-size:calc(14*var(--u));color:var(--ta-ink60)}
.ta-anim .ta-flag svg{width:calc(14*var(--u));height:calc(14*var(--u));flex-shrink:0;color:var(--ta-a)}
.ta-anim .ta-flag strong{color:var(--ta-ink);font-weight:700}

/* --- tussenzin --------------------------------------------- */
.ta-anim .ta-conv{display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));padding:calc(7*var(--u)) 0}
.ta-anim .ta-conv svg{width:calc(13*var(--u));height:calc(13*var(--u));flex-shrink:0;color:var(--ta-a)}
.ta-anim .ta-conv-label{font-family:var(--ta-serif);font-style:italic;font-size:calc(15*var(--u));color:var(--ta-ink40)}

/* --- heatmaps ---------------------------------------------- */
.ta-anim .ta-heat{display:grid;grid-template-columns:1fr 1fr;gap:calc(15*var(--u));margin-top:calc(14*var(--u))}
.ta-anim .ta-hcard{background:#fff;border:1px solid var(--ta-border);border-radius:calc(16*var(--u));padding:calc(18*var(--u));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(20,18,14,.05)}
.ta-anim .ta-hhead{display:flex;align-items:center;gap:calc(9*var(--u))}
.ta-anim .ta-hicon{width:calc(30*var(--u));height:calc(30*var(--u));border-radius:calc(9*var(--u));background:var(--ta-a);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ta-anim .ta-hicon svg{width:calc(16*var(--u));height:calc(16*var(--u));flex-shrink:0}
.ta-anim .ta-htitle{font-family:var(--ta-serif);font-size:calc(18*var(--u));font-weight:600}
.ta-anim .ta-hdesc{font-size:calc(12.5*var(--u));line-height:1.4;color:var(--ta-ink40);margin-top:calc(8*var(--u))}

/* scrolldiepte */
.ta-anim .ta-scroll{display:flex;gap:calc(11*var(--u));margin-top:calc(13*var(--u))}
.ta-anim .ta-page{flex:1;border:1px solid var(--ta-border);border-radius:calc(9*var(--u));overflow:hidden;display:flex;flex-direction:column}
.ta-anim .ta-band{flex:1;display:flex;align-items:center;padding:calc(9*var(--u)) calc(11*var(--u));border-bottom:1px solid rgba(255,255,255,.6);font-size:calc(12*var(--u));font-weight:700}
.ta-anim .ta-band:last-child{border-bottom:none}
.ta-anim .ta-band--1{background:#1B6E30;color:#fff}
.ta-anim .ta-band--2{background:#24853C;color:#fff}
.ta-anim .ta-band--3{background:rgba(40,167,69,.34);color:var(--ta-ink)}
.ta-anim .ta-band--4{background:rgba(40,167,69,.13);color:var(--ta-ink60)}
.ta-anim .ta-band span:last-child{margin-left:auto;font-weight:600;opacity:.85}

/* klikgedrag */
.ta-anim .ta-clicks{position:relative;margin-top:calc(13*var(--u));border:1px solid var(--ta-border);border-radius:calc(9*var(--u));padding:calc(15*var(--u));display:flex;flex-direction:column;gap:calc(9*var(--u));background:#FCFBF9}
.ta-anim .ta-skel{height:calc(9*var(--u));border-radius:calc(4*var(--u));background:var(--ta-track)}
.ta-anim .ta-skel--h{height:calc(15*var(--u));width:62%}
.ta-anim .ta-skel--s{width:84%}
.ta-anim .ta-skel--t{width:46%}
.ta-anim .ta-btnrow{display:flex;gap:calc(9*var(--u));margin-top:calc(4*var(--u))}
.ta-anim .ta-fakebtn{height:calc(26*var(--u));border-radius:calc(7*var(--u));background:var(--ta-track);flex:0 0 34%}
.ta-anim .ta-blob{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(40,167,69,.55) 0%,rgba(40,167,69,.22) 55%,rgba(40,167,69,0) 72%)}
.ta-anim .ta-blob--1{width:calc(74*var(--u));height:calc(74*var(--u));left:12%;top:6%}
.ta-anim .ta-blob--2{width:calc(108*var(--u));height:calc(108*var(--u));left:9%;bottom:2%}
.ta-anim .ta-blob--3{width:calc(56*var(--u));height:calc(56*var(--u));right:16%;top:34%}
.ta-anim .ta-blob--4{width:calc(40*var(--u));height:calc(40*var(--u));right:8%;bottom:26%}

/* --- kleine kaarten ---------------------------------------- */
.ta-anim .ta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(15*var(--u));margin-top:calc(14*var(--u))}
.ta-anim .ta-card{background:#fff;border:1px solid var(--ta-border);border-radius:calc(14*var(--u));padding:calc(15*var(--u));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(20,18,14,.05)}
.ta-anim .ta-cicon{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(10*var(--u));background:var(--ta-a);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:calc(9*var(--u))}
.ta-anim .ta-cicon svg{width:calc(18*var(--u));height:calc(18*var(--u));flex-shrink:0}
.ta-anim .ta-ctitle{font-family:var(--ta-serif);font-size:calc(16.5*var(--u));font-weight:600;line-height:1.15}
.ta-anim .ta-cdesc{font-size:calc(12.5*var(--u));line-height:1.4;color:var(--ta-ink40);margin-top:calc(3*var(--u))}

/* --- animatie (12s, speelt één keer af bij laden) ----------- */
.ta-anim .ta-board,
.ta-anim .ta-eyebrow,.ta-anim .ta-title,.ta-anim .ta-sub,
.ta-anim .ta-kicker,.ta-anim .ta-node,.ta-anim .ta-link,.ta-anim .ta-add,
.ta-anim .ta-panel,.ta-anim .ta-dev,.ta-anim .ta-step-fill,.ta-anim .ta-step-val,
.ta-anim .ta-flag,.ta-anim .ta-conv,.ta-anim .ta-hcard,.ta-anim .ta-band,
.ta-anim .ta-blob,.ta-anim .ta-card{
  animation-duration:12s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
.ta-anim .ta-blob,.ta-anim .ta-step-val,.ta-anim .ta-dev{animation-timing-function:cubic-bezier(.34,1.56,.64,1)}

.ta-anim .ta-board{animation-name:taa-board}
.ta-anim .ta-eyebrow{animation-name:taa-eyebrow}
.ta-anim .ta-title{animation-name:taa-title}
.ta-anim .ta-sub{animation-name:taa-sub}
.ta-anim .ta-kicker--one{animation-name:taa-k1}
.ta-anim .ta-kicker--two{animation-name:taa-k2}
.ta-anim .ta-kicker--three{animation-name:taa-k3}
.ta-anim .ta-node--1{animation-name:taa-n0}
.ta-anim .ta-node--2{animation-name:taa-n1}
.ta-anim .ta-node--3{animation-name:taa-n2}
.ta-anim .ta-node--4{animation-name:taa-n3}
.ta-anim .ta-link--1{animation-name:taa-l0}
.ta-anim .ta-link--2{animation-name:taa-l1}
.ta-anim .ta-link--3{animation-name:taa-l2}
.ta-anim .ta-add{animation-name:taa-add}
.ta-anim .ta-panel{animation-name:taa-panel}
.ta-anim .ta-dev--1{animation-name:taa-d0}
.ta-anim .ta-dev--2{animation-name:taa-d1}
.ta-anim .ta-dev--3{animation-name:taa-d2}
.ta-anim .ta-step-fill--0{width:100%;animation-name:taa-s0}
.ta-anim .ta-step-fill--1{width:71%;animation-name:taa-s1}
.ta-anim .ta-step-fill--2{width:34%;animation-name:taa-s2}
.ta-anim .ta-step-fill--3{width:22%;animation-name:taa-s3}
.ta-anim .ta-step-val--0{animation-name:taa-v0}
.ta-anim .ta-step-val--1{animation-name:taa-v1}
.ta-anim .ta-step-val--2{animation-name:taa-v2}
.ta-anim .ta-step-val--3{animation-name:taa-v3}
.ta-anim .ta-flag{animation-name:taa-flag}
.ta-anim .ta-conv{animation-name:taa-conv}
.ta-anim .ta-hcard--1{animation-name:taa-h0}
.ta-anim .ta-hcard--2{animation-name:taa-h1}
.ta-anim .ta-band--1{animation-name:taa-b0}
.ta-anim .ta-band--2{animation-name:taa-b1}
.ta-anim .ta-band--3{animation-name:taa-b2}
.ta-anim .ta-band--4{animation-name:taa-b3}
.ta-anim .ta-blob--1{animation-name:taa-o0}
.ta-anim .ta-blob--2{animation-name:taa-o1}
.ta-anim .ta-blob--3{animation-name:taa-o2}
.ta-anim .ta-blob--4{animation-name:taa-o3}
.ta-anim .ta-card--1{animation-name:taa-p0}
.ta-anim .ta-card--2{animation-name:taa-p1}
.ta-anim .ta-card--3{animation-name:taa-p2}

@keyframes taa-board{0%{opacity:0}2.917%,100%{opacity:1}}
@keyframes taa-eyebrow{0%,1.667%{opacity:0;transform:translateY(calc(10*var(--u)))}5.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-title{0%,4.167%{opacity:0;transform:translateY(calc(16*var(--u)))}9.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-sub{0%,9.167%{opacity:0;transform:translateY(calc(12*var(--u)))}14.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-k1{0%,15%{opacity:0;transform:translateY(calc(8*var(--u)))}19.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-n0{0%,18.333%{opacity:0;transform:translateY(calc(14*var(--u)))}21.667%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-l0{0%,20.833%{opacity:0;transform:scaleX(.2)}22.5%,100%{opacity:1;transform:scaleX(1)}}
@keyframes taa-n1{0%,21.25%{opacity:0;transform:translateY(calc(14*var(--u)))}24.583%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-l1{0%,23.75%{opacity:0;transform:scaleX(.2)}25.417%,100%{opacity:1;transform:scaleX(1)}}
@keyframes taa-n2{0%,24.167%{opacity:0;transform:translateY(calc(14*var(--u)))}27.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-l2{0%,26.667%{opacity:0;transform:scaleX(.2)}28.333%,100%{opacity:1;transform:scaleX(1)}}
@keyframes taa-n3{0%,27.083%{opacity:0;transform:translateY(calc(14*var(--u)))}30.417%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-add{0%,30%{opacity:0;transform:translateY(calc(10*var(--u)))}33.333%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-panel{0%,32.5%{opacity:0;transform:translateY(calc(18*var(--u)))}37.083%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-d0{0%,36.667%{opacity:0;transform:scale(.7)}39.167%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-d1{0%,37.5%{opacity:0;transform:scale(.7)}40%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-d2{0%,38.333%{opacity:0;transform:scale(.7)}40.833%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-s0{0%,39.167%{width:0}43.333%,100%{width:100%}}
@keyframes taa-s1{0%,40.833%{width:0}45%,100%{width:71%}}
@keyframes taa-s2{0%,42.5%{width:0}46.667%,100%{width:34%}}
@keyframes taa-s3{0%,44.167%{width:0}48.333%,100%{width:22%}}
@keyframes taa-v0{0%,41.667%{opacity:0;transform:scale(.7)}44.167%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-v1{0%,43.333%{opacity:0;transform:scale(.7)}45.833%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-v2{0%,45%{opacity:0;transform:scale(.7)}47.5%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-v3{0%,46.667%{opacity:0;transform:scale(.7)}49.167%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-flag{0%,49.167%{opacity:0;transform:translateY(calc(8*var(--u)))}52.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-conv{0%,53.333%{opacity:0;transform:translateY(calc(10*var(--u)))}56.667%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-k2{0%,55.833%{opacity:0;transform:translateY(calc(8*var(--u)))}59.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-h0{0%,58.333%{opacity:0;transform:translateY(calc(18*var(--u)))}62.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-h1{0%,60%{opacity:0;transform:translateY(calc(18*var(--u)))}64.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-b0{0%,62.5%{opacity:0}65%,100%{opacity:1}}
@keyframes taa-b1{0%,63.75%{opacity:0}66.25%,100%{opacity:1}}
@keyframes taa-b2{0%,65%{opacity:0}67.5%,100%{opacity:1}}
@keyframes taa-b3{0%,66.25%{opacity:0}68.75%,100%{opacity:1}}
@keyframes taa-o0{0%,65.833%{opacity:0;transform:scale(.3)}69.167%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-o1{0%,67.5%{opacity:0;transform:scale(.3)}70.833%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-o2{0%,69.167%{opacity:0;transform:scale(.3)}72.5%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-o3{0%,70.833%{opacity:0;transform:scale(.3)}74.167%,100%{opacity:1;transform:scale(1)}}
@keyframes taa-k3{0%,77.5%{opacity:0;transform:translateY(calc(8*var(--u)))}81.667%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-p0{0%,80.833%{opacity:0;transform:translateY(calc(18*var(--u)))}85%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-p1{0%,82.333%{opacity:0;transform:translateY(calc(18*var(--u)))}86.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes taa-p2{0%,83.833%{opacity:0;transform:translateY(calc(18*var(--u)))}88%,100%{opacity:1;transform:translateY(0)}}

/* --- smal (mobiel / smalle kolom) --------------------------- */
@container (max-width: 620px){
  .ta-anim .ta-stage{padding:0}
  .ta-anim .ta-title{font-size:26px;line-height:1.2}
  .ta-anim .ta-sub{font-size:15px;max-width:none}
  .ta-anim .ta-brand,.ta-anim .ta-agent,.ta-anim .ta-kicker-label{font-size:11px}
  .ta-anim .ta-dot{width:8px;height:8px;border-radius:3px}
  .ta-anim .ta-build{gap:7px}
  .ta-anim .ta-node{padding:8px 11px;border-radius:9px;gap:7px}
  .ta-anim .ta-node-label{font-size:12.5px}
  .ta-anim .ta-node-num{font-size:11px}
  .ta-anim .ta-link{display:none}
  .ta-anim .ta-add{padding:8px 11px;font-size:12px;border-radius:9px}
  .ta-anim .ta-add svg{width:11px;height:11px}
  .ta-anim .ta-panel{padding:15px;border-radius:12px;margin-top:12px}
  .ta-anim .ta-panel-label{font-size:11px}
  .ta-anim .ta-devices{margin-left:0;flex-wrap:wrap}
  .ta-anim .ta-dev{font-size:11.5px;padding:4px 10px}
  .ta-anim .ta-dev svg{width:11px;height:11px}
  .ta-anim .ta-step{gap:9px}
  .ta-anim .ta-step-label{width:96px;font-size:12px;line-height:1.2}
  .ta-anim .ta-step-track{height:18px;border-radius:5px}
  .ta-anim .ta-step-fill{border-radius:5px}
  .ta-anim .ta-step-val{width:44px;font-size:12px}
  .ta-anim .ta-flag{font-size:12.5px;gap:6px}
  .ta-anim .ta-flag svg{width:13px;height:13px}
  .ta-anim .ta-conv-label{font-size:13px}
  .ta-anim .ta-conv svg{width:12px;height:12px}
  .ta-anim .ta-heat{grid-template-columns:1fr;gap:10px}
  .ta-anim .ta-hcard{padding:14px;border-radius:12px}
  .ta-anim .ta-hicon{width:30px;height:30px;border-radius:9px}
  .ta-anim .ta-hicon svg{width:16px;height:16px}
  .ta-anim .ta-htitle{font-size:16px}
  .ta-anim .ta-hdesc{font-size:12.5px}
  .ta-anim .ta-band{font-size:11.5px;padding:9px 10px}
  .ta-anim .ta-clicks{padding:14px;gap:8px}
  .ta-anim .ta-skel{height:9px}
  .ta-anim .ta-skel--h{height:14px}
  .ta-anim .ta-fakebtn{height:24px}
  .ta-anim .ta-blob--1{width:70px;height:70px}
  .ta-anim .ta-blob--2{width:96px;height:96px}
  .ta-anim .ta-blob--3{width:54px;height:54px}
  .ta-anim .ta-blob--4{width:40px;height:40px}
  .ta-anim .ta-grid{grid-template-columns:1fr;gap:10px}
  .ta-anim .ta-card{padding:14px;border-radius:12px}
  .ta-anim .ta-cicon{width:32px;height:32px;border-radius:9px;margin-bottom:8px}
  .ta-anim .ta-cicon svg{width:17px;height:17px}
  .ta-anim .ta-ctitle{font-size:16px}
  .ta-anim .ta-cdesc{font-size:13px}
}

/* --- bewegingsvoorkeur -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ta-anim *{animation:none !important;opacity:1 !important;transform:none !important}
}