@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════ TOKENS ═══════════ */
:root {
  --bg: #000;
  --bg2: #05050b;
  --bg3: #0a0a14;
  --white: #fff;
  --text: rgba(255,255,255,.65);
  --text-dim: rgba(255,255,255,.35);
  
  --pink: #FA036E;
  --pink-dim: rgba(250,3,110,.12);
  --pink-glow: rgba(250,3,110,.4);
  
  --purple: #4F2169;
  --purple-l: #7a3da0;
  --purple-glow: rgba(79,33,105,.3);
  
  --green: #61CE70;
  --green-dim: rgba(97,206,112,.15);
  
  --border: rgba(255,255,255,.07);
  --border-hover: rgba(250,3,110,.25);
  
  --font-d: 'Plus Jakarta Sans', sans-serif;
  --font-b: 'Inter', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --r: 20px;
  --radius: 16px;
  --card-bg: #080812;
}

[data-theme="light"] {
  --bg: #f8f9fa;
  --bg2: #ffffff;
  --bg3: #f1f3f5;
  --white: #0a0a12;
  --text: rgba(10,10,18,.75);
  --text-dim: rgba(10,10,18,.45);
  --border: rgba(0,0,0,.08);
  --border-hover: rgba(250,3,110,.4);
  --card-bg: #ffffff;
}

/* ═══════════ RESET ═══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:auto;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
::selection{background:var(--pink-dim);color:var(--pink)}
img{max-width:100%;display:block;user-select:none}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}

/* Smooth transitions for key interactive cards and links */
a, button, .nav, .svc-card, .test-card, .contact-form-wrap, input, textarea {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease), box-shadow 0.4s ease;
}

/* ═══════════ CURSOR (disabled — using native cursor) ═══════════ */
.cursor-dot,.cursor-ring{display:none!important}

/* ═══════════ LAYOUT ═══════════ */
.container{width:90%;max-width:1300px;margin:0 auto}
.section{position:relative;padding:9rem 0;overflow:hidden;z-index:2}
.section-dark{background:var(--bg2)}

/* ═══════════ TYPOGRAPHY ═══════════ */
.label-tag{display:inline-block;font-family:var(--font-d);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);margin-bottom:1.2rem}
.section-title{font-family:var(--font-d);font-size:clamp(2.4rem,5vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:1.5rem}
.section-desc{font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--text);line-height:1.8;font-weight:300;margin-bottom:1.5rem;max-width:600px}
.center-desc{margin-left:auto;margin-right:auto;text-align:center}
.accent-text{background:linear-gradient(135deg,var(--pink),var(--purple-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-header{text-align:center;margin-bottom:5rem}

/* ═══════════ REVEAL ANIMATIONS ═══════════ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.stagger-children .reveal:nth-child(1){transition-delay:.05s}
.stagger-children .reveal:nth-child(2){transition-delay:.1s}
.stagger-children .reveal:nth-child(3){transition-delay:.15s}
.stagger-children .reveal:nth-child(4){transition-delay:.2s}
.stagger-children .reveal:hover{transform:translateY(-5px)}

/* ═══════════ BUTTONS ═══════════ */
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;padding:1.1rem 2.4rem;background:linear-gradient(135deg,var(--pink),var(--purple-l));color:#fff;font-family:var(--font-d);font-weight:700;font-size:.95rem;border-radius:60px;transition:box-shadow .3s,transform .3s var(--ease);border:none}
.btn-primary:hover{box-shadow:0 0 30px var(--pink-glow),0 4px 20px rgba(0,0,0,.3);transform:translateY(-2px)}
.btn-primary svg{transition:transform .3s var(--ease)}
.btn-primary:hover svg{transform:translate(3px,-3px)}
.btn-outline{display:inline-flex;align-items:center;padding:1.1rem 2.4rem;border:1.5px solid rgba(250,3,110,.4);color:var(--white);font-family:var(--font-d);font-weight:600;font-size:.95rem;border-radius:60px;transition:all .3s}
.btn-outline:hover{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 20px var(--pink-glow)}
.btn-full{width:100%;justify-content:center}

/* ═══════════ NAVIGATION ═══════════ */
.nav {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  max-width: 1200px;
  z-index: 1000;
  padding: .75rem 1.5rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.4s var(--ease);
}

[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.6);
}

.nav.scrolled {
  top: 0.75rem;
  background: rgba(5, 5, 10, 0.85);
  border-color: rgba(250, 3, 110, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(250, 3, 110, 0.05);
}

[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(250, 3, 110, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 0 15px rgba(250, 3, 110, 0.05);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

[data-theme="light"] .nav-logo img {
  content: url('assets/dw-logo-dark.svg');
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  list-style: none;
}

.nav-link {
  font-family: var(--font-d);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
  transition: color 0.3s;
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: var(--white);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pink);
  transition: width 0.3s var(--ease);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-cta {
  padding: 0.5rem 1.25rem !important;
  border: 1px solid rgba(250, 3, 110, 0.4);
  border-radius: 100px;
  color: var(--white) !important;
  transition: all 0.3s !important;
}

.nav-cta::after {
  display: none !important;
}

.nav-cta:hover {
  background: var(--pink);
  border-color: var(--pink) !important;
  box-shadow: 0 0 15px var(--pink-glow);
  color: #fff !important;
}

/* Theme Toggle Button */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(255,255,255,0.02);
  transition: all 0.3s;
}

.theme-toggle:hover {
  border-color: var(--pink);
  box-shadow: 0 0 10px var(--pink-glow);
  background: var(--pink-dim);
}

.theme-toggle svg {
  transition: transform 0.4s var(--ease);
}

.theme-toggle:hover svg {
  transform: rotate(30deg);
}

/* In Dark mode by default, hide moon-icon, show sun-icon */
.theme-toggle .moon-icon { display: none; }
.theme-toggle .sun-icon { display: block; }

/* In Light mode, show moon-icon, hide sun-icon */
[data-theme="light"] .theme-toggle .sun-icon { display: none; }
[data-theme="light"] .theme-toggle .moon-icon { display: block; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  z-index: 1001;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: all 0.3s;
}

.nav-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: var(--bg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  transition: right 0.5s var(--ease);
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu .nav-link {
  font-size: 2rem;
  font-family: var(--font-d);
  font-weight: 700;
}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:140px 0 100px;z-index:1}
.hero-blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.45;animation:blobFloat 10s ease-in-out infinite}
.b1{width:600px;height:600px;background:var(--pink);top:-15%;left:-10%}
.b2{width:500px;height:500px;background:var(--purple);bottom:-10%;right:-5%;animation-delay:-3s}
.b3{width:400px;height:400px;background:var(--purple-l);top:30%;right:15%;animation-delay:-6s;opacity:.25}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-40px) scale(1.08)}
  66%{transform:translate(-30px,30px) scale(.92)}
}
.hero-grid-bg{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at center, black, transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center, black, transparent 70%)}
.hero-noise{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none}
.hero-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;position:relative;z-index:5}
.hero-left{max-width:720px}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.4rem;background:rgba(250,3,110,.08);border:1px solid rgba(250,3,110,.2);border-radius:60px;margin-bottom:2.2rem;font-family:var(--font-d);font-size:.8rem;font-weight:500;letter-spacing:.02em;color:#fff}
.hero-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--pink-glow)}50%{box-shadow:0 0 0 8px transparent}}
.hero-title{font-family:var(--font-d);font-size:clamp(2.8rem,6.8vw,6rem);font-weight:900;letter-spacing:-.04em;line-height:.95;margin-bottom:2rem}
.h-line{display:block;overflow:hidden}
.h-word{display:inline-block;animation:slideUp .8s var(--ease) both}
.h-line:nth-child(1) .h-word{animation-delay:.15s}
.h-line:nth-child(2) .h-word{animation-delay:.3s}
.h-line:nth-child(3) .h-word{animation-delay:.45s}
.h-accent{background:linear-gradient(135deg,var(--pink),var(--purple-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--text);margin-bottom:2.5rem;line-height:1.8;font-weight:300}
.hero-actions{display:flex;gap:1.2rem;flex-wrap:wrap}

/* Hero Features List */
.hero-features-list {
  display: flex;
  gap: 2rem;
  margin-top: 3.5rem;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.h-feat-dot {
  width: 6px;
  height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--pink);
}

.hero-feature-item strong {
  display: block;
  font-family: var(--font-d);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
}

.hero-feature-item span {
  font-size: 0.75rem;
  color: var(--text);
}

/* Hero Right: 3D Showroom Array */
.hero-right {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero Right: Massive Borderless 3D Display Canvas */
/* Hero Right: 3D Virtual Signage Showroom Stand */
/* Hero Right: Signage Interactive Console */
.signage-console {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(10, 10, 20, 0.6);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: rotateY(-10deg) rotateX(4deg);
  transition: transform 0.5s var(--ease);
}

.signage-console:hover {
  transform: rotateY(-5deg) rotateX(2deg);
  border-color: rgba(250, 3, 110, 0.25);
}

/* Category Tabs */
.console-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.console-tab {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-d);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s;
}

.console-tab.active {
  background: rgba(250, 3, 110, 0.08);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 15px var(--pink-glow);
}

/* Monitor Frame */
.console-monitor {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #000;
  border-radius: 12px;
  border: 4px solid #1a1a24;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
}

.monitor-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.monitor-glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%), linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.2) 50%);
  background-size: 100% 100%, 100% 4px;
  z-index: 10;
  pointer-events: none;
}

/* Widget Overlays */
.monitor-widget {
  position: absolute;
  z-index: 15;
  font-family: monospace;
  font-size: 0.65rem;
  color: var(--green);
  text-shadow: 0 0 5px rgba(97,206,112,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.monitor-widget.visible {
  opacity: 1;
}

.widget-clock {
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(97,206,112,0.2);
}

.widget-news {
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.85);
  border-top: 1px solid rgba(97,206,112,0.2);
  padding: 4px 1rem;
  white-space: nowrap;
  overflow: hidden;
}

.widget-news span {
  display: inline-block;
  animation: newsScroll 15s linear infinite;
}

@keyframes newsScroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.widget-pixelgrid {
  inset: 0;
  background: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Screens */
.monitor-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  overflow: hidden;
}

.monitor-screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* LED Screen content */
.led-art-bg {
  position: absolute;
  inset: 0;
  background: #030307;
}

.led-art-orb {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.65;
  animation: orbFloat 8s ease-in-out infinite alternate;
}

.o-1 { background: var(--pink); top: -10%; left: -10%; }
.o-2 { background: var(--purple); bottom: -10%; right: -10%; animation-delay: -4s; }

@keyframes orbFloat {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(30px, 20px) scale(1.15); }
}

.screen-hud-info {
  position: absolute;
  bottom: 2rem;
  left: 1.5rem;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.screen-hud-info span {
  font-family: var(--font-d);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pink);
  letter-spacing: 0.1em;
}

.screen-hud-info strong {
  font-family: var(--font-d);
  font-size: 0.95rem;
  color: #fff;
  margin-top: 2px;
}

/* LCD Video Wall Content */
#ms-lcd {
  background: #05050a;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.lcd-fids-header {
  font-family: var(--font-d);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.lcd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: monospace;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.7);
}

.lcd-table th {
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 4px;
  color: var(--text-dim);
}

.lcd-table td {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.c-green { color: var(--green); font-weight: bold; }
.c-orange { color: #f59e0b; font-weight: bold; }

/* Kiosk content */
#ms-kiosk {
  background: #030305;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kiosk-radar-ring {
  position: relative;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(97,206,112,0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.radar-ping-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--green);
  border-radius: 50%;
  animation: pingPulse 2s infinite;
}

@keyframes pingPulse {
  0% { width: 10px; height: 10px; opacity: 1; }
  100% { width: 50px; height: 50px; opacity: 0; }
}

.kiosk-map-overlay {
  margin-top: 1rem;
  text-align: center;
}

.kiosk-map-overlay span {
  font-family: var(--font-d);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}

.kiosk-map-overlay strong {
  display: block;
  font-family: var(--font-d);
  font-size: 0.8rem;
  color: #fff;
  margin-top: 2px;
}

/* Widgets bottom panel */
.console-widgets-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.widget-panel-label {
  display: block;
  font-family: var(--font-d);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.console-widget-btns {
  display: flex;
  gap: 0.5rem;
}

.widget-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-d);
  font-size: 0.7rem;
  font-weight: 600;
  transition: all 0.3s;
}

.widget-btn.active {
  background: rgba(97,206,112,0.08);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 12px rgba(97,206,112,0.15);
}

.detail-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.detail-tag {
  align-self: flex-start;
  font-family: var(--font-d);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}

.detail-card h4 {
  font-family: var(--font-d);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.detail-card p {
  font-size: 0.75rem;
  color: var(--text);
  line-height: 1.4;
  font-weight: 300;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  z-index: 5;
}

.hero-scroll span {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg,var(--pink),transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,100% {
    opacity: .3;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.3);
  }
}

/* ═══════════ CLIENTS ═══════════ */
.clients-section{padding:3.5rem 0 1.5rem;background:#030307;border-bottom:1px solid var(--border)}
.clients-label{text-align:center;font-family:var(--font-d);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.8rem}
.clients-track-wrap{overflow:hidden;width:100%;position:relative;mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent)}
.clients-track{display:flex;animation:marquee 30s linear infinite;width:max-content}
.client-logo{font-family:var(--font-d);font-size:1.3rem;font-weight:800;color:rgba(255,255,255,.3);padding:0 2.5rem;display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.client-logo span{color:var(--pink);opacity:.7}

/* ═══════════ ABOUT ═══════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:6.5rem;align-items:center}
.stat-row{display:flex;gap:3rem;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.stat{flex:1}
.stat-num{font-family:var(--font-d);font-size:3rem;font-weight:800;color:var(--pink);display:block;line-height:1}
.stat-lbl{font-size:.85rem;color:var(--text);margin-top:.4rem;display:block}
.about-img-stack{position:relative;aspect-ratio:4/5}
.about-img-main{position:absolute;top:0;right:0;width:82%;height:78%;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.about-img-main img{width:100%;height:100%;object-fit:cover}
.about-img-float{position:absolute;bottom:5%;left:0;width:52%;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:4px solid var(--bg);box-shadow:0 20px 40px rgba(0,0,0,.6);z-index:2}
.about-img-float img{width:100%;height:100%;object-fit:cover}
.about-orb{position:absolute;width:240px;height:240px;border-radius:50%;background:var(--pink);filter:blur(90px);opacity:.2;top:40%;left:45%;z-index:0}

/* ═══════════ PORTFOLIO ═══════════ */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pf-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;display:block;border:1px solid var(--border)}
.pf-card.pf-wide{grid-column:span 2;aspect-ratio:21/9}
.pf-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .7s}
.pf-card:hover img{transform:scale(1.06);filter:brightness(.35)}
.pf-overlay{
  position:absolute;
  inset:0;
  padding:2.5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .4s,transform .4s var(--ease);
  background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 50%,transparent 100%);
  color:#ffffff !important;
}
.pf-card:hover .pf-overlay{opacity:1;transform:translateY(0)}
.pf-cat{font-family:var(--font-d);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);margin-bottom:.5rem}
.pf-overlay h3{
  font-family:var(--font-d);
  font-size:clamp(1.3rem,2vw,1.8rem);
  font-weight:700;
  margin-bottom:.4rem;
  line-height:1.2;
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.pf-overlay p{
  font-size:.92rem;
  color:rgba(255,255,255,.9) !important;
  max-width:550px;
  font-weight:400;
  line-height:1.6;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}

[data-theme="light"] .pf-overlay h3 {
  color: #ffffff !important;
}
[data-theme="light"] .pf-overlay p {
  color: rgba(255,255,255,.9) !important;
}

/* ═══════════ SERVICES ═══════════ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem}
.svc-card{position:relative;background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem;transition:all .4s var(--ease);overflow:hidden}
.svc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(250,3,110,.05),transparent 50%);opacity:0;transition:opacity .4s}
.svc-card:hover{border-color:rgba(250,3,110,.25);transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.svc-card:hover::before{opacity:1}
.svc-num{position:absolute;top:1.5rem;right:1.5rem;font-family:var(--font-d);font-size:3.5rem;font-weight:900;color:rgba(250,3,110,.04);line-height:1}
.svc-icon{width:50px;height:50px;background:var(--pink-dim);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.8rem;border:1px solid rgba(250,3,110,.1)}
.svc-icon svg{width:24px;height:24px;fill:var(--pink)}
.svc-card h3{font-family:var(--font-d);font-size:1.3rem;font-weight:700;margin-bottom:.75rem}
.svc-card p{font-size:.9rem;color:var(--text);font-weight:300;line-height:1.75}

/* ═══════════ TESTIMONIALS ═══════════ */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.test-card{background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s}
.test-card:hover{border-color:rgba(250,3,110,.2)}
.test-stars{color:#f59e0b;font-size:.9rem;margin-bottom:1.2rem;letter-spacing:2px}
.test-quote{font-size:.95rem;color:var(--text);line-height:1.75;font-weight:300;font-style:italic;margin-bottom:2rem}
.test-author{display:flex;align-items:center;gap:1rem}
.test-avatar{width:42px;height:42px;border-radius:50%;background:var(--pink-dim);color:var(--pink);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:.85rem;border:1px solid rgba(250,3,110,.1)}
.test-author h4{font-family:var(--font-d);font-size:.95rem;font-weight:600;color:#white}
.test-author span{font-size:.75rem;color:var(--text-dim);display:block;margin-top:1px}

/* ═══════════ CTA BANNER ═══════════ */
.cta-section{position:relative;padding:8rem 0;background:var(--bg3);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.cta-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.2}
.c1{width:300px;height:300px;background:var(--pink);top:-10%;left:10%}
.c2{width:300px;height:300px;background:var(--purple);bottom:-10%;right:10%}
.cta-inner{position:relative;z-index:2;max-width:800px;margin:0 auto;text-align:center}

/* ═══════════ CONTACT ═══════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:start}
.contact-offices{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0 2.5rem}
.contact-office h4{font-family:var(--font-d);font-size:1.1rem;font-weight:700;margin-bottom:.3rem;color:#white}
.contact-office p{font-size:.85rem;color:var(--text);margin-bottom:.4rem;font-weight:300}
.contact-office a{font-size:.85rem;color:var(--pink);font-family:var(--font-d);font-weight:500;transition:opacity .2s}
.contact-office a:hover{opacity:.7}
.contact-email-link{display:inline-block;font-family:var(--font-d);font-size:1rem;color:var(--text);border-bottom:1.5px solid var(--border);padding-bottom:3px;transition:color .2s,border-color .2s}
.contact-email-link:hover{color:var(--pink);border-color:var(--pink)}
.contact-form-wrap{background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:var(--r);padding:2.5rem}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.contact-form.hidden{display:none}
.form-field input,.form-field textarea{width:100%;background:rgba(255,255,255,.02);border:1px solid var(--border);color:#fff;padding:.95rem 1.3rem;border-radius:10px;font-size:.95rem;outline:none;transition:border-color .2s;cursor:text}
.form-field input:focus,.form-field textarea:focus{border-color:var(--pink)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-dim)}
.form-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem;padding:3rem}
.form-success.visible{display:flex}
.success-icon{width:60px;height:60px;border:2px solid var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--green);animation:scaleIn .4s var(--ease)}
@keyframes scaleIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.form-success h3{font-family:var(--font-d);font-size:1.3rem}
.form-success p{color:var(--text);font-size:.9rem}

/* ═══════════ FOOTER ═══════════ */
.footer {
  padding: 5rem 0 3rem;
  background: #030307;
  border-top: 1px solid var(--border);
  color: #a0a0ab;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1.4fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-col h4 {
  font-family: var(--font-d);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.footer-logo-wrap img {
  height: 38px;
  width: auto;
  margin-bottom: 1.2rem;
}

.footer-brief {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-socials {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.02);
}

.social-link:hover {
  border-color: var(--pink);
  background: var(--pink-dim);
  color: var(--pink);
  transform: translateY(-3px);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col ul a {
  font-size: 0.85rem;
  transition: color 0.3s;
}

.footer-col ul a:hover {
  color: var(--pink);
}

.footer-contact-item {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.footer-contact-item strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.footer-contact-item a {
  color: var(--pink);
  font-weight: 500;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: 0.75rem;
}

.footer-policy-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
}

.footer-policy-links a {
  transition: color 0.3s;
}

.footer-policy-links a:hover {
  color: var(--pink);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1024px){
  .hero-wrap{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hero-left{margin:0 auto}
  .hero-actions{justify-content:center}
  .about-grid{grid-template-columns:1fr;gap:4rem}
  .about-image-stack{aspect-ratio:3/2;max-width:500px;margin:0 auto}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr;gap:2rem}
  .contact-grid{grid-template-columns:1fr;gap:4rem}
  .portfolio-grid{grid-template-columns:1fr}
  .pf-card.pf-wide{grid-column:span 1;aspect-ratio:16/10}
  .footer-grid{grid-template-columns:1fr 1fr;gap:3rem}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}
@media(max-width:768px){
  .section{padding:6rem 0}
  .services-grid{grid-template-columns:1fr}
  .contact-offices{grid-template-columns:1fr;gap:1.5rem}
  .form-row{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .footer-inner{flex-direction:column;text-align:center;gap:1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ═══════════ FLOATING WIDGETS ═══════════ */
.floating-widgets {
  position: fixed !important;
  bottom: 2rem;
  left: 2rem !important;
  right: 2rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 99999 !important;
}

.float-whatsapp {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  cursor: pointer;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.float-whatsapp:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .floating-widgets {
    bottom: 1.5rem;
    left: 1.5rem !important;
    right: 1.5rem !important;
  }
  .float-whatsapp {
    width: 50px;
    height: 50px;
  }
}

.float-scroll-top {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s var(--ease);
}

.float-scroll-top svg {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

.float-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.float-scroll-top:hover {
  color: var(--pink);
  transform: translateY(-4px);
}

/* Light Theme Scroll to Top adjustments */
[data-theme="light"] .float-scroll-top {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .float-scroll-top:hover {
  color: var(--pink);
}

/* ═══════════ CONSOLE CONTRAST OVERRIDES ═══════════ */
.signage-console, .fids-console-box {
  color: rgba(255,255,255,0.7) !important;
}
.signage-console .console-tab {
  color: rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.signage-console .console-tab.active {
  color: #fff !important;
  border-color: var(--pink) !important;
}
.signage-console .widget-panel-label {
  color: rgba(255,255,255,0.4) !important;
}
.signage-console .widget-btn {
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.signage-console .widget-btn.active {
  color: #fff !important;
  border-color: var(--green) !important;
}
.signage-console .screen-hud-info span {
  color: rgba(255,255,255,0.85) !important;
}
.signage-console .screen-hud-info strong {
  color: #fff !important;
}
.fids-console-box span, .fids-console-box strong {
  color: rgba(255,255,255,0.85);
}
.fids-console-box strong {
  color: #fff !important;
}

.admin-hero {
  padding-top: 180px !important;
  padding-bottom: 4rem !important;
}

/* ═══════════════════════════════════════
   PRODUCTS PAGE STYLES
   ═══════════════════════════════════════ */
.products-filter-section {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.filter-btn {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.6rem 1.25rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-d);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 0 15px rgba(250, 3, 110, 0.15);
}
[data-theme="light"] .filter-btn:hover, [data-theme="light"] .filter-btn.active {
  background: rgba(250, 3, 110, 0.04);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 6rem;
}
.product-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.product-card:hover {
  transform: translateY(-8px);
  border-color: var(--pink);
}
.product-image-box {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.product-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-image-box img {
  transform: scale(1.08);
}
.product-cat-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(3, 3, 8, 0.75);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  z-index: 10;
}
.product-info-box {
  padding: 1.75rem;
}
.product-info-box h3 {
  font-family: var(--font-d);
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.product-info-box p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 1.25rem;
}
[data-theme="light"] .product-card-footer {
  border-top-color: rgba(0,0,0,0.03);
}

/* Spec Drawer Styles */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 8, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1900;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s var(--ease);
}
.drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.product-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 1950;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  box-shadow: -20px 0 50px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.product-drawer.open {
  transform: translateX(0);
}
.drawer-header {
  padding: 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-header h3 {
  font-family: var(--font-d);
  font-size: 1.4rem;
  color: var(--white);
}
.close-drawer-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.75rem;
  cursor: pointer;
}
.drawer-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}
.drawer-section {
  margin-bottom: 2rem;
}
.drawer-section h4 {
  font-family: var(--font-d);
  font-size: 0.8rem;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table td {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem;
}
[data-theme="light"] .spec-table td {
  border-bottom-color: rgba(0,0,0,0.05);
}
.spec-table tr:last-child td {
  border-bottom: none;
}
.spec-table td.label-col {
  color: var(--text-dim);
  width: 45%;
}
.spec-table td.value-col {
  color: var(--white);
  font-weight: 700;
  text-align: right;
}
.drawer-footer {
  padding: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 1rem;
}

/* ═══════════════════════════════════════
   EXPERIENCE CENTER & SIMULATOR
   ═══════════════════════════════════════ */
.simulator-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
@media(max-width: 992px) {
  .simulator-layout { grid-template-columns: 1fr; }
}
.scene-canvas {
  background: #000;
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.scene-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0.65;
  transition: opacity 0.5s var(--ease);
}
.virtual-screen {
  position: relative;
  border: 2px solid var(--pink);
  box-shadow: 0 0 30px rgba(250, 3, 110, 0.4);
  background-size: cover;
  background-position: center;
  z-index: 10;
  transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.virtual-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(250, 3, 110, 0.1), rgba(0, 242, 254, 0.1));
  pointer-events: none;
}
.virtual-screen-hud {
  background: rgba(3, 3, 8, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.7rem;
  font-family: monospace;
  font-weight: bold;
  pointer-events: none;
  text-align: center;
  backdrop-filter: blur(8px);
}
.simulator-controls {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.control-group label {
  font-family: var(--font-d);
  font-size: 0.8rem;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.control-group input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
}
.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pink);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(250, 3, 110, 0.5);
  transition: transform 0.2s ease;
}
.control-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.scene-selectors {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.scene-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}
.scene-btn.active, .scene-btn:hover {
  border-color: var(--pink);
  color: var(--white);
  background: rgba(250, 3, 110, 0.05);
}
.telemetry-board {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.telemetry-item span {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.telemetry-item strong {
  font-size: 1.15rem;
  color: var(--white);
  font-family: var(--font-d);
}

/* ═══════════════════════════════════════
   TECHNOLOGY TAB OVERVIEW
   ═══════════════════════════════════════ */
.tech-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.tech-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tech-card:hover {
  transform: translateY(-6px);
  border-color: var(--pink);
}
.tech-card h3 {
  font-family: var(--font-d);
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.tech-card p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   SOLUTIONS & INDUSTRIES LAYOUT
   ═══════════════════════════════════════ */
.industries-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.industry-tab-btn {
  background: rgba(255,255,255,0.01);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.industry-tab-btn.active, .industry-tab-btn:hover {
  border-color: var(--pink);
  color: var(--white);
  background: rgba(250, 3, 110, 0.05);
}
.industry-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.industry-panel.active {
  display: grid;
}
@media(max-width: 768px) {
  .industry-panel { grid-template-columns: 1fr; gap: 2rem; }
}
.industry-img-box {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
}
.industry-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.industry-info-box h2 {
  font-family: var(--font-d);
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.industry-info-box p {
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}
.industry-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.industry-features li {
  font-size: 0.9rem;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.industry-features li::before {
  content: '✓';
  color: var(--pink);
  font-weight: bold;
}

/* ═══════════════════════════════════════
   INNOVATION LAB LAYOUT
   ═══════════════════════════════════════ */
.innovation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.innovation-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s var(--ease);
}
.innovation-card:hover {
  transform: translateY(-8px);
  border-color: var(--pink);
  box-shadow: 0 10px 30px rgba(250, 3, 110, 0.1);
}
.innovation-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.innovation-content {
  padding: 1.75rem;
}
.innovation-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(250, 3, 110, 0.85);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════
   INSIGHTS & BLOG POSTS
   ═══════════════════════════════════════ */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.insights-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
}
.insights-card:hover {
  transform: translateY(-6px);
  border-color: var(--pink);
}
.insights-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.insights-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.insights-meta {
  font-size: 0.75rem;
  color: var(--pink);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.insights-body h3 {
  font-family: var(--font-d);
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.insights-body p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.insights-link {
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s;
}
.insights-link:hover {
  color: var(--pink);
}

/* ═══════════════════════════════════════
   HELP CENTER & AMC SLA MATRIX
   ═══════════════════════════════════════ */
.amc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.amc-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  position: relative;
  text-align: center;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.amc-card:hover {
  border-color: var(--pink);
  transform: translateY(-5px);
}
.amc-card.recommended {
  border-color: var(--pink);
  box-shadow: 0 10px 30px rgba(250, 3, 110, 0.15);
}
.amc-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.amc-card h3 {
  font-family: var(--font-d);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.amc-response {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.amc-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.amc-list li {
  font-size: 0.85rem;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.amc-list li::before {
  content: '✓';
  color: var(--pink);
  font-weight: bold;
}

/* ═══════════════════════════════════════
   DOWNLOADS VAULT
   ═══════════════════════════════════════ */
.downloads-vault {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.download-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
}
.download-item:hover {
  border-color: var(--pink);
  background: rgba(250, 3, 110, 0.02);
}
.download-info h4 {
  font-family: var(--font-d);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}
.download-info span {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.dl-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
.download-item:hover .dl-btn {
  background: var(--pink);
  border-color: var(--pink);
}

/* ═══════════════════════════════════════
   CAREERS SECTION
   ═══════════════════════════════════════ */
.careers-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.career-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.career-row:hover {
  border-color: var(--pink);
}
.career-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.career-header h3 {
  font-family: var(--font-d);
  font-size: 1.1rem;
  color: var(--white);
}
.career-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.career-meta span {
  font-size: 0.75rem;
  background: rgba(255,255,255,0.05);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--white);
}
.career-arrow {
  color: var(--pink);
  font-weight: bold;
  transition: transform 0.3s;
}
.career-row.open .career-arrow {
  transform: rotate(180deg);
}
.career-details {
  padding: 0 1.5rem 1.5rem;
  display: none;
  border-top: 1px solid rgba(255,255,255,0.03);
  margin-top: 0.5rem;
}
.career-row.open .career-details {
  display: block;
}
.career-details p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 1rem 0;
}
.career-details ul {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.career-details li {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ═══════════ LEGAL & POLICY PAGES ═══════════ */
.legal-hero {
  padding: 8rem 0 3.5rem;
  background: radial-gradient(circle at 50% 0%, rgba(250, 3, 110, 0.08) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
}
.legal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  align-items: start;
  padding: 4rem 0 6rem;
}
.legal-sidebar {
  position: sticky;
  top: 6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.legal-sidebar-title {
  font-family: var(--font-d);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.legal-nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.legal-nav-link {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.25s ease;
  line-height: 1.4;
}
.legal-nav-link:hover, .legal-nav-link.active {
  color: var(--pink);
  background: var(--pink-dim);
  padding-left: 1rem;
}
.legal-content {
  color: var(--text);
  line-height: 1.8;
  font-size: 0.95rem;
}
.legal-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: 6.5rem;
}
.legal-section h2 {
  font-family: var(--font-d);
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.legal-section h2 .sec-num {
  color: var(--pink);
  font-size: 1.1rem;
  font-weight: 800;
}
.legal-section h3 {
  font-family: var(--font-d);
  font-size: 1.15rem;
  color: var(--white);
  margin: 1.5rem 0 0.75rem;
}
.legal-section p {
  margin-bottom: 1.2rem;
  color: var(--text-dim);
}
.legal-section strong {
  color: var(--white);
}
.legal-section ul, .legal-section ol {
  margin: 1rem 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-section li {
  color: var(--text-dim);
}
.legal-callout {
  background: var(--pink-dim);
  border-left: 4px solid var(--pink);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
}
.legal-callout p {
  margin: 0;
  color: var(--white);
  font-size: 0.9rem;
}
.legal-badge-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .legal-sidebar {
    position: static;
  }
}

/* ═══════════════════════════════════════
   FAQ ACCORDION & AEO KNOWLEDGE BASE
   ═══════════════════════════════════════ */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq-item:hover {
  border-color: var(--border-hover);
}
.faq-item[open] {
  border-color: rgba(250, 3, 110, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.faq-summary {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  user-select: none;
  line-height: 1.4;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-icon {
  color: var(--pink);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.75;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-bottom: 0;
}
.faq-answer strong {
  color: var(--white);
  font-weight: 700;
}
[data-theme="light"] .faq-item {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .faq-item:hover {
  border-color: rgba(250, 3, 110, 0.35);
}
[data-theme="light"] .faq-item[open] {
  border-color: rgba(250, 3, 110, 0.5);
  box-shadow: 0 6px 20px rgba(250, 3, 110, 0.08);
}
[data-theme="light"] .faq-answer {
  border-top-color: rgba(0, 0, 0, 0.07);
}