/* ============================================================
   XION LANDING v2 — assets/css/landing-v2.css
   Huisstijl-tokens uit DESIGN.md (lokale kopie; deze pagina laadt
   bewust géén tailwind.css of style.css en is licht-only).
   ============================================================ */
:root{
    --ink:        #1F0938;   /* primary-950 */
    --violet-700: #5D1EA0;
    --violet-600: #722BC4;   /* knoppen light mode */
    --violet-500: #8C44E0;
    --violet-400: #A86BF0;
    --violet-100: #F0E0FF;
    --violet-50:  #FAF3FF;
    --magenta-700:#BC2065;   /* tekst op magenta-50 (5.4:1); 600 haalde daar 4.4 */
    --magenta-600:#D32C71;
    --magenta-500:#ED4B8E;
    --magenta-100:#FFE2EE;
    --magenta-50: #FFF0F7;
    --n50:  #FAFAFB;
    --n100: #F4F1F8;
    --n200: #E5E0EA;
    --n300: #C9C2D1;
    --n400: #9D95A6;
    --n500: #726B7E;
    --n600: #564F62;
    --n800: #2A2536;
    --n900: #1A1626;
    --n950: #0E0B1A;
    --jade:    #16A37A;
    --jade-700:#0F6B53;      /* success-700: groen als tekst of onder witte letters */
    --jade-50: #ECFDF5;
    --amber:   #DB8500;
    --amber-700:#A95919;     /* warning-700: onder witte letters (5.1:1) */

    /* Contrast (WCAG AA, board #332, 23-9-2026). Kleine tekst moet 4.5:1
       halen, grote (vanaf 24px, of 18.66px vet) 3:1. Daarom:
       - op licht is --n500 het lichtste grijs voor tekst (4.9:1 op n50);
         --n400 haalt maar 2.9:1 en is alleen nog voor randen en vormen;
       - op donker (n900, n950) is --n400 het grijs voor tekst (6.1 tot
         6.7:1); --n500 haalt daar 3.5 tot 3.8:1;
       - witte letters staan nooit op --amber, --jade of --magenta-500;
       - het woordmerk "Xion." is een logo en valt buiten de eis. */

    /* Signature: asymmetrische hoeken. Work leunt links, Family gespiegeld. */
    --rx-work:   28px 6px 28px 6px;
    --rx-work-s: 12px 4px 12px 4px;
    --rx-fam:    6px 28px 6px 28px;
    --rx-fam-s:  4px 12px 4px 12px;

    /* Brand-tinted shadows — nooit puur zwart */
    --sh-lg: 0 24px 60px rgba(31,9,56,.14), 0 6px 18px rgba(31,9,56,.07);
    --sh-md: 0 12px 32px rgba(31,9,56,.12);
    --sh-sm: 0 4px 14px rgba(31,9,56,.10);

    --font-d: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-b: 'Manrope', system-ui, sans-serif;
    --font-m: 'JetBrains Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--font-b);
    background:var(--n50);
    color:var(--n600);
    font-size:17px;
    line-height:1.65;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}
h1,h2,h3{ font-family:var(--font-d); color:var(--ink); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; }
a{ color:inherit; }
.wrap{ max-width:1380px; margin:0 auto; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }

/* Eyebrow / kicker — JetBrains Mono, het label-lettertype van de huisstijl */
.kicker{
    font-family:var(--font-m); font-size:12px; font-weight:600;
    letter-spacing:.22em; text-transform:uppercase; color:var(--violet-600);
    display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:28px; height:2px; background:var(--violet-500); display:inline-block; }
.kicker.fam{ color:var(--magenta-700); }
.kicker.fam::before{ background:var(--magenta-500); }

/* Knoppen — asymmetrische hoeken als handtekening */
.btn{
    display:inline-block; padding:17px 32px; border-radius:18px 5px 18px 5px;
    font-family:var(--font-b); font-weight:800; font-size:16px; text-decoration:none;
    border:2px solid transparent; cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{ background:var(--violet-600); color:#fff; box-shadow:0 10px 26px rgba(114,43,196,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(114,43,196,.42); background:var(--violet-700); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--n200); }
.btn-ghost:hover{ border-color:var(--violet-400); color:var(--violet-600); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--violet-700); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(14,11,26,.4); }
.btn:focus-visible{ outline:3px solid var(--violet-400); outline-offset:3px; }
.btn-sm{ padding:11px 22px; font-size:14.5px; border-radius:14px 4px 14px 4px; }

/* Scroll-reveal */
.rv{ opacity:0; transform:translateY(26px); }
.rv.on{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .rv{ opacity:1; transform:none; }
    *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ================= NAV ================= */
nav{
    position:fixed; top:0; left:0; right:0; z-index:60;
    background:rgba(250,250,251,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--n200);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{
    font-family:var(--font-d); font-weight:800; font-size:27px; letter-spacing:-.02em; text-decoration:none;
    background:linear-gradient(100deg, var(--violet-600), var(--magenta-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-links{ display:flex; gap:34px; }
.nav-links a{ text-decoration:none; font-weight:600; font-size:15px; color:var(--n600); transition:color .15s; }
.nav-links a:hover{ color:var(--violet-600); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-cta .login{ text-decoration:none; font-weight:700; font-size:15px; color:var(--ink); }
.nav-cta .login:hover{ color:var(--violet-600); }
@media (max-width:860px){ .nav-links, .nav-cta .login{ display:none; } }

/* Thema-token-aliassen voor de gedeelde cookiebanner (includes/cookie_banner.php) */
:root{
    --pt-accent: var(--violet-600);
    --pt-accent-hover: var(--violet-700);
    --pt-border: var(--n200);
    --pt-border-strong: var(--n300);
    --pt-surface-1: #ffffff;
    --pt-surface-2: var(--n100);
    --pt-text-1: var(--ink);
    --pt-text-2: var(--n600);
}

/* Taalwissel NL | EN */
.lang-switch{ display:inline-flex; border:1px solid var(--n200); border-radius:10px 4px 10px 4px; overflow:hidden; background:#fff; }
.lang-switch a{
    font-family:var(--font-m); font-size:11px; font-weight:600; letter-spacing:.08em;
    padding:8px 11px; text-decoration:none; color:var(--n500);
}
.lang-switch a.active{ background:var(--ink); color:#fff; }
.lang-switch a:not(.active):hover{ color:var(--violet-600); }

/* Hamburger + mobiel menu */
.hamburger{ display:none; background:none; border:none; cursor:pointer; padding:8px 4px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }
.mobile-menu{
    display:none; position:fixed; top:72px; left:0; right:0; z-index:59;
    background:#fff; border-bottom:1px solid var(--n200); box-shadow:var(--sh-md);
    padding:14px clamp(20px,5vw,56px) 24px;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
    display:block; padding:14px 2px; font-weight:700; font-size:17px;
    color:var(--ink); text-decoration:none; border-bottom:1px solid var(--n100);
}
.mobile-menu a:last-child{ border-bottom:none; }
.mobile-menu .mm-cta{ color:var(--violet-600); }
@media (max-width:860px){ .hamburger{ display:block; } }

/* ================= HERO ================= */
.hero{ padding:168px 0 96px; position:relative; }
.hero::before{ /* warme violet-gloed, subtiel — geen template-gradient-vlak */
    content:""; position:absolute; top:-220px; right:-180px; width:640px; height:640px;
    background:radial-gradient(closest-side, rgba(140,68,224,.13), transparent 70%);
    pointer-events:none;
}
.hero::after{
    content:""; position:absolute; bottom:-160px; left:-200px; width:520px; height:520px;
    background:radial-gradient(closest-side, rgba(237,75,142,.08), transparent 70%);
    pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns: 1fr 620px; gap:56px; align-items:center; }
.hero-badge{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:28px;
    font-family:var(--font-m); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--magenta-700); background:var(--magenta-50); border:1px solid var(--magenta-100);
    padding:9px 16px; border-radius:4px 12px 4px 12px; /* family = gespiegeld */
}
.hero h1{
    font-size:clamp(48px, 5.6vw, 78px); font-weight:800; margin-bottom:26px;
}
.hero h1 .chaos{
    background:linear-gradient(95deg, var(--violet-500), var(--magenta-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Typewriter-regel: iets kleiner, mag NOOIT afbreken en heeft vaste hoogte,
   zodat de pagina niet verspringt bij lange woorden als "Behaal deadlines." */
.type-line{ display:block; white-space:nowrap; font-size:.82em; line-height:1.15; min-height:1.15em; }
#typewriter{ color:var(--violet-600); }
.type-cursor{
    display:inline-block; width:4px; height:.78em; background:var(--magenta-500);
    margin-left:8px; vertical-align:-2px; animation:blink 1.05s steps(1) infinite;
}
.hero p.lead{ font-size:19px; max-width:440px; margin-bottom:36px; color:var(--n500); }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.usp-row{ display:flex; flex-wrap:wrap; gap:22px; font-family:var(--font-m); font-size:12px; color:var(--n500); letter-spacing:.04em; }
.usp-row span b{ color:var(--jade-700); font-weight:600; margin-right:6px; }

/* ---------- Het chaos → rust theater ---------- */
.stage-scale{ transform-origin:top left; }
.stage{
    position:relative; width:620px; height:470px;
    font-family:var(--font-b);
}
.board{
    position:absolute; inset:0; background:#fff; border:1px solid var(--n200);
    border-radius:var(--rx-work); box-shadow:var(--sh-lg);
    opacity:0; transform:scale(.97);
    transition:opacity .7s ease .15s, transform .7s cubic-bezier(.22,1,.36,1) .15s;
}
.stage.rust .board{ opacity:1; transform:none; }
.board-head{
    height:46px; display:flex; align-items:center; justify-content:space-between;
    padding:0 18px; border-bottom:1px solid var(--n100);
}
.board-head .t{ font-family:var(--font-d); font-weight:800; font-size:15px; color:var(--ink); }
.board-head .dots{ display:flex; gap:6px; }
.board-head .dots span{ width:9px; height:9px; border-radius:50%; background:var(--n200); }
.board-head .dots span:nth-child(1){ background:var(--magenta-500); }
.board-head .dots span:nth-child(2){ background:var(--amber); }
.board-head .dots span:nth-child(3){ background:var(--jade); }
.col-label{
    position:absolute; font-family:var(--font-m); font-size:10.5px; font-weight:600;
    letter-spacing:.2em; color:var(--n500); text-transform:uppercase;
    top:64px; opacity:0; transition:opacity .5s ease .55s;
}
.stage.rust .col-label{ opacity:1; }
.col-label.c1{ left:22px; } .col-label.c2{ left:224px; } .col-label.c3{ left:426px; }

/* De zes items: elk heeft een chaos-gezicht en een rust-gezicht */
.it{
    position:absolute; z-index:2;
    transition:left .85s cubic-bezier(.25,1,.3,1), top .85s cubic-bezier(.25,1,.3,1),
               width .85s cubic-bezier(.25,1,.3,1), transform .85s cubic-bezier(.25,1,.3,1);
    transition-delay:calc(var(--i) * 65ms);
}
.face{ transition:opacity .45s ease; transition-delay:calc(var(--i) * 65ms); }
.fr{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.stage.rust .fc{ opacity:0; }
.stage.rust .fr{ opacity:1; }

/* rust-gezicht: nette taakkaart */
.task{
    height:100%; background:#fff; border:1px solid var(--n200); border-left:3px solid var(--violet-500);
    border-radius:var(--rx-work-s); padding:10px 12px 8px; box-shadow:0 2px 8px rgba(31,9,56,.06);
    display:flex; flex-direction:column; justify-content:space-between;
}
.task .tt{ font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.25; }
.task .src{ font-family:var(--font-m); font-size:9.5px; color:var(--n500); letter-spacing:.06em; }
.task.a-amber{ border-left-color:var(--amber); }
.task.a-jade{ border-left-color:var(--jade); }
.task.a-magenta{ border-left-color:var(--magenta-500); }

/* chaos-gezichten */
.fc{ display:block; }
.c-wa{
    background:#DCF6C8; border-radius:14px 14px 14px 3px; padding:11px 14px 8px;
    box-shadow:var(--sh-sm); font-size:13.5px; color:#1c2b18; line-height:1.4;
}
.c-wa .meta{ display:block; text-align:right; font-size:10px; color:#5b7052; margin-top:3px; }
.c-mail{
    background:#fff; border:1px solid var(--n200); border-left:4px solid #4C7DD0;
    padding:10px 14px; font-size:12.5px; box-shadow:var(--sh-sm); border-radius:4px;
}
.c-mail b{ display:block; color:var(--ink); font-size:13px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-xls{
    background:#fff; border:1px solid #b7d3bf; box-shadow:var(--sh-sm); font-family:var(--font-m);
    font-size:11.5px; color:#20583a; border-radius:3px; overflow:hidden;
}
.c-xls .bar{ background:#217346; color:#fff; padding:5px 10px; font-size:10px; letter-spacing:.05em; }
.c-xls .cell{ padding:8px 10px; border-top:1px solid #dcebe0; white-space:nowrap; }
.c-wt{
    background:var(--n950); color:#fff; padding:12px 15px; border-radius:10px;
    font-size:12.5px; box-shadow:var(--sh-md); line-height:1.45;
}
.c-wt b{ font-size:13px; }
.c-wt .exp{ color:#ff9db0; font-family:var(--font-m); font-size:10.5px; }
.c-note{
    background:#FFE99A; padding:16px 14px; box-shadow:4px 6px 14px rgba(31,9,56,.14);
    font-family:var(--font-d); font-weight:800; font-size:15px; color:#5c4a08;
    text-transform:uppercase; letter-spacing:.02em; line-height:1.2; border-radius:2px;
}
.c-file{
    background:#fff; border:1px dashed var(--n300); padding:10px 13px; border-radius:8px;
    font-family:var(--font-m); font-size:11px; color:var(--n500); box-shadow:var(--sh-sm);
    white-space:nowrap;
}

/* chaos-posities (default) */
.it1{ left:36px;  top:34px;  width:236px; transform:rotate(-6deg); --i:0; }
.it2{ left:318px; top:12px;  width:262px; transform:rotate(3.5deg); --i:1; }
.it3{ left:196px; top:158px; width:238px; transform:rotate(-2.5deg); --i:2; }
.it4{ left:352px; top:282px; width:212px; transform:rotate(5deg); --i:3; }
.it5{ left:64px;  top:296px; width:158px; transform:rotate(-8deg); --i:4; }
.it6{ left:118px; top:120px; width:216px; transform:rotate(8deg); --i:5; }

/* rust-posities: 3 kolommen × 2 kaarten */
.stage.rust .it{ width:176px; height:64px; transform:rotate(0); }
.stage.rust .it1{ left:22px;  top:92px;  }
.stage.rust .it2{ left:22px;  top:170px; }
.stage.rust .it3{ left:224px; top:92px;  }
.stage.rust .it4{ left:224px; top:170px; }
.stage.rust .it5{ left:426px; top:92px;  }
.stage.rust .it6{ left:426px; top:170px; }

/* toast na het opruimen */
.stage-toast{
    position:absolute; right:-14px; bottom:52px; z-index:3;
    background:#fff; border:1px solid var(--n200); border-radius:var(--rx-work-s);
    box-shadow:var(--sh-md); padding:12px 16px; display:flex; gap:11px; align-items:center;
    opacity:0; transform:translateY(14px);
    transition:opacity .5s ease 1.05s, transform .5s ease 1.05s;
}
.stage.rust .stage-toast{ opacity:1; transform:none; }
.stage-toast .chk{
    width:32px; height:32px; border-radius:10px 3px 10px 3px; background:var(--jade);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex:none;
}
.stage-toast b{ display:block; font-size:13px; color:var(--ink); line-height:1.3; }
.stage-toast i{ font-style:normal; font-family:var(--font-m); font-size:10.5px; color:var(--n500); }

.stage-ctl{ margin-top:20px; display:flex; align-items:center; gap:16px; }
.stage-btn{
    font-family:var(--font-m); font-size:12.5px; font-weight:600; letter-spacing:.08em;
    background:var(--ink); color:#fff; border:none; cursor:pointer;
    padding:12px 20px; border-radius:12px 4px 12px 4px; transition:transform .15s, background .15s;
}
.stage-btn:hover{ transform:translateY(-2px); background:var(--violet-700); }
.stage-hint{ font-family:var(--font-m); font-size:11px; color:var(--n400); letter-spacing:.05em; }

/* "Xion."-woordmerk in vensterkoppen (zoals de mockups op de live site) */
.win-brand{
    font-family:var(--font-d); font-weight:800; font-size:15px; letter-spacing:-.02em; flex:none;
    background:linear-gradient(100deg, var(--violet-600), var(--magenta-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Statisch kanban-bord in de hero (de beweging zit bij de demo verderop) */
.hero-board{ position:relative; }
.hero-board .win{ transform:rotate(-1deg); }
.hb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hb-col{
    font-family:var(--font-m); font-size:10px; font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; color:var(--n500); margin-bottom:10px;
}
.hbt{ height:auto; min-height:64px; margin-bottom:10px; gap:6px; }
.hero-board .stage-toast{ opacity:1; transform:none; transition:none; right:-14px; bottom:-18px; }

/* ================= PROBLEEM (donker interlude) ================= */
.problem{ background:var(--n950); padding:120px 0 128px; position:relative; overflow:hidden; }
.problem::after{
    content:""; position:absolute; top:-180px; right:-140px; width:480px; height:480px;
    background:radial-gradient(closest-side, rgba(140,68,224,.16), transparent 70%);
}
.problem .chips{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.problem .chip{
    font-family:var(--font-m); font-size:12.5px; letter-spacing:.06em; color:var(--n400);
    border:1px solid #2E2840; padding:8px 16px; border-radius:4px; text-decoration:line-through;
    text-decoration-color:var(--magenta-500); text-decoration-thickness:2px;
}
.problem h2{
    color:#fff; font-size:clamp(40px, 5.4vw, 68px); font-weight:800; max-width:820px; margin-bottom:30px;
}
.problem h2 .q{ color:var(--violet-400); }
.problem p{ font-size:20px; color:var(--n400); max-width:640px; }
.problem p strong{ color:#fff; font-weight:800; }
/* De chaos → rust-demo woont hier: eerst het probleem benoemen, dan laten zien */
.stage-wrap{ width:620px; max-width:100%; margin:72px auto 0; position:relative; z-index:1; }
.problem .stage-btn{ background:#fff; color:var(--ink); }
.problem .stage-btn:hover{ background:var(--violet-500); color:#fff; }
.problem .stage-hint{ color:var(--n400); }

/* ================= 3 STAPPEN (kaartjes, zoals de huidige site) ================= */
.how{ padding:120px 0 104px; }
.how-head{ max-width:560px; margin:0 auto 60px; text-align:center; }
.how-head h2{ font-size:clamp(36px,4.4vw,54px); font-weight:800; margin:18px 0 14px; }
.steps-cards{ display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; gap:10px; align-items:stretch; }
.step-card{
    background:#fff; border:1px solid var(--n200); border-radius:var(--rx-work);
    box-shadow:var(--sh-sm); padding:40px 30px 34px; text-align:center;
    transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.step-num{
    width:36px; height:36px; border-radius:12px 4px 12px 4px; background:var(--violet-600);
    color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.step-ic{ font-size:40px; color:var(--violet-500); display:block; margin:0 auto 14px; }
.step-card h3{ font-size:22px; font-weight:800; margin-bottom:10px; }
.step-card p{ font-size:15px; color:var(--n500); }
.step-arrow{ display:flex; align-items:center; justify-content:center; color:var(--n300); }

/* ================= WAARDEN-STROOK ================= */
.values{ padding:16px 0 0; }
.values-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
    border-top:1px solid var(--n200); border-bottom:1px solid var(--n200);
    padding:46px 6px;
}
.values-grid h4{ font-family:var(--font-d); font-size:19px; color:var(--ink); margin:10px 0 6px; }
.values-grid p{ font-size:14.5px; color:var(--n500); }
.v-ic{ font-size:30px; }

/* ================= FEATURES (hoofdstukken) ================= */
.chapter{ padding:104px 0; }
.chapter .grid{ display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:center; }
.chapter.flip .grid{ grid-template-columns:7fr 5fr; }
.chapter.flip .copy{ order:2; }
.chapter.flip .shot{ order:1; }
.chapter h2{ font-size:clamp(34px,4vw,50px); font-weight:800; margin:18px 0 18px; }
.chapter .copy p{ color:var(--n500); margin-bottom:16px; max-width:440px; }
.checklist{ list-style:none; margin-top:26px; display:grid; gap:13px; }
.checklist li{ display:flex; gap:12px; align-items:baseline; font-weight:600; color:var(--n600); font-size:16px; }
.checklist li::before{ content:"✓"; color:var(--jade); font-weight:800; flex:none; }
.text-link{ font-weight:800; color:var(--violet-600); text-decoration:none; border-bottom:2px solid var(--violet-100); padding-bottom:2px; }
.text-link:hover{ border-bottom-color:var(--violet-400); }

/* mockups: uit het grid laten lopen zodat het niet 'in een kaartje' zit */
.shot{ position:relative; }
.shot .win{
    background:#fff; border:1px solid var(--n200); border-radius:var(--rx-work);
    box-shadow:var(--sh-lg); overflow:hidden;
}
.chapter:not(.flip) .shot .win{ transform:rotate(-1.1deg) translateX(26px); }
.chapter.flip .shot .win{ transform:rotate(1.1deg) translateX(-26px); border-radius:var(--rx-fam); }
.win-head{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--n100); }
.win-head .dots{ display:flex; gap:6px; }
.win-head .dots span{ width:9px; height:9px; border-radius:50%; }
.win-head .dots span:nth-child(1){ background:var(--magenta-500); }
.win-head .dots span:nth-child(2){ background:var(--amber); }
.win-head .dots span:nth-child(3){ background:var(--jade); }
.win-head .wt{ font-family:var(--font-m); font-size:11.5px; color:var(--n500); letter-spacing:.08em; }
.win-body{ padding:22px; }

/* F1: taak aanmaken */
.newtask{
    display:flex; align-items:center; gap:12px; border:2px solid var(--violet-200, var(--violet-100));
    border-color:var(--violet-100); background:var(--violet-50); padding:13px 16px;
    border-radius:var(--rx-work-s); margin-bottom:18px;
}
.newtask .plus{ color:var(--violet-600); font-weight:800; font-size:19px; }
.newtask .inp{ font-size:14.5px; color:var(--ink); font-weight:600; }
.newtask .caret{ display:inline-block; width:2px; height:17px; background:var(--violet-600); vertical-align:-3px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.newtask .kbd{
    margin-left:auto; font-family:var(--font-m); font-size:10px; color:var(--n500);
    border:1px solid var(--n200); background:#fff; border-radius:5px; padding:3px 7px;
}
.mini-task{
    display:flex; align-items:center; gap:12px; border:1px solid var(--n200);
    border-radius:var(--rx-work-s); padding:12px 14px; margin-bottom:10px; background:#fff;
}
.mini-task .bar{ width:3px; height:26px; border-radius:2px; background:var(--violet-500); flex:none; }
.mini-task.am .bar{ background:var(--amber); }
.mini-task.jd .bar{ background:var(--jade); }
.mini-task b{ font-size:14px; color:var(--ink); }
.mini-task .who{
    margin-left:auto; width:26px; height:26px; border-radius:9px 3px 9px 3px; color:#fff;
    font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
    background:var(--violet-500);
}
.mini-task .due{ font-family:var(--font-m); font-size:10px; color:var(--n500); }
/* De rail blijft amber en jade; onder witte initialen de 700 (5.1 en 6.5:1). */
.mini-task.am .who{ background:var(--amber-700); }
.mini-task.jd .who{ background:var(--jade-700); }

/* F2: chat */
.chat-line{ display:flex; gap:11px; margin-bottom:14px; align-items:flex-end; }
.chat-line .av{
    width:30px; height:30px; border-radius:10px 3px 10px 3px; flex:none; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.chat-line .bub{
    background:var(--n100); padding:10px 15px; border-radius:14px 14px 14px 4px;
    font-size:14px; color:var(--n800); max-width:78%;
}
.chat-line.me{ justify-content:flex-end; }
.chat-line.me .bub{ background:var(--violet-600); color:#fff; border-radius:14px 14px 4px 14px; }
.chat-line .bub .tag{ color:var(--magenta-600); font-weight:700; }
.chat-input{
    display:flex; align-items:center; justify-content:space-between; border:1px solid var(--n200);
    border-radius:var(--rx-work-s); padding:11px 16px; color:var(--n500); font-size:13.5px; margin-top:18px;
}
.chat-input .send{ color:var(--violet-600); font-weight:800; }
.chat-badge{
    font-family:var(--font-m); font-size:10px; background:var(--magenta-50); color:var(--magenta-700);
    border:1px solid var(--magenta-100); padding:3px 9px; border-radius:4px; letter-spacing:.08em;
}

/* F3: kluis (donker paneel) */
.shot .win.dark{ background:var(--n900); border-color:#2E2840; }
.win.dark .win-head{ border-bottom-color:#2E2840; }
.win.dark .win-head .wt{ color:var(--n400); }
.vault-row{
    display:flex; align-items:center; gap:14px; padding:14px 6px; border-bottom:1px solid #262034;
}
.vault-row:last-child{ border-bottom:none; }
.vault-row .doc{
    width:34px; height:40px; border:1.5px solid #4A4160; border-radius:6px 2px 6px 2px; position:relative; flex:none;
}
.vault-row .doc::after{ content:""; position:absolute; left:6px; right:6px; top:8px; height:2px; background:#4A4160; box-shadow:0 6px 0 #4A4160, 0 12px 0 #4A4160; }
.vault-row b{ color:#EDE9F4; font-size:14px; display:block; }
.vault-row .enc{ font-family:var(--font-m); font-size:10px; color:var(--n400); letter-spacing:.08em; }
.vault-row .lock{ margin-left:auto; color:var(--jade); font-family:var(--font-m); font-size:10.5px; letter-spacing:.1em; border:1px solid rgba(22,163,122,.4); padding:4px 9px; border-radius:4px; }
.vault-badge{
    font-family:var(--font-m); font-size:10px; letter-spacing:.12em; color:var(--jade);
    border:1px solid rgba(22,163,122,.4); background:rgba(22,163,122,.08); padding:3px 10px; border-radius:4px;
}

/* ================= DOELGROEP-BANDEN ================= */
.worlds{ padding:112px 0 40px; }
.worlds-head{ max-width:620px; margin-bottom:64px; }
.worlds-head h2{ font-size:clamp(38px,4.6vw,58px); font-weight:800; margin:18px 0 14px; }
.worlds-head h2 em{ font-style:normal; color:var(--magenta-500); }
.band{
    display:grid; grid-template-columns:5fr 6fr; gap:48px; align-items:center;
    padding:52px clamp(28px,4.5vw,64px); margin-bottom:26px;
}
.band h3{ font-size:clamp(30px,3.4vw,42px); font-weight:800; margin:14px 0 0; }
.band p{ color:var(--n500); max-width:480px; }
.band.work{ background:var(--violet-50); border-radius:44px 8px 44px 8px; }
.band.fam{ background:var(--magenta-50); border-radius:8px 44px 8px 44px; }
.band.fam .b-copy{ order:2; }
.band.fam .b-side{ order:1; }
.band.maker{ background:var(--n100); border-radius:44px 8px 44px 8px; }
.band .b-side p{ font-size:16.5px; }
/* mini-motief in de familieband: boodschappenlijstje */
.fam-list{
    background:#fff; border:1px solid var(--magenta-100); border-radius:var(--rx-fam-s);
    box-shadow:var(--sh-sm); padding:18px 20px; max-width:290px; transform:rotate(-1.4deg);
}
.fam-list .fl-t{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.16em; color:var(--magenta-600); margin-bottom:12px; text-transform:uppercase; }
.fam-list label{ display:flex; gap:10px; align-items:center; font-size:14px; color:var(--n600); padding:5px 0; font-weight:600; }
.fam-list .done{ text-decoration:line-through; color:var(--n500); }
.fam-list .box{ width:17px; height:17px; border-radius:5px 2px 5px 2px; border:2px solid var(--magenta-200, var(--magenta-100)); border-color:var(--magenta-100); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.fam-list .done .box{ background:var(--magenta-500); border-color:var(--magenta-500); }

/* ================= KENMERKEN-INDEX ================= */
.index-sec{ padding:88px 0 112px; }
.index-head{ max-width:620px; margin-bottom:52px; }
.index-head h2{ font-size:clamp(32px,3.8vw,46px); font-weight:800; margin:18px 0 12px; }
.idx{ border-top:1px solid var(--n200); }
.idx-row{
    display:grid; grid-template-columns:80px 260px 1fr; gap:28px; align-items:baseline;
    padding:28px 6px; border-bottom:1px solid var(--n200); transition:background .2s;
}
.idx-row:hover{ background:var(--violet-50); }
.idx-row .no{ font-family:var(--font-m); font-size:13px; color:var(--n500); }
.idx-row h3{ font-size:24px; font-weight:800; transition:color .2s; display:flex; align-items:center; gap:14px; }
.idx-ic{
    width:38px; height:38px; border-radius:12px 4px 12px 4px; flex:none;
    background:var(--violet-100); color:var(--violet-600);
    display:flex; align-items:center; justify-content:center;
}
.idx-ic .material-symbols-outlined{ font-size:21px; }
.idx-ic.m{ background:var(--magenta-100); color:var(--magenta-600); }
.idx-ic.j{ background:var(--jade-50); color:var(--jade); }
.idx-row:hover h3{ color:var(--violet-600); }
.idx-row p{ color:var(--n500); font-size:16px; max-width:560px; }

/* ================= PRICING ================= */
.pricing{ padding:112px 0; background:linear-gradient(var(--n50), var(--violet-50) 30%, var(--n50)); }
.price-head{ max-width:560px; margin-bottom:44px; }
.price-head h2{ font-size:clamp(38px,4.6vw,58px); font-weight:800; margin:18px 0 12px; }
.seg{
    display:inline-flex; border:1px solid var(--n200); background:#fff; padding:5px;
    border-radius:14px 5px 14px 5px; margin-bottom:40px; box-shadow:var(--sh-sm);
}
.seg button{
    font-family:var(--font-m); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    border:none; background:transparent; color:var(--n500); padding:11px 26px; cursor:pointer;
    border-radius:10px 4px 10px 4px; transition:all .2s;
}
.seg button.active{ background:var(--ink); color:#fff; }
.seg button:not(.active):hover{ color:var(--violet-600); }
.seg-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:40px; }
.seg-row .seg{ margin-bottom:0; }

/* Maand/jaar-prijzen: .pj toont alleen als sectie .yearly heeft */
.pj{ display:none; }
.pricing.yearly .pm{ display:none; }
.pricing.yearly .pj{ display:inline; }
.year-note{ font-family:var(--font-m); font-size:11px; color:var(--jade-700); letter-spacing:.05em; }

.price-panel{
    background:#fff; border:1px solid var(--n200); border-radius:36px 8px 36px 8px;
    box-shadow:var(--sh-lg); overflow:hidden;
    display:grid; grid-template-columns:repeat(3, 1fr);
}
.price-panel.fam-panel{ border-radius:8px 36px 8px 36px; }
.plan{ padding:44px 38px 40px; border-left:1px solid var(--n100); display:flex; flex-direction:column; }
.plan:first-child{ border-left:none; }
.plan .p-tag{
    font-family:var(--font-m); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--n500); height:22px; display:block;
}
.plan.hot{ background:var(--violet-50); position:relative; }
.plan.hot .p-tag{ color:var(--violet-600); font-weight:600; }
.plan.hot-fam{ background:var(--magenta-50); }
.plan.hot-fam .p-tag{ color:var(--magenta-700); font-weight:600; }
.plan h3{ font-size:27px; font-weight:800; margin:6px 0 2px; }
.plan .p-sub{ font-size:14px; color:var(--n500); margin-bottom:22px; }
.plan .amount{
    font-family:var(--font-d); font-weight:800; font-size:58px; color:var(--ink);
    letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; margin-bottom:26px;
}
.plan .amount small{ font-family:var(--font-m); font-size:13px; color:var(--n500); font-weight:400; letter-spacing:0; }
.plan ul{ list-style:none; display:grid; gap:11px; margin-bottom:34px; }
.plan ul li{ display:flex; gap:11px; align-items:baseline; font-size:15px; color:var(--n600); }
.plan ul li::before{ content:"✓"; color:var(--jade); font-weight:800; flex:none; }
.plan ul li b{ color:var(--ink); }
.plan .btn{ margin-top:auto; text-align:center; }
.btn-magenta{ background:var(--magenta-600); color:#fff; box-shadow:0 10px 26px rgba(211,44,113,.3); }
/* Hover wordt donkerder, niet lichter: wit op magenta-500 haalt maar 3.5:1. */
.btn-magenta:hover{ transform:translateY(-2px); background:var(--magenta-700); color:#fff; }

/* ================= FAQ ================= */
.faq{ padding:104px 0 120px; }
.faq-grid{ display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:start; }
.faq-grid h2{ font-size:clamp(34px,4vw,48px); font-weight:800; margin:18px 0 14px; }
.faq-grid .fh p{ color:var(--n500); max-width:360px; margin-bottom:28px; }
.faq details{ border-top:1px solid var(--n200); }
.faq details:last-of-type{ border-bottom:1px solid var(--n200); }
.faq summary{
    display:flex; align-items:baseline; gap:22px; cursor:pointer; list-style:none;
    padding:24px 4px; font-weight:800; font-size:17.5px; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .qn{ font-family:var(--font-m); font-size:12px; color:var(--n500); font-weight:400; flex:none; }
.faq summary .pm{ margin-left:auto; color:var(--violet-600); font-weight:400; font-size:24px; line-height:1; transition:transform .25s; flex:none; }
.faq details[open] .pm{ transform:rotate(45deg); }
.faq .ans{ padding:0 4px 26px 46px; color:var(--n500); max-width:560px; }
.faq .ans strong{ color:var(--ink); }

/* ================= CTA + FOOTER ================= */
.final{ background:var(--n950); padding:128px 0 0; position:relative; overflow:hidden; }
.final::before{
    content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
    width:720px; height:520px; background:radial-gradient(closest-side, rgba(140,68,224,.18), transparent 70%);
}
.final-in{ text-align:center; position:relative; padding-bottom:120px; }
/* Echte Xion-logo (drie bollen: paars/roze/blauw, uit favicon.svg) */
.xlogo{ height:16px; width:auto; display:block; flex:none; }
.xlogo-lg{ height:88px; width:auto; display:inline-block; margin-bottom:36px; }
.final h2{ color:#fff; font-size:clamp(40px,5.2vw,66px); font-weight:800; max-width:760px; margin:0 auto 22px; }
.final p.sub{ color:var(--n400); font-size:19px; margin-bottom:40px; }
.final .note{ font-family:var(--font-m); font-size:12px; color:var(--n400); margin-top:22px; letter-spacing:.06em; }

footer{ background:var(--n950); border-top:1px solid #241E33; padding:64px 0 44px; }
/* Het merkblok krijgt dubbele breedte, de linkkolommen verdelen de rest.
   auto-fit in plaats van een vast aantal, zodat een extra kolom (zoals
   "Voor wie" op de homepage) er gewoon bij past zonder deze regel te raken. */
/* Vier kolommen: het merk, Product, Voor wie en Info.
   NIET terugzetten naar repeat(auto-fit,...): auto-fit mag van CSS niet samen
   met een flexibele maat (de 2fr hiervoor) in dezelfde rij staan. De browser
   gooit dan de hele regel weg en zet alles onder elkaar. Dat gebeurde van 21-9
   tot 24-9-2026 op de homepage. Komt er een kolom bij, voeg hier dan gewoon
   een maat toe. Bewaakt door tests/test_landingspaginas.php. */
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr;
            gap:48px; margin-bottom:52px; }
.foot-brand{
    font-family:var(--font-d); font-weight:800; font-size:26px;
    background:linear-gradient(100deg, var(--violet-400), var(--magenta-500));
    -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; margin-bottom:14px;
}
footer p, footer li, footer a{ color:var(--n400); font-size:14.5px; }
footer ul{ list-style:none; display:grid; gap:9px; margin-top:6px; }
footer a{ text-decoration:none; }
footer a:hover{ color:#fff; }
footer h4{ color:#fff; font-size:14px; margin-bottom:14px; font-family:var(--font-m); font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.foot-meta{ font-family:var(--font-m); font-size:12px; }
.foot-bottom{
    border-top:1px solid #241E33; padding-top:26px; display:flex; justify-content:space-between;
    font-family:var(--font-m); font-size:11.5px; color:var(--n400); letter-spacing:.05em;
}

/* ================= RESPONSIVE ================= */
@media (max-width:1120px){
    .hero-grid{ grid-template-columns:1fr; gap:64px; }
}
@media (max-width:900px){
    .steps-cards{ grid-template-columns:1fr; }
    .step-arrow{ transform:rotate(90deg); height:34px; }
    .values-grid{ grid-template-columns:1fr; gap:28px; }
    .hb-grid{ grid-template-columns:1fr; }
    .chapter .grid, .chapter.flip .grid{ grid-template-columns:1fr; gap:44px; }
    .chapter.flip .copy{ order:1; } .chapter.flip .shot{ order:2; }
    .chapter .shot .win, .chapter.flip .shot .win{ transform:none !important; }
    .band{ grid-template-columns:1fr; gap:28px; }
    .band.fam .b-copy{ order:1; } .band.fam .b-side{ order:2; }
    .idx-row{ grid-template-columns:52px 1fr; }
    .idx-row p{ grid-column:2; }
    .price-panel{ grid-template-columns:1fr; }
    .plan{ border-left:none; border-top:1px solid var(--n100); }
    .faq-grid{ grid-template-columns:1fr; gap:36px; }
    .foot-grid{ grid-template-columns:1fr; gap:36px; }
    .foot-bottom{ flex-direction:column; gap:8px; }
}
@media (max-width:680px){
    .stage{ transform:scale(.56); transform-origin:top left; }
    .stage-scale{ height:290px; overflow:visible; }
    .stage-ctl{ margin-top:0; }
    .hero{ padding-top:130px; }
    .hero h1{ font-size:42px; }
}