/* Main Styles */
:root {
  --primary-color: #ff6a3d;
  --primary-hover: #ff8c6a;
  --secondary-color: #2664ec;
  --text-dark: #333333;
  --text-medium: #666666;
  --text-light: #999999;
  --background-light: #f8f9fa;
  --background-white: #ffffff;
  --shadow: 0 2px 14px 4px rgba(0, 0, 0, 0.08);
  --border-radius: 8px;
  --transition: all 0.3s ease;
  --container-width: 1200px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 64px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.section-description {
  font-size: 1.1rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
  color: var(--text-medium);
}

.highlight {
  color: var(--primary-color);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--spacing-sm) 0;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
}

.logo-img {
  height: 32px;
  margin-right: var(--spacing-xs);
}
.right {
  text-align: center;
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nav-link {
  font-weight: 500;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary-color);
}

.cta-btn {
  padding: 8px 20px;
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.cta-btn:hover {
  background-color: var(--primary-hover);
  color: white;
  transform: translateY(-2px);
}

/* Hero Section */
.hero {
  padding: calc(80px + var(--spacing-xl)) 0 var(--spacing-xl);
  background-color: var(--background-light);
  position: relative;
  overflow: hidden;
}

.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-dark);
}

.hero-subtitle {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: var(--spacing-md);
  color: var(--primary-color);
}

.hero-description {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  color: var(--text-medium);
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.hero-image {
  flex: 1;
  max-width: 550px;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.primary-btn {
  background-color: var(--primary-color);
  color: white;
}

.primary-btn:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 106, 61, 0.2);
}

.text-btn {
  color: var(--text-dark);
}

.text-btn:hover {
  color: var(--primary-color);
}

.btn-arrow {
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Free Features Section */
.free-features {
  padding: var(--spacing-xl) 0;
  background-color: var(--background-white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.feature-card {
  background-color: var(--background-white);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  background-color: rgba(38, 100, 236, 0.1);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.icon {
  width: 28px;
  height: 28px;
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.feature-description {
  color: var(--text-medium);
  margin-bottom: var(--spacing-sm);
}

.feature-list {
  margin-top: var(--spacing-md);
}

.feature-list li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
  color: var(--text-medium);
}

/* CTA Section */
.cta-section {
  padding: var(--spacing-xl) 0;
  background-color: var(--background-light);
}

.cta-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.cta-title {
  font-size: 2.25rem;
  margin-bottom: var(--spacing-md);
}

.cta-description {
  font-size: 1.1rem;
  color: var(--text-medium);
  margin-bottom: var(--spacing-md);
}

.benefits-list {
  margin-top: var(--spacing-md);
}

.benefits-list li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
  font-weight: 500;
}

.benefits-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.5rem;
  line-height: 1;
}

/* Contact Form */
.contact-form-container {
  background-color: var(--background-white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.form-title {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

.form-group {
  margin-bottom: var(--spacing-sm);
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.2);
}

.submit-btn {
  width: 100%;
  margin-top: var(--spacing-sm);
}

/* Contact Info Section */
.contact-info {
  padding: var(--spacing-lg) 0;
  background-color: var(--background-white);
}

.contact-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.contact-description {
  text-align: center;
  color: var(--text-medium);
  margin-bottom: var(--spacing-md);
}

.contact-details {
  max-width: 500px;
  margin: 0 auto;
}

.contact-item {
  display: flex;
  margin-bottom: var(--spacing-sm);
  justify-content: center;
}
.right {
  text-align: center;
}
.contact-image {
  width: 200px;
}
.contact-label {
  font-weight: 600;
  margin-right: var(--spacing-xs);
}

.contact-value {
  color: var(--primary-color);
  transition: var(--transition);
}

.contact-value:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Footer */
.footer {
  background-color: var(--text-dark);
  color: #a0aec0;
  padding-top: 60px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 50px;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.footer-logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.footer-logo-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #a0aec0;
  margin-bottom: 20px;
}

.footer-title {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}

.footer-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 30px;
  height: 2px;
  background-color: var(--primary-color);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #a0aec0;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 14px;
}

.footer-links a:hover {
  color: white;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.footer-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.mail-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233182ce"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.location-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233182ce"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
}

.footer-contact a {
  color: #a0aec0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: white;
}

.footer-social {
  display: flex;
  margin-top: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #2d3748;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

.social-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.weixin {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8.661 15.828c0-.414.336-.75.75-.75h3.107c.414 0 .75.336.75.75s-.336.75-.75.75H9.411a.752.752 0 0 1-.75-.75zm1.78-3.82a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm5.215 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zM12 4.75C6.753 4.75 2.5 8.38 2.5 12.857c0 2.47 1.337 4.684 3.44 6.28.342.261.431.735.212 1.106l-.625 1.064a.755.755 0 0 0 .466.991c.203.07.425.053.612-.05l1.528-.839a.749.749 0 0 1 .734-.003c1.03.57 2.21.896 3.455.934.083.005.162.015.245.018 4.977 0 9-3.63 9-8.107 0-4.476-4.253-8.107-9.5-8.107"/></svg>');
}

.weibo {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="white"><path d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z" /><path d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z" /><path d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.655 18.287 24.921 28.657 43.342 23.329a201.888 201.888 0 0 1 56.473-8.064c109.2 0 198.085 88.326 198.085 197.169 0 19.053-2.74 38.25-8.132 56.693-5.369 18.285 4.64 37.448 23.06 42.908 3.337 1.01 6.659 1.442 9.996 1.442 14.975 0 28.868-9.649 33.33-24.48 7.108-24.48 10.752-49.96 10.752-76.563 0.143-146.683-119.467-266.186-267.091-266.304v0.019z" /><path d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.484-11.75-18.724-5.37-29.962 6.386-11.084 19.297-15.7 28.725-10.216 9.43 5.48 11.755 18.886 5.37 29.959z" /></svg>');
}

.github {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>');
}

.footer-bottom {
  background-color: #1a202c;
  padding: 20px 0;
  text-align: center;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  font-size: 14px;
  color: #a0aec0;
  margin: 0;
}

.footer-extra {
  font-size: 14px;
  color: #a0aec0;
  margin: 0;
}

@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: 10px;
  }
}

/* Notification */
.notification {
  position: fixed;
  top: 80px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  padding: 16px 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  max-width: 350px;
  font-size: 14px;
  line-height: 1.5;
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.success {
  background-color: #10b981;
  border-left: 4px solid #059669;
}

.notification.error {
  background-color: #ef4444;
  border-left: 4px solid #b91c1c;
}

.notification.warning {
  background-color: #f59e0b;
  border-left: 4px solid #d97706;
}

.notification.info {
  background-color: #3b82f6;
  border-left: 4px solid #2563eb;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .cta-section .container {
    grid-template-columns: 1fr;
  }

  .cta-content {
    text-align: center;
  }

  .benefits-list {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
  }

  .hero-content {
    text-align: center;
    max-width: 100%;
  }

  .hero-image {
    max-width: 100%;
    margin-top: var(--spacing-md);
  }

  .hero-cta {
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.25rem;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .contact-form-container {
    padding: var(--spacing-md);
  }
}
