@charset "UTF-8";
/* CSS Document */

    :root{
      --bg:#000000;
      --panel:#0b0b0b;
      --panel2:#111111;
      --text:#ffffff;
      --muted:#cfcfcf;
      --accent:#FFA500;       /* Fel oranje */
      --line:#2a2a2a;
      --glow: rgba(255, 165, 0, 0.15); /* Subtiele oranje gloed voor de tegels */
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height:1.6;
    }

    .wrap{
      max-width:1200px;
      margin:0 auto;
      padding:0 5%;
    }
	a {color: #FFA500;
	  text-decoration: none;
	}
	a:hover {
	  font-weight: 700;
	}

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:10;
      background: rgba(0,0,0,.92);
      backdrop-filter: blur(8px);
      border-bottom:2px solid var(--accent);
    }

    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px 0;
    }

    .logo{
      font-size:1.35rem;
      font-weight:800;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .logo span{ color:var(--accent); }

    /* Hero */
    .hero{
      padding:70px 0 30px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:40px;
      align-items:center;
    }

    h1{
      margin:0 0 14px;
      font-size:3rem;
      line-height:1.08;
      text-transform:uppercase;
      letter-spacing:1.5px;
      color: var(--text);
    }

    .hero p{
      margin:0;
      font-size:1.15rem;
      color:var(--muted);
      max-width:58ch;
    }

    .hero-badge{
      display:inline-block;
      margin-bottom:14px;
      padding:6px 14px;
      border:1px solid var(--accent);
      border-radius:999px;
      color:var(--text);
      font-size:.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .hero-badge strong{ color:var(--accent); }

    /* Afbeelding container */
    .hero-media{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-media img{
      width: 100%;
      max-width: 450px; /* Pas dit aan naar wens */
      height: auto;
      display: block;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    }

    /* Tegels */
    .tiles{
      padding:40px 0 80px;
    }

    .grid-container{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap:25px;
    }

    .tegel{
      background: var(--panel2);
      border: 2px solid var(--accent);
      border-radius: 16px;
      padding: 40px 30px;
      text-align:center;
      transition: transform .3s ease, box-shadow .3s ease;
      position:relative;
      overflow: hidden;
    }

    .tegel:hover{
      transform: translateY(-8px);
      box-shadow: 0 15px 35px var(--glow);
    }

    .tegel h2{
      margin:0 0 15px;
      color:var(--accent);
      font-size:1.5rem;
      text-transform: uppercase;
    }

    .tegel p{
      margin:0;
      color:#e0e0e0;
      font-size:1.05rem;
    }

    /* Footer */
    footer{
      background: var(--panel);
      border-top: 1px solid var(--line);
      padding:60px 0;
      text-align:center;
    }

    footer h3{
      margin:0 0 15px;
      font-size:1.6rem;
      color:var(--text);
    }

    .email-link{
      color:var(--accent);
      font-size:1.3rem;
      font-weight:800;
      text-decoration: none;
      border-bottom: 2px solid var(--accent);
      padding-bottom: 4px;
      transition: opacity 0.2s;
    }
	  
	/* Basis menu */
.main-menu {
    background: #000;
    padding: 15px 30px;
    position: relative;
}

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.main-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-family: Arial, sans-serif;
    transition: color 0.3s ease;
}

.main-menu a:hover {
    color: #FFA500;
}

/* Checkbox verbergen */
#menu-toggle {
    display: none;
}

/* Hamburger verbergen op desktop */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: #fff;
    margin: 6px 0;
    transition: 0.3s;
}

/* Mobiel */
@media (max-width: 768px) {

    .hamburger {
        display: block;
    }

    .menu-items {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-top: 15px;
    }

    .menu-items li {
        border-top: 1px solid #222;
    }

    .menu-items a {
        display: block;
        padding: 15px 0;
    }

    /* Toon menu wanneer hamburger wordt aangeklikt */
    #menu-toggle:checked ~ .menu-items {
        display: flex;
    }

    /* Verander hamburger naar kruisje */
    #menu-toggle:checked + .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 7px);
    }

    #menu-toggle:checked + .hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked + .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -7px);
    }
}
	 @media (max-width: 768px) {

    .hamburger {
        display: block;
    }

    /* Menu standaard verbergen */
    .main-menu .menu-items {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
        gap: 0;
    }

    .main-menu .menu-items li {
        border-top: 1px solid #222;
    }

    .main-menu .menu-items a {
        display: block;
        padding: 15px 0;
    }

    /* Menu tonen wanneer hamburger is aangeklikt */
    #menu-toggle:checked ~ .menu-items {
        display: flex;
    }
} 

.demo-button {
    display: inline-block;
    background-color: #FFA500;
    color: #000000;
    font-weight: 700;
    font-family: Arial, sans-serif;
    text-decoration: none;
    padding: 14px 28px;
    border: 2px solid #000000;
    border-radius: 60px;
    transition: all 0.3s ease;
}

.demo-button:hover {
    background-color: #000000;
    color: #FFA500;
	border: 1px solid #FFA500;
}

    .email-link:hover{
      opacity: 0.8;
    }

/*accordeon */
.faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.faq-accordion details {
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

.faq-accordion summary {
    background: #000;
    color: #fff;
    font-weight: 700;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.faq-accordion summary:hover {
    color: #FFA500;
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 22px;
}

.faq-accordion details[open] summary::after {
    content: "−";
}

.faq-accordion p {
    margin: 0;
    padding: 20px;
    background: #f7f7f7;
    line-height: 1.6;
    color: #333;
}

    /* Responsive */
    @media (max-width: 900px){
      .hero-grid{ 
        grid-template-columns: 1fr; 
        text-align: center;
      }
      .hero p { margin: 0 auto; }
      h1{ font-size:2.4rem; }
      .hero-media img { max-width: 300px; margin-top: 20px; }
    } 
	  
	  @media (max-width: 768px) {
    .main-menu ul {
        flex-direction: column;
        gap: 15px;
    }
}