/* ============ AdsBlink custom effects & animations ============ */

html { scroll-behavior: smooth; }

/* ---------- Scroll reveal ---------- */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }

.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }

.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* stagger children of a revealed group */
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.14s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.2s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.26s}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.32s}
.reveal-stagger.in-view > *:nth-child(7){transition-delay:.38s}
.reveal-stagger.in-view > *:nth-child(8){transition-delay:.44s}

/* ---------- Hero form card ---------- */
.hero-form-card { animation: floatCard 6s ease-in-out infinite; }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@media (prefers-reduced-motion: reduce){ .hero-form-card{ animation:none } }

.animate-glow { animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{opacity:.4} 50%{opacity:.7} }

#lead-form input:focus, #lead-form textarea:focus, #lead-form select:focus,
#contact-form input:focus, #contact-form textarea:focus, #contact-form select:focus {
  border-color:#4285F4 !important;
  box-shadow: 0 0 0 4px rgba(66,133,244,0.12);
}

/* shimmering button */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content:"";
  position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%{left:-75%} 45%{left:130%} 100%{left:130%} }
.btn-shine .btn-arrow { transition: transform .25s ease; }
.btn-shine:hover .btn-arrow { transform: translateX(5px); }

.btn-shine.is-loading .btn-label::after { content:"…"; }
.btn-shine[disabled] { opacity:.75; cursor:not-allowed; }

/* nav logo mark micro bounce */
.brand-mark { transition: transform .3s ease; }
a:hover > .brand-mark { transform: rotate(-8deg) scale(1.08); }

/* success / error toasts within forms */
.form-success-box {
  display:flex; align-items:center; gap:.6rem;
  background: rgba(52,168,83,0.08); border:1px solid rgba(52,168,83,0.25);
  color:#1b8a4a; font-weight:700; font-size:.8rem; border-radius:.75rem;
  padding:.7rem .9rem; animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { 0%{opacity:0; transform:scale(.85)} 100%{opacity:1; transform:scale(1)} }

/* ---------- Mobile menu ---------- */
#mobile-menu.open { display:flex; animation: dropIn .28s ease; }
@keyframes dropIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.wa-float .wa-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25D366;
  opacity: .55;
  animation: waPing 2.2s cubic-bezier(0,0,.2,1) infinite;
}
.wa-float .wa-btn {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg,#25D366,#128C7E);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  animation: waBounce 3.4s ease-in-out infinite;
}
.wa-float .wa-btn svg { width: 30px; height: 30px; fill: #fff; }
.wa-float .wa-label {
  background: #111b21;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.wa-float:hover .wa-label { opacity: 1; transform: translateX(0); }
@keyframes waPing { 0%{transform:scale(1); opacity:.55} 75%,100%{transform:scale(1.7); opacity:0} }
@keyframes waBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

@media (max-width: 480px) {
  .wa-float { right: 14px; bottom: 14px; }
  .wa-float .wa-btn { width: 52px; height: 52px; }
  .wa-float .wa-label { display: none; }
}

/* ---------- Ticker (top marquee) hover pause ---------- */
.min-h-screen .overflow-hidden:first-child:hover [style*="translateX"] { animation-play-state: paused; }

/* ---------- Focus ring accessibility ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #4285F4;
  outline-offset: 2px;
}

/* ---------- Small screens: hero form order ---------- */
@media (max-width: 1023px) {
  #hero-form-wrap { margin-top: 1.5rem; }
}

/* ============ ROUND 2: marquee / hover / scroll / responsive polish ============ */

/* ---------- Scroll progress bar ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg,#4285F4,#EA4335,#FBBC04,#34A853);
  z-index: 1000; transition: width .1s linear;
}

/* ---------- Marquees (top ticker + trusted-by strip) ---------- */
.ticker-wrap { overflow: hidden; }
.ticker-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.ticker-track-slow { animation-duration: 34s; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .ticker-track { animation-duration: 16s; }
  .ticker-track-slow { animation-duration: 22s; }
}

/* ---------- Blob / gradient background float ---------- */
[class*="blur-3xl"] {
  animation: blobFloat 12s ease-in-out infinite;
}
[class*="blur-3xl"]:nth-of-type(even) { animation-duration: 15s; animation-direction: reverse; }
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(18px,-22px) scale(1.06); }
  66% { transform: translate(-14px,14px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  [class*="blur-3xl"] { animation: none; }
}

/* ---------- Nav link underline hover ---------- */
nav a[href^="#"] {
  position: relative;
}
nav a[href^="#"]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%; height: 2px;
  background: linear-gradient(90deg,#4285F4,#34A853);
  transition: width .3s ease;
  border-radius: 2px;
}
nav a[href^="#"]:hover::after { width: 100%; }

/* ---------- Generic card hover lift (cards across the whole page) ---------- */
main [class*="cursor-pointer"][class*="rounded-2xl"],
main [class*="cursor-pointer"][class*="rounded-xl"],
section [class*="cursor-pointer"][class*="rounded-2xl"],
section [class*="cursor-pointer"][class*="rounded-xl"] {
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
main [class*="cursor-pointer"][class*="rounded-2xl"]:hover,
main [class*="cursor-pointer"][class*="rounded-xl"]:hover,
section [class*="cursor-pointer"][class*="rounded-2xl"]:hover,
section [class*="cursor-pointer"][class*="rounded-xl"]:hover {
  transform: translateY(-8px);
}

/* Buttons: subtle scale + lift on hover (skip form inputs/selects) */
button:not(#mobile-menu-btn):hover, a.wa-float:hover .wa-btn {
  transform: translateY(-2px);
}
button { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, opacity .25s ease; }

/* Icon micro-bounce inside feature/platform cards on hover */
.group:hover svg, [class*="group"]:hover > svg {
  transform: scale(1.12) rotate(-4deg);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- FAQ accordion ---------- */
#faq-list > div { transition: box-shadow .3s ease, transform .2s ease; }
#faq-list > div:hover { transform: translateY(-2px); }
#faq-list .faq-plus-icon { transition: transform .3s ease; }
#faq-list .faq-open .faq-plus-icon { transform: rotate(135deg); }
#faq-list > div > div:last-child { transition: height .32s cubic-bezier(.16,.84,.44,1), opacity .28s ease; }

/* ---------- Hero rotating word ---------- */
.blink-cursor { animation: blinkCursor 1s steps(1) infinite; }
@keyframes blinkCursor { 0%,49%{opacity:1} 50%,100%{opacity:0} }
#hero-rotate-word { transition: color .4s ease; }
#hero-rotate-underline { transition: background-color .4s ease; }

/* ---------- Count-up numbers ---------- */
.countup-target { display: inline-block; }

/* ---------- Testimonial / quote hover glow ---------- */
[class*="italic"] { transition: color .3s ease; }

/* ---------- Pricing "popular" card pulse ring ---------- */
.pricing-highlight { animation: ringPulse 2.6s ease-in-out infinite; }
@keyframes ringPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(66,133,244,.35); }
  50% { box-shadow: 0 0 0 10px rgba(66,133,244,0); }
}

/* ---------- Image / avatar hover zoom ---------- */
img, svg { transition: transform .3s ease; }

/* ---------- Section fade wipe (extra reveal styles) ---------- */
.reveal-fade { opacity: 0; transition: opacity .8s ease; }
.reveal-fade.in-view { opacity: 1; }

/* ---------- Responsive refinements ---------- */
@media (max-width: 768px) {
  h1 { line-height: 1.15 !important; }
  .wa-float .wa-label { display: none; }
  #faq-list > div > button { padding-top: 1rem; padding-bottom: 1rem; }
}
@media (max-width: 480px) {
  main [class*="cursor-pointer"][class*="rounded-2xl"]:hover,
  main [class*="cursor-pointer"][class*="rounded-xl"]:hover {
    transform: none; /* avoid jitter on touch devices */
  }
  .hero-form-card { animation: none; }
}
@media (hover: none) {
  /* touch devices: don't rely on hover states for primary content */
  main [class*="cursor-pointer"][class*="rounded-2xl"]:hover,
  main [class*="cursor-pointer"][class*="rounded-xl"]:hover { transform: none; box-shadow: inherit; }
}

/* ---------- Smooth appearance for whole page ---------- */
body { animation: pageFadeIn .5s ease; }
@keyframes pageFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ============ ROUND 3: back-to-top, magnetic buttons, tilt, ripple, confetti, shimmer ============ */

/* ---------- Back to top button ---------- */
#back-to-top {
  position: fixed;
  left: 20px;
  bottom: 22px;
  z-index: 998;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15,23,42,.15);
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#back-to-top:hover { transform: translateY(-3px) scale(1.05); }
#back-to-top svg.btt-arrow { position: absolute; color: #4285F4; }
#back-to-top svg:not(.btt-arrow) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#back-to-top .btt-track { fill: none; stroke: rgba(66,133,244,0.12); stroke-width: 3; }
#back-to-top .btt-fill {
  fill: none; stroke: #4285F4; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: 119.4;
  transition: stroke-dashoffset .15s linear;
}
@media (max-width: 480px) {
  #back-to-top { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ---------- Magnetic buttons ---------- */
.magnetic-btn { transition: transform .18s ease-out; }

/* ---------- Ripple effect ---------- */
.ripple-el { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.55);
  animation: rippleAnim .6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- 3D tilt cards ---------- */
.tilt-card { transform-style: preserve-3d; transition: transform .12s ease-out, box-shadow .3s ease; }

/* ---------- Pricing highlight gradient border pulse ---------- */
.pricing-highlight {
  position: relative;
}
.pricing-highlight::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg,#FBBC04,#4285F4,#34A853,#EA4335,#FBBC04);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradientBorderShift 5s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes gradientBorderShift { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* ---------- Brand wordmark shimmer ---------- */
.brand-shimmer {
  background: linear-gradient(90deg, #0f172a 0%, #4285F4 50%, #0f172a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ---------- Confetti burst (JS-triggered) ---------- */
.confetti-burst-piece {
  position: fixed;
  top: var(--cy, 50%);
  left: var(--cx, 50%);
  width: 8px; height: 14px;
  border-radius: 2px;
  z-index: 2000;
  pointer-events: none;
  animation: confettiBurst 900ms cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes confettiBurst {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Reduced motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .pricing-highlight::before, .brand-shimmer { animation: none; }
  .magnetic-btn, .tilt-card { transition: none; }
}

/* Disable magnetic/tilt/ripple on touch */
@media (hover: none) {
  .tilt-card { transform: none !important; }
}

/* ============ ROUND 4: platforms orbit wheel — full 360° motion ============ */

.orbit-ring {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbitSpin 32s linear infinite;
}
.orbit-counter {
  animation: orbitCounterSpin 32s linear infinite;
}
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitCounterSpin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.orbit-counter:hover { animation-play-state: paused; }
.orbit-ring:has(.orbit-counter:hover) { animation-play-state: paused; }

.ring-spin-cw { animation: spinCW 18s linear infinite; }
.ring-spin-ccw { animation: spinCCW 22s linear infinite; }
@keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

.hub-pulse { animation: hubPulse 3.2s ease-in-out infinite; }
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(66,133,244,.28); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(66,133,244,0); transform: scale(1.045); }
}

.ring-pulse { animation: ringPulseScale 4.5s ease-in-out infinite; }
@keyframes ringPulseScale {
  0%,100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.06); opacity: 1; }
}

.badge-float-1 { animation: badgeFloat1 4.2s ease-in-out infinite; }
.badge-float-2 { animation: badgeFloat2 4.6s ease-in-out infinite; animation-delay: .3s; }
.badge-float-3 { animation: badgeFloat3 5s ease-in-out infinite; animation-delay: .6s; }
@keyframes badgeFloat1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(3px,-8px) rotate(1.5deg); } }
@keyframes badgeFloat2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-3px,8px) rotate(-1.5deg); } }
@keyframes badgeFloat3 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(4px,6px) rotate(1.5deg); } }

.orbit-counter .w-11 { transition: transform .25s ease, box-shadow .25s ease; }
.orbit-counter:hover .w-11 { transform: scale(1.18); box-shadow: 0 10px 22px rgba(0,0,0,.22) !important; }

@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .orbit-counter, .ring-spin-cw, .ring-spin-ccw, .hub-pulse, .ring-pulse,
  .badge-float-1, .badge-float-2, .badge-float-3 { animation: none; }
}

@media (max-width: 480px) {
  .orbit-ring { animation-duration: 24s; }
  .orbit-counter { animation-duration: 24s; }
}

/* Scale the whole orbit wheel down on small screens so it never gets
   clipped by the section's overflow-hidden edge (fixes mobile bug) */
@media (max-width: 480px) {
  #platform-orbit-wheel { transform: scale(0.72); }
}
@media (max-width: 380px) {
  #platform-orbit-wheel { transform: scale(0.56); }
}

/* ============ ROUND 5: broader hover coverage, table responsiveness, extra motion ============ */

/* ---------- Pricing / testimonial cards (no cursor-pointer in markup) ---------- */
.pricing-card-hover {
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, border-color .35s ease;
}
.pricing-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -12px rgba(15,23,42,.18);
}
@media (hover: none) {
  .pricing-card-hover:hover { transform: none; }
}

/* Popular plan lifts a touch less since it's already scaled up */
.pricing-highlight.pricing-card-hover:hover { transform: translateY(-6px) scale(1.005); }

/* ---------- Comparison table: horizontal scroll on small screens ---------- */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(66,133,244,.35) transparent;
  position: relative;
  border-radius: 1.5rem;
}
.cmp-scroll::-webkit-scrollbar { height: 6px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: rgba(66,133,244,.35); border-radius: 999px; }
.cmp-scroll > div { transition: box-shadow .25s ease; }

/* row hover highlight inside comparison table */
.cmp-scroll .grid.grid-cols-3:not(:first-child) {
  transition: background-color .25s ease;
}
.cmp-scroll .grid.grid-cols-3:not(:first-child):hover {
  background-color: rgba(66,133,244,0.045) !important;
}

@media (max-width: 640px) {
  .cmp-scroll::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9));
    pointer-events: none;
  }
}

/* ---------- Footer link underline sweep ---------- */
footer ul li span[class*="cursor-pointer"] {
  position: relative;
  display: inline-block;
}
footer ul li span[class*="cursor-pointer"]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%; height: 1px;
  background: currentColor;
  transition: width .25s ease;
}
footer ul li span[class*="cursor-pointer"]:hover::after { width: 100%; }

/* ---------- Feature card icon wiggle on hover (in addition to existing scale) ---------- */
.group:hover .lucide { animation: iconWiggle .5s ease; }
@keyframes iconWiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* ---------- Testimonial avatar pulse ring on card hover ---------- */
.pricing-card-hover:hover .w-10.h-10.rounded-full {
  box-shadow: 0 0 0 4px rgba(66,133,244,.18);
  transition: box-shadow .3s ease;
}

/* ---------- Stat mini-cards (hero, industries) subtle hover ---------- */
.grid.grid-cols-2.sm\:grid-cols-4 > div,
.grid.grid-cols-2.md\:grid-cols-4 > div {
  transition: transform .25s ease, box-shadow .25s ease;
}
.grid.grid-cols-2.sm\:grid-cols-4 > div:hover,
.grid.grid-cols-2.md\:grid-cols-4 > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px -8px rgba(15,23,42,.15);
}
@media (hover: none) {
  .grid.grid-cols-2.sm\:grid-cols-4 > div:hover,
  .grid.grid-cols-2.md\:grid-cols-4 > div:hover { transform: none; }
}

/* ---------- Star rating twinkle on testimonial card hover ---------- */
.pricing-card-hover:hover .lucide-star {
  animation: starTwinkle .6s ease;
}
.pricing-card-hover:hover .lucide-star:nth-of-type(2) { animation-delay: .05s; }
.pricing-card-hover:hover .lucide-star:nth-of-type(3) { animation-delay: .1s; }
.pricing-card-hover:hover .lucide-star:nth-of-type(4) { animation-delay: .15s; }
.pricing-card-hover:hover .lucide-star:nth-of-type(5) { animation-delay: .2s; }
@keyframes starTwinkle {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(8deg); }
}

/* ---------- Section badge dot pulse (the 4-color dash rows above headings) ---------- */
.h-1.w-8.rounded-full { transition: transform .3s ease; }
.flex.gap-1.justify-center.mb-4:hover .h-1.w-8.rounded-full:nth-child(1) { transform: scaleX(1.4); }
.flex.gap-1.justify-center.mb-4:hover .h-1.w-8.rounded-full:nth-child(2) { transform: scaleX(1.4); transition-delay: .05s; }
.flex.gap-1.justify-center.mb-4:hover .h-1.w-8.rounded-full:nth-child(3) { transform: scaleX(1.4); transition-delay: .1s; }
.flex.gap-1.justify-center.mb-4:hover .h-1.w-8.rounded-full:nth-child(4) { transform: scaleX(1.4); transition-delay: .15s; }

/* ---------- Recognition badge cards: gentle float-in-place on hover ---------- */
.group.bg-white.rounded-2xl.p-5 { transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; }
.group.bg-white.rounded-2xl.p-5:hover { transform: translateY(-6px) scale(1.02); }
@media (hover: none) { .group.bg-white.rounded-2xl.p-5:hover { transform: none; } }

/* ---------- Global responsive safety net ---------- */
img, svg, video, canvas { max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

@media (max-width: 380px) {
  .wa-float .wa-label,
  #back-to-top { transform-origin: center; }
}

/* ============ ROUND 6: platform switcher + orbit centering fix ============ */
#platform-detail, #platform-detail > div, #platform-cards > div {
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.platform-detail-fade > div:nth-child(2) { animation: detailFadeSwap .32s ease; }
.platform-detail-fade > div:first-child { animation: detailIconPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes detailFadeSwap { 0%{opacity:.15; transform:translateY(4px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes detailIconPop { 0%{transform:scale(.85)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} }

#platform-pills button, #platform-cards > div { transition: all .3s ease; }
#platform-cards > div:hover { transform: translateY(-4px); }