/* ============================================================
   ANIMATED BACKGROUND SYSTEM
   ============================================================ */

/* --- 1. Gradient mesh wash --- */
.bg-mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(31,163,176,0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(249,194,36,0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(95,197,207,0.10) 0%, transparent 60%);
  animation: meshShift 26s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes meshShift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-4%, 3%) scale(1.08); }
  100% { transform: translate(3%, -3%) scale(1.05); }
}

/* --- 2. Breathing dot grid --- */
.bg-grid-breathe {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(20,20,20,0.06) 1px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.5;
  animation: gridBreathe 18s ease-in-out infinite;
}
@keyframes gridBreathe {
  0%, 100% { opacity: 0.35; background-size: 24px 24px; }
  50%      { opacity: 0.65; background-size: 26px 26px; }
}

/* --- 3. Gradient orbs --- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.orb-teal-1 {
  width: 34rem; height: 34rem;
  top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(31,163,176,0.55) 0%, rgba(31,163,176,0) 70%);
  animation: orbFloatA 22s ease-in-out infinite;
}
.orb-yellow-1 {
  width: 28rem; height: 28rem;
  top: 20%; right: -10%;
  background: radial-gradient(circle, rgba(249,194,36,0.55) 0%, rgba(249,194,36,0) 70%);
  animation: orbFloatB 26s ease-in-out infinite;
}
.orb-teal-2 {
  width: 30rem; height: 30rem;
  bottom: -12%; left: 15%;
  background: radial-gradient(circle, rgba(95,197,207,0.45) 0%, rgba(95,197,207,0) 70%);
  animation: orbFloatC 30s ease-in-out infinite;
}
.orb-yellow-2 {
  width: 26rem; height: 26rem;
  top: 45%; left: 40%;
  background: radial-gradient(circle, rgba(253,217,107,0.40) 0%, rgba(253,217,107,0) 70%);
  animation: orbFloatD 24s ease-in-out infinite;
}
.orb-teal-3 {
  width: 24rem; height: 24rem;
  top: 65%; right: 25%;
  background: radial-gradient(circle, rgba(31,163,176,0.40) 0%, rgba(31,163,176,0) 70%);
  animation: orbFloatE 28s ease-in-out infinite;
}
.orb-yellow-3 {
  width: 32rem; height: 32rem;
  bottom: -8%; right: -6%;
  background: radial-gradient(circle, rgba(249,194,36,0.45) 0%, rgba(249,194,36,0) 70%);
  animation: orbFloatF 32s ease-in-out infinite;
}
@keyframes orbFloatA {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(12vw, 8vh) scale(1.1); }
  66%     { transform: translate(-6vw, 14vh) scale(0.95); }
}
@keyframes orbFloatB {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-10vw, 10vh) scale(1.15); }
}
@keyframes orbFloatC {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(14vw, -6vh) scale(1.08); }
  70%     { transform: translate(-4vw, -12vh) scale(0.92); }
}
@keyframes orbFloatD {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-8vw, -8vh) scale(1.12); }
}
@keyframes orbFloatE {
  0%,100% { transform: translate(0,0) scale(1); }
  45%     { transform: translate(6vw, -14vh) scale(1.06); }
}
@keyframes orbFloatF {
  0%,100% { transform: translate(0,0) scale(1); }
  60%     { transform: translate(-12vw, -8vh) scale(1.1); }
}

/* --- 4. Rotating rings --- */
.ring-deco {
  position: absolute;
  width: 30rem; height: 30rem;
  color: rgba(31,163,176,0.18);
}
.ring-deco-1 { top: 10%; right: -6%; }
.ring-deco-2 { bottom: 8%; left: -6%; color: rgba(249,194,36,0.20); }

/* Reverse-spin helper */
.spin-rev { animation: spinRev 55s linear infinite; }
@keyframes spinRev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* --- 5. Particles --- */
.particles-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.particle {
  fill: #1FA3B0;
  opacity: 0.35;
  animation: particleFloat 12s ease-in-out infinite;
}
.particle:nth-child(2n)  { fill: #F9C224; animation-duration: 16s; }
.particle:nth-child(3n)  { animation-delay: -3s; }
.particle:nth-child(5n)  { animation-delay: -7s; }
.particle:nth-child(7n)  { animation-duration: 20s; }
@keyframes particleFloat {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
  50%      { transform: translate(30px,-40px) scale(1.5); opacity: 0.75; }
}

/* --- 6. Drifting waves --- */
.wave-drift {
  position: absolute;
  width: 60rem; height: 12rem;
  color: rgba(31,163,176,0.14);
}
.wave-drift-1 {
  top: 30%; left: -15%;
  animation: waveDriftA 30s ease-in-out infinite;
}
.wave-drift-2 {
  bottom: 25%; right: -15%;
  color: rgba(249,194,36,0.16);
  animation: waveDriftB 36s ease-in-out infinite;
}
@keyframes waveDriftA {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(12vw, -6vh); }
}
@keyframes waveDriftB {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-10vw, 6vh); }
}

/* --- Corner circles --- */
.corner-circle {
  position: absolute;
  width: 22rem; height: 22rem;
  color: rgba(31,163,176,0.15);
}
.corner-circle-tl { top: 5%; left: 3%; }
.corner-circle-br { bottom: 5%; right: 3%; color: rgba(249,194,36,0.18); }

/* --- Ensure content sits above the animated layer --- */
main, header, footer { position: relative; z-index: 10; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .bg-mesh, .bg-grid-breathe, .orb, .ring-deco, .particle,
  .wave-drift, .corner-circle, .spin-rev {
    animation: none !important;
  }
  .orb { opacity: 0.25; }
  .particle { opacity: 0.2; }
}
/* ============================================================
   GLOBAL MOTION SYSTEM — applies to every page
   ============================================================ */

/* ---- Headline letter-rise animation ---- */
.h-anim { display: inline-block; }
.h-anim .h-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}
.h-anim .h-letter {
  display: inline-block;
  transform: translateY(120%) rotate(6deg);
  opacity: 0;
  animation: letterRise 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes letterRise {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

/* After rise completes, gentle lifelong drift */
.h-anim.h-split { animation: headlineDrift 7s ease-in-out infinite 1.2s; }
@keyframes headlineDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---- Gradient shimmer on accent words ---- */
.grad-text {
  background-image: linear-gradient(90deg,
    currentColor 0%, currentColor 35%,
    #F9C224 50%,
    currentColor 65%, currentColor 100%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradSweep 6s ease-in-out infinite;
}
@keyframes gradSweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* ---- Section title glow ---- */
.title-glow { position: relative; }
.title-glow::before {
  content: '';
  position: absolute;
  inset: -30% -15%;
  background: radial-gradient(ellipse at center, rgba(249,194,36,0.22), transparent 70%);
  filter: blur(45px);
  z-index: -1;
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---- Extra reveal variants ---- */
.reveal-left  { opacity: 0; transform: translateX(-60px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal-right { opacity: 0; transform: translateX(60px);  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal-zoom  { opacity: 0; transform: scale(0.92);       transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal-up    { opacity: 0; transform: translateY(50px);  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-zoom.is-visible,
.reveal-up.is-visible { opacity: 1; transform: none; }

/* ---- Stagger children ---- */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }
.stagger.is-visible > * { opacity: 1; transform: none; }

/* ---- Gentle float (auto-applied to images) ---- */
.float-gentle { animation: floatGentle 8s ease-in-out infinite; }
@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

/* ---- Soft pulse for badges & pills ---- */
.pulse-soft { animation: pulseSoft 3.5s ease-in-out infinite; }
@keyframes pulseSoft {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249,194,36,0.35); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(249,194,36,0); }
}

/* ---- Icon bounce (periodic) ---- */
.icon-bounce { animation: iconBounce 4.5s ease-in-out infinite; }
@keyframes iconBounce {
  0%, 65%, 100% { transform: translateY(0); }
  75%           { transform: translateY(-6px); }
  85%           { transform: translateY(-2px); }
}

/* ---- Underline draw-in ---- */
.draw-line { position: relative; display: inline-block; }
.draw-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #1FA3B0, #F9C224);
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(.22,1,.36,1) 0.3s;
}
.draw-line.is-visible::after { width: 100%; }

/* ---- Section corner orbits ---- */
.section-orbit {
  position: absolute;
  width: 22rem; height: 22rem;
  border: 1px dashed rgba(31,163,176,0.22);
  border-radius: 50%;
  animation: spinOrbit 55s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.section-orbit.tr { top: -6rem; right: -6rem; }
.section-orbit.bl { bottom: -6rem; left: -6rem; animation-direction: reverse; border-color: rgba(249,194,36,0.22); }
.section-orbit.bl::after,
.section-orbit.tr::after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
}
@keyframes spinOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Gradient border card (on hover) — universally supported version ---- */
.gradient-border-card {
  position: relative;
  isolation: isolate;
}
.gradient-border-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #1FA3B0, #F9C224, #1FA3B0);
  background-size: 300% 300%;
  animation: borderSweep 8s ease infinite;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: -1;
}
.gradient-border-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  z-index: -1;
}
.gradient-border-card:hover::before { opacity: 1; }

@keyframes borderSweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Section ripple rings ---- */
.ripple-bg { position: relative; overflow: hidden; }
.ripple-bg::before,
.ripple-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(31,163,176,0.14);
  pointer-events: none;
  z-index: 0;
}
.ripple-bg::before {
  top: 20%; left: 8%; width: 8rem; height: 8rem;
  animation: rippleExpand 8s ease-out infinite;
}
.ripple-bg::after {
  bottom: 15%; right: 8%; width: 10rem; height: 10rem;
  border-color: rgba(249,194,36,0.20);
  animation: rippleExpand 8s ease-out 4s infinite;
}
@keyframes rippleExpand {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---- Number glow pulse ---- */
[data-counter].counter-glow {
  display: inline-block;
  animation: numberGlow 3s ease-in-out infinite;
}
@keyframes numberGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 22px currentColor; }
}

/* ---- Stagger delay helpers ---- */
.d-1 { animation-delay: 0.1s !important; transition-delay: 0.1s !important; }
.d-2 { animation-delay: 0.2s !important; transition-delay: 0.2s !important; }
.d-3 { animation-delay: 0.3s !important; transition-delay: 0.3s !important; }
.d-4 { animation-delay: 0.4s !important; transition-delay: 0.4s !important; }
.d-5 { animation-delay: 0.5s !important; transition-delay: 0.5s !important; }

/* ---- Reduced motion — kill everything, keep content visible ---- */
@media (prefers-reduced-motion: reduce) {
  .h-anim .h-letter,
  .h-anim.h-split,
  .grad-text,
  .title-glow::before,
  .float-gentle, .pulse-soft, .icon-bounce,
  .section-orbit, .gradient-border-card::before,
  .ripple-bg::before, .ripple-bg::after,
  [data-counter].counter-glow {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  .h-anim .h-letter { transform: none; opacity: 1; }
  .reveal-left, .reveal-right, .reveal-zoom, .reveal-up, .stagger > * {
    opacity: 1 !important; transform: none !important;
  }
}
/* ============================================================
   MARQUEE — HORIZONTAL MOTION (pills scrolling left)
   ============================================================ */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
  will-change: transform;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* Duplicated group so the loop is seamless */
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Pills ---------- */
.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s;
  animation: pillBob 5s ease-in-out infinite;
}
.marquee-pill:nth-child(3n) { animation-delay: -1.2s; }
.marquee-pill:nth-child(5n) { animation-delay: -2.5s; }

.marquee-pill-teal {
  background: linear-gradient(135deg, rgba(31,163,176,0.10), rgba(31,163,176,0.02));
  border: 1.5px solid rgba(31,163,176,0.35);
  color: #14707A;
  box-shadow: 0 6px 18px -8px rgba(31,163,176,0.45);
}
.marquee-pill-yellow {
  background: linear-gradient(135deg, rgba(249,194,36,0.18), rgba(249,194,36,0.04));
  border: 1.5px solid rgba(249,194,36,0.55);
  color: #141414;
  box-shadow: 0 6px 18px -8px rgba(249,194,36,0.55);
}
.marquee-pill:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 14px 28px -10px rgba(31,163,176,0.55);
}

.marquee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.6); opacity: 1; }
}

.marquee-text {
  background-image: linear-gradient(90deg,
    currentColor 0%, currentColor 40%,
    rgba(249,194,36,0.95) 50%,
    currentColor 60%, currentColor 100%);
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pillShimmer 6s linear infinite;
}
@keyframes pillShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.marquee-sep {
  display: inline-block;
  color: rgba(31,163,176,0.5);
  font-size: 1.25rem;
  animation: sepSpin 6s linear infinite;
}
@keyframes sepSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pillBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.marquee-title {
  animation: titleShine 4s ease-in-out infinite;
}
@keyframes titleShine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,194,36,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(249,194,36,0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .marquee-pill, .marquee-dot, .marquee-text, .marquee-sep {
    animation: none !important;
  }
}
/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */

.whatsapp-wrap {
  pointer-events: none;
}
.whatsapp-wrap > * {
  pointer-events: auto;
}

/* Subtle entry animation */
.whatsapp-btn {
  animation: waEnter 0.6s cubic-bezier(.22,1,.36,1) 0.8s both;
}

@keyframes waEnter {
  0%   { opacity: 0; transform: scale(0) translateY(30px); }
  60%  { opacity: 1; transform: scale(1.15) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Tooltip bubble */
.whatsapp-bubble {
  opacity: 0;
  transform: translateX(10px);
  animation: waBubbleIn 0.5s ease-out 1.5s forwards;
}
@keyframes waBubbleIn {
  to { opacity: 1; transform: translateX(0); }
}

/* On mobile — button is a bit smaller, and bubble is hidden */
@media (max-width: 640px) {
  .whatsapp-btn { width: 56px !important; height: 56px !important; }
  .whatsapp-btn svg { width: 28px !important; height: 28px !important; }
  .whatsapp-bubble { display: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn,
  .whatsapp-bubble { animation: none !important; opacity: 1 !important; transform: none !important; }
  .whatsapp-btn .animate-ping { animation: none !important; opacity: 0; }
}