/* Realistic device mockups (Apple-style, pure CSS). Size each with --w (its width); --u = 1% of that width.
   Put an <img> or <video> inside .screen. Optional chrome: .os-bar + .os-win (Mac), .sbar (iPhone status bar). */

.phone,.laptop,.desktop,.tablet,.imac,.browser{--u:calc(var(--w,600px) / 100)}
.screen > img,.screen > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.screen > video{background:transparent}

/* ======================= iPhone (silver titanium) ======================= */
.phone{position:relative;width:var(--w,240px);aspect-ratio:9/19.5;border-radius:calc(var(--u)*17.5);padding:calc(var(--u)*1.25);
  background:linear-gradient(140deg,#f4f4f5 0%,#b6b8bc 16%,#e9eaeb 38%,#a3a5aa 60%,#dcdddf 80%,#8d8f94 100%);
  box-shadow:inset 0 0 0 calc(var(--u)*.3) rgba(255,255,255,.75),inset 0 0 0 calc(var(--u)*.6) rgba(0,0,0,.12),
    0 calc(var(--u)*16) calc(var(--u)*20) calc(var(--u)*-9) rgba(0,0,0,.42),0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,0,.14)}
.phone::before,.phone::after{content:"";position:absolute;width:calc(var(--u)*.9);border-radius:calc(var(--u)*.6);
  background:linear-gradient(90deg,#8c8e92,#d4d5d8 60%,#9a9ca0)}
.phone::before{left:calc(var(--u)*-.7);top:18%;height:5%;box-shadow:0 calc(var(--u)*11) 0 #b8babd,0 calc(var(--u)*24) 0 #b8babd}
.phone::after{right:calc(var(--u)*-.7);top:27%;height:12%}
.phone .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--u)*16.2);overflow:hidden;background:#000;
  border:calc(var(--u)*3.1) solid #050506;box-shadow:0 0 0 calc(var(--u)*.25) #2b2b2e}
.phone .island{position:absolute;z-index:4;top:calc(var(--u)*2.3);left:50%;width:31%;height:calc(var(--u)*8.6);transform:translateX(-50%);border-radius:99px;background:#000}
.phone .island::after{content:"";position:absolute;right:16%;top:50%;width:calc(var(--u)*3);height:calc(var(--u)*3);transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2a3550,#0b0d14 60%)}
.phone .sbar{position:absolute;z-index:3;left:0;right:0;top:0;height:calc(var(--u)*12.5);display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--u)*8.5) 0 calc(var(--u)*10);background:var(--sb,transparent);color:var(--sbt,#fff);
  font:600 calc(var(--u)*4.7)/1 -apple-system,"SF Pro Text","Inter",system-ui,sans-serif;letter-spacing:-.01em}
.phone .sbar svg{height:calc(var(--u)*4);width:auto;fill:currentColor;display:block}
.phone .screen.has-sb > img{top:calc(var(--u)*12.5);height:calc(100% - var(--u)*12.5)}
.phone .screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%)}

/* ======================= MacBook (front, silver) ======================= */
.laptop{position:relative;width:var(--w,620px)}
.laptop .lid{position:relative;border-radius:calc(var(--u)*3.3) calc(var(--u)*3.3) calc(var(--u)*.5) calc(var(--u)*.5);background:#0a0a0b;
  padding:calc(var(--u)*1.7) calc(var(--u)*1.7) calc(var(--u)*2.2);
  box-shadow:0 0 0 calc(var(--u)*.28) #c4c6c9,0 0 0 calc(var(--u)*.4) #8f9195,inset 0 0 0 calc(var(--u)*.14) #2a2a2d}
.laptop .lid::before{content:"";position:absolute;z-index:4;top:calc(var(--u)*1.7);left:50%;width:10.5%;height:calc(var(--u)*1.95);transform:translateX(-50%);
  border-radius:0 0 calc(var(--u)*.8) calc(var(--u)*.8);background:#0a0a0b}
.laptop .lid::after{content:"";position:absolute;z-index:5;top:calc(var(--u)*2.15);left:50%;width:calc(var(--u)*.55);height:calc(var(--u)*.55);transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle at 35% 35%,#34405e,#0c0e15 65%)}
.laptop .screen{position:relative;width:100%;aspect-ratio:1.54;overflow:hidden;border-radius:calc(var(--u)*.5);background:#1c1c1c}
.laptop .screen::after,.desktop .screen::after,.imac .screen::after,.tablet .screen::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 38%)}
.laptop::before{content:"";position:absolute;z-index:2;left:9%;right:9%;bottom:calc(var(--u)*2.9);height:calc(var(--u)*.75);border-radius:calc(var(--u)*.3) calc(var(--u)*.3) 0 0;background:linear-gradient(#55575c,#26272a)}
.laptop .base{position:relative;width:117%;margin-left:-8.5%;height:calc(var(--u)*2.9);
  background:linear-gradient(180deg,#f7f8f9 0%,#e2e3e5 12%,#c9cacd 40%,#a6a7ab 72%,#77787c 92%,#5d5e62 100%);
  border-radius:calc(var(--u)*.35) calc(var(--u)*.35) calc(var(--u)*9) calc(var(--u)*9) / calc(var(--u)*.35) calc(var(--u)*.35) calc(var(--u)*1.7) calc(var(--u)*1.7);
  box-shadow:inset 0 calc(var(--u)*.14) 0 #fff,inset 0 calc(var(--u)*-.3) calc(var(--u)*.4) rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.07)}
.laptop .base::before{content:"";position:absolute;top:0;left:50%;width:13%;height:44%;transform:translateX(-50%);border-radius:0 0 calc(var(--u)*1.1) calc(var(--u)*1.1);
  background:linear-gradient(180deg,#8f9094,#bdbec1)}
.laptop .base::after{content:"";position:absolute;z-index:-1;left:3%;right:3%;bottom:calc(var(--u)*-1.8);height:calc(var(--u)*2.8);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));filter:blur(calc(var(--u)*.4))}

/* macOS menu bar + Safari window toolbar (inside a Mac .screen) */
.os-bar{position:absolute;z-index:3;left:0;right:0;top:0;height:3.1%;display:flex;align-items:center;justify-content:space-between;padding:0 1.6%;
  background:rgba(236,236,238,.92);color:#1d1d1f;font:500 calc(var(--u)*.86)/1 -apple-system,"SF Pro Text","Inter",system-ui,sans-serif;white-space:nowrap}
.os-bar b{font-weight:700;margin-right:1.4em}
.os-bar span{margin-right:1.3em}
.os-bar em{font-style:normal}
.os-win{position:absolute;z-index:3;left:0;right:0;top:3.1%;height:4.4%;display:flex;align-items:center;gap:calc(var(--u)*.6);padding:0 1.4%;
  background:linear-gradient(#f7f7f8,#ececee);border-bottom:1px solid rgba(0,0,0,.1)}
.os-win i{width:calc(var(--u)*.8);height:calc(var(--u)*.8);border-radius:50%;background:#ff5f57}
.os-win i:nth-child(2){background:#febc2e}
.os-win i:nth-child(3){background:#28c840}
.os-win u{margin:0 auto;width:34%;height:58%;border-radius:calc(var(--u)*.6);background:#e3e3e6;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#6e6e73;font:500 calc(var(--u)*.78)/1 -apple-system,"SF Pro Text","Inter",system-ui,sans-serif}
.screen.has-os > img{top:7.5%;height:92.5%}

/* ======================= Studio Display (aluminium, thin stand) ======================= */
.desktop{position:relative;width:var(--w,620px);display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d}
.desktop .panel{position:relative;width:100%;padding:calc(var(--u)*1.75);border-radius:calc(var(--u)*1.6);background:#08080a;
  box-shadow:0 0 0 calc(var(--u)*.38) #c9cbce,0 0 0 calc(var(--u)*.5) #8b8d91}
.desktop::after{content:"";position:absolute;top:calc(var(--u)*.4);height:calc(var(--u)*57.2);right:calc(var(--u)*-.5);width:calc(var(--u)*2.4);
  transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(180deg,#d9dadc,#a9abaf 60%,#8f9195);border-radius:calc(var(--u)*.6)}
.desktop .screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:calc(var(--u)*.3);background:#1c1c1c}
.desktop .neck{width:22%;height:calc(var(--u)*15);margin-top:calc(var(--u)*-.2);
  background:linear-gradient(90deg,#a7a9ad 0%,#e3e4e6 22%,#cfd0d3 55%,#a2a4a8 100%);box-shadow:inset 0 calc(var(--u)*3) calc(var(--u)*3) rgba(0,0,0,.18)}
.desktop .foot{position:relative;width:34%;height:calc(var(--u)*1.3);border-radius:calc(var(--u)*.3) calc(var(--u)*.3) calc(var(--u)*.8) calc(var(--u)*.8);
  background:linear-gradient(180deg,#eeeff0,#b3b5b9)}
.desktop .foot::after{content:"";position:absolute;z-index:-1;left:-30%;right:-30%;bottom:calc(var(--u)*-1.2);height:calc(var(--u)*2.4);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.35),rgba(0,0,0,0))}

/* ======================= iMac 24" (white bezel, aluminium chin) ======================= */
.imac{position:relative;width:var(--w,620px);display:flex;flex-direction:column;align-items:center}
.imac .panel{position:relative;width:100%;border-radius:calc(var(--u)*1.3);overflow:hidden;background:#f3f3f1;
  box-shadow:0 0 0 calc(var(--u)*.2) rgba(0,0,0,.12),0 calc(var(--u)*6) calc(var(--u)*9) calc(var(--u)*-5) rgba(0,0,0,.4)}
.imac .bezel{padding:calc(var(--u)*2.3)}
.imac .screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#1c1c1c}
.imac .chin{height:calc(var(--u)*9.5);background:linear-gradient(180deg,var(--chin1,#e7e8ea),var(--chin2,#c7c9cc));box-shadow:inset 0 calc(var(--u)*.15) 0 rgba(255,255,255,.7)}
.imac .neck{width:23%;height:calc(var(--u)*12);background:linear-gradient(90deg,#a9abaf,#e4e5e7 25%,#d0d1d4 60%,#a5a7ab);
  box-shadow:inset 0 calc(var(--u)*2.5) calc(var(--u)*2.5) rgba(0,0,0,.2)}
.imac .foot{position:relative;width:26%;height:calc(var(--u)*1);border-radius:0 0 calc(var(--u)*.6) calc(var(--u)*.6);background:linear-gradient(#e9eaec,#a9abaf)}
.imac .foot::after{content:"";position:absolute;z-index:-1;left:-40%;right:-40%;bottom:calc(var(--u)*-1.2);height:calc(var(--u)*2.6);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.32),rgba(0,0,0,0))}

/* ======================= iPad Pro (landscape) ======================= */
.tablet{position:relative;width:var(--w,560px);aspect-ratio:1.43;border-radius:calc(var(--u)*3.7);padding:calc(var(--u)*.45);
  background:linear-gradient(135deg,#dcdddf 0%,#9b9da1 28%,#ececed 52%,#8c8e92 78%,#c9cacd 100%);
  box-shadow:inset 0 0 0 calc(var(--u)*.2) rgba(255,255,255,.7),0 calc(var(--u)*7) calc(var(--u)*10) calc(var(--u)*-5) rgba(0,0,0,.45)}
.tablet::after{content:"";position:absolute;z-index:4;top:calc(var(--u)*1.05);left:50%;width:calc(var(--u)*.7);height:calc(var(--u)*.7);transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle at 35% 35%,#34405e,#0c0e15 65%)}
.tablet .screen{position:relative;width:100%;height:100%;overflow:hidden;border:calc(var(--u)*2) solid #060607;border-radius:calc(var(--u)*3.25);background:#1c1c1c}

/* ======================= floating browser window ======================= */
.browser{position:relative;width:var(--w,620px);border-radius:calc(var(--u)*1.2);background:#f4f3f0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(var(--u)*7) calc(var(--u)*12) calc(var(--u)*-5) rgba(0,0,0,.5)}
.browser .chrome{height:calc(var(--u)*3.6);display:flex;align-items:center;gap:calc(var(--u)*.8);padding:0 calc(var(--u)*1.6);background:#e8e6e1;border-bottom:1px solid rgba(0,0,0,.07)}
.browser .chrome i{width:calc(var(--u)*1);aspect-ratio:1;border-radius:50%;background:#cfccc5}
.browser .chrome b{flex:0 0 34%;height:52%;margin:0 auto;border-radius:99px;background:#f6f5f2}
.browser .screen{position:relative;aspect-ratio:16/9.6;overflow:hidden;background:#1c1c1c}

/* ======================= concrete plinth (Cuberto-style prop) ======================= */
.plinth{position:relative;width:var(--pw,100%);height:var(--ph,160px)}
.plinth .top{position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(180deg,#5b5b5a,#3b3b3a);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.plinth .face{position:absolute;left:0;right:0;top:16%;bottom:0;background:#262625;overflow:hidden}
.plinth .face::before,.plinth .top::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.plinth .face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45))}