.services-page-background,
.services-signal-field {
  display: none !important;
}

.hero {
  position: relative !important;
  min-height: 790px;
  overflow: visible;
  background:
    radial-gradient(circle at 64% 38%, rgba(255,196,0,.14), transparent 32%),
    radial-gradient(circle at 84% 45%, rgba(44,164,76,.12), transparent 26%),
    linear-gradient(180deg, rgba(255,250,240,.76), rgba(255,255,255,.60) 78%) !important;
}

.site-header,
.hero,
main > section,
.site-footer,
footer,
.floating-cta {
  position: relative;
  z-index: 2;
}

main > section:not(.hero) {
  background: transparent !important;
  backdrop-filter: none !important;
}

.hero-grid {
  position: relative;
  z-index: 3;
}

.services-conversation-stage {
  position: fixed;
  inset: 82px 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 32%, rgba(255,196,0,.12), transparent 34%),
    radial-gradient(circle at 86% 44%, rgba(44,164,76,.10), transparent 28%);
}

.portal-monitor {
  position: absolute;
  top: 100px;
  left: 40%;
  width: min(44vw, 630px);
  aspect-ratio: 1405 / 1119;
}

.portal-monitor-frame {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.portal-browser {
  position: absolute;
  left: 6.6%;
  top: 9.1%;
  width: 86.4%;
  height: 60.6%;
  overflow: hidden;
  border: 0;
  border-radius: 1px;
  background: #fff;
  z-index: 2;
}

.portal-browser::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16), transparent 24%, transparent 72%, rgba(255,255,255,.05));
  mix-blend-mode: screen;
}

.portal-toolbar {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #e8ecef;
  background: #fff;
}

.portal-dots { display: flex; gap: 7px; }
.portal-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef8c7c; }
.portal-dots i:nth-child(2) { background: #ffc400; }
.portal-dots i:nth-child(3) { background: #65bd72; }
.portal-title { font-size: 14px; font-weight: 900; }
.portal-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: #16833c; font-size: 11px; font-weight: 900; }
.portal-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2ca44c; box-shadow: 0 0 0 5px rgba(44,164,76,.12); animation: active-pulse 1.8s ease-in-out infinite; }

.portal-layout { height: calc(100% - 58px); display: grid; grid-template-columns: 150px 1fr; }
.portal-sidebar { padding: 22px 15px; background: #111927; color: #fff; }
.portal-brand { margin-bottom: 24px; color: #ffc400; font-size: 16px; font-weight: 950; }
.portal-nav { display: grid; gap: 10px; }
.portal-nav span { padding: 9px 10px; border-radius: 6px; color: #cbd3dc; font-size: 11px; font-weight: 800; }
.portal-nav span.active { background: #ffc400; color: #111927; }
.portal-thread { position: relative; overflow: hidden; background: #f4f7fa; }
.thread-heading { position: relative; z-index: 2; height: 68px; padding: 14px 20px; border-bottom: 1px solid #dfe5ea; background: rgba(255,255,255,.96); }
.thread-heading strong { display: block; font-size: 17px; }
.thread-heading span { color: #66717e; font-size: 11px; }

.shared-thread-window { position: absolute; inset: 68px 0 0; overflow: hidden; padding: 14px 18px; }
.shared-thread-track { display: grid; gap: 11px; animation: shared-conversation-roll 18s cubic-bezier(.45,0,.2,1) infinite; }
.shared-message { max-width: 82%; padding: 10px 12px; border-radius: 12px; background: #fff; color: #17202a; font-size: 11px; line-height: 1.38; box-shadow: 0 5px 14px rgba(17,24,39,.09); }
.shared-message.out { justify-self: end; background: #eaf7eb; border: 1px solid rgba(44,164,76,.18); }
.shared-message.system { max-width: 92%; justify-self: center; background: #fff6d4; color: #6f5500; text-align: center; font-weight: 900; }
.shared-message small { display: block; margin-top: 5px; color: #16833c; font-size: 8px; font-weight: 900; text-align: right; }

.client-phone {
  position: absolute;
  top: 116px;
  right: 1.5%;
  width: 220px;
  height: 530px;
  padding: 12px;
  border: 7px solid #121a24;
  border-right-width: 12px;
  border-radius: 38px;
  background: #121a24;
  box-shadow: 22px 28px 48px rgba(17,24,39,.24);
  transform: perspective(1100px) rotateY(-10deg) rotateZ(1deg);
}

.client-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 27px; background: #f4f7fa; }
.client-phone-notch { position: absolute; z-index: 4; top: 8px; left: 50%; width: 88px; height: 22px; border-radius: 14px; background: #121a24; transform: translateX(-50%); }
.client-phone-header { position: relative; z-index: 3; height: 76px; padding: 35px 15px 10px; border-bottom: 1px solid #dde4e8; background: #fff; font-size: 12px; font-weight: 900; }
.client-phone-header span { display: block; color: #16833c; font-size: 8px; }
.client-phone .shared-thread-window { inset: 76px 0 52px; padding: 12px 10px; }
.client-phone .shared-thread-track { gap: 10px; }
.client-phone .shared-message { max-width: 88%; padding: 9px 10px; font-size: 10px; }
.phone-composer { position: absolute; right: 8px; bottom: 8px; left: 8px; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px 0 12px; border: 1px solid #dce3e7; border-radius: 20px; background: #fff; color: #929aa3; font-size: 9px; }
.phone-send { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #ffc400; color: #111927; }

.connection-lane { position: absolute; top: 345px; left: calc(40% + min(42vw, 600px)); right: calc(1.5% + 215px); height: 76px; }
.connection-lane::before { content: ""; position: absolute; top: 37px; right: 0; left: 0; border-top: 2px dashed rgba(44,164,76,.42); }
.connection-signal { --travel: 220px; --delay: 0s; position: absolute; top: 16px; left: 0; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #2ca44c; color: #fff; box-shadow: 0 0 0 7px rgba(44,164,76,.12), 0 10px 24px rgba(17,24,39,.14); animation: signal-to-phone 4.8s ease-in-out var(--delay) infinite; }
.connection-signal.gold { background: #ffc400; color: #111927; box-shadow: 0 0 0 7px rgba(255,196,0,.14), 0 10px 24px rgba(17,24,39,.14); animation-name: signal-to-monitor; }
.connection-signal.teal { background: #0e9a92; animation-delay: -2.4s; }
.connection-signal svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.connection-label { position: absolute; top: -14px; left: 50%; padding: 6px 9px; border: 1px solid #dce7dc; border-radius: 999px; background: rgba(255,255,255,.92); color: #16833c; font-size: 9px; font-weight: 900; transform: translateX(-50%); }

@keyframes shared-conversation-roll {
  0%, 9% { transform: translateY(132px); }
  24%, 34% { transform: translateY(52px); }
  48%, 58% { transform: translateY(-45px); }
  72%, 82% { transform: translateY(-148px); }
  94%, 100% { transform: translateY(-252px); }
}
@keyframes signal-to-phone { 0% { transform: translateX(0) scale(.68); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(var(--travel)) scale(1); opacity: 1; } 100% { transform: translateX(var(--travel)) scale(.7); opacity: 0; } }
@keyframes signal-to-monitor { 0% { transform: translateX(var(--travel)) scale(.68); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(0) scale(1); opacity: 1; } 100% { transform: translateX(0) scale(.7); opacity: 0; } }
@keyframes active-pulse { 0%,100% { opacity:.55; transform:scale(.8); } 50% { opacity:1; transform:scale(1.15); } }

@media (max-width: 1100px) {
  .portal-monitor { left: 34%; width: 58vw; }
  .client-phone { right: 2%; transform: scale(.88); transform-origin: right top; }
  .connection-lane { display: none; }
}

@media (max-width: 760px) {
  .hero { min-height: 1080px; padding-top: 34px; }
  .portal-monitor { top: 470px; left: -4%; width: 95%; }
  .portal-layout { grid-template-columns: 105px 1fr; }
  .portal-sidebar { padding: 18px 9px; }
  .client-phone { top: 500px; right: 3%; width: 190px; height: 420px; transform: scale(.72); transform-origin: right top; }
}

@media (prefers-reduced-motion: reduce) {
  .shared-thread-track,
  .connection-signal,
  .portal-status::before { animation: none; }
}