@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,Arial,sans-serif;background:#071016;color:#eaf2f5;
  line-height:1.6;overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:45px 45px;z-index:-1;
}
header{
  position:sticky;top:0;z-index:20;background:rgba(7,16,22,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid #20343c;
  display:flex;justify-content:space-between;align-items:center;padding:16px 6%;
}
.logo{display:flex;gap:12px;align-items:center}
.logo-mark{width:42px;height:42px;border:2px solid #25d9a4;border-radius:50%;display:grid;place-items:center;color:#25d9a4;font-weight:800}
.logo b{display:block;letter-spacing:2px}.logo small{color:#7e969f;font:10px "Space Mono"}
.status{font:12px "Space Mono";color:#25d9a4}.dot{display:inline-block;width:8px;height:8px;background:#25d9a4;border-radius:50%;margin-right:7px}

.hero{min-height:85vh;display:flex;align-items:center;padding:80px 10%;position:relative}
.hero:after{content:"CC-0471";position:absolute;right:7%;bottom:10%;font:90px "Space Mono";color:rgba(255,255,255,.025)}
.kicker{font:12px "Space Mono";color:#25d9a4;letter-spacing:2px;margin-bottom:18px}
h1{font-size:clamp(52px,9vw,105px);line-height:.9;letter-spacing:-5px}
h1 span{color:#25d9a4}
.hero p{max-width:650px;color:#9cb0b7;font-size:18px;margin:28px 0}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
button,.btn{
  border:0;padding:14px 20px;font-weight:700;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:.2s
}
.primary{background:#25d9a4;color:#04110d}.primary:hover{transform:translateY(-2px);filter:brightness(1.1)}
.secondary{background:transparent;color:#eaf2f5;border:1px solid #40545c}.secondary:hover{border-color:#25d9a4;color:#25d9a4}

section{padding:80px 7%;max-width:1250px;margin:auto}
.section-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:35px}
.number{font:700 13px "Space Mono";color:#25d9a4}
.section-head small{color:#718890;font:11px "Space Mono";letter-spacing:2px}
h2{font-size:36px;margin-top:3px}
.panel,.card{background:#0b1920;border:1px solid #20343c;border-radius:12px}
.panel{padding:30px}
.panel h3{font-size:25px;margin-bottom:12px}.panel p{color:#9cb0b7;margin:10px 0}
.alert{display:inline-block;color:#ffb45e;border:1px solid #604b2d;padding:6px 9px;font:11px "Space Mono";margin-bottom:20px}
.stats{display:flex;gap:35px;border-top:1px solid #20343c;margin-top:25px;padding-top:20px}
.stats b{display:block;font-size:28px;color:#25d9a4}.stats span{color:#718890;font-size:12px}

.timeline{border-top:1px solid #172a32;border-bottom:1px solid #172a32}
.events{max-width:800px;margin:auto}
.event{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:22px 0;border-bottom:1px dashed #294049}
.event:last-child{border-bottom:0}.event time{font:700 13px "Space Mono";color:#25d9a4}
.event b{font-size:17px}.event p{color:#849ba3;font-size:14px}.event.hot b{color:#ff786b}
code{font-family:"Space Mono";color:#25d9a4}

.evidence-grid,.suspect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{padding:23px}.card:hover{border-color:#25d9a4;transform:translateY(-3px);transition:.2s}
.icon{font-size:28px;color:#25d9a4}.tag{float:right;color:#657b83;font:10px "Space Mono"}
.card h3{margin:12px 0 7px}.card p{color:#81969e;font-size:14px}.open{background:none;color:#25d9a4;padding:0;margin-top:18px}

.avatar{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#132830;border:1px solid #31515a;color:#25d9a4;font-weight:800}
.suspect .role{color:#25d9a4;font-size:12px}.suspect p{margin:14px 0;color:#81969e;font-size:14px}
.chip{display:inline-block;border:1px solid #294049;color:#82989f;padding:4px 7px;font:9px "Space Mono";margin-right:5px}

.quiz{background:linear-gradient(135deg,#0b1c22,#09141a);border:1px solid #203b42;border-radius:14px;padding:35px}
.quiz label{display:block;margin:10px 0;padding:14px;border:1px solid #263e46;border-radius:8px;cursor:pointer}
.quiz label:hover{border-color:#25d9a4}.quiz input{accent-color:#25d9a4;margin-right:10px}
.result{display:none;margin-top:20px;padding:18px;border-radius:8px;font-weight:700}
.correct{background:#0d352b;color:#61edc0}.wrong{background:#3a211e;color:#ff9688}

footer{text-align:center;padding:50px 20px;border-top:1px solid #20343c;color:#647b83;font-size:12px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:50;place-items:center;padding:20px}
.modal-box{max-width:650px;width:100%;background:#0b1920;border:1px solid #25d9a4;border-radius:12px;padding:30px;position:relative}
.close{position:absolute;right:15px;top:12px;background:none;color:#9cb0b7;font-size:24px}
.modal-box pre{white-space:pre-wrap;color:#8fe9ce;background:#061014;padding:18px;margin-top:18px;border-radius:7px;font:12px "Space Mono";overflow:auto}

@media(max-width:800px){
  .evidence-grid,.suspect-grid{grid-template-columns:1fr 1fr}
  h1{letter-spacing:-3px}.hero{padding:65px 7%}
}
@media(max-width:560px){
  .evidence-grid,.suspect-grid{grid-template-columns:1fr}
  header{padding:13px 5%}.status span{display:none}
  section{padding:60px 5%}.event{grid-template-columns:70px 1fr}
}

.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.profile{padding:0;overflow:hidden;display:grid;grid-template-columns:150px 1fr}
.profile img{width:150px;height:180px;object-fit:cover;object-position:top}
.profile-info{padding:20px}.profile h3{margin:0 0 3px}.profile .role{color:#25d9a4;font-size:12px;font-family:"Space Mono"}
.profile p{font-size:13px;color:#81969e;margin:12px 0}.profile .mini{font:10px "Space Mono";color:#657b83}
.disclaimer{border:1px solid #4b3c25;background:#17160f;color:#bcae8c;padding:14px 16px;border-radius:8px;font-size:12px;margin-top:18px}
@media(max-width:800px){.profile-grid{grid-template-columns:1fr}.profile{grid-template-columns:120px 1fr}.profile img{width:120px;height:160px}}
@media(max-width:500px){.profile{grid-template-columns:1fr}.profile img{width:100%;height:220px}}

/* =========================
   INTERPOL SCHOOL PROJECT
   DESIGN SYSTEM
   ========================= */

:root {
  --navy: #07152b;
  --navy-2: #0b1e3a;
  --blue: #123d78;
  --blue-light: #1d5fa7;
  --cyan: #26d9c0;
  --white: #f4f8fc;
  --text: #d9e4ee;
  --muted: #8fa4b7;
  --border: rgba(82, 135, 184, .35);
  --panel: rgba(10, 28, 52, .88);
  --danger: #ff6b6b;
  --warning: #ffad4d;
  --shadow: 0 18px 45px rgba(0,0,0,.28);
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(29,95,167,.22), transparent 30%),
    radial-gradient(circle at 85% 35%, rgba(38,217,192,.10), transparent 28%),
    linear-gradient(135deg, var(--navy), #030b17 70%);
  color: var(--text);
}

body:before {
  opacity: .12;
  background-image:
    linear-gradient(rgba(38,217,192,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,217,192,.12) 1px, transparent 1px);
}

header {
  background: rgba(5, 17, 34, .94);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
}

.logo-mark {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(38,217,192,.18);
}

.logo small,
.status,
.kicker,
.number,
.section-head small {
  color: var(--cyan);
}

.dot {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.hero {
  min-height: 88vh;
}

.hero:after {
  color: rgba(38,217,192,.04);
}

h1 {
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

h1 span {
  color: var(--cyan);
  text-shadow: 0 0 25px rgba(38,217,192,.2);
}

.hero p,
.panel p,
.card p,
.event p,
.suspect p {
  color: var(--muted);
}

.primary {
  background: var(--cyan);
  box-shadow: 0 8px 24px rgba(38,217,192,.18);
}

.secondary {
  background: rgba(255,255,255,.02);
  border-color: var(--border);
}

.panel,
.card,
.quiz {
  background: linear-gradient(145deg, rgba(12,32,59,.94), rgba(6,19,36,.94));
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.panel:hover,
.card:hover {
  border-color: rgba(38,217,192,.7);
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}

.alert {
  color: var(--warning);
  border-color: rgba(255,173,77,.45);
  background: rgba(255,173,77,.05);
}

.stats {
  border-top-color: var(--border);
}

.stats b,
.icon,
.open,
code {
  color: var(--cyan);
}

.event {
  border-bottom-color: rgba(82,135,184,.25);
}

.event.hot b {
  color: var(--danger);
}

.avatar {
  background: linear-gradient(145deg, #123b63, #0a213d);
  border-color: rgba(38,217,192,.35);
  color: var(--cyan);
  box-shadow: inset 0 0 20px rgba(38,217,192,.05);
}

.suspect .role {
  color: var(--cyan);
}

.chip,
.tag {
  border-color: rgba(82,135,184,.35);
  color: #8fa9bb;
}

.quiz label {
  background: rgba(255,255,255,.025);
  border-color: rgba(82,135,184,.35);
}

.quiz label:hover {
  background: rgba(38,217,192,.06);
  border-color: var(--cyan);
}

.result.correct {
  background: rgba(38,217,192,.12);
  border: 1px solid rgba(38,217,192,.35);
}

.result.wrong {
  background: rgba(255,107,107,.10);
  border: 1px solid rgba(255,107,107,.3);
}

.modal {
  backdrop-filter: blur(7px);
}

.modal-box {
  background: linear-gradient(145deg, #0c2340, #061426);
  border-color: var(--cyan);
  box-shadow: 0 25px 80px rgba(0,0,0,.6);
}

.modal-box pre {
  background: #030d19;
  border: 1px solid rgba(38,217,192,.15);
}

footer {
  background: #030b17;
  border-top-color: var(--border);
}

/* Kleine hover-animaties */
button,
.btn,
.card {
  transition: transform .2s ease, border-color .2s ease,
              background .2s ease, box-shadow .2s ease;
}

button:active,
.btn:active {
  transform: scale(.98);
}

/* Mobiele navigatie / leesbaarheid */
@media (max-width: 560px) {
  h2 { font-size: 29px; }
  .hero p { font-size: 16px; }
  .buttons { width: 100%; }
  .buttons .btn { text-align: center; width: 100%; }
}