/* --- Fonts & basis --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --brand:red;
  --brand-2:#fd0303;
  --bg-weak:#f0efef;
  --text:#111;
  --text-inv:#fff;
  --radius:8px;
  --gap:16px;
  --container:1200px;
  --nav-h: 64px;             /* hoogte vaste navbar */
}
@media (max-width: 768px){
  :root{ --nav-h: 60px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

/* Helpers */
.wrap {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}
.hidden { display: none !important; }
.spacer-vert { height: 16px; }

/* --- Navbar (vast) --- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg-weak);
  border-bottom: 1px solid #e7e7e7;
  height: var(--nav-h);
}
.navbar .inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.logo { color: var(--brand-2); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); margin: 0; }

.nav-offset { height: var(--nav-h); } /* spacer onder vaste navbar */

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu a {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text-inv);
  font-weight: 600;
  background: var(--brand);
  border-radius: var(--radius);
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
.menu a:hover { background: #000; transform: translateY(-1px); }
/* specifieke varianten */
.menu .home { background: rgb(0, 255, 26) !important; color: #000; }
.menu .docs { background: #444; }
.menu .order { background: rgb(165,165,165); color:#000; }

.hamburger {
  display: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 0;
  background: transparent;
}
/* Mobiel menu */
@media (max-width: 768px) {
  .hamburger { display: grid; place-items: center; height: 100%; }
  .menu {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    background: #f7f7f7;
    padding: 12px;
    border-bottom: 1px solid #e7e7e7;
    z-index: 999;
  }
  .menu.is-open { display: flex; }
  .menu a { width: 100%; text-align: center; }
}

/* --- Hero (consolidated) --- */
.hero-image {
  position: relative;
  min-height: clamp(500px, 70vh, 820px);
  background-image: url("ChatGPT.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-image::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.50); /* iets donkerder voor leesbaarheid */
}

/* Grid: desktop 2 kolommen, links copy – rechts annotations */
.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: "copy annotations";
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: inherit;
  padding: 0 clamp(20px, 4vw, 60px);
  z-index: 1; /* boven overlay */
}

/* Linkerkolom */
.hero-copy{
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontaal centreren binnen kolom */
  justify-content: center; /* verticaal centreren */
  text-align: center;
  margin: 0 auto;
  color: var(--text-inv);
  max-width: 560px;
}
.hero-copy h1{
  margin: 0 0 10px;
  line-height: 1.18;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 46px);
}
.hero-copy .lead{
  margin: 6px 0 10px;
  font-weight: 600;
}
.hero-copy .sublead{
  margin: 6px 0 16px;
  font-weight: 500;
  opacity: .95;
}

/* Rode lijntjes */
.hero-line{
  width: 140px;
  height: 4px;
  background: var(--brand-2);
  border-radius: 4px;
  margin: 12px auto;
}

/* Gele CTA */
.hero-cta{
  margin-top: 18px;
  background: #ffea00;
  color: #000;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}

/* Rechterkolom (logo + 3 regels) – GEEN absolute meer */
.hero-annotations{
  grid-area: annotations;
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontaal centreren */
  justify-content: center; /* verticaal centreren */
  text-align: center;
  gap: 12px;
  color: var(--text-inv);
}
.hero-annotations > *{ position: static; }

.hero-logo{
  width: clamp(110px, 12vw, 160px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  margin-bottom: 6px;
}
.hero-annotations .tag{
  max-width: 360px;
  line-height: 1.35;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.hero-annotations .tag-2{
  font-weight: 800;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}

/* Mobiel: 1 kolom, annotations onder de copy (onder de knop) */
@media (max-width: 768px){
  .hero-inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "annotations";        /* rechterkolom onderaan */
    gap: 16px;
    padding: 40px 20px;
  }
  .hero-copy{
    align-items: center;
    text-align: center;
    max-width: 680px;
  }
  .hero-copy h1{
    font-size: clamp(30px, 8vw, 44px);
  }
  .hero-cta{
    width: 100%;
    border-radius: 9999px;
    padding: 14px 20px;
    font-size: 1rem;
  }
  .hero-annotations{
    margin-top: 32px;       /* wil je hem nog lager? verhoog naar 48px/64px */
  }
  .hero-logo{
    width: clamp(100px, 30vw, 160px);
  }
  .hero-annotations .tag{
    font-size: clamp(0.9rem, 3.6vw, 1rem);
    max-width: 90%;
  }
}

/* --- Grids/containers --- */
.grid {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.container2 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.containerX { padding: 40px 0; }

.column,
.column2,
.column3,
.column-li1,
.column-li2,
.extra-info,
.column-img {
  background: #fff;
  padding: 16px;
  border-radius: var(--radius);
}

.text-box {
  padding: 12px;
  border-radius: var(--radius);
  background: #ffffff;
}

.fill-box {
  background: #ffffff;
  padding: 12px;
  margin-inline: auto;
  border-radius: var(--radius);
  max-width: 340px;
  text-align: center;
}

/* Buttons */
.button, .button2 {
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius);
  margin-top: 10px;
}
.button { background: yellow; color: #000; }
.button2 { background: rgb(82,175,252); color: #000; }

/* Secties */
.robot-section{
  background:#f5f7f5;
  padding:40px 0;
}
.section-title { text-align:left; margin:0 0 24px; }
.robot-section h2{ font-size:2rem; margin:0 0 24px; text-align:left; }

/* Cards */
.robot-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px, 1fr));
  gap:24px;
}
@media (max-width: 960px){
  .robot-cards{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
}
.robot-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  transition:transform .3s, box-shadow .3s;
  display:flex;
  flex-direction:column;
}
.robot-card:hover{
  transform:scale(1.03);
  box-shadow:0 8px 16px rgba(0,0,0,.15);
}
.robot-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.card-text{ padding:18px; text-align:left; }
.card-text h3{ font-size:1.1rem; margin:0 0 8px; }
.card-text p{ margin:0; color:#666; }

.robot-card img.card-img--small {
  width: 75%;
  height: 60%;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  margin: 8px auto;
}
/* Footer */
.footer{
  text-align:center;
  padding:24px 0 40px;
  color:#555;
}

/* Toegankelijkheid: minder animatie */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}


/* --- Hero tweaks: logo iets hoger + meer regelruimte rechts
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --- */
.hero-annotations .hero-logo{
  position: relative;
  top: -50px;          /* logo hoger (speel met -10px … -28px) */
}

/* Ruimer zetten van de drie zinnen rechts */
.hero-annotations .tag{
  line-height: 4.7;    /* meer ruimte tussen de regels */
}

/* Extra ruimte tussen de afzonderlijke zinnen */
.hero-annotations .tag + .tag{
  margin-top: 10px;
}

/* Mobiel: niet te krap; zet het logo weer neutraal */
@media (max-width: 768px){
  .hero-annotations .hero-logo{ top: 0; }
  .hero-annotations .tag{ line-height: 1.6; }
  .hero-annotations .tag + .tag{ margin-top: 8px; }
}






/* --- Center section "Axiom of Cyrill" --- */
section.wrap {
  text-align: center;          /* centreert alle tekst binnen de sectie */
}

section.wrap .text-box {
  display: flex;
  flex-direction: column;
  align-items: center;         /* horizontaal centreren */
  justify-content: center;     /* optioneel, als je verticale centrering wilt */
}

section.wrap h1,
section.wrap h2 {
  text-align: center;
  max-width: 900px;            /* voorkomt dat de tekst te breed wordt */
  margin: 0 auto 16px auto;    /* zorgt voor nette marges */
}


/* --- Fix: mobiel menu zichtbaar boven hero --- */
@media (max-width: 768px) {
  .menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    background: #f7f7f7;
    padding: 12px;
    border-bottom: 1px solid #e7e7e7;
    z-index: 2000; /* verhoogd van 999 naar 2000 */
  }

  .menu.is-open { 
    display: flex; 
  }

  /* Zorg dat hamburger zelf ook bovenaan staat */
  .hamburger {
    z-index: 2100;
  }

@media (max-width: 768px){
  .navbar{ z-index: 5000 !important; }
  .menu{ z-index: 6000 !important; }
}

/* ====== MOBILE HOTFIX PACK (Android/Samsung) ====== */

/* 1) Zorg dat hero-overlay nooit boven de navbar/menu komt */
.hero-image { position: relative; z-index: 0; }
.hero-image::before { z-index: 0; pointer-events: none; } /* overlay vangt geen taps */

/* 2) Navbar en menu ALTIJD boven alles (stacking-context fix) */
.navbar { position: fixed; top:0; left:0; right:0; z-index: 5000; }
.nav-offset { height: var(--nav-h); } /* zodat content niet onder navbar kruipt */

/* 3) Mobiel menu zichtbaar boven hero en tappable */
@media (max-width: 768px){
  .hamburger { z-index: 6000; }              /* knop altijd bovenaan */
  .menu{
    position: fixed !important;
    top: var(--nav-h); left: 0; right: 0;
    display: none;
    flex-direction: column;
    background: #f7f7f7;
    padding: 12px;
    border-bottom: 1px solid #e7e7e7;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    z-index: 5500 !important;                /* boven hero/overlay */
  }
  .menu.is-open{ display:flex; }

  /* veiligheidsnet: niets in de hero mag erboven komen op mobiel */
  .hero-inner, .hero-annotations, .hero-copy { z-index: 1; position: relative; }
}

/* 4) Debug/UX: laat zien dat de burger “open” is */
.hamburger[aria-expanded="true"]{ outline: 2px solid rgba(0,0,0,.15); border-radius: 8px; }