/* ============================================================
   AEGIS IT — styles  ·  3 kleuren: navy #0C101C · goud #C9A267 · off-white #F8F8F8
   Optioneel: self-hosted Inter (privacy/AVG, geen CDN). Plaats de woff2-bestanden in
   /assets/fonts/ en haal het commentaar hieronder weg — dan blijft font-src 'self'.
   @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
     src:url('../fonts/Inter-Variable.woff2') format('woff2-variations');}
   ============================================================ */

  /* ===========================================================
     AEGIS IT · website v1.1
     Palet (3 kleuren, geen vierde): navy #0C101C · goud #C9A267 · off-white #F8F8F8
     Body: Inter   ·   Display: Georgia italic, één goud accentwoord
     =========================================================== */
  :root{
    --navy:#0C101C;
    --gold:#C9A267;
    --off:#F8F8F8;
    --elev-1:rgba(255,255,255,0.022);
    --elev-2:rgba(255,255,255,0.04);
    --hair:rgba(248,248,248,0.09);
    --hair-strong:rgba(248,248,248,0.16);
    --gold-line:rgba(201,162,103,0.40);
    --gold-soft:rgba(201,162,103,0.10);
    --muted:rgba(248,248,248,0.70);
    --faint:rgba(248,248,248,0.46);
    --serif:'Georgia','Times New Roman',serif;
    --sans:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; font-family:var(--sans); color:var(--off);
    background:var(--navy); line-height:1.7; -webkit-font-smoothing:antialiased;
    overflow-x:hidden; letter-spacing:0.1px;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

  /* shared type */
  .eyebrow{font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--gold);
    font-weight:600; display:inline-flex; align-items:center; gap:12px;}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--gold-line);}
  .index{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--gold); opacity:.85;
    letter-spacing:1px;}
  h2.title{font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(30px,4.4vw,46px); line-height:1.12; margin:18px 0 0; color:var(--off);
    letter-spacing:-0.4px;}
  h2.title strong{color:var(--gold); font-weight:700;}
  .lead{color:var(--muted); font-size:17px; max-width:680px; margin:22px 0 0;}

  /* ===================== NAV ===================== */
  header.nav{position:sticky; top:0; z-index:60; transition:background .3s, border-color .3s;
    border-bottom:1px solid transparent;}
  header.nav::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px;
    background:linear-gradient(90deg,var(--gold),rgba(201,162,103,0.35) 60%,var(--gold));}
  header.nav.scrolled{background:rgba(12,16,28,0.88); backdrop-filter:blur(12px);
    border-bottom-color:var(--hair);}
  .nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;}
  .nav-menu{display:flex; align-items:center; gap:34px;}
  .nav-menu a.link{font-size:12px; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted);
    position:relative; padding:4px 0; transition:color .2s;}
  .nav-menu a.link::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
    background:var(--gold); transition:width .25s ease;}
  .nav-menu a.link:hover{color:var(--off);} .nav-menu a.link:hover::after{width:100%;}
  .nav-menu a.cta{background:var(--gold); color:var(--navy); padding:10px 18px; border-radius:2px;
    font-weight:700; letter-spacing:1px; font-size:12px; text-transform:uppercase; transition:filter .2s, transform .2s;}
  .nav-menu a.cta:hover{filter:brightness(1.07); transform:translateY(-1px);}
  .nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;}
  .nav-toggle span{display:block; width:24px; height:2px; background:var(--off); margin:5px 0; transition:.3s;}

  /* ===================== HERO ===================== */
  .hero{position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:center;
    padding:90px 0 70px;
    background:radial-gradient(130% 100% at 78% 6%, rgba(255,255,255,0.05) 0%, rgba(12,16,28,0) 46%), var(--navy);}
  .hero .lattice{position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-repeat:repeat; background-size:120px 104px; background-image:url('../img/lattice.svg');}
  .hero-grid{position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center; width:100%;}
  .hero h1{font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(40px,6vw,70px); line-height:1.05; margin:24px 0 0; color:var(--off); letter-spacing:-0.6px;}
  .hero h1 strong{color:var(--gold); font-weight:700;}
  .hero p.sub{font-size:18px; color:var(--muted); margin:26px 0 0; max-width:540px;}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px;}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; font-size:12.5px;
    font-weight:700; letter-spacing:1.2px; text-transform:uppercase; border-radius:2px;
    transition:all .22s; cursor:pointer; border:1px solid transparent;}
  .btn-gold{background:var(--gold); color:var(--navy);}
  .btn-gold:hover{filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(201,162,103,0.5);}
  .btn-ghost{border-color:var(--gold-line); color:var(--gold); background:transparent;}
  .btn-ghost:hover{background:var(--gold-soft); border-color:var(--gold);}
  .btn .arr{transition:transform .22s;} .btn:hover .arr{transform:translateX(4px);}
  .standards-rail{margin-top:46px; display:flex; flex-wrap:wrap; gap:11px 24px; font-size:11px;
    letter-spacing:2px; text-transform:uppercase; color:var(--faint);}
  .standards-rail span{display:inline-flex; align-items:center; gap:9px;}
  .standards-rail span::before{content:""; width:5px; height:5px; background:var(--gold); transform:rotate(45deg);}

  /* hero shield composition */
  .shield-wrap{position:relative; display:flex; justify-content:center; align-items:center; min-height:340px;}
  .shield-glow{position:absolute; width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,103,0.22) 0%, rgba(201,162,103,0) 68%);
    filter:blur(6px); animation:pulse 6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{transform:scale(1); opacity:.85;} 50%{transform:scale(1.06); opacity:1;}}
  .shield-svg{position:relative; width:300px; overflow:visible; filter:drop-shadow(0 18px 40px rgba(0,0,0,0.45));}

  /* ===================== SECTION SHELL ===================== */
  section.block{position:relative; padding:118px 0; border-top:1px solid var(--hair);}
  .band{background:
    linear-gradient(180deg, var(--elev-1), rgba(255,255,255,0));}
  .sec-head{margin-bottom:54px;}

  /* ===================== PIJLERS ===================== */
  .pillar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .pillar{padding:34px 26px; border:1px solid var(--hair); background:var(--elev-1);
    transition:transform .25s, border-color .25s, background .25s; position:relative; overflow:hidden;}
  .pillar::before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--gold);
    transform:scaleX(0); transform-origin:left; transition:transform .3s;}
  .pillar:hover{transform:translateY(-4px); border-color:var(--hair-strong); background:var(--elev-2);}
  .pillar:hover::before{transform:scaleX(1);}
  .pillar .ico{width:28px; margin-bottom:20px;}
  .pillar h3{font-size:15.5px; font-weight:700; letter-spacing:.3px; margin:0 0 9px; color:var(--off);}
  .pillar p{font-size:13.5px; color:var(--muted); margin:0;}

  /* ===================== TIERS ===================== */
  .tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
  .tier{border:1px solid var(--hair); background:var(--elev-1); position:relative; display:flex;
    flex-direction:column; transition:transform .25s, border-color .25s;}
  .tier:hover{transform:translateY(-4px); border-color:var(--hair-strong);}
  .tier.featured{border-color:var(--gold-line); background:linear-gradient(180deg, var(--gold-soft), var(--elev-1) 40%);
    box-shadow:0 30px 60px -36px rgba(201,162,103,0.45);}
  .tier.featured::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gold);}
  .tier .ribbon{position:absolute; top:16px; right:0; background:var(--gold); color:var(--navy);
    font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:5px 12px;}
  .tier .th{padding:30px 28px 22px; border-bottom:1px solid var(--hair);}
  .tier .badge{font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); font-weight:700;}
  .tier .tname{font-family:var(--serif); font-style:italic; font-size:25px; margin:8px 0 0; color:var(--off);}
  .tier .tdesc{font-size:13.5px; color:var(--muted); margin:13px 0 0;}
  .tier ul{list-style:none; margin:0; padding:24px 28px 30px; flex:1;}
  .tier li{position:relative; padding:0 0 12px 22px; font-size:13.5px; color:var(--off);}
  .tier li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--gold); transform:rotate(45deg);}
  .tier li.from{color:var(--faint); font-style:italic;} .tier li.from::before{background:var(--faint);}
  .tier-note{margin-top:26px; font-size:12.5px; color:var(--faint); border-left:2px solid var(--gold);
    padding:6px 0 6px 16px; max-width:780px; line-height:1.7;}

  /* ===================== SOEVEREINITEIT ===================== */
  .sov-ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:28px;
    border:1px solid var(--hair);}
  .rung{height:8px;} .rung.r1{background:var(--gold);} .rung.r2{background:rgba(201,162,103,0.55);}
  .rung.r3{background:rgba(201,162,103,0.26);}
  .sov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--hair); border-top:0;}
  .sov{padding:32px 28px; border-right:1px solid var(--hair); background:var(--elev-1); transition:background .25s;}
  .sov:last-child{border-right:0;} .sov:hover{background:var(--elev-2);}
  .sov .lvl{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--faint);}
  .sov .stitle{font-size:19px; font-weight:700; margin:9px 0 2px; color:var(--gold);}
  .sov .juris{font-size:12px; letter-spacing:.4px; color:var(--muted); margin-bottom:15px;}
  .sov p{font-size:13.5px; color:var(--off); margin:0;}
  .sov-foot{margin-top:28px; font-size:15px; color:var(--muted); max-width:780px;}
  .sov-foot strong{color:var(--off);}

  /* ===================== DIENSTEN ===================== */
  .svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--hair);}
  .svc{padding:26px 30px; display:flex; gap:20px; align-items:flex-start; position:relative;
    border-bottom:1px solid var(--hair); transition:background .22s;}
  .svc:nth-child(odd){border-right:1px solid var(--hair);}
  .svc:nth-last-child(-n+2){border-bottom:0;}
  .svc:hover{background:var(--elev-2);}
  .svc .num{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--gold);
    min-width:46px; line-height:1; opacity:.9;}
  .svc h3{font-size:15.5px; font-weight:700; margin:2px 0 4px; color:var(--off);}
  .svc p{font-size:13px; color:var(--muted); margin:0;}

  /* ===================== STANDAARDEN ===================== */
  .std{border:1px solid var(--gold-line); background:linear-gradient(180deg,var(--gold-soft),rgba(255,255,255,0) 36%);
    padding:54px 48px; position:relative; overflow:hidden;}
  .std::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gold);}
  .std .badges{display:flex; flex-wrap:wrap; gap:11px; margin:28px 0 0;}
  .std .badges b{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
    color:var(--gold); border:1px solid var(--gold-line); padding:9px 15px; border-radius:2px; transition:.2s;}
  .std .badges b:hover{background:var(--gold-soft);}
  .std .law{font-size:14px; color:var(--muted); margin:28px 0 0; max-width:760px;
    border-left:2px solid var(--hair-strong); padding-left:18px; line-height:1.75;}

  /* ===================== PORTAAL ===================== */
  .portal{border:1px solid var(--hair-strong); background:
    radial-gradient(120% 160% at 90% 0%, var(--gold-soft) 0%, rgba(255,255,255,0) 50%), var(--elev-2);
    padding:54px 48px; display:flex; flex-wrap:wrap; gap:36px; align-items:center;
    justify-content:space-between; position:relative; overflow:hidden;}
  .portal::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gold);}
  .portal .ptxt{max-width:640px;}
  .portal h2{font-family:var(--serif); font-style:italic; font-size:30px; margin:14px 0 12px; color:var(--off);}
  .portal h2 strong{color:var(--gold); font-weight:700;}
  .portal p{font-size:14.5px; color:var(--muted); margin:0;}
  .prio{display:flex; gap:9px; flex-wrap:wrap; margin-top:20px;}
  .prio span{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--faint);
    border:1px solid var(--hair); padding:6px 12px; border-radius:2px;}

  /* ===================== CTA / CONTACT ===================== */
  .cta-final{position:relative; overflow:hidden; padding:128px 0; text-align:center;
    background:radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,0.05) 0%, var(--navy) 58%);
    border-top:1px solid var(--hair);}
  .cta-final .mark-faint{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:520px; opacity:.04; pointer-events:none;}
  .cta-final h2{position:relative; font-family:var(--serif); font-style:italic;
    font-size:clamp(32px,5vw,52px); margin:18px 0 0; color:var(--off);}
  .cta-final h2 strong{color:var(--gold); font-weight:700;}
  .cta-final p{position:relative; color:var(--muted); font-size:17px; max-width:560px; margin:20px auto 0;}
  .cta-final .cta-row{position:relative; justify-content:center; margin-top:38px;}
  .contact-line{position:relative; margin-top:46px; display:flex; flex-wrap:wrap; gap:12px 36px; justify-content:center; font-size:14px; color:var(--muted);}
  .contact-line a{color:var(--off); border-bottom:1px solid transparent; transition:border-color .2s;}
  .contact-line a:hover{border-bottom-color:var(--gold);}
  .contact-line .k{color:var(--gold); font-weight:700; letter-spacing:1.5px; font-size:11px; margin-right:8px;}

  /* ===================== FOOTER ===================== */
  footer.site{border-top:1px solid var(--hair); padding:46px 0;}
  .foot-inner{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;}
  .foot-tag{font-size:13px; color:var(--faint); letter-spacing:.3px; font-style:italic;}
  .foot-meta{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--faint);}

  /* utilities (vervangen inline-styles t.b.v. strikte CSP) */
  .mb-0{margin-bottom:0 !important;}
  .mt-14{margin-top:14px !important;}
  .center-eyebrow{justify-content:center;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:none;}
  .hero .anim{opacity:0; transform:translateY(20px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
  .hero .anim:nth-child(1){animation-delay:.06s;} .hero .anim:nth-child(2){animation-delay:.18s;}
  .hero .anim:nth-child(3){animation-delay:.30s;} .hero .anim:nth-child(4){animation-delay:.42s;}
  .hero .anim:nth-child(5){animation-delay:.54s;}
  .shield-wrap{opacity:0; animation:fade 1.2s ease .4s forwards;}
  @keyframes rise{to{opacity:1; transform:none;}}
  @keyframes fade{to{opacity:1;}}
  @media (prefers-reduced-motion:reduce){
    .reveal,.hero .anim,.shield-wrap{opacity:1 !important; transform:none !important; animation:none !important;}
    .shield-glow{animation:none !important;}
  }

  /* responsive */
  @media (max-width:1000px){
    .pillar-grid{grid-template-columns:repeat(2,1fr);}
    .hero-grid{grid-template-columns:1fr;} .shield-wrap{order:-1; min-height:auto; margin-bottom:10px;}
    .shield-svg{width:200px;} .shield-glow{width:280px; height:280px;}
  }
  @media (max-width:820px){
    .tier-grid{grid-template-columns:1fr;}
    .sov-ladder,.sov-grid{grid-template-columns:1fr;}
    .sov{border-right:0; border-bottom:1px solid var(--hair);} .sov:last-child{border-bottom:0;}
    .rung{height:6px;}
    .svc-grid{grid-template-columns:1fr;}
    .svc:nth-child(odd){border-right:0;} .svc{border-bottom:1px solid var(--hair);}
    .svc:last-child{border-bottom:0;}
    .nav-menu{position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0; align-items:stretch;
      background:rgba(12,16,28,0.97); backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); display:none; padding:8px 0;}
    .nav-menu.open{display:flex;}
    .nav-menu a.link{padding:15px 32px;} .nav-menu a.cta{margin:8px 32px; text-align:center;}
    .nav-toggle{display:block;}
    section.block{padding:78px 0;}
    .std,.portal{padding:34px 26px;} .cta-final{padding:90px 0;}
  }