/* Styles for Banner */
/* Styles for Banner */
/* Banner Styles */
.chronos-banner {
          position: relative;
          background-size: cover;
          background-position: center;
          border-radius: var(--chronos-border-radius-md);
          overflow: hidden;
          min-height: 400px;
          display: flex;
          flex-direction: column;
          font-family: var(--chronos-font-family);
          color: var(--chronos-color-text-main);
          background-color: var(--chronos-color-surface);
          border: var(--chronos-border-width) solid var(--chronos-color-border);
        }
        .chronos-banner-overlay {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: var(--chronos-spacing-xl);
          background: rgba(0, 0, 0, 0.4);
        }
        .chronos-banner-content {
          max-width: 800px;
          margin: 0 auto;
        }
        .chronos-banner-title {
          font-size: var(--chronos-font-size-title);
          margin-bottom: var(--chronos-spacing-sm);
          color: #fff;
          margin-top: 0;
        }
        .chronos-banner-subtitle {
          font-size: var(--chronos-font-size-subtitle);
          margin-bottom: var(--chronos-spacing-lg);
          color: #f1f5f9;
        }
        .chronos-banner-cta {
          display: inline-block;
          background-color: var(--chronos-color-primary);
          color: #fff;
          padding: var(--chronos-spacing-sm) var(--chronos-spacing-lg);
          border-radius: var(--chronos-border-radius-sm);
          text-decoration: none;
          font-weight: 600;
          transition: filter 0.2s;
        }
        .chronos-banner-cta:hover {
          filter: brightness(1.1);
        }
        .chronos-hotspot {
          position: absolute;
          inset: 0;
          display: block;
          cursor: pointer;
          outline: none;
        }
        .chronos-hotspot-oval {
          border-radius: 50%;
        }
        .chronos-hotspot:focus-visible {
          box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chronos-color-primary);
        }
        .chronos-hotspot-pulse-ring {
          position: absolute;
          inset: 0;
          border-radius: inherit;
          border: 2px solid #f472b6;
          animation: chronosHotspotPulse 1.6s ease-out infinite;
          pointer-events: none;
        }
        @keyframes chronosHotspotPulse {
          0% { transform: scale(0.9); opacity: 0.9; }
          100% { transform: scale(1.6); opacity: 0; }
        }