/* ELÈTTRON — shared site theme. Every page links this file so the look stays identical. */

/* ══════════════════════════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════════════════════════ */
#cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #3B82F6;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: screen;
}
#cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(59,130,246,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease-out, width 0.4s, height 0.4s, border-color 0.3s, opacity 0.3s;
}
body.cursor-hover #cursor-dot { width: 12px; height: 12px; background: #F5A623; }
body.cursor-hover #cursor-ring { width: 56px; height: 56px; border-color: rgba(245,166,35,0.5); }
@media (max-width: 768px) { #cursor-dot, #cursor-ring { display: none; } }
#cursor-dot:not([style]), #cursor-ring:not([style]) { visibility: hidden; }   /* until the first mouse move */

/* ══════════════════════════════════════════════════════════════════
   CANVAS BACKGROUND
══════════════════════════════════════════════════════════════════ */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATED GRADIENT ORBS
══════════════════════════════════════════════════════════════════ */
.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
  animation: orbFloat linear infinite;
  opacity: 0;
  transition: opacity 1s ease;
}
.orb.visible { opacity: 1; }
.orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(26,86,219,0.12) 0%, transparent 70%); top: -200px; right: -200px; animation-duration: 22s; }
.orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%); bottom: 20%; left: -150px; animation-duration: 28s; animation-delay: -8s; }
.orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(59,130,246,0.09) 0%, transparent 70%); top: 50%; right: 10%; animation-duration: 20s; animation-delay: -14s; }
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(30px,-40px) scale(1.05); }
  50%  { transform: translate(-20px,30px) scale(0.95); }
  75%  { transform: translate(40px,20px) scale(1.02); }
  100% { transform: translate(0,0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL BASE CLASSES
══════════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.88); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* ══════════════════════════════════════════════════════════════════
   HERO ANIMATIONS
══════════════════════════════════════════════════════════════════ */

.hero-title-line { display: block; overflow: hidden; }
.hero-title-line span {
  display: block;
  transform: translateY(110%);
  animation: lineReveal 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-title .line-1 span { animation-delay: 2.4s; }
.hero-title .line-2 span { animation-delay: 2.55s; }
.hero-title .line-3 span { animation-delay: 2.7s; }

@keyframes slideUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
@keyframes lineReveal { to { transform: translateY(0); } }
@keyframes heroVisualIn { from { opacity:0; transform: translateX(40px) scale(0.97); } to { opacity:1; transform: translateX(0) scale(1); } }

/* ══════════════════════════════════════════════════════════════════
   STAT COUNTER GLOW
══════════════════════════════════════════════════════════════════ */
.hero-stat-num, .trust-value {
  background: linear-gradient(135deg, #F5A623, #FBBF24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(245,166,35,0.4));
}

/* ══════════════════════════════════════════════════════════════════
   GLITCH EFFECT ON BRAND NAME
══════════════════════════════════════════════════════════════════ */

@keyframes glitch-1 {
  0%  { clip: rect(10px,9999px,40px,0); transform:skew(0.4deg); }
  10% { clip: rect(62px,9999px,74px,0); transform:skew(0.1deg); }
  20% { clip: rect(15px,9999px,23px,0); transform:skew(0.6deg); }
  30% { clip: rect(80px,9999px,95px,0); transform:skew(0.2deg); }
  40% { clip: rect(28px,9999px,36px,0); transform:skew(0.5deg); }
  50% { clip: rect(50px,9999px,70px,0); transform:skew(0.3deg); }
  60% { clip: rect(5px, 9999px,18px,0); transform:skew(0.2deg); }
  70% { clip: rect(72px,9999px,90px,0); transform:skew(0.7deg); }
  80% { clip: rect(35px,9999px,47px,0); transform:skew(0.1deg); }
  90% { clip: rect(20px,9999px,32px,0); transform:skew(0.4deg); }
  100%{ clip: rect(58px,9999px,72px,0); transform:skew(0.6deg); }
}
@keyframes glitch-2 {
  0%  { clip: rect(65px,9999px,80px,0); transform:skew(-0.3deg); }
  10% { clip: rect(10px,9999px,28px,0); transform:skew(-0.6deg); }
  20% { clip: rect(50px,9999px,65px,0); transform:skew(-0.2deg); }
  30% { clip: rect(22px,9999px,38px,0); transform:skew(-0.5deg); }
  40% { clip: rect(75px,9999px,90px,0); transform:skew(-0.1deg); }
  50% { clip: rect(42px,9999px,60px,0); transform:skew(-0.4deg); }
  60% { clip: rect(8px, 9999px,24px,0); transform:skew(-0.7deg); }
  70% { clip: rect(55px,9999px,72px,0); transform:skew(-0.2deg); }
  80% { clip: rect(18px,9999px,35px,0); transform:skew(-0.5deg); }
  90% { clip: rect(60px,9999px,78px,0); transform:skew(-0.1deg); }
  100%{ clip: rect(30px,9999px,48px,0); transform:skew(-0.4deg); }
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED CARD HOVER — 3D TILT
══════════════════════════════════════════════════════════════════ */
.product-card, .project-card, .testi-card, .package-card {
  will-change: transform;
  transform-style: preserve-3d;
  transform-origin: center center;
}
.product-card .card-shine,
.project-card .card-shine,
.testi-card .card-shine,
.package-card .card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}
.product-card:hover .card-shine,
.project-card:hover .card-shine,
.testi-card:hover .card-shine,
.package-card:hover .card-shine { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   BUTTON RIPPLE & MAGNETIC
══════════════════════════════════════════════════════════════════ */

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ══════════════════════════════════════════════════════════════════
   PROGRESS BAR (scroll)
══════════════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1A56DB, #F5A623, #3B82F6);
  z-index: 9997;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(59,130,246,0.6);
}

/* ══════════════════════════════════════════════════════════════════
   SECTION DIVIDER ANIMATED
══════════════════════════════════════════════════════════════════ */

@keyframes shimmerBar { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   FORM VALIDATION STYLES
══════════════════════════════════════════════════════════════════ */
.form-group .field-error {
  font-size: 11px;
  color: #F87171;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 4px;
}
.form-group.has-error .field-error { display: flex; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #F87171 !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
}
.form-group.has-error .mobile-field {
  border-color: #F87171 !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
  border-radius: 10px;
}
.recaptcha-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.recaptcha-error {
  font-size: 11px;
  color: #F87171;
  display: none;
  align-items: center;
  gap: 4px;
}
.recaptcha-error.show { display: flex; }
.form-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.08);
  color: #FCA5A5;
  font-size: 13px;
  line-height: 1.5;
}
.form-status[hidden] { display: none; }
.form-status a { color: #4ADE80; font-weight: 600; text-decoration: underline; }
══════════════════════════════════════════════════════════════════ */
.clients-section {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(6,11,24,0) 0%, rgba(13,20,42,0.6) 50%, rgba(6,11,24,0) 100%);
  position: relative;
  overflow: hidden;
}
.clients-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(26,86,219,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.clients-track-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: clientsScroll 28s linear infinite;
}
.clients-track:hover { animation-play-state: paused; }
@keyframes clientsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.client-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 72px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  cursor: default;
}
.client-logo-item:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(59,130,246,0.3);
  transform: translateY(-3px);
}
.client-logo-item img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7);
  transition: filter 0.3s;
  opacity: 1 !important;
}
.client-logo-item:hover img {
  filter: grayscale(0) brightness(1);
}

/* ══════════════════════════════════════════════════════════════════
   TRUST CARDS — NUMBER GLOW PULSE
══════════════════════════════════════════════════════════════════ */
.trust-card:hover .trust-value {
  filter: drop-shadow(0 0 30px rgba(245,166,35,0.7));
}

.trust-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(59,130,246,0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.trust-card:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   PROCESS STEP CONNECTOR ANIMATION
══════════════════════════════════════════════════════════════════ */

@keyframes connectorFlow { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════════════════════════
   HERO IMAGE CARDS — STAGGERED REVEAL
══════════════════════════════════════════════════════════════════ */
.hero-img-card:nth-child(1) { animation-delay: 2.7s; }
.hero-img-card:nth-child(2) { animation-delay: 2.85s; }
.hero-img-card:nth-child(3) { animation-delay: 3.0s; }

/* ══════════════════════════════════════════════════════════════════
   GALLERY IMAGE — CINEMATIC HOVER
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FLOATING SECURITY BADGE
══════════════════════════════════════════════════════════════════ */
.hero-floating-badge {
  position: absolute;
  bottom: -16px;
  left: 20px;
  background: linear-gradient(135deg, rgba(19,32,64,0.95), rgba(11,15,26,0.98));
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(12px);
  animation: floatBadge 4s ease-in-out infinite;
  z-index: 3;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-floating-badge-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.hero-floating-badge-icon svg { width: 18px; height: 18px; color: #fff; }
.hero-floating-badge-text { font-size: 11px; color: var(--muted); }
.hero-floating-badge-title { font-size: 13px; font-weight: 700; color: var(--white); line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════════
   ANIMATED SECTION BACKGROUNDS
══════════════════════════════════════════════════════════════════ */

.products-section::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
  pointer-events: none;
  animation: sectionGlow 8s ease-in-out infinite;
  top: -100px; right: -100px;
}
@keyframes sectionGlow { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.3);opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   SCAN LINE EFFECT ON HERO
══════════════════════════════════════════════════════════════════ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════
   STICKY NAV — SCROLL MORPH
══════════════════════════════════════════════════════════════════ */

.cat-nav.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  background: rgba(6,11,24,0.98);
}

/* ══════════════════════════════════════════════════════════════════
   PROJECT CARD — OVERLAY ON HOVER
══════════════════════════════════════════════════════════════════ */
.project-img::after {
  content: 'View Details';
  position: absolute;
  inset: 0;
  background: rgba(26,86,219,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-card:hover .project-img::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIAL — QUOTE ANIMATION
══════════════════════════════════════════════════════════════════ */

@keyframes quotePulse { 0%,100%{opacity:0.2} 50%{opacity:0.4} }

/* ══════════════════════════════════════════════════════════════════
   FOOTER BRAND — SHIMMER
══════════════════════════════════════════════════════════════════ */

@keyframes footerShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ══════════════════════════════════════════════════════════════════
   TRUST BAR — PAUSE ON HOVER
══════════════════════════════════════════════════════════════════ */
.trust-bar:hover .trust-bar-track { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════════
   PULSE DOT RING
══════════════════════════════════════════════════════════════════ */

.hero-eyebrow span::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--electric);
  opacity: 0;
  animation: ringPulse 2s ease infinite;
}
@keyframes ringPulse { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.5);opacity:0} }

/* ══════════════════════════════════════════════════════════════════
   ABOUT SECTION — IMAGE REVEAL
══════════════════════════════════════════════════════════════════ */

.about-img-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, transparent 100%);
  animation: imgWipe 1.2s cubic-bezier(0.77,0,0.18,1) forwards;
  animation-play-state: paused;
}
.about-img-main.revealed::after { animation-play-state: running; }
@keyframes imgWipe { to { transform: translateX(100%); opacity: 0; } }

/* ══════════════════════════════════════════════════════════════════
   COUNTER ANIMATION NUMBERS
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   AREA TAG HOVER WAVE
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   MAGNETIC BUTTONS GLOW
══════════════════════════════════════════════════════════════════ */

.btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1A56DB, #3B82F6);
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s;
}
.btn-primary:hover::before { opacity: 0.7; }

.btn-gold::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F5A623, #FBBF24);
  z-index: -1;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s;
}
.btn-gold:hover::before { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP STICKY — PULSE RING
══════════════════════════════════════════════════════════════════ */

.sticky-btn.whatsapp::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(1.6);opacity:0} }

/* ══════════════════════════════════════════════════════════════════
   SPEC DOTS — STAGGER ANIMATION
══════════════════════════════════════════════════════════════════ */

.card-spec-item:nth-child(2) .spec-dot { animation-delay: 0.3s; }
.card-spec-item:nth-child(3) .spec-dot { animation-delay: 0.6s; }
.card-spec-item:nth-child(4) .spec-dot { animation-delay: 0.9s; }
.card-spec-item:nth-child(5) .spec-dot { animation-delay: 1.2s; }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4)} 50%{box-shadow:0 0 0 4px rgba(59,130,246,0)} }

/* ══════════════════════════════════════════════════════════════════
   CYBER SHIELD — ENHANCED RINGS
══════════════════════════════════════════════════════════════════ */

@keyframes ringRotateCCW { to { transform: rotate(-360deg); } }

/* ══════════════════════════════════════════════════════════════════
   FOOTER CTA SECTION
══════════════════════════════════════════════════════════════════ */

.footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(26,86,219,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(245,166,35,0.1) 0%, transparent 60%);
  pointer-events: none;
  animation: ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   SECTION ENTRANCE — CLIP PATH WIPE
══════════════════════════════════════════════════════════════════ */
.clip-reveal {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 1s cubic-bezier(0.16,1,0.3,1);
}
.clip-reveal.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ══════════════════════════════════════════════════════════════════
   LOADING STATES FOR IMAGES
══════════════════════════════════════════════════════════════════ */

img.loading { opacity: 0; }

/* ══════════════════════════════════════════════════════════════════
   FORM INPUT — GLOW ON FOCUS
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   HERO GRID — SCANLINE PULSE ON IMAGE CARDS
══════════════════════════════════════════════════════════════════ */
.hero-img-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.8), transparent);
  top: -2px;
  animation: scanLine 3s linear infinite;
  pointer-events: none;
}
@keyframes scanLine {
  0%  { top: -2px; opacity: 1; }
  95% { opacity: 0.5; }
  100%{ top: 102%; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   PROCESS STEP NUMBER COUNTER RING
══════════════════════════════════════════════════════════════════ */
.step-num::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.15);
  animation: stepRing 3s ease-in-out infinite;
}
.step-num.gold-step::after { border-color: rgba(245,166,35,0.15); }
@keyframes stepRing { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.15);opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIAL — FEATURED GLOW
══════════════════════════════════════════════════════════════════ */
.testi-card:nth-child(2) {
  border-color: rgba(59,130,246,0.25);
  background: linear-gradient(135deg, rgba(19,32,64,0.9), rgba(26,42,80,0.6));
}

/* ---- main layout ---- */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --ink:      #0B0F1A;
  --deep:     #0E1628;
  --navy:     #132040;
  --panel:    #1A2A4A;
  --blue:     #1A56DB;
  --electric: #3B82F6;
  --gold:     #F5A623;
  --gold-lt:  #FBBF24;
  --white:    #F8FAFF;
  --muted:    #94A3B8;
  --border:   rgba(59,130,246,0.18);
  --card-bg:  rgba(19,32,64,0.85);
  --ff-head:  'Bebas Neue', sans-serif;
  --ff-serif: 'DM Serif Display', serif;
  --ff-body:  'DM Sans', sans-serif;
  --radius:   14px;
  --shadow:   0 8px 40px rgba(0,0,0,0.45);
}

/* ─── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } /* overflow-x on html required for iOS Safari */
body {
  font-family: var(--ff-body);
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img { transition: opacity 0.4s ease;
   max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--ff-body); }

/* ─── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

/* ─── UTILITY ───────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--electric);
}
.section-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 16px;
}

.gold { color: var(--gold); }
.blue { color: var(--electric); }
.text-center { text-align: center; }
.text-center .section-label { justify-content: center; }
.text-center .section-label::before { display: none; }
.text-center .section-subtitle { margin: 0 auto; }

/* ─── NOISE OVERLAY ─────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ─── HERO BANNER ───────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, #060B18 0%, #0B1530 40%, #1A2A50 100%);
  padding: 80px 0 60px;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -150px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(26,86,219,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-eyebrow { opacity: 0; animation: slideUp 0.7s ease 2.2s forwards;
  
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 20px;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-eyebrow span { position: relative;
   width: 6px; height: 6px; flex-shrink: 0; background: var(--electric); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.hero-title {
  font-family: var(--ff-head);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-title em {
  font-style: italic;
  font-family: var(--ff-serif);
  color: var(--gold);
  font-size: 0.75em;
  display: block;
  letter-spacing: 0;
}
.hero-desc { opacity: 0; animation: slideUp 0.8s ease 2.85s forwards;
  
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 480px;
}
.hero-ctas { opacity: 0; animation: slideUp 0.8s ease 3s forwards;
   display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { opacity: 0; animation: slideUp 0.7s ease 3.15s forwards;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.hero-stat-num {
  font-family: var(--ff-head);
  font-size: 2.2rem;
  color: var(--gold);
  letter-spacing: 1px;
}
.hero-stat-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero-visual { opacity: 0; animation: heroVisualIn 1.2s cubic-bezier(0.16,1,0.3,1) 2.6s forwards;
  
  position: relative;
}
.hero-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.hero-img-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.hero-img-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.4s;
}
.hero-img-card:hover img { opacity: 1; transform: scale(1.04); }
.hero-img-card:first-child { grid-row: 1 / 3; }
.hero-img-card:first-child img { height: 100%; min-height: 280px; }
.hero-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(6,11,24,0.9), transparent);
  padding: 20px 12px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
  
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s;
}
.btn:hover::after { background: rgba(255,255,255,0.07); }
.btn-primary { position: relative;
  
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,86,219,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,86,219,0.5); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, #E8960F 100%);
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(245,166,35,0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,166,35,0.45); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-outline:hover { border-color: var(--electric); color: var(--electric); }
.btn-ghost {
  background: rgba(26,86,219,0.1);
  color: var(--electric);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(26,86,219,0.2); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-green {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34,197,94,0.3);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,0.4); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── TRUST BAR ─────────────────────────────────────────────── */
.trust-bar {
  background: var(--deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
}
.trust-bar-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
.trust-item svg { color: var(--electric); width: 16px; height: 16px; }
.trust-dot { width: 4px; height: 4px; background: var(--border); border-radius: 50%; flex-shrink: 0; }

/* ─── NAV TABS ──────────────────────────────────────────────── */
.cat-nav { transition: box-shadow 0.3s ease, background 0.3s ease;
  
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(11,15,26,0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.cat-nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  transition: all 0.2s;
}
.cat-tab:hover { color: var(--white); }
.cat-tab.active { color: var(--electric); border-bottom-color: var(--electric); }
.cat-tab svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── PRODUCT SECTIONS ──────────────────────────────────────── */
.products-section { position: relative; overflow: hidden;
  
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.products-section:nth-child(even) { background: var(--deep); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}

/* ─── PRODUCT CARD ──────────────────────────────────────────── */
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border-color: rgba(59,130,246,0.4);
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--electric), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.product-card:hover::before { opacity: 1; }
.card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--navy);
}

.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.card-badge.gold { background: var(--gold); color: var(--ink); }
.card-badge.green { background: #16A34A; }
.card-amc {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(34,197,94,0.4);
  color: #4ADE80;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 6px;
}

.card-specs {
  margin-bottom: 16px;
  flex: 1;
}
.card-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: #CBD5E1;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.card-spec-item:last-child { border: none; }
.spec-dot { animation: dotPulse 2s ease-in-out infinite;
  
  width: 5px;
  height: 5px;
  background: var(--electric);
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.card-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.meta-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 11px;
  color: var(--muted);
}
.meta-tag svg { width: 12px; height: 12px; }
.meta-tag.highlight { border-color: rgba(245,166,35,0.3); color: var(--gold-lt); }
.card-price {
  font-family: var(--ff-head);
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.card-price-note { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.card-ctas { display: flex; flex-direction: column; gap: 8px; }
.card-ctas-row { display: flex; gap: 8px; }
.card-ctas-row .btn { flex: 1; justify-content: center; }

/* ─── PACKAGES ──────────────────────────────────────────────── */
.packages-section {
  padding: 90px 0;
  background: var(--deep);
  position: relative;
  overflow: hidden;
}
.packages-section::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26,86,219,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.package-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.package-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.package-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.package-card:hover::after { transform: scaleX(1); }
.package-card.featured {
  border-color: rgba(245,166,35,0.4);
  background: linear-gradient(135deg, rgba(19,32,64,0.95), rgba(30,20,10,0.5));
}
.package-card.featured::after { background: var(--gold); transform: scaleX(1); }
.pkg-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(26,86,219,0.15);
  border: 1px solid var(--border);
}
.pkg-icon svg { width: 26px; height: 26px; color: var(--electric); }
.package-card.featured .pkg-icon { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.3); }
.package-card.featured .pkg-icon svg { color: var(--gold); }
.pkg-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.pkg-name {
  font-family: var(--ff-serif);
  font-size: 1.3rem;
  color: var(--white);
  margin-bottom: 8px;
}
.pkg-desc { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }
.pkg-includes { margin-bottom: 24px; }
.pkg-includes li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #CBD5E1;
  padding: 5px 0;
}
.pkg-includes li::before {
  content: '';
  width: 16px;
  height: 16px;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%233B82F6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.package-card.featured .pkg-includes li::before {
  background-color: rgba(245,166,35,0.15);
  border-color: rgba(245,166,35,0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23F5A623' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pkg-price {
  font-family: var(--ff-head);
  font-size: 2rem;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.package-card.featured .pkg-price { color: var(--gold); }
.pkg-price-note { font-size: 12px; color: var(--muted); margin-bottom: 20px; }

/* ─── TRUST / SOCIAL PROOF ──────────────────────────────────── */
.trust-section {
  padding: 80px 0;
  background: var(--ink);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 52px;
}
.trust-card { position: relative;
  overflow: hidden;
  
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26,86,219,0.12);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.trust-icon svg { width: 28px; height: 28px; color: var(--electric); }
.trust-value {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.trust-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
/* Installation gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px;
  gap: 12px;
  margin-top: 48px;
}
.gallery-item {
  cursor: pointer;
  
  background: var(--navy);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}
.gallery-item img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, filter 0.4s ease !important;
  filter: brightness(0.8) saturate(0.9);
   width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.gallery-item:hover img { filter: brightness(1) saturate(1.1) !important;
   opacity: 1; transform: scale(1.06); }
.gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-item:nth-child(2) { grid-column: 3 / 4; }
.gallery-item:nth-child(3) { grid-column: 4 / 5; }
.gallery-item:nth-child(4) { grid-column: 3 / 4; }
.gallery-item:nth-child(5) { grid-column: 4 / 5; }
.gallery-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(6,11,24,0.85);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* ─── SECUREVISION UPSELL ───────────────────────────────────── */
.cybersec-section {
  background: linear-gradient(135deg, #060B18 0%, #0E1A30 50%, #061025 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.cybersec-section::before {
  content: 'SECURE';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-head);
  font-size: 18vw;
  color: rgba(26,86,219,0.04);
  pointer-events: none;
  line-height: 1;
  letter-spacing: -5px;
}
.cybersec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cybersec-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
.cyber-feat {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  background: rgba(26,86,219,0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.3s;
}
.cyber-feat:hover { border-color: rgba(59,130,246,0.35); background: rgba(26,86,219,0.1); }
.cyber-feat-icon {
  width: 42px;
  height: 42px;
  background: rgba(26,86,219,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.cyber-feat-icon svg { width: 20px; height: 20px; color: var(--electric); }
.cyber-feat-text h3, .cyber-feat-text h4 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.cyber-feat-text p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cybersec-visual {
  position: relative;
}
.cyber-shield {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}
.cyber-shield-ring {
  
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cyber-shield-ring::before { animation: ringRotateCCW 15s linear infinite;
  
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.15);
}
.cyber-shield-ring::after {
  content: '';
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.1);
  animation: spin 20s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cyber-center {
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, var(--blue), #0D3B9E);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px rgba(26,86,219,0.4);
}
.cyber-center svg { width: 50px; height: 50px; color: #fff; margin-bottom: 6px; }
.cyber-center span {
  font-family: var(--ff-head);
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.8);
}

/* ─── AMC SECTION ───────────────────────────────────────────── */
.amc-section {
  padding: 80px 0;
  background: var(--deep);
}
.amc-card {
  background: linear-gradient(135deg, var(--navy) 0%, rgba(19,32,64,0.6) 100%);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 20px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.amc-card::before {
  content: 'AMC';
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-family: var(--ff-head);
  font-size: 12rem;
  color: rgba(59,130,246,0.05);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -5px;
}
.amc-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.amc-feat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px;
}
.amc-feat-icon { font-size: 22px; margin-bottom: 8px; }
.amc-feat-label { font-size: 12px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.amc-feat-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.amc-plans { display: flex; flex-direction: column; gap: 16px; }
.amc-plan {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.3s;
}
.amc-plan:hover { border-color: rgba(59,130,246,0.4); transform: translateX(6px); }
.amc-plan.best {
  border-color: rgba(245,166,35,0.4);
  background: rgba(245,166,35,0.05);
}
.amc-plan-name { font-size: 14px; font-weight: 600; color: var(--white); }
.amc-plan-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.amc-plan-price {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ─── ABOUT SECTION ─────────────────────────────────────────── */
.about-section {
  padding: 90px 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: 'LALIT';
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-head);
  font-size: 18vw;
  color: rgba(59,130,246,0.03);
  pointer-events: none;
  line-height: 1;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.about-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: 8px;
  padding: 10px 18px;
  margin-bottom: 28px;
}
.about-brand-name {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  letter-spacing: 3px;
  color: var(--gold);
}
.about-brand-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
.about-text {
  font-size: 1rem;
  color: #CBD5E1;
  line-height: 1.8;
  margin-bottom: 24px;
}
.about-text strong { color: var(--white); }
.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}
.about-pillar {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.2s;
}
.about-pillar:hover { border-color: rgba(59,130,246,0.3); }
.about-pillar-icon { font-size: 20px; margin-bottom: 8px; }
.about-pillar-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.about-pillar-text { font-size: 12px; color: var(--muted); line-height: 1.4; }
.about-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-img-sm {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.about-img-sm img { width: 100%; height: 160px; object-fit: cover; }
.about-cert-strip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.cert-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.cert-item svg { color: var(--electric); width: 15px; height: 15px; flex-shrink: 0; }

/* ─── PROJECTS SECTION ──────────────────────────────────────── */
.projects-section {
  padding: 90px 0;
  background: var(--deep);
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.project-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  border-color: rgba(59,130,246,0.35);
}
.project-img {
  height: 210px;
  overflow: hidden;
  position: relative;
  background: var(--navy);
}
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.project-status {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.4);
  color: #4ADE80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.project-body { padding: 22px; }
.project-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 6px;
}
.project-title {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}
.project-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.project-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.project-meta-row svg { width: 14px; height: 14px; color: var(--electric); flex-shrink: 0; }
.project-spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.project-spec-pill {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  color: var(--electric);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
}

/* ─── PROCESS SECTION ───────────────────────────────────────── */
.process-section {
  padding: 90px 0;
  background: var(--ink);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.process-steps::before {
  animation: connectorFlow 3s linear infinite;
  background-size: 200% 100%;
  
  content: '';
  position: absolute;
  top: 36px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), var(--electric), var(--border), transparent);
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  position: relative;
  transition: all 0.3s;
}
.process-step:hover .step-num { border-color: var(--electric); background: rgba(59,130,246,0.15); }
.step-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
}
.step-num svg { width: 28px; height: 28px; color: var(--electric); }
.step-num.gold-step { border-color: rgba(245,166,35,0.35); }
.step-num.gold-step svg { color: var(--gold); }
.step-label {
  font-family: var(--ff-head);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--electric);
  margin-bottom: 6px;
}
.step-label.gold-label { color: var(--gold); }
.step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
  line-height: 1.3;
}
.step-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ─── TESTIMONIALS ──────────────────────────────────────────── */
.testimonials-section {
  padding: 90px 0;
  background: var(--deep);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 52px;
}
.testi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all 0.3s;
  position: relative;
}
.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.testi-quote-icon { animation: quotePulse 3s ease-in-out infinite;
  
  font-family: 'Georgia', serif;
  font-size: 4rem;
  line-height: 0.5;
  color: rgba(59,130,246,0.2);
  margin-bottom: 16px;
  display: block;
}
.testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}
.testi-stars svg { width: 14px; height: 14px; fill: var(--gold); }
.testi-text {
  font-size: 14px;
  color: #CBD5E1;
  line-height: 1.75;
  margin-bottom: 22px;
  font-style: italic;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-size: 1.1rem;
  color: var(--white);
  flex-shrink: 0;
}
.testi-author-name { font-size: 14px; font-weight: 700; color: var(--white); }
.testi-author-role { font-size: 12px; color: var(--muted); }
.testi-service-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(59,130,246,0.1);
  border: 1px solid var(--border);
  color: var(--electric);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ─── FAQ SECTION ───────────────────────────────────────────── */
.faq-section {
  padding: 90px 0;
  background: var(--ink);
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
  margin-top: 52px;
}
.faq-sidebar h3 {
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--white);
}
.faq-sidebar p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.faq-contact-strip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.faq-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.faq-contact-item:last-child { border: none; }
.faq-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(59,130,246,0.1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-contact-icon svg { width: 16px; height: 16px; color: var(--electric); }
.faq-contact-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.faq-contact-value { font-size: 14px; font-weight: 600; color: var(--white); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item.open { border-color: rgba(59,130,246,0.35); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--electric); }
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.3s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--electric); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 22px;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
  padding-bottom: 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: #060B18;
  border-top: 1px solid var(--border);
  padding: 70px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 60px;
  padding-bottom: 56px;
}
.footer-brand-logo { background: linear-gradient(90deg, #F8FAFF 40%, #F5A623 50%, #F8FAFF 60%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: footerShimmer 4s ease infinite;
  
  font-family: var(--ff-head);
  font-size: 2rem;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 4px;
}
.footer-brand-sub {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-brand-desc {
  font-size: 13px;
  color: #8A99AE;
  line-height: 1.75;
  margin-bottom: 24px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.2s;
}
.footer-social a:hover { background: rgba(59,130,246,0.15); border-color: var(--electric); color: var(--electric); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px;
  color: #8A99AE;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-links a:hover { color: var(--electric); }
.footer-links a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.2s;
}
.footer-links a:hover::before { background: var(--electric); }
.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.footer-contact-icon {
  width: 32px;
  height: 32px;
  background: rgba(59,130,246,0.08);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.footer-contact-icon svg { width: 14px; height: 14px; color: var(--electric); }
.footer-contact-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.footer-contact-value { font-size: 13px; color: #94A3B8; line-height: 1.5; }
.footer-contact-value a { color: #94A3B8; transition: color 0.2s; }
.footer-contact-value a:hover { color: var(--electric); }
.footer-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.footer-area-tag {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #8A99AE;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 12px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: 12px;
  color: #8A99AE;
}
.footer-copyright a { color: #8A99AE; transition: color 0.2s; }
.footer-copyright a:hover { color: var(--electric); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: #8A99AE; transition: color 0.2s; }
.footer-legal a:hover { color: var(--muted); }

/* ─── COVERAGE ──────────────────────────────────────────────── */
.coverage-section {
  padding: 70px 0;
  background: var(--ink);
  text-align: center;
}
.coverage-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 36px;
}
.area-tag { transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--muted);
}
.area-tag:hover { transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(59,130,246,0.2) !important;
   border-color: var(--electric); color: var(--electric); }

/* ─── STICKY BUTTONS ────────────────────────────────────────── */
.sticky-actions {
  position: fixed;
  right: 24px;
  bottom: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sticky-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: all 0.25s;
  cursor: pointer;
  text-decoration: none;
}
.sticky-btn:hover { transform: scale(1.12); }

.sticky-btn.phone { background: var(--blue); }
.sticky-btn svg { width: 24px; height: 24px; color: #fff; }
.sticky-label {
  position: absolute;
  right: 60px;
  background: var(--deep);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.sticky-btn:hover .sticky-label { opacity: 1; }

/* ─── MODAL ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  padding: 40px;
  position: relative;
  transform: translateY(30px) scale(0.97);
  transition: all 0.35s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(26,86,219,0.15);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.modal-icon svg { width: 28px; height: 28px; color: var(--electric); }
.modal-icon.gold-icon { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3); }
.modal-icon.gold-icon svg { color: var(--gold); }
.modal-title {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 6px;
}
.modal-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.form-grid { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 14px;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(148,163,184,0.5); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--electric) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12), 0 0 20px rgba(59,130,246,0.1) !important;
  background: rgba(26,86,219,0.06);
}
.form-group select { appearance: none; cursor: pointer; }
.form-group select option { background: var(--deep); }
.form-group textarea { resize: vertical; min-height: 90px; }
.mobile-field { display: flex; align-items: stretch; }
.mobile-prefix {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.mobile-field input {
  border-radius: 0 8px 8px 0;
  flex: 1;
}
.form-submit {
  background: linear-gradient(135deg, var(--blue), #0D3B9E);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: 100%;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(26,86,219,0.4);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26,86,219,0.5); }
.form-submit svg { width: 18px; height: 18px; }
.form-note {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.6;
}
.modal-success {
  text-align: center;
  padding: 20px 0;
  display: none;
}
.success-icon {
  width: 72px;
  height: 72px;
  background: rgba(34,197,94,0.1);
  border: 2px solid #22C55E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.success-icon svg { width: 36px; height: 36px; color: #22C55E; }
.success-title { font-family: var(--ff-serif); font-size: 1.5rem; color: var(--white); margin-bottom: 10px; }
.success-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }

/* ─── FOOTER CTA ────────────────────────────────────────────── */
.footer-cta { position: relative;
  overflow: hidden;
  
  padding: 80px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--navy), var(--ink));
  border-top: 1px solid var(--border);
}
.footer-cta-title {
  font-family: var(--ff-head);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 2px;
  margin-bottom: 16px;
  line-height: 1;
}
.footer-cta-sub { font-size: 1rem; color: var(--muted); margin-bottom: 36px; }
.footer-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   TABLET — 1024px
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   MOBILE — 768px
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   SMALL MOBILE — 480px
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   EXTRA SMALL — 360px
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP — PROPER COLOURS
══════════════════════════════════════════════════════════════════ */
.sticky-btn.whatsapp { position: relative;
   background: #25D366 !important; border: none !important; }
.sticky-btn.whatsapp svg path { fill: #fff !important; }
a[href*="wa.me"] svg path { fill: currentColor; }

/* ══════════════════════════════════════════════════════════════════
   NAV LOGO
══════════════════════════════════════════════════════════════════ */
.cat-nav-logo { transition: opacity 0.2s; }
.cat-nav-logo:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════
   HERO BRAND ROW
══════════════════════════════════════════════════════════════════ */
.hero-brand-row { animation: slideUp 0.7s ease 2.0s both; }

/* ══════════════════════════════════════════════════════════════════
   PERFORMANCE — REDUCE MOTION
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #bg-canvas { display: none; }
  .orb { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   TOUCH DEVICE — DISABLE CANVAS + CURSOR
══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none !important; }
  #bg-canvas { opacity: 0.25; }
  .sticky-label { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO VISUAL — SHOW ON TABLET, HIDE ON PHONE
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CARD IMAGES — OBJECT FIT
══════════════════════════════════════════════════════════════════ */
.card-image img { width: 100%;
  height: 100%;
  object-fit: cover;
  
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease !important;
  will-change: transform;
}
.product-card:hover .card-image img {
   transform: scale(1.06) !important; }
.project-card:hover .project-img img {
   transform: scale(1.08) !important; }

/* ══════════════════════════════════════════════════════════════════
   ABOUT IMAGE
══════════════════════════════════════════════════════════════════ */
.about-img-main {
  position: relative;
  border: 1px solid var(--border);
   overflow: hidden; border-radius: var(--radius); }
.about-img-main img {
   width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.about-img-main:hover img { transform: scale(1.04); }

/* ══════════════════════════════════════════════════════════════════
   FLUID FONT SIZES
══════════════════════════════════════════════════════════════════ */
.section-label { font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
   font-size: clamp(10px, 2vw, 11px); }
.section-subtitle { color: var(--muted);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
   font-size: clamp(0.88rem, 2.5vw, 1.05rem); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE TRUST BAR SPEED
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FLOATING BADGE — DESKTOP ONLY
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FOOTER COMPACT MOBILE
══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE FIX PATCH — v11
══════════════════════════════════════════════════════════════════ */

/* ── Gallery grid spans reset on tablet ──────────────────── */

/* ── Hero section: prevent brand-row overflow ────────────── */

/* ── Category nav: better touch targets ──────────────────── */

/* ── Clients section: reduce vertical padding ────────────── */

/* ── About cert strip: stack nicely ──────────────────────── */

/* ── reCAPTCHA: prevent overflow on very small screens ────── */

/* ── Modal: bottom sheet on small phones ─────────────────── */

/* ── Products grid: enforce single col on mobile ─────────── */

/* ── Section spacing: reduce on mobile ───────────────────── */

/* ── Sticky action buttons: better placement ─────────────── */

/* ── Forms inside modal: full width inputs ───────────────── */

/* ── Cards: ensure text doesn't overflow ────────────────── */
.card-name { font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.25;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
   word-break: break-word; }
.card-headline { font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  font-style: italic;
   word-break: break-word; }

/* ── Trust bar: keep readable ────────────────────────────── */

/* ── Package cards price: no overflow ───────────────────── */

/* ── Footer: bottom padding for sticky buttons ──────────── */

/* ── Section head: prevent button overflow ───────────────── */

/* ══════════════════════════════════════════════════════════════════
   HERO TIMING — hero animations wait for the preloader (body.is-ready)
══════════════════════════════════════════════════════════════════ */
body:not(.is-ready) .hero,
body:not(.is-ready) .hero * { animation-play-state: paused !important; }
body .hero-brand-row { animation-delay: .05s; }
body .hero-eyebrow { animation-delay: .15s; }
body .hero-title .line-2 span { animation-delay: 1.05s; }
body .hero-title .line-3 span { animation-delay: 1.2s; }
body .hero-desc { animation-delay: 1.4s; }
body .hero-ctas { animation-delay: 1.55s; }
body .hero-stats { animation-delay: 1.7s; }
body .hero-visual { animation-delay: .9s; }
body .hero-img-card:nth-child(1) { animation-delay: 1s; }
body .hero-img-card:nth-child(2) { animation-delay: 1.15s; }

/* ══════════════════════════════════════════════════════════════════
   ELÈTTRON — POWER-ON WORDMARK
   Wireframe letters → scan beam ignites each letter like a neon tube →
   idle electric arcs + security scans → 3D tilt / magnetic letters on hover
══════════════════════════════════════════════════════════════════ */
.hero-title .line-1 { overflow: visible; font-size: 1.15em; margin-bottom: .06em; }
.hero-title .line-1 .ex-word {
  display: inline-block; position: relative; white-space: nowrap;
  transform: none; animation: none;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.hero-title .line-1 .ex-l {
  display: inline-block; position: relative;
  transform: none; animation: none; opacity: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(96,165,250,.6);
  transition: translate .35s cubic-bezier(.2,.8,.2,1), -webkit-text-stroke-color .5s;
}
.hero-title .line-1 .ex-l::after {
  content: attr(data-c);
  position: absolute; left: 0; top: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #E3EDFF 45%, #8DB3FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; -webkit-text-stroke: 0;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(59,130,246,.55));
  transition: filter .15s ease;
}
.hero-title .line-1 .ex-l.ex-accent::after {
  background: linear-gradient(180deg, #FFF3C4 0%, #FBBF24 50%, #F5A623 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(245,166,35,.6));
}
body.is-ready .hero-title .line-1 .ex-l {
  animation: exWire .75s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes exWire {
  from { opacity: 0; transform: translateY(45%) rotateX(75deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-title .line-1 .ex-l.on { -webkit-text-stroke-color: rgba(147,197,253,.18); }
.hero-title .line-1 .ex-l.on::after { opacity: 1; animation: exIgnite 1s linear; }
@keyframes exIgnite {
  0% {opacity:0} 6% {opacity:.9} 10% {opacity:.05} 18% {opacity:1} 22% {opacity:.2}
  32% {opacity:1} 36% {opacity:.55} 44%,100% {opacity:1}
}
.hero-title .line-1 .ex-l.zap::after {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px rgba(96,165,250,1)) brightness(1.3);
}
.hero-title .line-1 .ex-l.ex-accent.zap::after {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px rgba(245,166,35,1)) brightness(1.2);
}
.ex-beam {
  position: absolute; top: -14%; bottom: -14%; left: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(147,197,253,.9) 20%, #fff 50%, rgba(147,197,253,.9) 80%, transparent);
  box-shadow: 0 0 14px 3px rgba(59,130,246,.85), 0 0 44px 10px rgba(59,130,246,.3);
  border-radius: 2px; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.ex-beam::before {
  content: ''; position: absolute; top: 8%; bottom: 8%; right: 1px; width: 70px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.2));
}
.ex-fx {
  position: absolute; left: -15%; top: -50%; width: 130%; height: 200%;
  pointer-events: none;
}

/* Live system-status strip under the title */
.hero-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: -4px 0 20px;
  font: 600 10.5px/1 var(--ff-body); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); opacity: 0;
}
body.is-ready .hero-status { animation: slideUp .7s ease 1.25s forwards; }
.hs-item { display: inline-flex; align-items: center; gap: 7px; }
.hs-item b { color: #86EFAC; font-weight: 700; }
.hs-item i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: hsPulse 2s infinite; }
.hs-item i.rec { background: #EF4444; animation: camBlink 1s steps(2, jump-none) infinite; }
.hs-item b.rec { color: #FCA5A5; }
.hs-time { font-variant-numeric: tabular-nums; color: var(--electric); border-left: 1px solid var(--border); padding-left: 14px; }
@keyframes hsPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%,100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
@keyframes camBlink { 0% { opacity: 1; } 100% { opacity: .15; } }

/* Hero photos become live camera feeds */
.cam-hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; color: rgba(248,250,255,.9); }
.cam-id { position: absolute; top: 14px; left: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.cam-rec { position: absolute; top: 28px; left: 16px; color: #FCA5A5; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.cam-rec::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; margin-right: 5px; vertical-align: 1px; animation: camBlink 1s steps(2, jump-none) infinite; }
.cam-ts { position: absolute; top: 14px; right: 16px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.cam-c { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(147,197,253,.75); }
.cam-c.tl { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; }
.cam-c.tr { top: 6px; right: 6px; border-top-width: 2px; border-right-width: 2px; }
.cam-c.bl { bottom: 6px; left: 6px; border-bottom-width: 2px; border-left-width: 2px; }
.cam-c.br { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; }
.cam-scan { position: absolute; left: 0; right: 0; height: 35%; top: -35%;
  background: linear-gradient(180deg, transparent, rgba(59,130,246,.08) 80%, rgba(147,197,253,.3));
  animation: camScan 3.8s linear infinite; }
.hero-img-card:nth-child(2) .cam-scan { animation-delay: -1.3s; }
.hero-img-card:nth-child(3) .cam-scan { animation-delay: -2.5s; }
@keyframes camScan { to { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hero-title .line-1 .ex-l, .hero-title .line-1 .ex-l::after { opacity: 1 !important; animation: none !important; transform: none !important; }
  .cam-scan, .hs-item i, .cam-rec::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════════════════════════════════ */
a.cat-tab { text-decoration: none; }
.pp-hero { position: relative; padding: 70px 0 34px; background: linear-gradient(135deg, #060B18 0%, #0B1530 45%, #1A2A50 100%); overflow: hidden; }
.pp-hero::after { content: ''; position: absolute; top: -160px; right: -160px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(26,86,219,.2) 0%, transparent 70%); pointer-events: none; }
.pp-crumbs { font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-bottom: 18px; }
.pp-crumbs a { color: var(--electric); }
.pp-title { font-family: var(--ff-head); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; letter-spacing: 1px; margin-bottom: 16px; }
.pp-title em { display: block; font-family: var(--ff-serif); font-style: italic; color: var(--gold); letter-spacing: 0; font-size: .82em; }
.pp-sub { color: var(--muted); max-width: 640px; line-height: 1.7; margin-bottom: 26px; }
.pp-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; position: relative; z-index: 1; }
.pp-search { flex: 1 1 280px; max-width: 420px; position: relative; }
.pp-search input { width: 100%; padding: 13px 16px 13px 42px; background: rgba(19,32,64,.85); border: 1px solid var(--border); border-radius: 10px; color: var(--white); font: 500 14px var(--ff-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.pp-search input:focus { border-color: var(--electric); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.pp-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { padding: 9px 16px; border-radius: 100px; background: rgba(26,86,219,.08); border: 1px solid var(--border); color: var(--muted); font: 600 12.5px var(--ff-body); letter-spacing: .4px; transition: all .2s; }
.pp-chip:hover { color: var(--white); border-color: rgba(59,130,246,.45); }
.pp-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 18px rgba(26,86,219,.4); }
.pp-note { margin-top: 22px; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 760px; }
.pp-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); margin-top: 2px; }

.pp-cat { padding: 56px 0 8px; scroll-margin-top: 70px; }
.pp-cat-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pp-cat-head .section-title { margin-bottom: 0; }
.pp-cat-count { font: 600 11px var(--ff-body); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }

.pp-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s; }
.pp-card:hover { transform: translateY(-6px); border-color: rgba(59,130,246,.5); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(59,130,246,.15); }
.pp-feed { position: relative; height: 150px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(59,130,246,.18), transparent 65%), linear-gradient(180deg, #0D1830, #0A1226); border-bottom: 1px solid var(--border); overflow: hidden; }
.pp-feed::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(59,130,246,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,.07) 1px, transparent 1px); background-size: 22px 22px; }
.pp-feed svg.pp-ico { position: relative; width: 62px; height: 62px; color: #93C5FD; filter: drop-shadow(0 0 14px rgba(59,130,246,.6)); transition: transform .5s cubic-bezier(.2,.8,.2,1), color .3s; }
.pp-card:hover .pp-feed svg.pp-ico { transform: scale(1.12) rotate(-4deg); color: #fff; }
.pp-feed .cam-scan { animation-duration: 3.2s; opacity: 0; transition: opacity .3s; }
.pp-card:hover .pp-feed .cam-scan { opacity: 1; }
.pp-code { position: absolute; top: 12px; left: 14px; font: 600 9.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; color: rgba(147,197,253,.85); }
.pp-tag { position: absolute; top: 10px; right: 12px; padding: 4px 10px; border-radius: 100px; font: 700 10px var(--ff-body); letter-spacing: 1px; text-transform: uppercase; background: rgba(245,166,35,.14); border: 1px solid rgba(245,166,35,.4); color: var(--gold-lt); }
.pp-tag.blue { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.45); color: #93C5FD; }
.pp-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.pp-brands { font: 600 10.5px var(--ff-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--electric); margin-bottom: 6px; }
.pp-name { font-family: var(--ff-serif); font-size: 1.28rem; line-height: 1.25; color: var(--white); margin-bottom: 8px; }
.pp-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.pp-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pp-specs span { padding: 5px 10px; border-radius: 6px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.18); font-size: 11.5px; font-weight: 600; color: #CBD5E1; }
.pp-price { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-top: 14px; border-top: 1px dashed rgba(59,130,246,.2); margin-bottom: 14px; }
.pp-from { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pp-amt { font-family: var(--ff-head); font-size: 2rem; letter-spacing: 1px; line-height: 1; background: linear-gradient(135deg, #F5A623, #FBBF24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pp-amt.req { font-size: 1.45rem; }
.pp-unit { font-size: 12px; color: var(--muted); }
.pp-extra { width: 100%; font-size: 12px; color: #86EFAC; }
.pp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-actions .btn { justify-content: center; padding: 11px 12px; font-size: 13px; }
.pp-actions .btn svg { width: 16px; height: 16px; }
.btn-wa { background: rgba(34,197,94,.1); color: #86EFAC; border: 1px solid rgba(34,197,94,.35); }
.btn-wa:hover { background: rgba(34,197,94,.18); color: #fff; }
.pp-empty { display: none; text-align: center; color: var(--muted); padding: 60px 0; }

.pp-cta { margin: 70px 0 80px; padding: 40px; border-radius: 20px; background: linear-gradient(135deg, rgba(26,86,219,.22), rgba(19,32,64,.9)); border: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.pp-cta h2 { font-family: var(--ff-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; }
.pp-cta p { color: var(--muted); margin-top: 6px; }
.pp-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

#pp-captcha { min-height: 0; }


/* ══════════════════════════════════════════════════════════════════
   PHASE 1.5 — RESPONSIVE LAYOUT SYSTEM
   One source of truth for every screen size. Earlier patch layers
   (v1 … v11 breakpoint overrides) were removed and replaced by this.

   Sizing is fluid first (clamp / min / intrinsic grids), so the
   breakpoints below only change COMPOSITION, never patch overflow.

     ≥ 1441  large display      1025–1440  desktop (base styles)
     769–1024 small laptop       481–768   tablet
     391–480  large phone        320–390   small phone
══════════════════════════════════════════════════════════════════ */
:root {
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --section-y: clamp(56px, 7vw, 104px);
  --hdr-h: 72px;                 /* real value set by js/nav.js */
  --hdr-offset: var(--hdr-h);    /* 0 while the header is slid away */
  --tap: 44px;
}
html.hdr-up { --hdr-offset: 0px; }
@media (min-width: 1441px) { :root { --container: 1360px; } }

/* Horizontal-overflow guard that does NOT break position:sticky.
   (overflow-x:hidden on both html and body turned body into a scroll
   container, which silently disabled every sticky bar on the site.) */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
  body { overflow-x: visible; }
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

/* Section rhythm — one token instead of per-breakpoint !important */
.products-section, .packages-section, .trust-section, .cybersec-section,
.amc-section, .about-section, .projects-section, .process-section,
.testimonials-section, .clients-section, .faq-section, .coverage-section {
  padding-block: var(--section-y);
}
.footer-cta { padding-block: var(--section-y); }

/* Keyboard access */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 3000;
  background: var(--blue); color: #fff; padding: 12px 18px; border-radius: 8px;
  font-weight: 600; font-size: 14px; transition: top .2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
#main:focus { outline: none; }

/* Anchor jumps land below the sticky bars */
section[id] { scroll-margin-top: calc(var(--hdr-h) + 64px); }
section.pp-cat { scroll-margin-top: calc(var(--hdr-h) + 16px); }
/* deep links to a single card (site search results) */
.product-card[id], .package-card[id], .project-card[id], .faq-item[id] { scroll-margin-top: calc(var(--hdr-h) + 64px); }
.pp-card[id] { scroll-margin-top: calc(var(--hdr-h) + 16px); }
/* the linked card is shown in place, so the jump is measured to where it really sits */
.product-card:target, .package-card:target, .project-card:target, .faq-item:target, .pp-card:target { opacity: 1 !important; transform: none !important; }

/* ─── SITE HEADER: logo · global search · command menu ───────── */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(6,11,24,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled { background: rgba(6,11,24,.97); border-bottom-color: var(--border); }
html.hdr-up .site-header { transform: translateY(-100%); }
.hdr-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2.4vw, 32px); min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; border-radius: 10px; }
.brand-mark { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(232,255,0,.25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand-name { font-family: var(--ff-head); font-size: 1.65rem; letter-spacing: 2.5px; color: var(--white); }
.brand-accent { color: var(--gold-lt); }
.brand-sub { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* centre: the search "console" */
.hdr-search {
  justify-self: center; width: min(100%, 520px); height: 46px; padding: 0 8px 0 16px;
  display: flex; align-items: center; gap: 12px; cursor: text;
  background: rgba(10,18,38,.75); border: 1px solid rgba(59,130,246,.22); border-radius: 12px;
  color: #8A99AE; font: 500 14px/1 var(--ff-body); text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hdr-search svg { width: 18px; height: 18px; color: #60A5FA; flex-shrink: 0; }
.hdr-search-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-search:hover { border-color: rgba(96,165,250,.5); background: rgba(14,24,48,.9); color: #B8C4D6; }
.hdr-search:focus-visible { box-shadow: 0 0 0 3px rgba(96,165,250,.25); }
.hdr-kbd, .cmd kbd, .gsearch kbd {
  font: 600 11px/1 var(--ff-body); color: #B8C4D6; padding: 5px 8px; border-radius: 6px;
  border: 1px solid rgba(148,163,184,.3); background: rgba(148,163,184,.08);
}

/* right: CTA + command control */
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.hdr-cta { padding: 11px 18px; white-space: nowrap; }
.hdr-icon {
  width: var(--tap); height: var(--tap); display: none; place-items: center; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(26,86,219,.08); color: var(--white);
}
.hdr-icon svg { width: 20px; height: 20px; }
.hdr-call svg { color: var(--gold); }
.hdr-cmd {
  height: var(--tap); padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 10px;
  border-radius: 10px; border: 1px solid rgba(96,165,250,.35); background: rgba(26,86,219,.12);
  color: var(--white); font: 700 12px/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.hdr-cmd:hover { background: rgba(26,86,219,.24); border-color: rgba(96,165,250,.6); }
.burger { position: relative; width: 18px; height: 12px; display: block; }
.burger i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease, width .25s ease; }
.burger i:nth-child(1) { top: 0; width: 18px; } .burger i:nth-child(2) { top: 5px; width: 12px; } .burger i:nth-child(3) { top: 10px; width: 18px; }
.hdr-cmd[aria-expanded="true"] .burger i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.hdr-cmd[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.hdr-cmd[aria-expanded="true"] .burger i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1099px) {
  .hdr-cta { display: none; }                         /* survey stays in the hero, menu and footer */
  .hdr-call { display: inline-grid; }
  .hdr-inner { min-height: 66px; }
}
@media (max-width: 767px) {
  /* search collapses to an icon; the brand keeps its full size */
  .hdr-search { justify-self: end; width: var(--tap); height: var(--tap); padding: 0; justify-content: center; border-radius: 10px; }
  .hdr-search-label, .hdr-kbd { display: none; }
  .hdr-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-height: 62px; }
  .hdr-actions { gap: 8px; }
  .hdr-cmd { width: var(--tap); padding: 0; justify-content: center; }
  .hdr-cmd-label { display: none; }
  .brand { gap: 10px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 1.45rem; letter-spacing: 2px; }
  .brand-sub { font-size: 10px; letter-spacing: 1.6px; }
}
@media (max-width: 359px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { font-size: 1.3rem; letter-spacing: 1.5px; }
  .brand-sub { letter-spacing: 1.1px; }
  .hdr-inner, .hdr-actions { gap: 6px; }
}
html.menu-open, html.menu-open body, html.search-open, html.search-open body { overflow: hidden; }

/* ─── CATEGORY TABS (homepage) ────────────────────────────────── */
.cat-nav { top: var(--hdr-offset); z-index: 850; transition: top .3s ease, box-shadow .3s ease, background .3s ease; }
.cat-tab { min-height: 52px; padding-block: 0; }
@media (max-width: 1240px) {
  .cat-nav-inner {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    padding-right: 28px;
  }
}
@media (max-width: 768px) {
  .cat-nav .container { padding-inline: 0; }
  .cat-nav-inner { padding-left: var(--gutter); scroll-padding-inline: var(--gutter); }
  .cat-tab { padding-inline: 14px; font-size: 13px; gap: 6px; }
  .cat-tab svg { width: 15px; height: 15px; }
}

/* ─── HERO ────────────────────────────────────────────────────── */
.hero { padding-block: clamp(28px, 5.5vw, 84px) clamp(40px, 6vw, 72px); }
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); }
.hero-title { font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.6rem); }
.hero-by {
  display: block; margin-top: .45em;
  font: 600 .3em/1.2 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.hero-desc { max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn { justify-content: center; padding: 14px 22px; }
.hero-stat-num { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1.05; }
.hero-stat-label { font-size: 12px; }

/* Camera wall: height comes from the layout, not from the photo */
.hero-visual-grid { grid-template-rows: 1fr 1fr; height: clamp(320px, 30vw, 460px); }
.hero-img-card { container-type: inline-size; min-height: 0; }
.hero-img-card img, .hero-img-card:first-child img { height: 100%; min-height: 0; }
@container (max-width: 250px) { .cam-ts { display: none; } }
@container (max-width: 180px) { .hero-img-label { font-size: 11px; letter-spacing: 1px; } }

@media (min-width: 1441px) {
  .hero-title { font-size: clamp(5rem, 4.4vw, 6.4rem); }
  .hero-desc { font-size: 1.12rem; }
}

/* Small laptop / iPad landscape — keep the side-by-side command view */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; }
  .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-ctas .btn { padding-inline: 14px; }
  .hero-ctas .cta-main { grid-column: 1 / -1; }
  .hero-floating-badge { display: none; }
  .hero-visual { margin-top: 8px; }
  .hero-visual-grid { height: clamp(300px, 46vw, 420px); }
}

/* Tablet — stacked, but using the width: 3-up actions, camera strip */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-ctas { grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; }
  .hero-ctas .cta-main { grid-column: auto; }
  .hero-ctas .btn { padding: 14px 10px; font-size: 14px; }
  .hero-stats { padding-top: 24px; gap: 12px; }
  .hero-visual { margin-top: 0; }
  .hero-visual-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; height: auto; gap: 10px; }
  .hero-img-card, .hero-img-card:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* Phones — one focused column: brand, promise, one primary action */
@media (max-width: 600px) {
  .hero-ctas { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
  .hero-ctas .cta-main { grid-column: 1 / -1; }
  .hero-ctas .btn { min-height: 52px; font-size: 15px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 1.4px; padding: 6px 12px; margin-bottom: 16px; }
  .hero-desc { font-size: 1rem; line-height: 1.65; margin-bottom: 24px; }
  .hero-status { gap: 8px 14px; margin-bottom: 16px; }
  .hs-time { border-left: 0; padding-left: 0; }
  /* camera feeds become a swipeable strip instead of disappearing */
  .hero-visual-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hero-visual-grid::-webkit-scrollbar { display: none; }
  .hero-img-card, .hero-img-card:first-child { flex: 0 0 78%; aspect-ratio: 16 / 10; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.6rem, 14vw, 3.6rem); line-height: .94; margin-bottom: 16px; }
  .hero-stat-num { font-size: clamp(1.45rem, 7.4vw, 1.9rem); }
  .hero-stat-label { font-size: 11px; letter-spacing: .5px; }
}
@media (max-width: 390px) {
  .hero-status { font-size: 10px; letter-spacing: 1px; }
  .hero-ctas .btn { font-size: 14px; padding-inline: 8px; }
  .hero-stats { gap: 8px; }
}

/* ─── SECTION HEADINGS ────────────────────────────────────────── */
.section-title { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 768px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ─── INTRINSIC GRIDS — they never ask for more width than exists ─ */
.products-grid  { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.packages-grid  { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.projects-grid  { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.testi-grid     { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(16px, 2vw, 24px); }
.trust-grid     { grid-template-columns: repeat(auto-fit,  minmax(min(220px, 100%), 1fr)); }
.pp-grid        { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: clamp(14px, 2vw, 20px); }
@media (max-width: 768px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* hover lift is a mouse effect; touch screens keep cards still */
@media (hover: none) {
  .product-card, .project-card, .testi-card, .package-card, .pp-card { transform: none !important; }
}

/* ─── INSTALLATION GALLERY ────────────────────────────────────── */
@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px; margin-top: 28px; }
  .gallery-item, .gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery-item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
}

/* ─── SPLIT LAYOUTS ───────────────────────────────────────────── */
.amc-card { padding: clamp(22px, 4.5vw, 60px); gap: clamp(28px, 4vw, 60px); }
@media (max-width: 1024px) {
  .amc-card, .about-grid, .faq-layout { grid-template-columns: 1fr; }
  .about-grid { gap: 40px; }
  .faq-layout { gap: 32px; margin-top: 36px; }
}
@media (max-width: 900px) {
  .cybersec-grid { grid-template-columns: 1fr; gap: 36px; }
  .cyber-shield { max-width: 260px; }
}
@media (max-width: 420px) { .amc-features { grid-template-columns: 1fr; } }
@media (max-width: 390px) { .about-pillars { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .about-cert-strip { gap: 10px; padding: 12px 14px; }
  .cert-item { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* ─── PROCESS (a real sequence → vertical timeline on phones) ──── */
@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .process-steps::before { display: none; }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; row-gap: 0; margin-top: 32px; }
  .process-step {
    display: grid; grid-template-columns: 52px 1fr; column-gap: 16px;
    text-align: left; align-items: start; padding: 0 0 22px; position: relative;
  }
  .process-step:not(:last-child)::after {
    content: ''; position: absolute; left: 25px; top: 56px; bottom: 4px; width: 1px;
    background: linear-gradient(var(--electric), var(--border));
  }
  .step-num { grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; }
  .step-num svg { width: 22px; height: 22px; }
  .step-label { margin: 4px 0 2px; }
  .step-title { font-size: 15px; }
  .step-desc { font-size: 13.5px; }
}

/* ─── FOOTER ──────────────────────────────────────────────────── */
.footer-brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.footer-mark { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 14px rgba(232,255,0,.3)); }
.footer-legal a { color: #8A9AB2; }
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-brand-desc { max-width: 60ch; }
}
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-cta-btns { flex-direction: column; align-items: stretch; }
  .footer-cta-btns .btn { justify-content: center; }
  .footer-brand-logo { font-size: 1.8rem; }
}

/* ─── FLOATING ACTIONS ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sticky-actions { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .sticky-btn.phone { display: none; }      /* Call lives in the header on phones/tablets */
  .sticky-btn { width: 52px; height: 52px; }
}

/* ─── MODALS ──────────────────────────────────────────────────── */
/* closed dialogs are also removed from the Tab order */
.modal-overlay { visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.modal-overlay.open { visibility: visible; transition: opacity .3s ease, visibility 0s; }
.modal-box { max-height: 90vh; max-height: 90dvh; overscroll-behavior: contain; }
/* only the slide-in animates: `transition: all` also animated the inherited visibility,
   so the dialog was still hidden when focus moved into it (focus fell back to <body>) */
.modal-box { transition: transform .35s ease; }
.modal-close { width: var(--tap); height: var(--tap); top: 14px; right: 14px; }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100%; max-width: 100%; margin: 0; border-radius: 20px 20px 0 0;
    padding: 26px 20px calc(28px + env(safe-area-inset-bottom));
    max-height: 92vh; max-height: 92dvh;
  }
  .modal-title { font-size: 1.4rem; padding-right: 48px; }
}
@media (max-width: 359px) {
  .g-recaptcha, #survey-recaptcha, #quote-recaptcha, #pp-captcha { transform: scale(.88); transform-origin: left top; }
}

/* ─── TOUCH TARGETS ───────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: var(--tap); }
  .pp-chip { min-height: var(--tap); }
  .faq-question { min-height: 56px; }
  .footer-social a { width: var(--tap); height: var(--tap); }
  .footer-links { gap: 2px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 4px; }
  .pp-crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* ─── READABLE MINIMUM TEXT ───────────────────────────────────── */
.card-badge, .card-amc, .card-brand, .pkg-badge, .project-status, .project-type,
.testi-service-tag, .footer-contact-label, .pp-tag, .pp-brands, .pp-code,
.meta-tag, .card-price-note, .gallery-tag, .about-brand-sub, .footer-brand-sub,
.footer-area-tag, .faq-contact-label, .project-spec-pill, .pp-cat-count, .pp-from,
.hero-floating-badge-text, .section-label { font-size: max(11px, .7rem); }
.amc-feat-desc, .step-desc { font-size: 12.5px; }

/* ─── MOTION BUDGET ───────────────────────────────────────────── */
/* side-slide reveals push content past the viewport edge on narrow
   screens; slide vertically there instead */
@media (max-width: 1024px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
  .reveal-left.revealed, .reveal-right.revealed { transform: none; }
  .orb { display: none; }
}
@media (max-width: 768px) {
  .reveal { transform: translateY(24px); }
  .trust-bar-track { animation-duration: 22s; }
}

/* ─── PRODUCTS PAGE ───────────────────────────────────────────── */
.pp-hero { padding-block: clamp(28px, 5vw, 70px) clamp(24px, 3vw, 34px); }
.pp-cat { padding-block: clamp(36px, 5vw, 56px) 8px; }
.pp-cta { padding: clamp(22px, 4vw, 40px); margin-block: clamp(44px, 6vw, 70px) clamp(80px, 8vw, 90px); }
@media (max-width: 768px) {
  .pp-search { max-width: none; flex-basis: 100%; }
  .pp-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .pp-chips::-webkit-scrollbar { display: none; }
  .pp-chip { flex-shrink: 0; }
  .pp-cta-btns { width: 100%; }
  .pp-cta-btns .btn { flex: 1 1 200px; justify-content: center; }
}
@media (max-width: 380px) { .pp-actions { grid-template-columns: 1fr; } }

/* ─── fixes found in device testing ───────────────────────────── */
.plan-flag { font-size: 11px; background: var(--gold); color: var(--ink); padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 700; white-space: nowrap; }
/* side reveals travel less than the page gutter, so they never poke past the edge */
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-left.revealed, .reveal-right.revealed { transform: none; }
@media (max-width: 1024px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
  .reveal-left.revealed, .reveal-right.revealed { transform: none; }
}
@media (pointer: coarse) {
  .footer-contact-value a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* Wordmark scale: ELÈTTRON leads the hero at every size (Bebas is
   condensed, so it needs more em than the serif line to read as primary) */
.hero-title .line-1 { font-size: 1.55em; line-height: .9; }
.hero-eyebrow { text-wrap: balance; border-radius: 16px; }
.hero-desc { text-wrap: pretty; }
@media (min-width: 1280px) { .hero-ctas .btn { padding: 13px 18px; } }
@media (min-width: 1025px) and (max-width: 1279px) {
  .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-ctas .cta-main { grid-column: 1 / -1; }
}
@media (max-width: 768px) { .hero-title .line-1 { font-size: clamp(4.6rem, 16vw, 7.2rem); } }
@media (max-width: 480px) {
  .hero-title .line-1 { font-size: clamp(4.2rem, 25vw, 6.4rem); }
  .hero-title { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
}
@media (max-width: 430px) {
  .hero-ctas .btn:not(.cta-main) svg { display: none; }
  .hero-ctas .btn:not(.cta-main) { white-space: nowrap; padding-inline: 8px; }
}
@media (max-width: 360px) { .hero-ctas .btn:not(.cta-main) { font-size: 13.5px; } }
/* Phones/tablets: the floating WhatsApp button waits until the hero's own
   Call / WhatsApp actions have scrolled away, so it never covers them */
@media (max-width: 768px) {
  .sticky-actions { transition: opacity .25s ease, transform .25s ease; }
  html:not(.past-hero) .sticky-actions { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
}
/* Small laptop / iPad: camera wall sits beside the copy, centred, filling its column */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-grid { align-items: center; }
  .hero-visual { margin-top: 0; }
  .hero-visual-grid { height: clamp(380px, 58vw, 560px); }
  .hero-ctas .btn:not(.cta-main) { white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .hero-ctas .btn:not(.cta-main) svg { display: none; }
}

/* Phones: long card lists become swipe rows (next card peeks in), so a
   category is one screen tall instead of four — nothing is hidden */
@media (max-width: 600px) {
  .products-grid, .packages-grid, .projects-grid, .testi-grid {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px;
    scroll-padding-inline: var(--gutter);
  }
  .products-grid::-webkit-scrollbar, .packages-grid::-webkit-scrollbar,
  .projects-grid::-webkit-scrollbar, .testi-grid::-webkit-scrollbar { display: none; }
  .products-grid > *, .packages-grid > *, .projects-grid > *, .testi-grid > * {
    flex: 0 0 86%; scroll-snap-align: start; min-width: 0;
  }
  .package-card.featured { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 2 — MOTION BUDGET
   Same motion language, but every infinite loop now animates only
   transform/opacity (GPU-composited) and pauses while off-screen.
══════════════════════════════════════════════════════════════════ */
/* sections scrolled out of view stop their decorative loops (js/main.js) */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* hero camera scan line: was animating `top` (layout every frame) */
.hero-img-card::after {
  top: 0; height: 100%; opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.8), transparent) top / 100% 2px no-repeat;
  transform: translateY(-2px);
  animation: scanLineT 3s linear infinite;
}
@keyframes scanLineT { 0% { transform: translateY(-2px); opacity: 1; } 95% { opacity: .5; } 100% { transform: translateY(100%); opacity: 0; } }
/* camera feed sweep: was animating `top` */
.cam-scan { top: 0; transform: translateY(-100%); animation-name: camScanT; }
@keyframes camScanT { to { transform: translateY(285.7%); } }  /* 35%-tall band → travels 135% of the card */
/* status-strip LEDs: was animating box-shadow */
.hs-item i { position: relative; animation: none; }
.hs-item i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(34,197,94,.55); animation: ledRing 2s ease-out infinite; }
.hs-item i.rec { animation: camBlink 1s steps(2, jump-none) infinite; }
.hs-item i.rec::after { display: none; }
@keyframes ledRing { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
/* spec bullets: ~60 box-shadow pulses at once → steady dots, pulse only on the card being pointed at */
.spec-dot { animation: none; }
@media (hover: hover) {
  .product-card:hover .spec-dot { animation: dotPulseT 1.6s ease-in-out infinite; }
}
@keyframes dotPulseT { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  .hero-img-card::after, .cam-scan, .hs-item i::after { animation: none !important; display: none; }
  .trust-bar-track, .clients-track { animation: none !important; }
  .hero-visual, .hero-title .line-1 .ex-word, .ex-l { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Below-the-fold sections skip layout/paint until they approach the
   viewport (big saving on this long page). The first in-page jump
   (menu, tabs, chips, #hash links) switches this off for the rest of the
   visit (html.cv-off, js/nav.js), so jumps always land exactly. */
html:not(.cv-off) main > section:not(.hero):not(.pp-hero),
html:not(.cv-off) .footer-cta, html:not(.cv-off) .pp-cat,
.site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Phones/tablets: same hero choreography, tighter timing so the
   primary action is on screen within a second */
@media (max-width: 1024px), (pointer: coarse) {
  body .hero-eyebrow { animation-delay: .05s; }
  body .hero-title .line-2 span { animation-delay: .3s; }
  body .hero-title .line-3 span { animation-delay: .4s; }
  body.is-ready .hero-status { animation-delay: .45s; }
  body .hero-desc { animation-delay: .5s; }
  body .hero-ctas { animation-delay: .6s; }
  body .hero-stats { animation-delay: .7s; }
  body .hero-visual { animation-delay: .5s; }
}
/* wordmark glow: each letter's glow is rasterised once and the ignite
   flicker runs on the compositor (opacity only) instead of repainting
   a drop-shadow filter every frame */
.hero-title .line-1 .ex-l::after { will-change: opacity; }

/* small blue labels: brand blue lifted just enough for 4.5:1 on navy cards */
.project-type, .project-spec-pill { color: #5B9BF8; }

/* ══════════════════════════════════════════════════════════════════
   PHOTO & LOGO SLOTS (js/photos.js, ASSETS.md)
   Until a real photo is supplied, a slot shows a quiet blueprint panel
   with the service icon — never a broken-image icon or a stand-in photo.
══════════════════════════════════════════════════════════════════ */
.photo-slot:not(.has-photo) > img[data-photo],
.client-logo-item:not(.has-photo) > img[data-photo] { display: none; }
.photo-slot:not(.has-photo) {
  --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393C5FD' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h12l4 3v4l-4 3H3z'/%3E%3Ccircle cx='9' cy='12' r='2.4'/%3E%3Cpath d='M5 17v3h5'/%3E%3C/svg%3E");
  background:
    var(--slot-icon) center / clamp(40px, 22%, 64px) no-repeat,
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.16), transparent 62%),
    linear-gradient(rgba(59,130,246,.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(59,130,246,.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0D1830, #0A1226);
}
.photo-slot[data-icon="fire"]:not(.has-photo) { --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBBF24' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E"); }
.photo-slot[data-icon="lock"]:not(.has-photo) { --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393C5FD' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3Ccircle cx='12' cy='16' r='1.3'/%3E%3C/svg%3E"); }
.photo-slot[data-icon="access"]:not(.has-photo) { --slot-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393C5FD' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6'/%3E%3Ccircle cx='12' cy='16.5' r='1.6'/%3E%3C/svg%3E"); }
.about-img-sm.photo-slot:not(.has-photo) { min-height: 160px; }
.about-img-main.photo-slot:not(.has-photo) { min-height: 300px; }

/* client strip: name plate until the real logo file is supplied */
.client-name { font: 700 14px/1.2 var(--ff-body); letter-spacing: .3px; color: #B8C4D6; text-align: center; }
.client-logo-item.has-photo .client-name { display: none; }

/* ─── CTA HIERARCHY ───────────────────────────────────────────────
   Primary  = Request site survey (filled blue)
   Secondary= Get a quote (gold outline)
   Quick    = WhatsApp (green)      Direct = Call (outline) */
.btn-secondary {
  background: rgba(245,166,35,.06); color: var(--gold-lt);
  border: 1px solid rgba(245,166,35,.55);
}
.btn-secondary:hover { background: rgba(245,166,35,.14); border-color: var(--gold); color: #FFE7A8; }
.btn-lg { font-size: 15px; padding: 16px 32px; }
.price-unit { font-size: 1rem; color: var(--muted); }
.btn-block { width: 100%; justify-content: center; }
/* phones/tablets: the letter fly-in keeps its 3D flip but drops the
   per-frame blur filter (the most expensive part on mobile GPUs) */
@media (max-width: 1024px), (pointer: coarse) {
  body.is-ready .hero-title .line-1 .ex-l { animation-name: exWireLite; }
}
@keyframes exWireLite {
  from { opacity: 0; transform: translateY(45%) rotateX(75deg); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SYSTEM ACTIVATION INTRO  (js/intro.js)
   Visual only. Hidden unless <head> decided to play it (html.intro).
   Failsafe: the <head> watchdog releases the page if js/intro.js never runs.
══════════════════════════════════════════════════════════════════ */
#intro { display: none; }
html.intro #intro {
  display: block; position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at 50% 45%, #07101F 0%, #03060D 70%);
  color: #CBD5E1; overflow: hidden;
}
html.intro, html.intro body { overflow: hidden; }
html.intro .site-header, html.intro .sticky-actions { visibility: hidden; }
html.intro-flying .site-header { visibility: visible; }

.intro-stage { position: absolute; inset: 0; }
.intro-net { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s ease, transform .9s cubic-bezier(.7,0,.2,1); }

/* HUD: one status line that narrates what the system is doing */
.intro-hud {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 600 11px/1.3 var(--ff-body); letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap; transition: opacity .5s ease;
}
.intro-hud-top { top: max(22px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; color: #93C5FD; opacity: 0; }
.intro-hud-bottom { bottom: max(26px, env(safe-area-inset-bottom)); color: #64748B; opacity: 0; letter-spacing: .14em; }
#intro.s-standby .intro-hud-top { opacity: 1; }
#intro.s-network .intro-hud-bottom { opacity: 1; color: #8A99AE; }
.intro-led { width: 7px; height: 7px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 8px rgba(239,68,68,.7); animation: introBlink 1.1s steps(2, jump-none) infinite; }
#intro.s-network .intro-led { background: #F59E0B; box-shadow: 0 0 8px rgba(245,158,11,.7); }
#intro.s-online .intro-led { background: #22C55E; box-shadow: 0 0 10px rgba(34,197,94,.8); animation: none; }
@keyframes introBlink { to { opacity: .25; } }

/* core: identity + wordmark, centred */
.intro-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  width: min(86vw, 760px); display: flex; flex-direction: column; align-items: center;
}
html.intro-xl .intro-core { width: min(64vw, 900px); }

/* 04 IDENTITY — reticle locks on, logo resolves under a scan (never distorted:
   only clipped and faded, aspect ratio fixed by width/height) */
.intro-id { position: relative; width: clamp(72px, 13vmin, 112px); aspect-ratio: 1; margin-bottom: clamp(10px, 2vh, 18px); }
.intro-logo {
  width: 100%; height: 100%; object-fit: contain; display: block;
  clip-path: inset(0 0 100% 0); opacity: 0;
  transition: clip-path .6s cubic-bezier(.4,0,.2,1) .15s, opacity .3s ease .15s;
}
.rb { position: absolute; width: 18%; height: 18%; border: 0 solid #60A5FA; opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.rb-tl { left: -16%; top: -16%; border-top-width: 2px; border-left-width: 2px; transform: translate(-60%, -60%); }
.rb-tr { right: -16%; top: -16%; border-top-width: 2px; border-right-width: 2px; transform: translate(60%, -60%); }
.rb-bl { left: -16%; bottom: -16%; border-bottom-width: 2px; border-left-width: 2px; transform: translate(-60%, 60%); }
.rb-br { right: -16%; bottom: -16%; border-bottom-width: 2px; border-right-width: 2px; transform: translate(60%, 60%); }
.intro-id-scan { position: absolute; left: -10%; right: -10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #BFDBFE, transparent); opacity: 0; }
#intro.s-identity .rb { opacity: 1; transform: none; }
#intro.s-identity .intro-logo { clip-path: inset(0 0 0 0); opacity: 1; }
#intro.s-identity .intro-id-scan { animation: introIdScan .75s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes introIdScan { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--id, 112px))); } }
.intro-id { --id: clamp(72px, 13vmin, 112px); }
#intro.s-online .rb { border-color: #FBBF24; transition-duration: .3s; }
.intro-company {
  font: 600 11px/1 var(--ff-body); letter-spacing: .32em; text-transform: uppercase; color: #8A99AE;
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease .5s, transform .5s ease .5s;
  margin-bottom: clamp(12px, 2.4vh, 22px);
}
#intro.s-core .intro-company { opacity: 1; transform: none; }
/* brand statement: under the company name, settled before node 01 (t = 1.8 s).
   Delays divide by --intro-speed so the slow-connection double-speed run keeps the order. */
.intro-company { transition-delay: calc(.2s / var(--intro-speed, 1)); transition-duration: calc(.5s / var(--intro-speed, 1)); }
.intro-tagline {
  font: 500 10px/1 var(--ff-body); letter-spacing: .62em; padding-left: .62em; text-transform: uppercase;
  color: #6F7E93; white-space: nowrap; opacity: 0; clip-path: inset(0 50% 0 50%);
  margin: calc(9px - clamp(12px, 2.4vh, 22px)) 0 clamp(12px, 2.4vh, 22px);
  --td: calc(.35s / var(--intro-speed, 1)); --tt: calc(.5s / var(--intro-speed, 1));
  transition: opacity var(--tt) ease var(--td), clip-path var(--tt) cubic-bezier(.4,0,.2,1) var(--td),
              letter-spacing var(--tt) cubic-bezier(.2,.8,.2,1) var(--td), padding-left var(--tt) cubic-bezier(.2,.8,.2,1) var(--td);
}
#intro.s-core .intro-tagline { opacity: 1; clip-path: inset(0 0 0 0); letter-spacing: .42em; padding-left: .42em; }
@media (max-width: 480px) {
  .intro-tagline { font-size: 9px; letter-spacing: .4em; padding-left: .4em; }
  #intro.s-core .intro-tagline { letter-spacing: .26em; padding-left: .26em; }
}
/* brand descriptor: arrives with the wordmark's final verification, stays subordinate */
.intro-descriptor {
  font: 500 clamp(9px, .55rem + .45vw, 14px)/1 var(--ff-body); letter-spacing: .62em; padding-left: .62em;
  text-transform: uppercase; color: rgba(203,213,225,.62); white-space: nowrap; text-align: center;
  margin-top: clamp(10px, 1.8vh, 18px); opacity: 0; transform: translateY(4px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), letter-spacing .9s cubic-bezier(.2,.8,.2,1), padding-left .9s cubic-bezier(.2,.8,.2,1);
}
#intro.s-word .intro-descriptor { opacity: 1; transform: none; letter-spacing: .5em; padding-left: .5em; }
/* portrait (chain above & below the core): the two new lines are net-zero in the core's flow, so the
   logo and the core box the network is laid out around stay exactly where they were */
@media (orientation: portrait) { .intro-descriptor { margin-bottom: calc(-1em - clamp(10px, 1.8vh, 18px) - 19px); } }
@media (orientation: portrait) and (max-width: 480px) { .intro-descriptor { margin-bottom: calc(-1em - clamp(10px, 1.8vh, 18px) - 18px); } }
@media (max-width: 480px) {
  .intro-descriptor { letter-spacing: .42em; padding-left: .42em; }
  #intro.s-word .intro-descriptor { letter-spacing: .32em; padding-left: .32em; }
}

/* 05 WORDMARK — wireframe → illuminated (inside the scan) → solid (behind it) */
.intro-word { width: 100%; position: relative; }
.intro-word-static { display: none; }

/* skip — available after the first beat, always keyboard reachable */
.intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2;
  min-height: 44px; padding: 0 18px; border-radius: 22px;
  background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.25); color: #CBD5E1;
  font: 600 13px/1 var(--ff-body); letter-spacing: .04em; cursor: pointer;
  opacity: 0; animation: introSkipIn .4s ease .9s forwards;
}
.intro-skip:hover, .intro-skip:focus-visible { background: rgba(30,41,59,.9); color: #fff; }
@keyframes introSkipIn { to { opacity: 1; } }
@media (max-width: 600px) {
  .intro-hud-bottom { display: none; }         /* the bottom edge belongs to Skip on phones */
  .intro-hud { letter-spacing: .12em; }
}

/* 06 ONLINE → site: camera pushes through the network, brand docks */
#intro.is-docking { background: transparent; transition: background .7s ease .1s; }
#intro.is-docking .intro-net { opacity: 0; transform: scale(1.12); }
#intro.is-docking .intro-hud, #intro.is-docking .intro-skip, #intro.is-docking .intro-company,
#intro.is-docking .intro-tagline, #intro.is-docking .intro-descriptor,
#intro.is-docking .rb { opacity: 0; transition: opacity .3s ease; }
#intro.is-docking .intro-id-scan { display: none; }
#intro.is-leaving { opacity: 0; transition: opacity .3s ease; }
/* the hero's own wordmark & header logo wait for the docking copies */
html.intro-flying .hero-title .line-1 .ex-word,
html.intro-flying .site-header .brand-mark { visibility: hidden; }
/* after the intro, the hero is a continuation: letters already live, no re-ignition */
html.intro-played body.is-ready .hero-title .line-1 .ex-l { animation: none; opacity: 1; transform: none; }
html.intro-played .hero-title .line-1 .ex-l.on::after { animation: none; opacity: 1; }
html.intro-played body .hero-eyebrow { animation-delay: .35s; }
html.intro-played body .hero-title .line-2 span { animation-delay: .45s; }
html.intro-played body .hero-title .line-3 span { animation-delay: .55s; }
html.intro-played body.is-ready .hero-status { animation-delay: .6s; }
html.intro-played body .hero-desc { animation-delay: .65s; }
html.intro-played body .hero-ctas { animation-delay: .75s; }
html.intro-played body .hero-stats { animation-delay: .85s; }
html.intro-played body .hero-visual { animation-delay: .6s; }

/* reduced motion: dark → logo → wordmark → site (no movement) */
#intro.is-static .intro-net, #intro.is-static .rb, #intro.is-static .intro-id-scan, #intro.is-static .intro-hud-top, #intro.is-static .intro-skip { display: none; }
#intro.is-static .intro-logo { clip-path: none; opacity: 1; transition: none; }
#intro.is-static .intro-company, #intro.is-static .intro-tagline, #intro.is-static .intro-descriptor { opacity: 1; transform: none; clip-path: none; transition: none; }
#intro.is-static .intro-word-static {
  display: block; text-align: center; font: 400 clamp(3.5rem, 15vw, 8rem)/1 var(--ff-head); letter-spacing: .04em;
  color: #E3EDFF;
}
#intro.is-static .intro-word-static b { font-weight: 400; color: #FBBF24; }
@media (prefers-reduced-motion: reduce) {
  html.intro #intro *, html.intro #intro { animation-duration: 0s !important; transition-duration: 0s !important; }
}
#intro.is-frozen, #intro.is-frozen * { transition: none !important; animation-play-state: paused !important; }
/* the brand core sits on a quiet pool of dark, so network lines fall away behind it */
.intro-core::before {
  content: ''; position: absolute; inset: -18% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3,6,13,.92) 55%, rgba(3,6,13,0) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   COMMAND MENU (#cmd) — full-screen site menu
══════════════════════════════════════════════════════════════════ */
.cmd {
  position: fixed; inset: 0; z-index: 1500; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(3,6,13,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease;
}
.cmd.is-open { opacity: 1; }
.cmd-panel {
  min-height: 100%; background:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(180deg, #060B18 0%, #070F22 100%);
  transform: translateY(-14px); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.cmd.is-open .cmd-panel { transform: none; }
.cmd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; border-bottom: 1px solid rgba(59,130,246,.14); }
.cmd-title { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: #93C5FD; }
.cmd-led { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,.8); }
.cmd-top-actions { display: flex; gap: 8px; }
.cmd-search, .cmd-close {
  height: var(--tap); padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25); background: rgba(15,23,42,.6); color: #E2E8F0; font: 600 14px/1 var(--ff-body); cursor: pointer;
}
.cmd-search svg { width: 17px; height: 17px; color: #60A5FA; }
.cmd-search:hover, .cmd-close:hover { border-color: rgba(96,165,250,.55); }
.cmd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(24px, 4vw, 56px); padding-top: clamp(20px, 4vh, 44px); }
.cmd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.14); border-radius: 14px; overflow: hidden; }
.cmd-cat { background: #070E20; padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; transition: background .2s ease; }
.cmd-cat:hover, .cmd-cat:focus-within { background: #0A1530; }
.cmd-head { display: grid; gap: 6px; border-radius: 8px; }
.cmd-num { font: 600 11px/1 var(--ff-body); letter-spacing: .2em; color: #5B9BF8; }
.cmd-name { font-family: var(--ff-head); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: 1.5px; line-height: 1; color: var(--white); transition: color .2s ease; }
.cmd-head:hover .cmd-name, .cmd-head:focus-visible .cmd-name { color: var(--gold-lt); }
.cmd-desc { font-size: 13.5px; line-height: 1.5; color: #8A99AE; }
.cmd-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; margin-top: auto; }
.cmd-sub a { display: flex; align-items: center; min-height: 36px; font-size: 14px; color: #CBD5E1; border-radius: 6px; }
.cmd-sub a::before { content: ''; width: 10px; height: 1px; background: #3B82F6; margin-right: 10px; transition: width .2s ease; }
.cmd-sub a:hover { color: #fff; } .cmd-sub a:hover::before { width: 18px; }
.cmd-sub a[aria-current="page"] { color: var(--gold-lt); }
.cmd-actions { display: grid; gap: 10px; align-content: start; }
.cmd-actions .btn { justify-content: center; min-height: 52px; font-size: 15px; }
.cmd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmd-meta { font-size: 13px; color: #8A99AE; text-align: center; margin-top: 4px; }
@media (max-width: 1099px) {
  .cmd-body { grid-template-columns: 1fr; }
  .cmd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmd-actions { grid-template-columns: 1fr 1fr; }
  .cmd-actions .cmd-meta { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .cmd-top { min-height: 62px; }
  .cmd-title { font-size: 11px; letter-spacing: .14em; }
  .cmd-search span { display: none; }
  .cmd-search { width: var(--tap); padding: 0; justify-content: center; }
  .cmd-grid { grid-template-columns: 1fr; border-radius: 12px; }
  .cmd-cat { gap: 10px; padding: 16px; }
  .cmd-sub { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .cmd-sub a { min-height: 44px; font-size: 14px; }
  .cmd-actions { grid-template-columns: 1fr; order: -1; }   /* actions first on phones: thumb reach */
  .cmd-body { display: flex; flex-direction: column; gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL SEARCH (#gsearch)
══════════════════════════════════════════════════════════════════ */
.gsearch {
  position: fixed; inset: 0; z-index: 1600; padding: clamp(12px, 10vh, 96px) 16px 16px;
  background: rgba(3,6,13,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  opacity: 0; transition: opacity .18s ease;
}
.gsearch[hidden] { display: none; }
.gsearch.is-open { opacity: 1; }
.gs-panel {
  width: min(680px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column;
  background: #08101F; border: 1px solid rgba(59,130,246,.3); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden;
  transform: translateY(-8px) scale(.99); transition: transform .2s ease;
}
.gsearch.is-open .gs-panel { transform: none; }
.gs-bar { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 18px; border-bottom: 1px solid rgba(59,130,246,.18); }
.gs-bar > svg { width: 20px; height: 20px; color: #60A5FA; flex-shrink: 0; }
.gs-input { flex: 1; min-width: 0; height: 60px; background: transparent; border: 0; outline: none; color: #fff; font: 500 17px/1 var(--ff-body); }
.gs-input::placeholder { color: #8A99AE; }
.gs-input::-webkit-search-cancel-button { display: none; }
.gs-close { height: var(--tap); padding: 0 6px; background: none; border: 0; cursor: pointer; }
.gs-results { overflow-y: auto; overscroll-behavior: contain; padding: 8px; flex: 1; }
.gs-group + .gs-group { margin-top: 6px; }
.gs-gname { padding: 10px 12px 6px; font: 700 11px/1 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; color: #5B9BF8; }
.gs-opt { display: grid; gap: 4px; padding: 11px 12px; border-radius: 10px; color: #E2E8F0; border: 1px solid transparent; }
.gs-opt[aria-selected="true"], .gs-opt:hover { background: rgba(26,86,219,.16); border-color: rgba(96,165,250,.35); }
.gs-t { font-weight: 600; font-size: 15px; }
.gs-d { font-size: 13px; color: #8A99AE; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-opt mark { background: none; color: var(--gold-lt); font-weight: 700; }
.gs-empty, .gs-none { padding: 14px 12px 18px; }
.gs-hint { color: #CBD5E1; font-size: 15px; }
.gs-sub { margin: 16px 0 8px; font: 700 11px/1 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; color: #8A99AE; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-chip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(59,130,246,.3); background: rgba(26,86,219,.08); color: #DBEAFE; font: 500 14px/1 var(--ff-body); cursor: pointer; }
.gs-chip:hover { border-color: rgba(96,165,250,.6); background: rgba(26,86,219,.18); }
.gs-help { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-msg { padding: 18px 12px; color: #CBD5E1; }
.gs-msg a { color: var(--gold-lt); text-decoration: underline; }
.gs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gs-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid rgba(59,130,246,.14); font-size: 12px; color: #8A99AE; }
.gs-foot kbd { margin-right: 3px; }
@media (max-width: 599px) {
  .gsearch { padding: 0; }
  .gs-panel { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .gs-foot { display: none; }
  .gs-chip { min-height: 44px; }
}
@media (pointer: coarse) { .gs-foot { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   BOOT WORDMARK — the hero's own ELÈTTRON engine (.ex-word), staged here
══════════════════════════════════════════════════════════════════ */
.intro-title { margin: 0; font-size: clamp(2.6rem, 1.4rem + 5vw, 6.2rem); text-align: center; }
html.intro-xl .intro-title { font-size: clamp(5rem, 5.4vw, 7.4rem); }
.intro-title .line-1 { display: block; }
@media (max-width: 768px) { .intro-title { font-size: clamp(2.5rem, 12.5vw, 3.6rem); } }
/* letters wait for TRACE, then use the existing exWire entrance */
#intro .ex-l { animation: none; opacity: 0; }
#intro .ex-word.is-trace .ex-l { animation: exWire .75s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
html.intro-low #intro .ex-word.is-trace .ex-l { animation-name: exWireLite; }
#intro .ex-word.is-traced .ex-l { animation: none; opacity: 1; transform: none; }
/* È signature: a controlled gold pulse around the accent letter */
.hero-title .line-1 .ex-l.ex-accent::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(251,191,36,.42) 0%, rgba(245,166,35,.12) 45%, transparent 70%);
}
.hero-title .line-1 .ex-l.surge::before { animation: exSurge .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes exSurge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
/* stabilise: the word settles to its final, even brightness */
#intro .ex-word.is-stable .ex-l::after { animation: none; opacity: 1; }
#intro .intro-word { position: relative; }
#intro.is-static .intro-title { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-title .line-1 .ex-l.surge::before { animation: none; } }
/* the È accent sits above the line box: extend the lit copy's paint area so the
   gradient fill covers the accent too (it rendered as a hollow ghost before) */
.hero-title .line-1 .ex-l::after { top: -.3em; padding-top: .3em; }
.intro-title { font-size: clamp(2.6rem, 1rem + 6.4vw, 8.4rem); }
/* sensor grid: a CSS layer that wakes from the centre outwards
   (scaled & faded on the compositor — no per-frame canvas work) */
.intro-grid {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background:
    linear-gradient(rgba(59,130,246,.10) 1px, transparent 1px) center / 44px 44px,
    linear-gradient(90deg, rgba(59,130,246,.10) 1px, transparent 1px) center / 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%);
  opacity: 0; transform: scale(.18); will-change: transform, opacity;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}
@media (orientation: portrait) { .intro-grid { background-size: 32px 32px, 32px 32px; } }
#intro.s-core .intro-grid { opacity: 1; transform: scale(1); }
#intro.is-docking .intro-grid { opacity: 0; transform: scale(1.15); transition: opacity .7s ease, transform .9s cubic-bezier(.7,0,.2,1); }
#intro.is-frozen .intro-grid { transition: none; }
#intro.is-static .intro-grid { display: none; }

/* ══════════════════════════════════════════════════════════════════
   ELÈTTRON — OFFICIAL 3D LOGO  (images/elettron-3d-logo*.webp, elettron-3d-wordmark.webp)
   Hero: 3D logo leads the H1 (the header carries the Lalit Enterprises identity).
   Intro: revealed after the ELÈTTRON activation, then docks into the hero.
   Comparison aid: ?brand=classic restores the previous typeset treatment (html.brand-classic).
   The logo is never recoloured or stretched: every size is set by width, height follows.
══════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────── */
/* (the ELÈTTRON wordmark no longer appears in the header: see HEADER BRANDING at the end of this file) */

/* ── hero ───────────────────────────────────────────────────── */
.hero-logo3d { display: none; }
html:not(.brand-classic) .hero .hero-logo3d {
  display: block; width: min(100%, 4.4em); height: auto; margin: .02em 0 .16em -.02em;
  animation: heroLogo3dIn .9s cubic-bezier(.16,1,.3,1) .2s both;   /* paused until body.is-ready (hero timing) */
}
@keyframes heroLogo3dIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* keep the ELÈTTRON text in the H1 for search engines and screen readers */
html:not(.brand-classic) .hero .hero-title .line-1 .ex-word {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; transform: none;
}
/* after the intro the logo has docked here: no second entrance */
html.intro-played .hero .hero-logo3d { animation: none; }
html.intro-flying .hero .hero-logo3d { visibility: hidden; }
@media (max-width: 600px) { html:not(.brand-classic) .hero .hero-logo3d { width: min(100%, 4.6em); } }

/* ── intro: brand reveal after the ELÈTTRON activation ──────── */
.intro-title .line-1 { position: relative; }
/* (#intro-scoped: these are spans inside .hero-title-line, whose line-reveal transform must not apply) */
#intro .intro-logo3d {
  display: none; position: absolute; animation: none; left: 50%; top: 50%; width: min(100%, 4.4em);
  transform: translate(-50%, -37%);            /* logo letters sit on the wordmark's line, tagline below */
  pointer-events: none;
}
html:not(.brand-classic) #intro .intro-logo3d { display: block; }
#intro .intro-logo3d-in {
  display: block; position: relative; opacity: 0; transform: scale(.96); animation: none;
  transition: opacity calc(.6s / var(--intro-speed, 1)) ease calc(.12s / var(--intro-speed, 1)),
              transform calc(.9s / var(--intro-speed, 1)) cubic-bezier(.2,.8,.2,1) calc(.12s / var(--intro-speed, 1));
}
.intro-logo3d-in img { display: block; width: 100%; height: auto; }
/* one soft gold light pass, confined to the logo's own shape */
.intro-logo3d-in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,236,190,.55) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat;
  -webkit-mask: url(../images/elettron-3d-logo-800.webp) center / 100% 100% no-repeat;
          mask: url(../images/elettron-3d-logo-800.webp) center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
}
#intro.s-brand3d .intro-logo3d-in { opacity: 1; transform: none; }
#intro.s-brand3d .intro-logo3d-in::after { animation: introLogoSheen calc(1.1s / var(--intro-speed, 1)) ease-in-out calc(.35s / var(--intro-speed, 1)) both; }
@keyframes introLogoSheen { 0% { opacity: 0; background-position: -160% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: 260% 0; } }
/* the wordmark and the separate descriptor hand over to the logo (it carries the tagline) */
#intro .intro-title .ex-word { transition: opacity calc(.45s / var(--intro-speed, 1)) ease; }
#intro.s-brand3d .intro-title .ex-word { opacity: 0; }
#intro.s-brand3d .intro-descriptor { opacity: 0; transition: opacity calc(.35s / var(--intro-speed, 1)) ease; }
/* reduced motion: the logo is shown still, in place of the typeset wordmark */
#intro.is-static.s-brand3d .intro-title { display: block; }
#intro.is-static.s-brand3d .intro-title .ex-word { visibility: hidden; }
#intro.is-static.s-brand3d .intro-word-static, #intro.is-static.s-brand3d .intro-descriptor { display: none; }
#intro.is-static .intro-logo3d-in { transition: none; }
#intro.is-static .intro-logo3d-in::after { display: none; }
@media (prefers-reduced-motion: reduce) { .intro-logo3d-in::after { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   PHASE 3A — HERO POSITIONING
   Order: location · brand (3D logo + by Lalit Enterprises) · headline ·
   status strip · description · services · two CTAs · stats.
   (the tagline appears once, in the header brand block — not repeated here)
   Reuses the hero's own entrance (lineReveal / slideUp, paused until
   body.is-ready); only sizes, spacing and the two-CTA layout are set here.
══════════════════════════════════════════════════════════════════ */
/* brand identification: the logo steps back so the headline leads */
html:not(.brand-classic) .hero .hero-logo3d { width: min(100%, clamp(236px, 60px + 22vw, 400px)); margin: 0 0 .5rem; }
.hero .hero-title .hero-by {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  font: 600 clamp(11px, .55rem + .3vw, 13px)/1.2 var(--ff-body); letter-spacing: .34em; color: var(--muted);
}
html.brand-classic .hero .hero-title .hero-by { margin-top: .6rem; }
/* headline: the main message, in the brand display face */
.hero .hero-headline {
  font-size: clamp(2.35rem, 1rem + 3.55vw, 4.6rem); line-height: .98; letter-spacing: .5px; color: var(--white);
}
.hero-title .hl-1 span { animation-delay: 1.3s; }
.hero-title .hl-2 span { animation-delay: 1.4s; }
html.intro-played body .hero-title .hl-1 span { animation-delay: .6s; }
html.intro-played body .hero-title .hl-2 span { animation-delay: .68s; }
/* supporting copy: two short paragraphs */
.hero .hero-desc { max-width: 54ch; margin-bottom: 22px; }
.hero .hero-desc.hero-lead { margin-bottom: 12px; }
/* services line */
.hero-services {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 28px -1.6em; max-width: calc(60ch + 1.6em);
  clip-path: inset(-4px 0 -4px 1.6em);         /* the separator that starts a wrapped row is clipped away */
  font: 600 11.5px/1.4 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: #C3CFDF;
  opacity: 0; animation: slideUp .8s ease 1.5s forwards;
}
.hero-services li { white-space: nowrap; }
.hero-services li::before { content: '·'; display: inline-block; width: 1.6em; text-align: center; color: var(--gold); }
html.intro-played body .hero-services { animation-delay: .72s; }
/* two CTAs: side by side when they fit, stacked full-width when they don't */
.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero .hero-ctas .btn { flex: 0 1 auto; grid-column: auto; white-space: nowrap; }
.hero .hero-ctas .cta-explore svg { width: 16px; height: 16px; }
.hero .hero-stats { margin-top: 28px; }
@media (max-width: 1279px) { .hero .hero-ctas .btn { flex: 1 1 auto; } }
@media (max-width: 1024px), (pointer: coarse) {
  body .hero-title .hl-1 span { animation-delay: .45s; }
  body .hero-title .hl-2 span { animation-delay: .52s; }
  body .hero-services { animation-delay: .55s; }
}
@media (max-width: 1024px) {
  .hero .hero-title .hero-by { margin-bottom: 16px; }
  .hero-services { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  /* phones: the primary action follows the first sentence; the detail and services follow it
     (the CTAs are the only focusable items here, so keyboard order still matches what is seen) */
  .hero .hero-content { display: flex; flex-direction: column; align-items: flex-start; }
  .hero .hero-content > * { max-width: 100%; }
  .hero .hero-title, .hero .hero-ctas, .hero .hero-stats { align-self: stretch; }
  .hero .hero-ctas { order: 1; margin-bottom: 24px; }
  .hero .hero-desc-more, .hero-services, .hero .hero-stats { order: 2; }
  .hero .hero-desc.hero-lead { margin-bottom: 20px; }
  .hero .hero-ctas .btn { flex-basis: 100%; }
  .hero-services { font-size: 10.5px; letter-spacing: .12em; margin-bottom: 24px; }
}
@media (max-width: 359px) { .hero .hero-headline { font-size: 2.05rem; } }
@media (prefers-reduced-motion: reduce) { .hero-services { opacity: 1; animation: none; } }

/* ══════════════════════════════════════════════════════════════════
   HEADER BRANDING — Lalit Enterprises logo · name · tagline · GST number
   Reuses .brand / .brand-mark / .brand-name / .brand-sub; adds .brand-gst.
   Name leads; tagline and GST are smaller and quieter.
══════════════════════════════════════════════════════════════════ */
.brand-text { min-width: 0; }
.brand-name { line-height: .95; }
.brand-sub { margin-top: 5px; font-size: 10px; letter-spacing: .2em; line-height: 1.1; color: #A9B6C8; }
.brand-gst {
  margin-top: 4px; font: 600 9.5px/1.1 var(--ff-body); letter-spacing: .08em;
  color: #7D8CA1; font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  /* phones: compact three-line lockup that clears the search / call / menu controls */
  .brand { gap: 8px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 1.15rem; letter-spacing: .6px; }
  .brand-sub { margin-top: 4px; font-size: 8.5px; letter-spacing: .07em; }
  .brand-gst { margin-top: 3px; font-size: 8.5px; letter-spacing: .02em; }
}
@media (max-width: 374px) {
  .brand { gap: 7px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-sub { letter-spacing: .04em; }
}
@media (max-width: 359px) {
  /* 320–359 px: no room for four controls beside the lockup; search stays in the Menu (Menu → Search) */
  .site-header .hdr-search { display: none; }
}

/* AMC plans: quote button instead of a public price (Oct 2026) */
.amc-quote-btn {
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.amc-quote-btn::after { content: " \2192"; }
.amc-quote-btn:hover, .amc-quote-btn:focus-visible { background: var(--gold); color: #0E1628; }

/* Homepage → products page links (Oct 2026) */
.see-all-row { display: flex; justify-content: center; margin-top: 32px; }
.see-all-link { text-decoration: none; gap: 8px; }
.cat-tab-link { color: var(--gold); }
.cat-tab-link:hover { color: var(--white); }
.hdr-products { padding: 11px 16px; white-space: nowrap; text-decoration: none; }
@media (max-width: 1099px) { .hdr-products { display: none; } }   /* phones: "All Products" tab + menu */

/* ─── BRAND SPLASH (Oct 2026) ─────────────────────────────────────
   Short brand intro for pages other than the homepage's full intro.
   html.splash-3 → 3-second version (first page of a visit)
   html.splash-1 → 1-second logo flash (later pages in the same visit)
   Decided in each page's <head> before first paint; CSS-timed, so it
   still ends if a script fails. html.splash-done removes it at once. */
#elt-splash { display: none; }
html.splash-3 #elt-splash, html.splash-1 #elt-splash {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at 50% 45%, #07101F 0%, #03060D 70%);
  color: #CBD5E1; overflow: hidden; pointer-events: auto;
  animation: spOut .55s cubic-bezier(.7,0,.2,1) 2.45s forwards;
}
html.splash-1 #elt-splash { animation-duration: .35s; animation-delay: .7s; }
html.splash-done #elt-splash { display: none !important; }
.sp-grid {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background:
    linear-gradient(rgba(59,130,246,.10) 1px, transparent 1px) center / 44px 44px,
    linear-gradient(90deg, rgba(59,130,246,.10) 1px, transparent 1px) center / 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%);
  opacity: 0; transform: scale(1.08); animation: spGrid 1.2s ease .05s forwards;
}
.sp-core { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(86vw, 640px); }
.sp-id { position: relative; width: clamp(68px, 12vmin, 104px); aspect-ratio: 1; margin-bottom: clamp(10px, 2vh, 16px); }
.sp-logo { width: 100%; height: 100%; display: block; opacity: 0; clip-path: inset(0 0 100% 0); animation: spLogo .6s cubic-bezier(.4,0,.2,1) .1s forwards; }
.sp-rb { position: absolute; width: 14px; height: 14px; border: 2px solid #60A5FA; opacity: 0; animation: spFade .3s ease .1s forwards; }
.sp-rb.tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.sp-rb.tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; }
.sp-rb.bl { bottom: -8px; left: -8px; border-right: 0; border-top: 0; }
.sp-rb.br { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.sp-scan { position: absolute; left: -12%; right: -12%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #BFDBFE, transparent); opacity: 0; animation: spScan .7s cubic-bezier(.4,0,.2,1) .15s both; }
.sp-company { font: 400 clamp(1.3rem, 4.4vmin, 2rem)/1 var(--ff-head); letter-spacing: .22em; padding-left: .22em; color: #E2E8F0; opacity: 0; transform: translateY(8px); animation: spRise .5s ease .55s forwards; }
.sp-tagline { margin-top: 8px; font: 600 clamp(9px, 1.6vmin, 12px)/1 var(--ff-body); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: #93C5FD; opacity: 0; clip-path: inset(0 50% 0 50%); animation: spTag .6s ease .8s forwards; }
.sp-word { position: relative; margin-top: clamp(16px, 3vh, 28px); width: min(78vw, 520px); }
.sp-word img { width: 100%; height: auto; display: block; opacity: 0; clip-path: inset(0 100% 0 0); animation: spWord .8s cubic-bezier(.6,0,.2,1) 1.15s forwards; }
.sp-glint {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,236,190,.6) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat;
  -webkit-mask: url(../images/elettron-3d-logo-800.webp) center / 100% 100% no-repeat;
          mask: url(../images/elettron-3d-logo-800.webp) center / 100% 100% no-repeat;
  animation: spGlint .9s ease 1.85s forwards;
}
.sp-skip {
  position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom));
  padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.6);
  color: #CBD5E1; font: 600 12px/1 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.sp-skip:hover, .sp-skip:focus-visible { border-color: #60A5FA; color: #fff; }
html.splash-1 .sp-skip { display: none; }

/* 1-second flash: everything arrives together, then fades */
html.splash-1 .sp-grid { animation: spGrid .3s ease forwards; }
html.splash-1 .sp-logo, html.splash-1 .sp-word img { animation: spFadeFull .25s ease forwards; clip-path: none; }
html.splash-1 .sp-rb, html.splash-1 .sp-company, html.splash-1 .sp-tagline { animation: spFadeFull .25s ease .05s forwards; transform: none; clip-path: none; }
html.splash-1 .sp-scan, html.splash-1 .sp-glint { display: none; }

/* reduced motion: a still brand card, shorter */
html.splash-3.splash-rm #elt-splash { animation-delay: 1s; }
html.splash-3:not(.splash-done), html.splash-3:not(.splash-done) body,
html.splash-1:not(.splash-done), html.splash-1:not(.splash-done) body { overflow: hidden; }
html.splash-rm .sp-grid, html.splash-rm .sp-logo, html.splash-rm .sp-rb, html.splash-rm .sp-company,
html.splash-rm .sp-tagline, html.splash-rm .sp-word img { animation: none; opacity: 1; transform: none; clip-path: none; }
html.splash-rm .sp-scan, html.splash-rm .sp-glint { display: none; }

@keyframes spOut { to { opacity: 0; visibility: hidden; transform: scale(1.02); pointer-events: none; } }
@keyframes spGrid { to { opacity: 1; transform: scale(1); } }
@keyframes spLogo { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spFadeFull { to { opacity: 1; } }
@keyframes spScan { 0% { opacity: 0; top: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes spRise { to { opacity: 1; transform: none; } }
@keyframes spTag { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes spWord { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes spGlint { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 160% 0; } }
@media (max-width: 420px) { .amc-quote-btn { font-size: .95rem; padding: 7px 12px; letter-spacing: .5px; } }
@media (max-width: 360px) { .amc-quote-btn::after { content: none; } .amc-quote-btn { padding: 7px 10px; } }
.amc-card > div { min-width: 0; }   /* lets the plans column shrink on very narrow phones */

/* ─── SECURITY GUIDES (guides.html + guide-*.html, Oct 2026) ───────── */
.g-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; color: var(--muted); font: 600 12px var(--ff-body); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; position: relative; z-index: 1; }
.g-share { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.g-share .btn { text-decoration: none; }
.g-share svg { width: 16px; height: 16px; }
.g-toc { position: sticky; top: calc(var(--hdr-offset, 0px) + 0px); z-index: 40; background: rgba(6,11,24,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.g-toc-inner { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.g-toc-inner::-webkit-scrollbar { display: none; }
.g-toc a { flex: 0 0 auto; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border); background: rgba(26,86,219,.08); color: var(--muted); font: 600 12.5px var(--ff-body); text-decoration: none; white-space: nowrap; }
.g-toc a:hover, .g-toc a:focus-visible { color: var(--white); border-color: rgba(59,130,246,.5); }
.g-body { padding-block: 18px 40px; }
.g-sec { max-width: 860px; padding: 40px 0 8px; scroll-margin-top: 130px; }
.g-sec h2 { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.2; margin-bottom: 14px; color: var(--white); }
.g-sec h2 .g-num { display: block; font: 700 11px var(--ff-body); letter-spacing: 2.5px; color: var(--electric); margin-bottom: 8px; }
.g-sec h3 { font: 700 1.05rem var(--ff-body); color: var(--white); margin: 22px 0 8px; }
.g-sec p, .g-sec li { color: #B8C4D6; line-height: 1.75; font-size: 1rem; }
.g-sec p { margin-bottom: 14px; }
.g-sec ul, .g-sec ol { margin: 0 0 16px 1.2em; }
.g-sec li { margin-bottom: 6px; }
.g-sec li::marker { color: var(--electric); }
.g-sec strong { color: var(--white); }
.g-sec a { color: #93C5FD; }
.g-lead { font-size: 1.12rem !important; color: #D6DEEA !important; }
.g-flow { display: flex; align-items: stretch; gap: 0; margin: 22px 0 18px; flex-wrap: nowrap; }
.g-node { flex: 1 1 0; min-width: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 14px; text-align: center; }
.g-node svg { width: 30px; height: 30px; color: #93C5FD; margin: 0 auto 8px; display: block; }
.g-node b { display: block; color: var(--white); font: 700 .92rem var(--ff-body); margin-bottom: 4px; }
.g-node span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.g-arrow { flex: 0 0 28px; display: grid; place-items: center; color: var(--gold); font-size: 1.2rem; }
@media (max-width: 700px) {
  .g-flow { flex-direction: column; }
  .g-arrow { flex-basis: 26px; transform: rotate(90deg); }
}
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 16px 0 20px; }
.g-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 16px 12px; }
.g-card b { display: block; color: var(--white); font: 700 1rem var(--ff-body); margin-bottom: 4px; }
.g-card .g-tag { display: inline-block; font: 700 10.5px var(--ff-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.g-card p { font-size: .92rem; margin-bottom: 6px; }
.g-table-wrap { overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--border); border-radius: 12px; }
.g-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .92rem; }
.g-table th, .g-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: #B8C4D6; line-height: 1.55; }
.g-table th { background: rgba(26,86,219,.12); color: var(--white); font-weight: 700; }
.g-table tr:last-child td { border-bottom: 0; }
.g-table td:first-child { color: var(--white); font-weight: 600; }
.g-note { display: flex; gap: 12px; padding: 14px 16px; margin: 16px 0 20px; border-radius: 12px; background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.3); }
.g-note p { margin: 0; font-size: .95rem; }
.g-note::before { content: "!"; flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #0E1628; font: 800 13px var(--ff-body); margin-top: 2px; }
.g-formula { padding: 14px 16px; border-radius: 12px; background: rgba(26,86,219,.1); border: 1px solid var(--border); color: var(--white); font: 600 1rem var(--ff-body); margin: 12px 0 16px; }
.g-check { list-style: none; margin-left: 0 !important; }
.g-check li { position: relative; padding-left: 28px; }
.g-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #4ADE80; font-weight: 800; }
.g-faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); margin-bottom: 10px; }
.g-faq summary { cursor: pointer; padding: 15px 18px; color: var(--white); font: 600 1rem var(--ff-body); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; color: var(--electric); font-size: 1.3rem; line-height: 1; }
.g-faq details[open] summary::after { content: "–"; }
.g-faq details p { padding: 0 18px 4px; }
.g-cta { margin: 46px 0 10px; padding: clamp(22px, 4vw, 36px); border-radius: 16px; background: linear-gradient(135deg, rgba(26,86,219,.22), rgba(19,32,64,.9)); border: 1px solid rgba(59,130,246,.35); }
.g-cta h2 { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; color: var(--white); }
.g-cta p { color: #B8C4D6; margin-bottom: 18px; max-width: 640px; line-height: 1.7; }
.g-cta .g-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.g-cta .btn { text-decoration: none; }
.g-related { padding-block: 30px 60px; }
.g-related h2 { font: 700 12px var(--ff-body); letter-spacing: 2.5px; text-transform: uppercase; color: var(--electric); margin-bottom: 16px; }
.g-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.g-hub-card { display: flex; flex-direction: column; text-decoration: none; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; color: inherit; }
.g-hub-card:hover, .g-hub-card:focus-visible { transform: translateY(-4px); border-color: rgba(59,130,246,.55); }
.g-hub-card svg { width: 38px; height: 38px; color: #93C5FD; margin-bottom: 14px; }
.g-hub-card b { color: var(--white); font: 700 1.15rem var(--ff-body); margin-bottom: 6px; }
.g-hub-card span { color: var(--muted); font-size: .93rem; line-height: 1.6; flex: 1; }
.g-hub-card em { font-style: normal; color: var(--gold); font: 700 12.5px var(--ff-body); letter-spacing: .5px; margin-top: 14px; }
.g-hub-wrap { padding-block: 40px 70px; }
.g-share-row { display: flex; gap: 8px; margin-top: 10px; }
.g-share-row a, .g-share-row button { font: 600 12px var(--ff-body); padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: rgba(26,86,219,.08); color: #B8C4D6; cursor: pointer; text-decoration: none; }
.g-share-row a:hover, .g-share-row button:hover { color: #fff; border-color: rgba(59,130,246,.5); }
.g-copied { color: #4ADE80 !important; border-color: rgba(74,222,128,.5) !important; }
.g-hub-item { display: flex; flex-direction: column; }
.g-hub-item .g-hub-card { flex: 1; }
.faq-guides a { color: var(--gold); font-weight: 600; text-decoration: none; }
.faq-guides a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .g-node { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; text-align: left; padding: 12px 14px; align-items: center; }
  .g-node svg { grid-row: span 2; margin: 0; width: 26px; height: 26px; }
  .g-node b { margin-bottom: 0; }
  .g-arrow { flex-basis: 22px; }
}

/* cross-links between homepage, products and guides (Oct 2026) */
.see-all-row { gap: 12px 22px; flex-wrap: wrap; align-items: center; }
.see-all-guide, .pp-guide-link { color: var(--gold); font: 600 .9rem var(--ff-body); text-decoration: none; }
.see-all-guide:hover, .pp-guide-link:hover { text-decoration: underline; }
.pp-guide-link { display: inline-block; margin-top: 8px; font-size: .86rem; }

/* ─── SERVICE PAGES (Oct 2026) ─────────────────────────────────── */
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.s-chips span { padding: 7px 13px; border-radius: 100px; border: 1px solid var(--border); background: rgba(26,86,219,.08); color: #B8C4D6; font: 600 12.5px var(--ff-body); }
.s-chips-near span { border-color: rgba(245,166,35,.35); color: #F5D08A; }
.s-steps { list-style: none; margin: 14px 0 10px !important; counter-reset: st; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.s-steps li { counter-increment: st; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 14px 56px; position: relative; margin: 0; }
.s-steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font: 400 1.5rem/1 var(--ff-head); color: var(--gold); }
.s-steps b { display: block; color: var(--white); margin-bottom: 2px; }
.s-steps span { color: var(--muted); font-size: .9rem; line-height: 1.55; }
a.s-prod { text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
a.s-prod:hover, a.s-prod:focus-visible { border-color: rgba(59,130,246,.55); transform: translateY(-2px); }
.s-prod p { color: #D6DEEA; }
.s-more { color: var(--electric) !important; font: 600 .82rem var(--ff-body); margin: 0 !important; }
.s-plan-btn { text-decoration: none !important; margin-top: 6px; }
.pp-hero .g-share { margin-top: 6px; }

.testi-google { text-align: center; margin-top: 28px; }
.testi-google a { color: var(--gold); font-weight: 600; text-decoration: none; }
.testi-google a:hover { text-decoration: underline; }
.clients-section[hidden] { display: none !important; }