:root{
  --ink:#000;
  --paper:#f1f1ee;
  --paper-2:#e2e2dd;
  --white:#fff;
  --blue:#2f6bff;
  --muted:#8b8b88;
  --serif:"Bodoni 72","Didot","Bodoni MT","Playfair Display",Georgia,serif;
  --sans:"Avenir Next","Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
body{background:#000;color:#fff;font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;overflow-anchor:none;touch-action:pan-y pinch-zoom}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- header (inverts automatically on dark/light pages) ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,56px);color:#fff;pointer-events:none;transition:color .35s}
.top .logo{transition:filter .35s}
.top.light{color:#000}
.top.light .logo{filter:invert(1)}
.top.light .buy:hover{background:#000;color:#fff}
.top > *{pointer-events:auto}
.top .logo{height:46px;width:auto}
.top nav{display:flex;gap:30px;font-size:.92rem}
.top nav a{opacity:.8;transition:opacity .2s}
.top nav a:hover{opacity:1}
.top .buy{border:1px solid currentColor;border-radius:99px;padding:9px 20px;font-weight:600;font-size:.92rem;transition:background .2s,color .2s}
.top .buy:hover{background:#fff;color:#000}
@media(max-width:820px){.top nav{display:none}}

/* ---------- dots ---------- */
.dots{position:fixed;right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;color:#fff;transition:color .35s}
.dots.light{color:#000}
.dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;position:relative;transition:background .25s,transform .25s}
.dots button.on{background:currentColor;transform:scale(1.3)}
.dots button span{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.78rem;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;color:inherit}
.dots button:hover span,.dots button:focus-visible span{opacity:1}
@media(max-width:820px){.dots{display:none}}

/* ---------- pages ---------- */
.page{position:relative;overflow:hidden;overflow:clip;min-height:100svh;padding:118px clamp(20px,5vw,72px) 80px;display:flex;align-items:center;
  transform-origin:50% 0}
.page.dark{background:var(--ink);color:#fff}
.page.light{background:var(--paper);color:#000}
.wrap{width:100%;max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.wrap.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media(max-width:959px){.wrap,.wrap.flip{grid-template-columns:1fr}.page{padding-top:104px}}


/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.03}
h1{font-size:clamp(2.8rem,6.4vw,5.8rem)}
h2{font-size:clamp(2.3rem,4.6vw,4.2rem)}
.lead{font-size:clamp(1rem,1.25vw,1.2rem);max-width:44ch;margin-top:20px;opacity:.78}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;font-weight:600;font-size:1rem;transition:transform .2s,background .2s,color .2s}
.btn.solid{background:#fff;color:#000}
.light .btn.solid{background:#000;color:#fff}
.btn.solid:hover{transform:translateY(-2px)}
.btn.ghost{border:1px solid currentColor}
.btn.ghost:hover{background:#fff;color:#000}
.light .btn.ghost:hover{background:#000;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:7px 14px;font-size:.86rem}
.light .chip{border-color:rgba(0,0,0,.25)}

/* ---------- screen mock ---------- */
.unit{position:relative;width:100%;max-width:700px;margin-inline:auto;perspective:1400px}
.tilt{transition:transform .25s ease-out;transform-style:preserve-3d}
.screen{container-type:inline-size;position:relative;aspect-ratio:2.35/1;border:.9cqw solid #161616;border-radius:3cqw;overflow:hidden;
  background:#000;box-shadow:0 0 0 1px #3a3a3a,0 40px 80px rgba(0,0,0,.55)}
.screen .wall{position:absolute;inset:0;background:
  radial-gradient(60% 90% at 85% 15%,#2c7bd6 0,transparent 60%),
  radial-gradient(70% 90% at 10% 100%,#1f8f5a 0,transparent 60%),
  radial-gradient(60% 80% at 60% 100%,#5a3fc0 0,transparent 60%),#10213a}
.ui{position:absolute;inset:0;display:grid;grid-template-columns:11% 1fr}
.side{background:rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:2cqw;padding:2.2cqw 0;color:#fff;font-size:1.5cqw;font-weight:600}
.side small{font-size:1cqw;opacity:.8;font-weight:500;margin-top:-1.6cqw}
.mini{width:4.2cqw;height:4.2cqw;border-radius:1.1cqw;display:grid;place-items:center;overflow:hidden}
.mini svg{width:68%;height:68%}
.grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:1cqw;padding:2.4cqw 3cqw}
.app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;color:#fff;font-size:1.35cqw;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ico{width:8.4cqw;height:8.4cqw;border-radius:2.1cqw;display:grid;place-items:center;overflow:hidden;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.35)}
.ico svg{width:66%;height:66%}
.stand{width:22%;height:46px;margin:-2px auto 0;background:linear-gradient(90deg,#0c0c0c,#2a2a2a,#0c0c0c);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.base{width:46%;height:16px;margin:-1px auto 0;border-radius:50%;background:radial-gradient(#2b2b2b,#0b0b0b);box-shadow:0 18px 30px rgba(0,0,0,.5)}
.dashline{position:absolute;inset:auto -6% -22px -6%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}

/* boot animation (the one orchestrated moment) */
.boot{position:absolute;inset:0;background:#000;display:grid;place-items:center;z-index:5;animation:bootOut .6s 1.7s ease forwards}
.boot img{width:26%;opacity:0;animation:bootLogo 1.8s .2s ease both}
@keyframes bootLogo{0%{opacity:0;transform:scale(.94)}40%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
.hero .side{animation:slideIn .7s 1.9s cubic-bezier(.2,.9,.3,1) both}
.hero .app{animation:pop .55s calc(2s + var(--i)*.075s) cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.3) translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}

.route-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}
.route-bg path{stroke:var(--blue);stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s 2.2s ease forwards;filter:drop-shadow(0 0 8px rgba(47,107,255,.8))}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero price */
.price-row{display:flex;align-items:baseline;gap:16px;margin-top:30px;flex-wrap:wrap}
.price{font-family:var(--serif);font-size:clamp(3rem,5.4vw,4.8rem);line-height:1}
.price-note{font-size:.95rem;opacity:.75;max-width:20ch;line-height:1.35}
.hero .wrap{position:relative;z-index:1}

/* ---------- SD page ---------- */
.sdstage{position:relative;display:grid;place-items:center;min-height:380px}
.ring{position:absolute;width:min(420px,88%);aspect-ratio:1;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:rgba(0,0,0,.1)}
.ring .fg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:565;stroke-dashoffset:565;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.8,.2,1)}
.live .ring .fg{stroke-dashoffset:0}
.sdcard{width:clamp(150px,17vw,210px);filter:drop-shadow(0 30px 30px rgba(0,0,0,.35));transform:translateY(-120%) rotate(-24deg);opacity:0;
  transition:transform 1.2s cubic-bezier(.2,1.3,.4,1),opacity .5s}
.live .sdcard{transform:none;opacity:1}
.sdwrap{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.counter{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-size:1.6rem;white-space:nowrap}
.counter small{font-family:var(--sans);font-size:.85rem;opacity:.6;margin-left:6px}
.feat{list-style:none;margin-top:26px;display:grid;gap:14px;max-width:46ch}
.feat li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.feat svg{width:22px;height:22px;margin-top:3px}
.feat b{font-weight:600}
.feat span{opacity:.72;display:block;font-size:.94rem}
.loop{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin-top:34px;max-width:520px}
.loop i{height:22px;border-radius:4px;background:#000;animation:rec 4.4s infinite}
.light:not(.live) .loop i{animation:none}
@keyframes rec{0%{background:#000}4%,9%{background:var(--blue)}14%,100%{background:#000}}
.loopcap{font-size:.84rem;opacity:.7;margin-top:10px;max-width:520px}

/* ---------- camera page ---------- */
.tabs{display:inline-flex;margin-top:28px;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:4px;gap:2px;flex-wrap:wrap}
.tabs button{padding:10px 18px;border-radius:99px;font-size:.92rem;font-weight:600;transition:background .25s,color .25s}
.tabs button[aria-selected=true]{background:#fff;color:#000}
.camrow{display:flex;gap:26px;align-items:center;margin-top:26px}
.carsvg{width:92px;flex:none}
.cone{opacity:.25;transition:opacity .4s}
.cone.on{opacity:1;animation:conepulse 1.8s ease-in-out infinite}
@keyframes conepulse{50%{opacity:.55}}
.monitor{position:relative;max-width:640px;margin-inline:auto;border:10px solid #151515;border-radius:26px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px #3a3a3a,0 40px 80px rgba(0,0,0,.6);aspect-ratio:2.2/1;display:flex;flex-direction:column}
.view{position:relative;flex:1;min-height:0;overflow:hidden}
.view[hidden]{display:none}
.view + .view{border-top:2px solid #000}
.view img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;left:12px;z-index:3;font-size:.74rem;font-weight:700;letter-spacing:.04em;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:99px;display:flex;gap:7px;align-items:center}
.rec{width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.1}}
.tag.r{left:auto;right:12px}
.road{position:absolute;inset:0;background:linear-gradient(#8fb3d9 0,#cfdbe6 42%,#2b2e33 42.2%)}
.road .city{position:absolute;left:0;right:0;top:20%;height:22.5%;background:
  linear-gradient(90deg,#55606c 0 6%,#6b7682 6% 14%,#4a535d 14% 19%,#7b8692 19% 31%,#55606c 31% 38%,#6b7682 38% 49%,#4a535d 49% 58%,#7b8692 58% 70%,#55606c 70% 79%,#6b7682 79% 100%);
  clip-path:polygon(0 30%,6% 30%,6% 0,14% 0,14% 55%,19% 55%,19% 15%,31% 15%,31% 60%,38% 60%,38% 10%,49% 10%,49% 40%,58% 40%,58% 0,70% 0,70% 50%,79% 50%,79% 25%,100% 25%,100% 100%,0 100%)}
.road .lane{position:absolute;left:50%;top:42%;bottom:0;width:70%;transform:translateX(-50%);background:#34373d;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%)}
.road .dash{position:absolute;left:50%;top:42%;bottom:0;width:6%;transform:translateX(-50%);
  background:repeating-linear-gradient(#f2c230 0 28px,transparent 28px 64px);background-size:100% 64px;animation:dash .5s linear infinite;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
@keyframes dash{to{background-position:0 64px}}
.road .car{position:absolute;left:50%;top:46%;width:13%;height:9%;transform:translateX(-50%);background:#1c1f24;border-radius:6px 6px 3px 3px}
.road .car::before,.road .car::after{content:"";position:absolute;bottom:22%;width:20%;height:14%;background:#ff3b30;border-radius:2px;box-shadow:0 0 8px #ff3b30}
.road .car::before{left:8%}.road .car::after{right:8%}
.road .car.b{left:34%;top:44.5%;width:8%;height:6%;opacity:.9}
.road .car.c{left:66%;top:44.5%;width:8%;height:6%;opacity:.9}
.assist{position:absolute;right:12px;bottom:10px;z-index:3;font-size:.74rem;font-weight:700;background:rgba(0,0,0,.65);padding:5px 11px;border-radius:99px;display:flex;gap:8px;align-items:center}
.assist i{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 0 rgba(52,199,89,.7);animation:beep 1.4s infinite}
@keyframes beep{to{box-shadow:0 0 0 9px rgba(52,199,89,0)}}

/* ---------- apps page ---------- */
.appgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px;max-width:480px}
.tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0;border-radius:16px;font-size:.7rem;white-space:nowrap;font-weight:500;transition:background .2s,transform .2s}
.tile:hover{transform:translateY(-3px)}
.tile[aria-pressed=true]{background:#000;color:#fff}
.tile .ico{width:56px;height:56px;border-radius:14px}
.tile .ico{box-shadow:0 6px 14px rgba(0,0,0,.2)}
.appnote{margin-top:16px;min-height:3.2em;max-width:44ch;font-size:.95rem}
.appnote b{font-weight:700}
.voice{display:flex;align-items:center;gap:12px;margin-top:6px;border:1px solid rgba(0,0,0,.22);border-radius:99px;padding:10px 18px;max-width:max-content;font-size:.92rem}
.voice svg{width:18px;height:18px;flex:none;color:var(--blue)}
.voice em{font-style:normal;min-width:30ch}
.voice em::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.stage{position:absolute;inset:0;display:grid;grid-template-columns:11% 1fr}
.main{position:relative;overflow:hidden;color:#fff;background:#10141d}
.map{position:absolute;inset:0;width:100%;height:100%}
.route{stroke-dasharray:100;stroke-dashoffset:100;animation:draw100 2.4s .2s ease forwards}
@keyframes draw100{to{stroke-dashoffset:0}}
.me{animation:pulse 1.6s infinite;transform-origin:center;transform-box:fill-box}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
.dir{position:absolute;left:2cqw;top:2cqw;background:rgba(0,0,0,.72);border-radius:1.6cqw;padding:1.3cqw 2.2cqw;font-size:1.5cqw;backdrop-filter:blur(6px)}
.dir b{display:block;font-size:2.8cqw;font-weight:600;line-height:1.1}
.eta{position:absolute;left:2cqw;bottom:2cqw;background:rgba(0,0,0,.72);border-radius:1.4cqw;padding:1cqw 2cqw;font-size:1.5cqw}
.eta b{font-size:2.1cqw;margin-right:.8cqw}
.player{position:absolute;inset:0;display:flex;align-items:center;gap:3.4cqw;padding:0 5cqw}
.art{width:20cqw;height:20cqw;border-radius:2cqw;flex:none;box-shadow:0 2cqw 4cqw rgba(0,0,0,.5);display:grid;place-items:center}
.art svg{width:46%;height:46%}
.pl{flex:1;min-width:0}
.pl h4{font-family:var(--serif);font-weight:400;font-size:3.3cqw;line-height:1.1}
.pl p{opacity:.7;font-size:1.7cqw;margin-top:.5cqw}
.bar{height:.7cqw;border-radius:9px;background:rgba(255,255,255,.2);margin:2.6cqw 0 2cqw;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:#fff;animation:prog 14s linear forwards}
@keyframes prog{to{width:100%}}
.ctrl{display:flex;gap:3cqw;align-items:center}
.ctrl svg{width:3.4cqw;height:3.4cqw}
.ctrl .play{width:6.2cqw;height:6.2cqw;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center}
.ctrl .play svg{width:3cqw;height:3cqw}
.alert{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 55%,#2a0f12,#10141d 70%)}
.alert .lim{width:15cqw;height:15cqw;border-radius:50%;border:1.4cqw solid #e5303a;background:#fff;color:#000;display:grid;place-items:center;font-weight:800;font-size:6cqw;margin:0 auto 2cqw;animation:alarm 1s infinite}
@keyframes alarm{50%{box-shadow:0 0 0 2.4cqw rgba(229,48,58,.25)}}
.alert b{font-family:var(--serif);font-weight:400;font-size:3.6cqw;display:block}
.alert span{font-size:1.7cqw;opacity:.75}
.call{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(#16202e,#0c1119)}
.call .av{width:13cqw;height:13cqw;border-radius:50%;background:linear-gradient(135deg,#f6a,#fa6);display:grid;place-items:center;font-family:var(--serif);font-size:6cqw;margin:0 auto 1.4cqw}
.call b{font-family:var(--serif);font-weight:400;font-size:3.6cqw;display:block}
.call span{font-size:1.7cqw;opacity:.7}
.call .acts{display:flex;gap:3cqw;justify-content:center;margin-top:2cqw}
.call .acts i{width:6cqw;height:6cqw;border-radius:50%;display:grid;place-items:center}
.call .acts svg{width:50%;height:50%}
.msg{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#16202e,#0c1119);padding:3cqw}
.msg .bub{background:#2a3446;border-radius:2cqw 2cqw 2cqw .4cqw;padding:2cqw 2.6cqw;font-size:2.3cqw;max-width:60%}
.msg .bub small{display:block;font-size:1.4cqw;opacity:.65;margin-bottom:.4cqw}
.msg .reply{font-size:1.6cqw;opacity:.8;margin-top:2cqw;display:flex;gap:1cqw;align-items:center;justify-content:center}
.msg .reply i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#34c759;animation:blink 1s steps(2) infinite}
.swap{animation:swapin .45s ease}
@keyframes swapin{from{opacity:0;transform:scale(1.03)}}

/* ---------- extra pages ---------- */
.light .tabs{border-color:rgba(0,0,0,.3)}
.light .tabs button[aria-selected=true]{background:#000;color:#fff}

/* verbinden */
.linkscene{display:flex;align-items:center;width:100%}
.linkscene .unit{flex:0 1 56%;min-width:0;margin:0}
.phone{flex:none;width:clamp(74px,9vw,120px);aspect-ratio:9/18.5;border:3px solid #3c3c3c;border-radius:20px;background:#0a0a0a;position:relative;overflow:hidden}
.phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:30%;height:5px;border-radius:9px;background:#222;z-index:2}
.pscr{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:.66rem;font-weight:700;padding:6px;transition:background .5s}
.beam{position:relative;flex:1;min-width:36px;height:2px;margin:0 8px;background:repeating-linear-gradient(90deg,var(--blue) 0 7px,transparent 7px 15px)}
.beam i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 2px var(--blue);animation:travel 2.2s linear infinite;animation-delay:calc(var(--d)*.55s);opacity:0}
@keyframes travel{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.conn{position:absolute;top:1.6cqw;right:2cqw;z-index:6;display:grid;font-size:1.5cqw;font-weight:600;background:rgba(0,0,0,.7);padding:.8cqw 1.8cqw;border-radius:9cqw;color:#fff}
.conn span{grid-area:1/1;white-space:nowrap}
.conn .a{animation:fadeOut .2s 1.1s forwards}
.conn .b{opacity:0;color:#34c759;animation:fadeIn .2s 1.1s forwards}
@keyframes fadeOut{to{opacity:0}}@keyframes fadeIn{to{opacity:1}}
.aa{position:absolute;inset:0;background:#0d1117;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:1.4cqw;padding:2cqw;color:#fff}
.aa .card{border-radius:1.8cqw;background:#1b2230;position:relative;overflow:hidden;font-size:1.7cqw;padding:1.8cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:.4cqw}
.aa .c1{grid-row:1/3;padding:0}
.aa .card b{font-size:2.3cqw;font-weight:600}
.aa .card span{opacity:.7}
.ml{position:absolute;inset:0;background:linear-gradient(120deg,#1a2a52,#7a2a63 55%,#e8663a);display:grid;place-items:center;color:#fff;text-align:center}
.ml .plb{width:11cqw;height:11cqw;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;margin:0 auto 2cqw;animation:plb 1.8s infinite}
@keyframes plb{50%{box-shadow:0 0 0 2.4cqw rgba(255,255,255,.2)}}
.ml .plb svg{width:4.4cqw;height:4.4cqw;margin-left:.6cqw}
.ml span{font-size:2cqw;font-weight:600}

/* audio */
.apanel{background:#000;color:#fff;border-radius:28px;padding:clamp(20px,2.4vw,32px);max-width:520px;margin-inline:auto;width:100%;display:flex;flex-direction:column;gap:18px}
.avis{position:relative;height:clamp(170px,26vh,240px);display:grid;place-items:center;overflow:hidden}
.avis .cap{position:absolute;left:0;bottom:0;font-size:.92rem;opacity:.8}
.avis > div{position:absolute;inset:0;display:grid;place-items:center}
.eq{display:flex;align-items:flex-end;gap:4px;height:62px}
.eq i{flex:1;background:var(--blue);border-radius:3px;height:15%;animation:eq 1.1s ease-in-out infinite;animation-delay:calc(var(--d)*-.13s)}
@keyframes eq{0%,100%{height:12%}50%{height:var(--h)}}
.rings i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border:2px solid var(--blue);border-radius:50%;animation:ring 2.4s infinite;animation-delay:calc(var(--d)*.8s);opacity:0}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}
.rings svg{position:relative;width:34px;height:34px;color:#fff}
.plugsvg{width:100%;max-width:300px}
.plugsvg .plg{animation:plug 2.6s ease-in-out infinite}
@keyframes plug{0%{transform:translateX(-90px)}45%,85%{transform:none}100%{transform:translateX(-90px)}}
.dialbox{width:90%;text-align:center}
.dialbox b{font-family:var(--serif);font-weight:400;font-size:3.4rem;line-height:1}
.dialbox small{opacity:.7;margin-left:6px}
.dial{position:relative;height:46px;margin-top:16px;background:repeating-linear-gradient(90deg,#666 0 1px,transparent 1px 14px);border-top:1px solid #444;border-bottom:1px solid #444}
.dial i{position:absolute;top:-8px;bottom:-8px;width:2px;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:needle 5s ease-in-out infinite alternate}
@keyframes needle{from{left:8%}to{left:72%}}
.opts{display:grid;gap:10px;margin-top:26px;max-width:500px}
.opt{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;text-align:left;padding:13px 16px;border:1px solid rgba(0,0,0,.2);border-radius:16px;transition:background .25s,color .25s,transform .2s}
.opt:hover{transform:translateX(4px)}
.opt svg{width:26px;height:26px}
.opt b{display:block}.opt span{font-size:.88rem;opacity:.72}
.opt[aria-pressed=true]{background:#000;color:#fff;border-color:#000}

/* plug & play */
.steps{list-style:none;margin-top:26px;display:grid;gap:10px;max-width:480px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:12px 16px;border:1px solid rgba(255,255,255,.2);border-radius:16px;opacity:.42;transition:opacity .4s,background .4s,border-color .4s}
.steps li.on{opacity:1;background:rgba(255,255,255,.08);border-color:var(--blue)}
.steps li i{width:40px;height:40px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:1.2rem;transition:background .4s}
.steps li.on i{background:var(--blue);border-color:var(--blue)}
.steps b{display:block}.steps span{font-size:.88rem;opacity:.75}
#plug .tabs{margin-top:22px}
.pscene svg{width:100%;max-width:580px;display:block;margin-inline:auto;overflow:visible}
.pscene #scr{transition:transform .8s cubic-bezier(.2,1.2,.4,1),opacity .5s;transform:translateY(-90px);opacity:0}
.pscene.s1 #scr,.pscene.s2 #scr,.pscene.s3 #scr{transform:none;opacity:1}
.pscene .cable{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease}
.pscene.s2 .cable,.pscene.s3 .cable{stroke-dashoffset:0}
.pscene .glow{opacity:0;transition:opacity .4s .6s}
.pscene.s2 .glow,.pscene.s3 .glow{opacity:1}
.pscene .lit{opacity:0;transition:opacity .9s}
.pscene.s3 .lit{opacity:1}
.pscene[data-p=cig] .sock-usb,.pscene[data-p=usb] .sock-cig{display:none}

/* camp */
.camp{position:relative;aspect-ratio:16/10;border-radius:26px;overflow:hidden;max-width:640px;margin-inline:auto;width:100%;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.camp .lay{position:absolute;inset:0;transition:opacity .9s}
.camp .lay svg{width:100%;height:100%;display:block}
.camp[data-m=night] .day,.camp[data-m=day] .night{opacity:0}
.rd{animation:road .5s linear infinite}
@keyframes road{to{stroke-dashoffset:60}}
.veh{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px)}}
.wh{transform-box:fill-box;transform-origin:center;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tw{animation:tw 2.8s ease-in-out infinite;animation-delay:calc(var(--t)*.55s)}
@keyframes tw{50%{opacity:.15}}
.wf{opacity:.15;animation:wfa 1.6s infinite;animation-delay:calc(var(--w)*.25s)}
@keyframes wfa{40%{opacity:1}}
.gauge{margin-top:30px;max-width:440px}
.gbar{position:relative;height:10px;border-radius:9px;background:linear-gradient(90deg,#4aa3ff,#8be0a8 40%,#ffd04a 70%,#ff5a3c)}
.gbar i{position:absolute;top:-6px;left:0;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #000;animation:sweep 6s ease-in-out infinite alternate}
@keyframes sweep{to{left:calc(100% - 22px)}}
.glab{display:flex;justify-content:space-between;font-size:.82rem;margin-top:12px;opacity:.75}

/* ---------- pages 9+ ---------- */
.light .specs{border-top-color:rgba(0,0,0,.2)}
.light .specs li{border-bottom-color:rgba(0,0,0,.2)}
.light .specs li:hover{background:rgba(0,0,0,.05)}

/* een dag */
.daycard{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:26px;padding:16px 20px;border:1px solid rgba(255,255,255,.22);border-radius:18px;max-width:480px;min-height:92px}
.dclock{font-family:var(--serif);font-size:2.6rem;line-height:1;min-width:3.4ch}
.daycard b{display:block;font-size:1.05rem}
.daycard span{font-size:.92rem;opacity:.75;display:block}
.dslider{-webkit-appearance:none;appearance:none;width:100%;max-width:480px;height:8px;border-radius:9px;margin-top:26px;display:block;background:linear-gradient(90deg,#f7b267,#5aa9f0 30%,#f08a4b 60%,#3a2f6b 80%,#0a0e1c)}
.dslider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #000;box-shadow:0 0 0 2px #fff;cursor:grab}
.dslider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #000;box-shadow:0 0 0 2px #fff;cursor:grab}
.dticks{display:flex;justify-content:space-between;max-width:480px;font-size:.78rem;opacity:.6;margin-top:10px}
.dayscene{position:relative;aspect-ratio:16/10;border-radius:26px;overflow:hidden;max-width:640px;margin-inline:auto;width:100%;background:linear-gradient(var(--top,#f7b267),var(--bot,#ffe9c7))}
.dayscene svg{position:absolute;inset:0;width:100%;height:100%}
.dayscene #dSun,.dayscene #dMoon{transition:opacity .6s}
.dayscene .screen{position:absolute;left:50%;bottom:6%;width:74%;transform:translateX(-50%);container-type:inline-size}

/* spraak */
.vbox{display:flex;align-items:center;gap:20px;margin-top:26px;max-width:480px}
.mic{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.mic svg{width:26px;height:26px;position:relative}
.mic i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);opacity:0}
.mic.listening i{animation:micring 1.4s infinite}
.mic.listening i:nth-child(2){animation-delay:.5s}
@keyframes micring{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}
.wave{flex:1;display:flex;align-items:center;gap:4px;height:48px}
.wave i{flex:1;height:6px;border-radius:3px;background:rgba(0,0,0,.2);transition:background .3s}
.listening-on .wave i{background:var(--blue);animation:wv .8s ease-in-out infinite;animation-delay:calc(var(--d)*-.09s)}
@keyframes wv{0%,100%{height:8px}50%{height:var(--h)}}
.vsay{font-family:var(--serif);font-size:1.7rem;margin-top:18px;min-height:2.4em;max-width:22ch;line-height:1.2}
#vChips .chip{transition:background .25s,color .25s}
#vChips button.chip{cursor:pointer}
#vChips button.chip[aria-pressed=true]{background:#000;color:#fff}

/* scherm vergelijken */
.cmp .lyr{position:absolute;inset:0}
.cmp .lyr.a{filter:saturate(.45) brightness(.72) contrast(.82)}
.cmp .glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,0) 45%,rgba(255,255,255,.14) 70%);z-index:3}
.cmp .lyr.b{clip-path:inset(0 0 0 var(--x))}
.cmp .hd{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;z-index:4;pointer-events:none}
.cmp .hd::after{content:"↔";position:absolute;top:50%;left:50%;width:5cqw;height:5cqw;margin:-2.5cqw;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:2.4cqw}
.cmp .cap{position:absolute;bottom:1.6cqw;z-index:4;font-size:1.5cqw;font-weight:600;background:rgba(0,0,0,.7);padding:.7cqw 1.6cqw;border-radius:9cqw}
.cmp .cap.l{left:12.5cqw}.cmp .cap.r{right:2cqw}
.cmprange{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:6}
.hint{font-size:.86rem;opacity:.65;margin-top:18px}

/* faq */
.faq{border-top:1px solid rgba(255,255,255,.2)}
.qa{border-bottom:1px solid rgba(255,255,255,.2)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:17px 4px;font-family:var(--serif);font-size:1.22rem}
.qa button i{position:relative;flex:none;width:18px;height:18px}
.qa button i::before,.qa button i::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .3s}
.qa button i::after{transform:rotate(90deg)}
.qa.open button i::after{transform:rotate(0)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.ans p{overflow:hidden;padding-left:4px;opacity:.78;font-size:.96rem;max-width:52ch}
.qa.open .ans{grid-template-rows:1fr}
.qa.open .ans p{padding-bottom:18px}

/* ---------- extra: fab, badge, demo, film, voor/na, amsterdam ---------- */
.fab{position:fixed;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,28px);z-index:60;display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:99px;background:#25d366;color:#04230f;font-weight:700;font-size:.95rem;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s,opacity .3s}
.fab:hover{transform:translateY(-3px)}
.fab.hide{opacity:0;pointer-events:none;transform:translateY(20px)}
.fab svg{width:24px;height:24px}
@media(max-width:560px){.fab span{display:none}.fab{padding:14px}}
.badge{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px;border:1px solid rgba(255,255,255,.3);border-radius:99px;font-size:.9rem}
.badge i{width:9px;height:9px;border-radius:50%;background:#34c759;box-shadow:0 0 0 0 rgba(52,199,89,.7);animation:beep 1.4s infinite}
.light .steps li{border-color:rgba(0,0,0,.2)}
.light .steps li.on{background:rgba(0,0,0,.05);border-color:var(--blue)}

/* demo */
.hm{position:absolute;inset:0}
.hm .grid{position:absolute;inset:0}
.ico{position:relative}
.press{animation:press .5s ease}
@keyframes press{40%{transform:scale(.86)}100%{transform:none}}
.tap{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.6);animation:tapr .7s ease-out forwards;pointer-events:none}
@keyframes tapr{from{transform:scale(0);opacity:.95}to{transform:scale(1.7);opacity:0}}
.lib{position:absolute;inset:0;padding:2.2cqw 3cqw;background:linear-gradient(#1a2a22,#0c1410);color:#fff}
.lib h5{font-family:var(--serif);font-weight:400;font-size:3cqw;margin-bottom:1.2cqw}
.lrow{position:relative;overflow:hidden;display:grid;grid-template-columns:5.4cqw 1fr auto;gap:1.6cqw;align-items:center;padding:.7cqw 1.2cqw;border-radius:1.2cqw;font-size:1.7cqw;transition:background .3s}
.lrow .lart{width:5.4cqw;height:5.4cqw;border-radius:1cqw}
.lrow b{display:block;font-weight:600}
.lrow span{opacity:.65;font-size:1.4cqw}
.lrow.sel{background:rgba(30,215,96,.24)}
.lrow.pop{animation:rowin .45s both;animation-delay:calc(var(--i)*.12s)}
@keyframes rowin{from{opacity:0;transform:translateY(2cqw)}}
.np{position:absolute;inset:0;display:flex;align-items:center;gap:3.4cqw;padding:0 5cqw;background:linear-gradient(135deg,#0f3d22,#0a0f0c);color:#fff}
.np .tagn{font-size:1.3cqw;letter-spacing:.14em;color:#1ed760;font-weight:700;margin-bottom:.8cqw}
.np .ctrl{justify-content:space-between}
.eqm{display:flex;gap:.6cqw;align-items:flex-end;height:6cqw;margin-left:auto}
.eqm i{width:.8cqw;height:20%;background:#1ed760;border-radius:1cqw;animation:eqm .9s ease-in-out infinite;animation-delay:calc(var(--d)*-.12s)}
@keyframes eqm{50%{height:var(--h)}}
.fm{position:absolute;inset:0}
.fm .spd{position:absolute;left:2cqw;bottom:2cqw;background:rgba(0,0,0,.75);border-radius:1.6cqw;padding:1cqw 2cqw;text-align:center;font-size:1.4cqw}
.fm .spd b{display:block;font-size:4.4cqw;font-weight:600;line-height:1;transition:color .4s}
.fm .lim{position:absolute;left:2cqw;top:2cqw;width:7cqw;height:7cqw;border-radius:50%;border:.9cqw solid #e5303a;background:#fff;color:#000;display:grid;place-items:center;font-weight:800;font-size:3cqw}
.fm .ban{position:absolute;left:50%;top:2cqw;transform:translate(-50%,-170%);background:#e5303a;color:#fff;border-radius:1.8cqw;padding:1.2cqw 3cqw;display:flex;align-items:center;gap:1.6cqw;font-size:2cqw;font-weight:600;transition:transform .5s cubic-bezier(.2,1.3,.4,1),background .4s;white-space:nowrap;z-index:3}
.fm .ban.show{transform:translate(-50%,0)}
.fm .ban.ok{background:#1f9d55}
.fm .ban em{font-style:normal;font-family:var(--serif);font-size:3.2cqw;min-width:5ch}
.fm .ban.ok em{display:none}

/* film */
.phone.big{width:clamp(112px,13vw,170px)}
.pui{position:absolute;inset:0;padding:18px 7px 7px;display:flex;flex-direction:column;gap:6px;font-size:.62rem;color:#fff;background:#0b0b0f}
.ptop{font-weight:700;font-size:.8rem;padding:0 2px}
.posters{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:1;min-height:0}
.poster{position:relative;overflow:hidden;border-radius:6px;display:flex;align-items:flex-end;padding:4px;font-size:.52rem;font-weight:700}
.pplay{position:relative;flex:1;border-radius:8px;overflow:hidden;min-height:0}
.prow{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.64rem}
.pshare{position:relative;overflow:hidden;display:flex;gap:4px;align-items:center;border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:4px 8px;font-size:.58rem;transition:background .3s,border-color .3s}
.pshare.hit{background:var(--blue);border-color:var(--blue)}
.pshare svg{width:12px;height:12px}
.pbadge{position:absolute;left:6px;right:6px;bottom:44px;z-index:5;text-align:center;background:#34c759;color:#04230f;border-radius:99px;font-size:.54rem;font-weight:700;padding:4px;opacity:0;transform:translateY(8px);transition:.4s}
.pbadge.show{opacity:1;transform:none}
#filmScene .beam{opacity:.15;transition:opacity .6s}
#filmScene.linked .beam{opacity:1}
.film{--w:640px;position:absolute;inset:0;overflow:hidden;container-type:inline-size;background:#2a1b5c}
.phone .film{--w:150px}
.fsky{position:absolute;inset:0;background:linear-gradient(#1a1245,#8a3a7a 55%,#ffb36b)}
.fsun{position:absolute;left:50%;bottom:20%;width:22%;aspect-ratio:1;margin-left:-11%;border-radius:50%;background:#ffe29a;box-shadow:0 0 60px 20px rgba(255,200,120,.45);animation:sunrise 12s ease-in-out infinite alternate}
@keyframes sunrise{from{transform:translateY(120%)}to{transform:translateY(-40%)}}
.fcity{position:absolute;left:0;right:0;bottom:0;height:36%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Cpath fill='%230b1020' d='M0 60V30h14V18h16v20h12V22h18v38h10V26h14V10h20v30h14V28h16v32z'/%3E%3C/svg%3E") repeat-x 0 100%/var(--w) 100%;animation:city 16s linear infinite}
.fcity.f2{height:24%;opacity:.55;animation-duration:30s;background-size:calc(var(--w)*1.4) 100%}
@keyframes city{to{background-position-x:calc(var(--w)*-1)}}
.fsub{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-size:4.2cqw;font-weight:600;text-shadow:0 2px 6px #000;color:#fff;min-height:1.4em}
.phone .fsub{display:none}
.fbar{position:absolute;left:4%;right:4%;bottom:4%;height:3px;background:rgba(255,255,255,.25);border-radius:9px;overflow:hidden}
.fbar i{display:block;height:100%;width:0;background:#fff;animation:prog 40s linear forwards}
.wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2cqw;background:linear-gradient(#16202e,#0c1119);color:#fff;font-size:1.9cqw}
.dots3{display:flex;gap:1.2cqw}
.dots3 i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.dots3 i:nth-child(2){animation-delay:.2s}.dots3 i:nth-child(3){animation-delay:.4s}

/* voor en na */
.ba{position:relative;aspect-ratio:16/10;border-radius:26px;overflow:hidden;max-width:640px;margin-inline:auto;width:100%;container-type:inline-size;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.ba .l1,.ba .l2{position:absolute;inset:0}
.ba svg{width:100%;height:100%;display:block}
.ba .l2{clip-path:inset(0 0 0 var(--x))}
.ba .hd{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;z-index:4;pointer-events:none}
.ba .hd::after{content:"↔";position:absolute;top:50%;left:50%;width:6cqw;height:6cqw;margin:-3cqw;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:3cqw}
.ba .cap{position:absolute;top:2cqw;z-index:4;font-size:2cqw;font-weight:700;background:rgba(0,0,0,.7);color:#fff;padding:.8cqw 2cqw;border-radius:9cqw}
.ba .cap.l{left:2cqw}.ba .cap.r{right:2cqw}
.light .hint{color:#000}

/* amsterdam */
.stamp{display:inline-block;border:3px solid #34c759;color:#34c759;border-radius:10px;padding:6px 16px;font-weight:800;letter-spacing:.14em;font-size:1.05rem;opacity:0;transform:scale(2.4) rotate(-6deg);transition:transform .55s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.live .stamp{opacity:1;transform:rotate(-6deg)}
.ammap{border-radius:26px;overflow:hidden;max-width:640px;margin-inline:auto;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.ammap svg{display:block;width:100%;height:auto}
.vroute{stroke-dashoffset:1;animation:draw 6s ease infinite}
.pin{animation:drop 6s infinite;transform-box:fill-box}
@keyframes drop{0%,78%{transform:translateY(-70px);opacity:0}86%{transform:translateY(0);opacity:1}92%{transform:translateY(-10px)}96%,100%{transform:none;opacity:1}}
.pring{transform-box:fill-box;transform-origin:center;opacity:0;animation:pr 6s infinite}
.pring.p2{animation-delay:.5s}
@keyframes pr{0%,84%{transform:scale(1);opacity:0}86%{opacity:.9}100%{transform:scale(5);opacity:0}}
.chk{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:.9rem;cursor:pointer}
.chk input{width:20px;height:20px;accent-color:#2f6bff;flex:none}
@media (prefers-reduced-motion:reduce){.stamp{opacity:1;transform:rotate(-6deg)}.vroute{stroke-dashoffset:0}.pin{opacity:1}}

@media (min-width:900px) and (max-height:820px){
  h2{font-size:clamp(2rem,6.2vh,3.4rem)}
  .lead{margin-top:12px}
  html.paged .page{padding-top:92px;padding-bottom:58px}
  .steps{gap:8px;margin-top:16px}.steps li{padding:8px 14px}
  .btns{margin-top:16px}.tabs{margin-top:18px}
  .feat{margin-top:16px;gap:10px}.loop{margin-top:20px}
  .daycard{margin-top:16px}.dslider{margin-top:18px}
  .box{margin-top:16px;gap:8px}
  .buycard{padding:22px 26px}.qty{margin-top:16px;padding-top:14px}
  .page .qa button{padding:12px 4px;font-size:1.1rem}
  .page .specs li{padding:5px 4px}.page .specs dt{font-size:1.05rem}.page .specs dd{font-size:.9rem}
  .opts{margin-top:18px;gap:8px}.opt{padding:9px 14px}
  .appgrid{margin-top:18px}
}
/* ---------- details ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none}
.wrap{position:relative;z-index:1}
.page.dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(47,107,255,.14),transparent 62%)}
@media(hover:hover){.page.dark:hover::before{opacity:1}}
.foot a,.foot button{text-decoration:underline;text-underline-offset:3px;opacity:1}
.foot{flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:#000;color:#fff;padding:12px 22px;border-radius:99px;font-size:.92rem;opacity:0;pointer-events:none;transition:.35s;z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- v4: effecten ---------- */
.js .page h1 .w,.js .page h2 .w{display:inline-block}
.js .live h1 .w,.js .live h2 .w{animation:wordUp .85s calc(var(--i)*.07s + .1s) cubic-bezier(.2,.9,.3,1) both}
@keyframes wordUp{from{opacity:0;transform:translateY(.55em) rotate(2deg)}to{opacity:1;transform:none}}
.js .live .lead,.js .live .chips,.js .live .btns,.js .live .tabs,.js .live .steps,.js .live .feat,.js .live .opts{animation:fadeUp .8s .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .live.hero h1 .w:first-child{background:linear-gradient(90deg,#fff 0%,#7fa6ff 40%,#fff 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordUp .85s .1s cubic-bezier(.2,.9,.3,1) both,shim 5s 1.2s linear infinite}
@keyframes shim{to{background-position:-250% 0}}
.screen::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%);transform:translateX(-130%);animation:sheen 8s 3s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
#heroUnit{animation:hover 7s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-9px)}}
.hero::after{content:"";position:absolute;right:-8vmin;top:6%;width:62vmin;height:62vmin;background:radial-gradient(circle,rgba(47,107,255,.34),rgba(47,107,255,.12) 40%,transparent 68%);pointer-events:none;animation:orb 14s ease-in-out infinite alternate}
@keyframes orb{to{transform:translate(-9vmin,10vmin) scale(1.2)}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.btn:hover::after{transform:translateX(130%);transition:transform .7s}
.chip{transition:transform .2s,background .2s}
.chip:hover{transform:translateY(-3px)}
.confetti{position:fixed;z-index:100;width:9px;height:14px;border-radius:2px;pointer-events:none}

/* details */
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:900px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dgrid{grid-template-columns:1fr}}
.dt{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;transition:transform .3s,box-shadow .3s}
.dt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(47,107,255,.16),transparent 65%)}
.dt:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.12)}
.dt:hover::before{opacity:1}
.dt svg{width:54px;height:54px;color:#000;margin-bottom:8px}
.dt b{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.dt span{font-size:.9rem;opacity:.72}
.js .live .dt{animation:fadeUp .7s calc(.35s + var(--i)*.08s) cubic-bezier(.2,.9,.3,1) both}
.dt .rip{transform-box:fill-box;transform-origin:center;opacity:0;animation:ripple 2.2s ease-out infinite}
.dt .rip.r2{animation-delay:1.1s}
@keyframes ripple{from{transform:scale(.4);opacity:.9}to{transform:scale(1.7);opacity:0}}
.dt .bar{transform-box:fill-box;transform-origin:center;animation:bars 1s ease-in-out infinite;animation-delay:calc(var(--b)*-.17s)}
@keyframes bars{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.dt .spin{transform-box:fill-box;transform-origin:center;animation:spin 3.4s linear infinite}
.dt .drop{animation:drop2 1.2s linear infinite;animation-delay:calc(var(--d)*-.3s)}
@keyframes drop2{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(12px);opacity:0}}
.dt .mer{transform-box:fill-box;transform-origin:bottom;animation:mer 3.2s ease-in-out infinite alternate}
@keyframes mer{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.dt .seesaw{transform-box:view-box;transform-origin:24px 18px;animation:seesaw 3s ease-in-out infinite alternate}
@keyframes seesaw{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}

/* alles in één */
.mstage{position:relative;container-type:inline-size;width:100%;max-width:560px;aspect-ratio:1/.9;margin-inline:auto}
.mchip{position:absolute;left:50%;top:50%;display:flex;gap:10px;align-items:center;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:99px;background:#0b0b0b;color:var(--paper);white-space:nowrap;font-size:clamp(.72rem,2.8cqw,1rem);
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));opacity:0;transition:transform .9s cubic-bezier(.6,0,.2,1),opacity .5s}
.mchip svg{width:1.2em;height:1.2em;flex:none}
.mstage.in .mchip{opacity:1;transition-delay:calc(var(--i)*.18s)}
.mstage.merge .mchip{transform:translate(-50%,-50%) scale(.25);opacity:0;transition-delay:calc(var(--i)*.06s)}
.mtag{position:absolute;left:50%;top:50%;width:38cqw;aspect-ratio:1;margin:-19cqw 0 0 -19cqw;border-radius:50%;background:#fff;color:#000;display:grid;place-content:center;text-align:center;transform:scale(0);transition:transform .7s cubic-bezier(.2,1.6,.4,1)}
.mtag b{font-family:var(--serif);font-weight:400;font-size:12cqw;line-height:1}
.mtag span{font-size:2.6cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:1.2cqw}
.mtag i{position:absolute;inset:0;border-radius:50%;border:2px solid #2f6bff;opacity:0}
.mstage.done .mtag{transform:scale(1)}
.mstage.done .mtag i{animation:ring 1.6s ease-out 2}
.mstage.done .mtag i+i{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .js .w,.js .page .lead,.js .page .chips,.js .page .btns,.js .page .tabs,.js .page .steps,.js .page .feat,.js .page .opts,.js .dt{opacity:1!important;transform:none!important}
  .mchip{opacity:1}.mtag{transform:scale(1)}.mstage .mchip{display:none}
}

/* ---------- v5: soepel scrollen ---------- */
.shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60}
.page:not(.live) *,.page:not(.live) *::before,.page:not(.live) *::after{animation-play-state:paused!important}

/* ---------- v6: rustige paginaovergangen ---------- */
html.paged,html.paged body{height:100%;overflow:hidden}
html.paged main{position:fixed;inset:0}
html.paged .page{position:absolute;inset:0;height:100%;min-height:0;padding-top:104px;padding-bottom:64px;overflow:hidden;border-radius:0}
@keyframes enZoom{from{opacity:0;transform:scale(.93)}}
@keyframes enRise{from{opacity:0;transform:translateY(36px)}}
@keyframes enFade{from{opacity:0}}
@keyframes enOut{from{opacity:0;transform:scale(1.05)}}
html:not(.paged) .live[data-fx=zoom] .wrap{animation:enZoom 1s cubic-bezier(.22,.7,.2,1) both}
html:not(.paged) .live[data-fx=rise] .wrap{animation:enRise 1s cubic-bezier(.22,.7,.2,1) both}
html:not(.paged) .live[data-fx=fade] .wrap{animation:enFade 1.1s ease both}
html:not(.paged) .live[data-fx=out] .wrap{animation:enOut 1s cubic-bezier(.22,.7,.2,1) both}

/* ---------- parfum ---------- */
.dots{display:none!important}
.pill{display:inline-block;padding:7px 16px;border-radius:99px;background:#000;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pvis{position:relative;max-width:440px;width:100%;margin-inline:auto}
.pvis svg{display:block;width:100%;height:auto;max-height:calc(100svh - 190px);margin-inline:auto;overflow:visible}
.pvis .liq{fill:var(--liq,#b0305a);transition:fill .7s ease}
.pvis .lqwave{animation:lqw 3.2s linear infinite}
@keyframes lqw{to{transform:translateX(-100px)}}
.pvis .swing{transform-box:view-box;transform-origin:200px 72px;animation:pend 5.5s ease-in-out infinite alternate}
@keyframes pend{from{transform:rotate(-4.5deg)}to{transform:rotate(4.5deg)}}
.pvis .wisp{stroke:var(--liq,#b0305a);opacity:0;animation:wisp 4.5s ease-in-out infinite;animation-delay:calc(var(--d)*1.4s);transition:stroke .7s}
@keyframes wisp{0%{opacity:0;transform:translateY(24px)}30%{opacity:.75}100%{opacity:0;transform:translateY(-36px)}}
.pprice{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.pprice b{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1}
.pprice span{opacity:.7;font-size:.95rem}
.scents{max-width:520px;margin-top:20px}
.scents button.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.scents button.chip i{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.scents button.chip[aria-pressed=true]{background:#000;color:#fff;border-color:#000}
.pfrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.pfrow[hidden]{display:none}
.pfrow select{flex:1;min-width:0;background:#000;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:10px 14px;font:inherit;font-size:.9rem}
@media(max-width:959px){.pvis svg{max-height:380px}}
@media (min-width:960px) and (max-height:820px){.pvis svg{max-height:calc(100svh - 170px)}.pprice{margin-top:12px}.scents{margin-top:14px}.buycard .big{font-size:3.2rem}.qty{margin-top:12px!important}.chk{margin-top:10px}}

html.paged .wrap{transform:scale(var(--fit,1));transform-origin:50% 50%}
@media (min-width:900px) and (max-height:680px){html.paged .page{padding-top:78px;padding-bottom:46px}.top .logo{height:38px}}
/* telefoon / kleine schermen: soepele effecten tijdens het scrollen (draaien op de GPU, dus zonder getril) */
@keyframes sdZoomIn{from{opacity:0;transform:scale(.9)}}
@keyframes sdRiseIn{from{opacity:0;transform:translateY(70px)}}
@keyframes sdFadeIn{from{opacity:0}}
@keyframes sdOutIn{from{opacity:0;transform:scale(1.08)}}
@keyframes sdLeave{to{opacity:.55;transform:scale(.97)}}
@supports (animation-timeline:view()){
  html:not(.paged) .page[data-fx=zoom] .wrap{animation:sdZoomIn linear both,sdLeave linear both;animation-timeline:view(),view();animation-range:entry 0% entry 40%,exit 70% exit 100%}
  html:not(.paged) .page[data-fx=rise] .wrap{animation:sdRiseIn linear both,sdLeave linear both;animation-timeline:view(),view();animation-range:entry 0% entry 40%,exit 70% exit 100%}
  html:not(.paged) .page[data-fx=fade] .wrap{animation:sdFadeIn linear both,sdLeave linear both;animation-timeline:view(),view();animation-range:entry 0% entry 40%,exit 70% exit 100%}
  html:not(.paged) .page[data-fx=out] .wrap{animation:sdOutIn linear both,sdLeave linear both;animation-timeline:view(),view();animation-range:entry 0% entry 40%,exit 70% exit 100%}
}

/* ---------- spec list ---------- */
.specs{list-style:none;border-top:1px solid rgba(255,255,255,.2)}
.specs li{display:grid;grid-template-columns:minmax(110px,.38fr) 1fr;gap:18px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.2);transition:padding .25s,background .25s}
.specs li:hover{padding-left:16px;background:rgba(255,255,255,.05)}
.specs dt{font-family:var(--serif);font-size:1.15rem}
.specs dd{font-size:.95rem;opacity:.85}
@media(max-width:560px){.specs li{grid-template-columns:1fr;gap:2px}}

/* ---------- verbinden ---------- */
const miniH=k=>`<div class="mini" style="background:${APPS[k].bg}"><svg viewBox="0 0 24 24">${APPS[k].svg}</svg></div>`;
const gridH=l=>l.map((k,i)=>`<div class="app" style="animation:pop .5s ${.9+i*.06}s both cubic-bezier(.2,1.5,.4,1)">${icon(k)}<span>${APPS[k].n}</span></div>`).join('');
const CONN='<div class="conn"><span class="a">Verbinden…</span><span class="b">● Verbonden</span></div>';
const LINK={
  cp:{label:'CarPlay',bg:'linear-gradient(160deg,#2c7bd6,#5a3fc0)',html:()=>`<div class="wall"></div><div class="ui"><div class="side"><span>18:48</span><small>5G</small>${miniH('gmaps')}${miniH('music')}${miniH('phone')}</div><div class="grid">${gridH(['phone','gmaps','msg','music','spotify','flits','waze','pod','cal','set'])}</div></div>`+CONN},
  aa:{label:'Android Auto',bg:'linear-gradient(160deg,#0d1117,#1c3a6b)',html:()=>`<div class="aa"><div class="card c1">${mapSVG('#4c8dff')}<div class="dir">500 m<b>Rechtdoor · A10</b></div></div><div class="card"><b>Spotify</b><span>Jouw dagelijkse mix</span></div><div class="card"><b>Bel Sophie</b><span>Hey Google, bel Sophie</span></div></div>`+CONN},
  ml:{label:'Mirror Link',bg:'linear-gradient(160deg,#7a2a63,#e8663a)',html:()=>`<div class="ml"><div><div class="plb"><svg viewBox="0 0 24 24"><path d="M6 4l14 8-14 8z" fill="#111"/></svg></div><span>Foto's en video's van je telefoon</span></div></div>`+CONN}
};
function setLink(m){
  $$('#linkTabs button').forEach(b=>b.setAttribute('aria-selected',b.dataset.m===m));
  $('#linkScreen').innerHTML=LINK[m].html();
  const p=$('#pscr'); p.style.background=LINK[m].bg; p.textContent=LINK[m].label;
}
$$('#linkTabs button').forEach(b=>b.onclick=()=>setLink(b.dataset.m));
setLink('cp');

/* ---------- audio ---------- */
$('#eq').innerHTML=Array.from({length:30},(_,i)=>`<i style="--d:${(i*7)%11};--h:${35+((i*37)%65)}%"></i>`).join('');
const AUD={
  bt:{cap:'Gekoppeld met je telefoon',html:'<div class="rings"><i style="--d:0"></i><i style="--d:1"></i><i style="--d:2"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7l10 10-5 4V3l5 4L7 17"/></svg></div>'},
  aux:{cap:'Kabel in de aux-ingang van je auto',html:'<svg class="plugsvg" viewBox="0 0 300 100"><rect x="190" y="30" width="80" height="40" rx="8" fill="#1b1b1b" stroke="#555" stroke-width="2"/><rect x="190" y="44" width="30" height="12" fill="#000"/><g class="plg"><rect x="20" y="40" width="70" height="20" rx="6" fill="#2a2a2a"/><rect x="90" y="46" width="90" height="8" rx="3" fill="#c9c9c9"/><rect x="120" y="44" width="4" height="12" fill="#333"/><rect x="140" y="44" width="4" height="12" fill="#333"/></g></svg>'},
  fm:{cap:'Stem je autoradio af op deze frequentie',html:'<div class="dialbox"><b>88.0</b><small>MHz FM</small><div class="dial"><i></i></div></div>'},
  spk:{cap:'Geluid direct uit het scherm',html:'<div class="rings"><i style="--d:0"></i><i style="--d:1"></i><i style="--d:2"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.500"/></svg></div>'}
};
const aKeys=Object.keys(AUD); let aIdx=0, aUser=false;
function setAud(k){
  $$('#aOpts .opt').forEach(b=>b.setAttribute('aria-pressed',b.dataset.a===k));
  $('#aVis').innerHTML=`<div class="swap">${AUD[k].html}</div><span class="cap">${AUD[k].cap}</span>`; aIdx=aKeys.indexOf(k);
}
$$('#aOpts .opt').forEach(b=>b.onclick=()=>{aUser=true;setAud(b.dataset.a)});
setAud('bt');
setInterval(()=>{ if(aUser||reduce||!$('#audio').classList.contains('live'))return; setAud(aKeys[(aIdx+1)%aKeys.length]) },4200);

/* ---------- aansluiten ---------- */
const pS=$('#pscene'), stepLis=$$('#steps li'); let st=0;
function pStep(n){ pS.className='pscene'+(n>0?' s'+Math.min(n,3):''); stepLis.forEach((l,i)=>l.classList.toggle('on',n>0&&i===Math.min(n,3)-1)); }
if(reduce){pS.className='pscene s3';stepLis.forEach(l=>l.classList.add('on'));}
else setInterval(()=>{ if(!$('#plug').classList.contains('live'))return; st=(st+1)%6; pStep(st>3?3:st) },1500);
$$('#powTabs button').forEach(b=>b.onclick=()=>{$$('#powTabs button').forEach(x=>x.setAttribute('aria-selected',x===b));pS.dataset.p=b.dataset.p});

/* ---------- camper ---------- */
$$('#campTabs button').forEach(b=>b.onclick=()=>{$$('#campTabs button').forEach(x=>x.setAttribute('aria-selected',x===b));$('#campScene').dataset.m=b.dataset.m});

/* ---------- order ---------- */
.box{list-style:none;margin-top:26px;display:grid;gap:12px}
.box li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-size:1.02rem}
.box svg{width:26px;height:26px}
.box path{stroke-dasharray:24;stroke-dashoffset:24}
.live .box path{animation:draw24 .6s calc(var(--i)*.18s + .3s) ease forwards}
@keyframes draw24{to{stroke-dashoffset:0}}
.buycard{background:#000;color:#fff;border-radius:28px;padding:clamp(24px,3vw,40px);max-width:460px;margin-inline:auto;width:100%}
.buycard .big{font-family:var(--serif);font-size:clamp(3.4rem,6vw,5.4rem);line-height:1}
.buycard p.sm{opacity:.7;font-size:.92rem;margin-top:8px}
.qty{display:flex;align-items:center;justify-content:space-between;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.stepper{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:4px}
.stepper button{width:36px;height:36px;border-radius:50%;font-size:1.2rem;transition:background .2s}
.stepper button:hover{background:rgba(255,255,255,.15)}
.stepper output{min-width:30px;text-align:center;font-weight:600}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px}
.total b{font-family:var(--serif);font-weight:400;font-size:1.9rem}
.buycard .btn{width:100%;justify-content:center;margin-top:20px;background:#fff;color:#000}
.buycard .btn:hover{background:var(--blue);color:#fff}
.foot{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;align-items:center;gap:14px;font-size:.8rem;opacity:.6}
.foot img{height:30px;filter:invert(1)}
@media(max-width:959px){.foot{position:static;margin-top:40px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sdcard{transform:none;opacity:1}.ring .fg{stroke-dashoffset:0}.route,.route-bg path{stroke-dashoffset:0}.boot{display:none}
  .box path{stroke-dashoffset:0}
  .conn .b{opacity:1}.conn .a{display:none}
}