/* ============ AIOOS — finesse pass (creative polish everywhere) ============ */

/* ---------- 1) cursor-tracked glass spotlight on cards ---------- */
.chan, .feat, .quote, .price, .qa{--sx:50%; --sy:50%}
.feat{position:relative; overflow:hidden}
.chan::after, .feat::after, .quote::before, .price:not(.best)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(240px circle at var(--sx) var(--sy),
    rgba(45,108,246,.11), rgba(34,211,238,.06) 45%, transparent 72%);
  opacity:0; transition:opacity .35s ease;
}
.chan:hover::after, .feat:hover::after, .quote:hover::before, .price:not(.best):hover::after{opacity:1}
.quote > *{position:relative; z-index:1}
.feat > *{position:relative; z-index:1}

/* ---------- 2) rating pill: customer avatars ---------- */
.rate .avs{display:flex; align-items:center}
.rate .avs i{width:23px; height:23px; border-radius:50%; border:2px solid #fff; flex:0 0 auto;
  font-style:normal; font-size:9px; font-weight:800; color:#fff; display:grid; place-items:center;
  font-family:var(--font-head); box-shadow:0 4px 10px -4px rgba(20,50,110,.5)}
.rate .avs i + i{margin-left:-7px}

/* ---------- 3) website-widget card: live typing demo ---------- */
.web-field .type{font-size:12px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; max-width:124px; line-height:14px}

/* ---------- 4) nav scroll-spy ---------- */
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%}

/* ---------- 5) tactile press states ---------- */
.cta:active{transform:scale(.97)}
.signup:active{transform:translateY(0) scale(.97)}
.pbtn:active, .cta-white:active, .cta-ghost:active{transform:translateY(0) scale(.97)}

/* ---------- 6) glass cards: deeper shadow on hover (transform untouched — floaty keeps running) ---------- */
.gcard{transition:box-shadow .35s ease}
.gcard:hover{box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 30px 62px -24px rgba(20,50,110,.55)}

/* ---------- 7) channel icon: dashed orbit ring on hover ---------- */
.chan .ic{position:relative; z-index:1}
.chan .ic::after{content:""; position:absolute; inset:-6px; border-radius:20px;
  border:1.5px dashed rgba(45,108,246,.32); opacity:0; transform:scale(.86);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.3,1)}
.chan:hover .ic::after{opacity:1; transform:scale(1)}

/* ---------- 8) steps: lift + numbered gradient flips on hover ---------- */
.step{transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s}
.step:hover{transform:translateY(-5px);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 34px 64px -30px rgba(20,50,110,.5)}
.step .num{transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s}
.step:hover .num{transform:rotate(-6deg) scale(1.08);
  background:linear-gradient(150deg,var(--blue),#22D3EE)}

/* ---------- 9) FAQ: settled open state + content ease-in ---------- */
.qa{transition:background .3s, box-shadow .3s, border-color .3s}
.qa:hover{border-color:rgba(45,108,246,.22)}
.qa[open]{background:rgba(255,255,255,.95);
  box-shadow:0 22px 46px -28px rgba(20,50,110,.5); border-color:rgba(45,108,246,.18)}
@media (prefers-reduced-motion:no-preference){
  .qa[open] .a{animation:faqIn .38s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ---------- 10) testimonial cards: gentle tilt-lift ---------- */
.quote{transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s}
.quote:hover{transform:translateY(-5px) rotate(-.4deg);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 36px 70px -32px rgba(20,50,110,.5)}

/* ---------- 11) feature icons: ink-dip on hover ---------- */
.feat .ic{transition:background .35s, color .35s, transform .35s cubic-bezier(.2,.7,.3,1)}
.feat:hover .ic{background:linear-gradient(150deg,var(--blue),#22D3EE); color:#fff; transform:scale(1.07)}

/* ---------- 12) ticker: logos breathe a touch larger ---------- */
.logo-item svg{height:28px}

/* ---------- 13) node pulse ripple at the phone ---------- */
@media (prefers-reduced-motion:no-preference){
  .node-pulse{transform-origin:center; transform-box:fill-box; animation:nodePing 2.2s ease-out infinite}
}
@keyframes nodePing{0%{opacity:1; transform:scale(1)}70%{opacity:.15; transform:scale(2.6)}100%{opacity:0; transform:scale(3)}}

@media (max-width:980px){
  .web-field .type{max-width:96px}
}