/* ── FONT DISPLAY ── */
@font-face { font-family:'DM Serif Display'; font-display:swap; }
@font-face { font-family:'DM Sans'; font-display:swap; }

/* ── RESET ── */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    img,svg{display:block;max-width:100%}

    /* ── TOKENS — LIGHT ── */
    :root {
      --ink:          #0f1117;
      --paper:        #f7f5f1;
      --mist:         #e8e5df;
      --surface:      #ffffff;
      --accent:       #2356e8;
      --accent-h:     #1a45c7;
      --accent-light: #eef1fd;
      --mid:          #6b6d76;
      --serif:        'DM Serif Display',Georgia,serif;
      --sans:         'DM Sans',system-ui,sans-serif;
      --nav-bg:       rgba(247,245,241,0.92);
      --footer-bg:    #0f1117;
      --footer-text:  rgba(237,234,228,.45);
      --footer-hover: #edeae4;
      --wa:           #25d366;
      --radius:       4px;
      --transition:   .22s ease;
    }

    /* ── TOKENS — DARK ── */
    body.dark {
      --ink:          #edeae4;
      --paper:        #13151a;
      --mist:         #252830;
      --surface:      #1c1f27;
      --accent:       #5580ff;
      --accent-h:     #7a9bff;
      --accent-light: #1a2240;
      --mid:          #8b8e9a;
      --nav-bg:       rgba(19,21,26,0.94);
      --footer-bg:    #09090d;
      --footer-text:  rgba(237,234,228,.35);
      --footer-hover: #edeae4;
      /* About stays dark but slightly lighter than page */
    }

/* Mirrors body.dark for instant theme apply before JS (prevents flash) */
html[data-theme="dark"] body {
  background: #13151a;
  color: #edeae4;
}

    /* ── BASE ── */
    html { scroll-behavior:smooth; scroll-padding-top:5rem; font-size:16px; }
    body {
      background:var(--paper); color:var(--ink);
      font-family:var(--sans); font-weight:300; line-height:1.7;
      transition:background var(--transition),color var(--transition);
      -webkit-font-smoothing:antialiased;
    }
    section { scroll-margin-top:5rem; padding:7rem 5vw; }
    .section-inner { max-width:1100px; margin:0 auto; }
    .divider { height:1px; background:var(--mist); max-width:1100px; margin:0 auto; }
    .section-label {
      font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
      color:var(--accent); font-weight:500;
      display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem;
    }
    .section-label::before { content:''; display:block; width:20px; height:1px; background:var(--accent); }
    .section-title {
      font-family:var(--serif); font-size:clamp(2rem,3.5vw,3rem);
      line-height:1.1; letter-spacing:-.02em; max-width:600px;
    }
    .section-title em { font-style:italic; color:var(--accent); }

    /* ── BUTTONS ── */
    .btn-primary {
      background:var(--ink); color:var(--paper);
      padding:.85rem 2rem; border:none; cursor:pointer;
      font-family:var(--sans); font-size:.9rem; font-weight:400;
      letter-spacing:.04em; border-radius:var(--radius);
      text-decoration:none; display:inline-block;
      transition:background var(--transition),transform .15s;
      will-change:transform;
    }
    .btn-primary:hover { background:var(--accent-h); transform:translateY(-1px); }
    .btn-ghost {
      color:var(--ink); padding:.85rem 2rem;
      border:1px solid var(--mist); background:transparent;
      font-family:var(--sans); font-size:.9rem; font-weight:400;
      letter-spacing:.04em; border-radius:var(--radius);
      text-decoration:none; display:inline-block;
      transition:border-color var(--transition),color var(--transition);
    }
    .btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

    /* ── NAV ── */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:100;
      display:flex; align-items:center; justify-content:space-between;
      padding:1rem 5vw; gap:1rem;
      background:var(--nav-bg); backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid var(--mist);
      animation:fadeDown .5s ease both;
    }
    .logo {
      font-family:var(--serif); font-size:1.2rem;
      letter-spacing:-.01em; color:var(--ink); text-decoration:none; flex-shrink:0;
    }
    .logo span { color:var(--accent); }
    .nav-links {
      list-style:none; display:flex; gap:1rem;
      align-items:center; flex:1; justify-content:center;
    }
    .nav-links a {
      text-decoration:none; font-size:.8rem; font-weight:400;
      color:var(--mid); letter-spacing:.02em; white-space:nowrap;
      transition:color var(--transition);
    }
    .nav-links a:hover { color:var(--ink); }
    .nav-av {
      border:1px solid var(--mist) !important; padding:.35rem .9rem;
      border-radius:var(--radius);
      transition:border-color var(--transition),color var(--transition);
    }
    .nav-av:hover { border-color:var(--accent) !important; color:var(--accent) !important; }
    .nav-controls { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

    /* Theme slider */
    .theme-toggle { display:flex; align-items:center; gap:.45rem; cursor:pointer; }
    .theme-toggle .icon { font-size:.8rem; line-height:1; user-select:none; }
    .theme-slider { position:relative; width:34px; height:19px; }
    .theme-slider input { opacity:0; width:0; height:0; position:absolute; }
    .theme-track {
      position:absolute; inset:0; border-radius:20px;
      background:var(--mist); transition:background var(--transition);
    }
    .theme-slider input:checked + .theme-track { background:var(--accent); }
    .theme-track::after {
      content:''; position:absolute; top:3px; left:3px;
      width:13px; height:13px; border-radius:50%;
      background:var(--surface); transition:transform var(--transition);
      box-shadow:0 1px 3px rgba(0,0,0,.2);
    }
    .theme-slider input:checked + .theme-track::after { transform:translateX(15px); }

    /* Language switch */
    .lang-switch {
      display:flex; align-items:center;
      border:1px solid var(--mist); border-radius:var(--radius); overflow:hidden;
    }
    .lang-switch button {
      background:none; border:none; cursor:pointer;
      font-family:var(--sans); font-size:.72rem; font-weight:500;
      letter-spacing:.08em; padding:.32rem .6rem;
      color:var(--mid); transition:background .15s,color .15s;
    }
    .lang-switch button.active { background:var(--accent); color:#fff; }
    .lang-switch button:not(.active):hover { background:var(--accent-light); color:var(--accent); }

    /* ── WHATSAPP ── */
    .wa-btn {
      position:fixed; bottom:1.75rem; right:1.75rem; z-index:200;
      width:54px; height:54px; border-radius:50%;
      background:var(--wa); display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 18px rgba(37,211,102,.4);
      text-decoration:none; transition:transform .2s,box-shadow .2s;
      will-change:transform;
    }
    .wa-btn:hover { transform:scale(1.08); box-shadow:0 6px 24px rgba(37,211,102,.5); }
    .wa-btn svg { width:26px; height:26px; fill:#fff; }
    .wa-tooltip {
      position:absolute; right:64px; top:50%; transform:translateY(-50%);
      background:var(--ink); color:var(--paper);
      font-family:var(--sans); font-size:.72rem; white-space:nowrap;
      padding:.35rem .75rem; border-radius:3px;
      opacity:0; pointer-events:none; transition:opacity .2s;
    }
    .wa-btn:hover .wa-tooltip { opacity:1; }

    /* ── HERO ── */
    #hero { min-height:100vh; display:grid; place-items:center; padding:10rem 5vw 6rem; }
    .hero-grid { display:grid; grid-template-columns:1fr; max-width:680px; width:100%; }
    .hero-label {
      font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
      color:var(--accent); font-weight:500;
      display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem;
      opacity:0; animation:fadeUp .6s .15s ease both;
    }
    .hero-label::before { content:''; display:block; width:22px; height:1px; background:var(--accent); }
    .hero-title {
      font-family:var(--serif); font-size:clamp(2.6rem,5vw,4.2rem);
      line-height:1.08; letter-spacing:-.02em;
      opacity:0; animation:fadeUp .6s .28s ease both;
    }
    .hero-title em { font-style:italic; color:var(--accent); }
    .hero-sub {
      margin-top:1.6rem; font-size:1rem; color:var(--mid);
      opacity:0; animation:fadeUp .6s .42s ease both;
    }
    .hero-actions {
      margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap;
      opacity:0; animation:fadeUp .6s .56s ease both;
    }

    /* ── SERVICES ── */
    #services { background:var(--surface); }
    .services-header { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:3.5rem; }
    .services-desc { color:var(--mid); max-width:340px; font-size:.95rem; }
    .services-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:1.5px; background:var(--mist);
      border:1.5px solid var(--mist); border-radius:var(--radius); overflow:hidden;
    }
    .service-card { background:var(--surface); padding:2.2rem; transition:background var(--transition); }
    .service-card:hover { background:var(--accent-light); }
    .service-icon {
      width:42px; height:42px; background:var(--paper);
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      margin-bottom:1.3rem; font-size:1.1rem;
    }
    .service-card h3 { font-family:var(--serif); font-size:1.2rem; margin-bottom:.7rem; letter-spacing:-.01em; }
    .service-card p { font-size:.875rem; color:var(--mid); line-height:1.6; }
    .service-link {
      display:inline-flex; align-items:center; gap:.4rem;
      margin-top:1.3rem; font-size:.78rem; font-weight:500;
      color:var(--accent); letter-spacing:.05em; text-transform:uppercase;
      text-decoration:none; transition:gap var(--transition);
    }
    .service-link:hover { gap:.7rem; }
    .service-link::after { content:'→'; }

    /* ── PARTICULIEREN ── */
    #particulieren { background:var(--paper); }
    .part-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3.5rem; }
    .part-body p { color:var(--mid); font-size:.95rem; line-height:1.8; margin-bottom:1.1rem; }
    .part-bullets { list-style:none; margin:.4rem 0 1.8rem; }
    .part-bullets li { display:flex; align-items:flex-start; gap:.7rem; font-size:.9rem; margin-bottom:.7rem; color:var(--ink); }
    .part-bullets li::before { content:'✓'; color:var(--accent); font-weight:600; flex-shrink:0; margin-top:.1rem; }
    .part-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .part-card {
      background:var(--surface); border:1px solid var(--mist);
      border-radius:var(--radius); padding:1.4rem; position:relative; overflow:hidden;
    }
    .part-card::after {
      content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
      background:var(--accent); transform:scaleX(0); transform-origin:left;
      transition:transform .32s ease;
    }
    .part-card:hover::after { transform:scaleX(1); }
    .part-card .pc-icon { font-size:1.3rem; margin-bottom:.7rem; display:block; }
    .part-card h4 { font-family:var(--serif); font-size:1rem; margin-bottom:.35rem; }
    .part-card p { font-size:.8rem; color:var(--mid); line-height:1.6; }

    /* ── ABOUT ── */
    #about { background:var(--paper); }
    .about-body { font-size:.975rem; color:var(--mid); line-height:1.85; max-width:680px; }
    .about-body p + p { margin-top:1.1rem; }

    

    /* Team card */
    .team { margin-top:3.5rem; }
    .team-label {
      font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
      color:var(--mid); font-weight:500;
      display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem;
    }
    .team-label::before { content:''; display:block; width:18px; height:1px; background:var(--mist); }
    .team-card {
      display:flex; align-items:center; gap:1.6rem;
      background:rgba(255,255,255,.05); border:1px solid var(--mist);
      border-radius:var(--radius); padding:1.4rem 1.8rem;
      text-decoration:none; color:inherit; max-width:540px;
      transition:background var(--transition),border-color var(--transition);
    }
    .team-card:hover { background:rgba(255,255,255,.09); border-color:rgba(122,155,255,.4); }
    .team-avatar {
      width:52px; height:52px; border-radius:50%;
      background:var(--accent); color:#fff;
      font-family:var(--serif); font-size:1.1rem;
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .team-info { flex:1; min-width:0; }
    .team-name { font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin-bottom:.2rem; }
    .team-role { font-size:.8rem; color:var(--mid); margin-bottom:.55rem; }
    .team-tags { display:flex; gap:.35rem; flex-wrap:wrap; }
    .team-tags span { font-size:.68rem; font-weight:500; background:rgba(85,128,255,.18); color:#7a9bff; padding:.18rem .55rem; border-radius:2px; }
    .team-arrow { font-size:1rem; color:var(--mist); flex-shrink:0; transition:transform var(--transition),color var(--transition); }
    .team-card:hover .team-arrow { transform:translateX(4px); color:#7a9bff; }

    /* ── CONTACT ── */
    #contact { background:var(--paper); }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:3.5rem; align-items:start; }
    .contact-info p { color:var(--mid); font-size:.95rem; margin-bottom:1.8rem; }
    .contact-detail { display:flex; align-items:center; gap:.9rem; margin-bottom:.9rem; font-size:.88rem; }
    .contact-detail .icon {
      width:34px; height:34px; background:var(--accent-light);
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:.9rem; flex-shrink:0;
    }
    .contact-detail a { color:var(--ink); text-decoration:none; transition:color var(--transition); }
    .contact-detail a:hover { color:var(--accent); }
    form { display:flex; flex-direction:column; gap:.9rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
    label { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); display:block; margin-bottom:.35rem; }
    input,textarea,select {
      width:100%; background:var(--surface); border:1px solid var(--mist);
      border-radius:var(--radius); padding:.8rem 1rem;
      font-family:var(--sans); font-size:.9rem; color:var(--ink);
      outline:none; transition:border-color var(--transition);
    }
    input:focus,textarea:focus,select:focus { border-color:var(--accent); }
    textarea { resize:vertical; min-height:120px; }

    /* ── FOOTER ── */
    footer {
      background:var(--footer-bg); color:var(--footer-text);
      padding:2.2rem 5vw; display:flex; justify-content:space-between;
      align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem;
    }
    footer .logo { color:var(--footer-hover); }
    footer a { color:var(--footer-text); text-decoration:none; transition:color var(--transition); }
    footer a:hover { color:var(--footer-hover); }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease,transform .55s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ── i18n ── */
    .en { display:none !important; }
    body.lang-en .nl { display:none !important; }
    body.lang-en p.en,body.lang-en h1.en,body.lang-en h2.en,
    body.lang-en h3.en,body.lang-en h4.en,body.lang-en ul.en,
    body.lang-en div.en { display:block !important; }
    body.lang-en a.en,body.lang-en span.en,body.lang-en li.en { display:inline !important; }
    body.lang-en .section-label.en { display:flex !important; }

    /* ── RESPONSIVE ── */
    @media (max-width:900px) {
      .nav-links { gap:.7rem; }
      .nav-links a { font-size:.75rem; }
    }
    @media (max-width:768px) {
      .nav-links { display:none; }
      .services-grid,.part-grid,.contact-grid { grid-template-columns:1fr; }
      .services-header { flex-direction:column; }
      .form-row,.part-cards { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:480px) {
      .part-cards,.form-row { grid-template-columns:1fr; }
    }

/* ════════════════════════════════════════════
   SHARED SUB-PAGE STYLES (daniel + voorwaarden)
   ════════════════════════════════════════════ */

/* Nav back-link */
.back-link { font-size:.875rem; color:var(--mid); text-decoration:none; transition:color .22s ease; white-space:nowrap; }
.back-link::before { content:'← '; }
.back-link:hover { color:var(--ink); }

/* Page header */
.page-header { padding:9rem 5vw 3.5rem; max-width:1100px; margin:0 auto; }
.page-label { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:500; display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.page-label::before { content:''; display:block; width:20px; height:1px; background:var(--accent); }
.page-title { font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.5rem); line-height:1.08; letter-spacing:-.02em; margin-bottom:2rem; }
.page-title em { font-style:italic; color:var(--accent); }

/* ── DANIEL ── */
.profile-hero { padding:9rem 5vw 5rem; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:3.5rem; align-items:center; border-bottom:1px solid var(--mist); }
.avatar { width:120px; height:120px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--serif); font-size:2.6rem; display:flex; align-items:center; justify-content:center; letter-spacing:-.02em; flex-shrink:0; position:relative; }
.avatar::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent); opacity:.25; }
.profile-label { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:500; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.profile-label::before { content:''; display:block; width:20px; height:1px; background:var(--accent); }
.profile-name { font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.02em; margin-bottom:.5rem; }
.profile-name em { font-style:italic; color:var(--accent); }
.profile-handle { font-size:.82rem; color:var(--mid); letter-spacing:.04em; font-weight:400; margin-bottom:1.25rem; }
.profile-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.tag { font-size:.75rem; font-weight:500; letter-spacing:.05em; background:var(--accent-light); color:var(--accent); padding:.3rem .85rem; border-radius:2px; }
.page-body { max-width:1100px; margin:0 auto; padding:5rem 5vw 6rem; display:flex; flex-direction:column; gap:5rem; }
.bio-text { max-width:680px; }
.bio-text p { font-size:.975rem; color:var(--mid); line-height:1.85; margin-bottom:1rem; }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--mist); border:1.5px solid var(--mist); border-radius:4px; overflow:hidden; }
.skill-card { background:var(--surface); padding:2rem; transition:background .22s ease; }
.skill-card:hover { background:var(--accent-light); }
.skill-icon { font-size:1.4rem; margin-bottom:1rem; display:block; }
.skill-card h3 { font-family:var(--serif); font-size:1.1rem; margin-bottom:.5rem; letter-spacing:-.01em; }
.skill-card p { font-size:.85rem; color:var(--mid); line-height:1.65; }
.skill-bar-list { display:flex; flex-direction:column; gap:1rem; margin-top:2.5rem; }
.skill-bar-item label { display:flex; justify-content:space-between; font-size:.82rem; color:var(--mid); margin-bottom:.35rem; }
.skill-bar-item label span { color:var(--accent); font-weight:500; }
.bar-track { height:4px; background:var(--mist); border-radius:2px; overflow:hidden; }
.bar-fill { height:100%; background:var(--accent); border-radius:2px; width:0; transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.bar-fill.animated { width:var(--w); }
.hobbies-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.hobby-card { background:var(--surface); border:1px solid var(--mist); border-radius:4px; padding:1.75rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.hobby-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.hobby-card:hover::after { transform:scaleX(1); }
.hobby-icon { font-size:2rem; margin-bottom:.75rem; display:block; }
.hobby-card h4 { font-family:var(--serif); font-size:1rem; margin-bottom:.4rem; }
.hobby-card p { font-size:.8rem; color:var(--mid); line-height:1.6; }

/* ── VOORWAARDEN ── */
.identity-box { background:var(--accent-light); border-left:3px solid var(--accent); padding:1.5rem 1.75rem; border-radius:0 4px 4px 0; display:inline-block; margin-bottom:3rem; }
.identity-box h3 { font-family:var(--serif); font-size:1rem; margin-bottom:.9rem; }
.identity-box table { border-collapse:collapse; font-size:.875rem; }
.identity-box td { padding:.28rem .75rem .28rem 0; vertical-align:top; }
.identity-box td.label { color:var(--mid); white-space:nowrap; min-width:200px; }
.toc-section { background:var(--surface); border:1px solid var(--mist); border-radius:6px; padding:2rem 2.25rem; margin-bottom:3rem; }
.toc-section h2 { font-family:var(--serif); font-size:1.05rem; margin-bottom:1.25rem; }
.toc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.6rem; }
.toc-btn { display:flex; align-items:center; gap:.75rem; padding:.65rem .9rem; border-radius:4px; background:var(--paper); border:1px solid var(--mist); text-decoration:none; color:var(--ink); font-size:.83rem; transition:background .18s,border-color .18s,color .18s; }
.toc-btn:hover,.toc-btn.active { background:var(--accent-light); border-color:var(--accent); color:var(--accent); }
.toc-num { width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:.68rem; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toc-btn.intro-btn .toc-num { background:var(--mid); }
.av-main { max-width:1100px; margin:0 auto; padding:0 5vw 6rem; }
.av-module { margin-bottom:4rem; scroll-margin-top:5.5rem; }
.av-module-header { display:flex; align-items:center; gap:1rem; padding-bottom:1rem; margin-bottom:1.75rem; border-bottom:1px solid var(--mist); }
.av-module-badge { width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-size:.75rem; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av-module-badge.intro { background:var(--mid); }
.av-module-title { font-family:var(--serif); font-size:1.45rem; letter-spacing:-.01em; }
.av-article { margin-bottom:2rem; padding-left:1rem; border-left:2px solid var(--mist); }
.av-article h4 { font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem; }
.av-article p { font-size:.875rem; color:var(--mid); line-height:1.85; margin-bottom:.45rem; }
.av-intro { margin-bottom:3rem; scroll-margin-top:5.5rem; }
.av-intro p { font-size:.9rem; color:var(--mid); line-height:1.85; margin-bottom:.75rem; }
.av-intro ul { padding-left:1.2rem; }
.av-intro ul li { font-size:.875rem; color:var(--mid); line-height:1.75; margin-bottom:.2rem; }

/* ── SUB-PAGE RESPONSIVE ── */
@media (max-width:768px) {
  .profile-hero { grid-template-columns:1fr; text-align:center; }
  .profile-label,.profile-tags { justify-content:center; }
  .avatar { margin:0 auto; }
  .skills-grid { grid-template-columns:1fr; }
  .hobbies-grid { grid-template-columns:1fr 1fr; }
  .toc-grid { grid-template-columns:1fr 1fr; }
  .identity-box { display:block; }
}

    /* ── BACK TO TOP ── */
    .back-to-top {
      position:fixed; bottom:5.5rem; right:1.75rem; z-index:200;
      width:42px; height:42px; border-radius:50%;
      background:var(--surface); color:var(--ink);
      border:1px solid var(--mist);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; text-decoration:none;
      box-shadow:0 2px 12px rgba(0,0,0,.12);
      opacity:0; pointer-events:none;
      transform:translateY(8px);
      transition:opacity .25s ease, transform .25s ease, background .2s, border-color .2s;
      font-size:1rem; line-height:1;
    }
    .back-to-top.visible {
      opacity:1; pointer-events:auto; transform:translateY(0);
    }
    .back-to-top:hover {
      background:var(--accent); color:#fff; border-color:var(--accent);
    }
/* ── CONTENT VISIBILITY (paint performance) ── */
#services, #particulieren, #about, #contact {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}