/* ============================================
   德州之星 - Premium SaaS Landing Page Styles
   ============================================ */

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Custom Font Rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Navbar Scroll Effect */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hero Gradient Overlay */
.hero-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 25%, #7c3aed 50%, #4338ca 100%);
}

/* Glass Card Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Feature Card Hover Animation */
.feature-card {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
}
.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(-5deg);
}
.feature-icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stats Counter Animation */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Stats Gradient Bar */
.stats-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}
.stats-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  animation: statsPulse 6s ease-in-out infinite;
}
@keyframes statsPulse {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, 5%); }
}

/* Testimonial Card */
.testimonial-card {
  transition: all 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
}

/* FAQ Accordion */
.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: #c7d2fe;
}
.faq-item.active {
  border-color: #818cf8;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.4s ease;
}
.faq-item.active .faq-answer {
  max-height: 500px;
}
.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

/* CTA Section */
.cta-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}
.cta-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

/* Button Hover Ripple */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}

/* Outline Button */
.btn-outline {
  transition: all 0.3s ease;
}
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Hero Image Floating Animation */
.hero-float {
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Badge Pulse */
.badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}

/* Shimmer Effect */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  100% { left: 100%; }
}

/* Mobile Menu */
.mobile-menu {
  transition: all 0.3s ease;
}
.mobile-menu-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Footer Link Hover */
.footer-link {
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: #a5b4fc;
}

/* Scroll to Top Button */
.scroll-top-btn {
  transition: all 0.3s ease;
}
.scroll-top-btn:hover {
  transform: translateY(-3px);
}

/* Page Header for Secondary Pages */
.page-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30%, 30%);
}

/* Star Decoration */
.star-decoration {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b;
  animation: starTwinkle 2s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Trophy Icon Glow */
.icon-glow {
  filter: drop-shadow(0 4px 6px rgba(99, 102, 241, 0.3));
}

/* Step Progress */
.step-connector {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #a5b4fc);
  transform: translateX(-50%);
  z-index: 0;
}

/* Contact Info Card Hover */
.contact-card {
  transition: all 0.3s ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* --- Inner Page Specific --- */
.about-value-card {
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(79,70,229,.15);
  border-color: #c7d2fe;
}

.contact-info-card {
  transition: all .3s ease;
}
.contact-info-card:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  border-left-width: 5px;
}

/* --- Form Focus Glow --- */
input:focus, textarea:focus, select:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 4px rgba(79,70,229,.1) !important;
  outline: none !important;
}

/* --- Responsive Typography --- */
@media (max-width: 640px) {
  .hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
  }
  .stat-number { font-size: 2rem; }
  .feature-card { padding: 1.5rem; }
}

/* --- Selection Color --- */
::selection {
  background: rgba(99, 102, 241, 0.2);
  color: #312e81;
}

/* --- Timeline Dot Pulse --- */
.timeline-dot {
  animation: timelinePulse 2.5s infinite;
}
@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,.4); }
  50% { box-shadow: 0 0 0 12px rgba(79,70,229,0); }
}

/* --- Print Styles --- */
@media print {
  .navbar, #scroll-top-btn, footer { display: none; }
}