/**
* Template Name: OnePage
* Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
/* 2026-10-08：正文、标题色改用 PVQuick 软件的配色（正文 #43474b、主色 #293c59）；新增卡片、隔段、边框、按钮、页脚几个变量，
   亮暗两种配色只换这里的值（暗色见下面 :root[data-theme="dark"]，由 index.html <head> 的小段脚本在首屏之前定）。 */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #43474b; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #293c59; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #2487ce; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */

  --surface-color: #ffffff; /* 卡片底色 */
  --surface-alt-color: #f5f5f6; /* 隔一段用的浅灰底（软件页面底色） */
  --border-color: rgba(41, 60, 89, 0.11); /* 卡片、输入框的细边 */
  --brand-line: linear-gradient(90deg, #38bdf8, #fbbf24); /* 软件和社区加载时那条蓝到琥珀色的线 */
  --btn-bg: linear-gradient(135deg, #2b93db 0%, #1f6db0 100%); /* 实心按钮（字是白的，两种配色都用这一个） */
  --btn-shadow: 0 8px 22px -10px rgba(31, 109, 176, 0.65);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -14px rgba(41, 60, 89, 0.2);
  --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 48px -16px rgba(41, 60, 89, 0.32);
  --hero-grid-color: rgba(41, 60, 89, 0.06);
  --footer-bg: #0f1926;
  --footer-color: #aab6c3;
  color-scheme: light;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #293c59;  /* The default color of the main navmenu links */
  --nav-hover-color: #2487ce; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #293c59; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #2487ce; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* 暗色（2026-10-08）：底色取软件深色侧栏 #0c121a；文字、链接调亮到在深底上够清楚 */
:root[data-theme="dark"] {
  --background-color: #0c121a;
  --default-color: #b3becb;
  --heading-color: #eef3f8;
  --accent-color: #5aaef0;
  --contrast-color: #ffffff;

  --surface-color: #131d29;
  --surface-alt-color: #101a25;
  --border-color: rgba(255, 255, 255, 0.08);
  --btn-shadow: 0 8px 24px -10px rgba(56, 160, 230, 0.55);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -16px rgba(0, 0, 0, 0.7);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 26px 52px -18px rgba(0, 0, 0, 0.85);
  --hero-grid-color: rgba(148, 190, 230, 0.06);
  --footer-bg: #070b10;
  --footer-color: #98a5b3;
  color-scheme: dark;

  --nav-color: #d3dbe4;
  --nav-hover-color: #7cc0f5;
  --nav-dropdown-background-color: #131d29;
  --nav-dropdown-color: #d3dbe4;
  --nav-dropdown-hover-color: #7cc0f5;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 60px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  border-color: var(--contrast-color);
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
}

.footer .credits a {
  color: color-mix(in srgb, var(--contrast-color), transparent 30%);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: var(--accent-color);
  --default-color: var(--contrast-color);
  --heading-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 100px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 60px 0;
  overflow: hidden;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 72px;
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 22px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

@media (max-width: 992px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 14px 50px;
  border-radius: 5px;
  transition: 0.5s;
  margin-top: 30px;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Download the PVQuick Introduction (PDF) — sits next to Get Started, wraps under it on narrow screens */
.hero .btn-download {
  color: var(--accent-color);
  background: var(--contrast-color);
  border: 2px solid var(--accent-color);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 30px 0 0 12px;
}

.hero .btn-download i {
  margin-right: 6px;
}

.hero .btn-download:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@media (max-width: 575px) {
  .hero .btn-download {
    margin: 14px 0 0 0;
  }
}

.hero .icon-box {
  background-color: var(--contrast-color);
  padding: 50px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 29px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.hero .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.hero .icon-box .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.hero .icon-box .description {
  font-size: 15px;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.hero .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 36px;
  line-height: 1;
  color: var(--accent-color);
}

@media (min-width: 640px) {
  .hero .icon-box:hover {
    transform: scale(1.08);
  }

  .hero .icon-box:hover .title a {
    color: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 30px 0;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# About Alt Section
--------------------------------------------------------------*/
.about-alt .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about-alt .content ul {
  list-style: none;
  padding: 0;
}

.about-alt .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about-alt .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about-alt .content p:last-child {
  margin-bottom: 0;
}

.about-alt .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.about-alt .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.about-alt .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.about-alt .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.about-alt .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid var(--background-color);
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 0 0 45px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.services .service-item {
  background-color: var(--contrast-color);
  box-shadow: 0px 5px 90px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.services .service-item .icon i {
  font-size: 36px;
  transition: 0.5s;
  position: relative;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 5px 35px 0px color-mix(in srgb, var(--default-color), transparent 85%);
}

.services .service-item.item-cyan i {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover .icon i {
  color: #fff;
}

.services .service-item.item-cyan:hover .icon path {
  fill: #0dcaf0;
}

.services .service-item.item-orange i {
  color: #fd7e14;
}

.services .service-item.item-orange:hover .icon i {
  color: #fff;
}

.services .service-item.item-orange:hover .icon path {
  fill: #fd7e14;
}

.services .service-item.item-teal i {
  color: #20c997;
}

.services .service-item.item-teal:hover .icon i {
  color: #fff;
}

.services .service-item.item-teal:hover .icon path {
  fill: #20c997;
}

.services .service-item.item-red i {
  color: #df1529;
}

.services .service-item.item-red:hover .icon i {
  color: #fff;
}

.services .service-item.item-red:hover .icon path {
  fill: #df1529;
}

.services .service-item.item-indigo i {
  color: #6610f2;
}

.services .service-item.item-indigo:hover .icon i {
  color: #fff;
}

.services .service-item.item-indigo:hover .icon path {
  fill: #6610f2;
}

.services .service-item.item-pink i {
  color: #f3268c;
}

.services .service-item.item-pink:hover .icon i {
  color: #fff;
}

.services .service-item.item-pink:hover .icon path {
  fill: #f3268c;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: var(--accent-color);
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--contrast-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.team .team-member {
  background-color: var(--contrast-color);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--contrast-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  position: relative;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq {
  --background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.faq .faq-container .faq-item {
  background-color: var(--contrast-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--contrast-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
/*--------------------------------------------------------------
# 中英文切换（2026-10-06）：顶栏「中文 / EN」按钮；中文时标题与正文的中文字体
--------------------------------------------------------------*/
.header .lang-toggle {
  font-family: var(--nav-font);
  font-size: 14px;
  line-height: 1.2;
  color: var(--accent-color);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 40%);
  border-radius: 4px;
  padding: 7px 12px;
  margin: 0 0 0 30px;
  cursor: pointer;
  transition: 0.3s;
}

.header .lang-toggle:hover,
.header .lang-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

@media (min-width: 1201px) {
  .header .lang-toggle + .btn-getstarted {
    margin-left: 12px;
  }
}

@media (max-width: 1200px) {
  .header .lang-toggle {
    order: 2;
    margin: 0 10px 0 0;
    padding: 5px 10px;
  }
}

html[lang="zh-CN"] {
  --default-font: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --heading-font: "Raleway", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --nav-font: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* 手机宽度：顶栏放标志、语言按钮、开始使用、菜单四样，标志缩小、按钮不换行 */
@media (max-width: 575px) {
  .header .logo img {
    height: 40px !important;
  }

  .header .lang-toggle {
    font-size: 13px;
    padding: 4px 8px;
    margin: 0 6px 0 0;
    white-space: nowrap;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    font-size: 13px;
    padding: 5px 10px;
    margin: 0 8px 0 0;
    white-space: nowrap;
  }
}

/* 联系表单改为打开邮件程序（2026-10-06）：按钮下面一行说明；页脚标志下一句介绍 */
.contact .php-email-form .form-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.footer .footer-about p {
  margin-top: 10px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# 亮暗两种配色与整体质感（2026-10-08）
#
# 颜色都走文件开头的变量（亮色 :root、暗色 :root[data-theme="dark"]）；这里是各段的样式：
# 顶栏毛玻璃与品牌细线、首屏光晕与网格、卡片细边与悬停上浮、隔段浅灰底、社区一段、深色页脚、切换按钮。
--------------------------------------------------------------*/

/* 切换配色那一下不做过渡（theme.js 加上、两帧后去掉），免得一部分元素慢慢变、一部分立刻变 */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* 标志：亮色用原图，暗色用 PV 两字调亮的那份 */
.logo-on-dark {
  display: none !important;
}

[data-theme="dark"] .logo-on-light {
  display: none !important;
}

[data-theme="dark"] .logo-on-dark {
  display: block !important;
}

/* ---------- 顶栏：半透明毛玻璃，顶上一条品牌细线 ----------
   毛玻璃放在 ::after 上，不放在 .header 本身：backdrop-filter 会让手机菜单（position: fixed）只铺满顶栏那么大。 */
.header {
  background-color: transparent;
  border-bottom: 1px solid var(--border-color);
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-line);
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--background-color), transparent 12%);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

.scrolled .header {
  border-color: var(--border-color);
  box-shadow: 0 6px 24px -12px rgba(16, 24, 40, 0.25);
}

[data-theme="dark"] .scrolled .header {
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.7);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: var(--btn-bg);
  color: #fff;
  border-radius: 6px;
  box-shadow: var(--btn-shadow);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: var(--btn-bg);
  color: #fff;
  filter: brightness(1.08);
}

/* 亮暗切换按钮，和「中文 / EN」同一个样子、同一个高 */
.header .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--accent-color);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 40%);
  border-radius: 4px;
  margin: 0 0 0 30px;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
}

.header .theme-toggle:hover,
.header .theme-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.header .lang-toggle {
  display: inline-flex;
  align-items: center;
  height: 34px;
  flex-shrink: 0;
}

.header .theme-toggle .theme-icon-light,
[data-theme="dark"] .header .theme-toggle .theme-icon-dark {
  display: none;
}

[data-theme="dark"] .header .theme-toggle .theme-icon-light {
  display: inline-block;
}

@media (min-width: 1201px) {
  .header .theme-toggle + .lang-toggle {
    margin-left: 8px;
  }
}

@media (max-width: 1200px) {
  .header .theme-toggle {
    order: 2;
    margin: 0 8px 0 0;
    height: 32px;
    width: 34px;
  }

  .header .lang-toggle {
    height: 32px;
  }
}

/* 菜单里的「社区」是外链：桌面上跟一个小箭头；手机菜单里不要模板给下拉箭头画的圆底 */
.navmenu .nav-external i {
  font-size: 11px;
  opacity: 0.65;
}

@media (max-width: 1199px) {
  .navmenu .nav-external {
    justify-content: flex-start;
  }

  .navmenu .nav-external i,
  .navmenu .nav-external:focus i {
    width: auto;
    height: auto;
    margin-left: 8px;
    background: none;
    border-radius: 0;
  }

  .mobile-nav-active .navmenu {
    background: rgba(7, 11, 16, 0.72);
  }
}

/* ---------- 各段：标题下一条品牌细线；隔一段换浅灰底 ---------- */
.section-title h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: var(--brand-line);
}

.section-title p {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.services,
.contact {
  --background-color: var(--surface-alt-color);
}

.services,
.contact,
.community {
  border-top: 1px solid var(--border-color);
}

/* ---------- 首屏：底图上加两团品牌色光晕和淡网格（光伏板的格子），往下渐隐到白底 ---------- */
.hero {
  background-color: var(--background-color);
}

.hero:before {
  background:
    radial-gradient(46% 55% at 10% 16%, rgba(56, 189, 248, 0.26), transparent 70%),
    radial-gradient(40% 50% at 92% 20%, rgba(251, 191, 36, 0.22), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--background-color), transparent 50%) 0%,
      color-mix(in srgb, var(--background-color), transparent 28%) 62%,
      var(--background-color) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--hero-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid-color) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 58% at 50% 32%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 58% at 50% 32%, #000 0%, transparent 78%);
}

/* 暗色：浅色低多边形底图反相成深色的折面，光晕调强一点 */
[data-theme="dark"] .hero img {
  filter: invert(1) hue-rotate(180deg) brightness(1.15);
  opacity: 0.55;
}

[data-theme="dark"] .hero:before {
  background:
    radial-gradient(46% 55% at 10% 14%, rgba(56, 189, 248, 0.22), transparent 70%),
    radial-gradient(40% 50% at 92% 18%, rgba(251, 191, 36, 0.13), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--background-color), transparent 40%) 0%,
      color-mix(in srgb, var(--background-color), transparent 20%) 62%,
      var(--background-color) 100%);
}

.hero h1 {
  background: linear-gradient(100deg, var(--heading-color) 25%, #2487ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 4px;
}

[data-theme="dark"] .hero h1 {
  background-image: linear-gradient(100deg, #ffffff 25%, #8ccfff 100%);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 18%);
}

.hero .btn-get-started {
  color: #fff;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  border-radius: 8px;
  transition: 0.3s;
}

.hero .btn-get-started:hover {
  color: #fff;
  background: var(--btn-bg);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.hero .btn-download {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--surface-color), transparent 25%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 45%);
  padding: 13px 30px;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: 0.3s;
}

.hero .btn-download:hover {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

/* 首屏四张卡：细边、顶上一条品牌色线、图标放在淡色圆角方块里；悬停上浮 */
.hero .icon-box {
  background-color: color-mix(in srgb, var(--surface-color), transparent 6%);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 34px 26px 30px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero .icon-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-line);
}

.hero .icon-box .icon {
  width: 52px;
  height: 52px;
  padding-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(251, 191, 36, 0.16));
}

.hero .icon-box .description {
  color: color-mix(in srgb, var(--default-color), transparent 22%);
}

@media (min-width: 640px) {
  .hero .icon-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--card-shadow-hover);
    border-color: color-mix(in srgb, var(--accent-color), transparent 65%);
  }
}

/* ---------- 功能九张卡：细边，悬停时上浮、顶上的品牌色线从左划出 ---------- */
.services .service-item {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 48px 28px 40px;
  overflow: hidden;
}

.services .service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.services .service-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: color-mix(in srgb, var(--accent-color), transparent 65%);
}

.services .service-item:hover::before {
  transform: scaleX(1);
}

.services .service-item p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* ---------- 关于我们 ---------- */
.about ul li {
  align-items: flex-start;
  padding-bottom: 12px;
}

.about ul i {
  line-height: 1.2;
  padding-right: 8px;
}

.about .about-text p {
  margin: 0;
  padding: 26px 28px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.07), rgba(251, 191, 36, 0.07)),
    var(--surface-color);
  box-shadow: var(--card-shadow);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- 社区与反馈 ---------- */
.community .community-points {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.community .community-points li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-color);
}

.community .community-points li:first-child {
  padding-top: 0;
}

.community .point-icon,
.community .step-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.community .point-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
  color: var(--accent-color);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(251, 191, 36, 0.16));
}

.community .community-points h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 2px 0 6px;
}

.community .community-points p {
  margin: 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.community .btn-community {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  transition: 0.3s;
}

.community .btn-community:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* 截图套一个浏览器窗口的框；截图按 16:10 显示，比例不同的顶端对齐、裁掉下面 */
.community .browser-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
}

.community .browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--surface-alt-color);
  border-bottom: 1px solid var(--border-color);
}

.community .browser-bar span {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 72%);
}

.community .browser-bar em {
  flex: 0 1 240px;
  margin: 0 auto;
  padding: 2px 12px;
  border-radius: 6px;
  font-style: normal;
  font-size: 12px;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  background: var(--background-color);
  border: 1px solid var(--border-color);
  transform: translateX(-16px);
}

.community .browser-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

[data-theme="dark"] .community .browser-frame img {
  filter: brightness(0.92);
}

.community .community-shot {
  position: relative;
}

.community .community-shot::before {
  content: "";
  position: absolute;
  inset: 10% 8% -4% 8%;
  background: var(--brand-line);
  filter: blur(60px);
  opacity: 0.28;
  border-radius: 40px;
}

.community .community-shot .browser-frame {
  position: relative;
  box-shadow: 0 30px 60px -28px rgba(41, 60, 89, 0.45);
}

[data-theme="dark"] .community .community-shot .browser-frame {
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
}

.community .feedback-head {
  text-align: center;
  margin: 80px 0 32px;
}

.community .feedback-head h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.community .feedback-head p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.community .step-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  transition: 0.3s;
}

.community .step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.community .step-card .browser-frame {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}

.community .step-body {
  padding: 22px 24px 26px;
}

.community .step-no {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--btn-bg);
}

.community .step-body h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.community .step-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* 第 3 步的示意：三条帖子，各带投票按钮和一个处理状态（颜色与社区侧栏「处理进度」一致的意思：琥珀、蓝、绿） */
.community .status-mock {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-alt-color);
}

.community .status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
}

.community .status-row .vote {
  flex: 0 0 auto;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 6px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.community .status-row .vote i {
  font-size: 13px;
  line-height: 1;
}

.community .status-row .lines {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.community .status-row .lines b {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--default-color), transparent 82%);
}

.community .status-row .lines b + b {
  width: 60%;
  opacity: 0.6;
}

.community .status-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.community .st-discussing {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
}

.community .st-accepted {
  color: #1f6db0;
  background: rgba(36, 135, 206, 0.12);
}

.community .st-shipped {
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
}

[data-theme="dark"] .community .st-discussing {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}

[data-theme="dark"] .community .st-accepted {
  color: #7cc0f5;
  background: rgba(90, 174, 240, 0.14);
}

[data-theme="dark"] .community .st-shipped {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

/* ---------- AI 智汇「一个循环」（2026-10-12）----------
   圆圈（弧线、箭头、编号）画在 SVG 里，只是装饰（aria-hidden）；字都在 HTML 里。
   992 以下：圆圈在上，六步排成一列，编号之间连细线；992 起：圆圈居中，六步左右各三条，左边三条右对齐、编号朝圆圈。
   6 回到 2 那段用琥珀色（亮色线 #d97706、字 #b45309 才够对比；暗色都用 #fbbf24），和下面「回到第 2 步」那行同色。 */
.community {
  --loop-back-line: #d97706;
  --loop-back-text: #b45309;
}

[data-theme="dark"] .community {
  --loop-back-line: #fbbf24;
  --loop-back-text: #fbbf24;
}

.community .hub-loop {
  margin: 0 auto 40px;
}

.community .hub-loop-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  /* 窄屏不留「台」一个字在第二行 */
  text-wrap: balance;
  word-break: keep-all;
}

/* 标题下两行（10-12 晚）：参与者也是受益者＋AI 做什么，环形图上面。 */
.community .hub-loop-vision {
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  /* 窄屏折行时两行等长、只在标点处断开 */
  text-wrap: balance;
  word-break: keep-all;
  /* 只在标点处断；一段比屏幕还宽时才硬折，不横向溢出 */
  overflow-wrap: anywhere;
}

.community .hub-loop-vision span {
  display: block;
  text-wrap: balance;
}

/* 「既是参与者，也是受益者」那一行加重 */
.community .hub-loop-vision .hub-loop-lead {
  font-size: 19px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
}

/* 小伏一句：左边头像、右边介绍，像它自己在说话（10-12 晚） */
.community .hub-loop-agent {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 820px;
  margin: -12px auto 30px;
  padding: 14px 22px 14px 14px;
  border-radius: 20px;
  background: var(--surface-alt-color);
  border: 1px solid var(--border-color);
}

.community .hub-loop-agent img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 6px 16px -8px rgba(31, 109, 176, 0.6);
}

.community .hub-loop-agent p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
  color: color-mix(in srgb, var(--default-color), transparent 6%);
  text-wrap: pretty;
}

@media (max-width: 575px) {
  .community .hub-loop-vision {
    font-size: 15px;
  }

  .community .hub-loop-agent {
    gap: 12px;
    padding: 12px 14px 12px 12px;
  }

  .community .hub-loop-agent img {
    width: 60px;
    height: 60px;
  }

  .community .hub-loop-agent p {
    font-size: 14px;
  }

  .community .hub-loop-vision .hub-loop-lead {
    font-size: 17px;
  }
}

@media (max-width: 360px) {
  /* 极窄屏放开 keep-all，按中文常规折行（行首不放标点） */
  .community .hub-loop-vision {
    font-size: 14px;
    word-break: normal;
  }

  .community .hub-loop-vision .hub-loop-lead {
    font-size: 16px;
  }
}

.community .hub-loop-ring {
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto 30px;
}

.community .loop-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.community .loop-arc {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.community .loop-arrow-head,
.community .loop-start {
  fill: var(--accent-color);
}

.community .loop-arc.loop-back {
  stroke: var(--loop-back-line);
  stroke-dasharray: 6 5;
  stroke-linecap: butt;
}

.community .loop-arrow-head.loop-arrow-back {
  fill: var(--loop-back-line);
}

.community .loop-nodes circle {
  fill: url(#loop-node-fill);
  stroke: var(--background-color);
  stroke-width: 4;
}

.community .loop-nodes text {
  fill: #fff;
  font-family: var(--default-font);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.community .loop-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 37.6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(251, 191, 36, 0.14)),
    var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.community .loop-hub span {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  color: color-mix(in srgb, var(--heading-color), transparent 28%);
}

.community .loop-hub strong {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.community .hub-loop-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: grid;
  row-gap: 18px;
}

.community .loop-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 一列时编号之间的连线 */
.community .loop-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: -16px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.community .loop-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
}

.community .loop-step h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 5px 0 4px;
}

.community .loop-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--default-color), transparent 8%);
  text-wrap: pretty;
}

.community .hub-loop-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--loop-back-text);
}

.community .hub-loop-back i {
  font-size: 18px;
  line-height: 1;
}

.community .hub-loop-general {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.07), rgba(251, 191, 36, 0.07)),
    var(--surface-color);
  font-size: 15px;
  line-height: 1.6;
}

.community .hub-loop-general i {
  font-size: 17px;
  line-height: 1.45;
  color: var(--accent-color);
}

.community .hub-loop-pilot {
  margin: 14px 0 0;
  font-size: 13px;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 22%);
}

/* 圆圈下面的三条说明和按钮 */
.community .community-more {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
}

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

@media (min-width: 992px) {
  .community .hub-loop {
    margin-bottom: 64px;
  }

  .community .community-more {
    padding-top: 48px;
  }

  .community .hub-loop-stage {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
  }

  .community .hub-loop-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 340px;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  /* 三行等高、至少和圆圈一样高；上一行贴下、下一行贴上，字靠近圆上的编号 */
  .community .hub-loop-steps {
    max-width: none;
    min-height: 360px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 1fr);
    column-gap: 400px;
    row-gap: 12px;
  }

  .community .loop-step:not(:last-child)::before {
    display: none;
  }

  .community .loop-step.s1 { grid-area: 1 / 1; align-self: end; }
  .community .loop-step.s2 { grid-area: 1 / 2; align-self: end; }
  .community .loop-step.s3 { grid-area: 2 / 2; align-self: center; }
  .community .loop-step.s4 { grid-area: 3 / 2; align-self: start; }
  .community .loop-step.s5 { grid-area: 3 / 1; align-self: start; }
  .community .loop-step.s6 { grid-area: 2 / 1; align-self: center; }

  .community .loop-step.s1,
  .community .loop-step.s5,
  .community .loop-step.s6 {
    flex-direction: row-reverse;
    text-align: right;
  }

  .community .community-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 36px;
  }

  .community .community-points li,
  .community .community-points li:first-child {
    padding: 0;
    border-bottom: 0;
  }
}

/* 992–1199：两边的字太窄，圆圈缩到 300（编号字号随 SVG 缩到 13.2px，不小于 13） */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .community .hub-loop-ring {
    width: 300px;
  }

  .community .hub-loop-steps {
    min-height: 320px;
    column-gap: 344px;
  }
}

/* 1400 起放宽，中文每条说明多数排成两行 */
@media (min-width: 1400px) {
  .community .hub-loop-stage,
  .community .community-more {
    max-width: 1180px;
  }
}

/* ---------- 联系我们 ---------- */
.contact .info-item i {
  color: #fff;
  background: var(--btn-bg);
  border-radius: 10px;
  box-shadow: var(--btn-shadow);
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  border-radius: 8px;
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 78%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 45%);
}

.contact .php-email-form button[type=submit] {
  color: #fff;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  border-radius: 8px;
  padding: 11px 34px;
  transition: 0.3s;
}

.contact .php-email-form button[type=submit]:hover {
  background: var(--btn-bg);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* ---------- 页脚：两种配色都是深底，顶上一条品牌细线 ---------- */
.footer {
  --background-color: var(--footer-bg);
  --default-color: var(--footer-color);
  --heading-color: #ffffff;
  --accent-color: #7cc0f5;
  border-top: 0;
  border-bottom: 0;
  padding-bottom: 8px;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-line);
  opacity: 0.85;
}

.footer .footer-about .logo img.footer-logo {
  height: 44px;
  max-height: none;
  width: auto;
}

.footer .footer-links ul a {
  color: var(--footer-color);
}

.footer .footer-links ul a:hover {
  color: #ffffff;
}

.footer .copyright {
  background: transparent;
  color: color-mix(in srgb, var(--footer-color), transparent 15%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.footer .copyright .sitename {
  color: #ffffff;
}

/* ---------- 回到顶部按钮 ---------- */
.scroll-top {
  background: var(--btn-bg);
  border-radius: 8px;
  box-shadow: var(--btn-shadow);
}

.scroll-top:hover {
  background: var(--btn-bg);
  filter: brightness(1.1);
}

/* ---------- 手机：顶栏放标志、亮暗、语言、开始使用、菜单五样 ---------- */
@media (max-width: 575px) {
  .header .theme-toggle {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin: 0 6px 0 0;
  }

  .header .lang-toggle {
    height: 30px;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    margin: 0 6px 0 0;
  }

  .mobile-nav-toggle {
    margin-right: 0;
  }

  .community .feedback-head {
    margin-top: 56px;
  }
}

@media (max-width: 420px) {
  .header .logo img {
    height: 32px !important;
    margin-right: 4px;
  }
}

/* 360 以下的小屏（如 320 宽）五样放不下：标志再小一点，顶栏的「开始使用」收起（首屏正中就有同一个按钮） */
@media (max-width: 359px) {
  .header .logo img {
    height: 28px !important;
  }

  .header .btn-getstarted {
    display: none;
  }
}

/*--------------------------------------------------------------
# 服务条款、隐私政策页（2026-10-06）：中英文同页，按 html[lang] 显示一种
--------------------------------------------------------------*/
html[lang="zh-CN"] .legal-doc[lang="en"],
html:not([lang="zh-CN"]) .legal-doc[lang="zh-CN"] {
  display: none;
}

.legal-page .legal-doc {
  max-width: 860px;
  margin: 0 auto;
  padding: 50px 16px 70px;
}

.legal-page .legal-doc h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
}

.legal-page .legal-doc .legal-meta {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  margin-bottom: 30px;
}

/* 试行版提示（2026-10-12）：律师审阅前先按试行版发布，标题下面一条琥珀色提示 */
.legal-page .legal-doc .legal-trial {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -14px 0 30px;
  padding: 12px 16px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-left: 4px solid #d97706;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.12);
  color: var(--heading-color);
}

.legal-page .legal-doc .legal-trial i {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1.6;
  color: #b45309;
}

.legal-page .legal-doc h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 10px;
}

.legal-page .legal-doc p,
.legal-page .legal-doc li {
  font-size: 15px;
  line-height: 1.75;
}

.legal-page .legal-doc ul {
  padding-left: 22px;
}

.footer .footer-legal a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0 8px;
}

/*--------------------------------------------------------------
# 小伏一段（10-18 加，10-19 改：在 AI 智汇后面、关于我们前面）
# 左边深色舞台放星笼大图（软件里同一套 SVG），下面「平时／思考中」切换；右边标题、一句话、三条能做的事。
# 舞台在亮暗两种配色下都是深蓝（深色版小伏只在深底上好看）；其余跟着配色变量走。
--------------------------------------------------------------*/
.xiaofu {
  position: relative;
  padding: 72px 0 76px;
  background:
    radial-gradient(900px 520px at 22% 40%, rgba(91, 141, 239, 0.1), rgba(91, 141, 239, 0) 70%),
    var(--surface-alt-color);
}

/* 10-19 用户：「小伏的介绍字体不用那么占地方，小伏的图标放大一点精致一点，所有的情况下都放大一点图标」——舞台 520 → 620 px（左栏 7/12），
   右边的字收小、卡片收紧。
   10-24 用户：「这个左边占地方太大了整个界面显得特别奇怪」——620 的方块比右边的字高一倍多。舞台收到 460 px、两栏各半；
   画面在舞台里放大 1.2 倍、裁掉四周空着的深色（.xf-art、.xf-3d 各比舞台大 20%），小伏本身比 10-19 之前 520 的舞台里还大一点。 */
.xf-stage {
  max-width: 460px;
  margin: 0 auto;
}

.xf-canvas {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 47%, #1f3d70 0%, #10213d 42%, #08111f 78%, #060c17 100%);
  box-shadow: 0 34px 70px -34px rgba(8, 20, 40, 0.7), inset 0 0 0 1px rgba(160, 200, 255, 0.09);
}

/* 几粒很淡的星点，只是底子 */
.xf-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1.2px 1.2px at 9% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 12%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 93% 58%, rgba(255, 236, 200, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 16% 72%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 92%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 7%, rgba(255, 255, 255, 0.5) 50%, transparent 51%);
}

.xf-art {
  position: absolute;
  z-index: 1;
  top: -10%;
  left: -10%;
  display: block;
  width: 120%;
  height: 120%;
}

/* 3D 球（10-19 用户：「放在主页上……是这个球……可以拖拽」）：画好第一帧再盖上去，静态图同一姿态、同样放大，换的时候看不出跳 */
.xf-3d {
  position: absolute;
  inset: -10%;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.xf-stage.is-3d .xf-3d {
  opacity: 1;
}

.xf-stage.is-3d .xf-art {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.xf-hint {
  display: none;
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--default-color);
  opacity: 0.7;
}

.xf-stage.is-3d .xf-hint {
  display: block;
}

.xf-modes {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.xf-mode {
  border: 0;
  padding: 7px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.xf-mode:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.xf-mode[aria-pressed="true"] {
  background: var(--btn-bg);
  color: #ffffff;
  box-shadow: var(--btn-shadow);
}

.xf-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--heading-color);
}

.xf-pilot {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: #a35f00;
  background: rgba(245, 165, 36, 0.16);
}

[data-theme="dark"] .xf-pilot {
  color: #f5c36b;
  background: rgba(245, 165, 36, 0.16);
}

.xf-lead {
  margin-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.xf-caps {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.xf-caps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.xf-cap-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #3d6fd6 0%, #1f3d70 100%);
}

.xf-caps h3 {
  margin: 1px 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
}

.xf-caps p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.xf-note {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* AI 智汇里那张小头像：亮色页面用浅色版、暗色用深色版；新图是透明底的骨架，不要圆裁和阴影 */
.xf-on-dark {
  display: none !important;
}

[data-theme="dark"] .xf-on-light {
  display: none !important;
}

[data-theme="dark"] .xf-on-dark {
  display: block !important;
}

.community .hub-loop-agent img.xf-on-light,
.community .hub-loop-agent img.xf-on-dark {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 991px) {
  .xf-title {
    font-size: 27px;
  }
}

@media (max-width: 575px) {
  .xiaofu {
    padding: 48px 0 54px;
  }

  .xf-canvas {
    border-radius: 22px;
  }

  .xf-title {
    font-size: 24px;
  }

  .xf-lead {
    font-size: 15px;
  }
}