/* FollowX — understated titanium device showcase, 2026.
   Real app capture; only the physical phone frame is illustrated by CSS. */
.fx-site .fx-device-stage {
  position:relative;
  width:100%;
  height:625px;
  min-height:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:visible;
  transform:none;
  padding:20px 32px 30px;
}
.fx-site .fx-device-stage::before {
  content:"";
  width:min(490px,94%);
  aspect-ratio:1;
  position:absolute;
  z-index:-2;
  top:49%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 53% 40%,rgba(255,255,255,.98),rgba(238,234,255,.94) 41%,rgba(230,247,245,.88) 68%,rgba(230,239,252,.24) 83%,transparent 92%);
  box-shadow:0 22px 70px rgba(78,78,148,.055);
}
.fx-site .fx-stage-aura {
  position:absolute;
  width:330px;
  height:320px;
  left:10%;
  top:14%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle,rgba(128,105,240,.18),transparent 68%);
  filter:blur(28px);
  animation:fx-stage-glow 12s ease-in-out infinite alternate;
}
.fx-site .fx-stage-ring {
  position:absolute;
  top:50%;
  left:50%;
  border:1px solid rgba(125,121,175,.15);
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.fx-site .fx-stage-ring-one{width:510px;height:510px}
.fx-site .fx-stage-ring-two{width:405px;height:405px;border-style:dashed;border-color:rgba(130,137,180,.12)}
.fx-site .fx-phone-frame {
  position:relative;
  margin:0;
  width:270px;
  height:553px;
  border:2px solid #596171;
  border-radius:47px;
  padding:7px;
  background:linear-gradient(110deg,#323744 0%,#a4aab3 5%,#282d39 12%,#161b24 55%,#7c8392 96%,#272d37 100%);
  box-shadow:
    3px 7px 0 -3px rgba(22,26,37,.46),
    21px 38px 58px rgba(22,24,58,.22),
    6px 8px 22px rgba(43,43,82,.14),
    inset 0 1px 1px rgba(255,255,255,.63);
  transform:rotate(-6deg);
  animation:fx-premium-phone-float 9s ease-in-out infinite;
  z-index:2;
}
.fx-site .fx-phone-inner {
  position:relative;
  border-radius:38px;
  overflow:hidden;
  background:#091321;
  height:100%;
  width:100%;
  border:2px solid #030610;
}
.fx-site .fx-phone-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  filter:none;
}
.fx-site .fx-phone-island {
  position:absolute;
  z-index:2;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:78px;
  height:19px;
  background:#03050b;
  border-radius:18px;
  box-shadow:0 1px 2px rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-inline:8px;
}
.fx-site .fx-phone-lens{
  width:6px;height:6px;
  background:radial-gradient(circle at 30% 30%,#304768,#060a17 65%);
  border:1px solid #1b263c;
  border-radius:50%;
}
.fx-site .fx-phone-glare{
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(125deg,rgba(255,255,255,.075),transparent 19%,transparent 80%,rgba(255,255,255,.016));
  pointer-events:none;
}
.fx-site .fx-phone-side-button{
  position:absolute;
  right:-5px;
  top:112px;
  width:3px;
  height:75px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(#606675,#252b39,#6c7480);
}
.fx-site .fx-device-label {
  position:absolute;
  color:#3e3a59;
  display:flex;
  align-items:center;
  gap:10px;
  direction:ltr;
  font:800 10px/1.4 Manrope,Arial,sans-serif;
  letter-spacing:1px;
  z-index:3;
}
.fx-site .fx-device-label-top{
  top:0;
  right:auto;
  left:1%;
  width:auto;
  padding:11px 14px;
  border:1px solid rgba(112,105,170,.14);
  background:rgba(255,255,255,.85);
  box-shadow:0 8px 26px rgba(33,34,58,.04);
  border-radius:11px;
  transform:rotate(-3deg);
}
.fx-site .fx-device-label-top>span:last-child{font-size:13px;color:#8169e2}
.fx-site .fx-stage-dot{
  width:7px;
  height:7px;
  background:#44bea3;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(88,220,183,.17);
}
.fx-site .fx-device-label-bottom{
  bottom:0;
  right:3%;
  display:flex;
  gap:16px;
  font:700 9px/1.5 Manrope,Arial,sans-serif;
  color:#9293a3;
  letter-spacing:1.1px;
}
.fx-site .fx-device-label-bottom span:last-child{color:#6659b5}
@keyframes fx-premium-phone-float{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-10px) rotate(-4.5deg)}
}
@keyframes fx-stage-glow{
  from{transform:translate(-10px,0)}
  to{transform:translate(20px,-13px)}
}
@media(max-width:1170px){
  .fx-site .fx-device-stage{height:550px;padding-inline:10px}
  .fx-site .fx-phone-frame{width:235px;height:487px;border-radius:42px}
  .fx-site .fx-phone-inner{border-radius:34px}
  .fx-site .fx-stage-ring-one{width:460px;height:460px}
  .fx-site .fx-stage-ring-two{width:370px;height:370px}
}
@media(max-width:940px){
  .fx-site .fx-device-stage{height:510px;border-radius:0}
  .fx-site .fx-phone-frame{width:225px;height:466px}
  .fx-site .fx-stage-ring-one{width:410px;height:410px}
  .fx-site .fx-stage-ring-two{width:310px;height:310px}
  .fx-site .fx-device-label-bottom{right:0}
}
@media(max-width:740px){
  .fx-site .fx-device-stage{height:555px;width:100%;max-width:570px;padding-inline:20px}
  .fx-site .fx-phone-frame{width:260px;height:535px;border-radius:45px}
  .fx-site .fx-phone-inner{border-radius:37px}
  .fx-site .fx-stage-ring-one{width:470px;height:470px}
  .fx-site .fx-stage-ring-two{width:365px;height:365px}
  .fx-site .fx-device-label-top{left:5%;top:0}
  .fx-site .fx-device-label-bottom{right:6%;bottom:8%}
}
@media(max-width:520px){
  .fx-site .fx-device-stage{height:447px;max-width:380px;overflow:visible;padding:0}
  .fx-site .fx-phone-frame{width:205px;height:427px;border-radius:37px;padding:5px;border-width:2px}
  .fx-site .fx-phone-inner{border-radius:30px}
  .fx-site .fx-phone-island{width:60px;height:15px;top:6px}
  .fx-site .fx-device-stage::before{width:min(355px,102%)}
  .fx-site .fx-stage-ring-one{width:350px;height:350px}
  .fx-site .fx-stage-ring-two{width:260px;height:260px}
  .fx-site .fx-device-label-top{left:0;top:-15px;font-size:7px;letter-spacing:.5px;padding:8px 9px}
  .fx-site .fx-device-label-bottom{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fx-site .fx-phone-frame,.fx-site .fx-stage-aura{animation:none!important}
}

/* iPhone 13 Pro Max hardware treatment: genuine 2021 notch, not Dynamic Island.
   Both showcases use photographs of the real running FollowX app. */
.fx-site .fx-phone-frame {
  width: 285px;
  height: 585px;
  border-radius: 49px;
  padding: 7px;
  border: 2px solid #6c7380;
  background: linear-gradient(105deg,#444853 0%,#b8bec6 4%,#3b414c 11%,#191b24 54%,#8c929c 96%,#363b47);
  box-shadow: 12px 33px 57px rgba(27,31,66,.22),0 9px 20px rgba(31,38,66,.12),inset 0 1px 1px rgba(255,255,255,.68);
}
.fx-site .fx-phone-inner {border-radius:40px}
.fx-site .fx-phone-notch {
  position:absolute;
  z-index:5;
  top:-1px;
  left:50%;
  transform:translateX(-50%);
  width:35%;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#04050a;
  border-radius:0 0 17px 17px;
  box-shadow:0 1px 1px rgba(255,255,255,.09);
  pointer-events:none;
}
.fx-site .fx-phone-notch::before,
.fx-site .fx-phone-notch::after {
  content:"";
  position:absolute;
  top:0;
  height:9px;
  width:9px;
}
.fx-site .fx-phone-notch::before {
  left:-8px;
  border-top-right-radius:9px;
  box-shadow:4px -4px 0 #04050a;
}
.fx-site .fx-phone-notch::after {
  right:-8px;
  border-top-left-radius:9px;
  box-shadow:-4px -4px 0 #04050a;
}
.fx-site .fx-notch-speaker {
  display:block;
  height:3px;
  width:34px;
  border-radius:4px;
  background:#1a1d27;
  border:1px solid #242c39;
}
.fx-site .fx-notch-camera {
  height:7px;
  width:7px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#29496b,#060912 67%);
  box-shadow:0 0 0 1px #151a25;
}
.fx-site .fx-device-stage {height:625px;padding:0 12px}
.fx-site .fx-device-stage::before {
  width:min(455px,90%);
  background:radial-gradient(circle at 53% 45%,rgba(255,255,255,.96),rgba(241,239,253,.86) 48%,rgba(233,246,246,.62) 74%,transparent 91%);
  box-shadow:none;
}
.fx-site .fx-stage-ring-one {width:480px;height:480px;border-color:rgba(118,118,168,.10)}
.fx-site .fx-stage-ring-two {width:355px;height:355px;border-color:rgba(115,112,180,.09)}
.fx-site .fx-stage-aura {opacity:.5}

/* Match the product walkthrough to the same iPhone 13 Pro Max face. */
.fx-site .fx-app-inner {padding-block:96px;min-height:720px}
.fx-site .fx-app-display {min-height:620px}
.fx-site .fx-app-shot {
  width:296px;
  max-width:90%;
  aspect-ratio:428/926;
  height:auto;
  padding:7px;
  overflow:hidden;
  border-radius:49px;
  border:2px solid #717785;
  background:linear-gradient(110deg,#4b505d,#b2b8c0 5%,#262c37 13%,#131824 65%,#9299a3 96%,#313745);
  box-shadow:0 44px 74px rgba(2,3,17,.6),0 0 0 8px rgba(255,255,255,.02);
  transform:rotate(-4deg);
}
.fx-site .fx-app-shot>img {
  border-radius:40px;
  border:2px solid #03060a;
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center top;
}
.fx-site .fx-app-notch {top:8px;height:25px;width:33%}
.fx-site .fx-app-shot figcaption {z-index:4;bottom:20px;right:19px;left:19px}
.fx-site .fx-app-display-orb {opacity:.4;filter:blur(75px)}
@media(max-width:1170px){
  .fx-site .fx-phone-frame{width:250px;height:513px;border-radius:44px}
  .fx-site .fx-phone-inner{border-radius:35px}
  .fx-site .fx-device-stage{height:560px}
  .fx-site .fx-stage-ring-one{width:440px;height:440px}
  .fx-site .fx-stage-ring-two{width:345px;height:345px}
}
@media(max-width:940px){
  .fx-site .fx-phone-frame{width:230px;height:472px;border-radius:42px}
  .fx-site .fx-phone-inner{border-radius:34px}
  .fx-site .fx-device-stage{height:520px}
  .fx-site .fx-stage-ring-one{width:405px;height:405px}
  .fx-site .fx-stage-ring-two{width:315px;height:315px}
  .fx-site .fx-app-shot{width:265px;border-radius:44px}
  .fx-site .fx-app-shot>img{border-radius:35px}
}
@media(max-width:740px){
  .fx-site .fx-phone-frame{width:264px;height:542px;border-radius:46px}
  .fx-site .fx-phone-inner{border-radius:38px}
  .fx-site .fx-device-stage{height:565px;max-width:570px}
  .fx-site .fx-stage-ring-one{width:465px;height:465px}
  .fx-site .fx-stage-ring-two{width:350px;height:350px}
  .fx-site .fx-app-inner{padding-block:78px}
  .fx-site .fx-app-display{min-height:550px}
}
@media(max-width:520px){
  .fx-site .fx-phone-frame{width:224px;height:460px;border-radius:40px;padding:5px}
  .fx-site .fx-phone-inner{border-radius:32px}
  .fx-site .fx-phone-notch{height:19px;border-radius:0 0 12px 12px;gap:7px}
  .fx-site .fx-notch-speaker{width:28px}
  .fx-site .fx-device-stage{height:490px;max-width:380px;padding:0}
  .fx-site .fx-stage-ring-one{width:345px;height:345px}
  .fx-site .fx-stage-ring-two{width:255px;height:255px}
  .fx-site .fx-app-shot{width:238px;border-radius:40px;padding:5px}
  .fx-site .fx-app-shot>img{border-radius:31px}
  .fx-site .fx-app-notch{top:6px;height:20px}
  .fx-site .fx-app-shot figcaption{left:13px;right:13px;bottom:15px}
  .fx-site .fx-app-display{min-height:530px}
}
@media(prefers-reduced-motion:reduce){
  .fx-site .fx-phone-frame,.fx-site .fx-stage-aura{animation:none!important}
}