@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap');
:root{color-scheme:dark;--ink:#edf4ff;--muted:#adbed4;--yellow:#ffe258;--line:#243956;--blue:#57baff;--board:#071628}
*{box-sizing:border-box}
body{margin:0;background:#070e1a;color:var(--ink);font:16px/1.55 'DM Sans',system-ui,sans-serif}
a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.layout{width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.rail{background:#0b1322;border-right:1px solid var(--line);padding:38px 20px;display:flex;flex-direction:column;align-items:stretch}
.brand{display:block;margin-left:10px}.brand img{display:block;width:min(100%,180px);height:auto}
.place{color:var(--muted);font-size:14px;margin:16px 10px 38px}
nav{display:grid;gap:4px}nav a{padding:10px 12px;text-decoration:none;border-left:3px solid transparent;font-weight:700}nav a:hover,nav a[aria-current="page"]{color:var(--yellow);border-color:var(--yellow);background:#172238}
.contact{margin-top:auto;padding:48px 12px 0;display:grid;gap:8px}.contact a:first-child{font:700 29px 'Barlow Condensed',sans-serif;text-decoration:none}.contact a:last-child{font-size:14px;color:var(--muted)}
main{min-width:0;background:#071628 url("moederbord-achtergrond.webp") center top / cover no-repeat}.board{position:relative;height:clamp(365px,46vw,565px);isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at center,#091929bd,#07162845 78%);border-bottom:1px solid var(--line)}
canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(88px,18%,174px);aspect-ratio:1.23;display:grid;align-content:center;text-align:center;background:linear-gradient(135deg,#213b59,#0a1526 74%);border:2px solid #507295;box-shadow:0 0 30px #369bff47,inset 0 0 0 5px #091323;border-radius:8px;color:var(--yellow);font:800 clamp(22px,4vw,48px)/1 'Barlow Condensed',sans-serif}.chip img{display:block;width:78%;height:auto;margin:0 auto 7px}.chip small{font:700 clamp(7px,1vw,12px)/1.5 'DM Sans',sans-serif;letter-spacing:.13em;color:#c4d8ef}
.port{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:33%;display:flex;gap:9px;align-items:center;padding:8px 12px;background:#0c1e33;border:1px solid #54799d;border-radius:5px;text-decoration:none;font-weight:700;font-size:clamp(11px,1.4vw,17px);box-shadow:0 0 0 4px #071525}
.port:hover,.port[aria-current]{border-color:var(--yellow);color:var(--yellow)}.port i{flex:none;width:8px;height:8px;background:#76dcff;border-radius:50%;box-shadow:0 0 9px #51c8ff}.port[aria-current] i{background:var(--yellow);box-shadow:0 0 12px var(--yellow)}
.port-a{left:22%;top:26%}.port-b{left:78%;top:26%}.port-c{left:22%;top:73%}.port-d{left:78%;top:73%}

.content{background:#070e1ae8;padding:24px clamp(22px,5vw,75px) 46px}.panel{scroll-margin-top:12px}.panel[hidden]{display:none}h1,h2{font:800 clamp(38px,5.7vw,74px)/.96 'Barlow Condensed',sans-serif;margin:0;letter-spacing:-.015em}.panel p{max-width:63ch;color:var(--muted);margin:16px 0 20px}.action{display:inline-flex;gap:10px;background:var(--yellow);color:#101729;padding:10px 14px;border-radius:4px;font-weight:700;text-decoration:none}
@media(max-width:700px){
  .layout{display:block}
  .rail{padding:12px 14px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .brand{margin:0;align-self:center}
  .brand img{width:110px}
  .place{display:none}
  .contact{grid-column:2;grid-row:1;justify-self:end;padding:0;gap:0;text-align:right}
  .contact a:first-child{font-size:23px}
  .contact a:last-child{font-size:12px}
  nav{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 4px;margin-top:8px}
  nav a{display:grid;place-items:center;text-align:center;min-height:44px;padding:4px;border-left:0;border-bottom:2px solid transparent;font-size:12px;line-height:1.2}
  main{background-image:none}
  .board{height:clamp(275px,72vw,350px);background:radial-gradient(ellipse at center,#091929ba,#07162844),url("moederbord-achtergrond.webp") center / cover}
  .port{min-height:44px;max-width:44%;padding:6px 8px;gap:5px;font-size:12px}
  .port i{width:6px;height:6px}
  .port-a,.port-c{left:25%}
  .port-b,.port-d{left:75%}

}


.detail{
  background:linear-gradient(90deg,#0a1424 0%,#0a1424f2 42%,#0a1424a0 100%),
    url("moederbord-achtergrond.webp") center top / cover no-repeat;
  padding:clamp(28px,7vw,100px) clamp(18px,6vw,88px);
}
.detail .content{
  max-width:720px;
  background:#0a1424ed;
  border-left:3px solid var(--yellow);
  padding:clamp(22px,4vw,44px);
}
@media(max-width:700px){
  .detail{min-height:65vh}
}

.repair-page{
  display:grid;
  grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
  align-content:start;
  align-items:center;
  gap:clamp(18px,3vw,44px);
}
.repair-demo{margin:0;min-width:0;background:#0a1424;border:1px solid #36516e;border-radius:12px;overflow:hidden}
.repair-scene{position:relative}
.repair-scene img{display:block;width:100%;height:auto}
.repair-screen{
  position:absolute;
  left:63%;top:38%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  max-width:44%;padding:6px 9px;
  color:#ffdf94;background:#091524eb;border:1px solid currentColor;border-radius:4px;
  font:700 clamp(10px,1.15vw,15px)/1.25 'DM Sans',sans-serif;text-align:center;
}
.repair-screen span{display:none}
[data-step="stalled"] .repair-stalled,[data-step="starting"] .repair-starting,[data-step="ready"] .repair-ready{display:block}
[data-step="starting"] .repair-screen{color:#93dfff;box-shadow:0 0 22px #40b7ff70}
[data-step="ready"] .repair-screen{color:#a5f3b9;box-shadow:0 0 22px #68dc9960}
.repair-demo figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;color:var(--muted);font-size:13px}
.repair-demo button{min-height:40px;padding:5px 9px;color:var(--ink);background:#14283c;border:1px solid #587590;border-radius:4px;cursor:pointer}
@media(max-width:1050px){.repair-page{grid-template-columns:minmax(0,1fr)}.repair-demo{max-width:720px;width:100%}}
@media(prefers-reduced-motion:no-preference){
  [data-step="starting"] .repair-screen{overflow:hidden;padding-bottom:10px}
  [data-step="starting"] .repair-screen::after{
    content:"";position:absolute;inset:auto 0 0;height:3px;
    background:#93dfff;transform-origin:left;animation:repair-boot 1.65s ease-out both;
  }
  @keyframes repair-boot{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
}

.remote-help{margin-top:26px;padding-top:22px;border-top:1px solid #36516e}
.remote-help h2{font-size:clamp(26px,3vw,36px);line-height:1.08}
.remote-help p,.remote-help ol{color:var(--muted)}
.remote-help ol{padding-left:22px;margin-bottom:20px}
.remote-help li+li{margin-top:6px}
.repair-demo{align-self:start}