/* Toestelschermen: iPhone en iPad met de huidige Decent-app (tijdelijke, zelfgemaakte schermen) */
.dev{--n:#0b1326;--n2:#121c33;--c:#4cd7f6;--fg:#f0f4f8;--mut:#8da0b3;--ok:#34d399;--al:#d6283a;--ln:rgba(255,255,255,.1);
  position:relative;container-type:inline-size;width:100%;color:var(--fg);font-family:Inter,system-ui,sans-serif}
.dev.phone{aspect-ratio:9/19.4;border-radius:15% / 7%;background:#08090c;padding:2.4%;
  box-shadow:0 0 0 1.5px #343844 inset,0 0 0 1px #000,0 36px 70px -28px rgba(0,0,0,.65)}
.dev.phone .scr{position:relative;width:100%;height:100%;border-radius:12.8% / 5.9%;overflow:hidden;background:var(--n);display:flex;flex-direction:column;font-size:4.05cqw;line-height:1.3}
.dev.phone .isl{position:absolute;left:50%;top:3.1%;width:27%;height:3%;margin-left:-13.5%;background:#000;border-radius:99px;z-index:5}
.dev.phone .hi{position:absolute;left:50%;bottom:2.6%;width:33%;height:.55%;margin-left:-16.5%;background:rgba(255,255,255,.55);border-radius:99px;z-index:5}
.dev .sb{display:flex;justify-content:space-between;align-items:center;padding:5.4% 8% 0;font-weight:600;font-size:.92em}
.dev .sb i{font-style:normal;letter-spacing:.1em;font-size:.8em}
.dev .app{flex:1;display:flex;flex-direction:column;padding:6% 7% 4%;min-height:0}
.dev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7%}
.dev .top b{display:flex;gap:.45em;align-items:center;font-size:1.15em;letter-spacing:-.01em}
.dev .top svg{width:1.3em;height:1.3em;color:var(--c)}
.dev .chip{font-size:.78em;font-weight:600;padding:.25em .75em;border-radius:99px;background:rgba(52,211,153,.16);color:var(--ok)}
.dev .chip.al{background:rgba(255,255,255,.2);color:#fff}
.dev .ring{align-self:center;width:56%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;margin:3% 0 8%;
  border:.6cqw solid var(--rc,var(--c));box-shadow:0 0 6cqw -1cqw var(--rc,var(--c)),inset 0 0 5cqw -2cqw var(--rc,var(--c));background:radial-gradient(circle,rgba(76,215,246,.12),transparent 68%)}
.dev .ring b{display:block;font-size:1.5em;line-height:1.1;letter-spacing:-.02em}
.dev .ring small{display:block;color:var(--mut);font-size:.82em;margin-top:.25em}
.dev .row{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.75em .85em;margin-bottom:.55em;background:var(--n2);border-radius:.9em;border:1px solid var(--ln)}
.dev .row small{display:block;color:var(--mut);font-size:.8em}
.dev .row em{font-style:normal;font-size:.8em;font-weight:600;color:var(--ok);white-space:nowrap}
.dev .row em.w{color:#f6c453}
.dev .btn2{margin-top:auto;text-align:center;padding:.95em;border-radius:1em;font-weight:700;background:var(--c);color:#04101f}
.dev .btn2.g{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--fg)}
.dev .tabs{display:flex;justify-content:space-around;padding:3.2% 4% 7%;border-top:1px solid var(--ln);background:rgba(255,255,255,.03);font-size:.74em;color:var(--mut)}
.dev .tabs span{display:flex;flex-direction:column;align-items:center;gap:.3em}
.dev .tabs span::before{content:"";width:1.5em;height:1.5em;border-radius:.5em;background:rgba(255,255,255,.12)}
.dev .tabs span.on{color:var(--c)}.dev .tabs span.on::before{background:var(--c)}
.dev .steps{display:flex;gap:.4em;margin:2% 0 8%}.dev .steps i{flex:1;height:.3em;border-radius:9em;background:var(--ln)}.dev .steps i.on{background:var(--c)}
.dev h5{margin:0 0 .35em;font-size:1.6em;line-height:1.1;letter-spacing:-.02em}
.dev p{margin:0 0 1em;color:var(--mut)}
.dev .ill{height:26%;border-radius:1em;background:var(--n2);border:1px solid var(--ln);display:grid;place-items:center;margin:2% 0 6%}
.dev .ill svg{width:60%;height:auto}
/* alarm */
.dev.al .scr{background:radial-gradient(circle at 50% 30%,#c4283a,#7d1020 60%,#3a0610)}
.dev.al .row{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.15)}
.dev.al .row small,.dev.al p{color:rgba(255,255,255,.82)}
.dev.al .row em{color:#fff}
.dev.al .big{font-size:2.5em;font-weight:700;line-height:1;letter-spacing:-.03em;margin:14% 0 .15em}
.dev.al .btn2{background:#fff;color:#8f1424}
.dev.al .pulse{position:absolute;left:50%;top:34%;width:30%;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%);animation:dpl 2.4s infinite}
.dev.al .pulse:nth-of-type(2){animation-delay:.8s}.dev.al .pulse:nth-of-type(3){animation-delay:1.6s}
@keyframes dpl{from{width:20%;opacity:1}to{width:120%;opacity:0}}
/* vergrendelscherm */
.dev.lock .scr{background:linear-gradient(180deg,#1b2d52,#0b1326 70%)}
.dev.lock .t{text-align:center;margin-top:16%}
.dev.lock .t small{display:block;color:rgba(255,255,255,.7);font-size:.95em}
.dev.lock .t b{display:block;font-size:4.6em;font-weight:300;letter-spacing:-.04em;line-height:1}
.dev .nt{margin:0 5% 3%;padding:.8em .9em;border-radius:1.1em;background:rgba(240,244,248,.16);backdrop-filter:blur(8px);display:grid;grid-template-columns:2.2em 1fr;gap:.7em;align-items:center;border:1px solid rgba(255,255,255,.12)}
.dev .nt i{width:2.2em;height:2.2em;border-radius:.6em;background:var(--c);display:grid;place-items:center;color:#04101f}
.dev .nt i svg{width:1.4em;height:1.4em}
.dev .nt b{display:flex;justify-content:space-between;font-size:.95em}.dev .nt b span{font-weight:400;opacity:.7;font-size:.85em}
.dev .nt small{display:block;opacity:.85;font-size:.85em;line-height:1.3}
.dev.lock .nts{margin-top:auto;padding-bottom:20%}
/* iPad Watchtower */
.dev.tablet{aspect-ratio:4/3;border-radius:5% / 6.6%;background:#08090c;padding:2.4%;box-shadow:0 0 0 1.5px #343844 inset,0 0 0 1px #000,0 36px 70px -28px rgba(0,0,0,.6)}
.dev.tablet .scr{width:100%;height:100%;border-radius:3.4% / 4.6%;background:var(--n);display:grid;grid-template-columns:1.15fr 1fr;gap:5%;padding:5.5%;font-size:2.35cqw;line-height:1.3;overflow:hidden}
.dev.tablet .m{display:flex;flex-direction:column;justify-content:center}
.dev.tablet .clk{font-size:4.8em;font-weight:300;letter-spacing:-.04em;line-height:1}
.dev.tablet .st{font-size:1.9em;font-weight:700;line-height:1.1;color:var(--ok);margin:.25em 0 .4em;display:flex;gap:.4em;align-items:center}
.dev.tablet .st::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--ok);box-shadow:0 0 .8em var(--ok)}
.dev.tablet .l{display:flex;flex-direction:column;justify-content:center;gap:.6em}
.dev.tablet .l .row{margin:0;font-size:1em}
@media(prefers-reduced-motion:reduce){.dev.al .pulse{animation:none;display:none}}