/* Techzone Services — UI/UX polish layer
   Added 2026-08-04. Purely additive: transitions, hover states, hero motion,
   focus rings and anchor offsets. No layout properties are overridden.
   Disable by renaming tz-ui-polish.php to .disabled. */

:root{
  --tz-blue:#246BFD;
  --tz-cyan:#00D4FF;
  --tz-purple:#7C3AED;
  --tz-navy:#0B1B33;
  --tz-dark:#07111F;
  --tz-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Anchor offset for the sticky header ---------- */
[id]{scroll-margin-top:96px;}
html{scroll-behavior:smooth;}

/* ---------- Accessible focus rings ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible{
  outline:2px solid var(--tz-cyan);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Cards ---------- */
.tz-card{
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--tz-ease),
             box-shadow .45s var(--tz-ease),
             border-color .45s var(--tz-ease);
}
.tz-card::after{
  content:"";
  position:absolute;
  top:0; left:0;
  height:2px; width:100%;
  background:linear-gradient(90deg,var(--tz-blue),var(--tz-cyan));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s var(--tz-ease);
  pointer-events:none;
}
.tz-card:hover::after,
.tz-card:focus-within::after{transform:scaleX(1);}
.tz-card:hover,
.tz-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(36,107,253,.45)!important;
  box-shadow:0 18px 40px -18px rgba(6,17,33,.42);
}
.tz-card-dark:hover,
.tz-card-dark:focus-within{
  border-color:rgba(0,212,255,.38)!important;
  box-shadow:0 20px 46px -16px rgba(0,0,0,.65);
}
.tz-card .elementor-icon{
  transition:transform .45s var(--tz-ease), box-shadow .45s var(--tz-ease);
}
.tz-card:hover .elementor-icon{
  transform:translateY(-2px) scale(1.07);
  box-shadow:0 10px 22px -10px rgba(36,107,253,.75);
}
.tz-card .elementor-icon-box-title{transition:color .35s var(--tz-ease);}
.tz-card:hover .elementor-icon-box-title,
.tz-card:hover .elementor-icon-box-title a{color:var(--tz-blue);}
.tz-card-dark:hover .elementor-icon-box-title,
.tz-card-dark:hover .elementor-icon-box-title a{color:var(--tz-cyan);}

/* ---------- Buttons ---------- */
.elementor-button{
  transition:transform .3s var(--tz-ease),
             box-shadow .3s var(--tz-ease),
             filter .3s ease!important;
}
.elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(36,107,253,.75);
  filter:saturate(1.08);
}
.elementor-button:active{transform:translateY(0);}

/* ---------- Hero: layered gradient wash + grid ---------- */
.tz-hero{position:relative;overflow:hidden;isolation:isolate;}
.tz-hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-2;
  background:
    radial-gradient(42% 52% at 18% 22%, rgba(36,107,253,.30), transparent 62%),
    radial-gradient(38% 46% at 82% 28%, rgba(0,212,255,.20), transparent 62%),
    radial-gradient(44% 54% at 62% 84%, rgba(124,58,237,.20), transparent 62%);
  animation:tzDrift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
.tz-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
          mask-image:radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
  pointer-events:none;
}
@keyframes tzDrift{
  from{transform:translate3d(-2%,-1%,0) scale(1);}
  to  {transform:translate3d(2%,2%,0) scale(1.09);}
}

/* Hero entrance — pure CSS so it never depends on JS */
.tz-hero .e-con-inner > *{
  animation:tzRise .85s var(--tz-ease) both;
}
.tz-hero .e-con-inner > *:nth-child(1){animation-delay:.05s;}
.tz-hero .e-con-inner > *:nth-child(2){animation-delay:.16s;}
.tz-hero .e-con-inner > *:nth-child(3){animation-delay:.27s;}
.tz-hero .e-con-inner > *:nth-child(4){animation-delay:.38s;}
.tz-hero .e-con-inner > *:nth-child(5){animation-delay:.49s;}
@keyframes tzRise{
  from{opacity:0;transform:translate3d(0,18px,0);}
  to  {opacity:1;transform:none;}
}

/* ---------- Stat strip ---------- */
.tz-stat{transition:transform .4s var(--tz-ease);}
.tz-stat:hover{transform:translateY(-4px);}

/* ---------- Footer + nav link affordance ---------- */
.elementor-location-footer .elementor-nav-menu a{
  transition:color .28s ease, padding-left .28s var(--tz-ease);
}
.elementor-location-footer .elementor-nav-menu a:hover{padding-left:5px;}
.elementor-social-icon{transition:transform .3s var(--tz-ease), background-color .3s ease;}
.elementor-social-icon:hover{transform:translateY(-3px);}

/* ---------- Blog cards ---------- */
.elementor-post{transition:transform .45s var(--tz-ease);}
.elementor-post:hover{transform:translateY(-5px);}
.elementor-post__thumbnail{overflow:hidden;border-radius:12px;}
.elementor-post__thumbnail img{transition:transform .6s var(--tz-ease);}
.elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.06);}

/* ---------- Images never overflow ---------- */
.elementor img{max-width:100%;height:auto;}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .tz-hero::before{animation:none;}
  .tz-hero .e-con-inner > *{animation:none;opacity:1;transform:none;}
  .tz-card,
  .tz-card::after,
  .tz-card .elementor-icon,
  .elementor-button,
  .elementor-post,
  .elementor-post__thumbnail img,
  .elementor-social-icon{transition-duration:.01ms!important;}
  .tz-card:hover,
  .tz-card:focus-within,
  .elementor-button:hover,
  .elementor-post:hover,
  .elementor-social-icon:hover,
  .tz-stat:hover{transform:none;}
}


/* footer-form-constraint */
/* Newsletter form must never force its footer column wider than its declared
   width - that was pushing the Support column onto a second row. */
.elementor-location-footer .elementor-form-fields-wrapper{flex-wrap:wrap;}
.elementor-location-footer .elementor-field-group{width:100%!important;flex:0 0 100%;max-width:100%;}
.elementor-location-footer .elementor-field-textual{min-width:0;width:100%;box-sizing:border-box;}
.elementor-location-footer .elementor-field-group .elementor-button{width:100%;justify-content:center;}


/* footer-stayupdated-position */
/* Separate the newsletter block from the Support links above it. On desktop it
   is pushed to the bottom of its column so it lines up with the contact details
   in column one, and stays aligned if either column's content changes. */
.elementor-location-footer .elementor-element.elementor-element-fh5{margin-top:60px!important;}
@media(min-width:1025px){
  .elementor-location-footer .elementor-element.elementor-element-fh5{margin-top:auto!important;}
}