/* ==========================================================================
   Ghandour Global Group — wattswhere.html stylesheet
   Requires css/base.css to be loaded first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14. WattsWhere page - intelligent mobility and live discovery
   -------------------------------------------------------------------------- */

.wattswhere-flow {
  --wattswhere-blue: #0040e0;
  --wattswhere-cyan: #5ce1ff;
  --wattswhere-green: #2fd46b;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 78% 18%, rgba(92, 225, 255, 0.16), transparent 25rem),
    radial-gradient(circle at 18% 76%, rgba(47, 212, 107, 0.14), transparent 28rem),
    linear-gradient(180deg, #010b1b 0%, #041331 38%, #020914 72%, #010b1b 100%);
}

.wattswhere-flow .container,
.wattswhere-flow section {
  position: relative;
  z-index: 1;
}

/* Route rail: one thread through hero -> interface -> pipeline -> CTA, lit
   by scroll progress, tinted blue -> cyan -> green along its length. */
.wattswhere-route-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 1;
  pointer-events: none;
}

.wattswhere-route-rail-track {
  position: absolute;
  inset: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 64, 224, 0.3) 8%,
    rgba(92, 225, 255, 0.3) 50%,
    rgba(47, 212, 107, 0.3) 92%,
    transparent 100%
  );
}

.wattswhere-route-rail-pulse {
  position: absolute;
  left: 50%;
  top: calc(var(--wattswhere-progress, 0) * 100%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(92, 225, 255, 0.95), transparent 70%);
  box-shadow: 0 0 24px 6px rgba(47, 212, 107, 0.4);
}

.wattswhere-hero,
.wattswhere-interface,
.wattswhere-pipeline-section,
.wattswhere-cta {
  min-height: calc(100svh - var(--header-h, 72px));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.wattswhere-hero-grid,
.wattswhere-interface-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(320px, 1.06fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.wattswhere-pipeline-grid,
.wattswhere-cta-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.wattswhere-copy h1,
.wattswhere-copy h2,
.wattswhere-interface-copy h2 {
  color: var(--color-white);
  text-wrap: balance;
}

.wattswhere-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 6vw, 4.85rem);
  line-height: 0.93;
}

.wattswhere-copy h2,
.wattswhere-interface-copy h2 {
  max-width: 16ch;
  font-size: clamp(2rem, 4.8vw, 3.7rem);
  line-height: 0.98;
}

.wattswhere-copy p,
.wattswhere-interface-copy p,
.wattswhere-panel p {
  color: rgba(232, 237, 247, 0.82);
}

.wattswhere-copy .lead {
  max-width: 55ch;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
}

.wattswhere-breadcrumb a,
.wattswhere-breadcrumb li {
  color: rgba(232, 237, 247, 0.7);
}

.wattswhere-breadcrumb a:hover {
  color: var(--wattswhere-cyan);
}

/* --- Hero stage ---------------------------------------------------------- */

.wattswhere-phone-stage {
  position: relative;
  width: min(86vw, 560px);
  min-height: 560px;
  margin-inline: auto;
  perspective: 1100px;
  transform-style: preserve-3d;
  --pos-scale: 1;
  --phone-scale: 1;
  cursor: pointer;
  transform: rotateX(var(--wattswhere-tilt-x, 0deg)) rotateY(var(--wattswhere-tilt-y, 0deg));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wattswhere-grid-floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 4%;
  height: 46%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(92, 225, 255, 0.36) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 50px),
    radial-gradient(ellipse, rgba(92, 225, 255, 0.14), transparent 72%);
  border: 1px solid rgba(92, 225, 255, 0.2);
  transform: rotateX(68deg) translateZ(-84px);
  transform-origin: center bottom;
  box-shadow: 0 0 34px rgba(92, 225, 255, 0.1);
}

.wattswhere-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  aspect-ratio: 1;
  border: 1px dashed rgba(47, 212, 107, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg) translateZ(14px);
  /* Slowed from 46s - purely decorative ambient ring, calmer. */
  animation: wattswhere-spin 55s linear infinite;
}

@keyframes wattswhere-spin {
  to { transform: translate(-50%, -50%) rotateX(66deg) translateZ(14px) rotateZ(360deg); }
}

/* Realistic phone: a real 6-face box (front/back/left/right/top/bottom),
   tall/narrow proportions read unambiguously as a handset. Front face is
   the glass screen; side/top/bottom faces deliver visible thickness as it
   rotates. Beat 1 (--wattswhere-phone-enter) adds a decaying extra
   rotation so it settles into its resting pose rather than popping in. */
.wattswhere-phone {
  --phone-w: calc(210px * var(--phone-scale, 1));
  --phone-h: calc(420px * var(--phone-scale, 1));
  --phone-d: 26px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--phone-w);
  height: var(--phone-h);
  transform-style: preserve-3d;
  opacity: calc(0.75 + var(--wattswhere-phone-enter, 1) * 0.25);
  transform:
    translate(-50%, -50%)
    translateZ(calc(130px * var(--phone-scale, 1)))
    rotateX(-6deg)
    rotateY(calc(26deg + var(--wattswhere-phone-spin, 0) * -34deg + var(--wattswhere-phone-mode-nudge, 0deg)));
  transition: transform 0.2s linear, opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 26px 40px rgba(0, 8, 20, 0.42));
}

.wattswhere-phone-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid rgba(92, 225, 255, 0.28);
  border-radius: 32px;
}

.wattswhere-phone-face--front {
  border-radius: 30px;
  background: linear-gradient(165deg, #05121f, #0a1c2e);
  overflow: hidden;
  transform: translateZ(calc(var(--phone-d) / 2));
}

.wattswhere-phone-face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  z-index: 5;
}

.wattswhere-phone-face--back {
  background: linear-gradient(180deg, #16304f, #030916);
  transform: rotateY(180deg) translateZ(calc(var(--phone-d) / 2));
}

.wattswhere-phone-face--right,
.wattswhere-phone-face--left {
  top: 0;
  left: calc(50% - var(--phone-d) / 2);
  width: var(--phone-d);
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, #3c5a7a, #10202f);
}

.wattswhere-phone-face--right { transform: rotateY(90deg) translateZ(calc(var(--phone-w) / 2)); }
.wattswhere-phone-face--left { transform: rotateY(-90deg) translateZ(calc(var(--phone-w) / 2)); }

.wattswhere-phone-face--top,
.wattswhere-phone-face--bottom {
  left: 0;
  top: calc(50% - var(--phone-d) / 2);
  width: 100%;
  height: var(--phone-d);
  border-radius: 14px;
}

.wattswhere-phone-face--top {
  background: linear-gradient(90deg, #33547f, #101c33);
  transform: rotateX(90deg) translateZ(calc(var(--phone-h) / 2));
}

.wattswhere-phone-face--bottom {
  background: linear-gradient(90deg, #030914, #0d1729);
  transform: rotateX(-90deg) translateZ(calc(var(--phone-h) / 2));
}

/* --- Screen contents (children of the front face) ------------------------ */

.wattswhere-map-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(92, 225, 255, 0.18), transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(47, 212, 107, 0.12), transparent 40%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  opacity: var(--wattswhere-map-on, 1);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-wattswhere-mode="find"] .wattswhere-map-grid {
  opacity: 1;
}

.wattswhere-route-ribbon {
  position: absolute;
  left: 20%;
  top: 65%;
  width: 62%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--wattswhere-blue), var(--wattswhere-cyan));
  box-shadow: 0 0 10px rgba(92, 225, 255, 0.5);
  transform-origin: left center;
  transform: rotate(-30deg) scaleX(var(--wattswhere-route-draw, 1));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.wattswhere-route-ribbon.is-drawing {
  animation: wattswhere-route-redraw 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wattswhere-route-redraw {
  0% { transform: rotate(-30deg) scaleX(0); }
  100% { transform: rotate(-30deg) scaleX(1); }
}

[data-wattswhere-mode="route"] .wattswhere-route-ribbon {
  box-shadow: 0 0 16px rgba(92, 225, 255, 0.75);
}

.wattswhere-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: var(--wattswhere-green);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(47, 212, 107, 0.6);
  transform: rotate(-45deg) scale(var(--wattswhere-pins-in, 1)) translateZ(6px);
  opacity: var(--wattswhere-pins-in, 1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, box-shadow 0.4s ease;
  transition-delay: var(--pin-delay, 0s);
}

.wattswhere-pin::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.wattswhere-pin.is-popping {
  animation: wattswhere-pin-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wattswhere-pin-pop {
  0% { transform: rotate(-45deg) scale(0.6) translateZ(6px); }
  100% { transform: rotate(-45deg) scale(1) translateZ(6px); }
}

.wattswhere-pin--one { left: 30%; top: 32%; --pin-delay: 0s; }
.wattswhere-pin--two { left: 58%; top: 48%; --pin-delay: 0.08s; }
.wattswhere-pin--three { left: 42%; top: 68%; --pin-delay: 0.16s; }

[data-wattswhere-mode="find"] .wattswhere-pin {
  filter: brightness(1.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 16px rgba(47, 212, 107, 0.85);
}

[data-wattswhere-mode="route"] .wattswhere-pin--three,
.wattswhere-pin--three[style*="1"] {
  background: var(--wattswhere-cyan);
}

.wattswhere-pin--three {
  opacity: calc(var(--wattswhere-pins-in, 1) * (0.6 + var(--wattswhere-station-select, 1) * 0.4));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 calc(10px + var(--wattswhere-station-select, 1) * 8px) rgba(47, 212, 107, calc(0.6 + var(--wattswhere-station-select, 1) * 0.3));
}

.wattswhere-location-marker {
  position: absolute;
  left: 42%;
  top: 68%;
  width: 14px;
  height: 14px;
}

.wattswhere-marker-dot {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--wattswhere-cyan);
  box-shadow: 0 0 10px rgba(92, 225, 255, 0.8);
  z-index: 2;
}

.wattswhere-marker-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(92, 225, 255, 0.7);
  animation: wattswhere-marker-pulse 2.2s ease-out infinite;
}

@keyframes wattswhere-marker-pulse {
  0% { transform: scale(1); opacity: calc(var(--wattswhere-marker-live, 1) * 0.8); }
  100% { transform: scale(2.4); opacity: 0; }
}

.wattswhere-battery-badge {
  position: absolute;
  /* Fixed px, same as the phone's own face dimensions - without scaling by
     --phone-scale here too, the badge stayed full-size while the phone
     shrank around it on mobile and crowded into the access icon next to
     it. Scaling both the size and its offset keeps it proportional and
     anchored to the same corner at any phone size. */
  right: calc(14px * var(--phone-scale, 1));
  top: calc(14px * var(--phone-scale, 1));
  width: calc(34px * var(--phone-scale, 1));
  height: calc(16px * var(--phone-scale, 1));
  border-radius: 4px;
  border: 1.5px solid rgba(232, 237, 247, 0.5);
  padding: 2px;
  animation: wattswhere-battery-glow 3.2s ease-in-out infinite;
}

.wattswhere-battery-badge::after {
  content: "";
  position: absolute;
  right: calc(-4px * var(--phone-scale, 1));
  top: calc(5px * var(--phone-scale, 1));
  width: calc(3px * var(--phone-scale, 1));
  height: calc(6px * var(--phone-scale, 1));
  border-radius: 0 2px 2px 0;
  background: rgba(232, 237, 247, 0.5);
}

@keyframes wattswhere-battery-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(47, 212, 107, 0); }
  50% { box-shadow: 0 0 12px rgba(47, 212, 107, 0.5); }
}

.wattswhere-battery-fill {
  display: block;
  height: 100%;
  width: calc(35% + var(--wattswhere-station-select, 1) * 55%);
  border-radius: 2px;
  background: var(--wattswhere-green);
  box-shadow: 0 0 8px rgba(47, 212, 107, 0.6);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-wattswhere-mode="insights"] .wattswhere-battery-fill {
  width: 90%;
}

.wattswhere-access-icon {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 20px;
  height: 20px;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateY(0deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wattswhere-access-icon.is-flipped {
  transform: translateX(-50%) rotateY(180deg);
}

.wattswhere-access-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 237, 247, 0.5);
}

.wattswhere-access-face--lock {
  background: rgba(4, 13, 31, 0.8);
}

.wattswhere-access-face--lock::before {
  content: "";
  width: 8px;
  height: 6px;
  border: 1.5px solid rgba(232, 237, 247, 0.7);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform: translateY(-4px);
}

.wattswhere-access-face--check {
  background: rgba(31, 204, 31, 0.2);
  border-color: rgba(47, 212, 107, 0.6);
  transform: rotateY(180deg);
}

.wattswhere-access-face--check::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--wattswhere-green);
  border-bottom: 2px solid var(--wattswhere-green);
  transform: rotate(-45deg) translateY(-2px);
}

.wattswhere-access-icon.is-flipped .wattswhere-access-face--check {
  animation: wattswhere-confirm-flash 0.6s ease;
}

@keyframes wattswhere-confirm-flash {
  0% { filter: brightness(1); }
  55% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

[data-wattswhere-mode="access"] .wattswhere-battery-badge {
  border-color: rgba(47, 212, 107, 0.6);
}

.wattswhere-mini-chart {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-wattswhere-mode="insights"] .wattswhere-mini-chart {
  opacity: 1;
}

.wattswhere-mini-chart span {
  display: block;
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--wattswhere-cyan), var(--wattswhere-green));
  height: 30%;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wattswhere-mini-chart.is-charting span:nth-child(1) { height: 55%; transition-delay: 0s; }
.wattswhere-mini-chart.is-charting span:nth-child(2) { height: 85%; transition-delay: 0.08s; }
.wattswhere-mini-chart.is-charting span:nth-child(3) { height: 40%; transition-delay: 0.16s; }

/* --- Elements floating around the phone ----------------------------------- */

/* A mini map preview - a faint street grid, a short route line, and a
   destination pin - so this reads as an actual map card rather than a
   blank glass plate. */
.wattswhere-map-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 52px;
  border-radius: 10px;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle 2.5px at 62% 32%, var(--wattswhere-green) 0 40%, transparent 42%),
    linear-gradient(35deg, transparent 46%, rgba(92, 225, 255, 0.75) 48% 52%, transparent 54%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, rgba(92, 225, 255, 0.2), rgba(4, 13, 31, 0.94));
  background-size: auto, auto, 13px 13px, 13px 13px, auto;
  border: 1px solid rgba(92, 225, 255, 0.26);
  box-shadow: 10px 12px 0 rgba(1, 6, 16, 0.4), 0 0 6px rgba(47, 212, 107, 0.3);
  opacity: 0.9;
  transform: translate3d(calc(var(--px) * var(--pos-scale)), calc(var(--py) * var(--pos-scale)), calc(var(--pz) * var(--pos-scale)));
}

.wattswhere-map-card::before,
.wattswhere-map-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.wattswhere-map-card::before {
  top: 6px;
  right: -12px;
  width: 12px;
  height: calc(100% - 8px);
  border-radius: 0 9px 9px 0;
  background: rgba(2, 8, 18, 0.72);
  transform-origin: left center;
  transform: rotateY(84deg);
}

.wattswhere-map-card::after {
  left: 10px;
  bottom: -11px;
  width: calc(100% - 8px);
  height: 11px;
  border-radius: 0 0 9px 9px;
  background: rgba(2, 8, 18, 0.78);
  transform-origin: top center;
  transform: rotateX(-84deg);
}

.wattswhere-map-card--one { --px: -170px; --py: -60px; --pz: 60px; }
.wattswhere-map-card--two { --px: 150px; --py: 90px; --pz: 50px; border-color: rgba(47, 212, 107, 0.28); }

.wattswhere-station-model {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 70px;
  transform-style: preserve-3d;
  transform: translate3d(calc(150px * var(--pos-scale)), calc(130px * var(--pos-scale)), calc(40px * var(--pos-scale)));
}

.wattswhere-station-face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #1c3f6e, #050f22);
  border: 1px solid rgba(92, 225, 255, 0.24);
}

.wattswhere-station-face--front {
  transform: translateZ(6px);
  background: linear-gradient(180deg, #223c63, #07152d);
}

.wattswhere-station-face--front::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 3px;
  height: 24px;
  background: var(--wattswhere-green);
  box-shadow: 0 0 10px rgba(47, 212, 107, 0.7);
  transform: translateX(-50%);
}

.wattswhere-station-face--back { transform: rotateY(180deg) translateZ(6px); background: linear-gradient(180deg, #132947, #030916); }
.wattswhere-station-face--right { left: calc(50% - 6px); width: 12px; height: 100%; transform: rotateY(90deg) translateZ(11px); }
.wattswhere-station-face--left { left: calc(50% - 6px); width: 12px; height: 100%; transform: rotateY(-90deg) translateZ(11px); }

.wattswhere-station-base {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 40px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92, 225, 255, 0.3), transparent 70%);
  transform: translateX(-50%);
}

/* --- Interface / console section ----------------------------------------- */

.wattswhere-console {
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    rgba(4, 11, 27, 0.72);
  backdrop-filter: blur(var(--blur-md));
  border: 1px solid rgba(92, 225, 255, 0.22);
  box-shadow:
    var(--shadow-console),
    inset 0 0 30px rgba(0, 64, 224, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wattswhere-console-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.wattswhere-tab {
  position: relative;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(232, 237, 247, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 237, 247, 0.78);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wattswhere-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--wattswhere-green);
  box-shadow: 0 0 10px rgba(47, 212, 107, 0.7);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.wattswhere-tab:hover,
.wattswhere-tab:focus,
.wattswhere-tab:focus-visible,
.wattswhere-tab.is-active {
  color: var(--color-white);
  border-color: rgba(92, 225, 255, 0.55);
  background: rgba(92, 225, 255, 0.14);
  transform: translateY(-2px);
}

.wattswhere-tab.is-active::after {
  width: 60%;
}

.wattswhere-console-screen {
  position: relative;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 30%, rgba(92, 225, 255, 0.12), transparent 34%),
    linear-gradient(160deg, rgba(9, 24, 53, 0.82), rgba(2, 6, 16, 0.82));
  backdrop-filter: blur(8px);
  background-size: 42px 42px, 42px 42px, auto, auto;
  border: 1px solid rgba(232, 237, 247, 0.1);
}

.wattswhere-panel {
  position: absolute;
  inset: 0;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.wattswhere-panel.is-active {
  opacity: 1;
  transform: none;
}

.wattswhere-panel h3 {
  max-width: 20ch;
  color: var(--color-white);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
}

.wattswhere-panel p:not(.eyebrow) {
  max-width: 28ch;
}

.wattswhere-mini {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 150px;
  height: 120px;
  perspective: 600px;
  transform-style: preserve-3d;
}

.wattswhere-mini-box {
  position: absolute;
  border-radius: 10px;
  transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(92, 225, 255, 0.2), rgba(4, 12, 28, 0.94));
  border: 1px solid rgba(92, 225, 255, 0.24);
  box-shadow: 10px 12px 0 rgba(1, 6, 16, 0.4);
  transform: rotateX(52deg) rotateZ(-10deg);
}

.wattswhere-mini--pin-cluster {
  left: 18px;
  top: 18px;
  width: 100px;
  height: 78px;
  overflow: hidden;
}

.wattswhere-mini--pin-cluster::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(47, 212, 107, 0.45), transparent);
  animation: wattswhere-mini-scan 2.4s ease-in-out infinite;
}

@keyframes wattswhere-mini-scan {
  0% { transform: translateY(-20%); opacity: 0.2; }
  50% { transform: translateY(140%); opacity: 0.9; }
  100% { transform: translateY(-20%); opacity: 0.2; }
}

.wattswhere-mini--lock {
  left: 44px;
  top: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 204, 31, 0.18);
  border-color: rgba(47, 212, 107, 0.5);
}

/* A concrete padlock glyph (shackle + body + keyhole) centered in the
   Smart Access mini-badge, so it reads as "unlock" rather than a blank
   green disc. */
.wattswhere-lock-glyph {
  position: relative;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(20, 46, 30, 0.95), rgba(6, 18, 12, 0.98));
  border: 1.5px solid var(--wattswhere-green);
  box-shadow: 0 0 10px rgba(47, 212, 107, 0.45);
}

.wattswhere-lock-glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 13px;
  height: 12px;
  margin-bottom: -2px;
  transform: translateX(-50%);
  border: 2px solid var(--wattswhere-green);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.wattswhere-lock-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--wattswhere-green);
  box-shadow: 0 0 5px rgba(47, 212, 107, 0.9);
}

.wattswhere-mini--route {
  left: 16px;
  top: 30px;
  width: 108px;
  height: 60px;
  overflow: hidden;
}

.wattswhere-mini--route::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 60%;
  width: 80%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--wattswhere-blue), var(--wattswhere-cyan));
  transform: rotate(-22deg);
}

.wattswhere-mini--bars {
  left: 30px;
  top: 18px;
  width: 90px;
  height: 66px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background-color: rgba(4, 12, 28, 0.94);
}

.wattswhere-mini--bars span {
  display: block;
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--wattswhere-cyan), var(--wattswhere-green));
}

.wattswhere-mini--bars span:nth-child(1) { height: 55%; }
.wattswhere-mini--bars span:nth-child(2) { height: 85%; }
.wattswhere-mini--bars span:nth-child(3) { height: 40%; }

/* --- Pipeline section: card sliding ---------------------------------------- */

.wattswhere-pipeline-visual {
  position: relative;
  width: min(88vw, 560px);
  height: 480px;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.wattswhere-pipeline-panel {
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(30px + var(--i) * 96px);
  height: 78px;
  display: grid;
  place-items: center;
  text-align: center;
  padding-inline: 1rem;
  border-radius: 16px;
  transform-style: preserve-3d;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-white);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 28%),
    linear-gradient(160deg, rgba(92, 225, 255, 0.16), rgba(5, 13, 30, 0.94));
  border: 1px solid rgba(92, 225, 255, 0.26);
  box-shadow: 0 22px 34px rgba(1, 6, 16, 0.46), 0 0 26px rgba(92, 225, 255, 0.1);
  opacity: 0;
  transform:
    rotateX(18deg) rotateZ(-4deg)
    translateX(var(--slide-x, 0px))
    translateY(24px)
    translateZ(calc(var(--i) * 16px))
    scale(0.94);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 0.12s);
}

.wattswhere-pipeline-section.is-assembled .wattswhere-pipeline-panel {
  opacity: 1;
  transform: rotateX(18deg) rotateZ(-4deg) translateX(0) translateY(0) translateZ(calc(var(--i) * 16px)) scale(1);
}

.wattswhere-pipeline-panel::before,
.wattswhere-pipeline-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.wattswhere-pipeline-panel::before {
  top: 8px;
  right: -18px;
  width: 18px;
  height: calc(100% - 10px);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, rgba(15, 50, 62, 0.82), rgba(2, 7, 18, 0.96));
  transform-origin: left center;
  transform: rotateY(84deg);
}

.wattswhere-pipeline-panel::after {
  left: 14px;
  bottom: -16px;
  width: calc(100% - 12px);
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(90deg, rgba(8, 36, 46, 0.82), rgba(2, 7, 18, 0.98));
  transform-origin: top center;
  transform: rotateX(-84deg);
}

.wattswhere-pipeline-panel--one { --i: 0; --slide-x: -60px; }
.wattswhere-pipeline-panel--two { --i: 1; --slide-x: 50px; border-color: rgba(92, 225, 255, 0.3); }
.wattswhere-pipeline-panel--three { --i: 2; --slide-x: -50px; border-color: rgba(47, 212, 107, 0.3); }
.wattswhere-pipeline-panel--four { --i: 3; --slide-x: 60px; border-color: rgba(47, 212, 107, 0.34); }

.wattswhere-metrics {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.wattswhere-metrics div {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(232, 237, 247, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.wattswhere-metrics strong {
  color: var(--wattswhere-cyan);
  font-family: var(--font-primary);
}

.wattswhere-metrics span {
  color: rgba(232, 237, 247, 0.86);
}

/* --- Crosslinks + CTA ------------------------------------------------------ */

.wattswhere-crosslinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

.wattswhere-crosslink {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(92, 225, 255, 0.16);
  color: rgba(232, 237, 247, 0.86);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.wattswhere-crosslink:hover,
.wattswhere-crosslink:focus {
  border-color: rgba(92, 225, 255, 0.5);
  background: rgba(92, 225, 255, 0.1);
  transform: translateY(-2px);
}

/* Each subsidiary keeps its own established accent color here too. */
.wattswhere-crosslink--emagine { border-color: rgba(77, 125, 255, 0.3); }
.wattswhere-crosslink--electrify { border-color: rgba(111, 157, 255, 0.3); }
.wattswhere-crosslink--melon360 { border-color: rgba(31, 204, 31, 0.3); }

.wattswhere-crosslink--emagine:hover,
.wattswhere-crosslink--emagine:focus { border-color: rgba(77, 125, 255, 0.6); background: rgba(77, 125, 255, 0.1); }
.wattswhere-crosslink--electrify:hover,
.wattswhere-crosslink--electrify:focus { border-color: rgba(111, 157, 255, 0.6); background: rgba(111, 157, 255, 0.1); }
.wattswhere-crosslink--melon360:hover,
.wattswhere-crosslink--melon360:focus { border-color: rgba(31, 204, 31, 0.6); background: rgba(31, 204, 31, 0.1); }

.wattswhere-crosslink strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-primary);
  margin-bottom: 0.3rem;
}

.wattswhere-crosslink span {
  font-size: 0.85rem;
  color: rgba(232, 237, 247, 0.72);
}

.wattswhere-cta {
  min-height: 82svh;
}

.wattswhere-cta-scene {
  position: relative;
  width: min(86vw, 440px);
  height: 340px;
  margin-inline: auto;
  perspective: 900px;
}

.wattswhere-cta-phone {
  --phone-w: 130px;
  --phone-h: 260px;
  --phone-d: 16px;
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%) translateZ(60px) rotateX(-4deg) rotateY(-12deg) scale(0.85);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wattswhere-cta-scene.is-assembled .wattswhere-cta-phone {
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(60px) rotateX(-4deg) rotateY(-12deg) scale(1);
  animation: wattswhere-select-flash 0.7s ease;
}

@keyframes wattswhere-select-flash {
  0% { filter: brightness(1); }
  55% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

.wattswhere-cta-selected-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--wattswhere-green) 0 30%, transparent 60%);
  opacity: 0.7;
}

.wattswhere-cta-scene.is-assembled .wattswhere-cta-phone .wattswhere-battery-badge {
  animation: wattswhere-battery-glow-strong 2.6s ease-in-out infinite;
}

@keyframes wattswhere-battery-glow-strong {
  0%, 100% { box-shadow: 0 0 8px rgba(47, 212, 107, 0.35); }
  50% { box-shadow: 0 0 20px rgba(47, 212, 107, 0.85); }
}

.wattswhere-cta-card {
  position: absolute;
  left: 12%;
  top: 62%;
  width: 130px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(92, 225, 255, 0.2);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.2s;
}

.wattswhere-cta-scene.is-assembled .wattswhere-cta-card {
  opacity: 1;
  transform: translateX(0);
}

.wattswhere-cta-card strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 0.8rem;
}

.wattswhere-cta-card span {
  font-size: 0.72rem;
  color: rgba(232, 237, 247, 0.7);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .wattswhere-hero,
  .wattswhere-interface,
  .wattswhere-pipeline-section,
  .wattswhere-cta {
    min-height: auto;
    padding-block: clamp(4rem, 14vw, 6rem);
  }

  .wattswhere-hero-grid,
  .wattswhere-interface-grid,
  .wattswhere-pipeline-grid,
  .wattswhere-cta-grid {
    grid-template-columns: 1fr;
  }

  .wattswhere-phone-stage {
    width: min(92vw, 400px);
    min-height: 440px;
    --pos-scale: 0.65;
    /* The phone's own w/h/translateZ were fixed regardless of the shrunk
       stage, so it kept its full perspective-magnified size and overflowed
       the stage box top/bottom - overlapping the copy above it once the
       grid stacked to one column. Scaling it down with the stage fixes it. */
    --phone-scale: 0.65;
  }

  .wattswhere-map-card,
  .wattswhere-station-model,
  .wattswhere-orbit {
    display: none;
  }

  .wattswhere-console-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .wattswhere-console-screen {
    min-height: 380px;
  }

  .wattswhere-pipeline-visual {
    height: 420px;
  }

  .wattswhere-crosslinks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .wattswhere-copy h1 {
    font-size: clamp(2.05rem, 13vw, 3.1rem);
  }

  .wattswhere-copy h2,
  .wattswhere-interface-copy h2 {
    font-size: clamp(1.7rem, 10vw, 2.55rem);
  }

  .wattswhere-phone-stage {
    min-height: 380px;
    --phone-scale: 0.52;
  }

  .wattswhere-console {
    padding: 0.8rem;
  }

  .wattswhere-panel {
    padding: 1.2rem;
  }

  .wattswhere-mini {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wattswhere-orbit,
  .wattswhere-marker-ring,
  .wattswhere-battery-badge,
  .wattswhere-route-ribbon,
  .wattswhere-pin,
  .wattswhere-mini--pin-cluster::before,
  .wattswhere-access-face--check,
  .wattswhere-cta-phone,
  .wattswhere-cta-phone .wattswhere-battery-badge {
    animation: none;
  }

  .wattswhere-phone-stage,
  .wattswhere-phone,
  .wattswhere-route-ribbon,
  .wattswhere-pin,
  .wattswhere-battery-fill,
  .wattswhere-access-icon,
  .wattswhere-mini-chart,
  .wattswhere-mini-chart span,
  .wattswhere-tab,
  .wattswhere-tab::after,
  .wattswhere-panel,
  .wattswhere-pipeline-panel,
  .wattswhere-crosslink,
  .wattswhere-cta-phone,
  .wattswhere-cta-card {
    transition: none;
  }
}