/*! devices.css v0.2.0 | SPDX-License-Identifier: MIT | github.com/picturepan2/devices.css */
.device{position:relative;transform:scale(1);z-index:1}
.device,.device *,.device ::after,.device ::before,.device::after,.device::before{box-sizing:border-box;display:block}
.device .device-frame{z-index:1}
.device .device-screen{background-color:#000;background-position:center center;background-size:cover;object-fit:cover;position:relative}
.device-iphone-14-pro{height:868px;width:428px}
.device-iphone-14-pro .device-frame{background:#010101;border:1px solid #1b1721;border-radius:68px;box-shadow:inset 0 0 4px 2px #c0b7cd,inset 0 0 0 6px #342c3f;height:868px;padding:19px;width:428px}
.device-iphone-14-pro .device-screen{border-radius:49px;height:830px;width:390px}
.device-iphone-14-pro .device-stripe::after,.device-iphone-14-pro .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}
.device-iphone-14-pro .device-stripe::after{top:85px}
.device-iphone-14-pro .device-stripe::before{bottom:85px}
.device-iphone-14-pro .device-header{background:#010101;border-radius:20px;height:35px;left:50%;margin-left:-60px;position:absolute;top:29px;width:120px}
.device-iphone-14-pro .device-sensors::after,.device-iphone-14-pro .device-sensors::before{content:"";position:absolute}
.device-iphone-14-pro .device-sensors::after{background:#010101;border-radius:17px;height:33px;left:50%;margin-left:-60px;top:30px;width:74px}
.device-iphone-14-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:36px;top:42px;width:9px}
.device-iphone-14-pro .device-btns{background:#1b1721;border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}
.device-iphone-14-pro .device-btns::after,.device-iphone-14-pro .device-btns::before{background:#1b1721;border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}
.device-iphone-14-pro .device-btns::after{top:60px}
.device-iphone-14-pro .device-btns::before{top:140px}
.device-iphone-14-pro .device-power{background:#1b1721;border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}
.device-iphone-14-pro .device-home::after,.device-iphone-14-pro .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}
.device-iphone-14-pro .device-home::after{right:86px;top:0}
.device-iphone-14-pro .device-home::before{bottom:0;left:86px}
.device-iphone-14-pro.device-silver .device-frame{border-color:#c8cacb;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #e2e3e4}
.device-iphone-14-pro.device-silver .device-btns{background:#c8cacb}
.device-iphone-14-pro.device-silver .device-btns::after,.device-iphone-14-pro.device-silver .device-btns::before{background:#c8cacb}
.device-iphone-14-pro.device-silver .device-power{background:#c8cacb}
.device-macbook-pro{height:434px;width:740px}
.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:418px;margin:0 auto;padding:9px 9px 23px 9px;position:relative;width:618px}
.device-macbook-pro .device-frame::after{background:linear-gradient(to bottom,#272727,#0d0d0d);border-radius:0 0 20px 20px;bottom:2px;content:"";height:24px;left:2px;position:absolute;width:614px}
.device-macbook-pro .device-header{background:#0d0d0d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;height:12px;left:50%;margin-left:-32px;position:absolute;top:11px;width:64px;z-index:2}
.device-macbook-pro .device-header::after,.device-macbook-pro .device-header::before{content:"";height:4px;position:absolute;top:0;width:4px}
.device-macbook-pro .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);left:-4px}
.device-macbook-pro .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);right:-4px}
.device-macbook-pro .device-screen{border:2px solid #121212;border-radius:10px 10px 0 0;height:375px;width:600px}
.device-macbook-pro .device-power{background:radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%);border:solid #a0a3a7;border-radius:2px 2px 12px 12px;border-width:1px 2px 0 2px;box-shadow:inset 0 -2px 8px 0 #6c7074;height:24px;margin-top:-10px;position:relative;width:740px;z-index:9}
.device-macbook-pro .device-power::after{background:#e2e3e4;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;content:"";height:10px;left:50%;margin-left:-60px;position:absolute;top:0;width:120px}
.device-macbook-pro .device-power::before{background:0 0;border-radius:0 0 3px 3px;bottom:-2px;box-shadow:-300px 0 #272727,300px 0 #272727;content:"";height:2px;left:50%;margin-left:-20px;position:absolute;width:40px}
.device-ipad-pro{height:778px;width:560px}
.device-ipad-pro .device-frame{background:#0d0d0d;border-radius:36px;box-shadow:inset 0 0 0 1px #babdbf,inset 0 0 1px 3px #e2e3e4;height:778px;padding:27px;width:560px}
.device-ipad-pro .device-screen{border:2px solid #121212;border-radius:11px;height:724px;width:506px}
.device-ipad-pro .device-btns::after,.device-ipad-pro .device-btns::before{background:#babdbf;content:"";position:absolute}
.device-ipad-pro .device-btns::after{height:2px;right:40px;top:-2px;width:36px}
.device-ipad-pro .device-btns::before{box-shadow:0 37px #babdbf;height:32px;right:-2px;top:63px;width:2px}
.device-ipad-pro .device-sensors::after,.device-ipad-pro .device-sensors::before{content:"";position:absolute}
.device-ipad-pro .device-sensors::after{background:#1a1a1a;border-radius:17px;box-shadow:-20px 0 #1a1a1a,70px 0 #1a1a1a;height:10px;left:50%;margin-left:-30px;top:12px;width:10px}
.device-ipad-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:6px;left:50%;margin-left:-3px;top:14px;width:6px}

.sc-section {
  flex-direction: column;
  justify-content: center;
  padding: 104px 0 92px;
  overflow-x: hidden;
  overflow-x: clip;
}

.sc-head {
  width: 100%;
  max-width: 660px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
}
.sc-head h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.sc-sub {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--md-mute, rgba(255, 255, 255, 0.55));
}

.sc-stage {
  --u: 1;
  --fade: 900ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex: none;
  width: 100%;
  display: flex;
  justify-content: center;
}

.sc-devices {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(34px * var(--u));
}

.sc-devices::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 116%;
  height: 150%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(150, 160, 190, 0.18), rgba(150, 160, 190, 0) 70%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}
.sc-devices::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(-28px * var(--u));
  transform: translateX(-50%);
  width: 84%;
  height: calc(56px * var(--u));
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 72%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}

.sc-dev {
  position: relative;
  z-index: 1;
  flex: none;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5));
}
.sc-dev > .device {
  margin: 0;
  transform-origin: top left;
}

.sc-dev--laptop { width: calc(740px * var(--u)); height: calc(434px * var(--u)); --vw: 1280px; --vh: 800px;  --iscale: 0.46875; }
.sc-dev--tablet { width: calc(280px * var(--u)); height: calc(389px * var(--u)); --vw: 810px;  --vh: 1159px; --iscale: 0.62469; }
.sc-dev--phone  { width: calc(188px * var(--u)); height: calc(382px * var(--u)); --vw: 390px;  --vh: 776px;  --iscale: 1; }
.sc-dev--laptop > .device { transform: scale(var(--u)); }
.sc-dev--tablet > .device { transform: scale(calc(0.5 * var(--u))); }
.sc-dev--phone  > .device { transform: scale(calc(0.44 * var(--u))); }

.sc-dev .device-screen {
  overflow: hidden;
}
.sc-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--vw);
  height: var(--vh);
  border: 0;
  background: transparent;
  transform: scale(var(--iscale));
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
}
.sc-pane.is-shown { opacity: 1; }

.sc-dev--phone .sc-pane { top: 54px; }

.sc-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 44px;
}
.sc-dots button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.sc-dots button::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 300ms ease, transform 300ms ease;
}
.sc-dots button:hover::after { background: rgba(255, 255, 255, 0.45); }
.sc-dots button.is-on::after,
.sc-dots button[aria-current='true']::after {
  background: #fff;
  transform: scale(1.3);
}
.sc-dots button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

@media (max-width: 1379px) { .sc-stage { --u: 0.88; } }
@media (max-width: 1199px) { .sc-stage { --u: 0.75; } }
@media (max-width: 1023px) { .sc-stage { --u: 0.66; } }
@media (max-width: 899px)  { .sc-stage { --u: 0.55; } }

@media (min-width: 1024px) and (max-height: 820px) { .sc-stage { --u: 0.72; } }
@media (min-width: 900px)  and (max-height: 700px) { .sc-stage { --u: 0.6;  } }

@media (max-width: 767px) {
  #showcase.sc-section { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-pane { transition: none; }
  .sc-dots button::after { transition: none; }
}