/* ==========================================================================
   QQSAgents - colour, depth and motion layer
   ========================================================================== */

:root{
  --violet:#7c3aed;   --violet-bg:#f5f2ff;  --violet-line:#ddd0fe;
  --teal:#0d9488;     --teal-bg:#effcfa;
    --teal-line:#9decdf;
  --amber:#d97706;    --amber-bg:#fff8ec;   --amber-line:#fde3ae;
  --rose:#e11d48;     --rose-bg:#fff1f4;    --rose-line:#fecdd6;
  --indigo:#4f46e5;   --indigo-bg:#eef2ff;  --indigo-line:#c7d2fe;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 14px -4px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 18px 44px -18px rgba(16,24,40,.24),0 2px 6px rgba(16,24,40,.05);
}

/* ---------- Tighter vertical rhythm ---------- */
.hero{padding-top:clamp(2rem,4vw,3.25rem)!important;padding-bottom:clamp(2.5rem,5vw,4rem)!important}
.sec{padding:clamp(3rem,6vw,5rem) 0}

/* ---------- Hero: soft colour field ---------- */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
.hero::before{width:620px;height:620px;top:-320px;left:-180px;
  background:radial-gradient(circle,rgba(37,99,235,.20),transparent 68%);
  animation:drift1 22s ease-in-out infinite alternate}
.hero::after{width:560px;height:560px;top:-180px;right:-200px;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 68%);
  animation:drift2 26s ease-in-out infinite alternate}
.hero > *{position:relative;z-index:1}
@keyframes drift1{to{transform:translate3d(70px,50px,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-60px,70px,0) scale(1.08)}}

/* faint grid texture, keeps large white areas from feeling empty */
body{
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  background-position:-1px -1px;
}
.sec-alt{background:linear-gradient(180deg,#f7f9fc,#f9fafb 60%,#f7f8fb)}

/* ---------- Gradient headline accent ---------- */
.grad{background:linear-gradient(100deg,var(--accent) 0%,var(--violet) 55%,var(--indigo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Eyebrow as a pill ---------- */
.eyebrow{background:var(--accent-bg);border:1px solid var(--accent-line);
  border-radius:999px;padding:.32rem .75rem;font-size:.68rem}
.eyebrow::before{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cta .eyebrow{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}

/* ---------- Cards: depth + colour ---------- */
.card{box-shadow:var(--shadow-sm);position:relative;overflow:hidden;display:block}
.card::after{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--violet));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent}
.card-hover:hover::after{transform:scaleX(1)}
.card-link{transition:gap .2s ease}
.card-hover:hover .card-link{gap:.55rem}

/* icon tiles cycle hue so a grid is never one flat colour */
.icon-sq{width:42px;height:42px;font-size:1.15rem;box-shadow:inset 0 -1px 0 rgba(16,24,40,.04);transition:transform .3s ease}
.card-hover:hover .icon-sq{transform:scale(1.08) rotate(-3deg)}
.grid > *:nth-child(6n+1) .icon-sq{background:var(--accent-bg);border-color:var(--accent-line)}
.grid > *:nth-child(6n+2) .icon-sq{background:var(--violet-bg);border-color:var(--violet-line)}
.grid > *:nth-child(6n+3) .icon-sq{background:var(--teal-bg);border-color:var(--teal-line)}
.grid > *:nth-child(6n+4) .icon-sq{background:var(--amber-bg);border-color:var(--amber-line)}
.grid > *:nth-child(6n+5) .icon-sq{background:var(--indigo-bg);border-color:var(--indigo-line)}
.grid > *:nth-child(6n+6) .icon-sq{background:var(--rose-bg);border-color:var(--rose-line)}
.grid > *:nth-child(6n+2) .card::after{background:linear-gradient(90deg,var(--violet),var(--indigo))}
.grid > *:nth-child(6n+3) .card::after{background:linear-gradient(90deg,var(--teal),var(--accent))}

/* feature numbers pick up the same rotation */
.grid > *:nth-child(3n+2) .feature-num{background:var(--violet-bg);border-color:var(--violet-line);color:var(--violet)}
.grid > *:nth-child(3n+3) .feature-num{background:var(--teal-bg);border-color:var(--teal-line);color:var(--teal)}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,#111827,#1f2937);box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--violet));border-color:transparent}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.nav-list .nav-cta a{background:linear-gradient(135deg,#111827,#1f2937);box-shadow:var(--shadow-md)}

/* ---------- Panel ---------- */
.panel{box-shadow:var(--shadow-lg)}
.panel:hover{transform:translateY(-2px)}
.panel{transition:transform .4s ease}
.bar i{background:linear-gradient(90deg,var(--accent),var(--violet));
  animation:barGrow 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes barGrow{from{width:0!important}}
.kpi{background:linear-gradient(160deg,#fff,var(--surface-2))}
.kpi:nth-child(2) b{color:var(--violet)}
.kpi:nth-child(3) b{color:var(--teal)}
.kpi b{color:var(--accent)}

/* ---------- Logo strips: marquee ---------- */
.logo-strip{flex-wrap:nowrap;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:.5rem;flex:none;animation:marquee 46s linear infinite}
.logo-strip:hover .logo-track{animation-play-state:paused}
.logo-strip.dev .logo-track{animation-duration:58s;animation-direction:reverse}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-chip{white-space:nowrap;box-shadow:var(--shadow-sm);transition:border-color .2s,color .2s}
.logo-chip:hover{border-color:var(--accent-line);color:var(--accent)}

/* ---------- Steps ---------- */
.steps{box-shadow:var(--shadow-md);background:linear-gradient(180deg,#fff,#fdfdfe)}
.step{position:relative;transition:background .25s}
.step:hover{background:var(--accent-bg)}
.step-num{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- Reviews ---------- */
.review{box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .3s,transform .3s}
.review::before{content:'\201C';position:absolute;top:-14px;right:14px;font-size:6rem;line-height:1;
  font-family:Georgia,serif;color:var(--accent);opacity:.07;pointer-events:none}
.review::after{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--violet))}
.review:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.review q{font-size:.95rem;color:var(--ink);position:relative;z-index:1}
.stars{color:#f59e0b;font-size:.9rem}
.avatar{width:36px;height:36px;font-weight:700;color:#fff;border:0}
.grid > *:nth-child(6n+1) .avatar{background:linear-gradient(135deg,#2563eb,#4f46e5)}
.grid > *:nth-child(6n+2) .avatar{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.grid > *:nth-child(6n+3) .avatar{background:linear-gradient(135deg,#0d9488,#14b8a6)}
.grid > *:nth-child(6n+4) .avatar{background:linear-gradient(135deg,#d97706,#f59e0b)}
.grid > *:nth-child(6n+5) .avatar{background:linear-gradient(135deg,#e11d48,#f43f5e)}
.grid > *:nth-child(6n+6) .avatar{background:linear-gradient(135deg,#0891b2,#06b6d4)}
.grid > *:nth-child(6n+2) .review::after{background:linear-gradient(90deg,var(--violet),#a855f7)}
.grid > *:nth-child(6n+3) .review::after{background:linear-gradient(90deg,var(--teal),#14b8a6)}
.grid > *:nth-child(6n+4) .review::after{background:linear-gradient(90deg,var(--amber),#f59e0b)}
.grid > *:nth-child(6n+5) .review::after{background:linear-gradient(90deg,var(--rose),#f43f5e)}
.grid > *:nth-child(6n+6) .review::after{background:linear-gradient(90deg,#0891b2,#06b6d4)}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,#0b1220 0%,#141d33 45%,#221a3d 100%);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  top:-260px;right:-160px;filter:blur(70px);
  background:radial-gradient(circle,rgba(124,58,237,.45),transparent 70%)}
.cta > *{position:relative;z-index:1}

/* ---------- Availability pill ---------- */
.avail{background:var(--ok-bg);border-color:#a7f3d0;color:#065f46}
.avail i{box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 7px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}

/* ---------- Stats ---------- */
.stat-n{background:linear-gradient(135deg,var(--ink),#334155);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stats > div:nth-child(2) .stat-n{background:linear-gradient(135deg,var(--accent),var(--indigo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats > div:nth-child(3) .stat-n{background:linear-gradient(135deg,var(--violet),#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats > div:nth-child(4) .stat-n{background:linear-gradient(135deg,var(--teal),#14b8a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Staggered reveal ---------- */
.js .reveal{transform:translateY(16px)}
.js .grid.reveal.in > *,.js .steps.reveal.in > *{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both}
.js .grid.reveal.in > *:nth-child(1){animation-delay:.02s}
.js .grid.reveal.in > *:nth-child(2){animation-delay:.08s}
.js .grid.reveal.in > *:nth-child(3){animation-delay:.14s}
.js .grid.reveal.in > *:nth-child(4){animation-delay:.20s}
.js .grid.reveal.in > *:nth-child(5){animation-delay:.26s}
.js .grid.reveal.in > *:nth-child(6){animation-delay:.32s}
.js .grid.reveal.in > *:nth-child(7){animation-delay:.38s}
.js .grid.reveal.in > *:nth-child(8){animation-delay:.44s}
.js .grid.reveal.in > *:nth-child(9){animation-delay:.50s}
.js .steps.reveal.in > *:nth-child(1){animation-delay:.04s}
.js .steps.reveal.in > *:nth-child(2){animation-delay:.12s}
.js .steps.reveal.in > *:nth-child(3){animation-delay:.20s}
.js .steps.reveal.in > *:nth-child(4){animation-delay:.28s}
.js .steps.reveal.in > *:nth-child(5){animation-delay:.36s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Section head ---------- */
.section-head h2{margin-bottom:.9rem}
.section-head.center{max-width:680px}

/* ---------- Footer ---------- */
.site-foot{background:linear-gradient(180deg,#f7f9fc,#f4f6fa);position:relative}
.site-foot::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--teal))}
.foot-col a{transition:color .18s,padding-left .18s}
.foot-col a:hover{padding-left:3px}

/* ---------- Header ---------- */
.site-head{background:rgba(252,252,253,.82)}
.site-head.scrolled{box-shadow:var(--shadow-md);background:rgba(252,252,253,.94)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.avail i,.logo-track,.bar i{animation:none!important}
  .js .grid.reveal.in > *,.js .steps.reveal.in > *{animation:none!important}
  .card-hover:hover,.review:hover,.panel:hover{transform:none!important}
}

@media(max-width:620px){
  .hero::before,.hero::after{display:none}
  body{background-size:40px 40px}
}