/* Connectora SaaS Landing Page Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Poppins:wght@400;500;600;700;800;900&family=Sora:wght@400;600;700;800&display=swap');

:root {
  --color-primary: #0F3D33;
  --color-primary-dark: #0A2B24;
  --color-primary-light: #185346;
  --color-mint-bg: #EDF7F1;
  --color-mint-card: #E1F5EB;
  --color-mint-subtle: #F3FAF5;
  --color-accent-purple: #7B6EF6;
  --color-accent-blue: #38BDF8;
  --color-accent-green: #34D399;
  --color-accent-yellow: #FBBF24;
  --color-text-dark: #0F3D33;
  --color-text-muted: #486E64;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-mint-bg);
  color: var(--color-text-muted);
  overflow-x: clip;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Plus Jakarta Sans', 'Poppins', 'Sora', sans-serif;
  color: var(--color-primary);
  letter-spacing: -0.03em;
}

/* Hero Rays Sunburst Background */
.hero-wrapper-card {
  background-color: #E7F7EE;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 25%, #ffffff 0%, rgba(231, 247, 238, 0.8) 60%, #E7F7EE 100%),
    repeating-conic-gradient(from 0deg at 50% 28%, rgba(167, 243, 208, 0.35) 0deg 10deg, transparent 10deg 20deg);
  border-radius: 40px;
}

@media (min-width: 1024px) {
  .hero-wrapper-card {
    border-radius: 48px;
  }
}

.hero-sunburst-bg {
  background: 
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(167, 243, 208, 0.65) 0%, rgba(209, 250, 229, 0.35) 45%, rgba(237, 247, 241, 0) 80%),
    radial-gradient(circle at 10% 25%, rgba(134, 239, 172, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 90% 25%, rgba(167, 243, 208, 0.25) 0%, transparent 40%);
}

.footer-sunburst-bg {
  background: 
    radial-gradient(ellipse 90% 70% at 50% 60%, rgba(167, 243, 208, 0.55) 0%, rgba(209, 250, 229, 0.25) 50%, rgba(237, 247, 241, 0) 85%),
    repeating-conic-gradient(from 0deg at 50% 70%, rgba(167, 243, 208, 0.3) 0deg 12deg, transparent 12deg 24deg);
}

.radial-glow-teal {
  background: radial-gradient(circle at center, rgba(15, 61, 51, 0.15) 0%, transparent 70%);
}

/* Floating Animations for Hero Badges */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}

.animate-float-slow {
  animation: float-slow 4.5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 5s ease-in-out infinite 1s;
}

/* Orbit Dash Ring */
.orbit-ring {
  border: 2px dashed rgba(52, 211, 153, 0.45);
  border-radius: 9999px;
}

/* Hero CTA Neon Glow Halo */
.hero-cta-halo {
  position: relative;
  display: inline-block;
  border-radius: 9999px;
  z-index: 10;
}

.hero-cta-halo::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 20%, #3b82f6 45%, #10b981 70%, #f59e0b 95%);
  border-radius: 9999px;
  filter: blur(14px);
  opacity: 0.85;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-cta-halo:hover::before {
  filter: blur(20px);
  opacity: 1;
  transform: scale(1.06);
}

/* Signature Multi-Color Gradient Ring Button */
.btn-gradient-ring {
  position: relative;
  border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(135deg, #7B6EF6 0%, #38BDF8 35%, #34D399 70%, #FBBF24 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px 0 rgba(15, 61, 51, 0.12);
}

.btn-gradient-ring:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -4px rgba(123, 110, 246, 0.35), 0 4px 12px -2px rgba(52, 211, 153, 0.25);
}

.btn-gradient-ring:active {
  transform: translateY(0);
}

.btn-gradient-ring-inner {
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 9999px;
  padding: 0.65rem 1.6rem;
  font-weight: 600;
  font-size: 0.925rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  transition: background-color 0.2s ease;
}

.btn-gradient-ring.white-inner .btn-gradient-ring-inner {
  background-color: #ffffff;
  color: var(--color-primary);
}

.btn-gradient-ring.white-inner:hover .btn-gradient-ring-inner {
  background-color: #f8fafc;
}

/* Rotating circular text */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Glassmorphism & Card Soft Shadows */
.card-soft-shadow {
  box-shadow: 0 10px 30px -5px rgba(15, 61, 51, 0.05), 0 2px 8px -2px rgba(15, 61, 51, 0.03);
}

.card-hover-elevate {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover-elevate:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(15, 61, 51, 0.1), 0 4px 12px -2px rgba(15, 61, 51, 0.05);
}

/* Custom Floating Badge Icon */
.corner-badge-btn {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 61, 51, 0.1);
  color: var(--color-primary);
  transition: all 0.2s ease;
}

.card-hover-elevate:hover .corner-badge-btn {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: scale(1.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #EAF5EE;
}
::-webkit-scrollbar-thumb {
  background: #1B4D3E;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0F3D33;
}

/* Accordion Smooth Transition */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-content {
  max-height: 300px;
  opacity: 1;
  margin-top: 0.75rem;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

/* App badge multi-gradient */
.app-badge-gradient {
  background: linear-gradient(135deg, #FF6B6B 0%, #9B51E0 30%, #3B82F6 60%, #10B981 100%);
  padding: 3px;
  border-radius: 9999px;
}

/* Giant Connectora Watermark Typography */
.brand-watermark {
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--color-primary);
  user-select: none;
}

/* Pulse animation for live online indicators */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

.pulse-active {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Responsive product screenshot gallery */
.product-gallery { max-width: 1120px; margin: clamp(36px, 6vw, 72px) auto 0; width: 100%; padding-inline: clamp(0px, 1.5vw, 8px); }
    .product-gallery *, .product-frame * { box-sizing: border-box; }
    .product-stage { padding: clamp(10px, 2.2vw, 28px); border: 1px solid #cde5db; border-radius: 28px; background: linear-gradient(145deg, #dff1e8, #f6faf8 65%, #e4eeeb); }
    .product-frame { min-width: 0; margin: 0; overflow: hidden; background: #fff; border: 1px solid #dce8e3; border-radius: 14px; box-shadow: 0 8px 24px -14px rgba(15,61,51,.24); }
    .product-frame--primary { box-shadow: 0 18px 42px -22px rgba(15,61,51,.32); }
    .product-bar { min-height: 38px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e4ece8; background: #fafcfb; color: #456e63; font: 600 11px/1.4 'Plus Jakarta Sans', sans-serif; }
    .product-dots { display: flex; gap: 4px; flex: 0 0 auto; }
    .product-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c3d4cc; }
    .product-frame img.product-image { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; background: #f5f8f7; padding: 0; border-radius: 0; transform: none; }
    .product-frame--primary img.product-image { aspect-ratio: 16 / 9; }
    .product-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
    .product-preview { min-width: 0; margin: 0; }
    .product-preview figcaption { padding: 12px 2px 0; color: #325e53; font: 600 12px/1.5 'Plus Jakarta Sans', sans-serif; }
    .product-preview figcaption span { display: block; margin-top: 3px; color: #648277; font-size: 11px; font-weight: 400; }
    .product-partner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; color: #456e63; font: 600 12px/1.5 'Plus Jakarta Sans', sans-serif; }
    .product-partner img { display: block; width: 80px; height: 32px; object-fit: contain; }
    #showcase .product-frame { margin-top: 2px; margin-bottom: 8px; }
    #features .product-frame { width: 100%; }
    @media (max-width: 639px) {
      .product-stage { border-radius: 18px; }
      .product-previews { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
      .product-frame { border-radius: 10px; }
      .product-bar { padding: 8px 10px; min-height: 32px; }
      .product-preview figcaption { padding-top: 8px; }
    }