@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;600;700&family=Noto+Serif+SC:wght@500;700;900&display=swap");

:root {
  --primary: #1e76b9 !important;
  --primary-dark: #0f5ea8 !important;
  --primary-light: #6aa7d2 !important;
  --orange-primary: #1e76b9 !important;
  --orange-dark: #0f5ea8 !important;
  --orange-light: #6aa7d2 !important;
  --orange-bg: #e8f4f7 !important;
  --bg-orange-light: #e8f4f7 !important;
  --bg-white: #fbfdfb !important;
  --bg-light: #eef1ed !important;
  --bg-section: #f7faf9 !important;
  --ink: #152532;
  --muted: #607382;
  --accent: #1e76b9;
  --accent-dark: #0f5ea8;
  --survey-yellow: #f4b846;
  --paper: #fbf7ee;
  --concrete: #eef1ed;
  --line: rgba(21, 37, 50, 0.12);
  --text-primary: #152532 !important;
  --text-secondary: #536878 !important;
  --text-light: #8da0ab !important;
  --gray-text: #536878 !important;
  --gray-light: #8da0ab !important;
  --dark: #152532 !important;
  --border-color: rgba(21, 37, 50, 0.12) !important;
}

html,
body {
  font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  color: var(--ink) !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(rgba(30,118,185,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,118,185,0.055) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbfb 0%, #edf3f2 48%, #e6eee9 100%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.product-promo-container {
  font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  color: var(--ink) !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.hero-centered h1,
.section-title,
.section-header h2,
.product-promo-container h1,
.product-promo-container h2 {
  color: var(--ink) !important;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.018em !important;
}

p,
.hero p,
.hero-text p,
.hero-centered p,
.hero-description,
.hero-subtitle,
.subtitle,
.section-desc,
.feature-card p,
.why-item p,
.pain-card p,
.workflow-step p,
.product-promo-container p {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.hero h1,
.hero-centered h1,
.product-promo-container h1 {
  font-size: clamp(2.4rem, 5vw, 4.6rem) !important;
  line-height: 1.12 !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.hero p,
.hero-centered p {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.hero,
.hero-centered,
.why-us,
.features,
.section,
.section-alt,
.video-demo,
.pain-points,
.workflow,
.specs,
.highlights,
.cta,
.product-promo-container > section {
  background:
    linear-gradient(rgba(30,118,185,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,118,185,0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(251,253,251,0.97) 0%, rgba(238,241,237,0.92) 100%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.hero,
.hero-centered {
  padding-top: 104px !important;
  padding-bottom: 86px !important;
}

.hero-content,
.section .container,
.why-us .container,
.features .container,
.cta .container,
.product-promo-container .container {
  position: relative;
  z-index: 1;
}

.hero-logo {
  filter: none !important;
  display: block !important;
  width: auto !important;
  max-width: min(360px, 76vw) !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero .animate-fade-in-up,
.hero-centered .animate-fade-in-up,
.product-promo-container .animate-fade-in-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero h1 span,
.hero-centered h1 span,
.section-tag,
.section-title span,
.text-orange-500,
.text-cyan-500,
.feature-icon,
.why-icon,
.pain-icon,
.step-number,
.spec-value,
.highlight-number {
  color: var(--accent-dark) !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-btn,
.btn-primary,
.cta .hero-btn,
a.hero-btn,
button.hero-btn,
.product-promo-container .bg-slate-900 {
  background: var(--accent-dark) !important;
  color: #fff !important;
  border: 1px solid rgba(15,94,168,0.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(15,94,168,0.22) !important;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.hero-btn:hover,
.btn-primary:hover,
.cta .hero-btn:hover,
a.hero-btn:hover,
.product-promo-container .bg-slate-900:hover {
  background: #0b4d87 !important;
  box-shadow: 0 18px 40px rgba(15,94,168,0.28) !important;
}

.product-promo-container .bg-white,
.selling-point,
.feature-card,
.why-item,
.pain-card,
.workflow-step,
.spec-item,
.highlight-item,
.gallery-item,
.video-card,
.platform-card,
.tool-card,
.module-card,
.stats-card,
.demo-card {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(21,37,50,0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 42px rgba(21,37,50,0.08) !important;
  color: var(--ink) !important;
}

.selling-point:hover,
.feature-card:hover,
.why-item:hover,
.pain-card:hover,
.workflow-step:hover,
.gallery-item:hover,
.video-card:hover,
.tool-card:hover,
.module-card:hover {
  border-color: rgba(30,118,185,0.34) !important;
  box-shadow: 0 22px 56px rgba(21,37,50,0.12) !important;
}

.hero-image img,
.gallery-item img,
.video-card,
.product-promo-container img {
  border-radius: 12px !important;
}

.product-promo-container img[alt*="Logo"],
.product-promo-container .h-14 {
  width: auto !important;
  max-width: min(320px, 72vw) !important;
  height: auto !important;
  object-fit: contain !important;
}

.hero-image img,
.gallery-item img {
  box-shadow: 0 18px 52px rgba(21,37,50,0.12) !important;
}

.selling-point-icon,
.feature-icon,
.why-icon,
.pain-icon,
.product-promo-container .iconify {
  color: var(--accent-dark) !important;
}

.video-badge,
.tag,
.badge,
.hero-sub,
#version-tag,
.feature-tag,
.tool-tag,
.product-promo-container .rounded-full {
  background: rgba(30,118,185,0.08) !important;
  border-color: rgba(30,118,185,0.14) !important;
  color: var(--accent-dark) !important;
}

.problem {
  background: rgba(244,184,70,0.13) !important;
  border-color: rgba(244,184,70,0.28) !important;
  color: #7a5410 !important;
}

.solution {
  background: rgba(30,118,185,0.08) !important;
  border-color: rgba(30,118,185,0.18) !important;
  color: var(--accent-dark) !important;
}

.cta {
  background:
    linear-gradient(rgba(30,118,185,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,118,185,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #fbf7ee 0%, #f8fbfb 58%, #e8f4f7 100%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.side-nav-line {
  background: rgba(21,37,50,0.16) !important;
}

.side-nav-progress {
  background: linear-gradient(to bottom, var(--accent-dark), var(--survey-yellow)) !important;
}

.side-nav-item .nav-dot {
  background: rgba(21,37,50,0.20) !important;
  border-color: rgba(255,255,255,0.9) !important;
}

.side-nav-item.active .nav-dot,
.side-nav-item:hover .nav-dot {
  background: var(--accent-dark) !important;
}

.side-nav-item .nav-label {
  color: var(--ink) !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(21,37,50,0.10) !important;
  box-shadow: 0 10px 26px rgba(21,37,50,0.08) !important;
}

.product-promo-container .text-slate-900 {
  color: var(--ink) !important;
}

.product-promo-container .text-slate-500,
.product-promo-container .text-slate-400,
.product-promo-container .text-slate-300 {
  color: var(--muted) !important;
}

.product-promo-container .bg-slate-50,
.product-promo-container .bg-orange-100,
.product-promo-container .bg-cyan-50 {
  background: rgba(232,244,247,0.72) !important;
}

.product-promo-container .border-slate-100,
.product-promo-container .border-slate-200 {
  border-color: rgba(21,37,50,0.12) !important;
}

.product-promo-container .shadow-sm,
.product-promo-container .shadow-xl,
.product-promo-container .shadow-2xl {
  box-shadow: 0 14px 42px rgba(21,37,50,0.08) !important;
}

.product-promo-container [class*="blur-"],
.product-promo-container [class*="rounded-full"][class*="absolute"] {
  opacity: 0.18 !important;
}

.product-promo-container .drop-shadow-2xl {
  filter: drop-shadow(0 20px 34px rgba(21,37,50,0.12)) !important;
}

@media (max-width: 768px) {
  .hero,
  .hero-centered {
    padding-top: 86px !important;
    padding-bottom: 64px !important;
  }

  .hero-content {
    gap: 38px !important;
  }

  .hero h1,
  .hero-centered h1,
  .product-promo-container h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.16 !important;
  }

  .hero-logo {
    max-width: min(260px, 72vw) !important;
  }

  .product-promo-container h1 .flex {
    flex-direction: column !important;
    gap: 0.35rem !important;
  }

  .product-promo-container img[alt*="Logo"],
  .product-promo-container .h-14 {
    max-width: min(240px, 68vw) !important;
  }
}