/* Z-Tech Solutions widget layout rules. Depends on ztech-tokens.css. */

/* Elementor's default column wrap ("elementor-widget-wrap.elementor-element-
   populated") carries its own 10px padding on every side. Every Z-Tech
   section widget already reproduces its exact literal spacing from the
   Build Tutorial (e.g. Service Grid's 77px/19px/32px, Stats' 56px top
   margin) INSIDE its own markup, so that Elementor default just stacks an
   uncounted extra ~10-20px onto every section boundary on top of the real
   spec value — the cause of "gap is close but not exact" measured against
   source. Zeroed here since our widgets are always the sole occupant of
   their column and already own 100% of their intended spacing. */
.elementor-widget-wrap.elementor-element-populated {
padding: 0 !important;
}

@keyframes zt-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes zt-marquee-rev {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes zt-pulse-glow {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
@keyframes zt-lp-num-glow {
0%, 100% { text-shadow: 0 0 14px rgba(94,234,212,.25); }
50% { text-shadow: 0 0 26px rgba(94,234,212,.55), 0 0 46px rgba(94,234,212,.2); }
}
@keyframes zt-lp-border-glow {
0%, 100% { box-shadow: inset 0 0 0 1px rgba(94,234,212,.14), 0 0 0 rgba(94,234,212,0); }
50% { box-shadow: inset 0 0 0 1px rgba(94,234,212,.3), 0 0 40px rgba(94,234,212,.12); }
}
@keyframes zt-lp-underline-sweep {
0%, 45%, 100% { transform: translateX(0); opacity: 0; }
55% { opacity: 1; }
85% { transform: translateX(320%); opacity: 0; }
}
@keyframes zt-lp-sweep {
from { transform: translateX(var(--zt-glow-sweep-start)) skewX(var(--zt-glow-sweep-skew)); }
to { transform: translateX(var(--zt-glow-sweep-end)) skewX(var(--zt-glow-sweep-skew)); }
}

/* ── Ported verbatim from the design source (Z-Tech Solutions Homepage.dc.html) ── */
@keyframes zt-bg-drift {
0% { transform: translate(0,0) scale(1); }
50% { transform: translate(1.5%,-2%) scale(1.03); }
100% { transform: translate(0,0) scale(1); }
}
@keyframes zt-ring-pulse {
0% { box-shadow: 0 0 0 0 rgba(47,143,208,.5); }
100% { box-shadow: 0 0 0 16px rgba(47,143,208,0); }
}
@keyframes zt-orb-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes zt-diag-border-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes zt-word-cycle {
0%, 19% { transform: translateY(0); }
22%, 41% { transform: translateY(-1.15em); }
44%, 63% { transform: translateY(-2.3em); }
66%, 85% { transform: translateY(-3.45em); }
88%, 100% { transform: translateY(-4.6em); }
}
@keyframes zt-chip-border {
0%, 100% { border-color: rgba(47,143,208,.4); }
50% { border-color: rgba(55,224,216,.45); }
}

/* Fixed-position ambient aurora background, output once site-wide from Header.php */
#ztech-ambient-bg-layer {
position: fixed;
inset: 0;
z-index: 0;
background: #0a0a12;
overflow: hidden;
pointer-events: none;
}
#ztech-ambient-bg {
position: absolute;
inset: -10%;
animation: zt-bg-drift 60s ease-in-out infinite;
background:
radial-gradient(ellipse 45% 35% at 12% 15%, rgba(157,120,255,.32), transparent 60%),
radial-gradient(ellipse 40% 35% at 85% 25%, rgba(94,150,234,.26), transparent 60%),
radial-gradient(ellipse 40% 40% at 25% 80%, rgba(255,130,90,.16), transparent 60%),
radial-gradient(ellipse 45% 40% at 90% 88%, rgba(94,234,212,.14), transparent 60%);
}

/* Animated conic/gradient border wrap — used on the diagnostic wizard panel and the Service Area map card */
.zt-diag-glow-wrap {
position: relative;
border-radius: var(--zt-radius-3xl);
padding: 2px;
background: var(--zt-gradient-accent-multi);
background-size: 300% 300%;
animation: zt-diag-border-shift 8s ease infinite;
}
.zt-diag-glow-wrap::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(--zt-radius-3xl) + 2px);
background: var(--zt-gradient-accent-multi);
background-size: 300% 300%;
animation: zt-diag-border-shift 8s ease infinite;
filter: blur(18px);
opacity: .55;
z-index: -1;
}

/* Rotating gradient ring behind numbered step icons (Process_Steps_Widget) */
.zt-orb-glow-wrap {
position: relative;
width: 40px;
height: 40px;
margin: 0 auto 12px;
}
.zt-orb-glow {
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(#9184d9,#2f8fd0,#37e0d8);
animation: zt-orb-rotate 16s linear infinite;
}
.zt-orb-glow.zt-orb-b1 { filter: blur(6px); }
.zt-orb-glow.zt-orb-b2 { filter: blur(18px); opacity: .85; }
.zt-orb-glow-number {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--zt-white);
}

/* Vertically-cycling hero word list */
.zt-word-cycle-mask {
display: inline-block;
overflow: hidden;
height: 1.15em;
vertical-align: bottom;
}
.zt-word-cycle {
display: flex;
flex-direction: column;
color: var(--zt-accent-teal);
animation: zt-word-cycle 9s linear infinite;
}

.zt-btn-primary,
.zt-btn-secondary,
.zt-btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 28px;
border-radius: var(--zt-radius-pill);
font-family: var(--zt-font-body);
font-weight: 600;
font-size: 15px;
text-decoration: none;
cursor: pointer;
border: none;
transition: transform .2s var(--zt-ease-standard), box-shadow .2s var(--zt-ease-standard);
}
.zt-btn-primary {
background: var(--zt-gradient-btn);
color: var(--zt-white);
box-shadow: var(--zt-btn-shadow);
position: relative;
overflow: hidden;
}
.zt-btn-primary:hover,
.zt-btn-primary.zt-glow-btn:hover {
transform: translateY(var(--zt-btn-hover-translate-y));
}
.zt-btn-secondary {
background: var(--zt-card-fill);
color: var(--zt-text);
border: 1.5px solid var(--zt-border-soft-25);
}
.zt-btn-secondary:hover {
background: var(--zt-card-fill-hover);
border-color: var(--zt-border-soft-30);
}
.zt-btn-ghost {
background: transparent;
color: var(--zt-accent-teal);
border: 1.5px solid var(--zt-border-soft-20);
}
.zt-btn-ghost:hover {
background: var(--zt-glow-teal-12);
}

.zt-link-u,
.zt-nav-u {
position: relative;
color: var(--zt-text-secondary);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
}
.zt-link-u::after,
.zt-nav-u::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--zt-underline-gradient);
transition: width var(--zt-duration-underline) var(--zt-ease-standard);
}
.zt-link-u:hover::after,
.zt-nav-u:hover::after {
width: 100%;
}

.zt-reveal {
opacity: 0;
transform: translateY(var(--zt-reveal-translate-y));
transition: opacity var(--zt-duration-reveal) var(--zt-ease-standard),
transform var(--zt-duration-reveal) var(--zt-ease-standard);
}
.zt-reveal.in-view {
opacity: 1;
transform: translateY(0);
}

.zt-svc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.zt-svc-card {
position: relative;
display: block;
border-radius: var(--zt-radius-card);
background: var(--zt-card-fill);
border: 1px solid var(--zt-border-soft-14);
text-decoration: none;
transition: background .2s var(--zt-ease-standard), border-color .2s var(--zt-ease-standard), transform .25s;
}
.zt-svc-card:hover {
background: var(--zt-card-fill-hover);
border-color: var(--zt-border-soft-25);
transform: translateY(-5px);
}
.zt-svc-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: calc(var(--zt-radius-card) + 1px);
background: conic-gradient(from 0deg, #2f8fd0, #37e0d8, #2f8fd0);
opacity: 0;
transition: opacity .3s;
z-index: -1;
}
.zt-svc-card:hover::before {
opacity: .5;
}
.zt-mini-service-pill:hover {
border-color: rgba(55,224,216,.45);
}
.zt-assistant-layout-grid-4 .zt-assistant-answer svg {
width: 26px;
height: 26px;
}
.zt-assistant-layout-grid-3 .zt-assistant-answer svg {
width: 22px;
height: 22px;
}
.zt-svc-card-inner {
display: flex;
flex-direction: column;
gap: 12px;
}
.zt-svc-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, rgba(47,143,208,.3), rgba(55,224,216,.18));
color: #8fd4ec;
box-shadow: 0 0 16px rgba(47,143,208,.25) inset;
}

.zt-faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--zt-text);
font-size: 16px;
font-weight: 500;
padding: 18px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: color .2s var(--zt-ease-standard);
}
.zt-accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .3s var(--zt-ease-standard);
overflow: hidden;
}
.zt-accordion-body.open {
grid-template-rows: 1fr;
}
.zt-accordion-body-inner {
min-height: 0;
color: var(--zt-text-muted);
padding-bottom: 18px;
line-height: 1.6;
}
.zt-accordion-chevron {
transition: transform .25s var(--zt-ease-standard);
flex-shrink: 0;
}
.zt-accordion-chevron.open {
transform: rotate(180deg);
}

.zt-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0;
position: relative;
padding: 22px 26px;
background: #0d0f22;
background-image: radial-gradient(rgba(94,234,212,.22) 1px, transparent 1.5px);
background-size: 20px 20px;
border-radius: 18px;
animation: zt-lp-border-glow 6s ease-in-out infinite;
overflow: hidden;
}
.zt-stat-row::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15,16,35,.88), rgba(15,16,35,.5));
pointer-events: none;
}
.zt-stat-row > .zt-lp-tile {
position: relative;
}
.zt-stat-eyebrow {
font: 700 9.5px ui-monospace, monospace;
letter-spacing: .07em;
line-height: 1.45;
margin-bottom: 10px;
display: flex;
align-items: flex-start;
gap: 6px;
text-transform: uppercase;
min-height: 2.9em;
color: currentColor;
}
.zt-stat-eyebrow::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
flex-shrink: 0;
margin-top: 5px;
}
.zt-lp-tile {
padding: 0 19px;
border-left: 1px solid rgba(94,234,212,.18);
text-align: left;
transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s;
}
.zt-lp-tile:hover {
background: rgba(94,234,212,.04);
transform: translateY(-3px);
}
.zt-lp-val {
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 700;
color: #f2fbfa;
line-height: 1;
animation: zt-lp-num-glow 3.4s ease-in-out infinite;
}
.zt-lp-underline {
position: relative;
height: 2px;
border-radius: 2px;
background: rgba(255,255,255,.08);
margin-top: 11px;
overflow: hidden;
}
.zt-lp-underline::after {
content: '';
position: absolute;
top: 0;
left: -45%;
width: 45%;
height: 100%;
background: linear-gradient(90deg, transparent, currentColor, transparent);
animation: zt-lp-underline-sweep 3.2s ease-in-out infinite;
filter: brightness(1.6);
}

.zt-logo-wall {
perspective: 600px;
}
.zt-usp-marquee-track {
display: flex;
width: max-content;
gap: 38px;
animation: zt-marquee 32s linear infinite;
-webkit-mask-image: var(--zt-gradient-marquee-mask);
mask-image: var(--zt-gradient-marquee-mask);
}
/* .zt-logo-row is the CLIP + 3D-tilt wrapper; the scroll animation lives on
   the nested .zt-logo-track instead of here — an element can only have one
   "transform" value at a time, so a running translateX keyframe on this
   same element would silently win over a static rotateX every frame. */
.zt-logo-row {
overflow: hidden;
transform: rotateX(2deg);
}
.zt-logo-row.zt-logo-row-rev {
transform: rotateX(-2deg);
}
.zt-logo-track {
display: flex;
width: max-content;
gap: 13px;
/* Source literally specifies 220s/200s ("deliberately slow") but that
   reads as static rather than "slow" on an actual page — a full cycle
   takes over 3.5 minutes, so a visitor never perceives motion during a
   normal visit. Sped up to a pace that's still calm but visibly a
   moving marquee within a few seconds of looking at it. */
animation: zt-marquee 42s linear infinite;
-webkit-mask-image: var(--zt-gradient-marquee-mask);
mask-image: var(--zt-gradient-marquee-mask);
}
.zt-logo-row-rev .zt-logo-track {
animation-name: zt-marquee-rev;
animation-duration: 36s;
}
.zt-story-full-body h3 {
color: var(--zt-text);
font-size: 19px;
font-weight: 600;
margin: 32px 0 10px;
}
.zt-story-full-body p {
margin: 0 0 4px;
}
.zt-showcase-card:hover {
border-color: rgba(94,234,212,.5);
box-shadow: 0 0 0 1px rgba(94,234,212,.3), 0 12px 24px -8px rgba(0,0,0,.5);
}
.zt-brand-chip {
display: inline-block;
padding: 9px 14px;
border-radius: 8px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(47,143,208,.16);
color: #9694a8;
white-space: nowrap;
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
filter: saturate(.4);
transition: filter .3s;
animation: zt-chip-border 9s ease-in-out infinite;
}

.zt-testimonial-track {
display: flex;
width: max-content;
gap: 20px;
animation: zt-marquee 152s linear infinite;
-webkit-mask-image: var(--zt-gradient-marquee-mask);
mask-image: var(--zt-gradient-marquee-mask);
}
.zt-testimonial-card {
flex-shrink: 0;
width: 320px;
padding: 22px;
border-radius: var(--zt-radius-card);
background: var(--zt-card-fill);
border: 1px solid var(--zt-border-soft-14);
}

.zt-toggle {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
flex-shrink: 0;
cursor: pointer;
}
.zt-toggle input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.zt-toggle-track {
position: absolute;
inset: 0;
background: var(--zt-border-soft-20);
border-radius: var(--zt-radius-pill);
transition: background .2s var(--zt-ease-standard);
}
.zt-toggle-track::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: var(--zt-radius-circle);
background: var(--zt-white);
transition: transform .2s var(--zt-ease-standard);
}
.zt-toggle input:checked + .zt-toggle-track {
background: var(--zt-accent-teal);
}
.zt-toggle input:checked + .zt-toggle-track::before {
transform: translateX(18px);
}
.zt-toggle input:disabled {
cursor: default;
}
.zt-toggle input:disabled + .zt-toggle-track {
opacity: .6;
}

.zt-process-connector {
position: relative;
}
@media (min-width: 700px) {
.zt-process-connector::before {
content: "";
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: var(--zt-border-soft-20);
z-index: 0;
}
}

.zt-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.zt-gallery-item {
border-radius: var(--zt-radius-card);
overflow: hidden;
}
.zt-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.zt-h-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.zt-h-scroll > * {
scroll-snap-align: start;
flex-shrink: 0;
}

.zt-assistant-answer:hover {
border-color: var(--zt-accent-teal) !important;
background: linear-gradient(135deg, var(--zt-border-soft-20), var(--zt-glow-teal-12)) !important;
}
.zt-faq-question:hover {
color: var(--zt-accent-teal);
}

.zt-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Exact source breakpoints (see plan Phase 6.1) — service grid: 1/2/3/4 cols at <560 / 560-899 / 900-1199 / >=1200 */
.zt-svc-grid {
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.zt-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.zt-svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.zt-svc-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Showcase carousel: each page's own grid — 1/2/4 cols at <560 / 560-899 / >=900 */
.zt-showcase-carousel {
position: relative;
}
.zt-showcase-page {
grid-template-columns: 1fr !important;
}
@media (min-width: 560px) {
.zt-showcase-page { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 900px) {
.zt-showcase-page { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Gallery grid: 1/2 cols at <700 / >=700 */
.zt-gallery-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) {
.zt-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stats bar: 2/4 cols at <700 / >=700 — the first tile in each ROW has no
   left divider (nothing to divide from), so which nth-child is "row start"
   flips with the column count. */
.zt-stat-row { grid-template-columns: repeat(2, 1fr); }
.zt-stat-row > .zt-lp-tile:nth-child(2n+1) { border-left-width: 0; padding-left: 0; }
@media (min-width: 700px) {
.zt-stat-row { grid-template-columns: repeat(4, 1fr); }
.zt-stat-row > .zt-lp-tile:nth-child(2n+1) { border-left-width: 1px; padding-left: 19px; }
.zt-stat-row > .zt-lp-tile:nth-child(4n+1) { border-left-width: 0; padding-left: 0; }
}

/* Hero outer section decorative background — ported verbatim from source (lines 285-291) */
.elementor-element-hs000001 {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 90% 70% at 15% -10%, rgba(157,120,255,.4), transparent 55%),
radial-gradient(ellipse 80% 60% at 95% 10%, rgba(94,150,234,.3), transparent 55%),
radial-gradient(ellipse 60% 50% at 75% 85%, rgba(255,130,90,.18), transparent 60%),
linear-gradient(160deg,#1b1930 0%,#141527 45%,#0a0a12 100%);
}
.elementor-element-hs000001::before {
content: '';
position: absolute;
width: 520px;
height: 520px;
top: -160px;
left: -120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(157,120,255,.4), transparent 70%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.elementor-element-hs000001::after {
content: '';
position: absolute;
width: 420px;
height: 420px;
top: 60px;
right: -100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,140,100,.25), transparent 70%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.elementor-element-hs000001 > .elementor-container {
position: relative;
z-index: 1;
/* Source's "Hero section wrapper" padding (§11 of the Build Tutorial) —
   was missing entirely, so the two hero columns sat flush against the
   header above and the next section below with no breathing room. */
padding: 35px 19px 56px !important;
box-sizing: border-box;
/* Source: gap:51px;align-items:stretch (line 292) — both were missing,
   so the hero-intro card and diagnosis card had no gap between them and
   didn't reach equal height (whichever wizard step had more content just
   ran on, with no visual floor matching the other column). */
gap: 51px !important;
align-items: stretch !important;
}
.elementor-element-hs000001 .elementor-element-hc000001,
.elementor-element-hs000001 .elementor-element-hc000002 {
align-self: stretch;
}
.elementor-element-hs000001 .elementor-widget-wrap {
height: 100%;
}
.zt-assistant {
height: 100%;
box-sizing: border-box;
}
.zt-assistant > div {
height: 100%;
box-sizing: border-box;
}

/* Hero section (Hero_Intro_Widget + Interactive_Assistant side by side): stacked <960, 0.85fr/1.05fr >=960 */
.zt-hero-section {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: stretch;
}
@media (min-width: 960px) {
.zt-hero-section { grid-template-columns: 0.85fr 1.05fr; gap: 51px; }
}

/* Service Area new layout: stacked <800, side-by-side >=800 */
.zt-service-area-layout {
display: grid;
grid-template-columns: 1fr;
gap: 26px;
align-items: center;
}
@media (min-width: 800px) {
.zt-service-area-layout { grid-template-columns: 1fr 1fr; }
}