/* ============================================================
   home3d.css — 3D Scroll Animation Styles for EITS Homepage
   ============================================================ */

/* ---- Hero Scroll Pin Structure ---- */
/* GSAP handles pinning via pin:true — no manual sticky/track needed */
#hero-scroll {
  position: relative;
}

#hero-track {
  height: 0;
  /* GSAP pinSpacing adds scroll room automatically */
  overflow: hidden;
}

#hero-sticky {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  z-index: 1;
}

/* Glow Orbs */
.hero-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  animation: orbFloat 8s ease-in-out infinite;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(6, 255, 255, 0.07) 0%, transparent 70%);
  top: -100px;
  left: -100px;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(154, 108, 255, 0.07) 0%, transparent 70%);
  bottom: -80px;
  right: -80px;
  animation-delay: -4s;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(30px, -30px);
  }
}

/* Left text column */
.hero-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  padding: 0 32px 0 64px;
  z-index: 2;
}

.hero-title {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 480px;
  line-height: 1.8;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 255, 255, 0.08);
  border: 1px solid rgba(6, 255, 255, 0.2);
  border-radius: 50px;
  padding: 6px 16px 6px 8px;
  font-size: 0.8rem;
  color: var(--cyan);
  margin-bottom: 1.2rem;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 2s infinite;
  display: inline-block;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-stats {
  display: flex;
  gap: 32px;
}

.hero-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Right 3D device column */
.hero-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.device-scene {
  position: relative;
  width: 460px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-floor-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(6, 255, 255, 0.25) 0%, transparent 70%);
  filter: blur(12px);
}

/* ---- THE 3D PANEL (Smart Home Controller) ---- */
.device-wrapper {
  position: relative;
  perspective: 1200px;
}

/* This element gets rotated by GSAP on scroll */
.device-panel {
  width: 340px;
  height: 420px;
  background: linear-gradient(160deg, rgba(18, 22, 45, 0.98) 0%, rgba(8, 10, 22, 0.98) 100%);
  border-radius: 28px;
  border: 1px solid rgba(6, 255, 255, 0.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 40px 80px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(6, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  transform-style: preserve-3d;
  /* Initial 3D angle — GSAP will animate this to 0 on scroll */
  transform: rotateX(40deg) rotateY(-20deg) rotateZ(3deg);
  transition: box-shadow 0.4s;
}

.device-panel:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 50px 100px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(6, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-edge-left,
.panel-edge-right,
.panel-edge-bottom {
  position: absolute;
  background: linear-gradient(90deg, rgba(6, 255, 255, 0.15), rgba(154, 108, 255, 0.1));
  border-radius: 2px;
}

.panel-edge-left {
  width: 4px;
  top: 20px;
  bottom: 20px;
  left: -2px;
  background: linear-gradient(180deg, rgba(6, 255, 255, 0.3), rgba(154, 108, 255, 0.2));
  transform: translateZ(-2px);
}

.panel-edge-right {
  width: 4px;
  top: 20px;
  bottom: 20px;
  right: -2px;
  background: linear-gradient(180deg, rgba(154, 108, 255, 0.2), rgba(6, 255, 255, 0.1));
  transform: translateZ(-2px);
}

.panel-edge-bottom {
  height: 4px;
  left: 20px;
  right: 20px;
  bottom: -2px;
  background: linear-gradient(90deg, rgba(6, 255, 255, 0.2), rgba(154, 108, 255, 0.3));
  transform: translateZ(-2px);
}

/* Screen inside panel */
.panel-bezel {
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  background: rgba(4, 6, 18, 0.95);
  border: 1px solid rgba(6, 255, 255, 0.1);
  overflow: hidden;
}

.panel-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
}

.panel-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-brand {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.panel-time {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

/* Room tiles grid */
.panel-rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  flex: 1;
}

.room-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 10px 8px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.room-tile.active {
  background: rgba(6, 255, 255, 0.06);
  border-color: rgba(6, 255, 255, 0.2);
}

.room-tile:hover {
  border-color: rgba(6, 255, 255, 0.3);
}

.room-icon {
  font-size: 1.1rem;
}

.room-name {
  font-size: 0.62rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.room-toggle {
  width: 26px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  margin-top: 4px;
  position: relative;
  transition: background 0.3s;
}

.room-toggle::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
}

.room-toggle.on {
  background: rgba(6, 255, 255, 0.3);
}

.room-toggle.on::after {
  background: var(--cyan);
  left: 14px;
  box-shadow: 0 0 8px rgba(6, 255, 255, 0.8);
}

/* Energy bar */
.panel-energy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  color: var(--text-secondary);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.energy-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.energy-fill {
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: 2px;
  animation: energyPulse 3s ease-in-out infinite;
}

@keyframes energyPulse {

  0%,
  100% {
    width: 42%;
  }

  50% {
    width: 48%;
  }
}

/* Floating chips around device */
.float-chip {
  position: absolute;
  background: rgba(10, 14, 30, 0.9);
  border: 1px solid rgba(6, 255, 255, 0.2);
  border-radius: 50px;
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
}

.chip-1 {
  top: 20px;
  left: -80px;
  animation: chipFloat 5s ease-in-out infinite;
}

.chip-2 {
  top: 120px;
  right: -90px;
  animation: chipFloat 5s ease-in-out infinite 1s;
}

.chip-3 {
  bottom: 120px;
  left: -90px;
  animation: chipFloat 5s ease-in-out infinite 2s;
}

.chip-4 {
  bottom: 30px;
  right: -70px;
  animation: chipFloat 5s ease-in-out infinite 1.5s;
}

@keyframes chipFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4444;
}

.blink {
  animation: blinkDot 1s step-end infinite;
}

@keyframes blinkDot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s;
}

.scroll-hint.hidden {
  opacity: 0;
}

.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid rgba(6, 255, 255, 0.3);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5px;
}

.scroll-dot {
  width: 3px;
  height: 7px;
  background: var(--cyan);
  border-radius: 2px;
  animation: scrollDot 1.5s ease-in-out infinite;
}

@keyframes scrollDot {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ============================================================
   HOME SERVICE CARDS
   ============================================================ */
.services-grid-home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.home-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 255, 255, 0.04), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.home-service-card:hover {
  transform: translateY(-10px);
  border-color: rgba(6, 255, 255, 0.25);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(6, 255, 255, 0.05);
}

.home-service-card:hover::before {
  opacity: 1;
}

.hsc-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(6, 255, 255, 0.12), rgba(154, 108, 255, 0.08));
  border: 1px solid rgba(6, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: transform 0.3s;
}

.home-service-card:hover .hsc-icon-wrap {
  transform: scale(1.1) rotate(-5deg);
}

.hsc-icon {
  font-size: 1.6rem;
}

.home-service-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.home-service-card p {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.hsc-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan);
  transition: gap 0.2s;
}

/* ============================================================
   CCTV SCROLL SECTION
   ============================================================ */
.scroll-device-section {
  padding: 100px 0;
  background: var(--bg-primary);
  overflow: hidden;
}

.sds-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sds-text h2 {
  margin-bottom: 1rem;
}

.sds-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.5rem 0;
}

.sds-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CSS 3D CCTV Camera */
.cctv-scene {
  position: relative;
  width: 300px;
  height: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cctv-mount {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 20px;
  background: linear-gradient(180deg, #1a1f3a, #0d1020);
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(6, 255, 255, 0.15);
}

.cctv-arm {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 60px;
  background: linear-gradient(90deg, #1a1f3a, #222840);
  border-radius: 4px;
}

.cctv-body {
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translateX(-50%) perspective(600px) rotateX(-10deg);
  width: 200px;
  height: 70px;
  background: linear-gradient(160deg, #1e2440, #0d1020);
  border-radius: 12px 40px 40px 12px;
  border: 1px solid rgba(6, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding-left: 20px;
  animation: cctvScan 6s ease-in-out infinite;
}

@keyframes cctvScan {

  0%,
  100% {
    transform: translateX(-50%) perspective(600px) rotateX(-10deg) rotateY(0deg);
  }

  25% {
    transform: translateX(-50%) perspective(600px) rotateX(-10deg) rotateY(15deg);
  }

  75% {
    transform: translateX(-50%) perspective(600px) rotateX(-10deg) rotateY(-15deg);
  }
}

.cctv-lens-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a2035, #0a0f22);
  border: 2px solid rgba(6, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(6, 255, 255, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.cctv-lens {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #1a2a5e, #050a18);
  border: 1px solid rgba(6, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cctv-iris {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #2a4080, #050a18);
  border: 1px solid rgba(100, 150, 255, 0.3);
  animation: irisAnim 3s ease-in-out infinite;
}

@keyframes irisAnim {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.85);
  }
}

.cctv-ir {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 50, 50, 0.4);
  animation: irGlow 2s ease-in-out infinite;
}

.cctv-ir.ir1 {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.cctv-ir.ir2 {
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.cctv-ir.ir3 {
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.cctv-ir.ir4 {
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.cctv-ir.ir5 {
  top: 6px;
  right: 6px;
}

.cctv-ir.ir6 {
  bottom: 6px;
  left: 6px;
}

@keyframes irGlow {

  0%,
  100% {
    opacity: 0.3;
    box-shadow: none;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(255, 50, 50, 0.8);
  }
}

.cctv-rec-dot {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.8);
  animation: blinkDot 1s step-end infinite;
}

.cctv-fov {
  position: absolute;
  top: 165px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 120px solid rgba(6, 255, 255, 0.04);
  filter: blur(4px);
}

.cctv-live-badge {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 50, 50, 0.15);
  border: 1px solid rgba(255, 50, 50, 0.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff6666;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cctv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3333;
  animation: blinkDot 1s step-end infinite;
  display: inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero-left {
    width: 55%;
    padding-left: 40px;
  }

  .hero-right {
    width: 46%;
  }

  .device-scene {
    width: 360px;
  }

  .device-panel {
    width: 280px;
    height: 360px;
  }

  .float-chip {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-left {
    width: 100%;
    text-align: center;
    padding: 0 24px;
  }

  .hero-right {
    display: none;
  }

  .services-grid-home {
    grid-template-columns: 1fr 1fr;
  }

  .sds-inner {
    grid-template-columns: 1fr;
  }

  .cctv-scene {
    display: none;
  }
}

@media (max-width: 600px) {
  .services-grid-home {
    grid-template-columns: 1fr;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }
}
/* ============================================================
   VISIBILITY FIXES — ensure sections always visible
   GSAP overrides these when it runs; fallback if not
   ============================================================ */
.fade-up, .fade-left, .fade-right, .fade-in {
  /* Visible by default — GSAP sets opacity:0 when it runs */
  opacity: 1 !important;
  transform: none !important;
}

/* GSAP adds this class when it's ready to animate */
.gsap-ready .fade-up { opacity: 0 !important; transform: translateY(40px) !important; }
.gsap-ready .fade-left { opacity: 0 !important; transform: translateX(-40px) !important; }
.gsap-ready .fade-right { opacity: 0 !important; transform: translateX(40px) !important; }

/* Section base visibility */
.section { opacity: 1 !important; visibility: visible !important; }
#products, #stats, #services-section, #cta-section { opacity: 1 !important; visibility: visible !important; }

/* Home service cards always visible */
.home-service-card { opacity: 1 !important; }
.stat-card { opacity: 1 !important; }
.product-card { opacity: 1 !important; }

/* ============================================================
   3D SMART HOUSE — Interactive CSS Scene
   Controlled by the Smart Home Panel tiles
   ============================================================ */

/* Overall hero visual layout: panel LEFT, house RIGHT */
.device-scene {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 720px;
  justify-content: center;
  position: relative;
}

/* Connection line between panel & house */
.hero-connect-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 20px;
  pointer-events: none;
  z-index: 0;
}

/* ---- SMART HOUSE CONTAINER ---- */
.smart-house {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  transform: perspective(800px) rotateY(8deg);
  transition: transform 0.6s ease;
  filter: drop-shadow(0 20px 40px rgba(6,255,255,0.15));
}
.smart-house:hover {
  transform: perspective(800px) rotateY(3deg);
}

/* House body wrapper */
.house-body {
  position: relative;
}

/* ---- ROOF ---- */
.house-roof {
  position: relative;
  width: 220px;
  height: 80px;
}
.roof-left, .roof-right, .roof-top {
  position: absolute;
}
.roof-left {
  bottom: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 80px 110px;
  border-color: transparent transparent #1a2240 transparent;
}
.roof-right {
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 110px 80px 0;
  border-color: transparent #1a2240 transparent transparent;
}
.roof-top {
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(6,255,255,0.1) 0%, transparent 70%);
  filter: blur(8px);
}

/* ---- WALLS ---- */
.house-walls {
  width: 180px;
  height: 140px;
  background: linear-gradient(180deg, #141830 0%, #0e1228 100%);
  border: 1px solid rgba(6,255,255,0.18);
  border-top: none;
  margin: 0 auto;
  position: relative;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 0 40px rgba(6,255,255,0.03);
}

/* ---- WINDOWS ---- */
.house-window {
  position: absolute;
  width: 46px; height: 46px;
  top: 20px;
  background: rgba(4,8,20,0.95);
  border: 1px solid rgba(6,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.5s ease;
}
.win-left  { left: 14px; }
.win-right { right: 14px; }

/* Window light glow — visible when lights ON */
.win-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, rgba(255,230,100,0.0) 0%, transparent 70%);
  transition: background 0.5s ease;
}
/* lit state */
.house.lights-on .win-glow {
  background: radial-gradient(ellipse, rgba(255,230,100,0.45) 0%, rgba(255,200,60,0.15) 60%, transparent 100%);
  box-shadow: 0 0 20px rgba(255,230,100,0.5);
}
.house.lights-on .house-window {
  border-color: rgba(255,220,80,0.5);
  box-shadow: 0 0 16px rgba(255,230,100,0.35), inset 0 0 12px rgba(255,230,100,0.2);
}

/* Window cross dividers */
.win-pane {
  position: absolute;
  inset: 0;
}
.win-bar-h {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(6,255,255,0.15);
  transform: translateY(-50%);
}
.win-bar-v {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(6,255,255,0.15);
  transform: translateX(-50%);
}

/* ---- CURTAINS ---- */
.curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, #1a2050, #0d1535);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
}
.curtain-l { left: 0; transform-origin: left; }
.curtain-r { right: 0; transform-origin: right; }
/* Default: curtains OPEN (hidden) */
.curtain-l { width: 0; }
.curtain-r { width: 0; }
/* Curtains CLOSED */
.house.curtains-closed .curtain-l,
.house.curtains-closed .curtain-r { width: 50%; }

/* ---- DOOR ---- */
.house-door-frame {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 60px;
  border: 1px solid rgba(6,255,255,0.25);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  background: rgba(8,12,30,0.9);
}
.house-door {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a2245, #0d1128);
  border-radius: 3px 3px 0 0;
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
/* Door OPEN */
.house.door-open .house-door {
  transform: perspective(200px) rotateY(-75deg);
}
.door-handle {
  position: absolute;
  right: 5px; top: 50%;
  width: 4px; height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(6,255,255,0.8);
  transform: translateY(-50%);
}
.door-panel-top, .door-panel-bot {
  position: absolute;
  left: 5px; right: 12px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
}
.door-panel-top { top: 8px; }
.door-panel-bot { bottom: 8px; }
.door-lock-icon {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  transition: all 0.3s;
}
.house.door-open .door-lock-icon { content: '🔓'; }

/* ---- CHIMNEY ---- */
.house-chimney {
  position: absolute;
  top: -55px; right: 40px;
  width: 18px; height: 30px;
  background: linear-gradient(180deg, #1a2240, #0d1020);
  border: 1px solid rgba(6,255,255,0.1);
  border-radius: 2px;
}
.chimney-smoke {
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 16px;
  background: radial-gradient(ellipse, rgba(150,150,180,0.3) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(3px);
  animation: smokeRise 3s ease-in-out infinite;
}
@keyframes smokeRise {
  0%   { opacity:0; transform:translateX(-50%) translateY(0) scale(0.5); }
  50%  { opacity:0.6; }
  100% { opacity:0; transform:translateX(-50%) translateY(-20px) scale(1.5); }
}

/* ---- GROUND ---- */
.house-ground {
  width: 200px;
  margin: 0 auto;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(6,255,255,0.2), transparent);
  border-radius: 50%;
  filter: blur(2px);
}
.house-grass {
  position: absolute;
  bottom: 0; left: -20px; right: -20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(6,255,136,0.3), transparent);
  border-radius: 2px;
}

/* ---- MINI CCTV on house ---- */
.house-cctv {
  position: absolute;
  top: 28px; right: -8px;
  opacity: 1;
  transition: opacity 0.4s;
}
.house-cctv.off { opacity: 0.2; }
.mini-cctv-arm {
  width: 4px; height: 14px;
  background: #1a2040;
  border-radius: 2px;
  margin: 0 auto;
}
.mini-cctv-body {
  width: 22px; height: 10px;
  background: linear-gradient(160deg, #1e2440, #0d1020);
  border-radius: 3px 8px 8px 3px;
  border: 1px solid rgba(6,255,255,0.2);
  display: flex;
  align-items: center;
  padding-left: 3px;
  position: relative;
}
.mini-lens {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #2a4080, #050a18);
  border: 1px solid rgba(100,150,255,0.3);
}
.mini-rec {
  position: absolute;
  right: 3px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 6px rgba(255,50,50,0.8);
  animation: blinkDot 1s step-end infinite;
}
.mini-rec.off { background: #444; box-shadow: none; animation: none; }

/* ---- WiFi waves on house ---- */
.wifi-waves {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.4s;
}
.wifi-waves.active { opacity: 1; }
.wifi-w {
  border-radius: 50%;
  border: 1.5px solid rgba(6,255,255,0.5);
  animation: wifiPulse 1.5s ease-out infinite;
}
.w1 { width: 8px;  height: 6px; animation-delay: 0s; }
.w2 { width: 16px; height: 10px; animation-delay: 0.2s; }
.w3 { width: 24px; height: 14px; animation-delay: 0.4s; }
@keyframes wifiPulse {
  0%   { opacity:0.8; transform:scale(0.8); }
  50%  { opacity:0.4; }
  100% { opacity:0; transform:scale(1.2); }
}

/* House label */
.house-label {
  text-align: center;
  font-size: 0.62rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 600;
  opacity: 0.7;
}

/* ============================================================
   RESPONSIVE for house scene
   ============================================================ */
@media (max-width: 1100px) {
  .smart-house { width: 160px; }
  .house-walls { width: 140px; height: 110px; }
  .house-roof { width: 160px; }
  .roof-left  { border-width: 0 0 65px 80px; }
  .roof-right { border-width: 0 80px 65px 0; }
}
@media (max-width: 900px) {
  .smart-house { display: none; }
  .hero-connect-line { display: none; }
}

/* ============================================================
   IN-VIEW ANIMATION (IntersectionObserver replaces GSAP.from)
   ============================================================ */
.home-service-card,
.stat-card,
.product-card,
.about-panel {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s, box-shadow 0.4s !important;
}

/* Section padding fix — ensure sections have proper padding */
#services-section,
#products,
#stats,
.scroll-device-section {
  padding: 80px 0;
}

/* Section header always visible */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
  opacity: 1 !important;
}
.section-header h2,
.section-header p,
.section-header .section-label {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   SMOOTH SCROLL TRANSITION — Hero → Next Section
   ============================================================ */

/* 1. Gradient fade at bottom of hero (blends into bg-secondary) */
#hero-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(8, 9, 16, 0.6) 50%,
    var(--bg-secondary) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* 2. Services section bleeds slightly upward (overlap) */
#services-section {
  margin-top: -2px;
  position: relative;
  z-index: 2;
}

/* 3. Top fade on first section after hero */
#services-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg-secondary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* 4. Smooth momentum scrolling */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* ============================================================
   3D CCTV CAMERA — Premium Interactive CSS Camera
   ============================================================ */

/* Override old CCTV styles — only hide truly unused elements */
.cctv-scene, .cctv-mount, .cctv-arm,
.cctv-lens, .cctv-body-old { display:none !important; }

/* Section layout */
#cctv-scroll-section .sds-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
#cctv-scroll-section .sds-device {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

/* ===== CAM3D SCENE WRAPPER ===== */
.cam3d-scene {
  position: relative;
  width: 260px;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  perspective: 900px;
}

/* ===== CEILING MOUNT ===== */
.cam3d-ceiling {
  width: 70px; height: 14px;
  background: linear-gradient(180deg,#1e2448,#13183a);
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(6,255,255,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.cam3d-arm {
  width: 10px; height: 55px;
  background: linear-gradient(90deg,#151c38,#1d2548);
  border-radius: 0 0 4px 4px;
  border: 1px solid rgba(6,255,255,0.12);
  border-top: none;
  margin: 0 auto;
}
.cam3d-ball-joint {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #2a3560, #0d1228);
  border: 2px solid rgba(6,255,255,0.3);
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(6,255,255,0.2), inset 0 2px 4px rgba(255,255,255,0.08);
}

/* ===== CAMERA HEAD (rotates) ===== */
.cam3d-head {
  position: relative;
  margin-top: -4px;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* ===== CAMERA BODY ===== */
.cam3d-body {
  width: 190px; height: 74px;
  background: linear-gradient(160deg, #1c2248 0%, #0d1128 100%);
  border-radius: 14px 42px 42px 14px;
  border: 1px solid rgba(6,255,255,0.22);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.7),
    0 0 30px rgba(6,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  padding: 0 14px 0 14px;
  gap: 10px;
  position: relative;
  transform-style: preserve-3d;
}

/* Top ridge / detail line */
.cam3d-ridge {
  position: absolute;
  top: 10px; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,255,255,0.15), transparent);
}

/* ===== LENS HOUSING ===== */
.cam3d-lens-housing {
  flex-shrink: 0;
}
.cam3d-lens-ring {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.outer-ring {
  width: 68px; height: 68px;
  background: radial-gradient(ellipse at 30% 30%, #1e2850, #05091a);
  border: 2px solid rgba(6,255,255,0.3);
  box-shadow: 0 0 20px rgba(6,255,255,0.15), inset 0 0 15px rgba(0,0,0,0.6);
}
.mid-ring {
  width: 52px; height: 52px;
  background: radial-gradient(ellipse at 30% 30%, #18213a, #04070f);
  border: 1px solid rgba(6,255,255,0.2);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
.inner-ring {
  width: 38px; height: 38px;
  background: radial-gradient(ellipse at 35% 35%, #1a2d60, #030812);
  border: 1px solid rgba(100,160,255,0.25);
  box-shadow: 0 0 10px rgba(60,100,255,0.2), inset 0 0 15px rgba(0,0,0,0.9);
}
.cam3d-iris {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #2a50c0, #010510);
  border: 1px solid rgba(80,130,255,0.3);
  position: relative;
  animation: irisBreath 4s ease-in-out infinite;
}
@keyframes irisBreath {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(0.85); }
}
.cam3d-pupil {
  position: absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #0820a0, #000);
  box-shadow: 0 0 8px rgba(0,50,255,0.5);
}
.cam3d-reflection {
  position: absolute;
  top: 5px; left: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  filter: blur(1px);
}

/* ===== IR LED RING ===== */
.cam3d-ir-ring {
  position: absolute;
  left: 11px; top:50%;
  transform:translateY(-50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  pointer-events: none;
}
.cam3d-ir-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,60,60,0.5);
  box-shadow: 0 0 6px rgba(255,60,60,0.8);
  animation: irPulse 2s ease-in-out infinite;
}
.cam3d-ir-dot:nth-child(1) { top:2px; left:50%; transform:translateX(-50%); animation-delay:0s; }
.cam3d-ir-dot:nth-child(2) { top:10px; right:8px; animation-delay:0.25s; }
.cam3d-ir-dot:nth-child(3) { top:50%; right:2px; transform:translateY(-50%); animation-delay:0.5s; }
.cam3d-ir-dot:nth-child(4) { bottom:10px; right:8px; animation-delay:0.75s; }
.cam3d-ir-dot:nth-child(5) { bottom:2px; left:50%; transform:translateX(-50%); animation-delay:1s; }
.cam3d-ir-dot:nth-child(6) { bottom:10px; left:8px; animation-delay:1.25s; }
.cam3d-ir-dot:nth-child(7) { top:50%; left:2px; transform:translateY(-50%); animation-delay:1.5s; }
.cam3d-ir-dot:nth-child(8) { top:10px; left:8px; animation-delay:1.75s; }
@keyframes irPulse {
  0%,100% { opacity:0.4; }
  50%      { opacity:1; box-shadow:0 0 10px rgba(255,60,60,1); }
}

/* ===== STATUS (REC LED) ===== */
.cam3d-status {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cam3d-rec-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff2222;
  box-shadow: 0 0 10px rgba(255,30,30,0.9);
  animation: recBlink 1s step-end infinite;
}
@keyframes recBlink { 0%,100%{opacity:1;} 50%{opacity:0.15;} }
.cam3d-status-text {
  font-size: 0.45rem;
  font-weight: 700;
  color: rgba(255,80,80,0.8);
  letter-spacing: 0.05em;
}

/* ===== FOV CONE ===== */
.cam3d-fov {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 110px solid rgba(6,255,255,0.05);
  filter: blur(4px);
  pointer-events: none;
  transition: all 0.4s;
}

/* ===== SCAN ZONE ARC ===== */
.cam3d-scan-zone {
  position: absolute;
  bottom: 14px;
  width: 200px; height: 28px;
  overflow: hidden;
}
.scan-arc {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 100px;
  border: 1px dashed rgba(6,255,255,0.15);
  border-radius: 50%;
  border-bottom: none;
}
.scan-pointer {
  position: absolute;
  bottom: 0; left: 50%;
  width: 2px; height: 24px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  transform-origin: bottom center;
  box-shadow: 0 0 8px rgba(6,255,255,0.5);
  animation: scanPointerAnim 5s ease-in-out infinite;
}
@keyframes scanPointerAnim {
  0%   { transform:rotate(-70deg); }
  50%  { transform:rotate(70deg); }
  100% { transform:rotate(-70deg); }
}

/* ===== LIVE BADGE ===== */
.cam3d-live-badge {
  position: absolute;
  bottom: 44px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(200,0,0,0.15);
  border: 1px solid rgba(255,50,50,0.4);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ff6666;
  letter-spacing: 0.08em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.cam3d-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 8px rgba(255,50,50,0.9);
  animation: recBlink 1s step-end infinite;
  flex-shrink: 0;
}

/* ===== GROUND GLOW ===== */
.cam3d-ground-glow {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 20px;
  background: radial-gradient(ellipse, rgba(6,255,255,0.2) 0%, transparent 70%);
  filter: blur(6px);
}

/* ==============================================
   PHONE CONTROLLER
   ============================================== */
.phone-controller {
  flex-shrink: 0;
}
.phone-frame {
  width: 148px;
  background: linear-gradient(160deg, #1a1f38, #0b0e1e);
  border-radius: 24px;
  border: 1.5px solid rgba(6,255,255,0.25);
  padding: 14px 10px 10px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 30px rgba(6,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.07);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-notch {
  width: 40px; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin: 0 auto 4px;
}
.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Camera feed preview */
.phone-feed {
  width: 100%;
  height: 68px;
  background: radial-gradient(ellipse, rgba(6,40,80,0.9) 0%, rgba(3,8,18,0.95) 100%);
  border-radius: 8px;
  border: 1px solid rgba(6,255,255,0.2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-feed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 5px,
    rgba(6,255,255,0.02) 5px, rgba(6,255,255,0.02) 6px
  );
}
.phone-feed-grid { position: absolute; inset: 0; }
.pfg-line {
  position: absolute;
  background: rgba(6,255,255,0.1);
}
.pfg-h1 { height:1px; top:33%; left:0; right:0; }
.pfg-h2 { height:1px; top:67%; left:0; right:0; }
.pfg-v1 { width:1px; left:33%; top:0; bottom:0; }
.pfg-v2 { width:1px; left:67%; top:0; bottom:0; }
.phone-feed-corner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--cyan);
  border-style: solid;
  opacity: 0.7;
}
.tl { top:4px; left:4px;  border-width:1.5px 0 0 1.5px; }
.tr { top:4px; right:4px; border-width:1.5px 1.5px 0 0; }
.bl { bottom:4px; left:4px;  border-width:0 0 1.5px 1.5px; }
.br { bottom:4px; right:4px; border-width:0 1.5px 1.5px 0; }
.phone-feed-label {
  position: absolute;
  bottom: 3px; left: 6px;
  font-size: 0.46rem;
  color: rgba(6,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.phone-feed-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6,255,255,0.4), transparent);
  animation: scanline 3s linear infinite;
}
.pfg-crosshair {
  position: absolute;
  font-size: 1rem;
  color: rgba(6,255,255,0.5);
  font-weight: 300;
  line-height: 1;
  animation: crosshairPulse 2s ease-in-out infinite;
}
@keyframes crosshairPulse { 0%,100%{opacity:0.3;} 50%{opacity:0.8;} }

/* PTZ Label */
.phone-ptz-label {
  text-align: center;
  font-size: 0.55rem;
  color: rgba(6,255,255,0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

/* D-Pad */
.phone-dpad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px;
  width: 92px;
  margin: 0 auto;
}
.dpad-btn {
  width: 28px; height: 28px;
  background: rgba(6,255,255,0.07);
  border: 1px solid rgba(6,255,255,0.2);
  border-radius: 7px;
  color: var(--cyan);
  font-size: 0.6rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dpad-btn:active, .dpad-btn.pressed {
  background: rgba(6,255,255,0.2);
  border-color: var(--cyan);
  transform: scale(0.92);
  box-shadow: 0 0 10px rgba(6,255,255,0.3);
}
.dpad-up    { grid-column:2; grid-row:1; }
.dpad-left  { grid-column:1; grid-row:2; }
.dpad-center{ grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:center; }
.dpad-right { grid-column:3; grid-row:2; }
.dpad-down  { grid-column:2; grid-row:3; }
.dpad-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(6,255,255,0.4);
  box-shadow: 0 0 6px rgba(6,255,255,0.5);
}

/* Action row (zoom + home) */
.phone-action-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.phone-action-btn {
  flex: 1;
  height: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.52rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.phone-action-btn:active {
  background: rgba(6,255,255,0.1);
  border-color: rgba(6,255,255,0.3);
  transform: scale(0.94);
}
.home-btn { color: var(--cyan); }

/* Auto scan toggle row */
.phone-scan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px;
}
.phone-toggle-label {
  font-size: 0.52rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.phone-toggle-wrap {
  width: 30px; height: 16px;
  background: rgba(6,255,255,0.3);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid rgba(6,255,255,0.3);
}
.phone-toggle-wrap.off { background: rgba(255,255,255,0.08); }
.phone-toggle-knob {
  position: absolute;
  top: 2px; left: 16px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(6,255,255,0.7);
  transition: all 0.3s;
}
.phone-toggle-wrap.off .phone-toggle-knob {
  left: 2px;
  background: rgba(255,255,255,0.4);
  box-shadow: none;
}
.phone-scan-status {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--cyan);
  min-width: 20px;
}
.phone-toggle-wrap.off + .phone-scan-status { color: var(--text-secondary); }

/* Phone bottom bar */
.phone-home-btn-bar {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}
.phone-home-ind {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  #cctv-scroll-section .sds-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  #cctv-scroll-section .sds-device {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .cam3d-scene { transform: scale(0.8); }
}

/* ============================================================
   TRUE CSS 3D CAMERA BOX (6 faces + lens barrel)
   Width=200px  Height=65px  Depth=65px
   ============================================================ */

/* Hide old flat styles */
.cam3d-body, .cam3d-lens-housing, .cam3d-ir-ring,
.cam3d-ridge, .cam3d-status { display:none !important; }

/* Pivot wrapper keeps preserve-3d chain */
.cam3d-pivot {
  transform-style: preserve-3d;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* cam3d-head is the rotate target — JS sets transform here */
.cam3d-head {
  position: relative;
  transform-style: preserve-3d;
  /* default angled view so depth is visible */
  transform: rotateX(-12deg) rotateY(25deg);
  transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}

/* === 6-FACE BOX === */
.cam3d-box {
  width:  200px;
  height: 65px;
  position: relative;
  transform-style: preserve-3d;
}

.camf {
  position: absolute;
  backface-visibility: hidden;
}

/* ---- FRONT (facing camera, shows lens area) ---- */
/* Box depth = 65px, so front translateZ(+32.5px) */
.camf-front {
  width: 200px; height: 65px;
  top:0; left:0;
  transform: translateZ(32.5px);
  background: linear-gradient(160deg, #1c2550 0%, #0e1230 100%);
  border: 1px solid rgba(6,255,255,0.3);
  border-radius: 4px 18px 18px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 8px;
  overflow: hidden;
}
.camf-front::after {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

/* ---- BACK ---- */
.camf-back {
  width: 200px; height: 65px;
  top:0; left:0;
  transform: rotateY(180deg) translateZ(32.5px);
  background: linear-gradient(160deg, #111830, #090d1a);
  border: 1px solid rgba(6,255,255,0.08);
  border-radius: 4px 14px 14px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px;
}
.camf-back-vent {
  height: 4px;
  background: rgba(6,255,255,0.06);
  border-radius: 2px;
}

/* ---- TOP ---- */
/* rotateX(-90deg) translateZ(height/2=32.5px)  height of face = depth = 65px */
.camf-top {
  width: 200px; height: 65px;
  top: 0; left: 0;
  transform: rotateX(-90deg) translateZ(32.5px);
  background: linear-gradient(180deg, #1e2650 0%, #141a38 100%);
  border: 1px solid rgba(6,255,255,0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
}
.camf-top-stripe {
  flex: 1; height: 2px;
  background: rgba(6,255,255,0.12);
  border-radius: 1px;
}

/* ---- BOTTOM ---- */
.camf-bottom {
  width: 200px; height: 65px;
  top: 0; left: 0;
  transform: rotateX(90deg) translateZ(32.5px);
  background: linear-gradient(180deg, #080c1a, #060810);
  border: 1px solid rgba(0,0,0,0.5);
}

/* ---- RIGHT SIDE (rear end of camera) ---- */
/* rotateY(90deg) translateZ(width/2 = 100px) + face width = depth = 65px */
.camf-right {
  width: 65px; height: 65px;
  top:0; left: 135px;  /* left = box.width - face.width = 200-65 = 135 */
  transform: rotateY(90deg) translateZ(100px);
  background: radial-gradient(ellipse at center, #1a2040 0%, #0a0e1e 100%);
  border: 1px solid rgba(6,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.camf-side-port {
  width: 20px; height: 8px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(6,255,255,0.15);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

/* ---- LEFT SIDE (front end — lens protrudes from here) ---- */
.camf-left {
  width: 65px; height: 65px;
  top:0; left: 135px;
  transform: rotateY(-90deg) translateZ(100px);
  background: radial-gradient(ellipse at 40% 40%, #1e2860 0%, #0a0e22 100%);
  border: 1px solid rgba(6,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.camf-side-logo {
  font-size: 0.55rem;
  font-weight: 800;
  color: rgba(6,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotateZ(90deg);
}

/* ==== IR DOTS on front face ==== */
.camf-lens-area {
  position: relative;
  width: 80px; height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.camf-ir-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,60,60,0.6);
  box-shadow: 0 0 6px rgba(255,60,60,0.9);
  animation: irPulse 1.8s ease-in-out infinite;
}
.camf-ir-dot:nth-child(2) { animation-delay:0.2s; }
.camf-ir-dot:nth-child(3) { animation-delay:0.4s; }
.camf-ir-dot:nth-child(4) { animation-delay:0.6s; }
.camf-ir-dot:nth-child(5) { animation-delay:0.8s; }
.camf-ir-dot:nth-child(6) { animation-delay:1.0s; }
.camf-ir-dot:nth-child(7) { animation-delay:1.2s; }
.camf-ir-dot:nth-child(8) { animation-delay:1.4s; }

/* Status area on front right */
.camf-status-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.camf-rec-txt {
  font-size: 0.42rem;
  font-weight: 700;
  color: rgba(255,80,80,0.8);
  letter-spacing: 0.08em;
}
.camf-model {
  font-size: 0.38rem;
  color: rgba(6,255,255,0.4);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ==== LENS BARREL (protrudes in 3D from the camera front) ==== */
/* Needs to be positioned at the front face in 3D space
   and then extend further forward on Z axis */
.cam3d-barrel {
  position: absolute;
  /* Front face is at translateZ(32.5px), barrel center is at ~Y:32px left:20px */
  top: 2px;
  left: 12px;
  /* Push barrel in front of the box face */
  transform: translateZ(32.5px);
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Each ring disc = a slice of the cylinder, pushed deeper on Z */
.barrel-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  border: 2px solid rgba(6,255,255,0.35);
}
.br1 {
  width: 58px; height: 58px;
  background: radial-gradient(ellipse at 35% 35%, #1a2248, #06091a);
  transform: translateY(-50%) translateZ(0px);
  box-shadow: 0 0 20px rgba(6,255,255,0.12);
}
.br2 {
  width: 52px; height: 52px;
  background: radial-gradient(ellipse at 35% 35%, #141c3a, #050710);
  transform: translateY(-50%) translateZ(10px);
  border-color: rgba(6,255,255,0.25);
}
.br3 {
  width: 46px; height: 46px;
  background: radial-gradient(ellipse at 35% 35%, #101830, #03050e);
  transform: translateY(-50%) translateZ(20px);
  border-color: rgba(6,255,255,0.2);
}

/* Front disc of barrel — the actual glass lens */
.barrel-front {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%) translateZ(30px);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, #1e3a80, #030814);
  border: 2px solid rgba(60,120,255,0.4);
  box-shadow:
    0 0 20px rgba(6,255,255,0.15),
    inset 0 0 20px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barrel-lens-outer {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #0f2060, #020510);
  border: 1px solid rgba(80,130,255,0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
}
.barrel-lens-mid {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #162880, #010410);
  border: 1px solid rgba(100,160,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.barrel-lens-inner {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 35%, #2040c0, #000212);
  border: 1px solid rgba(120,180,255,0.15);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.barrel-iris {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, #0a18a0, #000108);
  animation: irisBreath 4s ease-in-out infinite;
  position: relative;
}
.barrel-pupil {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #000;
}
.barrel-glint {
  position: absolute;
  top: 3px; left: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  filter: blur(0.5px);
}

/* Override old FOV to come from barrel */
.cam3d-head .cam3d-fov {
  position: absolute;
  bottom: -60px;
  left: 38px;
  width: 0; height: 0;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  border-top: 100px solid rgba(6,255,255,0.06);
  filter: blur(6px);
  transform-origin: top center;
  pointer-events: none;
  border-radius: 0;
}




/* ===========================================================
   CX — CLEAN CCTV BULLET CAMERA  (cx- prefix = no conflicts)
   =========================================================== */

/* Scene wrapper */
.cam3d-scene {
  position: relative;
  width: 260px;
  height: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ── MOUNT ── */
.cx-mount {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.cx-plate {
  width: 72px; height: 12px;
  background: linear-gradient(180deg, #252e5c 0%, #161d3e 100%);
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(6,255,255,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
  position: relative;
}
.cx-plate::after {
  content: '';
  position: absolute;
  left: 50%; top: 3px;
  transform: translateX(-50%);
  width: 36px; height: 3px;
  background: rgba(6,255,255,0.14);
  border-radius: 2px;
}
.cx-arm {
  width: 7px; height: 52px;
  background: linear-gradient(90deg, #1b2348, #222c58, #181f40);
  border: 1px solid rgba(6,255,255,0.14);
  border-top: none; border-bottom: none;
}
.cx-joint {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 32%, #2e3c74, #0c1128);
  border: 2px solid rgba(6,255,255,0.38);
  box-shadow:
    0 0 14px rgba(6,255,255,0.22),
    inset 0 2px 4px rgba(255,255,255,0.07);
}

/* ── CAMERA HEAD (JS rotates this) ── */
.cx-head {
  display: flex;
  align-items: center;
  margin-top: -4px;
  transition: transform 0.08s linear;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.7))
          drop-shadow(0 0 18px rgba(6,255,255,0.1));
}

/* ── BODY ── */
.cx-body {
  display: flex;
  align-items: stretch;
  position: relative;
}
.cx-visor {
  position: absolute;
  top: -15px; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, #1a2248 0%, #10193a 100%);
  border: 1px solid rgba(6,255,255,0.18);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
}
.cx-visor::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,255,255,0.18), transparent);
}
.cx-box {
  width: 180px; height: 66px;
  background:
    linear-gradient(160deg, #1b2450 0%, #0f1635 55%, #080d1e 100%);
  border-radius: 8px 0 0 8px;
  border: 1px solid rgba(6,255,255,0.16);
  border-right: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 8px 30px rgba(0,0,0,0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px 8px 12px;
  overflow: hidden;
}
/* Subtle sheen */
.cx-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-radius: 8px 0 0 0;
  pointer-events: none;
}
.cx-box-top-line {
  position: absolute;
  top: 10px; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6,255,255,0.1), transparent);
}
.cx-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cx-brand {
  font-size: 0.44rem;
  font-weight: 700;
  color: rgba(6,255,255,0.38);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cx-rec {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cx-rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff2828;
  box-shadow: 0 0 8px rgba(255,30,30,0.95);
  animation: cxRecBlink 1s step-end infinite;
}
@keyframes cxRecBlink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0.2; }
}
.cx-rec-label {
  font-size: 0.4rem; font-weight: 700;
  color: rgba(255,80,80,0.85);
  letter-spacing: 0.07em;
}
.cx-vents {
  display: flex;
  gap: 5px;
  align-self: flex-end;
}
.cx-vent {
  width: 20px; height: 2px;
  background: rgba(0,0,0,0.55);
  border-radius: 1px;
  border: 1px solid rgba(6,255,255,0.07);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

/* ── LENS ASSEMBLY ── */
.cx-lens-asm {
  position: relative;
  width: 80px; height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -1px;
}

/* IR LED ring using CSS custom property --a for angle */
.cx-ir {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #12193a 0%, #080d1e 70%);
  border: 2px solid rgba(6,255,255,0.2);
  box-shadow:
    0 0 0 3px rgba(6,255,255,0.05),
    inset 0 0 20px rgba(0,0,0,0.6);
}
.cx-ir-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(220,50,50,0.65);
  box-shadow: 0 0 7px rgba(255,40,40,0.95);
  top: 50%; left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(-32px);
  animation: cxIrPulse 2s ease-in-out infinite;
  animation-delay: calc(var(--a) / 360deg * -2s);
}
@keyframes cxIrPulse {
  0%,100% { opacity: 0.5; box-shadow: 0 0 5px rgba(255,40,40,0.7); }
  50%      { opacity: 1.0; box-shadow: 0 0 12px rgba(255,40,40,1); }
}

/* Main lens circle */
.cx-lens {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 32% 30%, #1e3c98, #020918);
  border: 2px solid rgba(60,120,255,0.45);
  box-shadow:
    0 0 22px rgba(6,100,255,0.25),
    0 0 8px rgba(6,255,255,0.12),
    inset 0 0 24px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
/* Glass sheen */
.cx-lens::before {
  content: '';
  position: absolute;
  top: -10%; left: 8%;
  width: 45%; height: 38%;
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  filter: blur(3px);
  transform: rotate(-30deg);
}
.cx-lens-mid {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 33%, #132a80, #010510);
  border: 1px solid rgba(80,140,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cx-lens-inner {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 36%, #0c1e70, #000310);
  border: 1px solid rgba(100,160,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cxIrisBreath 4s ease-in-out infinite;
}
@keyframes cxIrisBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}
.cx-pupil {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 40%, #040d50, #000);
  box-shadow: 0 0 10px rgba(0,30,200,0.45);
}
/* Lens glint */
.cx-glint {
  position: absolute;
  top: 10px; left: 13px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  filter: blur(1.5px);
  pointer-events: none;
}

/* FOV light cone */
.cx-fov {
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 36px solid transparent;
  border-bottom: 36px solid transparent;
  border-left: 80px solid rgba(6,255,255,0.07);
  filter: blur(5px);
  pointer-events: none;
}