.home-lanspeech {
  --font-montserrat: "Montserrat", sans-serif;
  --font-size-default: 14px;
  --spacing-control-inline: 12px;
  --font-weight-default: 400;
  --font-size-section-title: 48px;
  --font-weight-section-title: 700;
  --font-size-card-title: 24px;
  --font-weight-card-title: 500;
  --color-theme: #4966fb;
  --color-error: #e26f70;
  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --text-color-base: #dedde0;
  --text-color-light: #b1afb6;
  --text-color-lighter: #84818c;
  --color-feature-cyan: #3fbdf3;
  --color-feature-blue: #387fe9;
  --color-feature-purple: #a36eff;
  --color-feature-indigo: #7465ff;
  --color-language-panel-glow: rgba(78, 86, 237, 0.05);
  --color-language-tag-border: rgba(78, 86, 237, 0.2);
  --color-language-tag-border-featured: rgba(78, 86, 237, 0.6);
  --color-language-tag-featured: rgba(78, 86, 237, 0.2);
  --color-language-tag-default: rgba(255, 255, 255, 0.1);
  --color-language-tag-hover: #4e56ed;
  background-color: #05050a;
  color: var(--text-color-base);
}

@media (max-width: 768px) {
  .home-lanspeech {
    --font-size-section-title: 28px;
    --font-size-card-title: 20px;
  }
}

.home-lanspeech .section-title {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-section-title);
}

.home-lanspeech .card-title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-card-title);
}

.home-lanspeech .no-scrollbar::-webkit-scrollbar,
.home-lanspeech .scrollbar-none::-webkit-scrollbar {
  display: none;
}

.home-lanspeech .no-scrollbar,
.home-lanspeech .scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.home-lanspeech .thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.home-lanspeech .thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.home-lanspeech .thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

.home-lanspeech .thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

@keyframes home-pulse-glow {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes home-sparkle-spin {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(5deg);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
}

@keyframes home-eq-bar {
  0%,
  100% {
    height: 20%;
  }
  50% {
    height: 100%;
  }
}

@keyframes home-wave-bar {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

.home-lanspeech .animate-pulse-glow {
  animation: home-pulse-glow 2s infinite;
}

.home-lanspeech .animate-sparkle-spin {
  animation: home-sparkle-spin 4s infinite;
}

.home-lanspeech .animate-eq-bar {
  animation: home-eq-bar 1.5s infinite ease-in-out;
}

.home-lanspeech .animate-wave-bar {
  animation: home-wave-bar 1.2s ease-in-out infinite;
  transform-origin: bottom;
}

.home-lanspeech .magic-bento-card {
  position: relative;
  transform-style: preserve-3d;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes home-border-spin {
  from {
    --border-angle: 0deg;
  }
  to {
    --border-angle: 360deg;
  }
}

.home-lanspeech .glow-border-button {
  position: relative;
}

.home-lanspeech .glow-border-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    rgba(255, 255, 255, 0.015) 0%,
    rgba(255, 255, 255, 0.05) 10%,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.015) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.3) 75%,
    rgba(255, 255, 255, 0.05) 90%,
    rgba(255, 255, 255, 0.015) 100%
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: home-border-spin 4s linear infinite;
  z-index: 1;
}

body.home-lanspeech-body {
  --footer-bg: transparent;
  --footer-position: relative;
  --footer-z: 1;
  --footer-color: rgba(255, 255, 255, 0.6);
}

/* ===== 中和 Vuetify 全局 utilities 对首页的污染 =====
 * nuxt.config.ts 全局引入 vuetify/styles，其 utility 类（.rounded-xl/.text-center/
 * .px-6/.mb-10 等）带 !important，且与 Tailwind 类名冲突：
 *  - rounded-xl 被改为 24px（Tailwind 语义 12px）
 *  - text-center !important 压死 sm:text-left 等响应式变体
 *  - px-6/mb-10 !important 压死 md:px-12/md:mb-16/md:mb-20
 * 这里在 .home-lanspeech 作用域内以更高特异性 + !important 还原 Tailwind 语义。
 */
.home-lanspeech .rounded-xl {
  border-radius: 12px !important;
}

.home-lanspeech .rounded-lg {
  border-radius: 8px !important;
}

.home-lanspeech .rounded-t-xl {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.home-lanspeech .rounded-t {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.home-lanspeech .rounded-b {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.home-lanspeech .text-center {
  text-align: center !important;
}

.home-lanspeech .text-left {
  text-align: left !important;
}

.home-lanspeech .text-right {
  text-align: right !important;
}

/* Feature-card icon tints: Vuetify .border uses !important and overrides
   Tailwind border-feature opacity utilities; bg-feature opacity 15 is absent from build output. */
.home-lanspeech .bg-feature-cyan\/15 {
  background-color: rgba(63, 189, 243, 0.15) !important;
}

.home-lanspeech .bg-feature-blue\/15 {
  background-color: rgba(56, 127, 233, 0.15) !important;
}

.home-lanspeech .bg-feature-purple\/15 {
  background-color: rgba(163, 110, 255, 0.15) !important;
}

.home-lanspeech .bg-feature-indigo\/15 {
  background-color: rgba(116, 101, 255, 0.15) !important;
}

.home-lanspeech .border-feature-cyan\/20 {
  border-color: rgba(63, 189, 243, 0.2) !important;
}

.home-lanspeech .border-feature-cyan\/10 {
  border-color: rgba(63, 189, 243, 0.1) !important;
}

.home-lanspeech .border-feature-blue\/20 {
  border-color: rgba(56, 127, 233, 0.2) !important;
}

.home-lanspeech .border-feature-purple\/20 {
  border-color: rgba(163, 110, 255, 0.2) !important;
}

.home-lanspeech .border-feature-purple\/10 {
  border-color: rgba(163, 110, 255, 0.1) !important;
}

.home-lanspeech .border-feature-indigo\/20 {
  border-color: rgba(116, 101, 255, 0.2) !important;
}

.home-lanspeech .shadow-feature-cyan\/5 {
  --tw-shadow-color: rgba(63, 189, 243, 0.05);
  --tw-shadow: var(--tw-shadow-colored);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    0 4px 6px -1px rgba(63, 189, 243, 0.05), 0 2px 4px -2px rgba(63, 189, 243, 0.05) !important;
}

@media (min-width: 640px) {
  .home-lanspeech .sm\:text-left {
    text-align: left !important;
  }
}

@media (min-width: 769px) {
  .home-lanspeech .md\:text-left {
    text-align: left !important;
  }

  .home-lanspeech .md\:text-center {
    text-align: center !important;
  }

  .home-lanspeech .md\:px-12 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .home-lanspeech .md\:pt-16 {
    padding-top: 64px !important;
  }

  .home-lanspeech .md\:pb-16 {
    padding-bottom: 64px !important;
  }

  .home-lanspeech .md\:py-16 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .home-lanspeech .md\:mb-16 {
    margin-bottom: 64px !important;
  }

  .home-lanspeech .md\:mb-20 {
    margin-bottom: 80px !important;
  }

  /* .overflow-hidden 带 !important，会压掉语种标签列表的 md:overflow-visible，
     导致桌面端 hover 放大的标签被裁切 */
  .home-lanspeech .md\:overflow-visible {
    overflow: visible !important;
  }
}

/* Match LanSpeech-web typography reset: keep hero free, unify section body text */
.home-lanspeech .text-sm:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-base:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-lg:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-xl:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-2xl:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-3xl:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-4xl:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-5xl:not(.hero-section):not(.hero-section *) {
  font-size: var(--font-size-default) !important;
}

/* Keep demo/tag/micro sizes (12px and below). Only normalize body-scale 14–16px. */
.home-lanspeech .text-\[15px\]:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-\[16px\]:not(.hero-section):not(.hero-section *),
.home-lanspeech .text-\[14px\]:not(.hero-section):not(.hero-section *) {
  font-size: var(--font-size-default) !important;
}

.home-lanspeech .font-light:not(.hero-section):not(.hero-section *),
.home-lanspeech .font-normal:not(.hero-section):not(.hero-section *),
.home-lanspeech .font-medium:not(.hero-section):not(.hero-section *),
.home-lanspeech .font-semibold:not(.hero-section):not(.hero-section *),
.home-lanspeech .font-bold:not(.hero-section):not(.hero-section *),
.home-lanspeech .font-black:not(.hero-section):not(.hero-section *) {
  font-weight: var(--font-weight-default) !important;
}