/* ==========================================================================
   QQSAgents - round 2: contrast, presence, motion
   ========================================================================== */

/* ---------- Tool strips: readable, not washed out ---------- */
.strips{padding:clamp(2.5rem,5vw,3.75rem) 0}
.strips-title{text-align:center;font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:600;
  letter-spacing:-.028em;color:var(--ink);margin:0 0 2rem}
.strip-label{color:var(--ink-3);font-size:.68rem;letter-spacing:.1em;margin:0 0 .85rem}
.strips .logo-strip{margin-bottom:1.6rem}
.strips .logo-strip:last-child{margin-bottom:0}

/* only a narrow fade at the very edges, so chips stay legible */
.logo-strip{
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.logo-chip{
  background:#fff;
  border:1px solid #d7dce5;
  color:#1f2937;
  font-weight:600;
  font-size:.855rem;
  padding:.55rem 1rem;
  border-radius:9px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.logo-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent);color:var(--accent)}
.logo-strip.dev .logo-chip{font-family:var(--mono);font-weight:500;font-size:.8rem;
  background:#fff;color:#1f2937;border-color:#d7dce5}
.logo-strip.dev .logo-chip:hover{border-color:var(--violet);color:var(--violet)}
.logo-strip.ops .logo-chip:hover{border-color:var(--teal);color:var(--teal)}
.logo-strip.ops .logo-track{animation-duration:64s}

/* ---------- Reviews: rebuilt ---------- */
.review{padding:1.75rem 1.6rem;border-radius:16px;background:#fff;border:1px solid var(--line)}
.review::before{
  content:'\201C';
  top:.35rem;right:1.15rem;
  font-size:5rem;opacity:.10;
  color:var(--accent);
}
.review::after{height:4px}
.review .stars{font-size:.95rem;letter-spacing:.14em;margin-bottom:1rem}
.review q{font-size:.955rem;line-height:1.68;color:#1a2233;margin-bottom:1.5rem}
.review-by{padding-top:1.15rem;border-top:1px solid var(--line-2);gap:.8rem}
.avatar{
  width:40px;height:40px;font-size:.78rem;letter-spacing:.02em;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(16,24,40,.08);
}
.review-by b{font-size:.9rem;color:var(--ink)}
.review-by span{font-size:.79rem;color:var(--ink-3);margin-top:.1rem}
.review:hover{transform:translateY(-5px)}

/* verified badge on each review */


/* ---------- Header: more presence ---------- */
.site-head{border-bottom:1px solid var(--line)}
.head-inner{height:70px;gap:1.25rem}
.brand{font-size:1.15rem;display:inline-flex;align-items:center;gap:0}
.brand::before{
  content:'';width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--violet));
  box-shadow:0 3px 10px -2px rgba(37,99,235,.55);
  margin-right:.55rem;
}
.nav-list a{font-size:.875rem;font-weight:500;position:relative;padding:.5rem .8rem}
.nav-list li:not(.nav-cta) a::after{
  content:'';position:absolute;left:.8rem;right:.8rem;bottom:.24rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--violet));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-list li:not(.nav-cta) a:hover::after,
.nav-list li.current-menu-item:not(.nav-cta) a::after{transform:scaleX(1)}
.nav-list li:not(.nav-cta) a:hover{background:transparent;color:var(--ink)}
.nav-list .nav-cta a{padding:.58rem 1.15rem;border-radius:9px;font-weight:600;font-size:.865rem}
.nav-list .nav-cta a::before{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease}
.nav-list .nav-cta a{overflow:hidden;position:relative}
.nav-list .nav-cta a:hover::before{transform:translateX(120%)}

/* thin scroll progress line under the header */
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--teal));
  z-index:60;pointer-events:none;will-change:transform}

/* ---------- Hero: stronger presence ---------- */
.hero h1{font-size:clamp(2.4rem,4.9vw,3.85rem)}
.grad{background-size:220% 100%;animation:hueShift 9s ease-in-out infinite alternate}
@keyframes hueShift{to{background-position:100% 0}}

/* floating accent dots in the hero */
.hero .panel{animation:floaty 7s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* ---------- Cards: sharper hover ---------- */
.card{border-radius:16px}
.card-hover:hover{transform:translateY(-6px)}
.card::after{height:3px}
.card h3{font-size:1.09rem}
.card p{font-size:.915rem;color:#4a5568}
.icon-sq{width:46px;height:46px;border-radius:12px;font-size:1.25rem}

/* ---------- Section heads ---------- */
.section-head h2{font-size:clamp(1.85rem,3.3vw,2.5rem)}
.section-head p{font-size:1.02rem;color:#4a5568}

/* ---------- Steps ---------- */
.step-num{font-size:1.7rem}
.step h4{font-size:1rem}
.step p{font-size:.875rem;color:#4a5568}

/* ---------- Panel readability ---------- */
.kpi b{font-size:1.35rem}
.bar-row .nm{color:#374151;font-weight:600}
.bar{height:7px}

/* ---------- Buttons ---------- */
.btn{font-size:.92rem;font-weight:600;padding:.78rem 1.35rem;border-radius:11px}
.btn-primary::before{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.btn-primary:hover::before{transform:translateX(120%)}

/* ---------- Footer ---------- */
.foot-col a{font-size:.9rem}
.foot-col h2{color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){
  .grad,.hero .panel{animation:none!important}
  .scroll-bar{display:none}
  .review:hover,.card-hover:hover,.logo-chip:hover{transform:none!important}
}

@media(max-width:1000px){
  .head-inner{height:62px}
}