/* V12.1 — SCD FUTURISTIC PHONE SHOWCASE
   Isolated component. Does not override existing landing styles. */
.scd-phone-showcase{position:relative;isolation:isolate;overflow:hidden;padding:44px 0 58px;background:
  radial-gradient(circle at 74% 48%,rgba(35,207,255,.11),transparent 24%),
  radial-gradient(circle at 68% 58%,rgba(214,158,35,.08),transparent 28%)}
.scd-phone-showcase:before,.scd-phone-showcase:after{content:"";position:absolute;pointer-events:none;z-index:-1}
.scd-phone-showcase:before{inset:9% 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(50,204,255,.3),rgba(225,173,50,.28),transparent)}
.scd-phone-showcase:after{width:560px;height:560px;right:-170px;top:40px;border:1px solid rgba(48,198,242,.08);border-radius:50%;box-shadow:0 0 80px rgba(33,180,235,.05)}
.scd-phone-showcase .scd-ps-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.86fr);gap:54px;align-items:center}
.scd-ps-copy{max-width:600px}
.scd-ps-kicker{display:inline-flex;align-items:center;gap:9px;color:#e0aa36;font-weight:900;font-size:.72rem;letter-spacing:.18em}
.scd-ps-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:#41dfff;box-shadow:0 0 14px #41dfff}
.scd-ps-copy h2{margin:14px 0 17px;font-size:clamp(2.2rem,5vw,4.7rem);line-height:.98;letter-spacing:-.055em}
.scd-ps-copy h2 span{color:#43d5ff;text-shadow:0 0 22px rgba(62,210,255,.16)}
.scd-ps-copy p{max-width:560px;color:rgba(219,232,241,.69);font-size:1rem;line-height:1.7}
.scd-ps-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 27px}
.scd-ps-tags span{padding:7px 11px;border-radius:999px;border:1px solid rgba(71,201,240,.17);background:rgba(5,22,32,.66);font-size:.69rem;color:#a8becb;font-weight:800}
.scd-ps-live{display:flex;align-items:center;gap:11px;width:max-content;max-width:100%;padding:12px 15px;border-radius:15px;border:1px solid rgba(224,171,49,.25);background:linear-gradient(135deg,rgba(15,36,49,.78),rgba(5,20,29,.72));box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04)}
.scd-ps-live i{width:10px;height:10px;border-radius:50%;background:#4bea8a;box-shadow:0 0 0 5px rgba(75,234,138,.08),0 0 16px rgba(75,234,138,.6)}
.scd-ps-live div{display:grid}.scd-ps-live b{font-size:.7rem;letter-spacing:.1em}.scd-ps-live small{color:#758e9e;font-size:.66rem;margin-top:2px}

.scd-ps-stage{position:relative;min-height:650px;display:grid;place-items:center;perspective:1200px}
.scd-ps-halo{position:absolute;width:360px;height:94px;bottom:39px;border-radius:50%;border:1px solid rgba(63,218,255,.26);background:radial-gradient(ellipse,rgba(50,205,255,.16),rgba(11,62,84,.06) 45%,transparent 70%);box-shadow:0 0 30px rgba(38,196,249,.15),0 0 80px rgba(211,153,32,.07);transform:rotateX(69deg)}
.scd-ps-halo:before,.scd-ps-halo:after{content:"";position:absolute;inset:13px;border-radius:50%;border:1px dashed rgba(225,178,55,.23)}
.scd-ps-halo:after{inset:27px;border-color:rgba(56,213,255,.22)}
.scd-ps-orbit{position:absolute;width:450px;height:450px;border-radius:50%;border:1px solid rgba(54,201,246,.08);box-shadow:inset 0 0 45px rgba(45,190,240,.025);transform:rotateX(67deg);bottom:3px}
.scd-ps-orbit:before{content:"";position:absolute;inset:42px;border-radius:50%;border:1px solid rgba(224,168,45,.08)}

.scd-future-phone{position:relative;width:314px;height:624px;border-radius:48px;padding:5px;background:linear-gradient(135deg,#b97813 0%,#ffe07a 8%,#62dfff 17%,#183947 28%,#07131b 48%,#274c59 72%,#54d9ff 84%,#d29625 94%,#76500f 100%);box-shadow:
  0 36px 80px rgba(0,0,0,.56),
  0 0 0 1px rgba(123,230,255,.28),
  0 0 28px rgba(57,203,250,.26),
  0 0 70px rgba(57,203,250,.10),
  8px 8px 34px rgba(212,151,27,.09);
transform:rotateY(-8deg) rotateZ(1.3deg);animation:scdPhoneFloat 6.5s ease-in-out infinite;will-change:transform}
.scd-future-phone:before{content:"";position:absolute;left:-3px;top:128px;width:3px;height:56px;border-radius:5px;background:linear-gradient(#5ee1ff,#163849);box-shadow:0 79px 0 #2b6578,0 139px 0 #2b6578}
.scd-future-phone:after{content:"";position:absolute;right:-3px;top:169px;width:3px;height:94px;border-radius:5px;background:linear-gradient(#c8942a,#63420c);box-shadow:0 0 10px rgba(223,165,40,.2)}
.scd-phone-glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:43px;background:linear-gradient(180deg,#06131d,#061823 54%,#040d14);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(82,219,255,.07),inset 0 -30px 80px rgba(6,40,57,.21)}
.scd-phone-glass:before{content:"";position:absolute;z-index:20;top:10px;left:50%;transform:translateX(-50%);width:100px;height:25px;border-radius:18px;background:#01070b;box-shadow:inset 0 -1px rgba(255,255,255,.04),0 0 12px rgba(0,0,0,.5)}
.scd-phone-glass:after{content:"";position:absolute;z-index:19;top:17px;left:calc(50% + 28px);width:6px;height:6px;border-radius:50%;background:#16374b;box-shadow:0 0 4px rgba(81,207,255,.6)}
.scd-phone-sheen{position:absolute;z-index:18;pointer-events:none;inset:-35% auto auto -35%;width:72%;height:170%;background:linear-gradient(100deg,transparent 28%,rgba(176,239,255,.08) 43%,rgba(255,220,116,.05) 52%,transparent 63%);transform:rotate(11deg);animation:scdPhoneSheen 8s ease-in-out infinite}
.scd-phone-status{height:44px;padding:13px 19px 0;display:flex;align-items:center;justify-content:space-between;color:#dceaf1;font-size:.62rem;font-weight:900;position:relative;z-index:5}
.scd-phone-status .right{display:flex;align-items:center;gap:4px}.scd-phone-status .bars{width:12px;height:9px;border-left:2px solid #b6cbd5;border-right:2px solid #b6cbd5}.scd-phone-status .battery{padding:1px 4px;border:1px solid #718792;border-radius:3px;font-size:.48rem}
.scd-phone-head{height:61px;display:flex;align-items:center;justify-content:space-between;padding:8px 15px 10px;border-bottom:1px solid rgba(64,210,255,.12);background:linear-gradient(90deg,rgba(11,31,43,.78),rgba(5,21,31,.88))}
.scd-phone-brand{display:flex;align-items:center;gap:8px}.scd-phone-brand img{width:34px;height:34px;object-fit:cover;border-radius:9px;border:1px solid rgba(72,217,255,.24);box-shadow:0 0 12px rgba(66,208,255,.12)}
.scd-phone-brand div{display:grid;line-height:1}.scd-phone-brand b{font-size:.68rem}.scd-phone-brand small{font-size:.39rem;letter-spacing:.15em;color:#78909c;margin-top:3px}.scd-phone-online{font-size:.43rem;letter-spacing:.09em;color:#50e788}
.scd-phone-screen{position:relative;height:470px;overflow:hidden}
.scd-phone-slide{position:absolute;inset:0;opacity:0;transform:translateX(18px) scale(.99);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.75,.2,1);pointer-events:none}
.scd-phone-slide.active{opacity:1;transform:none}
.scd-phone-media{position:relative;height:185px;background:#0b1b25;overflow:hidden}.scd-phone-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03) brightness(.78)}.scd-phone-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,15,22,.05),rgba(4,15,22,.12) 48%,#06131d 100%)}
.scd-phone-chip{position:absolute;z-index:3;left:14px;top:13px;padding:7px 9px;border-radius:9px;background:rgba(3,17,25,.76);border:1px solid rgba(66,215,255,.32);color:#55ddff;font-size:.45rem;font-weight:950;letter-spacing:.13em;backdrop-filter:blur(7px)}
.scd-phone-body{padding:15px 15px 14px}.scd-phone-eyebrow{display:block;color:#e8b64c;font-size:.43rem;font-weight:950;letter-spacing:.14em;margin-bottom:6px}.scd-phone-body h3{margin:0 0 8px;font-size:1.18rem;letter-spacing:-.03em}.scd-phone-body p{margin:0 0 12px;color:#8198a5;font-size:.58rem;line-height:1.45}
.scd-phone-options{display:flex;gap:5px;margin-bottom:11px}.scd-phone-options span{flex:1;padding:7px 2px;text-align:center;border-radius:8px;background:#0c1c26;border:1px solid rgba(72,193,230,.13);font-size:.43rem;color:#78919f}.scd-phone-options span.on{border-color:rgba(223,174,48,.5);background:rgba(220,165,34,.08);color:#f0ca67}
.scd-phone-info{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;margin-bottom:11px;border-radius:11px;border:1px solid rgba(71,201,240,.14);background:linear-gradient(120deg,rgba(16,40,53,.86),rgba(7,24,33,.82))}.scd-phone-info div{display:grid}.scd-phone-info small{font-size:.4rem;color:#718895}.scd-phone-info b{font-size:.64rem;margin-top:2px}.scd-phone-info strong{font-size:1.18rem;color:#f1be49;text-shadow:0 0 15px rgba(237,183,65,.13)}
.scd-phone-action{display:flex;justify-content:space-between;align-items:center;padding:10px 11px;border-radius:10px;background:linear-gradient(100deg,#f0c65b,#d99c23);color:#07131b;font-size:.53rem;font-weight:950;letter-spacing:.05em;box-shadow:0 8px 20px rgba(217,156,35,.13)}
.scd-phone-review-stars{font-size:1.55rem;color:#ffc43d;letter-spacing:.05em;text-shadow:0 0 15px rgba(255,196,61,.2);margin:4px 0 10px}
.scd-phone-dots{height:27px;display:flex;align-items:center;justify-content:center;gap:6px}.scd-phone-dots i{width:5px;height:5px;border-radius:999px;background:#334c5a;transition:.35s}.scd-phone-dots i.active{width:20px;background:#48d9ff;box-shadow:0 0 10px rgba(72,217,255,.45)}
.scd-phone-home{width:92px;height:4px;border-radius:5px;background:rgba(214,228,236,.82);margin:0 auto}
.scd-ps-float{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:13px;background:rgba(5,20,30,.78);border:1px solid rgba(62,210,249,.16);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.28)}.scd-ps-float b{font-size:.53rem;letter-spacing:.08em}.scd-ps-float small{display:block;font-size:.43rem;color:#77909d}.scd-ps-float.one{left:1%;top:25%}.scd-ps-float.two{right:-2%;bottom:22%}.scd-ps-float .ico{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;color:#53dcff;border:1px solid rgba(76,218,255,.2);background:rgba(27,94,114,.12)}
@keyframes scdPhoneFloat{0%,100%{transform:rotateY(-8deg) rotateZ(1.3deg) translateY(0)}50%{transform:rotateY(-5deg) rotateZ(.6deg) translateY(-11px)}}
@keyframes scdPhoneSheen{0%,20%{transform:translateX(-15%) rotate(11deg);opacity:0}35%{opacity:1}60%,100%{transform:translateX(150%) rotate(11deg);opacity:0}}
@media(max-width:900px){.scd-phone-showcase{padding:28px 0 40px}.scd-phone-showcase .scd-ps-shell{grid-template-columns:1fr;gap:12px}.scd-ps-copy{text-align:center;margin:auto}.scd-ps-copy p{margin-left:auto;margin-right:auto}.scd-ps-tags{justify-content:center}.scd-ps-live{margin:0 auto;text-align:left}.scd-ps-stage{min-height:606px;margin-top:-3px}.scd-future-phone{width:300px;height:596px}.scd-phone-screen{height:445px}.scd-phone-media{height:174px}.scd-ps-float.one{left:3%;top:28%}.scd-ps-float.two{right:3%;bottom:20%}}
@media(max-width:480px){.scd-phone-showcase{padding:24px 0 30px}.scd-ps-copy h2{font-size:2.4rem}.scd-ps-copy p{font-size:.9rem;line-height:1.6}.scd-ps-stage{min-height:548px;margin-top:-18px;transform:scale(.88);transform-origin:top center;margin-bottom:-68px}.scd-ps-float{display:none}.scd-ps-orbit{width:390px;height:390px}.scd-ps-halo{width:325px}.scd-future-phone{width:294px;height:584px}}
@media(prefers-reduced-motion:reduce){.scd-future-phone,.scd-phone-sheen{animation:none!important}.scd-phone-slide{transition:none}}

/* V12.2 — interactive futuristic service tabs */
.scd-ps-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.scd-ps-tags button{
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(73,205,255,.24);
  border-radius:999px;
  padding:10px 16px;
  background:linear-gradient(180deg,rgba(8,27,39,.82),rgba(5,18,28,.74));
  color:#b8c9d2;
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 25px rgba(0,0,0,.16);
  transition:transform .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,background .22s ease;
}
.scd-ps-tags button:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 15%,rgba(63,214,255,.22) 42%,rgba(235,183,59,.15) 62%,transparent 82%);
  transform:translateX(-115%);
  transition:transform .42s ease;
  pointer-events:none;
}
.scd-ps-tags button:hover:before,.scd-ps-tags button:focus-visible:before{transform:translateX(115%)}
.scd-ps-tags button:hover,.scd-ps-tags button:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(73,205,255,.55);
  color:#eefaff;
  outline:none;
  box-shadow:0 0 0 1px rgba(74,207,255,.08),0 0 22px rgba(51,197,245,.14),0 12px 30px rgba(0,0,0,.24);
}
.scd-ps-tags button.active{
  color:#06131b;
  border-color:rgba(242,194,75,.85);
  background:linear-gradient(110deg,#65dcff 0%,#41c9f0 43%,#f0bf49 100%);
  box-shadow:0 0 0 1px rgba(65,210,255,.16),0 0 26px rgba(53,200,246,.22),0 0 34px rgba(235,180,55,.16),0 12px 30px rgba(0,0,0,.28);
  text-shadow:none;
}
.scd-ps-tags button.active:after{
  content:"";
  position:absolute;
  left:23%;right:23%;bottom:3px;height:2px;border-radius:3px;
  background:rgba(255,255,255,.8);
  box-shadow:0 0 8px rgba(255,255,255,.65);
}
.scd-ps-tags button:active{transform:translateY(0) scale(.98)}
@media(max-width:520px){
  .scd-ps-tags{gap:8px}
  .scd-ps-tags button{padding:9px 13px;font-size:.74rem;min-height:40px}
}


/* V12.3 — service routing feedback */
.scd-ps-tags button{padding-right:34px}
.scd-ps-tags button::after{
  content:"↗";
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  font-size:.75rem;
  opacity:.58;
  transition:transform .22s ease,opacity .22s ease;
}
.scd-ps-tags button:hover::after,.scd-ps-tags button:focus-visible::after{transform:translate(2px,-50%);opacity:1}
.scd-ps-tags button.active::after{content:"↗";left:auto;right:13px;bottom:auto;width:auto;height:auto;background:none;box-shadow:none;opacity:.9}
.scd-ps-tags button.launching{transform:translateY(-2px) scale(.98);box-shadow:0 0 0 1px rgba(77,222,255,.25),0 0 36px rgba(62,211,255,.34),0 0 46px rgba(236,183,58,.21)}
.scd-route-active .scd-future-phone{filter:drop-shadow(0 0 17px rgba(71,216,255,.22)) drop-shadow(0 0 27px rgba(230,174,46,.12))}
@media(max-width:520px){.scd-ps-tags button{padding-right:30px}.scd-ps-tags button::after{right:11px}}


/* V12.4 — full service carousel + 3D device transition */
.scd-ps-carousel{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:8px;width:100%;max-width:760px;margin:0 auto 20px}
.scd-ps-tags{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:5px 3px 9px;gap:9px;-webkit-overflow-scrolling:touch}
.scd-ps-tags::-webkit-scrollbar{display:none}
.scd-ps-tags button{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;min-width:max-content}
.scd-ps-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(72,213,255,.28);background:linear-gradient(145deg,rgba(9,31,43,.92),rgba(5,17,27,.88));color:#63ddff;font-size:1.65rem;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 18px rgba(52,202,247,.08);transition:.22s ease;z-index:2}
.scd-ps-arrow:hover,.scd-ps-arrow:focus-visible{outline:none;color:#06131b;border-color:rgba(236,185,61,.8);background:linear-gradient(135deg,#61dcff,#eab644);box-shadow:0 0 26px rgba(67,211,255,.22)}
.scd-ps-arrow:active{transform:scale(.94)}
.scd-future-phone.scd-phone-switch{animation:scdServiceSwitch .62s cubic-bezier(.18,.78,.23,1)!important}
@keyframes scdServiceSwitch{
  0%{transform:rotateY(-8deg) rotateZ(1.3deg) translateY(0) scale(1);filter:brightness(1)}
  36%{transform:rotateY(7deg) rotateZ(-.8deg) translateY(-7px) scale(.985);filter:brightness(1.18) drop-shadow(0 0 18px rgba(69,219,255,.28))}
  66%{transform:rotateY(-2deg) rotateZ(.4deg) translateY(-5px) scale(1.008);filter:brightness(1.1) drop-shadow(0 0 26px rgba(231,179,54,.16))}
  100%{transform:rotateY(-8deg) rotateZ(1.3deg) translateY(0) scale(1);filter:brightness(1)}
}
.scd-phone-dots{padding-inline:9px}.scd-phone-dots i{cursor:pointer}
@media(max-width:900px){.scd-ps-carousel{max-width:650px}}
@media(max-width:520px){
  .scd-ps-carousel{grid-template-columns:34px minmax(0,1fr) 34px;gap:5px;margin-bottom:15px}
  .scd-ps-arrow{width:34px;height:34px;font-size:1.35rem}
  .scd-ps-tags{gap:7px;padding-bottom:7px}
  .scd-ps-tags button{padding:9px 31px 9px 13px;font-size:.72rem}
  .scd-phone-dots{gap:5px}.scd-phone-dots i{width:4px;height:4px}.scd-phone-dots i.active{width:16px}
}
@media(prefers-reduced-motion:reduce){.scd-future-phone.scd-phone-switch{animation:none!important}}
