/* Two self-contained, responsive product compositions. */
.premium-scene{height:490px;transform:none;perspective:1100px;isolation:isolate}
.scene-halo{position:absolute;inset:12% -8%;border-radius:50%;background:radial-gradient(ellipse,#039fee24,transparent 68%);filter:blur(18px);z-index:-1}
.device-desktop{position:absolute;top:47px;left:0;width:95%;border:1px solid #688aa3;border-radius:14px 14px 6px 6px;background:#081421;padding:6px;box-shadow:0 35px 70px #0009,0 0 45px #1584c326;transform:rotateY(-8deg) rotateZ(-4deg)}
.device-toolbar{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#7195ac;font-size:6px;letter-spacing:.09em}
.device-dots{font-size:7px;letter-spacing:3px;color:#47647c}
.device-screen{position:relative;overflow:hidden;background:linear-gradient(90deg,#020c1ee8,#06162955),url('/bg-hero-skyline.jpg') center/cover;border:1px solid #264257;min-height:309px}
.device-navigation{display:flex;align-items:center;justify-content:space-between;padding:9px 20px}
.device-navigation img{width:67px;height:auto;mix-blend-mode:screen}
.device-navigation>span{font-size:5px;letter-spacing:.16em;color:#afc8d8}
.device-content{padding:20px 24px 35px;position:relative}
.device-kicker{font-size:6px;letter-spacing:.19em;color:#7fdcff}
.device-content h3{font-size:40px;line-height:1.04;font-weight:500;margin:15px 0 23px;letter-spacing:-.045em}
.device-action{font-size:6px;letter-spacing:.08em;padding:10px 14px;border:1px solid #5fd7ff;background:#12aade24;display:inline-block}
.device-bottom{display:flex;justify-content:space-between;border-top:1px solid #426478;padding:12px 20px;font-size:5px;color:#b1cdda;letter-spacing:.08em}
.device-base{position:absolute;top:100%;left:-5%;width:110%;height:12px;background:linear-gradient(#63778b,#24394e 50%,#0c1725);clip-path:polygon(5% 0,95% 0,100% 60%,97% 100%,3% 100%,0 60%);box-shadow:0 15px 20px #0008}
.device-phone{position:absolute;right:-9px;bottom:12px;width:171px;padding:25px 12px 11px;border:3px solid #7b93a6;border-radius:27px;background:linear-gradient(155deg,#132f45,#06111e 70%);box-shadow:-18px 20px 35px #0009,inset 0 0 0 2px #06101b;transform:rotate(7deg);z-index:3}
.phone-island{position:absolute;width:45px;height:10px;top:7px;left:50%;transform:translateX(-50%);background:#01060d;border-radius:9px}
.phone-brand{font-size:8px;letter-spacing:.17em;display:flex;justify-content:space-between;color:#d9f0fc;margin:4px 0 20px}
.phone-brand>span{color:var(--cyan)}
.device-phone>small{font-size:5px;letter-spacing:.12em;color:#77bcdf}
.device-phone h4{font-size:19px;line-height:1.15;font-weight:500;margin:10px 0 15px}
.phone-orb{height:62px;display:grid;place-items:center;margin-bottom:16px;background:radial-gradient(ellipse,#137ba444,transparent 65%)}
.phone-orb span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #79e3ff;border-radius:15px;transform:rotate(-15deg);color:#9deeff;font-size:35px;background:linear-gradient(120deg,#14709a88,#071626);box-shadow:0 0 25px #0bd6ff28,inset 0 0 16px #3cd2ff22}
.phone-item{display:flex;align-items:center;gap:8px;padding:11px 0;border-top:1px solid #2d4a61;font-size:7px;color:#e1f0fa}
.phone-item>span{font-size:13px;color:var(--cyan)}
.phone-item small{display:block;font-size:5px;color:#8eacc2;margin-top:3px}
.phone-item>b{margin-left:auto;font-weight:400;color:#75dcff}
.phone-home{height:3px;width:47px;border-radius:9px;background:#7f97a8;margin:13px auto 0}
.scene-label{position:absolute;left:5px;bottom:-14px;font-size:7px;letter-spacing:.15em;color:#b1d6e9;display:flex;gap:10px;align-items:center}
.premium-web{transform:rotate(-2deg);background:#071423;border:1px solid #6689a3;border-radius:12px;padding:5px;box-shadow:0 30px 60px #0008,0 0 45px #077bbc18}
.premium-web .browser-top{height:31px;background:#0d2030;border:0;border-radius:8px 8px 0 0;padding:8px 12px}
.premium-web .browser-top b{font-size:10px;color:#7cacc8;font-weight:400}
.editorial-web{border:1px solid #32516a;background:#03101d;overflow:hidden}
.editorial-nav{display:flex;justify-content:space-between;align-items:center;padding:19px 24px;border-bottom:1px solid #30495e66}
.editorial-nav>b{font-size:10px;letter-spacing:.13em;font-weight:600}
.editorial-nav>b>span{font-size:6px;vertical-align:super;margin-left:3px;color:var(--cyan)}
.editorial-nav>span{font-size:5px;letter-spacing:.08em;color:#b9cfde}
.editorial-hero{position:relative;isolation:isolate;overflow:hidden;padding:29px 26px 33px;background:linear-gradient(90deg,#03101cec,#06172a55),url('/bg-hero-skyline.jpg') center bottom/cover}
.editorial-kicker{position:relative;z-index:2;font-size:6px;letter-spacing:.2em;color:#93e1fb}
.editorial-hero h4{font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:.99;margin:24px 0 19px;position:relative;z-index:2}
.editorial-hero h4 em{color:#5fe0ff}
.editorial-hero p{font-size:8px;line-height:1.8;color:#c2d7e6;position:relative;z-index:2}
.editorial-cta{display:inline-flex;align-items:center;gap:21px;background:#7be5ff;color:#042033;padding:10px 12px;font-size:7px;margin-top:10px;position:relative;z-index:2}
.editorial-cta b{font-size:13px;font-weight:400}
.editorial-orbit{position:absolute;right:-7%;top:18%;width:47%;aspect-ratio:1;border:16px solid #29b9e7;border-radius:50%;transform:rotate(-24deg) rotateY(48deg);background:radial-gradient(circle,#03162699,transparent);box-shadow:inset 6px 4px 2px #b5f3ff,inset -14px -8px 12px #064062,12px 15px 0 #07486b,22px 25px 50px #00b5ff29;z-index:1;opacity:.9}
.editorial-coordinate{position:absolute;right:12px;bottom:20px;writing-mode:vertical-rl;font-size:5px;letter-spacing:.12em;color:#92c4dc}
.editorial-strip{display:flex;align-items:center;justify-content:space-around;padding:15px 10px;border-block:1px solid #2b6c88;background:#12364b8c;font-size:7px;letter-spacing:.13em;color:#c9eaf5}
.editorial-strip i{font-style:normal;color:var(--cyan);font-size:14px}
.editorial-project{display:grid;grid-template-columns:1fr 1.4fr .7fr;align-items:center;gap:15px;padding:20px 23px}
.editorial-project>span{font-size:5px;letter-spacing:.12em;color:#92b6ce}
.editorial-project>strong{font-size:13px;font-weight:500;line-height:1.3;letter-spacing:-.03em}
.project-thumbnail{height:51px;position:relative;background:linear-gradient(120deg,#127ba866,#071629),url('/bg-hero-skyline.jpg') center/cover;border:1px solid #527791;border-radius:3px}
.project-thumbnail span{position:absolute;right:8px;bottom:2px;color:#86e1ff;font-size:27px}
.web-caption{text-align:center;font-size:5px;letter-spacing:.16em;color:#89aec5;padding:12px 5px 7px}
@media(max-width:1100px){.premium-scene{height:460px;width:auto;margin:0;transform:none}.device-desktop{width:94%;top:55px}.device-screen{min-height:290px}.device-content{padding:15px 18px 28px}.device-content h3{font-size:34px}.device-phone{width:145px;right:-4px}.device-phone h4{font-size:16px}.phone-brand{margin-bottom:13px}.phone-orb{height:47px}.phone-orb span{width:43px;height:43px;font-size:28px}.phone-item{font-size:6px}.phone-item small{font-size:5px}.editorial-project>strong{font-size:11px}}
@media(max-width:850px) and (min-width:601px){.premium-scene{height:400px}.device-desktop{top:60px;width:98%;left:0}.device-navigation{padding:8px 10px}.device-navigation>span{display:none}.device-content h3{font-size:30px}.device-screen{min-height:250px}.device-content{padding-bottom:20px}.device-phone{width:126px;bottom:-2px;right:-9px}.device-phone h4{font-size:14px}.phone-orb{height:37px;margin-bottom:9px}.phone-item{padding:8px 0}.scene-label{font-size:5px;bottom:-30px}}
@media(max-width:600px){.premium-scene{height:405px;width:100%;margin:30px 0 5px}.device-desktop{top:30px;left:0;width:93%;transform:rotate(-4deg)}.device-screen{min-height:255px}.device-navigation{padding:9px 12px}.device-navigation img{width:51px}.device-navigation>span{font-size:4px}.device-content{padding:14px 16px 26px}.device-content h3{font-size:32px}.device-kicker{font-size:5px}.device-bottom{font-size:4px;padding:10px 12px}.device-action{font-size:5px;padding:9px 11px}.device-phone{width:126px;right:5px;bottom:20px;border-radius:23px;padding:22px 10px 8px}.device-phone h4{font-size:15px}.phone-brand{font-size:6px;margin-bottom:12px}.phone-orb{height:39px;margin-bottom:10px}.phone-orb span{width:35px;height:35px;font-size:23px;border-radius:10px}.phone-item{gap:5px;font-size:6px;padding:9px 0}.phone-item small{font-size:4px}.phone-item>span{font-size:10px}.scene-label{font-size:5px;letter-spacing:.11em;bottom:0}.premium-web{transform:none}.editorial-nav{padding:14px}.editorial-nav>b{font-size:8px}.editorial-nav>span{font-size:4px}.editorial-hero{padding:22px 17px 27px}.editorial-hero h4{font-size:38px}.editorial-kicker{font-size:5px}.editorial-hero p{font-size:7px}.editorial-cta{font-size:6px;gap:12px}.editorial-orbit{right:-15%;width:50%;top:26%;border-width:12px}.editorial-project{padding:15px 13px;gap:10px;grid-template-columns:.8fr 1.4fr .7fr}.editorial-project>span{font-size:4px}.editorial-project>strong{font-size:10px}.editorial-strip{font-size:5px;padding:10px}.editorial-coordinate{font-size:4px}.web-caption{font-size:4px}}