/* ===== Custom Styles for 创曦科技官网 ===== */

/* Hero grid background */
.hero-grid {
  background-image:
    repeating-linear-gradient(0deg, rgba(59,155,245,0.06) 0px, rgba(59,155,245,0.06) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg, rgba(59,155,245,0.06) 0px, rgba(59,155,245,0.06) 1px, transparent 1px, transparent 80px);
  background-size: 80px 80px;
}

.hero-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(59,155,245,0.12) 0%, transparent 70%);
}

/* Scroll-triggered fade-in animation */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Nav scroll state */
.nav-scrolled {
  background: rgba(11, 20, 38, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(59, 155, 245, 0.1);
}

/* Nav link active state */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3B9BF5;
  transition: width 0.3s ease;
}

.nav-link.active {
  color: #3B9BF5;
}

.nav-link.active::after {
  width: 100%;
}

/* CTA button glow */
.btn-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-glow:hover {
  box-shadow: 0 0 24px rgba(59, 155, 245, 0.4), 0 0 48px rgba(59, 155, 245, 0.15);
  transform: translateY(-1px);
}

/* Card hover effect */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Dark card hover - blue border glow */
.card-dark:hover {
  border-color: rgba(59, 155, 245, 0.4);
  box-shadow: 0 12px 40px rgba(59, 155, 245, 0.1);
}

/* Comparison table row hover */
.comparison-row {
  transition: background-color 0.2s ease;
}

.comparison-row:hover {
  background-color: rgba(59, 155, 245, 0.04);
}

/* FAQ truncate/expand */
.faq-answer {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer.open {
  white-space: normal;
  text-overflow: unset;
}

.faq-arrow {
  transition: transform 0.3s ease;
}

.faq-arrow.open {
  transform: rotate(180deg);
}

/* Service tier connector arrows (desktop) */
@media (min-width: 1024px) {
  .tier-connector {
    position: relative;
  }
  .tier-connector::after {
    content: '';
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(59, 155, 245, 0.1);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233B9BF5' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 7l5 5m0 0l-5 5m5-5H6'/%3E%3C/svg%3E");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
  }
  .tier-connector:last-child::after {
    display: none;
  }
}

/* Gold number pulse on reveal */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.gold-number.visible {
  animation: countUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Mobile menu overlay */
.mobile-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
}

/* Tech tag pills */
.tech-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(59, 155, 245, 0.3);
  color: #6BB8F7;
  background: rgba(59, 155, 245, 0.08);
  white-space: nowrap;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Body lock for mobile menu */
body.menu-open {
  overflow: hidden;
}

/* iframe dark blend */
.iframe-container iframe {
  filter: brightness(0.85) saturate(0.9);
  border-radius: 16px;
}

/* iframe fallback */
.iframe-fallback {
  display: none;
}

.iframe-container iframe[src=""] ~ .iframe-fallback,
.iframe-container:has(iframe:not([src])) .iframe-fallback {
  display: block;
}