:root{--teal:#00a39a;--teal-d:#00807a;--blk:#111;--ink:#1a1a1a;--mut:#666;--line:#d6d6d6;--grey:#efefef}
*{box-sizing:border-box}
body{margin:0;font-family:Barlow,Arial,Helvetica,sans-serif;font-size:17px;line-height:1.55;color:var(--ink);background:#fff}
a{color:var(--teal-d)}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;line-height:1.05;margin:0 0 .45em;text-transform:uppercase}
h1{font-size:64px}
h2{font-size:42px}
h3{font-size:28px}
p{margin:0 0 1em}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.muted{color:var(--mut)}
.btn{display:inline-block;background:var(--teal);color:#fff;font:600 18px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;padding:12px 28px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--teal-d)}

.hdr{background:var(--blk);color:#fff}
.hdr .wrap{display:flex;align-items:center;gap:36px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 26px "Barlow Condensed",Arial,sans-serif;letter-spacing:.5px}
.brand svg{width:16px;height:24px}
.nav{display:flex;gap:28px;flex:1}
.nav a,.login{color:#ccc;text-decoration:none;font:500 17px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase}
.nav a:hover,.login:hover{color:#fff}
.login{border:1px solid #555;padding:6px 14px;color:#fff}
.login:hover{border-color:var(--teal);background:var(--teal)}

.hero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;background:var(--grey)}
.hero .hl{display:flex;align-items:center;justify-content:flex-end}
.hero .in{max-width:600px;padding:60px 48px 60px 28px}
.hero .sub{color:var(--teal-d);font-weight:600;margin-bottom:8px}
.hero .lead{font-size:19px;color:#444}
.hero .acts{margin-top:28px}
.tl{margin-left:18px;font-weight:600;color:var(--ink)}
.hero .hr{position:relative;background:#555 center/cover no-repeat}
.lockfloat{position:absolute;left:-60px;bottom:40px;width:150px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.lock{display:block;width:100%;height:auto}
.specbar{background:var(--blk);color:#ddd;font-size:15px}
.specbar table{width:100%;border-collapse:collapse}
.specbar th{font:600 15px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;color:var(--teal);text-align:left;padding:14px 10px 14px 0;white-space:nowrap}
.specbar td{padding:14px 30px 14px 0;color:#fff}

.sec{padding:80px 0}
.sec.grey{background:var(--grey)}
.sec.dark{background:#1b1b1b;color:#ccc}
.sec.dark h2{color:#fff}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cols2.top{align-items:start}
.how{list-style:none;counter-reset:n;margin:0;padding:0;border-top:2px solid var(--blk)}
.how li{counter-increment:n;display:grid;grid-template-columns:70px 1fr;padding:18px 0;border-bottom:1px solid var(--line);font-size:19px}
.how li::before{content:counter(n,decimal-leading-zero);font:700 34px/1 "Barlow Condensed",Arial,sans-serif;color:var(--teal)}
.how.small li{font-size:17px;grid-template-columns:56px 1fr}
.how.small li::before{font-size:26px}
.appshot{border:8px solid var(--blk);max-width:330px;background:#fff;font-size:14px;margin-top:24px}
.as-top{display:flex;justify-content:space-between;background:var(--blk);color:#aaa;padding:4px 10px 8px;font-size:12px}
.as-top span:first-child{color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700}
.as-st{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line)}
.as-st b{font:700 22px "Barlow Condensed",sans-serif;text-transform:uppercase}
.sw{display:flex;border:1px solid var(--blk)}
.sw span{padding:2px 10px;font-size:13px}
.sw .on{background:var(--blk);color:#fff}
.appshot table{width:100%;border-collapse:collapse}
.appshot td{padding:8px 12px;border-bottom:1px solid #eee}
.appshot td:last-child{text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
.appshot i{display:inline-block;width:8px;height:8px;margin-right:8px}
.sec.dark img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#333}

.spec{width:100%;border-collapse:collapse;font-size:16px}
.spec th,.spec td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:600;width:44%;padding-right:12px}
.spec td.yes{color:var(--teal-d);font-weight:600}
.spec td.no{color:#999}
.spec.inv th,.spec.inv td{border-color:#3a3a3a}
.spec.inv th{color:#fff}
.prod{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:center;border-top:1px solid var(--line);padding:40px 0}
.prod .pv{background:var(--grey);display:flex;justify-content:center;align-items:center;padding:40px;min-height:380px}
.prod .pv .lock{width:150px}
.prod.r{grid-template-columns:1fr 420px}
.prod.r .pv{order:2}
.prod .pr{font:700 30px "Barlow Condensed",Arial,sans-serif;color:var(--teal-d)}
.prod .pr small{font:400 15px Barlow,Arial,sans-serif;color:var(--mut)}
.vgl{margin-top:40px}
.tw{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.cmp th,.cmp td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.cmp thead th{background:var(--blk);color:#fff;font:600 18px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase}
.cmp tbody th{font-weight:600}
.cmp td.no{color:#999}
.plans{background:#fff}
.plans tr.hl{background:#e3f4f2}
.note{font-size:14px;color:var(--mut);margin-top:12px}
.cbox{border:2px solid var(--blk);padding:28px}

.ftr{background:var(--blk);color:#999;font-size:14px;padding:28px 0}
.ftr .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ftr a{color:#ccc}
.ftr .brand{font-size:22px}

/* ---------- SlimSlot Cloud ---------- */
body.lg{background:#e9e9e9;min-height:100vh}
body.lg .hdr .wrap{gap:12px}
.cloud{font:500 22px "Barlow Condensed",Arial,sans-serif;color:var(--teal);text-transform:uppercase}
.hdr .r{margin-left:auto;font-size:14px;color:#aaa}
.hdr .r a{color:#fff}
.lgmain{max-width:1100px;margin:0 auto;padding:56px 28px 60px}
.pt-card{background:#fff;max-width:440px;margin:0 auto;border-top:4px solid var(--teal);padding:32px 34px}
.pt-card h1{font-size:34px}
.pt-card .lead{color:var(--mut);font-size:16px}
.pt-card label{display:block;font:600 15px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;margin-bottom:4px}
.pt-card input{width:100%;font:inherit;padding:10px 12px;border:1px solid #999;border-radius:0;margin-bottom:18px;background:#fafafa}
.pt-card input:focus{outline:0;border-color:var(--teal);background:#fff;box-shadow:inset 0 0 0 1px var(--teal)}
.pt-card input.code{font:600 26px "Barlow Condensed",monospace;letter-spacing:6px}
.pt-btn{width:100%;background:var(--blk);color:#fff;border:0;border-radius:0;padding:13px;font:600 19px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;cursor:pointer}
.pt-btn:hover{background:var(--teal-d)}
.pt-btn.busy{opacity:.6;cursor:wait}
.pt-link{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--teal-d);cursor:pointer}
.back{margin:14px 0 0}
.pt-err{background:#fff0f0;border-left:4px solid #d32f2f;color:#b71c1c;padding:8px 12px;margin-bottom:16px;font-size:15px}
.pt-hint{background:#e3f4f2;border-left:4px solid var(--teal);padding:10px 12px;margin-bottom:16px;font-size:15px}
.pt-secure{font-size:14px;color:var(--mut);margin:20px 0 0;border-top:1px solid #e3e3e3;padding-top:14px}
[hidden]{display:none!important}
body.signed-in{background:#f4f4f4}
.pt-bar{display:flex;justify-content:space-between;align-items:center;background:var(--blk);color:#ddd;padding:10px 16px;margin-bottom:0}
.pt-who{display:flex;align-items:center;gap:10px}
.pt-who i{font-style:normal;background:var(--teal);color:#fff;font:700 14px "Barlow Condensed",sans-serif;width:30px;height:30px;display:grid;place-items:center}
.pt-out{background:none;border:1px solid #666;color:#fff;font:600 15px "Barlow Condensed",sans-serif;text-transform:uppercase;padding:5px 14px;cursor:pointer}
.pt-out:hover{border-color:var(--teal);background:var(--teal)}
.pt-tabs{display:flex;background:#fff;border:1px solid var(--line);border-top:0;margin-bottom:26px;overflow-x:auto}
.pt-tabs button{flex:none;background:none;border:0;border-right:1px solid var(--line);font:600 17px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;padding:12px 20px;cursor:pointer;color:#555}
.pt-tabs button:hover{color:var(--ink);background:#fafafa}
.pt-tabs button.on{background:var(--teal);color:#fff}
.pt-title{font-size:36px}
.oh-s{background:#fff;border:1px solid var(--line);padding:18px 22px;margin-bottom:16px}
.oh-s h3{font-size:22px}
.oh-s p:last-child{margin-bottom:0}
.oh-s ul{margin:0;padding-left:20px}
.oh-t{font-size:15px!important}
.oh-t th{background:var(--blk)!important;color:#fff;font:600 15px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;border:0!important}
.oh-t td{border-bottom:1px solid #e6e6e6!important}
.oh-t tbody tr:hover{background:#f1f9f8}
.oh-t tr.hide{display:none}
.oh-kv dt{color:var(--mut)!important}
.oh-noot{color:var(--mut)!important}
.oh-msg{border-left-color:var(--teal)!important}
.oh-t.log td:nth-child(2){font-weight:600;font-variant-numeric:tabular-nums}
.oh-t.log tr.newday td{border-top:2px solid var(--blk)!important}
.oh-t.log .dot{display:inline-block;width:9px;height:9px;margin-right:8px;background:#999}
.oh-t.log tr.ev-open .dot{background:#2e9d5b}.oh-t.log tr.ev-lock .dot{background:#5b6b7a}.oh-t.log tr.ev-bell .dot{background:#e0a21b}.oh-t.log tr.ev-code .dot{background:#3a6fd8}.oh-t.log tr.ev-mode .dot{background:#8a5cc8}
.legend{display:flex;flex-wrap:wrap;margin-bottom:12px;border:1px solid var(--blk);width:max-content;max-width:100%}
.legend button{background:#fff;border:0;border-right:1px solid var(--blk);font:600 16px "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:6px}
.legend button:last-child{border-right:0}
.legend button.on{background:var(--blk);color:#fff}
.legend i{width:9px;height:9px;display:inline-block}
.legend .n{font-weight:400;opacity:.7}
.cctv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cctv{margin:0;background:#000}
.cctv svg{display:block;width:100%;height:auto}
.cctv figcaption{color:#ddd;font-size:14px;padding:7px 10px;background:#111}

@media (max-width:960px){
  h1{font-size:46px}h2{font-size:34px}
  .hdr .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px 20px}
  .nav{order:3;flex:1 0 100%;gap:20px;overflow-x:auto}
  .login{margin-left:auto}
  .hero{grid-template-columns:1fr}
  .hero .hl{justify-content:flex-start}
  .hero .in{padding:40px 28px}
  .hero .hr{min-height:340px}
  .lockfloat{left:auto;right:20px;bottom:20px;width:90px}
  .specbar tr{display:grid;grid-template-columns:auto 1fr}
  .specbar th,.specbar td{padding:6px 12px 6px 0}
  .cols2,.prod,.prod.r{grid-template-columns:1fr;gap:28px}
  .prod.r .pv{order:0}
  .prod .pv{min-height:280px}
  .sec{padding:56px 0}
  .cctv-grid{grid-template-columns:1fr}
  .hdr .r{display:none}
  .oh-kv{grid-template-columns:1fr!important;gap:0!important}
  .oh-kv dd{margin-bottom:8px!important}
  .oh-t.cards thead{display:none}
  .oh-t.cards,.oh-t.cards tbody,.oh-t.cards tr,.oh-t.cards td{display:block;width:100%}
  .oh-t.cards tr{border-bottom:1px solid var(--line);padding:8px 0}
  .oh-t.cards tr.hide{display:none}
  .oh-t.cards td{border:0!important;padding:2px 0!important;display:block}
  .oh-t.cards td::before{content:attr(data-label);display:inline-block;width:40%;vertical-align:top;color:var(--mut);font-size:14px}
  .oh-t.cards td.empty{display:none}
  .oh-t.log tr.newday td{border-top:0!important}
  .oh-t.log tr.newday{border-top:2px solid #888}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  h1{font-size:40px}
  .tl{display:block;margin:14px 0 0}
  .lgmain{padding:24px 14px}
  .pt-title{font-size:28px}
  .legend{width:auto}
  .pt-card{padding:24px 20px}
}

/* contentpagina's */
.nav a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--teal)}
.phead{background:var(--grey);padding:40px 0 30px}
.phead h1{font-size:52px;margin-bottom:10px}
.phead .lead{max-width:760px;color:#444;font-size:18px;margin:0}
.crumb{font-size:14px;color:var(--mut);margin:0 0 8px}
.crumb a{color:var(--mut)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.scat h2{font-size:26px;border-bottom:2px solid var(--blk);padding-bottom:6px}
.scat ul,.plain{list-style:none;margin:0;padding:0}
.scat li{border-bottom:1px solid var(--line);padding:9px 0}
.plain li{padding:3px 0}
.art{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.artbody{max-width:720px}
.artbody h2{font-size:28px;margin-top:28px}
.fw td{vertical-align:top}
.fw td:first-child{font-size:20px;font-family:"Barlow Condensed",sans-serif}
.cmp td.yes{color:var(--teal-d);font-weight:600}
.link-off{color:#777;text-decoration:underline dotted;cursor:not-allowed;font-weight:600}
.fwide{display:grid!important;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:start!important}
.fcol p{margin:10px 0 0}
.fcol b{display:block;color:#fff;font:600 17px "Barlow Condensed",sans-serif;text-transform:uppercase;margin-bottom:6px}
.fcol a:not(.brand){display:block;padding:2px 0}
.fleg{grid-column:1/-1;border-top:1px solid #333;padding-top:14px}
@media (max-width:960px){.sgrid{grid-template-columns:1fr 1fr}.art{grid-template-columns:1fr}.fwide{grid-template-columns:1fr}.phead h1{font-size:40px}}
@media (max-width:520px){.sgrid{grid-template-columns:1fr}}