/* ============================================================
   TechIns Group — enhancement layer (enhance.css)
   Non-destructive UI/UX polish, micro-interactions & accessibility.
   Layered over the original markup. Brand kept: cyan #00e5ff on #020617.
   ============================================================ */
:root{ --enh-cyan:#00e5ff; --enh-ink:#020617; --enh-ease:cubic-bezier(.16,1,.3,1); }

/* ---- Smooth scrolling + offset so in-page anchors clear the floating pill nav ---- */
html{ scroll-behavior:smooth; scroll-padding-top:120px; }

/* ---- FIX: product-page heroes used pt-20 (80px) so the floating nav overlapped the
        eyebrow/badge (header bottom ≈ 95px). Give them clearance like the other pages. ---- */
section[class*="min-h-[85svh]"]{ padding-top:8rem; }
@media (min-width:768px){ section[class*="min-h-[85svh]"]{ padding-top:10.5rem; } }

/* ---- Visible keyboard focus (overrides focus:outline-none + body.hide-focus-outline) ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--enh-cyan) !important;
  outline-offset:3px !important;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(0,229,255,.28) !important;
}
:focus:not(:focus-visible){ outline:none; }

/* ---- Cyan text selection everywhere (incl. the WP-shell body) ---- */
::selection{ background:rgba(0,229,255,.85); color:var(--enh-ink); }
::-moz-selection{ background:rgba(0,229,255,.85); color:var(--enh-ink); }

/* ---- Custom dark scrollbar (global, incl. Firefox) ---- */
html{ scrollbar-color:rgba(0,229,255,.45) rgba(255,255,255,.04); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb{ background:linear-gradient(rgba(0,229,255,.4),rgba(59,130,246,.4));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(0,229,255,.65); background-clip:padding-box; }

/* ---- Contrast bumps for muted text (WCAG AA on near-black) ---- */
.text-white\/30{ color:rgba(255,255,255,.52) !important; }
.text-white\/40{ color:rgba(255,255,255,.6)  !important; }
.text-white\/50{ color:rgba(255,255,255,.68) !important; }

/* ---- Mega-menu: reveal on keyboard focus + JS click toggle (in addition to hover) ---- */
.nav-item-group:focus-within .mega-menu,
.nav-item-group.enh-open .mega-menu{ visibility:visible; opacity:1; transform:translateY(0) scale(1); }

/* ---- Image fade-in (applied by enhance.js) ---- */
img.enh-fade{ opacity:0; transition:opacity .6s ease; }
img.enh-fade.enh-loaded{ opacity:1; }

/* ---- Primary (cyan) buttons: depth gradient + flowing shimmer on hover (BEHIND the text) ---- */
.btn-glow{
  background-image:linear-gradient(110deg,#00cfe8 0%,#00e5ff 30%,#7df3ff 48%,#00e5ff 66%,#00cfe8 100%) !important;
  background-size:220% 100% !important;
  background-position:84% 50%;
  background-repeat:no-repeat;
  transition:background-position .6s var(--enh-ease), box-shadow .3s, transform .25s var(--enh-ease);
}
.btn-glow svg, .btn-glow i{ transition:transform .25s var(--enh-ease); position:relative; }
.btn-glow:hover{ animation:enhBtnFlow 2.4s linear infinite; }
.btn-glow:hover svg, .btn-glow:hover i{ transform:translateX(3px); }
.btn-glow:active{ transform:translateY(0) scale(.985); }
@keyframes enhBtnFlow{ from{background-position:0% 50%;} to{background-position:200% 50%;} }

/* ---- FIX: Kadence sets a:hover/button:hover color to a transparent palette var
        (all --global-palette* are alpha-0), making link/button TEXT vanish on hover.
        These overrides beat Kadence's a:hover (0,1,1) but lose to Tailwind hover:text-* (0,2,0). ---- */
body a:hover, body a:focus, body button:hover, body button:focus{ color:inherit; }   /* keep text visible, don't override real hover:text-* utilities */
.btn-glow, .btn-glow:hover, .btn-glow:focus{ color:#020617 !important; }              /* cyan buttons: always dark, readable text */
[class*="text-dark-900"]:hover{ color:#020617 !important; }                            /* dark-text buttons stay dark on hover */
a[class*="bg-white/"]:hover, button[class*="bg-white/"]:hover{ color:#fff !important; }/* glass/white CTAs stay white on hover */

/* ---- Glass / outline CTAs: subtle press feedback ---- */
a[class*="bg-white/"]:active, button:active{ transform:scale(.985); }

/* ---- Scroll progress bar (top) ---- */
#enh-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:200; pointer-events:none;
  background:linear-gradient(90deg,#00e5ff,#3b82f6); box-shadow:0 0 10px rgba(0,229,255,.55); transition:width .1s linear; }

/* ---- Gentle shimmer on gradient-clipped headline text (hero) ---- */
@media (prefers-reduced-motion:no-preference){
  h1 .bg-clip-text.text-transparent, h1 .text-transparent.bg-clip-text{
    background-size:220% auto !important; animation:enhHeroShimmer 7s ease-in-out infinite;
  }
}
@keyframes enhHeroShimmer{ 0%,100%{background-position:0% center;} 50%{background-position:100% center;} }

/* ---- Active nav-link state (set by enhance.js) ---- */
.nav-link.enh-active{ color:#fff !important; }
.nav-link.enh-active::after{ width:100% !important; }

/* ---- Back-to-top button ---- */
#enh-top{ position:fixed; right:20px; bottom:20px; z-index:90; width:46px; height:46px;
  display:grid; place-items:center; border-radius:50%; border:1px solid rgba(0,229,255,.3);
  background:rgba(15,23,42,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--enh-cyan); cursor:pointer; opacity:0; transform:translateY(12px) scale(.9);
  pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:opacity .35s var(--enh-ease), transform .35s var(--enh-ease), box-shadow .3s, border-color .3s; }
#enh-top svg{ width:20px; height:20px; }
#enh-top.enh-show{ opacity:1; transform:none; pointer-events:auto; }
#enh-top:hover{ border-color:var(--enh-cyan); box-shadow:0 0 22px rgba(0,229,255,.4); transform:translateY(-3px); }
#enh-top.enh-above-chat{ bottom:92px; }   /* raise clear of a bottom-right chat bubble if present */

/* ---- Mobile ergonomics ---- */
@media (max-width:767px){
  input, select, textarea{ font-size:16px !important; }      /* stop iOS focus-zoom */
  #mobile-solutions-list a, #mobile-menu nav a, #mobile-menu a.text-2xl{ min-height:44px; display:flex; align-items:center; }
  .glass-card:active{ transform:scale(.99); }                /* tap feedback (hover is dead on touch) */
  a[href]:active, button:active{ opacity:.85; }
  #enh-top{ right:14px; bottom:14px; }
}

/* ============================================================
   WOW layer — interactive depth (desktop pointer; gated on reduced-motion via JS)
   ============================================================ */
/* Cursor spotlight that follows the pointer across glass cards */
.enh-spot::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(260px circle at var(--enh-mx,50%) var(--enh-my,-240px), rgba(0,229,255,.16), transparent 60%);
  opacity:0; transition:opacity .4s var(--enh-ease); }
.enh-spot:hover::after{ opacity:1; }
/* 3D tilt on atomic cards — crisp transform, keep glass glow transitions */
.enh-tilt{ transform-style:preserve-3d; will-change:transform;
  transition:transform .25s var(--enh-ease), box-shadow .4s, border-color .4s, background .4s !important; }
/* Film-grain texture overlay (premium depth) */
#enh-grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px; }

/* ---- Respect prefers-reduced-motion (the site sets none today) ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  /* make any reveal-on-scroll content simply visible */
  .reveal, .enh-reveal{ opacity:1 !important; transform:none !important; }
  .btn-glow:hover{ animation:none !important; }
  #enh-top{ transition:none !important; }
}