/* CloudEMS — cloudems.eu · thema uit de VoltLogic/Ampflow-familie (voltlogic-base) */
@font-face{
  font-family:"Figtree";
  src:url("/assets/figtree.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
:root{
  --green:#179C6A; --green-dark:#0E7550; --ink:#0F2A22; --mint:#E8F5EE;
  --sun:#FFC83D; --stone:#5D6F68; --line:#D9E6DF; --white:#fff;
  --bg:var(--white); --surface:var(--white); --card:var(--mint);
  --text:var(--ink); --muted:var(--stone); --border:var(--line);
  --accent:var(--green); --accent-ink:var(--white);
  --radius:24px; --radius-lg:32px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1A16; --surface:#16241F; --card:#16241F;
    --text:#E8F5EE; --muted:#9db5a9; --border:#223a31;
    --ink:#E8F5EE; --accent:#2ec98c; --accent-ink:#06130E;
  }
}
*{box-sizing:border-box}
img{max-width:100%; height:auto}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem; line-height:1.6; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:800; line-height:1.1; letter-spacing:-0.02em; color:var(--text); margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,3.75rem)}
h2{font-size:clamp(1.85rem,4vw,2.5rem)}
h3{font-size:1.3rem; letter-spacing:-0.01em}
p{margin:0 0 1rem} a{color:var(--green-dark)} a:hover{color:var(--green)}
@media (prefers-color-scheme:dark){a{color:var(--accent)}}
.wrap{width:min(1080px,92vw); margin-inline:auto}
.section{padding-block:clamp(3.5rem,8vw,6rem)}
.section--tint{background:var(--surface)}
.lead{font-size:1.2rem; color:var(--muted); max-width:46ch}
.eyebrow{font-weight:700; color:var(--green-dark); letter-spacing:.02em; text-transform:none; margin:0 0 .6rem}
@media (prefers-color-scheme:dark){.eyebrow{color:var(--accent)}}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 95%,transparent);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(1.2) blur(6px)}
.site-header .wrap{display:flex; align-items:center; gap:1.25rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-0.02em;
  color:var(--text); text-decoration:none; font-size:1.2rem}
.brand svg{display:block}
.nav{margin-left:auto; display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap}
.nav a{color:var(--text); text-decoration:none; font-weight:600; font-size:.98rem}
.nav a:hover{color:var(--green-dark)}
.lang{display:flex; gap:.15rem; align-items:center; font-weight:700; font-size:.9rem}
.lang a{color:var(--muted); text-decoration:none; padding:.1rem .35rem; border-radius:6px}
.lang a[aria-current]{color:var(--accent-ink); background:var(--accent)}
@media (max-width:720px){.nav .nav-link{display:none}}

/* Badge */
.badge{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9rem;
  color:var(--green-dark); background:var(--mint); border:1px solid var(--border);
  padding:.4rem .8rem; border-radius:999px}
@media (prefers-color-scheme:dark){.badge{color:var(--text); background:var(--surface)}}
.badge .dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--sun)}

/* Hero */
.hero{padding-block:clamp(3rem,9vw,6.5rem)}
.hero h1{margin-top:1rem}
.hero .lead{font-size:1.3rem; max-width:52ch}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}

/* Buttons */
.btn{display:inline-block; border-radius:999px; font-weight:700; text-decoration:none;
  padding:.9em 1.6em; border:2px solid transparent; cursor:pointer; font-size:1rem; line-height:1}
.btn--primary{background:var(--accent); color:var(--accent-ink)}
.btn--primary:hover{background:var(--green-dark); color:#fff}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn--ghost:hover{border-color:var(--green)}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--ink); outline-offset:3px}
@media (prefers-color-scheme:dark){.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{outline-color:var(--accent)}}

/* Cards / grid */
.grid{display:grid; gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem}
.card--lg{border-radius:var(--radius-lg)}
.card h3{margin-top:0}
.card ul{margin:.5rem 0 0; padding-left:1.1rem}
.card li{margin:.3rem 0}
.tag{display:inline-block; font-size:.78rem; font-weight:700; padding:.2rem .6rem; border-radius:999px;
  background:var(--green); color:#fff; margin-bottom:.8rem}
.tag--road{background:var(--sun); color:#3a2c00}

/* Schema illustration */
.schema{width:100%; height:auto; max-width:760px; margin-top:1.5rem}

/* App impression / screenshots */
.shot{margin:2.2rem 0 0}
.shot img{width:100%; height:auto; display:block; border-radius:var(--radius);
  border:1px solid var(--border); box-shadow:0 30px 60px -30px rgba(15,42,34,.35)}
.shot figcaption{color:var(--muted); font-size:.95rem; margin-top:.8rem; text-align:center;
  font-weight:700}
.note-concept{color:var(--muted); font-size:.9rem; margin-top:1.6rem; text-align:center;
  font-weight:600}

/* Status list */
.status li{margin:.55rem 0}
.status strong{color:var(--text)}

/* Form */
.form-card{max-width:560px}
.form-card label{display:block; font-weight:700; margin-bottom:.4rem}
.form-card input[type=email]{width:100%; padding:.8em 1em; border-radius:14px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font:inherit; margin:.3rem 0 1rem}
.form-note{font-size:.92rem; color:var(--muted); margin-top:.8rem}
.msg{border-radius:14px; padding:.9rem 1.1rem; margin:0 0 1rem; font-weight:600; display:none}
.msg[data-show]{display:block}
.msg--ok{background:var(--mint); color:var(--green-dark); border:1px solid var(--green)}
.msg--err{background:#fdecea; color:#9b2c2c; border:1px solid #e3a3a3}
@media (prefers-color-scheme:dark){.msg--ok{background:var(--surface); color:var(--accent)}}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:var(--surface); padding-block:2.5rem}
.site-footer .wrap{display:flex; gap:1rem 2rem; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-size:.95rem}
.site-footer a{color:var(--muted); text-decoration:none; font-weight:600}
.site-footer a:hover{color:var(--green-dark)}
.site-footer .spacer{margin-left:auto}

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

/* Schema nodes (werkt in licht én donker: mint blijft licht) */
.schema .box{fill:#E8F5EE;stroke:#179C6A;stroke-width:1.5}
.schema .box-t{fill:#0F2A22;font-weight:700;font-size:13px}
.schema .hub{fill:#179C6A;stroke:#0E7550;stroke-width:2}
.schema .hub-t{fill:#fff;font-weight:800}
.schema .line{stroke:#179C6A;stroke-width:1.5;fill:none;opacity:.75}
.schema .arrow{fill:#FFC83D}
.schema .arrow-t{fill:#0F2A22;font-weight:700;font-size:12px}
@media (prefers-color-scheme:dark){.schema .arrow-t{fill:#E8F5EE}}