.hero-art .art-card { z-index: 2; }

.service-card { position: relative; overflow: hidden; isolation: isolate; }
.service-card > :not(.service-image):not(.iphone-mockup):not(.service-waves):not(.dark-glow):not(.sim-illustration) { position: relative; z-index: 2; }
.service-card > div:not(.service-top) { max-width: 58%; }
.service-card .service-top { width: 100%; }
.service-card h3 { text-wrap: balance; }
.service-card .service-image { position: absolute; z-index: 1; right: 13px; bottom: 48px; display: block; width: 43%; height: 158px; overflow: visible; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.service-image svg { display: block; width: 100%; height: 100%; padding: 7px; overflow: visible; }
.home-line, .shop-line, .shop-green, .router-line, .home-link, .network-link, .device-line { fill: none; stroke: #087db8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.home-green, .shop-green { stroke: #38a94d; }
.router-box, .business-device { fill: #e7f3f8; stroke: #087db8; stroke-width: 3; }
.shop-window { fill: #e4f3e2; stroke: #38a94d; stroke-width: 3; }
.device-node { fill: #fff; stroke: #38a94d; stroke-width: 3; }
.node-blue { fill: #087db8; }.node-green { fill: #38a94d; }
.visual-chip { position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 999px; color: #176d32; background: #edf7ec; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.service-card:hover .service-image { transform: translateY(-5px); }
.service-card .service-link { position: relative; z-index: 3; max-width: 57%; }
.service-card .service-waves, .service-card .dark-glow, .service-card .sim-illustration { opacity: .22; }

/* Custom device and app artwork for the service cards. */
.home-signal-field { position: absolute; top: 2px; right: 14px; width: 100px; height: 90px; }
.home-signal-field i { position: absolute; right: 0; top: 0; width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.25); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-45deg); animation: home-signal-pulse 3.6s ease-in-out infinite; }
.home-signal-field i:nth-child(2) { top: 10px; right: 10px; width: 68px; height: 68px; animation-delay: .25s; }
.home-signal-field i:nth-child(3) { top: 21px; right: 21px; width: 46px; height: 46px; animation-delay: .5s; }
.home-signal-field b { position: absolute; top: 4px; right: 5px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(7,73,119,.35); font-size: 7px; letter-spacing: .08em; }
.router-device { position: absolute; right: 13px; bottom: 31px; width: 124px; height: 61px; overflow: hidden; border: 1px solid rgba(255,255,255,.58); border-radius: 13px; background: #173850; box-shadow: 0 16px 25px rgba(4,24,39,.3), inset 0 1px 0 rgba(255,255,255,.4); transform: perspective(500px) rotateX(11deg) rotateZ(-6deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.router-top { position: absolute; inset: 0 0 24px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 12px 12px 6px 6px; color: #496578; background: linear-gradient(160deg,#f8fcfd,#d8e7eb); }
.router-brand { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; color: #fff; background: #087db8; font-size: 13px; font-style: italic; font-weight: 900; }
.router-model { font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.router-front { position: absolute; right: 0; bottom: 0; left: 0; display: flex; height: 24px; align-items: center; gap: 5px; padding: 0 10px; background: #173850; }
.router-front i { width: 4px; height: 4px; border-radius: 50%; background: #7a9aaa; box-shadow: 0 0 6px currentColor; }
.router-front i:nth-child(2) { background: #35b5e8; }.router-front i:nth-child(3) { background: #35b5e8; }.router-front i:nth-child(4) { background: #38b24a; }
.router-front span { margin-left: auto; color: #b9d1d8; font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.router-aerial { position: absolute; z-index: -1; bottom: 79px; width: 3px; height: 43px; border-radius: 4px; background: linear-gradient(#f6fbfc,#9db9c4); box-shadow: 0 2px 3px rgba(0,0,0,.18); transform-origin: bottom; }
.router-aerial-left { right: 107px; transform: rotate(-13deg); }.router-aerial-right { right: 28px; transform: rotate(13deg); }
.home-online-chip { position: absolute; right: 25px; bottom: 4px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #244a63; background: rgba(255,255,255,.94); box-shadow: 0 8px 17px rgba(4,24,39,.17); }
.home-online-chip > i,.business-status-dot,.business-float-chip > i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 3px rgba(56,178,74,.13); }
.home-online-chip span { display: grid; gap: 2px; }.home-online-chip b { font-size: 6px; letter-spacing: .08em; }.home-online-chip small { color: #7690a0; font-size: 6px; }
.business-dashboard-preview { position: absolute; top: 10px; right: 1px; width: 100%; min-height: 133px; padding: 9px; border: 1px solid rgba(255,255,255,.66); border-radius: 16px; color: #1c4058; background: #f8fbfc; box-shadow: 0 15px 27px rgba(4,24,39,.23); transform: perspective(700px) rotateY(-5deg) rotateZ(2deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.business-appbar { display: flex; align-items: center; gap: 5px; color: #526f82; font-size: 6px; letter-spacing: .045em; }
.business-app-mark { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; color: #fff; background: #087db8; font-size: 10px; font-style: italic; font-weight: 900; }
.business-appbar > i { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 3px #e7f4e8; }
.business-overline { display: block; margin: 8px 0 4px; color: #8aa0ad; font-size: 5px; font-weight: 800; letter-spacing: .11em; }
.business-service-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; background: #eef5f6; }
.business-service-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #087db8; background: #fff; font-size: 15px; }
.business-service-row > span:nth-child(2) { display: grid; gap: 2px; }.business-service-row b { font-size: 6px; }.business-service-row small { color: #8196a2; font-size: 5px; }
.business-status-dot { width: 5px; height: 5px; margin-left: auto; }
.business-metric-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 0 5px; }
.business-metric-row > div:first-child { display: grid; gap: 2px; }.business-metric-row small { color: #92a5af; font-size: 5px; font-weight: 800; letter-spacing: .08em; }.business-metric-row b { font-size: 7px; }
.business-bars { display: flex; height: 20px; align-items: end; gap: 3px; }.business-bars i { width: 6px; height: var(--bar-height); border-radius: 3px 3px 1px 1px; background: #1688ba; transform-origin: bottom; }.business-bars i:nth-child(1) { --bar-height: 8px; }.business-bars i:nth-child(2) { --bar-height: 12px; }.business-bars i:nth-child(3) { --bar-height: 10px; }.business-bars i:nth-child(4) { --bar-height: 16px; }.business-bars i:nth-child(5) { --bar-height: 13px; }.business-bars i:nth-child(6) { --bar-height: 19px; background: #38b24a; }
.business-action-row { display: flex; gap: 4px; margin-top: 6px; }.business-action-row span { padding: 4px 5px; border-radius: 999px; color: #456579; background: #edf3f5; font-size: 5px; font-weight: 700; }
.business-float-chip { position: absolute; right: 8px; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #e7eff1; border-radius: 999px; color: #557184; background: #fff; box-shadow: 0 7px 16px rgba(4,24,39,.14); font-size: 5px; font-weight: 800; letter-spacing: .07em; }
.service-card:hover .router-device { transform: perspective(500px) rotateX(8deg) rotateZ(-3deg) translateY(-4px); box-shadow: 0 20px 30px rgba(4,24,39,.34), inset 0 1px 0 rgba(255,255,255,.4); }
.service-card:hover .business-dashboard-preview { transform: perspective(700px) rotateY(-2deg) rotateZ(0) translateY(-3px); box-shadow: 0 20px 32px rgba(4,24,39,.27); }
@keyframes home-signal-pulse { 50% { opacity: .5; transform: rotate(-45deg) scale(.94); } }

.iphone-mockup { position: absolute; z-index: 1; top: 27px; right: 19px; width: 143px; height: 275px; margin: 0; perspective: 900px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.service-card-mobile:hover .iphone-mockup { transform: translateY(-6px) rotate(-2deg); }
.iphone-frame { position: relative; width: 100%; height: 100%; padding: 5px; overflow: hidden; border: 1px solid #8895a0; border-radius: 32px; background: #162333; box-shadow: 0 17px 28px rgba(13,45,67,.25), inset 0 0 0 1px rgba(255,255,255,.24); transform: rotate(5deg); transition: transform .45s ease, box-shadow .45s ease; }
.iphone-glint { position: absolute; top: 16px; left: 12px; width: 3px; height: 43%; border-radius: 999px; background: rgba(255,255,255,.55); transform: rotate(5deg); pointer-events: none; }
.service-card-mobile:hover .iphone-frame { transform: rotate(1deg) scale(1.025); box-shadow: 0 22px 34px rgba(13,45,67,.29), inset 0 0 0 1px rgba(255,255,255,.24); }
.iphone-screen { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; padding: 19px 9px 8px; border-radius: 27px; color: #173954; background: #fbfdfd; }
.iphone-island { position: absolute; top: 6px; left: 50%; width: 42px; height: 11px; border-radius: 999px; background: #101820; transform: translateX(-50%); }
.iphone-status { display: flex; justify-content: space-between; margin: 0 3px 10px; color: #2a4558; font-size: 6px; font-weight: 800; line-height: 1; }
.app-topline { display: flex; align-items: center; gap: 5px; color: #174a6c; font-size: 8px; }
.app-symbol { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; color: white; background: #007cc0; font-size: 11px; font-style: italic; font-weight: 900; }
.app-bell { display: grid; width: 17px; height: 17px; place-items: center; margin-left: auto; border-radius: 50%; color: #2b873b; background: #eaf6e8; font-size: 10px; }
.app-greeting { margin: 10px 0 3px; color: #6c8797; font-size: 5px; font-weight: 800; letter-spacing: .13em; }
.app-title { color: #143650; font-size: 10px; line-height: 1.25; letter-spacing: -.03em; }
.app-plan-card { display: grid; gap: 4px; margin-top: 9px; padding: 8px 7px; border-radius: 11px; background: #edf7ec; }
.app-plan-card > span { color: #328143; font-size: 5px; font-weight: 800; letter-spacing: .1em; }
.app-plan-card > b { color: #184463; font-size: 8px; }
.app-data-line { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.app-data-line strong { color: #007cc0; font-size: 13px; letter-spacing: -.04em; }
.app-data-line small { color: #668094; font-size: 5px; }
.app-data-track { height: 4px; overflow: hidden; border-radius: 999px; background: #d5e8d2; }
.app-data-track i { display: block; width: 66%; height: 100%; border-radius: inherit; background: #38b24a; }
.app-renewal { color: #718894; font-size: 5px; }
.app-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
.app-quick-actions span { display: flex; align-items: center; gap: 4px; padding: 5px 4px; border-radius: 7px; color: #33566c; background: #f0f6f8; font-size: 5px; font-weight: 700; }
.app-quick-actions i { display: grid; width: 13px; height: 13px; place-items: center; border-radius: 5px; color: #fff; background: #007cc0; font-size: 8px; font-style: normal; }
.app-quick-actions span:nth-child(2) i { background: #38b24a; }
.app-bottom-nav { display: flex; justify-content: space-around; margin-top: auto; padding-top: 6px; border-top: 1px solid #e9eff1; color: #92a4ae; font-size: 10px; }
.app-bottom-nav .active { color: #1684b5; }

.plans-note { display: grid; grid-template-columns: 205px 34px minmax(0,1fr); align-items: center; gap: 18px; min-height: 164px; overflow: hidden; }
.plans-note-art { position: relative; display: grid; width: 205px; height: 140px; place-items: center; overflow: visible; background: transparent; }
.install-kit { position: relative; width: 194px; height: 132px; }
.install-kit::after { position: absolute; right: 6px; bottom: 7px; width: 128px; height: 13px; border-radius: 50%; background: rgba(20,61,79,.14); filter: blur(7px); content: ""; }
.install-router { position: absolute; z-index: 2; top: 25px; left: 50%; display: flex; width: 148px; height: 84px; flex-direction: column; justify-content: space-between; padding: 11px 12px 9px; border: 1px solid rgba(255,255,255,.92); border-radius: 18px; background: linear-gradient(145deg,#fff 0%,#f5f9fa 60%,#dfeaf0 100%); box-shadow: 0 17px 28px rgba(19,62,82,.22),inset 0 1px 0 #fff,inset -3px -3px 7px rgba(17,69,118,.08); transform: translateX(-50%) perspective(480px) rotateX(8deg) rotateZ(-4deg); transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; }
.install-router::after { position: absolute; top: 10px; right: 0; bottom: 10px; width: 4px; border-radius: 4px 0 0 4px; background: #c2d4dd; content: ""; }
.modem-head { display: flex; align-items: center; gap: 7px; color: #244c67; }
.modem-head span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: #fff; background: #087db8; box-shadow: inset 0 1px rgba(255,255,255,.35); font-size: 16px; font-style: italic; font-weight: 900; }
.modem-head b { font-size: 8px; letter-spacing: .12em; }
.modem-head i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.14),0 0 9px rgba(56,178,74,.58); animation: modem-led 2.4s ease-in-out infinite; }
.modem-front { display: flex; height: 23px; align-items: center; gap: 5px; padding: 0 8px; border-radius: 8px; color: #c8dce5; background: #173b55; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.modem-front i { width: 4px; height: 4px; border-radius: 50%; background: #55c7ee; box-shadow: 0 0 6px rgba(85,199,238,.8); }.modem-front i:nth-child(3) { background: #38b24a; box-shadow: 0 0 6px rgba(56,178,74,.75); }
.modem-front span { margin-left: auto; font-size: 5px; font-weight: 800; letter-spacing: .1em; }
.plans-note:hover .install-router { transform: translateX(-50%) perspective(480px) rotateX(4deg) rotateZ(-1deg) translateY(-4px); box-shadow: 0 22px 32px rgba(19,62,82,.25),inset 0 1px 0 #fff,inset -3px -3px 7px rgba(17,69,118,.08); }
@keyframes modem-led { 50% { box-shadow: 0 0 0 5px rgba(56,178,74,.1),0 0 12px rgba(56,178,74,.78); } }
.plans-note .note-icon { display: grid; place-items: center; }
.plans-note p { margin: 0; }

.coverage-footprint { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(190px,.65fr); align-items: center; gap: 20px; overflow: hidden; margin: 12px 0 0; padding: 12px; border: 1px solid #dce8ed; border-radius: 20px; background: #f8fbfa; }
.coverage-map-ui { position: relative; min-height: 155px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: #123553; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.coverage-map-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(125,183,211,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(125,183,211,.16) 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg,#000,transparent 95%); }
.coverage-contour { position: absolute; width: 230px; height: 110px; border: 1px solid rgba(93,174,204,.18); border-radius: 45% 55% 54% 46%; transform: rotate(-15deg); }
.contour-one { top: -49px; left: 5%; box-shadow: 0 0 0 12px rgba(93,174,204,.035),0 0 0 25px rgba(93,174,204,.03); }.contour-two { right: 5%; bottom: -66px; width: 270px; height: 145px; border-color: rgba(56,178,74,.2); transform: rotate(12deg); box-shadow: 0 0 0 13px rgba(56,178,74,.035),0 0 0 27px rgba(56,178,74,.025); }
.coverage-map-route { position: absolute; top: 48%; left: 11%; width: 73%; height: 2px; background: repeating-linear-gradient(90deg,#47b8e7 0 5px,transparent 5px 10px) center/36px 2px repeat-x; transform: rotate(-5deg); animation: route-flow 8s linear infinite; }
.coverage-map-route i { position: absolute; top: -6px; left: var(--node-x); width: 11px; height: 11px; border: 2px solid #75d0ef; border-radius: 50%; background: #123553; box-shadow: 0 0 0 4px rgba(71,184,231,.12); }
.coverage-map-route i:nth-child(1) { --node-x: 0%; }.coverage-map-route i:nth-child(2) { --node-x: 24%; border-color: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.12); }.coverage-map-route i:nth-child(3) { --node-x: 49%; }.coverage-map-route i:nth-child(4) { --node-x: 73%; border-color: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.12); }.coverage-map-route i:nth-child(5) { --node-x: 100%; }
.coverage-tower-ui { position: absolute; top: 20%; left: 49%; width: 24px; height: 45px; border-bottom: 2px solid #d8edf4; transform: translateX(-50%); }
.coverage-tower-ui::before,.coverage-tower-ui::after { position: absolute; bottom: 0; width: 2px; height: 39px; border-radius: 2px; background: #d8edf4; content: ""; transform-origin: bottom; }.coverage-tower-ui::before { left: 4px; transform: rotate(16deg); }.coverage-tower-ui::after { right: 4px; transform: rotate(-16deg); }
.coverage-tower-ui i { position: absolute; top: 5px; left: 50%; width: 23px; height: 1px; background: #d8edf4; transform: translateX(-50%); }.coverage-tower-ui b { position: absolute; top: 16px; left: 50%; width: 19px; height: 1px; background: #d8edf4; transform: translateX(-50%); }.coverage-tower-ui span { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.17); transform: translateX(-50%); }
.coverage-region { position: absolute; color: rgba(197,221,232,.56); font-size: 7px; font-weight: 800; letter-spacing: .16em; }.region-hidalgo { top: 20%; left: 12%; }.region-veracruz { right: 9%; bottom: 21%; }
.coverage-place { position: absolute; color: #d6eaf1; font-size: 6px; font-weight: 700; letter-spacing: .08em; }.place-one { top: 68%; left: 15%; }.place-two { top: 68%; right: 14%; }
.coverage-status { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #d8ebf2; background: rgba(7,34,57,.75); font-size: 6px; font-weight: 800; letter-spacing: .1em; }.coverage-status i { width: 5px; height: 5px; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 3px rgba(56,178,74,.14); }
@keyframes route-flow { to { background-position: 36px 0; } }
.coverage-footprint figcaption { color: #526f83; font-size: 14px; font-weight: 700; line-height: 1.6; }

.contact-card { position: relative; overflow: hidden; }
.contact-card { display: grid; grid-template-columns: minmax(250px,1fr) minmax(150px,210px) minmax(250px,auto); gap: 20px; }
.contact-card > div { position: relative; z-index: 2; max-width: none; }
.contact-support-art { position: relative; display: grid; width: 100%; height: 160px; place-items: center; align-self: center; }
.support-chat-window { position: relative; z-index: 1; width: min(100%,205px); min-height: 122px; padding: 10px; border: 1px solid #e0eaed; border-radius: 17px; background: #fff; box-shadow: 0 15px 28px rgba(17,69,118,.12); transform: rotate(-2deg); transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; }
.support-chat-head { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid #edf1f2; }.support-chat-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: #087db8; font-size: 15px; font-style: italic; font-weight: 900; }.support-chat-head > span:nth-child(2) { display: grid; gap: 2px; }.support-chat-head b { color: #244a63; font-size: 8px; }.support-chat-head small { color: #8297a3; font-size: 6px; }.support-chat-head > i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 4px #edf7ec; }
.support-chat-body { display: grid; justify-items: start; gap: 5px; padding: 8px 0; }.support-greeting { max-width: 160px; padding: 6px 8px; border-radius: 3px 10px 10px 10px; color: #38596c; background: #f0f5f6; font-size: 7px; }.support-options { align-self: end; padding: 6px 8px; border-radius: 10px 3px 10px 10px; color: #216e36; background: #edf7ec; font-size: 6px; }
.support-chat-compose { display: flex; height: 24px; align-items: center; justify-content: space-between; padding: 0 5px 0 9px; border: 1px solid #e7edef; border-radius: 999px; color: #9aabb3; font-size: 6px; }.support-chat-compose b { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: #38a94d; font-size: 9px; }
.contact-card:hover .support-chat-window { transform: rotate(0) translateY(-4px); box-shadow: 0 20px 32px rgba(17,69,118,.17); }
.support-status { position: absolute; right: 17px; bottom: 15px; z-index: 3; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.14); }
.contact-card .whatsapp-link { position: relative; z-index: 2; }

.client-banner { grid-template-columns: minmax(0,1fr) minmax(220px,.88fr) minmax(0,1.1fr); gap: 18px; }
.client-portal-visual { position: relative; z-index: 2; display: flex; width: 100%; height: 220px; align-items: center; justify-content: center; gap: 7px; overflow: hidden; margin: 0; padding: 13px 10px; border: 1px solid rgba(216,232,238,.9); border-radius: 22px; background: #f5f9fb; box-shadow: 0 14px 30px rgba(17,69,118,.12); transform: rotate(-2deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.portal-laptop { width: 77%; transform: translateY(7px); }
.portal-screen { padding: 8px 8px 6px; border: 4px solid #153a55; border-bottom-width: 7px; border-radius: 9px 9px 5px 5px; background: #fff; box-shadow: 0 8px 14px rgba(17,69,118,.14); }
.portal-topbar { display: flex; align-items: center; gap: 4px; color: #244b66; font-size: 6px; }
.portal-topbar > i { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #38b24a; }
.portal-logo-mark { display: grid; width: 13px; height: 13px; place-items: center; border-radius: 4px; color: #fff; background: #087db8; font-size: 8px; font-style: italic; font-weight: 900; }
.portal-screen > small { display: block; margin-top: 9px; color: #74899b; font-size: 5px; letter-spacing: .08em; }
.portal-title { display: block; margin-top: 2px; color: #153a55; font-size: 8px; }
.portal-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 7px; }
.portal-stats > span { display: grid; gap: 2px; padding: 5px 4px; border-radius: 6px; background: #f0f6f8; }
.portal-stats i { color: #087db8; font-size: 8px; font-style: normal; }
.portal-stats span:nth-child(2) i { color: #38a94d; }
.portal-stats small { color: #718a9b; font-size: 4px; letter-spacing: .04em; }
.portal-stats b { color: #274d68; font-size: 6px; }
.portal-chart { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 5px; margin-top: 6px; padding: 5px; border-radius: 6px; background: #f8fafb; }
.portal-chart > div { display: grid; gap: 2px; }.portal-chart b { color: #31566f; font-size: 5px; }.portal-chart small { color: #91a3af; font-size: 4px; }
.portal-chart svg { width: 100%; height: 28px; overflow: visible; }
.portal-chart path { fill: none; stroke: #087db8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.portal-chart circle { fill: #38b24a; }
.portal-laptop-base { height: 6px; margin: 0 -8px; border-radius: 0 0 50% 50%; background: #91a4ae; box-shadow: 0 4px 8px rgba(17,69,118,.15); }
.portal-phone { position: relative; display: flex; width: 43px; height: 91px; flex: 0 0 43px; flex-direction: column; align-items: center; padding: 15px 4px 5px; border: 3px solid #163a54; border-radius: 13px; background: #fff; box-shadow: 0 8px 15px rgba(17,69,118,.14); transform: translateY(14px) rotate(4deg); }
.portal-phone-island { position: absolute; top: 4px; left: 50%; width: 18px; height: 5px; border-radius: 999px; background: #163a54; transform: translateX(-50%); }
.portal-phone-mark { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; color: #fff; background: #087db8; font-size: 11px; font-style: italic; font-weight: 900; }
.portal-phone small { margin-top: 4px; color: #708799; font-size: 4px; letter-spacing: .08em; }
.portal-phone b { margin-top: 5px; color: #234b67; font-size: 5px; }
.portal-phone > i { margin-top: 3px; color: #368745; font-size: 4px; font-style: normal; }
.portal-phone-bar { width: 25px; height: 3px; margin-top: 5px; border-radius: 99px; background: #38b24a; }
.client-banner:hover .client-portal-visual { transform: rotate(0) translateY(-4px); box-shadow: 0 20px 38px rgba(17,69,118,.16); }

.account-connect-art { position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 90px; margin: 12px 0 16px; padding: 5px 16px; overflow: hidden; border-radius: 20px; background: #eff8ed; }
.account-connect-icon { display: grid; width: 54px; height: 60px; flex: 0 0 54px; place-items: center; border-radius: 16px; color: #087db8; background: #fff; box-shadow: 0 7px 16px rgba(17,69,118,.08); }
.account-connect-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-connect-icon .account-signal { stroke: #38a94d; }.account-connect-icon .account-check { stroke: #38a94d; }
.account-art-copy { display: grid; gap: 3px; color: #315a41; }
.account-art-copy strong { font-size: 12px; }.account-art-copy small { max-width: 170px; color: #5f7d68; font-size: 10px; line-height: 1.4; }
.account-art-spark { margin-left: auto; color: #38b24a; font-size: 20px; font-style: normal; animation: account-spark 3s ease-in-out infinite; }
@keyframes account-spark { 50% { transform: rotate(45deg) scale(1.12); } }

.admin-welcome-art { display: grid; flex: 0 1 230px; width: min(25%,230px); height: 145px; gap: 8px; padding: 11px; border: 1px solid #dce8ed; border-radius: 19px; background: #fff; box-shadow: 0 10px 24px rgba(17,69,118,.1); }
.dashboard-mini-head { display: flex; align-items: center; gap: 5px; color: #31556d; font-size: 6px; letter-spacing: .05em; }
.dashboard-mini-mark { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 5px; color: #fff; background: #087db8; font-size: 10px; font-style: italic; font-weight: 900; }
.dashboard-mini-head > i { margin-left: auto; color: #328844; font-size: 5px; font-style: normal; }
.dashboard-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dashboard-mini-stats > span { position: relative; display: grid; gap: 3px; padding: 6px 8px; border-radius: 9px; background: #f2f7f8; }
.dashboard-mini-stats small { color: #738b99; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.dashboard-mini-stats strong { color: #173c56; font-size: 13px; line-height: 1; }
.dashboard-mini-stats i { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #38b24a; }
.dashboard-mini-chart { display: grid; grid-template-columns: 75px 1fr; align-items: end; gap: 7px; padding: 5px 7px; border-radius: 9px; background: #f8fafb; }
.dashboard-mini-chart > b { align-self: center; color: #45647a; font-size: 6px; }
.dashboard-mini-chart > div { display: flex; height: 29px; align-items: end; justify-content: space-around; gap: 3px; }
.dashboard-mini-chart > div i { width: 8px; height: var(--bar); border-radius: 4px 4px 2px 2px; background: #087db8; animation: dashboard-bars .8s ease both; }
.dashboard-mini-chart > div i:nth-child(3n) { background: #38b24a; }
@keyframes dashboard-bars { from { height: 3px; opacity: .45; } to { height: var(--bar); opacity: 1; } }

@media (max-width: 900px) {
  .service-card .service-image { right: 11px; width: 41%; height: 142px; }
  .contact-card { grid-template-columns: minmax(220px,1fr) 150px minmax(220px,auto); gap: 13px; }
  .admin-welcome-art { flex-basis: 180px; width: 22%; height: 120px; }
  .client-banner { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .client-portal-visual { grid-column: 1/-1; grid-row: 2; width: min(100%,500px); height: 245px; justify-self: center; }
  .client-links { grid-column: 1/-1; grid-row: 3; }
}
@media (max-width: 720px) {
  .service-card > div:not(.service-top) { max-width: 100%; }
  .service-card .service-image { right: 12px; bottom: 42px; width: 42%; height: 135px; }
  .service-card .service-link { max-width: 58%; }
  .service-card-mobile { min-height: 300px; }
  .service-card-mobile > div:not(.service-top) { max-width: 57%; }
  .service-card-mobile .iphone-mockup { top: 24px; right: 16px; width: 121px; height: 238px; }
  .plans-note { grid-template-columns: 28px minmax(0,1fr); gap: 9px; padding: 14px; }
  .plans-note-art { grid-column: 1/-1; width: 100%; height: 105px; }
  .install-kit { transform: scale(.78); }
  .coverage-footprint { grid-template-columns: 1fr; gap: 0; }
  .coverage-map-ui { min-height: 130px; }
  .coverage-footprint figcaption { padding: 0 8px 8px; text-align: center; }
  .contact-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .contact-card > div { max-width: none; }
  .contact-support-art { grid-column: 1; grid-row: 2; height: 145px; }
  .support-chat-window { width: min(100%,260px); }
  .contact-card .whatsapp-link { grid-column: 1/-1; width: 100%; margin-top: 5px; }
  .account-connect-art { min-height: 72px; margin: 9px 0 12px; }
  .account-connect-art { gap: 10px; padding-inline: 11px; }
  .account-connect-icon { width: 47px; height: 52px; flex-basis: 47px; }
  .account-art-copy strong { font-size: 11px; }
  .account-art-copy small { font-size: 9px; }
  .account-art-spark { font-size: 16px; }
  .admin-welcome-art { flex: 0 0 auto; width: min(100%,250px); height: 130px; }
  .client-banner { grid-template-columns: minmax(0,1fr); }
  .client-copy, .client-portal-visual, .client-links { grid-column: 1; }
  .client-copy { grid-row: 1; }
  .client-portal-visual { grid-row: 2; width: 100%; height: 205px; }
  .client-links { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card .service-image, .router-device, .business-dashboard-preview, .install-router, .iphone-mockup, .iphone-frame, .client-portal-visual, .support-chat-window { transition: none; }
  .home-signal-field i, .modem-head i, .coverage-map-route, .account-art-spark, .dashboard-mini-chart > div i { animation: none; }
}

/* Service paths: larger, product-led illustrations with one accent per card. */
.connection-card { min-height: 326px; padding: 24px 25px 22px; border-radius: 25px; }
.connection-card-copy { z-index: 3; max-width: 64%; padding-top: 35px; }
.connection-card-copy strong { font-size: 23px; }
.connection-card-copy small { max-width: 285px; font-size: 15px; }
.connection-card-link { z-index: 3; margin-top: 20px; }
.connection-art { top: 55px; right: 16px; width: 148px; height: 132px; z-index: 1; opacity: 1; }
.connection-art-wifi::before,.connection-art-network::before { position: absolute; inset: 4px 5px 1px; border-radius: 50%; background: #e8f5fc; box-shadow: inset 0 0 0 1px rgba(0,124,192,.08),0 14px 30px rgba(0,124,192,.08); content: ""; }
.connection-art-wifi i { z-index: 1; left: 26px; bottom: 28px; width: 96px; height: 96px; border: 1.5px solid rgba(0,124,192,.33); border-right-color: transparent; border-bottom-color: transparent; }
.connection-art-wifi i:nth-child(2) { left: 38px; bottom: 28px; width: 72px; height: 72px; border-color: rgba(0,124,192,.48); border-right-color: transparent; border-bottom-color: transparent; }
.connection-art-wifi i:nth-child(3) { left: 50px; bottom: 28px; width: 48px; height: 48px; border-color: #007cc0; border-right-color: transparent; border-bottom-color: transparent; }
.connection-art-wifi b { position: absolute; z-index: 2; left: 50%; bottom: 7px; display: flex; width: 91px; height: 48px; align-items: center; justify-content: flex-start; padding-left: 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 12px; color: #fff; background: linear-gradient(155deg,#1a4d6d,#12324e); box-shadow: 0 12px 20px rgba(15,61,91,.25),inset 0 1px rgba(255,255,255,.24); font-size: 14px; font-style: italic; font-weight: 900; transform: translateX(-50%) rotate(-5deg); }
.connection-art-wifi b::before { position: absolute; top: 10px; right: 11px; width: 4px; height: 4px; border-radius: 50%; background: #5ac8ee; box-shadow: -8px 0 #5ac8ee,-16px 0 #5ac8ee; content: ""; }
.connection-art-wifi b::after { position: absolute; right: 10px; bottom: 7px; color: #b9d5e2; content: "HOME HUB"; font-size: 5px; font-style: normal; letter-spacing: .1em; }
.connection-art-mobile { top: 41px; right: 22px; width: 138px; height: 149px; display: grid; place-items: center; }
.connection-art-mobile::before { position: absolute; width: 124px; height: 124px; border: 1px solid rgba(56,178,74,.12); border-radius: 50%; background: #edf8ed; box-shadow: 0 0 0 10px rgba(56,178,74,.04); content: ""; }
.connection-art-mobile > i { position: absolute; inset: 11px 26px; border: 1px solid rgba(56,178,74,.27); border-radius: 26px; animation: phone-pulse 3s ease-out infinite; }
.connection-art-mobile > i:nth-child(2) { animation-delay: 1s; }.connection-art-mobile > i:nth-child(3) { animation-delay: 2s; }
.mini-phone { position: relative; z-index: 2; display: flex; width: 69px; height: 124px; flex-direction: column; align-items: flex-start; padding: 18px 8px 7px; overflow: hidden; border: 3px solid #263b39; border-radius: 17px; color: #214d32; background: #fff; box-shadow: 0 15px 22px rgba(30,91,47,.2),inset 0 0 0 1px rgba(255,255,255,.8); transform: rotate(8deg); transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; }
.mini-phone > i { position: absolute; inset: auto; top: 5px; left: 50%; right: auto; bottom: auto; width: 20px; height: 5px; border: 0; border-radius: 99px; background: #263b39; transform: translateX(-50%); }
.mini-phone b { display: grid; width: 19px; height: 19px; place-items: center; border: 0; border-radius: 6px; color: #fff; background: #38a94d; font-size: 12px; font-style: italic; font-weight: 900; }
.mini-phone strong { margin-top: 4px; font-size: 6px; letter-spacing: .06em; }.mini-phone small { margin-top: 7px; color: #62806b; font-size: 5px; }.mini-phone-meter { width: 100%; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #e4f2e2; }.mini-phone-meter i { position: static; inset: auto; display: block; width: 68%; height: 100%; border: 0; border-radius: inherit; background: #38b24a; }
.mini-phone em { margin-top: auto; padding: 4px 6px; border-radius: 99px; color: #277b39; background: #eff8ed; font-size: 5px; font-style: normal; font-weight: 800; }
.mobile-network-tag { position: absolute; z-index: 3; top: 9px; right: 3px; display: block; width: auto; height: auto; padding: 5px 7px; border: 1px solid #d6ecd3; border-radius: 999px; color: #277b39; background: #fff; box-shadow: 0 5px 12px rgba(30,91,47,.09); font-size: 7px; letter-spacing: .1em; }
.connection-card-green:hover .mini-phone { transform: rotate(3deg) translateY(-5px); box-shadow: 0 20px 27px rgba(30,91,47,.25),inset 0 0 0 1px rgba(255,255,255,.8); }
.connection-art-network { top: 56px; right: 16px; width: 146px; height: 126px; background: radial-gradient(circle,#79bce0 1px,transparent 1.6px); background-size: 11px 11px; mask-image: radial-gradient(ellipse,#000 16%,transparent 75%); }
.connection-art-network::before { inset: 8px; background: rgba(232,245,252,.83); mask-image: radial-gradient(ellipse,#000 10%,transparent 74%); }
.connection-art-network i { z-index: 2; width: 13px; height: 13px; border: 2px solid #087db8; background: #fff; box-shadow: 0 0 0 5px rgba(0,124,192,.13); }
.connection-art-network i:nth-child(1) { left: 18px; top: 27px; }.connection-art-network i:nth-child(2) { right: 17px; top: 18px; }.connection-art-network i:nth-child(3) { left: 48px; bottom: 20px; }.connection-art-network i:nth-child(4) { right: 6px; bottom: 27px; }
.connection-art-network b { z-index: 1; inset: 25px 20px 25px 25px; border: 2px dashed #087db8; border-right: 0; border-bottom: 0; border-radius: 50%; }
.network-hub { position: absolute; z-index: 3; top: 44px; left: 50%; display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #fff; border-radius: 10px; color: #fff; background: #087db8; box-shadow: 0 7px 16px rgba(0,124,192,.2); font-size: 17px; font-style: italic; font-weight: 900; transform: translateX(-50%); }
.connection-art-network small { position: absolute; z-index: 3; right: 3px; bottom: 5px; padding: 4px 6px; border: 1px solid #d9eaf2; border-radius: 999px; color: #376984; background: #fff; font-size: 6px; font-weight: 800; letter-spacing: .09em; }
.hero-art { isolation: isolate; overflow: visible; }
.hero-art::before { position: absolute; z-index: -1; inset: 4% 1%; border-radius: 50%; background: radial-gradient(ellipse at 50% 48%,rgba(0,124,192,.3),rgba(0,124,192,.07) 44%,transparent 70%); filter: blur(4px); content: ""; }
.hero-art::after { position: absolute; z-index: 0; inset: 1% 2%; background-image: radial-gradient(circle,rgba(218,242,255,.48) 1px,transparent 1.5px),radial-gradient(circle,rgba(91,205,239,.55) 1px,transparent 1.5px); background-position: 10px 12px,34px 39px; background-size: 83px 77px,127px 113px; opacity: .38; mask-image: radial-gradient(ellipse,#000 12%,transparent 76%); pointer-events: none; content: ""; }
.hero-art > .orbit { z-index: 1; }
.hero-art > .planet-ring-back { position: absolute; z-index: 1; top: 50%; left: 50%; width: 376px; height: 142px; border: 2px solid rgba(140,197,62,.68); border-radius: 50%; box-shadow: 0 0 18px rgba(140,197,62,.16); transform: translate(-50%,-50%) rotate(-25deg); pointer-events: none; }
.hero-art > .planet { z-index: 2; transform-style: preserve-3d; box-shadow: inset -29px -28px 44px rgba(5,68,119,.42),inset 12px 12px 28px rgba(255,255,255,.78),0 35px 75px rgba(6,106,161,.28),0 0 42px rgba(101,204,237,.22); }
.hero-art > .planet::before { position: absolute; z-index: 1; inset: 1px; border-radius: 50%; background: radial-gradient(ellipse at 29% 27%,rgba(255,255,255,.52),transparent 37%),radial-gradient(ellipse at 74% 73%,rgba(7,69,119,.25),transparent 48%); content: ""; pointer-events: none; }
.planet-sheen { position: absolute; z-index: 1; inset: -25%; overflow: hidden; border-radius: 50%; background: linear-gradient(100deg,transparent 34%,rgba(255,255,255,.24) 46%,rgba(255,255,255,.05) 52%,transparent 62%); filter: blur(3px); animation: planet-surface-turn 13s linear infinite; pointer-events: none; }
.planet-core { z-index: 3; }
.planet-pin { z-index: 4; animation: planet-pin-drift 4.2s ease-in-out infinite; }
.planet-satellite { position: absolute; z-index: 5; top: 0; left: 0; display: flex; width: 39px; height: 19px; align-items: center; justify-content: center; gap: 3px; offset-path: ellipse(205px 143px at 50% 50%); offset-anchor: center; offset-rotate: auto 0deg; animation: satellite-revolution 24s linear infinite; filter: drop-shadow(0 7px 8px rgba(3,28,49,.28)); }
.planet-satellite b { width: 14px; height: 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 4px; background: #087db8; box-shadow: inset 0 1px rgba(255,255,255,.4); }
.satellite-wing { width: 10px; height: 16px; border: 1px solid rgba(255,255,255,.78); border-radius: 2px; background: repeating-linear-gradient(90deg,#d7edf5 0 2px,#1685b9 2px 3px); }
.hero .art-card { z-index: 7; border-color: rgba(218,235,244,.95); border-radius: 16px; color: #153957; background: rgba(255,255,255,.97); box-shadow: 0 17px 38px rgba(3,24,44,.28); }
.hero .art-card strong { color: #173c57; }.hero .art-card small { color: #637f93; }
.hero .status-live { background: #38b24a; box-shadow: 0 0 0 4px rgba(56,178,74,.14); }
@keyframes planet-surface-turn { to { transform: rotate(360deg); } }
@keyframes planet-pin-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes satellite-revolution { to { offset-distance: 100%; } }
@media (max-width: 1000px) {
  .connection-card { min-height: 310px; }
  .connection-art { right: 13px; width: 132px; height: 122px; }
  .planet-satellite { offset-path: ellipse(180px 135px at 50% 50%); }
  .hero-art > .planet-ring-back { width: 340px; height: 136px; }
}
@media (max-width: 720px) {
  .connection-card,.connection-card:last-child { min-height: 270px; padding: 20px; }
  .connection-card-copy { max-width: 63%; padding-top: 25px; }
  .connection-card-copy strong { max-width: 230px; font-size: 21px; }
  .connection-card-copy small { max-width: 240px; font-size: 14px; }
  .connection-art { top: 53px; right: 9px; width: 126px; height: 116px; }
  .connection-art-mobile { top: 34px; right: 15px; width: 124px; height: 138px; }
  .mini-phone { transform: scale(.9) rotate(8deg); }
  .connection-art-network { top: 52px; right: 9px; width: 126px; height: 116px; }
  .hero-art::after { opacity: .25; }
  .hero-art > .planet-ring-back { width: 270px; height: 92px; }
  .planet-satellite { offset-path: ellipse(151px 119px at 50% 50%); scale: .82; }
  .hero .art-card-top { right: 0; top: 27px; }
  .hero .art-card-bottom { left: 0; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .connection-art-wifi i,.connection-art-mobile > i,.connection-art-network i,.mini-phone,.planet-sheen,.planet-pin,.planet-satellite { animation: none !important; transition: none !important; }
}

/* Depth-aware orbital system: the globe occludes the rear arc and carries a front arc. */
.hero-art > .planet-ring-back,.hero-art > .planet-ring-front { top: 50%; left: 50%; width: 376px; height: 142px; border: 3px solid rgba(140,197,62,.82); border-radius: 50%; box-shadow: 0 0 17px rgba(140,197,62,.2); transform: translate(-50%,-50%) rotate(-25deg); pointer-events: none; }
.hero-art > .planet-ring-back { z-index: 1; }
.hero-art > .planet-ring-front { position: absolute; z-index: 3; clip-path: inset(50% 0 0 0); }
.hero-art > .planet { z-index: 2; }
.planet-pin { width: 38px; height: 38px; border: 1px solid rgba(0,124,192,.16); background: #fff; box-shadow: 0 8px 18px rgba(12,78,131,.22),0 0 0 4px rgba(255,255,255,.18); }
.planet-pin::before { content: none; }
.planet-pin svg { display: block; width: 20px; height: 20px; overflow: visible; color: #007cc0; transform: rotate(45deg); }
.planet-pin svg path,.planet-pin svg circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pin-one svg circle { fill: #38b24a; stroke: #38b24a; }
.pin-three svg circle:first-child { stroke: #38b24a; }
.planet-sheen { inset: 0; overflow: hidden; border-radius: 50%; background: none; filter: none; animation: none; }
.planet-map-track { position: absolute; inset: 0 auto 0 0; display: block; width: 200%; height: 100%; animation: planet-map-revolution 18s linear infinite; will-change: transform; }
.planet-map-track svg { display: block; width: 100%; height: 100%; overflow: visible; }
.planet-land { fill: rgba(25,127,164,.34); stroke: rgba(255,255,255,.28); stroke-width: 1.2; }
.planet-coast { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1.35; stroke-linecap: round; }
.planet-sheen::after { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 28% 23%,rgba(255,255,255,.23),transparent 42%),linear-gradient(90deg,rgba(5,74,120,.28),transparent 22% 72%,rgba(4,68,115,.32)); box-shadow: inset -18px 0 30px rgba(3,58,103,.22),inset 12px 0 24px rgba(255,255,255,.12); content: ""; pointer-events: none; }
.planet-orbit-plane { position: absolute; z-index: 1; top: 50%; left: 50%; width: 376px; height: 142px; overflow: visible; pointer-events: none; transform: translate(-50%,-50%) rotate(-25deg); }
.planet-orbit-plane.orbit-depth-back { z-index: 1; }
.planet-orbit-plane.orbit-depth-front { z-index: 5; }
.planet-satellite { position: absolute; top: 0; left: 0; display: flex; width: 78px; height: 23px; align-items: center; justify-content: center; gap: 3px; offset-path: path("M 376 71 C 376 110 292 142 188 142 C 84 142 0 110 0 71 C 0 32 84 0 188 0 C 292 0 376 32 376 71 Z"); offset-anchor: center; offset-rotate: 0deg; offset-distance: 0%; animation: satellite-revolution 30s linear infinite normal; filter: drop-shadow(0 5px 7px rgba(3,28,49,.32)); }
.orbit-depth-front .planet-satellite { animation: satellite-revolution 30s linear infinite normal,satellite-front-hemisphere 30s steps(1,end) infinite; }
.satellite-panel { display: flex; width: 25px; height: 19px; align-items: stretch; justify-content: space-evenly; gap: 2px; padding: 2px; border: 1px solid #9ac5d8; border-radius: 3px; background: #126b9f; box-shadow: inset 0 1px rgba(255,255,255,.38); }
.satellite-panel i { width: 1px; height: 100%; background: #9bd9f0; }.satellite-joint { width: 3px; height: 5px; border-radius: 1px; background: #c7d8df; }
.planet-satellite b { position: relative; display: block; width: 17px; height: 16px; border: 1px solid #8ca9b7; border-radius: 4px; background: linear-gradient(145deg,#f9fcfd,#b8cbd2); box-shadow: inset 0 1px #fff,0 1px 2px rgba(0,0,0,.2); }
.planet-satellite b::before { position: absolute; top: 4px; left: 5px; width: 5px; height: 5px; border: 1px solid #5fa8cb; border-radius: 50%; background: #0b73aa; box-shadow: 0 0 0 2px rgba(11,115,170,.13); content: ""; }
.planet-satellite b::after { position: absolute; top: -5px; left: 7px; width: 1px; height: 5px; background: #d7e6eb; box-shadow: 0 -1px 0 #fff; content: ""; }
.hero .art-card strong { color: #153957; }.hero .art-card small { color: #526f85; }
@keyframes planet-map-revolution { to { transform: translateX(-50%); } }
@keyframes satellite-revolution { to { offset-distance: 100%; } }
@keyframes satellite-front-hemisphere { 0%,49.99% { opacity: 1; } 50%,100% { opacity: 0; } }
@media (max-width: 1000px) {
  .hero-art > .planet-ring-back,.hero-art > .planet-ring-front,.planet-orbit-plane { width: 340px; height: 136px; }
  .planet-satellite { offset-path: path("M 340 68 C 340 105 264 136 170 136 C 76 136 0 105 0 68 C 0 31 76 0 170 0 C 264 0 340 31 340 68 Z"); }
}
@media (max-width: 720px) {
  .hero-art > .planet-ring-back,.hero-art > .planet-ring-front,.planet-orbit-plane { width: 270px; height: 92px; }
  .planet-satellite { offset-path: path("M 270 46 C 270 72 209 92 135 92 C 61 92 0 72 0 46 C 0 20 61 0 135 0 C 209 0 270 20 270 46 Z"); scale: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .planet-map-track,.planet-satellite { animation: none !important; }
}