:root{
      --accent:rgba(231, 65, 24, 0.12);
      --dark:#0b0b0b;
      --muted:#6b7280;
      --max-width:1200px;
    }
    *{box-sizing:border-box}

body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; margin:0; color:#111}

    /* Hero (foto + tekst) */
    .hero{
      min-height:70vh;
      display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 20px 80px;position:relative;
      color:#ffffff;overflow:hidden
    }
    .hero::before{
      content:'';position:absolute;inset:0;background-image:url('/mnt/data/fe9a4ce7-ae35-4407-95e8-d45057b7f5b7.png');background-size:cover;background-position:center;background-attachment:fixed;filter:contrast(105%) brightness(0.55);z-index:0;
    }
    .hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(42, 49, 255, 0.138), rgba(0, 0, 0, 0.4));z-index:1}
    .hero {background-image: url("images/Network3.jpg");background-repeat: no-repeat;background-size: cover;background-position: top}
    .hero .inner{position:relative;z-index:2;max-width:var(--max-width);margin:0 auto}
    .hero h1{font-size:3.4rem;letter-spacing:2px;margin:0 0 12px 0;font-weight:900}
    .hero p{font-size:1.125rem;margin:0 0 22px;color:rgb(255, 255, 255);max-width:780px;margin-left:auto;margin-right:auto}
    .hero .cta{display:inline-flex;gap:12px}
    .btn{display:inline-block;padding:12px 20px;border-radius:6px;text-decoration:none;font-weight:700}
    .btn-primary{background:var(--accent);color:#ffffff}
    .btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.3);color:#ffffff}

    /* Features */
    .section{padding:60px 20px;}
    .container{max-width:var(--max-width);margin:0 auto; margin-bottom: 40px;}
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;align-items:start}
    .feature{background:#ffffff;border-radius:12px;padding:28px;text-align:center;box-shadow:0 6px 20px rgba(17, 6, 6, 0.06);height: 360px;} /* box settings */
    .feature .icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:linear-gradient(180deg, rgba(72, 148, 235, 0.12), rgba(72, 148, 235, 0.06));}
    .feature:hover{transform: scale(1.1);transition: transform 0.3s ease;}
    .feature h3{margin:0 0 8px 0;font-size:1.125rem}
    .feature p{margin:0;color:var(--muted)}
    .icon img {
      width: 50px;     /* Verkleinen */
      height: auto;    /* Eventueel: of laat height weg voor automatisch schalen */
      object-fit: contain;
    }

    .niceboxes{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:36px;
      align-items:start}
    
    .nicebox{ /* nicebox settings */
      background:#ffffff;
      border-radius:12px;
      padding:12px;
      text-align:left;
      box-shadow:0 6px 20px rgba(12,18,26,0.06);
      color: #000000;
      position: relative;
      overflow: hidden;
      height: 180px;
    }     

    .nicebox h3{
      margin:0 0 8px 0;
      font-size:1.125rem
    }
    .nicebox p{
      margin:0;
      color:var(--muted)
    }
    .nicebox:hover {
      background:rgba(255, 255, 255, 0.12);
      transform: scale(1.1);
      transition: transform 0.3s ease;
    }

    /* Alleen boxen met afbeelding */
    .nicebox.has-image {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    /* Tekst links */
    .nicebox-content {
      flex: 1;
    }

    /* Afbeelding rechts */
    .nicebox-img {
      width: 140px;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
      background: transparent;
    }
    
    /* Top navigation */
    .topnav{position:fixed;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 70px;background:rgb(255, 255, 255);backdrop-filter:blur(6px);z-index:40;border-bottom:1px solid rgba(16,24,40,0.04)}
    .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dark)}
    .logo img{height:36px;display:block}

    /* BASIS voor topnav */
    .nav-links > ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 25px;
      align-items: center;
    }

    .nav-links ul li {
      position: relative;
    }

    .nav-links{
      display:flex;
      gap:18px;
      align-items:center
    }
    
    .nav-links a {
      text-decoration: none;
      color: rgba(15,23,42,0.9); /* letter kleur van links in header */
      padding: 10px;
      display: block;
      border-radius:6px;
      font-weight:500;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0%;
      height: 2px;
      background-color: rgb(36, 143, 230);
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    /* --- LEVEL 2 DROPDOWN (Enterprise / MKB) --- */

    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;        /* onder Diensten */
      margin-top: 6px;
      left: 0;
      background: #fff;
      min-width: 180px;
      border-radius: 6px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.1);
      padding: 10px 0;
      z-index: 1000;
    }

    .dropdown::after {
      content: "";
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      height: 6px;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content li {
      position: relative;
      list-style: none; /* Voorkomt blokje bij hoveren */
    }

    /* --- LEVEL 3 SUBMENU (rechts naast Enterprise / MKB) --- */
    .sub-menu {
      display: none;
      position: absolute;
      top: 0;             /* uitlijnen */
      left: 100%;         /* rechts van Enterprise/MKB */
      background: #fff;
      min-width: 200px;
      border-radius: 6px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.15);
      padding: 10px 0;
      z-index: 2000;
    }

    /* tonen bij hover */
    .sub-dropdown:hover .sub-menu {
      display: block;
    }

    .sub-menu li a {
      white-space: nowrap;
    }

    /* checklist */
    .checklist {
      list-style: none;        /* standaard bullets weg */
      padding-left: 0;
      margin: 0;
      color:var(--muted)
    }

    .checklist li {
      position: relative;
      padding-left: 28px;      /* ruimte voor het vinkje */
      margin-bottom: 8px;
    }

    .checklist li::before {
      content: "✔";            /* het vinkje */
      position: absolute;
      left: 0;
      top: 0;
      color: #30e84f;           /* ← kleur van het vinkje */
      font-weight: bold;
    }

    /* Afbeelding over mij */
    .personal-image {
      width: 400px;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
      background: transparent;
    }

    .site-image {
      width: 600px;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
      background: transparent;
      background-size: cover;
    }

    footer{padding:40px 20px;background:#0b1220;color:#fff;text-align:center}