/* Gedeelde voorbeeldschermen (placeholders voor echte app-screenshots) */
:root{--st-white:#f5f7fa;--st-blue:#3b82ff;--st-red:#ff4d5e;--st-green:#34d399;--st-orange:#ff9f43;--cyan:#4cd7f6}
.phone{--s-bg:#0b1326;--s-card:#14203a;--s-fg:#f0f4f8;--s-mut:#8899a8;--s-acc:var(--cyan);
  position:relative;aspect-ratio:9/19;border-radius:15% / 7%;background:#05080f;padding:2.6%;
  box-shadow:0 0 0 1.5px #2a3550 inset,0 40px 80px -20px rgba(0,0,0,.6),0 0 60px -10px rgba(76,215,246,.18);width:100%;container-type:inline-size}
.phone .scr{position:relative;width:100%;height:100%;border-radius:13% / 6%;overflow:hidden;background:var(--s-bg);color:var(--s-fg);
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:3.9cqw;display:flex;flex-direction:column}
.phone.light{--s-bg:#f6f1ea;--s-card:#fff;--s-fg:#14203a;--s-mut:#6a7585;background:#1a1a1a}
.phone .scr .nt{width:34%;height:3.6%;background:#05080f;border-radius:99px;margin:3% auto 0}
.scr .top{display:flex;justify-content:space-between;align-items:center;padding:6% 7% 2%;font-weight:600}
.scr .top .lg{display:flex;gap:.5em;align-items:center;font-size:1.25em;letter-spacing:.02em}
.scr .top .lg i{width:1.2em;height:1.2em;border-radius:.35em;background:var(--s-acc);display:block}
.scr .pill{font-size:.85em;padding:.35em .8em;border-radius:99px;background:color-mix(in srgb,var(--st) 18%,transparent);color:var(--st);font-weight:600}
.scr .big{margin:6% auto 4%;width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--st) 25%,var(--s-bg)),var(--s-bg) 70%);
  border:.35em solid var(--st);box-shadow:0 0 3em color-mix(in srgb,var(--st) 55%,transparent),inset 0 0 2em color-mix(in srgb,var(--st) 30%,transparent)}
.scr .big b{display:block;font-size:1.55em;line-height:1.1}
.scr .big small{display:block;color:var(--s-mut);font-size:.9em;margin-top:.3em}
.scr .row{margin:0 7% 3.2%;background:var(--s-card);border-radius:1em;padding:.9em 1em;display:flex;justify-content:space-between;align-items:center}
.scr .row span{color:var(--s-mut);font-size:.9em}
.scr .row .ok{color:var(--st-green);font-weight:600}
.scr .btn{margin:auto 7% 8%;padding:1em;border-radius:1em;text-align:center;font-weight:700;background:var(--s-acc);color:#06101f}
.scr .btn.red{background:var(--st-red);color:#fff}
.scr .btn.ghost{background:transparent;border:1px solid var(--s-mut);color:var(--s-fg)}
.scr.alarm{background:radial-gradient(circle at 50% 38%,#7a0f1c,#2a0610 60%,#12030a)}
.scr .ripple{position:absolute;left:50%;top:44%;width:30%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,77,94,.7);transform:translate(-50%,-50%);animation:rip 2.4s infinite}
.scr .ripple:nth-of-type(2){animation-delay:.8s}.scr .ripple:nth-of-type(3){animation-delay:1.6s}
@keyframes rip{from{width:20%;opacity:1}to{width:120%;opacity:0}}
.scr .steps{display:flex;gap:.4em;margin:6% 7% 3%}
.scr .steps i{flex:1;height:.35em;border-radius:9em;background:var(--s-card)}.scr .steps i.on{background:var(--s-acc)}
.scr h4{margin:0 7% .4em;font-size:1.6em;line-height:1.15}
.scr p{margin:0 7% 1em;color:var(--s-mut);line-height:1.4}
.scr .illu{margin:2% 7%;height:30%;border-radius:1em;background:var(--s-card);display:grid;place-items:center;position:relative;overflow:hidden}
.scr .notif{margin:0 6% 3%;background:color-mix(in srgb,var(--s-card) 90%,#fff);border-radius:1.1em;padding:.9em 1em;display:flex;gap:.8em;align-items:center}
.scr .notif i{width:2.2em;height:2.2em;border-radius:.6em;background:var(--s-acc);flex:none}
.scr .notif b{display:block}.scr .notif span{color:var(--s-mut);font-size:.9em}
.scr .who{margin:5% 7% 2%;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--s-mut)}
/* tablet / watchtower */
.tablet{position:relative;aspect-ratio:4/3;border-radius:5% / 6.5%;background:#05080f;padding:2.2%;width:100%;box-shadow:0 0 0 1.5px #2a3550 inset,0 40px 80px -20px rgba(0,0,0,.6)}
.tablet .scr{border-radius:3.5% / 5%;display:grid;grid-template-columns:1.1fr 1fr;gap:4%;padding:5%;font-size:clamp(8px,1.15vw,14px);background:var(--s-bg);color:var(--s-fg);font-family:'Space Grotesk',sans-serif;height:100%;width:100%;overflow:hidden;border-radius:12px}
.tablet .t-main{display:flex;flex-direction:column;justify-content:center;gap:.5em}
.tablet .t-main .st{font-size:2.6em;font-weight:700;line-height:1;color:var(--st-green)}
.tablet .t-main .tm{font-size:1em;color:var(--s-mut)}
.tablet .t-clock{font-size:4em;font-weight:300;letter-spacing:-.03em;line-height:1}
.tablet .t-list{display:flex;flex-direction:column;gap:.6em;justify-content:center}
.tablet .t-list div{background:var(--s-card);border-radius:.8em;padding:.8em 1em;display:flex;justify-content:space-between}
.tablet .t-list span{color:var(--s-mut)}
/* plug ring */
.plug-ring{--c:var(--st-blue);position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#dfe5ee 60%,#b9c3d3);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.plug-ring::before{content:"";position:absolute;inset:10%;border-radius:50%;border:clamp(6px,1.6vw,18px) solid var(--c);
  box-shadow:0 0 40px var(--c),inset 0 0 24px color-mix(in srgb,var(--c) 70%,transparent);animation:ringglow 2.6s ease-in-out infinite}
.plug-ring::after{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fdfdfd,#cfd6e2);box-shadow:inset 0 4px 10px rgba(0,0,0,.18)}
.plug-ring[data-state=white]{--c:#f5f7fa}.plug-ring[data-state=blue]{--c:var(--st-blue)}.plug-ring[data-state=green]{--c:var(--st-green)}.plug-ring[data-state=orange]{--c:var(--st-orange)}
.plug-ring[data-state=red]{--c:var(--st-red)}.plug-ring[data-state=red]::before{animation:ringblink .7s steps(1) infinite}
.plug-ring[data-state=off]::before{box-shadow:none;border-color:#3a4252;animation:none}
@keyframes ringglow{50%{opacity:.7}}
@keyframes ringblink{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.plug-ring::before,.scr .ripple{animation:none}}