/* Shared styles — loaded on every page via base layout */

html {
  scroll-behavior: smooth;
}

/* Scroll offset for sticky header */
[id] {
  scroll-margin-top: 6rem;
}

/* ── Brand gradient text ─────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #0077b5 0%, #00a0dc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CTA glow ────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 119, 181, 0.4); }
  50% { box-shadow: 0 0 40px rgba(0, 119, 181, 0.6); }
}

.cta-glow {
  animation: pulse-glow 2s infinite;
}

/* ── Final CTA glow (white on blue bg) ───────────────── */
@keyframes pulse-white {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.8), 0 15px 50px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
  }
}

.cta-final {
  animation: pulse-white 2.5s ease-in-out infinite;
}

.cta-final:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.9), 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ── Scroll-triggered animations ─────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.animated {
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animated.fade-up    { animation-name: fadeInUp; }
.animate-on-scroll.animated.fade-scale { animation-name: fadeInScale; }
.animate-on-scroll.animated.slide-left { animation-name: slideInLeft; }
.animate-on-scroll.animated.slide-right{ animation-name: slideInRight; }

/* ── Float animation (background decorations) ────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* ── Button hover lift ───────────────────────────────── */
.btn-hover-lift {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -10px rgba(0, 119, 181, 0.5);
}

/* ── Card hover ──────────────────────────────────────── */
.card-hover {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
}

/* ── Icon spin on hover ──────────────────────────────── */
.icon-spin-hover {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.group:hover .icon-spin-hover {
  transform: rotate(10deg) scale(1.1);
}

/* ── Gradient border animation ───────────────────────── */
@keyframes gradient-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-border-animated {
  background: linear-gradient(90deg, #0077b5, #00a0dc, #0077b5);
  background-size: 200% 200%;
  animation: gradient-border 3s ease infinite;
}

/* ── Status colors (comparison tables) ───────────────── */
.status-positive { color: #16a34a; }
.status-negative { color: #dc2626; }
.status-partial  { color: #d97706; }
.status-neutral  { color: #6b7280; }

/* ── Popular card glow (pricing) ─────────────────────── */
.popular-glow {
  box-shadow: 0 0 25px rgba(0, 119, 181, 0.25), 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.popular-glow:hover {
  box-shadow: 0 0 35px rgba(0, 119, 181, 0.4), 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

/* ── Discount badge shine ────────────────────────────── */
@keyframes shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shine-badge {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shine 2s ease-out 1s forwards;
}

/* ── Feature check hover (pricing) ───────────────────── */
.check-icon {
  transition: transform 0.3s ease;
}

.feature-item:hover .check-icon {
  transform: scale(1.2);
}