/* Device guide */
.devices{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 12%,rgba(38,91,187,.11),transparent 32%),radial-gradient(circle at 2% 94%,rgba(255,132,55,.065),transparent 28%),#080e19}
.devices::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(160,195,255,.17),transparent)}
.devices-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:36px}
.devices-heading h2{max-width:790px}
.devices-heading>p{max-width:360px;margin:0 0 6px;color:#aebdd2;font-size:15px;line-height:1.65}
.device-tabs{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;margin-bottom:18px;border:1px solid rgba(163,191,238,.16);border-radius:15px;background:#111b2d}
.device-tab{display:flex;align-items:center;justify-content:center;gap:10px;min-width:170px;min-height:48px;padding:10px 15px;border:1px solid transparent;border-radius:11px;background:transparent;color:#9fb0c9;font-size:14px;font-weight:750;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.device-tab:hover{color:#fff;background:rgba(255,255,255,.055)}
.device-tab[aria-selected="true"]{color:#111725;background:linear-gradient(135deg,#ffb778,#ff8c46);border-color:rgba(255,199,145,.6);box-shadow:0 8px 24px rgba(255,129,56,.19)}
.device-tab-icon{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:6px;font-size:19px;line-height:1;opacity:.85}
.device-panel[hidden]{display:none!important}
.device-panel{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:490px;overflow:hidden;border:1px solid rgba(157,188,242,.18);border-radius:27px;background:linear-gradient(125deg,#111a2b,#0b1423 62%,#101c30);box-shadow:0 28px 65px rgba(0,3,12,.2)}
.device-stage{position:relative;display:grid;place-items:center;min-height:490px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 48% 46%,rgba(47,108,221,.23),transparent 48%),radial-gradient(circle at 27% 81%,rgba(255,127,56,.1),transparent 39%),#0d182a}
.device-stage::before{content:"";position:absolute;inset:20px;border:1px solid rgba(150,185,240,.1);border-radius:22px;pointer-events:none}
.device-stage::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(165,199,255,.3) .7px,transparent .7px);background-size:27px 27px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%);opacity:.2;pointer-events:none}
.device-aura{position:absolute;width:66%;aspect-ratio:1;border:1px solid rgba(79,138,242,.22);border-radius:50%;box-shadow:0 0 0 35px rgba(61,118,220,.035),0 0 0 85px rgba(61,118,220,.02),0 0 70px rgba(51,107,211,.18);transform:rotate(-18deg) scaleY(.82)}
.device-illustration{position:absolute;z-index:2;display:block;max-width:88%;max-height:86%;width:auto;height:auto;object-fit:contain;opacity:0;filter:drop-shadow(0 26px 34px rgba(0,0,0,.32));transition:opacity .3s ease}
.device-stage.image-ready .device-illustration{opacity:1}
.device-stage.image-ready .device-phone,.device-stage.image-ready .device-laptop,.device-stage.image-ready .device-tv{opacity:0}
.device-float{position:absolute;z-index:3;right:7%;bottom:9%;display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid rgba(164,199,255,.26);border-radius:100px;background:rgba(13,24,41,.9);box-shadow:0 13px 28px rgba(2,7,18,.25);color:#dbe6f6;font-size:12px;font-weight:700;backdrop-filter:blur(10px)}
.device-float-dot{width:7px;height:7px;border-radius:50%;background:#53dda1;box-shadow:0 0 0 4px rgba(83,221,161,.13)}
.device-panel-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:48px clamp(30px,5vw,74px)}
.device-panel-index{align-self:flex-end;margin-bottom:21px;color:#6887af;font-size:12px;font-weight:800;letter-spacing:.15em}
.device-panel-kicker{margin:0 0 13px;color:#ffac6f;font-size:11px;font-weight:850;letter-spacing:.16em}
.device-panel h3{max-width:480px;margin:0 0 19px;font-size:clamp(32px,3vw,46px);line-height:1.1;letter-spacing:-.055em;font-weight:850}
.device-panel-description{max-width:475px;margin:0;color:#b7c4d8;font-size:16px;line-height:1.75}
.device-platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.device-platforms span{padding:9px 13px;border:1px solid rgba(165,195,245,.2);border-radius:9px;background:rgba(77,119,187,.12);color:#e2ebfa;font-size:12px;font-weight:750}
.device-panel-hint{max-width:440px;margin:19px 0 0;color:#8297b5;font-size:12px;line-height:1.55}
.device-cta{margin-top:24px}

/* Lightweight illustration while an image is loading or unavailable. */
.device-phone,.device-laptop,.device-tv{position:relative;z-index:1;transition:opacity .25s}
.device-phone{width:183px;height:344px;padding:8px;border:2px solid #547cc7;border-radius:33px;background:linear-gradient(130deg,#6686c1,#152642 20%,#0b1527 75%,#41659a);box-shadow:25px 30px 45px rgba(0,3,16,.43),inset 0 0 0 2px rgba(255,255,255,.15),0 0 48px rgba(65,126,229,.22);transform:rotate(-9deg)}
.device-phone-camera{position:absolute;z-index:2;top:14px;left:50%;width:53px;height:12px;border-radius:20px;background:#07101e;transform:translateX(-50%)}
.device-screen,.device-laptop-display,.device-tv-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 37%,rgba(49,112,239,.38),transparent 50%),linear-gradient(145deg,#132f61,#0a162a 72%);border:1px solid rgba(137,188,255,.23);color:#fff}
.device-screen{width:100%;height:100%;border-radius:25px}
.device-screen-brand{font-size:23px;font-weight:850;letter-spacing:-.07em}
.device-screen-brand span{color:#ff934d}
.device-screen-ring{display:grid;place-items:center;width:93px;height:93px;margin-top:25px;border:2px solid rgba(255,151,76,.87);border-radius:50%;box-shadow:0 0 0 12px rgba(255,146,67,.06),0 0 32px rgba(255,123,53,.19)}
.device-screen-ring span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#ffb878,#ff7d40);color:#102039;font-size:27px;font-weight:850}
.device-screen-status{margin-top:24px;color:#a9c7fa;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.device-laptop{width:min(76%,410px);transform:rotate(-5deg)}
.device-laptop-screen{height:245px;padding:10px;border:2px solid #6c8ccc;border-radius:15px 15px 6px 6px;background:linear-gradient(145deg,#526fa8,#101c31 30%,#0a1324);box-shadow:25px 31px 45px rgba(0,3,16,.43),0 0 40px rgba(53,113,230,.2)}
.device-laptop-display{width:100%;height:100%;border-radius:7px}
.device-laptop-display .device-screen-ring{width:74px;height:74px;margin-top:13px}.device-laptop-display .device-screen-ring span{width:42px;height:42px;font-size:22px}.device-laptop-display .device-screen-status{margin-top:15px}
.device-laptop-base{width:111%;height:19px;margin-left:-5.5%;border:1px solid #708eb8;border-radius:2px 2px 20px 20px;background:linear-gradient(#607eaf,#1b2c46 68%,#101d32);box-shadow:14px 23px 24px rgba(0,2,11,.26)}
.device-tv{width:min(78%,420px);transform:rotate(-4deg)}
.device-tv-screen{height:252px;border:10px solid #192a49;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(164,202,255,.35),22px 33px 44px rgba(0,3,16,.43),0 0 43px rgba(53,113,230,.17)}
.device-tv-screen .device-screen-ring{width:80px;height:80px;margin-top:14px}.device-tv-screen .device-screen-ring span{width:46px;height:46px;font-size:24px}.device-tv-screen .device-screen-status{margin-top:16px}
.device-tv-stand{position:relative;width:85px;height:34px;margin:auto;background:linear-gradient(90deg,#1a2b45,#4a6590,#1a2b45);clip-path:polygon(40% 0,60% 0,64% 80%,100% 80%,100% 100%,0 100%,0 80%,36% 80%)}

@media(max-width:900px){.device-panel{grid-template-columns:1fr 1fr;min-height:410px}.device-stage{min-height:410px}.device-panel-copy{padding:34px}.device-panel-index{margin-bottom:16px}.device-panel-description{font-size:14px}.device-phone{transform:rotate(-9deg) scale(.84)}.device-laptop,.device-tv{width:82%}}
@media(max-width:760px){.devices-heading{display:block;margin-bottom:26px}.devices-heading>p{margin-top:15px;max-width:600px}.device-tabs{display:grid;width:100%}.device-tab{min-width:0}.device-panel{grid-template-columns:1fr}.device-stage{min-height:340px}.device-illustration{max-height:91%}.device-panel-copy{padding:24px 30px 35px}.device-panel-index{margin-bottom:6px}.device-panel h3{font-size:34px}.device-platforms{margin-top:20px}.device-cta{margin-top:21px}.device-phone{transform:rotate(-9deg) scale(.8)}.device-laptop,.device-tv{width:min(72%,420px)}.device-laptop-screen,.device-tv-screen{height:200px}}
@media(max-width:520px){.devices-heading h2{font-size:clamp(33px,9vw,40px)}.devices-heading>p{font-size:13px}.device-tabs{gap:3px;padding:4px}.device-tab{gap:5px;min-height:45px;padding:6px 3px;font-size:11px}.device-tab-icon{width:18px;height:18px;border-radius:4px;font-size:14px}.device-panel{border-radius:20px}.device-stage{min-height:290px}.device-stage::before{inset:13px;border-radius:14px}.device-illustration{max-width:96%;max-height:94%}.device-float{right:6%;bottom:7%;padding:8px 10px;font-size:10px}.device-panel-copy{padding:16px 22px 29px}.device-panel-kicker{font-size:10px}.device-panel h3{font-size:32px;margin-bottom:13px}.device-panel-description{font-size:14px;line-height:1.6}.device-panel-hint{font-size:11px}.device-phone{transform:rotate(-9deg) scale(.67)}.device-laptop,.device-tv{width:76%}.device-laptop-screen,.device-tv-screen{height:165px}.device-laptop-display .device-screen-ring,.device-tv-screen .device-screen-ring{width:60px;height:60px;margin-top:8px}.device-laptop-display .device-screen-ring span,.device-tv-screen .device-screen-ring span{width:37px;height:37px}.device-laptop-display .device-screen-status,.device-tv-screen .device-screen-status{margin-top:8px}}