/* === Client feedback fixes (2026-05-27) === */

/* (1) Live engagement tracker — full size, gently floats */
@media (min-width: 1101px){
  .phase1v3-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: end; }
  .phase1v3-tracker{
    box-shadow: 0 45px 90px -30px rgba(31,63,93,.28);
    animation: phase1v3-float 6s ease-in-out infinite;
    margin-top: 90px;
  }
}
@keyframes phase1v3-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .phase1v3-tracker, .phase1v3-tracker *{ animation: none !important; }
}
/* (2) Hide tracker on mobile/tablet */
@media (max-width: 1100px){
  .phase1v3-tracker{ display: none !important; }
  .phase1v3-grid{ grid-template-columns: 1fr; }
}

/* (3) "How the 60 hours happen" — narrower cards on mobile */
@media (max-width: 700px){
  .phase1v3-roadmap{ padding: 64px 0; }
  .phase1v3-steps-grid{ gap: 12px; }
  .phase1v3-step{
    min-height: auto;
    padding: 16px 18px;
    gap: 6px;
    border-radius: 16px;
  }
  .phase1v3-step .t{ font-size: 22px; }
  .phase1v3-step .name{ font-size: 14px; }
  .phase1v3-step .desc{ font-size: 12px; }
  .phase1v3-step::before{ width: 20px; height: 20px; top: 16px; right: 16px; }
}

/* (3+) Decor: grid background under KPI strip — recovers original "numbers" decor */
.phase1v3-kpi{ position: relative; overflow: hidden; }
.phase1v3-kpi::before{
  content:""; position: absolute; inset: 0;
  background-image: url('https://updated.uasoftdev.com/app/themes/uasoft/templates/blocks/numbers/images/grid-desktop.svg');
  background-position: center top; background-repeat: no-repeat; background-size: cover;
  opacity: .35; pointer-events: none;
}
.phase1v3-kpi > *{ position: relative; z-index: 1; }
@media (max-width: 1100px){
  .phase1v3-kpi::before{
    background-image: url('https://updated.uasoftdev.com/app/themes/uasoft/templates/blocks/numbers/images/grid-tablet.svg');
  }
}
@media (max-width: 700px){
  .phase1v3-kpi::before{
    background-image: url('https://updated.uasoftdev.com/app/themes/uasoft/templates/blocks/numbers/images/grid-mobile.svg');
  }
}

/* (3++) Decor: soft accent blobs on hero + animated wavy grid bg */
.phase1v3-hero{ position: relative; overflow: hidden; padding-bottom: 56px; }
/* Hero overlay/blob removed per client request */
.phase1v3-hero > *{ position: relative; z-index: 1; }

/* Restore original WP world-map on hero, position so tracker doesn't hide it.
   Place it BEFORE the tracker (lower-right inside hero, but offset enough to peek out under tracker) */
.phase1v3-hero{
  background-image: url('https://soft.catcode.com.ua/assets/images/block-bg-world.svg') !important;
  background-repeat: no-repeat !important;
  background-size: 540px auto !important;
  background-position: right -80px top 20px !important;
}
/* Kill the world-map on other sections where it was inherited but is unwanted */
.wp-block.portfolio,
.portfolio,
.reviews{ background-image: none !important; }
/* Tracker stays in front; world-map peeks out top and right of tracker */
.phase1v3-tracker{ position: relative; z-index: 2; }
@media (max-width: 1100px){
  .phase1v3-hero{ background-size: 360px auto !important; background-position: right -40px top 20px !important; }
}

/* Roadmap — dots constellation bg (moved here from hero) */
.phase1v3-roadmap::before{
  content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(19,85,188,.6) 1.1px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, #000 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 0%, #000 50%, transparent 90%);
  opacity: .42;
  animation: phase1v3-dots-pan 22s linear infinite;
}
.phase1v3-roadmap > *{ position: relative; z-index: 1; }
@keyframes phase1v3-dots-pan{
  from { background-position: 0 0; }
  to   { background-position: 28px 28px; }
}

/* Cases — wireframe grid bg + animated soft orb */
.phase1v3-cases::after{
  content:""; position: absolute; left: -10%; right: -10%; top: 0; bottom: 0; z-index: 0;
  background-image: url('https://updated.uasoftdev.com/app/themes/uasoft/templates/blocks/numbers/images/grid-desktop.svg');
  background-repeat: no-repeat; background-position: center center; background-size: 120% auto;
  opacity: .25; pointer-events: none;
}
.phase1v3-cases-orb{
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 480px; height: 480px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center, rgba(57,183,255,.18), transparent 65%);
  animation: phase1v3-breathe 8s ease-in-out infinite;
}
@keyframes phase1v3-breathe{
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) scale(1.12); opacity: 1; }
}
.phase1v3-cases > *{ position: relative; z-index: 1; }

/* Guarantee — diagonal accent stripes + dot pattern */
.phase1v3-guarantee::before{
  content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(19,85,188,.55) 1.1px, transparent 1.5px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at 50% 100%, #000 0%, #000 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 0%, #000 50%, transparent 90%);
  opacity: .42;
}
.phase1v3-guarantee-stripes{
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.phase1v3-guarantee-stripes::before,
.phase1v3-guarantee-stripes::after{
  content:""; position: absolute; width: 600px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(19,85,188,.35), transparent);
  transform-origin: left center;
}
.phase1v3-guarantee-stripes::before{
  top: 20%; left: -100px; transform: rotate(-12deg);
  animation: phase1v3-stripe 7s ease-in-out infinite;
}
.phase1v3-guarantee-stripes::after{
  bottom: 18%; right: -100px; transform: rotate(-12deg);
  animation: phase1v3-stripe 7s ease-in-out infinite reverse;
}
@keyframes phase1v3-stripe{
  0%, 100% { opacity: .25; }
  50%      { opacity: .7; }
}
.phase1v3-guarantee > *{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .phase1v3-roadmap::before,
  .phase1v3-cases-orb,
  .phase1v3-guarantee-stripes::before,
  .phase1v3-guarantee-stripes::after{ animation: none !important; }
}

/* ============ LIVELINESS / INTERACTIONS ============ */

/* Progress bar — animated gradient sweep */
.phase1v3-progress::after{
  background: linear-gradient(90deg, var(--p1-accent) 0%, var(--p1-accent-2) 40%, #fff 50%, var(--p1-accent-2) 60%, var(--p1-accent) 100%) !important;
  background-size: 200% 100% !important;
  animation: phase1v3-shine 2.4s linear infinite;
}
@keyframes phase1v3-shine{
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Tracker "in progress" step — pulsing blue dot */
.phase1v3-track-step.is-current .check{
  animation: phase1v3-pulse-blue 1.6s ease-in-out infinite;
}
@keyframes phase1v3-pulse-blue{
  0%, 100% { box-shadow: 0 0 0 0 rgba(19,85,188,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(19,85,188,0); }
}

/* "on track" status badge — pulse green */
.phase1v3-tracker-status::before{
  animation: phase1v3-pulse-green 2s ease-in-out infinite;
}
@keyframes phase1v3-pulse-green{
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,163,72,.7); }
  50%      { box-shadow: 0 0 0 6px rgba(21,163,72,0); }
}

/* Hero CTA — subtle glow pulse on primary button */
.phase1v3-cta-row .btn:first-child{
  position: relative;
  animation: phase1v3-cta-glow 3s ease-in-out infinite;
}
@keyframes phase1v3-cta-glow{
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(19,85,188,.45); }
  50%      { box-shadow: 0 12px 36px -8px rgba(19,85,188,.85), 0 0 0 6px rgba(57,183,255,.12); }
}

/* Reveal-on-scroll: opacity + slide-up */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* Roadmap step — staggered hover lift + arrow shift */
.phase1v3-step{ transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.phase1v3-step:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(19,85,188,.35);
  border-color: var(--p1-accent);
}
.phase1v3-step::before{ transition: transform .35s ease, opacity .35s ease; }
.phase1v3-step:hover::before{ transform: translateX(6px); opacity: 1; }

/* KPI numbers — count-up trigger uses class added by JS */
.phase1v3-kpi-value{ transition: transform .6s ease; }
.phase1v3-kpi-cell:hover .phase1v3-kpi-value{ transform: scale(1.05); }
.phase1v3-kpi-value::after{ transform-origin: center; animation: phase1v3-line-grow 1.2s ease-out both; animation-play-state: paused; }
.is-visible .phase1v3-kpi-value::after{ animation-play-state: running; }
@keyframes phase1v3-line-grow{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Case cards — image-less, but add a moving accent line on hover */
.phase1v3-case{ position: relative; overflow: hidden; }
.phase1v3-case::before{
  content:""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--p1-accent), var(--p1-accent-2));
  transition: width .5s ease;
}
.phase1v3-case:hover::before{ width: 100%; }

/* Guarantee cards — icon spin/scale on hover */
.phase1v3-guarantee-card{ transition: transform .35s ease, box-shadow .35s ease; }
.phase1v3-guarantee-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(31,63,93,.2); }
.phase1v3-guarantee-icon{ transition: transform .5s ease, background .35s ease; }
.phase1v3-guarantee-card:hover .phase1v3-guarantee-icon{
  transform: rotate(-6deg) scale(1.1);
  background: var(--p1-accent); color: #fff;
}

/* Hero Clutch trust-row — stagger fade on load */
.phase1v3-hero-trust-cell{ opacity: 0; animation: phase1v3-rise .7s ease forwards; }
.phase1v3-hero-trust-cell:nth-child(1){ animation-delay: .2s; }
.phase1v3-hero-trust-cell:nth-child(2){ animation-delay: .35s; }
.phase1v3-hero-trust-cell:nth-child(3){ animation-delay: .5s; }
.phase1v3-hero-trust-cell:nth-child(4){ animation-delay: .65s; }
@keyframes phase1v3-rise{
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Star pulse — subtle scale loop, staggered */
.phase1v3-hero-trust-stars svg{ animation: phase1v3-star 2.4s ease-in-out infinite; transform-origin: center; }
.phase1v3-hero-trust-stars svg:nth-child(1){ animation-delay: 0s; }
.phase1v3-hero-trust-stars svg:nth-child(2){ animation-delay: .15s; }
.phase1v3-hero-trust-stars svg:nth-child(3){ animation-delay: .30s; }
.phase1v3-hero-trust-stars svg:nth-child(4){ animation-delay: .45s; }
.phase1v3-hero-trust-stars svg:nth-child(5){ animation-delay: .60s; }
@keyframes phase1v3-star{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Services cards — hover lift on every card */
.our-services .our-services-item{ transition: transform .35s ease, box-shadow .35s ease; }
.our-services .our-services-item:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(31,63,93,.25); }

/* Technologies tabs — animated underline already there; add hover */
.technologies-tab{ transition: color .25s ease, transform .25s ease; }
.technologies-tab:hover{ color: var(--p1-accent); transform: translateY(-2px); }

/* Blog cards lift */
.b-blog .blog-item, .blog .blog-item{ transition: transform .35s ease, box-shadow .35s ease; }
.b-blog .blog-item:hover, .blog .blog-item:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -25px rgba(31,63,93,.2); }

/* FAQ — accent on hover */
.faq .faq-item-title, .faq-item-title{ transition: color .25s ease, padding-left .25s ease; }
.faq .faq-item-title:hover, .faq-item-title:hover{ color: var(--p1-accent); padding-left: 6px; }

/* Reviews — gentle scale on hover */
.reviews .swiper-slide{ transition: transform .35s ease; }
.reviews .swiper-slide:hover{ transform: translateY(-4px); }

/* Footer CTA bar */
.blue-cta{ transition: background .5s ease; }
.blue-cta:hover{ background: linear-gradient(135deg, var(--p1-accent), var(--p1-accent-2)); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* Hero trust-row (Clutch + happy clients + delivery projects) */
.phase1v3-hero-trust{
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center;
  gap: 32px; margin-top: 64px; padding-top: 40px;
  border-top: 1px solid rgba(136,172,223,.4);
}
.phase1v3-hero-trust-cell{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phase1v3-hero-trust-num{
  font: 400 clamp(40px,4.2vw,64px)/1 Lufga, sans-serif;
  color: var(--p1-dark); letter-spacing: -.02em;
}
.phase1v3-hero-trust-lbl{
  font-size: 14px; color: var(--p1-dark); opacity: .68;
  text-transform: uppercase; letter-spacing: .08em;
}
.phase1v3-hero-trust-eyebrow{
  font-size: 12px; font-weight: 500; color: var(--p1-muted);
  text-transform: uppercase; letter-spacing: .12em;
}
.phase1v3-hero-trust-logo{ display: inline-block; line-height: 0; }
.phase1v3-hero-trust-logo svg{ width: 168px; height: auto; }
.phase1v3-hero-trust-stars{ display: flex; gap: 4px; }
.phase1v3-hero-trust-stars svg{ width: 26px; height: 25px; }
@media (max-width: 900px){
  .phase1v3-hero-trust{ grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .phase1v3-hero-trust-logo svg{ width: 140px; }
  .phase1v3-hero-trust-stars svg{ width: 22px; height: 21px; }
}
@media (max-width: 480px){
  .phase1v3-hero-trust-num{ font-size: 36px; }
  .phase1v3-hero-trust-lbl{ font-size: 12px; }
}

.phase1v3-roadmap{ position: relative; overflow: hidden; }
.phase1v3-roadmap::after{
  content:""; position: absolute; bottom: -120px; left: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(19,85,188,.10), transparent 70%);
  pointer-events: none;
}
.phase1v3-cases{ position: relative; overflow: hidden; }
.phase1v3-cases::before{
  content:""; position: absolute; top: -100px; right: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(57,183,255,.14), transparent 70%);
  pointer-events: none;
}

/* (4) Clutch standalone widget */
.phase1v3-clutch{
  padding: 24px 0 56px; background: #fff;
  position: relative; z-index: 3;
}
/* Cancel original site's negative-margin trick when services follows our new sections */
.phase1v3-clutch + .our-services,
.phase1v3-kpi + .phase1v3-clutch + .our-services{ margin-top: 0 !important; }
/* Also ensure KPI itself doesn't overlap Clutch */
.phase1v3-kpi{ padding-bottom: 40px !important; }
.phase1v3-clutch-inner{
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; padding: 28px 32px;
  border: 1px solid rgba(136,172,223,.5); border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--p1-blue-gay));
  box-shadow: 0 20px 50px -28px rgba(31,63,93,.18);
}
.phase1v3-clutch-left{ text-align: right; display: flex; flex-direction: column; gap: 8px; }
.phase1v3-clutch-left .lbl{
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--p1-muted); font-size: 12px; font-weight: 500;
}
.phase1v3-clutch-left .logo svg{ width: 168px; height: auto; display: block; margin-left: auto; }
.phase1v3-clutch-right{ display: flex; flex-direction: column; gap: 8px; }
.phase1v3-clutch-right .stars{ display: flex; gap: 4px; }
.phase1v3-clutch-right .stars svg{ width: 26px; height: 25px; }
.phase1v3-clutch-right .count{ font: 500 22px Lufga, sans-serif; color: var(--p1-dark); }
.phase1v3-clutch-right .count small{ font-size: 13px; color: var(--p1-muted); font-weight: 400; display: block; margin-top: 2px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 600px){
  .phase1v3-clutch-inner{ gap: 24px; padding: 22px 18px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .phase1v3-clutch-left{ text-align: center; }
  .phase1v3-clutch-left .logo svg{ margin: 0 auto; width: 140px; }
  .phase1v3-clutch-right .stars{ justify-content: center; }
  .phase1v3-clutch-right .stars svg{ width: 22px; height: 21px; }
}

/* (6) Industries — simplified flat grid */
.industries-simplified{ padding: 96px 0; background: #fff; position: relative; overflow: hidden; }
.industries-simplified::before{
  content:""; position: absolute; top: -120px; left: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(19,85,188,.08), transparent 70%);
  pointer-events: none;
}
.industries-simplified .container{ position: relative; z-index: 1; }
.industries-simplified h2{
  font-family: Lufga; font-weight: 400; font-size: clamp(34px,3.4vw,52px);
  color: var(--p1-dark); margin: 0 0 12px;
}
.industries-simplified .lead{ color: var(--p1-muted); font-size: 16px; max-width: 540px; margin: 0 0 48px; line-height: 1.55; }
.industries-simplified-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.industries-simplified-item{
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: var(--p1-blue-gay); border-radius: 16px;
  text-decoration: none; color: var(--p1-dark);
  border: 1px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.industries-simplified-item:hover{ border-color: var(--p1-border); transform: translateY(-2px); }
.industries-simplified-item .ico{
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: #fff; color: var(--p1-accent);
  display: flex; align-items: center; justify-content: center;
}
.industries-simplified-item .ico svg{ width: 22px; height: 22px; }
.industries-simplified-item .name{ font: 500 16px Lufga, sans-serif; line-height: 1.3; }
@media (max-width: 900px){ .industries-simplified-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .industries-simplified-grid{ grid-template-columns: 1fr; } .industries-simplified{ padding: 64px 0; } }

/* (7) Guarantee block — Option A (3-column differentiators) */
.phase1v3-guarantee{ padding: 96px 0; background: var(--p1-blue-gay); position: relative; overflow: hidden; }
.phase1v3-guarantee::after{
  content:""; position: absolute; bottom: -160px; right: -160px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(57,183,255,.14), transparent 70%);
  pointer-events: none;
}
.phase1v3-guarantee .container{ position: relative; z-index: 1; }
.phase1v3-guarantee-head{ text-align: center; max-width: 720px; margin: 0 auto 48px; }
.phase1v3-guarantee-head h2{
  font: 500 clamp(28px,2.8vw,42px)/1.2 Lufga, sans-serif;
  color: var(--p1-dark); margin: 0 0 12px; letter-spacing: -.015em;
}
.phase1v3-guarantee-head p{ font-size: 16px; color: var(--p1-dark); opacity: .78; margin: 0; line-height: 1.6; }
.phase1v3-guarantee-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.phase1v3-guarantee-card{
  background: #fff; border: 1px solid rgba(136,172,223,.45); border-radius: 24px;
  padding: 36px 32px; display: flex; flex-direction: column; gap: 18px;
  box-sizing: border-box; flex: 0 1 calc((100% - 48px) / 3);
}
.phase1v3-guarantee-icon{
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--p1-blue-gay); color: var(--p1-accent);
  display: flex; align-items: center; justify-content: center;
}
.phase1v3-guarantee-icon svg{ width: 26px; height: 26px; }
.phase1v3-guarantee-card h3{ font: 500 20px/1.3 Lufga, sans-serif; color: var(--p1-dark); margin: 0; }
.phase1v3-guarantee-card p{ font-size: 15px; line-height: 1.55; color: var(--p1-dark); opacity: .78; margin: 0; }
.phase1v3-guarantee-card strong{ color: var(--p1-accent); font-weight: 500; }
.phase1v3-guarantee-card a{ color: var(--p1-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.phase1v3-guarantee-head p strong{ color: var(--p1-dark); font-weight: 600; opacity: 1; }
@media (max-width: 1100px){ .phase1v3-guarantee-card{ flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px){ .phase1v3-guarantee-card{ flex-basis: 100%; } .phase1v3-guarantee{ padding: 64px 0; } }

/* Hide roadmap ("How the 60 hours happen") on desktop / PC only */
@media (min-width: 1101px){ .phase1v3-roadmap{ display: none !important; } }

/* About AI (guarantee) — match Key Advantages plain background: remove dot pattern, diagonal stripes & glow orb */
.phase1v3-guarantee::before,
.phase1v3-guarantee::after{ display: none !important; }
.phase1v3-guarantee-stripes{ display: none !important; }