/* ==========================================================================
   ENSO PUZZEL — Landingspagina-stylesheet
   Geëxtraheerd uit index.html (was inline) zodat een strikte
   Content-Security-Policy zonder 'unsafe-inline' mogelijk is.
   Tokens (kleuren) komen NIET uit css/tokens.css omdat de landing
   los kan staan; herhaling is bewust en beperkt tot deze pagina.
   ========================================================================== */

/* Enso huisstijl tokens — alleen deze kleuren */
:root{
  --paper:        #FAFAFA;   /* basis wit */
  --paper-soft:   #F4F4F4;   /* gray-50  */
  --paper-warm:   #F2E5E0;   /* samurai-red-subtle (washi) */
  --ink:          #121212;   /* zwart */
  --ink-muted:    #666666;   /* gray-600 */
  --border:       #E0E0E0;   /* gray-200 */
  --border-strong:#B3B3B3;   /* gray-400 */

  --samurai:      #9D0A0E;   /* accent — enso */
  --samurai-hov:  #7A0709;
  --samurai-act:  #5C0406;

  --gold:         #D4AF37;   /* premium — alleen voor boss */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'VT323', monospace;
  color:var(--ink);
  background: var(--paper);
  min-height:100vh;
  overflow-x:hidden;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smoothing: never;
}

/* Subtiel pixelraster — heel licht zodat het wit dominant blijft */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(18,18,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,18,18,0.04) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events:none;
  z-index:1;
}

main{position:relative; z-index:3}

h1,h2,h3,.pixel{
  font-family:'Press Start 2P', monospace;
  letter-spacing: 0.5px;
  line-height:1.4;
}

/* ---------- NAV ---------- */
nav{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 24px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Press Start 2P', monospace;
  font-size: 12px;
  color:var(--ink);
  text-decoration:none;
}
.logo-mark{
  width:24px; height:24px;
  color: var(--samurai);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-mark svg{ width:100%; height:100%; display:block; }
.nav-links{display:flex; gap:18px; font-size:18px}
.nav-links a{color:var(--ink-muted); text-decoration:none}
.nav-links a:hover{color:var(--samurai)}

/* ---------- HERO ---------- */
.hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
  align-items:center;
  padding: 60px 24px 80px;
  max-width:1200px; margin:0 auto;
}
.hero-text h1{
  font-size: clamp(20px, 3.2vw, 36px);
  margin: 0 0 18px;
  color:var(--ink);
}
.hero-text h1 span{color:var(--samurai)}
.hero-text p{
  font-size: clamp(18px, 1.6vw, 22px);
  line-height:1.5;
  color:var(--ink-muted);
  margin: 0 0 14px;
}
.hero-text p strong, .hero-text p em{ color: var(--ink); font-style: normal; }
.badge{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--paper);
  background: var(--ink);
  padding: 8px 12px;
  margin-bottom: 18px;
  box-shadow: 4px 4px 0 var(--border-strong);
}

/* CTA — chunky 16-bit knop in samurai-red (huisstijl) */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:24px}
.btn{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size: 14px;
  text-decoration:none;
  padding: 16px 22px;
  color: var(--paper);
  background: var(--samurai);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  transition: transform 80ms, box-shadow 80ms, background-color 80ms;
  cursor:pointer;
}
.btn:hover{ background: var(--samurai-hov); transform: translateY(2px); box-shadow: 0 4px 0 var(--ink); }
.btn:active{ background: var(--samurai-act); transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost{
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.btn.ghost:hover{ background: var(--paper-soft); }

/* ---------- ENSO ART ---------- */
.hero-art{
  display:flex; justify-content:center; align-items:center;
  position:relative;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin: 0 auto;
}
.enso-svg{ width:100%; height:100%; }

/*
  Enso brushstroke (zie SVG-pad in index.html):
  330° van een cirkel met r=140 → ~806 lengte;
  --enso-dash 860 geeft wat marge zodat de animatie nooit een
  zichtbare "snap" toont aan het eind.
*/
.enso-svg .ring{
  fill:none;
  stroke: var(--samurai);
  stroke-width: 22;
  stroke-linecap: round;
  --enso-dash: 860;
  stroke-dasharray: var(--enso-dash);
  stroke-dashoffset: var(--enso-dash);
  animation: draw 3.5s cubic-bezier(.22,.9,.3,1) 0.4s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Pixel-vlekjes — alleen huisstijlkleuren (zwart / samurai / grijs).
   Posities zitten in eigen klassen (pos-1..4) zodat index.html geen
   inline style-attributen nodig heeft (CSP-vriendelijker). */
.pixel-dot{
  position:absolute;
  width:8px; height:8px;
  background: var(--ink);
  animation: float 4s ease-in-out infinite;
}
.pixel-dot.red{ background: var(--samurai); animation-delay:-1s }
.pixel-dot.gray{ background: var(--border-strong); animation-delay:-2s }
.pixel-dot.pos-1{ top:14%; left:8% }
.pixel-dot.pos-2{ top:24%; right:6% }
.pixel-dot.pos-3{ bottom:18%; left:6% }
.pixel-dot.pos-4{ bottom:10%; right:18% }
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
}

/* ---------- CHALLENGE / LEVELS ---------- */
.challenge{
  padding: 60px 24px;
  background: var(--paper-soft);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.challenge-inner{ max-width: 1100px; margin: 0 auto; }
.challenge h2{
  font-size: clamp(18px, 2.4vw, 28px);
  text-align:center;
  margin: 0 0 8px;
  color: var(--ink);
}
.challenge h2 em{ color: var(--samurai); font-style: normal; }
.challenge .sub{
  text-align:center;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-muted);
  margin: 0 0 36px;
}

.levels{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.level{
  aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P', monospace;
  font-size: clamp(9px, 1vw, 12px);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--border);
  position:relative;
  text-decoration:none;
}
/* Grijs-gradient per rij — van licht naar donker */
.level.row-1 { background:#F4F4F4; color:#8A8A8A; border-color:#E0E0E0; }
.level.row-2 { background:#EDEDED; color:#666666; border-color:#CCCCCC; }
.level.row-3 { background:#CCCCCC; color:#2E2E2E; border-color:#B3B3B3; }
.level.row-4 { background:#B3B3B3; color:#1C1C1C; border-color:#8A8A8A; }
.level.row-5 { background:#8A8A8A; color:#FAFAFA; border-color:#4A4A4A; }

/* Specials — zetten de rij-stijl over */
.level.first{
  background: var(--samurai);
  color: var(--paper);
  border-color: var(--ink);
  animation: pulse 1.6s ease-in-out infinite;
}
.level.boss{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
}
.level.boss::after{
  content:"BOSS";
  position:absolute;
  bottom: 4px;
  font-size: 7px;
  color: var(--ink);
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(157,10,14,0.0); }
  50%{ box-shadow: 0 0 0 4px rgba(157,10,14,0.25); }
}

/* ---------- THEMES ---------- */
.themes{
  padding: 60px 24px;
  max-width:1100px; margin:0 auto;
}
.themes h2{
  font-size: clamp(18px, 2.2vw, 26px);
  text-align:center;
  margin: 0 0 32px;
  color: var(--ink);
}
.theme-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card{
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 22px 18px;
  box-shadow: 6px 6px 0 var(--border-strong);
}
.card h3{
  font-size: 12px;
  color: var(--ink);
  margin: 0 0 12px;
}
.card p{
  font-size: 18px;
  color: var(--ink-muted);
  margin:0;
  line-height:1.4;
}
.card .icon{
  width: 32px; height:32px; margin-bottom:14px;
  image-rendering: pixelated;
}

/* ---------- BONUS / IT-AaaS ---------- */
.bonus{
  margin: 40px 24px;
  max-width: 1100px;
  margin-left:auto; margin-right:auto;
  background: var(--paper-warm);
  border: 3px dashed var(--samurai);
  padding: 22px 24px;
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
}
.bonus-tag{
  font-family:'Press Start 2P', monospace;
  font-size: 10px;
  background: var(--samurai);
  color: var(--paper);
  padding: 6px 10px;
}
.bonus p{
  margin:0;
  font-size: 18px;
  color: var(--ink);
  flex:1;
  min-width: 220px;
}
.bonus a{
  color: var(--samurai);
  text-decoration: underline;
}
.bonus a:hover{ color: var(--samurai-hov) }

/* ---------- FOOTER ---------- */
footer{
  margin-top: 40px;
  padding: 30px 24px;
  border-top: 3px solid var(--ink);
  background: var(--paper);
  text-align:center;
  color: var(--ink-muted);
  font-size: 16px;
}
footer a{ color: var(--ink) }
footer .dot{ color: var(--samurai) }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; padding: 40px 20px 60px; gap: 24px; }
  .hero-art{ order:-1; max-width: 320px; }
  .levels{ grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .theme-grid{ grid-template-columns: 1fr; }
  .nav-links{ display:none }
}
@media (max-width: 480px){
  .hero-text h1{ font-size: 18px }
  .btn{ font-size: 11px; padding: 14px 16px }
  .levels{ grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .level{ font-size: 9px }
  .level.boss::after{ font-size: 6px }
  nav{ padding: 14px 16px }
  .logo{ font-size: 10px }
}


/* ==========================================================================
   SUMI-E ACCENTEN — Enso brush-art met 16-bit pixel-crush
   `image-rendering: pixelated` geeft de PNG's een bewuste retro-crunch zodat
   de penseelstreken zich verstaan met de 16-bit Press Start 2P-typografie.
   ========================================================================== */
.sumi {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.sumi-divider {
  display: block;
  margin: 32px auto;
  max-width: 420px;
  width: 80%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.85;
}
.sumi-divider.thin   { max-width: 320px; }
.sumi-divider.accent { max-width: 360px; }
.sumi-check {
  display: inline-block;
  width: 28px; height: 28px;
  vertical-align: middle;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}