/* Topographic contour map effect with WebSkrill red & green accents */
    .topo-bg {
      background-color: #080c14;
      background-image:
        radial-gradient(circle at 15% 30%, rgba(49, 176, 63, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(237, 28, 35, 0.12) 0%, transparent 45%),
        repeating-radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 38px);
    }

    /* WebSkrill organic feature icon blobs */
    .blob-green {
      border-radius: 46% 54% 63% 37% / 40% 43% 57% 60%;
      transition: all 0.4s ease;
    }

    .blob-green:hover {
      border-radius: 55% 45% 45% 55% / 55% 55% 45% 45%;
      transform: scale(1.08) rotate(3deg);
    }

    .blob-red {
      border-radius: 54% 46% 38% 62% / 44% 56% 44% 56%;
      transition: all 0.4s ease;
    }

    .blob-red:hover {
      border-radius: 45% 55% 55% 45% / 50% 50% 50% 50%;
      transform: scale(1.08) rotate(-3deg);
    }

    /* Card hover elevation */
    .hover-lift {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .hover-lift:hover {
      transform: translateY(-8px);
      box-shadow: 0 22px 35px -12px rgba(15, 23, 42, 0.14);
    }

    /* Floating animation for hero illustration badges */
    @keyframes gentleFloat {
      0% {
        transform: translateY(0px);
      }

      33% {
        transform: translateY(-4px);
      }

      66% {
        transform: translateY(4px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    .animate-float-slow {
      animation: gentleFloat 4s linear infinite;
    }

    .animate-float-delayed {
      animation: gentleFloat 5s linear infinite 1.5s;
    }

    /* Pulse bounce for scroll down indicator */
    @keyframes bounceDown {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(8px);
      }

      60% {
        transform: translateY(4px);
      }
    }

    .bounce-indicator {
      animation: bounceDown 2s infinite;
    }

    /* Subtle pulse animation for live server indicators */
    @keyframes pulseGlow {

      0%,
      100% {
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(49, 176, 63, 0.8));
      }

      50% {
        opacity: 0.55;
        filter: drop-shadow(0 0 2px rgba(49, 176, 63, 0.3));
      }
    }

    .server-led-pulse {
      animation: pulseGlow 1.8s ease-in-out infinite;
    }

    /* Frog Mascot Floating Animation */
    @keyframes mascotFloat {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      25% {
        transform: translateY(-5px) rotate(1.5deg);
      }

      50% {
        transform: translateY(0px) rotate(0deg);
      }

      75% {
        transform: translateY(-5px) rotate(-1.5deg);
      }
    }

    .animate-mascot-float {
      animation: mascotFloat 5s ease-in-out infinite;
    }

    /* Leaping animation for speed tags */
    @keyframes frogLeap {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      30% {
        transform: translateY(-14px) scale(1.08) rotate(-4deg);
      }

      50% {
        transform: translateY(-10px) scale(1.04) rotate(3deg);
      }

      70% {
        transform: translateY(-3px) scale(1.01);
      }
    }

    .animate-frog-leap {
      animation: frogLeap 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    }

    /* Peeking Frog Animation for Domain Search */
    @keyframes frogPeek {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      35% {
        transform: translateY(-10px) rotate(-3deg);
      }

      55% {
        transform: translateY(-16px) rotate(2deg);
      }

      75% {
        transform: translateY(-5px) rotate(0deg);
      }
    }

    .animate-frog-peek {
      animation: frogPeek 4s ease-in-out infinite;
    }

    /* Mascot Celebration Dance */
    @keyframes frogCelebrate {

      0%,
      100% {
        transform: translateY(0) rotate(0deg) scale(1);
      }

      25% {
        transform: translateY(-8px) rotate(-4deg) scale(1.04);
      }

      50% {
        transform: translateY(-2px) rotate(0deg) scale(1);
      }

      75% {
        transform: translateY(-10px) rotate(4deg) scale(1.04);
      }
    }

    .animate-frog-celebrate {
      animation: frogCelebrate 3.2s ease-in-out infinite;
    }

    /* Shimmer effect for premium cards */
    @keyframes shimmerFlow {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    .shimmer-active {
      background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%);
      background-size: 200% 100%;
      animation: shimmerFlow 5s infinite;
    }

    /* Glowing pulse rings */
    @keyframes glowRingGreen {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(49, 176, 63, 0.45);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(49, 176, 63, 0);
      }
    }

    .glow-ring-green {
      animation: glowRingGreen 2.4s infinite;
    }

    @keyframes glowRingRed {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(237, 28, 35, 0.45);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(237, 28, 35, 0);
      }
    }

    .glow-ring-red {
      animation: glowRingRed 2.4s infinite;
    }

    /* Cyber Halo Spin */
    @keyframes spinSlow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-spin-slow {
      animation: spinSlow 30s linear infinite;
    }

    /* Lively Frog Hop Animation */
    @keyframes frogHop {

      0%,
      100% {
        transform: translateY(0) scale(1, 1);
      }

      15% {
        transform: translateY(0) scale(1.14, 0.86);
      }

      40% {
        transform: translateY(-16px) scale(0.92, 1.08) rotate(-3deg);
      }

      60% {
        transform: translateY(-10px) scale(0.96, 1.04) rotate(2deg);
      }

      80% {
        transform: translateY(0) scale(1.08, 0.92);
      }
    }

    .animate-frog-hop {
      animation: frogHop 2.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
    }

    /* Cute Frog Wiggle Animation */
    @keyframes frogWiggle {

      0%,
      100% {
        transform: rotate(0deg);
      }

      20% {
        transform: rotate(-7deg) scale(1.05);
      }

      40% {
        transform: rotate(7deg) scale(1.05);
      }

      60% {
        transform: rotate(-4deg);
      }

      80% {
        transform: rotate(4deg);
      }
    }

    .animate-frog-wiggle {
      animation: frogWiggle 3.2s ease-in-out infinite;
    }

    /* Frog Pulse & Aura Glow */
    @keyframes frogPulseGlow {

      0%,
      100% {
        transform: scale(1);
        filter: drop-shadow(0 6px 14px rgba(49, 176, 63, 0.28));
      }

      50% {
        transform: scale(1.06);
        filter: drop-shadow(0 12px 28px rgba(49, 176, 63, 0.55));
      }
    }

    .animate-frog-pulse {
      animation: frogPulseGlow 3s ease-in-out infinite;
    }

    /* Gentle Frog Sway */
    @keyframes frogSway {

      0%,
      100% {
        transform: translateX(0) rotate(0deg);
      }

      25% {
        transform: translateX(-5px) rotate(-3deg);
      }

      75% {
        transform: translateX(5px) rotate(3deg);
      }
    }

    .animate-frog-sway {
      animation: frogSway 4.5s ease-in-out infinite;
    }

    /* Interactive Frog Hover Pop */
    .hover-frog-pop {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
    }

    .hover-frog-pop:hover {
      transform: translateY(-8px) scale(1.1) rotate(2deg);
      filter: drop-shadow(0 18px 30px rgba(49, 176, 63, 0.35));
    }

    /* Ambient drifting background frog */
    @keyframes ambientFrogDrift {

      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }

      25% {
        transform: translate(8px, -14px) rotate(4deg);
      }

      50% {
        transform: translate(0, -22px) rotate(0deg);
      }

      75% {
        transform: translate(-8px, -10px) rotate(-4deg);
      }
    }

    .animate-ambient-frog {
      animation: ambientFrogDrift 8s ease-in-out infinite;
    }

    /* Ambient smooth floating background frogs */
    @keyframes bgFrogFloatA {

      0%,
      100% {
        transform: translate(0px, 0px) rotate(0deg) scale(1);
      }

      33% {
        transform: translate(12px, -18px) rotate(4deg) scale(1.03);
      }

      66% {
        transform: translate(-10px, -12px) rotate(-3deg) scale(0.98);
      }
    }

    @keyframes bgFrogFloatB {

      0%,
      100% {
        transform: translate(0px, 0px) rotate(0deg) scale(1);
      }

      33% {
        transform: translate(-14px, -16px) rotate(-4deg) scale(1.04);
      }

      66% {
        transform: translate(10px, -22px) rotate(3deg) scale(0.97);
      }
    }

    .animate-bg-frog-a {
      animation: bgFrogFloatA 11s ease-in-out infinite;
    }

    .animate-bg-frog-b {
      animation: bgFrogFloatB 15s ease-in-out infinite;
    }

    /* Utility to hide scrollbars while preserving smooth scrolling */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    .popular-cms-section {
      margin-top: 78px;
      margin-bottom: 5rem;
    }

    .hosting-features-overview {
      padding: 48px 0;
    }

    .hosting-features-heading {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .hosting-features-heading > span {
      flex: 1 1 0;
      min-width: 0;
    }

    .hosting-features-list {
      column-gap: 2rem;
      row-gap: 1.125rem;
      padding-inline: 1.5rem;
    }

    .hosting-features-list li {
      line-height: 1.6;
    }

    @media (min-width: 640px) {
      .hosting-features-overview {
        padding: 64px 0;
      }
    }

    .cms-apps-track {
      overflow: hidden;
      touch-action: pan-y;
    }

    .cms-app-card {
      flex: 0 0 calc(25% - 0.75rem);
      min-width: 0;
    }

    @media (max-width: 767px) {
      .cms-app-card {
        flex-basis: 75%;
      }
    }