/* =============================================================================
   SaddamVision Design System V2 — "Signal Architecture"
   Original brand identity. Visual layer only. Extends theme-visual + brand-experience.
   Motifs: neural lattice · architectural blueprint · orbital telemetry
   ============================================================================= */

:root {
  /* --- Color: Signal Architecture palette (purple de-emphasized) --- */
  --sv2-void: #050a16;
  --sv2-ink: #0a1428;
  --sv2-navy: #0e244f;
  --sv2-navy-mid: #163a78;
  --sv2-signal: #14c8d4;
  --sv2-signal-soft: #5ee7ef;
  --sv2-orbit: #2f6fe0;
  --sv2-orbit-soft: #6b9af0;
  --sv2-mission: #c9a45c;
  --sv2-mission-soft: #e6d2a0;
  --sv2-slate: #5b6b82;
  --sv2-mist: #eef3f9;
  --sv2-panel: #f7f9fc;
  --sv2-line: rgba(14, 36, 79, 0.12);
  --sv2-line-strong: rgba(20, 200, 212, 0.35);

  /* Map legacy tokens toward V2 without breaking older rules */
  --sv-navy: var(--sv2-navy);
  --sv-navy-deep: var(--sv2-void);
  --sv-navy-mid: var(--sv2-navy-mid);
  --sv-electric: var(--sv2-orbit);
  --sv-electric-bright: var(--sv2-orbit-soft);
  --sv-cyan: var(--sv2-signal);
  --sv-cyan-soft: var(--sv2-signal-soft);
  --sv-gold: var(--sv2-mission);
  --sv-gold-soft: var(--sv2-mission-soft);
  --sv-ink: var(--sv2-ink);
  --sv-muted: var(--sv2-slate);
  --sv-surface: var(--sv2-mist);
  --sv-surface-2: #e8eef6;
  --sv-purple: #3d6fb8;
  --sv-purple-soft: #6b9af0;

  /* --- Type --- */
  --sv2-font-display: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sv2-font-body: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sv2-leading: 1.68;
  --sv2-tracking-display: -0.025em;

  /* --- Space scale (4px base) --- */
  --sv2-s1: 4px;
  --sv2-s2: 8px;
  --sv2-s3: 12px;
  --sv2-s4: 16px;
  --sv2-s5: 24px;
  --sv2-s6: 32px;
  --sv2-s7: 48px;
  --sv2-s8: 64px;
  --sv2-s9: 96px;
  --sv2-section-y: clamp(3.5rem, 6vw, 5.5rem);

  /* --- Radius: architectural, less pill-default for surfaces --- */
  --sv2-r-xs: 6px;
  --sv2-r-sm: 10px;
  --sv2-r-md: 14px;
  --sv2-r-lg: 18px;
  --sv2-r-xl: 24px;
  --sv2-r-cta: 14px;

  /* --- Elevation: single soft planes, no neon stacks --- */
  --sv2-shadow-1: 0 6px 18px rgba(5, 10, 22, 0.06);
  --sv2-shadow-2: 0 14px 36px rgba(5, 10, 22, 0.1);
  --sv2-shadow-3: 0 22px 48px rgba(5, 10, 22, 0.14);
  --sv2-shadow-focus: 0 0 0 3px rgba(20, 200, 212, 0.35);
  --sv2-border: 1px solid var(--sv2-line);

  /* --- Motion --- */
  --sv2-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  --sv2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv2-dur-fast: 160ms;
  --sv2-dur: 280ms;
  --sv2-dur-slow: 640ms;

  --sv-radius-xs: var(--sv2-r-xs);
  --sv-radius-md: var(--sv2-r-md);
  --sv-radius-lg: var(--sv2-r-lg);
  --sv-radius-xl: var(--sv2-r-xl);
  --sv-elev-1: var(--sv2-shadow-1);
  --sv-elev-2: var(--sv2-shadow-2);
  --sv-elev-3: var(--sv2-shadow-3);
  --sv-elev-glow: 0 0 0 1px rgba(20, 200, 212, 0.2), var(--sv2-shadow-2);
  --sv-dur-fast: var(--sv2-dur-fast);
  --sv-dur: var(--sv2-dur);
  --sv-dur-slow: var(--sv2-dur-slow);
  --sv-ease-out: var(--sv2-ease-out);
  --sv-leading: var(--sv2-leading);
  --theme-color: var(--sv2-void);
}

/* ---------------------------------------------------------------------------
   Body atmosphere — blueprint wash (not flat purple haze)
   --------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(20, 200, 212, 0.07), transparent 55%),
    radial-gradient(700px 420px at 96% 4%, rgba(47, 111, 224, 0.06), transparent 50%),
    linear-gradient(180deg, #f5f8fc 0%, var(--sv2-mist) 40%, #eef2f8 100%);
}

/* ---------------------------------------------------------------------------
   Storytelling section wrappers (structure only — no copy changes)
   Progression: orbit → lattice → signal → dock → horizon
   --------------------------------------------------------------------------- */
.sv-story--orbit,
.sv-atmosphere--orbit::after {
  /* used by hero / page-hero */
}
.sv-atmosphere--orbit::after {
  background:
    radial-gradient(ellipse 55% 45% at 70% 30%, rgba(20, 200, 212, 0.12), transparent 60%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(201, 164, 92, 0.08), transparent 55%),
    url("/assets/images/visual/orbit-field.svg");
  background-size: auto, auto, cover;
  background-position: center;
  opacity: 0.85;
}
.sv-atmosphere--lattice::after {
  background-image: url("/assets/images/visual/lattice-blueprint.svg");
  background-size: 180px 180px;
  opacity: 0.07;
}
.sv-atmosphere--signal::after {
  background-image: url("/assets/images/visual/signal-flow.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.sv-atmosphere--dock::after {
  background:
    linear-gradient(180deg, rgba(10, 20, 40, 0.02), transparent 40%),
    url("/assets/images/visual/dock-bay.svg");
  background-size: auto, 120px 120px;
  opacity: 0.55;
}
.sv-atmosphere--horizon::after {
  background:
    linear-gradient(180deg, transparent 20%, rgba(20, 200, 212, 0.06) 55%, rgba(201, 164, 92, 0.08) 100%),
    url("/assets/images/visual/horizon-band.svg");
  background-size: auto, cover;
  background-position: center bottom;
  opacity: 0.9;
}

/* Keep legacy atmosphere aliases mapped into the family */
.sv-atmosphere--mesh::after {
  background-image: url("/assets/images/visual/lattice-blueprint.svg");
  background-size: 160px 160px;
  opacity: 0.065;
}
.sv-atmosphere--neural::after {
  background-image: url("/assets/images/visual/signal-flow.svg");
  background-size: cover;
  opacity: 0.38;
}
.sv-atmosphere--aurora::after {
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(20, 200, 212, 0.1), transparent 60%),
    radial-gradient(ellipse 45% 50% at 85% 70%, rgba(201, 164, 92, 0.07), transparent 55%),
    url("/assets/images/visual/orbit-field.svg");
  background-size: auto, auto, cover;
  opacity: 0.75;
}
.sv-atmosphere--dots::after {
  background-image: url("/assets/images/visual/dock-bay.svg");
  background-size: 32px 32px;
  opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   Surfaces & cards — architectural panels (not glassmorphism clones)
   --------------------------------------------------------------------------- */
.sv-panel,
.sv-glass-card,
.card.sv-glass-card,
.service-card.sv-glass-card,
.trust-card.sv-glass-card,
.price-card.sv-glass-card,
.portfolio-card.sv-glass-card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 252, 0.88)) !important;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  border: 1px solid rgba(14, 36, 79, 0.1) !important;
  border-radius: var(--sv2-r-lg) !important;
  box-shadow: var(--sv2-shadow-1) !important;
  position: relative;
}
.sv-glass-card::after,
.card.sv-glass-card::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sv2-signal), transparent 70%);
  opacity: 0;
  transition: opacity var(--sv2-dur) var(--sv2-ease);
  pointer-events: none;
}
.sv-glass-card:hover::after,
.card.sv-glass-card:hover::after {
  opacity: 0.85;
}
.sv-glass-card:hover,
.card.sv-glass-card:hover {
  border-color: rgba(20, 200, 212, 0.32) !important;
  box-shadow: var(--sv2-shadow-2) !important;
}

.sv-glass-card:focus-within {
  outline: none;
  box-shadow: var(--sv2-shadow-focus), var(--sv2-shadow-1) !important;
}

/* Hex node corner mark */
.sv-node-mark::before {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 10px;
  height: 10px;
  background: url("/assets/illustrations/icon-node.svg") center / contain no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Buttons — mission CTAs (soft rect, not endless pills)
   --------------------------------------------------------------------------- */
.btn,
a.btn {
  border-radius: var(--sv2-r-cta) !important;
  font-family: var(--sv2-font-display);
  letter-spacing: 0.01em;
}
.btn.primary,
a.btn.primary,
.nav-cta {
  background: linear-gradient(135deg, var(--sv2-mission) 0%, #d8b66e 55%, var(--sv2-mission-soft) 100%) !important;
  color: var(--sv2-void) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 10px 24px rgba(201, 164, 92, 0.28) !important;
  border-radius: var(--sv2-r-cta) !important;
}
.btn.primary:hover,
a.btn.primary:hover,
.nav-cta:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 14px 28px rgba(20, 200, 212, 0.18),
    0 10px 24px rgba(201, 164, 92, 0.3) !important;
}
.btn.secondary,
a.btn.secondary {
  border: 1px solid rgba(20, 200, 212, 0.45) !important;
  background: rgba(20, 200, 212, 0.08) !important;
  color: var(--sv2-navy) !important;
  border-radius: var(--sv2-r-cta) !important;
}
.btn:focus-visible,
.nav-cta:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sv2-signal);
  outline-offset: 3px;
}

/* Loading / success micro-states (CSS hooks for forms.js if present) */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(5, 10, 22, 0.2);
  border-top-color: var(--sv2-void);
  animation: sv2-spin 0.7s linear infinite;
}
.btn.is-success {
  background: linear-gradient(135deg, #1aa88a, #14c8d4) !important;
  color: #fff !important;
}
@keyframes sv2-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   Typography rhythm
   --------------------------------------------------------------------------- */
.section h2,
.page-hero h1,
.hero h1,
.cta h2 {
  letter-spacing: var(--sv2-tracking-display);
}
.section {
  padding-block: var(--sv2-section-y);
}
.section-text {
  max-width: 42rem;
  color: var(--sv2-slate);
  line-height: var(--sv2-leading);
}

/* ---------------------------------------------------------------------------
   Icons — exclusive SV pack hooks
   --------------------------------------------------------------------------- */
.sv-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}
.sv-icon--node { background-image: url("/assets/illustrations/icons/icon-node.svg"); }
.sv-icon--signal { background-image: url("/assets/illustrations/icons/icon-signal-v2.svg"); }
.sv-icon--orbit { background-image: url("/assets/illustrations/icons/icon-orbit.svg"); }
.sv-icon--build { background-image: url("/assets/illustrations/icons/icon-build.svg"); }
.sv-icon--shield { background-image: url("/assets/illustrations/icons/icon-shield.svg"); }
.sv-icon--grow { background-image: url("/assets/illustrations/icons/icon-grow-v2.svg"); }
.sv-icon--store { background-image: url("/assets/illustrations/icons/icon-store-v2.svg"); }
.sv-icon--plate { background-image: url("/assets/illustrations/icons/icon-plate.svg"); }
.sv-icon--company { background-image: url("/assets/illustrations/icons/icon-company-v2.svg"); }
.sv-icon--spark { background-image: url("/assets/illustrations/icons/icon-spark-v2.svg"); }
.sv-icon--check { background-image: url("/assets/illustrations/icons/icon-check.svg"); }
.sv-icon--link { background-image: url("/assets/illustrations/icons/icon-link.svg"); }

.service-card[data-sv-service="01"] .service-icon::before {
  background-image: url("/assets/illustrations/icons/icon-plate.svg");
}
.service-card[data-sv-service="02"] .service-icon::before {
  background-image: url("/assets/illustrations/icons/icon-store-v2.svg");
}
.service-card[data-sv-service="03"] .service-icon::before {
  background-image: url("/assets/illustrations/icons/icon-company-v2.svg");
}
.service-card .service-icon {
  border-radius: var(--sv2-r-sm) !important;
  background: linear-gradient(145deg, rgba(20, 200, 212, 0.14), rgba(47, 111, 224, 0.12)) !important;
  border: 1px solid rgba(20, 200, 212, 0.22) !important;
  box-shadow: var(--sv2-shadow-1);
}

.features-grid > div::before {
  background-image: url("/assets/illustrations/icons/icon-spark-v2.svg");
}
.features-grid > div:nth-child(2)::before {
  background-image: url("/assets/illustrations/icons/icon-grow-v2.svg");
}
.features-grid > div:nth-child(3)::before {
  background-image: url("/assets/illustrations/icons/icon-signal-v2.svg");
}

/* ---------------------------------------------------------------------------
   Portfolio device system — laptop / desktop / tablet / phone
   --------------------------------------------------------------------------- */
.sv-device-stage {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.sv-device {
  position: relative;
  border-radius: var(--sv2-r-md) var(--sv2-r-md) 0 0;
  background: linear-gradient(180deg, #121a2e, #0a1020);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    var(--sv2-shadow-2);
  transform-origin: center bottom;
  transition: transform var(--sv2-dur) var(--sv2-ease-out);
}
.sv-device-stage:hover .sv-device,
.card.project:hover .sv-device,
.portfolio-card:hover .sv-device {
  transform: rotateX(4deg) translateY(-4px);
}
.sv-device__chrome {
  padding: 9px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
}
.sv-device__bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: inherit;
}
.sv-device__screen {
  background: #070d18;
}
.sv-device__reflect {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 18%;
  bottom: -14%;
  background: linear-gradient(180deg, rgba(47, 111, 224, 0.18), transparent);
  filter: blur(10px);
  opacity: 0.55;
  pointer-events: none;
  transform: scaleY(-1);
  border-radius: 0 0 var(--sv2-r-md) var(--sv2-r-md);
}

/* Device variants */
.sv-device--laptop .sv-device__screen { aspect-ratio: 16 / 10; }
.sv-device--desktop {
  border-radius: var(--sv2-r-sm);
}
.sv-device--desktop .sv-device__screen { aspect-ratio: 16 / 9; }
.sv-device--desktop::after {
  content: "";
  display: block;
  height: 10px;
  margin: 0 auto;
  width: 28%;
  background: linear-gradient(180deg, #1a2438, #0c1220);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 0 4px #0a1020;
}
.sv-device--tablet {
  border-radius: 18px;
  padding: 8px;
  background: linear-gradient(160deg, #1b2438, #0c1220);
}
.sv-device--tablet .sv-device__chrome { display: none; }
.sv-device--tablet .sv-device__screen {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
}
.sv-device--phone {
  max-width: 220px;
  margin-inline: auto;
  border-radius: 28px;
  padding: 10px 8px;
  background: linear-gradient(160deg, #1e283c, #0a1020);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--sv2-shadow-2);
}
.sv-device--phone .sv-device__chrome {
  justify-content: center;
  padding: 4px 0 8px;
  background: transparent;
  border: 0;
}
.sv-device--phone .sv-device__dot { display: none; }
.sv-device--phone .sv-device__url {
  width: 36%;
  max-width: 80px;
  height: 6px;
  margin: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}
.sv-device--phone .sv-device__screen {
  aspect-ratio: 9 / 19;
  border-radius: 18px;
  overflow: hidden;
}

@media (min-width: 901px) {
  .portfolio-gallery .portfolio-card:nth-child(3n) .sv-device {
    /* tablet rhythm in gallery */
  }
  .portfolio-gallery .portfolio-card:nth-child(3n) .sv-device__screen {
    aspect-ratio: 4 / 3;
  }
  .portfolio-gallery .portfolio-card:nth-child(5n) .sv-device--laptop {
    transform: perspective(900px) rotateY(-2deg);
  }
  .grid .card.project:nth-child(3n) .sv-device__screen {
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------------------------
   Page heroes & CTA — orbit / horizon story beats
   --------------------------------------------------------------------------- */
.page-hero,
.page-hero-rich {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.page-hero::after,
.page-hero-rich::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(20, 200, 212, 0.14), transparent 60%),
    url("/assets/images/visual/orbit-field.svg");
  background-size: auto, cover;
  opacity: 0.7;
}
.page-hero > .container,
.page-hero-rich > .container {
  position: relative;
  z-index: 1;
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(20, 200, 212, 0.08) 50%, rgba(201, 164, 92, 0.1)),
    url("/assets/images/visual/horizon-band.svg");
  background-size: auto, cover;
  background-position: center bottom;
  opacity: 0.85;
}
.cta > .container { position: relative; z-index: 1; }

.hero.hero--ai {
  position: relative;
}
.hero-ai-art img {
  filter: saturate(1.05) contrast(1.02);
}

/* ---------------------------------------------------------------------------
   Badges / filters — architectural chips (soft rect)
   --------------------------------------------------------------------------- */
.badge,
.portfolio-badges .badge-soft,
.portfolio-filters a {
  border-radius: var(--sv2-r-xs) !important;
}
.portfolio-filters a {
  border: 1px solid rgba(14, 36, 79, 0.1);
  padding: 6px 12px;
}
.portfolio-filters a.active {
  background: rgba(20, 200, 212, 0.12) !important;
  border-color: rgba(20, 200, 212, 0.35);
  color: var(--sv2-navy) !important;
}

/* ---------------------------------------------------------------------------
   Roadmap / process — signal spine
   --------------------------------------------------------------------------- */
.sv-roadmap::before {
  background: linear-gradient(180deg, var(--sv2-signal), var(--sv2-orbit), var(--sv2-mission));
  width: 2px;
  opacity: 0.55;
}
.sv-roadmap > li {
  border-radius: var(--sv2-r-md);
  border-color: rgba(14, 36, 79, 0.1);
  background: rgba(255, 255, 255, 0.82);
}
.sv-roadmap > li::before {
  background: linear-gradient(135deg, var(--sv2-mission-soft), var(--sv2-mission));
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.16);
}

/* ---------------------------------------------------------------------------
   Header brand mark refinement
   --------------------------------------------------------------------------- */
.brand-icon {
  border-radius: var(--sv2-r-sm) !important;
  background: linear-gradient(145deg, var(--sv2-mission), var(--sv2-mission-soft)) !important;
}
.brand-text {
  background: linear-gradient(90deg, #fff 0%, var(--sv2-mission-soft) 50%, var(--sv2-signal-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.main-nav a:not(.nav-cta):not(.lang-btn)::after {
  background: linear-gradient(90deg, var(--sv2-signal), var(--sv2-orbit));
}
.lang-btn {
  border-radius: var(--sv2-r-xs) !important;
}

/* ---------------------------------------------------------------------------
   Footer / trust
   --------------------------------------------------------------------------- */
.footer-accent-line {
  background: linear-gradient(90deg, transparent, var(--sv2-signal), var(--sv2-mission), transparent);
}
.trust-card::before {
  background: linear-gradient(90deg, var(--sv2-signal), var(--sv2-orbit), var(--sv2-mission));
  height: 2px;
}
.sv-trust-mark {
  border-radius: var(--sv2-r-sm);
  border-style: solid;
  border-color: rgba(14, 36, 79, 0.12);
}

/* ---------------------------------------------------------------------------
   Form micro polish
   --------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  border-radius: var(--sv2-r-sm) !important;
  transition: border-color var(--sv2-dur) var(--sv2-ease), box-shadow var(--sv2-dur) var(--sv2-ease);
}
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(20, 200, 212, 0.55) !important;
  box-shadow: var(--sv2-shadow-focus) !important;
}

/* ---------------------------------------------------------------------------
   Illustration frames
   --------------------------------------------------------------------------- */
.sv-illust {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin-inline: auto;
}
.sv-illust--hero {
  width: min(100%, 420px);
}
.sv-illust--roadmap {
  width: min(100%, 720px);
  margin-bottom: var(--sv2-s5);
}

/* ---------------------------------------------------------------------------
   Consistency: section spacing & card grids
   --------------------------------------------------------------------------- */
.grid,
.trust-grid,
.pricing-grid,
.features-grid,
.portfolio-gallery {
  gap: var(--sv2-s5);
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sv-device,
  .sv-device-stage:hover .sv-device,
  .card.project:hover .sv-device,
  .portfolio-card:hover .sv-device,
  .btn.is-loading::after,
  .sv-glass-card,
  .sv-tilt,
  .sv-magnetic {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  .btn.is-loading::after {
    border-top-color: var(--sv2-void);
    opacity: 0.7;
  }
}

@media (max-width: 600px) {
  .sv-device--phone { max-width: 100%; }
  .sv-device-stage:hover .sv-device { transform: none; }
}