/* VisualsOS minimal landing styles */
:root{
  --bg:#ffffff;
  --ink:#0e0f12;
  --muted:#5a606b;
  --brand:#0c2ff5;
  --line:#eceff3;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

*{box-sizing:border-box}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

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

.container{width:min(1120px, 92%); margin-inline:auto}
.container.narrow{width:min(820px, 92%)}

.site-header{padding:28px 0; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10}
.brand img{height:36px; width:auto}

.hero{padding:72px 0}
.hero h1{
  font-size: clamp(12px, 5vw, 44px);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin: 8px 0 16px 0;
}
.lead{
  font-size: clamp(16px, 2.2vw, 20px);
  color:var(--muted);
  margin: 0 0 28px 0;
}

.signup{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.signup input[type="email"]{
  flex:1 1 260px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:16px;
  outline:0;
}

.btn{
  padding:14px 18px;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:transform .04s ease, filter .2s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}

.fineprint{font-size:13px; color:var(--muted); margin:4px 0 0 0; flex-basis:100%}
.form-message{margin:4px 0 0 0; color: var(--brand); font-weight:600}

.promise{padding:48px 0 80px 0; border-top:1px solid var(--line); background:#fff}
.promise h2{
  font-size: clamp(22px, 3.2vw, 32px);
  margin:0 0 10px 0;
}
.promise p{color:var(--muted)}

.benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:24px;
}
.card{
  padding:20px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
}
.card h3{margin:0 0 6px 0; font-size:18px}
.card ul{margin:0; padding-left:18px}
.card li{margin:6px 0}

.site-footer{
  padding:28px 0 40px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  background:#fff;
}

/* a11y helpers */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* responsive */
@media (min-width: 720px){
  .benefits{grid-template-columns:1fr 1fr}
}


.logo-wrap{
  width:600px;
  max-width:90vw; /* zorgt dat het ook op mobiel past */
  margin:0 auto 24px;
}

.hero-logo{
  width:100%;
  height:auto;
  display:block;
}