/* Utility Classes */
 
   .ass {
            font-family: 'Manrope', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #e2e8f0;
            min-height: 100vh;
            padding: 3rem 1rem;
        }
        
         .ass h1,  .ass h2,  .ass h3,  .ass h4,  .ass h5 {

color: #f3f4f6;

}
 
        .centro-testo {
            text-align: center;
        }
        
        .margine-basso-16 {
            margin-bottom: 4rem;
        }
        
        .margine-basso-20 {
            margin-bottom: 5rem;
        }
        
        .margine-basso-8 {
            margin-bottom: 2rem;
        }
        
        .margine-basso-4 {
            margin-bottom: 1rem;
        }
        
        .margine-basso-3 {
            margin-bottom: 0.75rem;
        }
        
        .margine-basso-6 {
            margin-bottom: 1.5rem;
        }
        
        .margine-basso-2 {
            margin-bottom: 0.5rem;
        }
        
        .margine-alto-20 {
            margin-top: 5rem;
        }
        
        .margine-alto-8 {
            margin-top: 2rem;
        }
        
        .margine-alto-4 {
            margin-top: 1rem;
        }
        
        .margine-auto {
            margin-left: auto;
            margin-right: auto;
        }
        
        .larghezza-massima-7xl {
            max-width: 80rem;
        }
        
        .padding-8 {
            padding: 2rem;
        }
        
        .padding-6 {
            padding: 1.5rem;
        }
        
        .padding-4 {
            padding: 1rem;
        }
        
        .padding-3 {
            padding: 0.75rem;
        }
        
        .padding-2 {
            padding: 0.5rem;
        }
        
        .padding-y-12 {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
        
        .padding-x-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        
        .arrotondato-xl {
            border-radius: 0.75rem;
        }
        
        .arrotondato-2xl {
            border-radius: 1rem;
        }
        
        .arrotondato-lg {
            border-radius: 0.5rem;
        }
        
        .arrotondato-full {
            border-radius: 9999px;
        }
        
        .testo-4xl {
            font-size: 2.25rem;
            line-height: 2.5rem;
        }
        
        .testo-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem;
        }
        
        .testo-2xl {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        
        .testo-xl {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
        
        .testo-lg {
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
        
        .testo-sm {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        
        .testo-xs {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        
        .font-extrabold {
            font-weight: 800;
        }
        
        .font-bold {
            font-weight: 700;
        }
        
        .font-semibold {
            font-weight: 600;
        }
        
        .font-medium {
            font-weight: 500;
        }
        
        .testo-bianco {
            color: #ffffff;
        }
        
        .testo-slate-300 {
            color: #cbd5e1;
        }
        
        .testo-slate-400 {
            color: #94a3b8;
        }
        
        .testo-blue-400 {
            color: #60a5fa;
        }
        
        .testo-emerald-400 {
            color: #34d399;
        }
        
        .testo-amber-400 {
            color: #fbbf24;
        }
        
        .testo-purple-400 {
            color: #a78bfa;
        }
        
        .testo-pink-400 {
            color: #f472b6;
        }
        
        .testo-cyan-400 {
            color: #22d3ee;
        }
        
        .sfondo-slate-800 {
            background-color: #1e293b;
        }
        
        .sfondo-blue-600 {
            background-color: #2563eb;
        }
        
        .sfondo-slate-700 {
            background-color: #334155;
        }
        
        .sfondo-cyan-600 {
            background-color: #0891b2;
        }
        
        .sfondo-cyan-700 {
            background-color: #0e7490;
        }
        
        .flex {
            display: flex;
        }
        
        .flex-col {
            flex-direction: column;
        }
        
        .items-center {
            align-items: center;
        }
        
        .items-start {
            align-items: flex-start;
        }
        
        .items-end {
            align-items: flex-end;
        }
        
        .justify-center {
            justify-content: center;
        }
        
        .justify-between {
            justify-content: space-between;
        }
        
        .relative {
            position: relative;
        }
        
        .absolute {
            position: absolute;
        }
        
        .w-full {
            width: 100%;
        }
        
        .w-20 {
            width: 5rem;
        }
        
        .w-12 {
            width: 3rem;
        }
        
        .h-20 {
            height: 5rem;
        }
        
        .h-2 {
            height: 0.5rem;
        }
        
        .h-64 {
            height: 16rem;
        }
        
        .h-80 {
            height: 20rem;
        }
        
        .overflow-hidden {
            overflow: hidden;
        }
        
        /* Main Layout */
        .contenitore-principale {
            max-width: 80rem;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Section Header */
        .intestazione-sezione {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .testo-gradient {
            background: linear-gradient(90deg, #0ea5e9, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        
        /* Stats Grid */
        .griglia-statistiche {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.25rem;
            margin-bottom: 5rem;
        }
        
        /* Asset Cards */
        .griglia-schede {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2rem;
        }
        
        .scheda-attivo {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 1rem;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: translateY(0);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        .scheda-attivo:hover {
            transform: translateY(-0.625rem);
            box-shadow: 0 25px 50px -12px rgba(14, 165, 233, 0.25);
            border-color: rgba(14, 165, 233, 0.3);
        }
        
        .equities { border-top: 4px solid #3b82f6; }
        .fixed-income { border-top: 4px solid #10b981; }
        .real-estate { border-top: 4px solid #f59e0b; }
        .fx { border-top: 4px solid #8b5cf6; }
        .digital { border-top: 4px solid #ec4899; }
        
        .icona-attivo {
            width: 4.375rem;
            height: 4.375rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 1rem;
            margin-bottom: 1.25rem;
            transition: all 0.3s ease;
        }
        
        .scheda-attivo:hover .icona-attivo {
            transform: scale(1.1) rotate(5deg);
        }
        
        .equities .icona-attivo { background: rgba(59, 130, 246, 0.15); }
        .fixed-income .icona-attivo { background: rgba(16, 185, 129, 0.15); }
        .real-estate .icona-attivo { background: rgba(245, 158, 11, 0.15); }
        .fx .icona-attivo { background: rgba(139, 92, 246, 0.15); }
        .digital .icona-attivo { background: rgba(236, 72, 153, 0.15); }
        
        .contenuto-attivo {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        
        .scheda-attivo:hover .contenuto-attivo {
            max-height: 31.25rem;
        }
        
        /* Dynamic Allocation Card */
        .scheda-allocazione {
            background: linear-gradient(to bottom right, #0c4a6e, #0c4a6e, #1e3a8a);
            border-radius: 1rem;
            padding: 2rem;
            border: 1px solid rgba(6, 182, 212, 0.3);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* Chart Container */
        .contenitore-grafico {
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(10px);
            border-radius: 1rem;
            padding: 2rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animazione-sfumare-entrata {
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        /* Hover Effects */
        .sottolinea-hover {
            position: relative;
            display: inline-block;
        }
        
        .sottolinea-hover::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: currentColor;
            transition: width 0.3s ease;
        }
        
        .sottolinea-hover:hover::after {
            width: 100%;
        }
        
        /* Buttons */
        .pulsante {
            background-color: #0891b2;
            color: white;
            font-weight: 500;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            transition: background-color 0.3s;
            width: 100%;
            text-align: center;
        }
        
        .pulsante:hover {
            background-color: #0e7490;
        }
        
        /* Progress Bars */
        .barra-progresso {
            background-color: #334155;
            border-radius: 9999px;
            height: 0.5rem;
        }
        
        .riempimento-progresso {
            background-color: #06b6d4;
            border-radius: 9999px;
            height: 0.5rem;
        }
        
        /* Responsive Design */
        @media (min-width: 768px) {
            .griglia-schede {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 1024px) {
            .griglia-schede {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .griglia-statistiche {
                grid-template-columns: repeat(5, 1fr);
            }
        }
        
        @media (max-width: 1024px) {
            .griglia-statistiche {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .griglia-statistiche {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 480px) {
            .griglia-statistiche {
                grid-template-columns: 1fr;
            }
        }
        
        /* Layout for chart section */
        @media (min-width: 768px) {
            .layout-flessibile {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
        }
        
        
        
        
 
        :root {
            --kleur-blauw: #0ea5e9;
            --kleur-indigo: #6366f1;
            --kleur-slate-100: #e2e8f0;
            --kleur-slate-300: #cbd5e1;
            --kleur-slate-800: #1e293b;
            --kleur-cyaan: #06b6d4;
            --kleur-amber: #f59e0b;
            --kleur-emerald: #10b981;
            --radius-xl: 1rem;
        }
       
       .sery {
            font-family:'Manrope', sans-serif;
            line-height:1.6;
            background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
            color:var(--kleur-slate-100);
            min-height:100vh;
            padding:3rem 1rem;
        }
        
        .sery h1, .sery h2, .sery h3, .sery h4, .sery h5 {

color: #f3f4f6;

}
        
       .sery img{max-width:100%;display:block}

        /* ---------- Utilities (Dutch) ---------- */
        .container             {max-width:80rem;margin-inline:auto}
        .tekst-midden          {text-align:center}
        .rooster               {display:grid;gap:2rem}
        .flexbox               {display:flex}
        .kolom                 {flex-direction:column}
        .rij                   {flex-direction:row}
        .uitlijnen-midden      {align-items:center;justify-content:center}
        .schuif-omhoog         {transform:translateY(0);transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s}
        .schuif-omhoog:hover   {transform:translateY(-10px)}
        .achtergrond-verloop   {background:linear-gradient(90deg,var(--kleur-blauw),var(--kleur-indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
        .btn                   {padding:.9rem 2rem;border-radius:var(--radius-xl);font-weight:600;transition:.3s;cursor:pointer}
        .btn-primair           {background:var(--kleur-cyaan);border:none;color:#fff}
        .btn-primair:hover     {background:#0891b2}
        .btn-secundair         {background:transparent;border:2px solid #fff;color:#fff}
        .btn-secundair:hover   {background:#fff;color:#1e3a8a}
        .verborgen             {display:none}
        .zichtbaar             {display:block}

        /* ---------- Responsive helpers ---------- */
        @media (min-width:768px){
            .rooster-3 {grid-template-columns:repeat(3,1fr)}
        }
        @media (min-width:1024px){
            .rooster-2 {grid-template-columns:repeat(2,1fr)}
            .flex-lg-rij{flex-direction:row}
            .breed-50  {width:50%}
        }

        /* ---------- Animaties ---------- */
        @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
        .animatie-in{opacity:0;animation:fadeIn .6s ease-out forwards}

        /* ---------- Componenten ---------- */
        .kenmerk-kaart{
            background:rgba(15,23,42,.7);
            backdrop-filter:blur(10px);
            border:1px solid rgba(148,163,184,.2);
            border-left:4px solid;
            border-radius:var(--radius-xl);
            overflow:hidden;
            box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
        }
        .kenmerk-kaart.transparantie{border-left-color:#3b82f6}
        .kenmerk-kaart.risico       {border-left-color:var(--kleur-emerald)}
        .kenmerk-kaart.regulering   {border-left-color:var(--kleur-amber)}

        .kenmerk-pictogram{
            width:60px;height:60px;border-radius:var(--radius-xl);
            display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;
            transition:transform .3s;
        }
        .kenmerk-kaart:hover .kenmerk-pictogram{transform:scale(1.1) rotate(5deg)}
        .transparantie .kenmerk-pictogram{background:rgba(59,130,246,.15)}
        .risico       .kenmerk-pictogram{background:rgba(16,185,129,.15)}
        .regulering   .kenmerk-pictogram{background:rgba(245,158,11,.15)}

        .missie-visie-kaart{
            background:linear-gradient(135deg,rgba(14,165,233,.1) 0%,rgba(99,102,241,.1) 100%);
            border:1px solid rgba(14,165,233,.2);
            border-radius:var(--radius-xl);
        }

        /* Tabs */
        .tab-knop{
            position:relative;
            padding:.75rem 1.5rem;
            font-weight:500;
            color:#fff;
            transition:.3s;
            cursor:pointer;
            border:none;
            background:none;
        }
        .tab-knop.actief{color:var(--kleur-blauw)}
        .tab-knop::after{
            content:'';
            position:absolute;left:0;bottom:0;height:2px;width:0;
            background:var(--kleur-blauw);transition:width .3s
        }
        .tab-knop:hover::after,.tab-knop.actief::after{width:100%}

        /* CTA */
        .cta{
            background:linear-gradient(to right,#1e40af,#312e81);
            border-radius:var(--radius-xl);
        }
        
        
        
        /* ===== Basis =============================================== */
:root{
    --blauw:#0ea5e9;
    --indigo:#6366f1;
    --slate-100:#f3f4f6;
    --slate-300:#cbd5e1;
    --slate-400:#94a3b8;
    --slate-700:#334155;
    --slate-800:#1e293b;
    --radius-xl:1rem;
}
.herrot {
    font-family:'Manrope',sans-serif;
    /* background:#0f172a;*/
    color:var(--slate-100);
    overflow-x:hidden;
}

.herrot h1, .herrot h2, .herrot h3, .herrot h4, .herrot h5 {

color: var(--slate-100);

}

/* ===== Hero-specifiek ====================================== */
.hero-container{position:relative;min-height:100vh;overflow:hidden}
.donkere-overlay{
    position:absolute;inset:0;background:rgba(15,23,42,.85)
}
.achtergrond-anim{
    position:absolute;inset:0;
    background:url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=1920&q=80') center/cover;
    animation:bgZoom 30s infinite alternate;z-index:-1
}
@keyframes bgZoom{from{transform:scale(1)}to{transform:scale(1.1)}}

/* Deeltjes */
#deeltjes{position:absolute;inset:0;pointer-events:none}
.deeltje{
    position:absolute;border-radius:50%;
    background:rgba(14,165,233,.15);
    filter:blur(30px);
    animation:zweven var(--duur) linear infinite
}
@keyframes zweven{
    0%{transform:translate(0,0);opacity:0}
    50%{opacity:.8}
    100%{transform:translate(100px,-100vh);opacity:0}
}

/* Glans & overloop-tekst */
.tekst-verloop{
    background:linear-gradient(90deg,var(--blauw),var(--indigo));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.gloed-tekst{text-shadow:0 0 10px rgba(14,165,233,.3)}

/*  Buttons */
.knop{
    display:inline-block;padding:1rem 2rem;border-radius:var(--radius-xl);
    font-weight:600;text-align:center;transition:.3s
}
.knop-gloed{
    background:linear-gradient(to right,#2563eb,#4f46e5);color:#fff;
    box-shadow:0 0 15px -2px rgba(14,165,233,.5)
}
.knop-gloed:hover{background:linear-gradient(to right,#1d4ed8,#3730a3);box-shadow:0 0 25px 0 rgba(14,165,233,.6)}
.knop-omrand{
    background:transparent;border:2px solid var(--slate-400);color:#fff
}
.knop-omrand:hover{background:rgba(255,255,255,.1);border-color:#fff}

/*  Layout utiliteiten (NL-namen) */
.container{max-width:80rem;margin-inline:auto}
.relatief{position:relative}
.z-hoog{z-index:10}
.vulling-x-6{padding-inline:1.5rem}
.volhoog{height:100%}
.flexdoos{display:flex}
.kolom{flex-direction:column}
.rij{flex-direction:row}
@media(min-width:1024px){.flex-lg-rij{flex-direction:row}}
@media(min-width:1024px){.breed-50{width:50%}}
.volbreed{width:100%}
.gat-12{gap:3rem}.gat-4{gap:1rem}
.pad-top-24{padding-top:6rem}.pad-bot-20{padding-bottom:5rem}
.mar-bot-6{margin-bottom:1.5rem}.mar-bot-8{margin-bottom:2rem}
.mar-top-12{margin-top:3rem}

/* Responsieve kop */
.kop-groot{font-size:2.25rem;line-height:1.2;font-weight:800}
@media(min-width:768px){.kop-groot{font-size:3rem}}
@media(min-width:1024px){.kop-groot{font-size:3.75rem}}

/*  Avatars */
.avatar-stapel{display:flex}
.avatar-stapel img{
    width:3rem;height:3rem;border-radius:50%;
    border:2px solid var(--slate-800);transition:.3s
}
.avatar-stapel img+img{margin-left:-1rem}
.avatar-stapel img:hover{border-color:#3b82f6;transform:translateY(-.25rem)}

/*  Kaarten */
.kaart-hoofd{
    background:rgba(30,41,59,.7);
    backdrop-filter:blur(12px);
    border:1px solid rgba(51,65,85,.5);
    border-radius:var(--radius-xl);
    padding:2rem;
    box-shadow:0 0 30px -5px rgba(14,165,233,.3);
    transform:rotate(1deg);transition:transform .5s
}
.kaart-hoofd:hover{transform:rotate(0)}
.kaart-drijvend{
    position:absolute;backdrop-filter:blur(12px);
    background:rgba(30,41,59,.8);
    border:1px solid rgba(51,65,85,.5);
    border-radius:var(--radius-xl);padding:1.5rem;width:16rem;
    box-shadow:0 10px 25px -5px rgba(0,0,0,.1);
    transition:transform .5s
}
.kaart-drijvend:hover{transform:rotate(0)}
.kaart-gloed{box-shadow:0 0 30px -5px rgba(14,165,233,.3)}

/*  Mini-stat grid */
.rooster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat-kaart{
    background:rgba(30,41,59,.5);
    border-radius:.75rem;padding:1rem;text-align:center;
    transition:.3s
}
.stat-kaart:hover{background:rgba(30,41,59,.7)}

/*  Animaties (slide / fade / pulse) */
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.slide-up{animation:slideUp 1s ease-out forwards;opacity:0}
.fade-in{animation:fadeIn 1.5s ease-out forwards;opacity:0}
.pulse{animation:pulse 2s infinite}

/*  Scroll indicator */
.scroll-indicator{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%)}
.scroll-pijl{animation:bounce 2s infinite}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0)}
    40%{transform:translateY(-20px)}
    60%{transform:translateY(-10px)}
}