@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.dark {
  background-color: #181a20;
  color: #e5e7eb;
}

.dark section {
  background-color: #181a20 !important;
}

.dark .bg-white {
  background-color: #23262f !important;
}

.dark .border-gray-100,
.dark .border-gray-200 {
  border-color: #23262f !important;
}

.dark .border-gray-700,
.dark .border-gray-800 {
  border-color: #23262f !important;
}

.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800 {
  color: #b5b8c5 !important;
}

.dark .text-gray-400 {
  color: #8b8fa3 !important;
}

.dark .text-gray-200 {
  color: #e5e7eb !important;
}

.dark .bg-blue-50 {
  background-color: #23262f !important;
}

.dark .bg-gray-50 {
  background-color: #181a20 !important;
}

.dark .bg-blue-100 {
  background-color: #23262f !important;
}

.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

.dark .bg-blue-900\/30 {
  background-color: #23262f !important;
}

.dark .hover\:bg-gray-100:hover {
  background-color: #23262f !important;
}

.dark .hover\:bg-blue-50:hover {
  background-color: #23262f !important;
}

.dark .hover\:bg-blue-700:hover {
  background-color: #1e40af !important;
}

.dark .hover\:bg-blue-600:hover {
  background-color: #2563eb !important;
}

.dark .hover\:bg-blue-900\/30:hover {
  background-color: #23262f !important;
}

.dark .hover\:bg-gray-800:hover {
  background-color: #23262f !important;
}

.dark .bg-gradient-to-r {
  background-image: linear-gradient(90deg, #181a20 0%, #23262f 100%) !important;
}

.dark .bg-gradient-to-br {
  background-image: linear-gradient(135deg, #23262f 0%, #181a20 100%) !important;
}

.dark .rounded-lg, .dark .rounded-xl {
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.5);
}

.dark .shadow-xl, .dark .shadow-sm {
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.7);
}

.dark .hover\:border-blue-500:hover {
  border-color: #60a5fa !important;
}

.dark .hover\:border-blue-400:hover {
  border-color: #38bdf8 !important;
}

.dark .hover\:underline:hover {
  color: #60a5fa !important;
}

.dark input, .dark textarea {
  background-color: #23262f;
  color: #e5e7eb;
  border-color: #23262f;
}

.dark input:focus, .dark textarea:focus {
  border-color: #60a5fa;
}

.dark .bg-white\/90 {
  background-color: #23262fcc !important;
}

.dark .bg-gray-900\/90 {
  background-color: #181a20cc !important;
}

.dark .bg-gray-900 {
  background-color: #181a20 !important;
}

.dark .text-blue-600 {
  color: #60a5fa !important;
}

.dark .text-blue-400 {
  color: #38bdf8 !important;
}

.dark .text-blue-500 {
  color: #3b82f6 !important;
}

.dark .text-green-500 {
  color: #34d399 !important;
}

.dark .text-indigo-400 {
  color: #818cf8 !important;
}

.dark .bg-indigo-600 {
  background-color: #6366f1 !important;
}

.dark .bg-blue-500 {
  background-color: #3b82f6 !important;
}

.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

.dark .bg-blue-400 {
  background-color: #60a5fa !important;
}

.dark .bg-indigo-400 {
  background-color: #818cf8 !important;
}

.dark .bg-indigo-900 {
  background-color: #312e81 !important;
}

.dark .bg-blue-900 {
  background-color: #1e3a8a !important;
}

.dark .bg-gray-800 {
  background-color: #23262f !important;
}

.dark .bg-gray-900 {
  background-color: #181a20 !important;
}

.dark .bg-gray-100 {
  background-color: #23262f !important;
}

.dark .bg-gray-200 {
  background-color: #23262f !important;
}

.dark .border-gray-800 {
  border-color: #23262f !important;
}

.dark .border-gray-100 {
  border-color: #23262f !important;
}

.dark .border-gray-700 {
  border-color: #23262f !important;
}

.dark .border-gray-200 {
  border-color: #23262f !important;
}

/* Mono font for accents */
.font-geist-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

section {
  opacity: 0; /* Start with 0 opacity for fade-in effect */
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Enhance focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Input focus for dark mode */
.dark input:focus, .dark textarea:focus {
  border-color: #3b82f6;
}

/* Card hover effects */
.course-item:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Hero section gradient background */
.hero-gradient {
  background-image: linear-gradient(135deg, #3b82f680 0%, #6366f180 100%);
  opacity: 0.1;
}

/* Service card transitions */
.group:hover svg {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Better button press animation */
button:active, a[href]:active {
  transform: scale(0.98);
}

/* Form enhancements */
input::placeholder, textarea::placeholder {
  color: #9ca3af;
}

.dark input::placeholder, .dark textarea::placeholder {
  color: #6b7280;
}

/* Link underline animation */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Add styles for multi-image carousel */
#carousel-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 400px; /* Adjust as needed */
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 50%; /* Center the images */
  transform: translateX(-50%);
  width: 80%; /* Adjust for smaller images in the background */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, width 0.5s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  width: 100%;
  z-index: 1;
}

.carousel-image.prev,
.carousel-image.next {
  opacity: 0.7;
  z-index: 0;
}

.carousel-image.prev {
  transform: translateX(-60%) scale(0.9);
}

.carousel-image.next {
  transform: translateX(-40%) scale(0.9);
}

/* Utility to hide placeholder content */
.placeholder-hidden {
  display: none !important;
}

/* 9:16 aspect ratio utility */
.aspect-9-16 {
  position: relative;
}
.aspect-9-16::before {
  content: "";
  display: block;
  padding-top: 177.78%;
}
.aspect-9-16 > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* =====================================================
   无 JS 降级：当 JS 未加载时保证 section 内容可见
   ===================================================== */
/* 1. 无障碍降级：用户设置了减少动画时，跳过 opacity 动画 */
@media (prefers-reduced-motion: reduce) {
  section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2. JS 类标记降级：仅在 JS 启用时才对 section 应用 opacity:0 起始状态 */
/* 在 script.js 顶部会给 <html> 添加 js-enabled class */
/* 若无此 class（JS 未运行），section 保持默认可见 */
html:not(.js-enabled) section {
  opacity: 1 !important;
  transform: none !important;
}

/* =====================================================
   多语言降级：无 JS 时只显示中文；JS 启用后由 script.js 控制
   ===================================================== */
.lang-en,
.lang-ja {
  display: none;
}

/* =====================================================
   私有化部署页面色彩补丁
   tailwind.min.css 预构建时未包含的绿/青/蓝绿色系工具类
   ===================================================== */

/* 背景色 */
.bg-teal-100 { background-color: #ccfbf1; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-green-200 { background-color: #bbf7d0; }

/* 文字色 */
.text-green-900 { color: #14532d; }
.text-teal-600 { color: #0d9488; }
.text-teal-500 { color: #14b8a6; }
.text-teal-400 { color: #2dd4bf; }
.text-emerald-600 { color: #059669; }
.text-emerald-500 { color: #10b981; }
.text-emerald-400 { color: #34d399; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-400 { color: #22d3ee; }

/* 边框色 */
.border-teal-200 { border-color: #99f6e4; }
.border-teal-700 { border-color: #0f766e; }

/* 悬停背景 */
.hover\:bg-green-50:hover { background-color: #f0fdf4; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-teal-700:hover { background-color: #0f766e; }

/* 渐变 via / to 色值（gradient stops） */
.via-emerald-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #065f46, var(--tw-gradient-to, rgb(6 95 70 / 0));
}
.to-teal-900 { --tw-gradient-to: #134e4a; }
.to-teal-600 { --tw-gradient-to: #0d9488; }
.to-teal-500 { --tw-gradient-to: #14b8a6; }
.to-emerald-100 { --tw-gradient-to: #d1fae5; }
.to-cyan-100 { --tw-gradient-to: #cffafe; }
.to-cyan-500 { --tw-gradient-to: #06b6d4; }
.to-green-500 { --tw-gradient-to: #22c55e; }

/* 渐变 from 色值 */
.from-green-400 {
  --tw-gradient-from: #4ade80;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(74 222 128 / 0));
}
.from-teal-50 {
  --tw-gradient-from: #f0fdfa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 253 250 / 0));
}
.from-teal-400 {
  --tw-gradient-from: #2dd4bf;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(45 212 191 / 0));
}
.from-emerald-400 {
  --tw-gradient-from: #34d399;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(52 211 153 / 0));
}
.from-cyan-400 {
  --tw-gradient-from: #22d3ee;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(34 211 238 / 0));
}

/* 深色模式 — 图标圆形背景 (dark:bg-*-900/30) */
.dark [class*="dark:bg-green-900"]   { background-color: rgba(20, 83, 45, 0.3) !important; }
.dark [class*="dark:bg-teal-900"]    { background-color: rgba(19, 78, 74, 0.3) !important; }
.dark [class*="dark:bg-emerald-900"] { background-color: rgba(6, 78, 59, 0.3) !important; }
.dark [class*="dark:bg-cyan-900"]    { background-color: rgba(22, 78, 99, 0.3) !important; }

/* 深色模式 — 文字色 */
.dark [class*="dark:text-teal-4"]    { color: #2dd4bf !important; }
.dark [class*="dark:text-emerald-4"] { color: #34d399 !important; }
.dark [class*="dark:text-cyan-4"]    { color: #22d3ee !important; }
.dark [class*="dark:text-green-4"]   { color: #4ade80 !important; }

/* 深色模式 — 边框 */
.dark [class*="dark:border-teal-7"]  { border-color: #0f766e !important; }
.dark [class*="dark:border-green-7"] { border-color: #15803d !important; }

/* 深色模式 — 价格卡片渐变 (dark:from-*-900/20, dark:to-*-800/20) */
.dark [class*="dark:from-green-900"] {
  --tw-gradient-from: rgba(20, 83, 45, 0.2);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 83, 45, 0));
}
.dark [class*="dark:to-emerald-800"] { --tw-gradient-to: rgba(6, 95, 70, 0.2); }
.dark [class*="dark:from-teal-900"] {
  --tw-gradient-from: rgba(19, 78, 74, 0.2);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(19, 78, 74, 0));
}
.dark [class*="dark:to-cyan-800"] { --tw-gradient-to: rgba(21, 94, 117, 0.2); }