@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --ink: #050916;
  --panel: #0a1020;
  --panel-raised: #10182a;
  --line: rgba(174, 194, 255, 0.16);
  --muted: #9aa7c3;
  --electric: #4c6fff;
  --violet: #8d72ff;
  --paper: #f5f7ff;
  --detail-shadow: 0 22px 52px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: "Space Grotesk", sans-serif !important;
  line-height: 1.65;
}

body *:not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: "Space Grotesk", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(119, 141, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 141, 255, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.animated-bg { opacity: 0.35 !important; animation: none !important; }

/* Floating header dock shared by the product detail templates. */
.header,
body > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.header-content,
.header-container,
body > header > .container > nav,
body > header > nav {
  width: min(calc(100% - 40px), 1280px) !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 7px 10px 7px 17px !important;
  position: relative !important;
  border: 1px solid rgba(176, 193, 255, 0.2) !important;
  border-radius: 16px 16px 0 16px !important;
  background: rgba(8, 14, 30, 0.82) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) !important;
}

.header-content,
.header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

.header .logo,
body > header .logo {
  color: var(--paper) !important;
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: 0.04em;
}

.header .logo-text,
.header .logo-text span,
body > header .logo-text,
body > header .logo-text span {
  color: var(--paper) !important;
}

.header .logo-text span,
body > header .logo-text span { color: var(--electric) !important; }

.header .logo img,
body > header .logo img { max-height: 30px !important; width: auto; }

.header .nav-links,
body > header nav ul,
body > header nav .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 0 0 auto !important;
  padding: 4px !important;
  list-style: none !important;
  border: 1px solid rgba(176, 193, 255, 0.12) !important;
  border-radius: 11px 11px 0 11px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.header .nav-links a,
body > header nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px;
  padding: 9px 11px !important;
  border-radius: 7px 7px 0 7px !important;
  color: #adb9d2 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease !important;
}

.header .nav-links a:hover,
body > header nav a:hover {
  background: rgba(105, 126, 255, 0.16) !important;
  color: var(--paper) !important;
  transform: translateY(-2px);
}

.header .nav-links .hero-btn,
.header .nav-links .btn,
body > header nav .btn,
body > header nav .hero-btn {
  margin-left: 5px !important;
  border: 0 !important;
  border-radius: 9px 9px 0 9px !important;
  background: linear-gradient(120deg, #4c6fff, #8067ef) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(72, 96, 231, 0.27) !important;
}

.detail-theme-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(176, 193, 255, 0.2);
  border-radius: 8px 8px 0 8px;
  background: transparent;
  color: #b8c3de;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.detail-theme-toggle:hover,
.detail-theme-toggle:focus-visible {
  background: rgba(105, 126, 255, 0.14);
  color: var(--paper);
  outline: 0;
  transform: translateY(-2px);
}

.detail-menu-toggle {
  display: none;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(176, 193, 255, 0.2);
  border-radius: 8px 8px 0 8px;
  background: transparent;
  color: #b8c3de;
  cursor: pointer;
}

.hero {
  min-height: 0 !important;
  padding: 96px 0 64px !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, rgba(5, 9, 22, 0.98) 0%, rgba(5, 9, 22, 0.82) 45%, rgba(5, 9, 22, 0.55) 100%) !important;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: linear-gradient(rgba(119, 141, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 141, 255, 0.07) 1px, transparent 1px) !important;
  background-size: 68px 68px !important;
  mask-image: linear-gradient(to right, black, transparent 72%) !important;
}

.hero-container,
.hero .container {
  position: relative !important;
  z-index: 1 !important;
  width: min(calc(100% - 40px), 1180px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

.hero-container::before,
.hero .container::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--electric);
}

.hero-icon {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 22px !important;
  place-items: center !important;
  border: 1px solid rgba(176, 193, 255, 0.28) !important;
  border-radius: 12px 12px 0 12px !important;
  background: rgba(76, 111, 255, 0.13) !important;
  color: #aebcff !important;
  font-size: 1.45rem !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

.hero:has(.hero-icon) .hero-container::before { display: none !important; }

.hero h1 {
  max-width: 920px !important;
  margin: 0 0 18px !important;
  color: var(--paper) !important;
  font-size: clamp(2.9rem, 6vw, 5.9rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.94 !important;
  text-wrap: balance;
}

.hero p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #c7d0e5 !important;
  font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
  line-height: 1.7 !important;
  text-wrap: balance;
}

section { padding: 68px 0 !important; }

.features,
.benefits,
.use-cases,
.integrations,
.stats,
.demo-section,
.showcase,
.workflow-section {
  background: transparent !important;
}

.features-container,
.benefits-container,
.use-cases-container,
.stats-container,
.integration-container,
.demo-container,
.content-container,
.section-container,
.container {
  width: min(calc(100% - 40px), 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header,
.section-header1,
.section-title {
  max-width: 850px !important;
  margin: 0 0 48px !important;
  text-align: left !important;
}

.section-header h2,
.section-header1 h2,
.section-title h2,
section > h2 {
  margin-bottom: 15px !important;
  color: var(--paper) !important;
  font-size: clamp(2.25rem, 4.5vw, 4.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

.section-header h2::before,
.section-header1 h2::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 3px;
  margin: 0 15px 0.18em 0;
  background: var(--electric);
  vertical-align: middle;
}

.section-header p,
.section-header1 p,
.section-title p {
  max-width: 760px !important;
  color: var(--muted) !important;
  font-size: 1.04rem !important;
  line-height: 1.7 !important;
  text-wrap: balance;
}

/* Remove the template-era gradient type and decorative underlines. */
.hero h1,
.section-header h2,
.section-header1 h2,
section > h2 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.section-header h2::after,
.section-header1 h2::after,
.section-title h2::after,
.footer h3::after,
footer h3::after {
  content: none !important;
  display: none !important;
}

.hero h1,
.hero p,
.hero .btn,
.hero .hero-btn {
  animation: none !important;
  opacity: 1 !important;
}

.features-grid,
.benefits-grid,
.use-cases-grid,
.stats-grid,
.integrations-grid {
  gap: 16px !important;
}

.feature-card,
.benefit-card,
.use-case-card,
.feature-item,
.stat-card,
.benefit-item,
.integration-card,
.step-card,
.demo-card,
.advantage-card,
.pricing-card,
.step,
.process-step,
.workflow-step {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px 12px 0 12px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  color: var(--paper) !important;
  transition: border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease !important;
}

.feature-card,
.benefit-card,
.use-case-card,
.feature-item,
.advantage-card,
.pricing-card,
.step,
.process-step,
.workflow-step { padding: 24px !important; }

.stat-card,
.benefit-item { padding: 24px !important; }

.feature-card::before,
.feature-card::after,
.benefit-card::before,
.use-case-card::before,
.stat-card::before { display: none !important; }

.feature-card:hover,
.benefit-card:hover,
.use-case-card:hover,
.feature-item:hover,
.stat-card:hover,
.benefit-item:hover,
.integration-card:hover,
.step-card:hover,
.demo-card:hover,
.advantage-card:hover,
.pricing-card:hover,
.step:hover,
.process-step:hover,
.workflow-step:hover {
  border-color: rgba(114, 137, 255, 0.72) !important;
  background: var(--panel-raised) !important;
  box-shadow: var(--detail-shadow) !important;
  transform: translateY(-5px) !important;
}

.feature-card h3,
.benefit-card h3,
.use-case-card h3,
.feature-item h3,
.feature-item h4,
.benefit-item h3,
.integration-card h3,
.advantage-card h3,
.platform-text h3,
.feature-content h3,
.pricing-card h3,
.step h3,
.process-step h3,
.workflow-step h3 {
  margin-bottom: 10px !important;
  color: var(--paper) !important;
  font-size: 1.25rem !important;
}

.feature-card p,
.benefit-card p,
.use-case-card p,
.feature-item p,
.benefit-item p,
.integration-card p,
.stat-label,
.advantage-card p,
.platform-text p,
.pricing-card p,
.step p,
.process-step p,
.workflow-step p {
  color: var(--muted) !important;
  line-height: 1.65 !important;
}

.feature-icon,
.use-case-icon,
.benefit-icon,
.integration-icon,
.advantage-icon {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 0 18px !important;
  place-items: center !important;
  border: 1px solid rgba(126, 149, 255, 0.3) !important;
  border-radius: 9px 9px 0 9px !important;
  background: rgba(81, 105, 235, 0.12) !important;
  color: #aebcff !important;
  font-size: 1.15rem !important;
  -webkit-text-fill-color: currentColor !important;
}

.feature-icon::before,
.feature-icon::after,
.use-case-icon::before,
.use-case-icon::after,
.advantage-icon::before,
.advantage-icon::after { display: none !important; }

.advantage-icon {
  margin: 0 0 18px !important;
  border-radius: 9px 9px 0 9px !important;
}

.platform-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr) !important;
  gap: 32px !important;
  align-items: start !important;
}

.platform-image {
  max-height: 390px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px 12px 0 12px !important;
  box-shadow: none !important;
}

.platform-image img {
  width: 100% !important;
  height: 390px !important;
  object-fit: cover !important;
  transform: none !important;
}

.use-case-header {
  padding: 20px !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(76, 111, 255, 0.12) !important;
  color: var(--paper) !important;
}

.use-case-header::before { display: none !important; }
.use-case-header i {
  color: #aebcff !important;
  animation: none !important;
}
.use-case-body { padding: 20px !important; }
.use-case-list li { border-color: var(--line) !important; }

.pricing,
section[style] {
  background: transparent !important;
  color: var(--paper) !important;
}

.pricing-card.popular { background: var(--panel-raised) !important; }
.popular-tag,
.step-number {
  border-radius: 7px 7px 0 7px !important;
  background: var(--electric) !important;
}

.stat-number,
.benefit-number {
  margin-bottom: 6px !important;
  color: #8fa4ff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

.btn,
.hero-btn,
.cta-btn,
.back-btn,
.cta-button,
button[type="submit"] {
  min-height: 44px;
  padding: 11px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 10px 10px 0 10px !important;
  background: linear-gradient(120deg, #4c6fff, #8067ef) !important;
  color: #fff !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
}

.btn:hover,
.hero-btn:hover,
.cta-btn:hover,
.back-btn:hover,
.cta-button:hover,
button[type="submit"]:hover {
  box-shadow: 0 12px 25px rgba(72, 96, 231, 0.35) !important;
  filter: brightness(1.07);
  transform: translateY(-3px) !important;
}

.cta-section,
.cta {
  border-top: 1px solid var(--line) !important;
  background: linear-gradient(115deg, #0e1a50, #282066 55%, #100f3b) !important;
}

.cta-container,
.cta .container {
  width: min(calc(100% - 40px), 1000px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.cta-section h2,
.cta h2 { color: var(--paper) !important; text-wrap: balance; }
.cta-section p,
.cta p { color: #c9d3f5 !important; text-wrap: balance; }

.footer,
footer {
  border-top: 1px solid var(--line) !important;
  background: #050916 !important;
  color: var(--paper) !important;
}

.footer-container,
.footer .container,
footer .container {
  width: min(calc(100% - 40px), 1180px) !important;
  margin: 0 auto !important;
}

.footer p,
.footer a,
footer p,
footer a { color: var(--muted) !important; }
.footer h3,
footer h3 { color: var(--paper) !important; }

body.detail-theme-ready .detail-reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.detail-theme-ready .detail-reveal.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

.detail-scroll-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #5877ff, #a280ff);
  box-shadow: 0 0 14px rgba(112, 128, 255, 0.8);
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #edf1f8;
  --panel: #ffffff;
  --panel-raised: #f6f8fc;
  --line: rgba(35, 54, 97, 0.16);
  --muted: #52617d;
  --paper: #111b34;
  --detail-shadow: 0 18px 40px rgba(36, 54, 96, 0.12);
}

html[data-theme="light"] .header-content,
html[data-theme="light"] .header-container,
html[data-theme="light"] body > header > .container > nav,
html[data-theme="light"] body > header > nav,
html[data-theme="light"] .header .nav-links,
html[data-theme="light"] body > header nav ul,
html[data-theme="light"] body > header nav .nav-links {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(36, 54, 96, 0.1) !important;
}

html[data-theme="light"] .header .nav-links a,
html[data-theme="light"] body > header nav a,
html[data-theme="light"] .detail-theme-toggle { color: #22304d !important; }

html[data-theme="light"] .hero {
  background: linear-gradient(90deg, rgba(242, 246, 255, 0.97) 0%, rgba(242, 246, 255, 0.9) 44%, rgba(242, 246, 255, 0.7) 100%) !important;
}

html[data-theme="light"] .hero p { color: #4f5f7f !important; }
html[data-theme="light"] .cta-section,
html[data-theme="light"] .cta { background: linear-gradient(115deg, #dce5ff, #edf2ff 55%, #dce8ff) !important; }
html[data-theme="light"] .cta-section p,
html[data-theme="light"] .cta p { color: #52617d !important; }
html[data-theme="light"] .footer,
html[data-theme="light"] footer { background: #f8faff !important; }

@media (max-width: 900px) {
  .header-content,
  .header-container,
  body > header > .container > nav,
  body > header > nav { width: min(calc(100% - 24px), 1280px) !important; }

  .header .nav-links,
  body > header nav ul,
  body > header nav .nav-links { gap: 0 !important; }

  .header .nav-links a,
  body > header nav a { padding: 8px !important; font-size: 0.7rem !important; }

  .hero { min-height: auto !important; padding: 86px 0 54px !important; }
  .hero-container,
  .hero .container,
  .features-container,
  .benefits-container,
  .use-cases-container,
  .stats-container,
  .integration-container,
  .demo-container,
  .content-container,
  .section-container,
  .container { width: min(calc(100% - 32px), 1180px) !important; }

  section { padding: 52px 0 !important; }

  .section-header,
  .section-header1,
  .section-title { margin-bottom: 30px !important; }

  .platform-intro { gap: 24px !important; }
}

@media (max-width: 1100px) {
  .header-content > nav,
  .header-container > nav { display: none !important; }

  .detail-theme-toggle { margin-left: auto; }

  .header .nav-links,
  body > header nav ul,
  body > header nav .nav-links { display: none !important; }

  .detail-menu-toggle,
  body > header .mobile-menu-btn {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    margin-left: 4px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(176, 193, 255, 0.2) !important;
    border-radius: 8px 8px 0 8px !important;
    background: transparent !important;
    color: #b8c3de !important;
  }

  .header-content.detail-nav-open .nav-links,
  .header-container.detail-nav-open > nav,
  .header-container.detail-nav-open nav ul,
  body > header > .container > nav.detail-nav-open ul,
  body > header > nav.detail-nav-open .nav-links {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    right: 0 !important;
    display: flex !important;
    min-width: 220px !important;
    padding: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px 12px 0 12px !important;
    background: rgba(6, 10, 23, 0.97) !important;
    box-shadow: var(--detail-shadow) !important;
  }

  .header-container.detail-nav-open > nav {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    right: 0 !important;
    width: 220px !important;
  }

  .header-container.detail-nav-open nav ul {
    position: static !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .header-content.detail-nav-open .nav-links a,
  .header-container.detail-nav-open nav ul a,
  body > header > .container > nav.detail-nav-open ul a,
  body > header > nav.detail-nav-open .nav-links a { width: 100% !important; }

  html[data-theme="light"] .header-content.detail-nav-open .nav-links,
  html[data-theme="light"] .header-container.detail-nav-open > nav,
  html[data-theme="light"] body > header > .container > nav.detail-nav-open ul,
  html[data-theme="light"] body > header > nav.detail-nav-open .nav-links {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}

@media (max-width: 640px) {
  .header-content,
  .header-container,
  body > header > .container > nav,
  body > header > nav { min-height: 58px !important; padding: 7px 8px 7px 12px !important; }

  .header .logo img,
  body > header .logo img { max-height: 24px !important; }

  .hero h1 { font-size: clamp(2.55rem, 12vw, 4rem) !important; }
  .hero p br,
  .section-header p br,
  .section-header1 p br { display: none; }
  .features-grid,
  .benefits-grid,
  .use-cases-grid,
  .stats-grid,
  .integrations-grid { grid-template-columns: 1fr !important; }
  .feature-card,
  .benefit-card,
  .use-case-card,
  .feature-item,
  .advantage-card,
  .pricing-card,
  .step,
  .process-step,
  .workflow-step { padding: 21px !important; }

  .platform-intro { grid-template-columns: 1fr !important; }
  .platform-image { max-height: 300px !important; }
  .platform-image img { height: 300px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .detail-scroll-progress { display: none; }
}