/* SEGELECT V5 — precise entry, surface feedback, measured brand movement. */
:root {
  --ease-premium: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --duration-fast: 220ms;
  --duration-medium: 480ms;
  --duration-slow: 760ms;
  --reveal-travel: 20px;
  --reveal-stagger-cap: 210ms;
}
.site-header {
  transition: background-color var(--duration-medium) var(--ease-premium), border-color var(--duration-medium) var(--ease-premium);
}
.site-header.is-scrolled {
  background: rgba(5,11,17,.98);
  border-bottom-color: rgba(212,175,55,.26);
}
.nav-menu a:not(.nav-cta) { position: relative; }
.nav-menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out);
}
.nav-menu a:not(.nav-cta):is(:hover,:focus-visible)::after { transform: scaleX(1); }
.btn, .nav-menu .nav-cta {
  transition: transform var(--duration-fast) var(--ease-premium), background-color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), box-shadow var(--duration-fast) var(--ease-premium);
}
.btn span[aria-hidden], .text-link span[aria-hidden], .nav-cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-premium);
}
.btn:focus-visible span[aria-hidden], .text-link:focus-visible span[aria-hidden], .nav-cta:focus-visible .nav-cta-arrow { transform: translateX(3px); }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,11,17,.72));
}
.hero-headline > span { opacity: 1; }
.hero-enter .hero-headline > span {
  animation: hero-line var(--duration-slow) var(--ease-out) both;
}
.hero-enter .hero-headline > span:nth-child(2) { animation-delay: 80ms; }
.hero-enter .hero-eyebrow { animation: hero-detail var(--duration-medium) var(--ease-out) both; }
.hero-enter .hero-lead { animation: hero-detail var(--duration-medium) var(--ease-out) 120ms both; }
.hero-enter .hero-actions {
  opacity: 1;
  animation: hero-actions-entry var(--duration-medium) var(--ease-out) 240ms both;
}
@keyframes hero-actions-entry {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}
@keyframes hero-line {
  from { clip-path: inset(0 0 12% 0); transform: translateY(8px); }
  to { clip-path: inset(0); transform: translateY(0); }
}
@keyframes hero-detail {
  from { opacity: .82; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-travel));
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-out);
  transition-delay: min(var(--reveal-delay, 0ms), var(--reveal-stagger-cap));
}
.motion-ready [data-reveal].is-revealed,
.motion-ready [data-reveal]:focus-within {
  opacity: 1;
  transform: translateY(0);
}
.motion-ready [data-reveal]:focus-within,
.motion-ready :target [data-reveal],
.motion-ready [data-reveal]:target {
  opacity: 1;
  transform: none;
  transition: none !important;
}
.solutions-section :is(.solution-card,.engineering-card) {
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-medium) var(--ease-out), border-color var(--duration-medium) var(--ease-premium), box-shadow var(--duration-medium) var(--ease-premium) !important;
}
.solutions-section :is(.solution-card-photo,.eng-card-img) img {
  transition: transform var(--duration-slow) var(--ease-out);
}
.motion-ready .solutions-section [data-reveal]:not(.is-revealed) :is(.solution-card-photo,.eng-card-img) img { transform: scale(1.025); }
.process-step-item {
  position: relative;
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-out), border-color var(--duration-medium) var(--ease-premium);
}
.process-step-item.is-revealed { border-left-color: var(--gold-500) !important; }
.final-cta-panel {
  background: linear-gradient(135deg, rgba(20,40,58,.75), var(--navy-900)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.14) !important;
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-out), border-color var(--duration-medium) var(--ease-premium) !important;
}
.final-cta-panel.is-revealed { border-color: rgba(212,175,55,.24) !important; }
.site-footer .footer-col a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-premium), text-decoration-color var(--duration-medium) var(--ease-premium);
}
.site-footer .footer-col a:is(:hover,:focus-visible) { text-decoration-color: var(--gold-400); }
.whatsapp-float {
  transition: transform var(--duration-fast) var(--ease-premium), background-color var(--duration-fast) var(--ease-premium), box-shadow var(--duration-fast) var(--ease-premium);
}

/* Optical treatment keeps source artwork and its proportions intact. */
.brands-section :is(.brand-wall-title,h2) { color: var(--navy-900); }
.brands-section .brand-grid {
  gap: 32px !important;
  align-items: start;
}
.brands-section .brand-card {
  height: 120px;
  align-items: center !important;
  justify-content: flex-start;
  gap: 12px;
  overflow: visible;
}
.brands-section .brand-logo-frame {
  height: 64px !important;
  width: 100%;
  padding: 10px !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brands-section .brand-logo-frame img,
.brands-section .brand-card:hover .brand-logo-frame img {
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
  transform: none;
  transition: none !important;
}
.brands-section .brand-logo-frame:has(img:is([src$="ajax-logo.webp"],[src$="uniview-logo.webp"],[src$="ubiquiti-logo.webp"],[src$="skyhawk-logo.webp"])) {
  background: var(--navy-900) !important;
  border-radius: 3px;
}
.brands-section .brand-cat {
  text-align: center !important;
  line-height: 1.45;
  font-size: .72rem !important;
  opacity: 1;
}
.brand-motion-region {
  margin: 40px 0 24px;
  overflow: hidden;
  height: 120px;
}
.brand-motion-region:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 6px; }
.brand-motion-track { display: flex; width: max-content; gap: 32px; }
.brand-motion-track .brand-grid { display: flex; gap: 32px !important; margin: 0; flex: 0 0 auto; }
.brand-motion-track .brand-card { width: 184px; flex: 0 0 184px; }
.brand-motion-track.is-running {
  animation: brand-drift var(--brand-duration, 216s) linear infinite;
}
.brand-motion-region.is-paused .brand-motion-track,
.brand-motion-region:focus-within .brand-motion-track { animation-play-state: paused; }
@keyframes brand-drift { to { transform: translateX(calc(-1 * var(--brand-distance, 3888px))); } }
.brand-motion-region.is-static { height: auto; overflow: visible; }
.brand-motion-region.is-static .brand-motion-track { display: block; width: auto; animation: none; transform: none; }
.brand-motion-region.is-static .brand-grid { display: grid; }
.brand-motion-region.is-static .brand-card { width: auto; }
.brand-motion-region.is-static [aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .motion-capable .brands-section > .container { overflow: hidden; }
  .motion-capable .brands-section .brand-grid { display: flex; }
  .motion-capable .brands-section .brand-card { width: 184px; flex: 0 0 184px; }
  .motion-capable .brand-motion-region.is-static .brand-grid { display: grid; }
  .motion-capable .brand-motion-region.is-static .brand-card { width: auto; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand-motion-region:hover .brand-motion-track { animation-play-state: paused; }
  .solutions-section :is(.solution-card,.engineering-card):hover {
    transform: translateY(-2px) !important;
    border-color: rgba(18,30,40,.27) !important;
    box-shadow: 0 12px 24px rgba(18,30,40,.07) !important;
  }
  .solutions-section :is(.solution-card,.engineering-card):hover :is(.solution-card-photo,.eng-card-img) img { transform: scale(1.025); }
  .btn:hover span[aria-hidden], .text-link:hover span[aria-hidden], .nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }
  .nav-menu .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.14); }
  .whatsapp-float:hover { transform: scale(1.03); }
}
@media (max-width: 768px) {
  :root { --reveal-travel: 12px; --reveal-stagger-cap: 140ms; }
  .hero::after { height: 40px; }
  .nav-menu a:not(.nav-cta)::after { right: auto; width: 48px; }
  .brands-section .brand-grid { gap: 24px 16px !important; }
  .brand-motion-track .brand-grid { gap: 32px !important; }
  .brands-section .brand-cat { font-size: .68rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter :is(.hero-headline > span,.hero-eyebrow,.hero-lead,.hero-actions),
  .brand-motion-track.is-running { animation: none !important; }
  .motion-ready [data-reveal], .hero-headline > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .brand-motion-region { height: auto; overflow: visible; }
  .brand-motion-track { display: block; width: auto; transform: none !important; }
  .brand-motion-track .brand-grid { display: grid; }
  .brand-motion-track .brand-card { width: auto; }
  .brand-motion-track [aria-hidden="true"] { display: none; }
  .site-header, .btn, .nav-menu a::after, .nav-menu .nav-cta,
  .solutions-section :is(.solution-card,.engineering-card),
  .solutions-section img, .process-step-item, .final-cta-panel,
  .site-footer a, .whatsapp-float, .btn span, .text-link span, .nav-cta-arrow { transition: none !important; }
  .btn:hover, .whatsapp-float:hover, .btn span, .text-link span, .nav-cta-arrow { transform: none !important; }
}