:root {
  --page-max: 1440px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.visual-lock {
  margin: 0;
  min-width: 1440px;
  background: #fff;
  color: #111318;
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

.visual-stage {
  position: relative;
  width: var(--page-max);
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

.visual-source {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.visual-hero {
  position: absolute;
  left: 0;
  top: var(--hero-top);
  width: 100%;
  height: var(--hero-height);
  border: 0;
  display: block;
  background: #0a0b0d;
}

.visual-hero.home-hero {
  --hero-top: 0;
  --hero-height: 900px;
}

.visual-hero.ai-hero {
  --hero-top: 78px;
  --hero-height: 900px;
}

.home-hero-stack {
  position: absolute;
  left: 0;
  top: 78px;
  width: 1440px;
  height: 1587px;
  overflow: hidden;
  background: #131418;
}

.home-hero-stack .visual-hero,
.home-hero-stack .visual-carousel {
  left: 0;
  width: 1440px;
}

.home-hero-stack .visual-hero {
  z-index: 1;
}

.home-hero-stack .visual-carousel {
  z-index: 2;
}

.visual-hero-copy {
  position: absolute;
  z-index: 4;
  color: #fff;
  pointer-events: none;
}

.visual-hero-copy h1,
.visual-hero-copy p {
  margin: 0;
  letter-spacing: 0;
}

.visual-hero-copy h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.18;
}

.visual-hero-copy p {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

.home-hero-copy {
  top: 292px;
  left: 0;
  width: 1440px;
  text-align: center;
}

.ai-hero-copy {
  top: 386px;
  left: 116px;
  width: 720px;
  text-align: left;
}

.visual-carousel {
  position: absolute;
  top: 900px;
  height: 687px;
  overflow: hidden;
  background: #141519;
}

.visual-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.visual-carousel img.is-active {
  opacity: 1;
}

.visual-hotspot,
.visual-control {
  position: absolute;
  z-index: 8;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  text-indent: -9999px;
  cursor: pointer;
}

.visual-hotspot:focus-visible,
.visual-control:focus-visible {
  outline: 2px solid #0052ff;
  outline-offset: 2px;
}

.nav-home { left: 16.2%; top: 0.23%; width: 3.3%; height: 0.35%; }
.nav-services { left: 20.7%; top: 0.23%; width: 4.9%; height: 0.35%; }
.nav-ai { left: 26.9%; top: 0.23%; width: 5.9%; height: 0.35%; }
.nav-cases { left: 34.1%; top: 0.23%; width: 4.6%; height: 0.35%; }
.nav-partners { left: 40.2%; top: 0.23%; width: 4.8%; height: 0.35%; }
.nav-support { left: 46.5%; top: 0.23%; width: 4.8%; height: 0.35%; }

.carousel-prev { left: 89.1%; top: 21.34%; width: 2.4%; height: 2.1%; }
.carousel-next { left: 94.1%; top: 21.34%; width: 2.4%; height: 2.1%; }
.carousel-dot-1 { left: 2.0%; top: 21.48%; width: 1.5%; height: 1.4%; }
.carousel-dot-2 { left: 3.7%; top: 21.48%; width: 1.5%; height: 1.4%; }
.carousel-dot-3 { left: 5.4%; top: 21.48%; width: 1.5%; height: 1.4%; }
.carousel-dot-4 { left: 7.1%; top: 21.48%; width: 1.5%; height: 1.4%; }

.home-contact-submit { left: 46.8%; top: 83.28%; width: 41.4%; height: 0.58%; }
.partners-contact-submit { left: 52.7%; top: 75.84%; width: 40.8%; height: 0.98%; }
.support-ticket-link { left: 56.4%; top: 33.25%; width: 16%; height: 1.1%; }
.support-submit { left: 62.0%; top: 70.8%; width: 29.3%; height: 1.18%; }
.case-page .nav-home,
.case-page .nav-services,
.case-page .nav-ai,
.case-page .nav-cases,
.case-page .nav-partners,
.case-page .nav-support {
  top: 24px;
  height: 36px;
}
.case-view-all { left: 81.7%; top: 35.52%; width: 9.1%; height: 1.45%; }
.case-footer-contact { left: 10.5%; top: 80.5%; width: 12.5%; height: 1.75%; }
.case-footer-cases { left: 23.5%; top: 80.5%; width: 14.2%; height: 1.75%; }

.visual-toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(18px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(10, 11, 13, 0.92);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.visual-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mobile-page {
  display: none;
}

@media (max-width: 767px) {
  body.visual-lock {
    min-width: 0;
    overflow-x: hidden;
    background: #fff;
    color: #111318;
  }

  .visual-stage {
    display: none;
  }

  .mobile-page {
    display: block;
    min-height: 100vh;
    background: #fff;
  }

  .mobile-page img,
  .mobile-page iframe {
    display: block;
    max-width: 100%;
  }

  .mobile-nav {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 68px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f5;
    background: rgba(255, 255, 255, 0.94);
    padding: 0 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #303642;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .mobile-menu {
    position: relative;
  }

  .mobile-menu summary {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #e1e5ec;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: #111318;
  }

  .mobile-menu summary span + span {
    margin-top: -12px;
  }

  .mobile-menu nav {
    position: absolute;
    top: 54px;
    right: 0;
    display: grid;
    width: min(280px, calc(100vw - 40px));
    gap: 4px;
    border: 1px solid #e1e5ec;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 18px 42px rgba(17, 19, 24, 0.12);
  }

  .mobile-menu nav a {
    min-height: 44px;
    border-radius: 6px;
    color: #111318;
    font-size: 15px;
    font-weight: 600;
    line-height: 44px;
    padding: 0 12px;
    text-decoration: none;
  }

  .mobile-menu nav a:hover,
  .mobile-menu nav a:focus-visible {
    background: #f4f6f9;
  }

  .mobile-main {
    padding-top: 68px;
  }

  .mobile-hero {
    overflow: hidden;
    background: #000;
  }

  .mobile-hero iframe {
    width: 100%;
    height: 430px;
    border: 0;
  }

  .mobile-hero--dark {
    background: #000;
  }

  .mobile-section {
    padding: 72px 20px;
  }

  .mobile-section--dark {
    background: #0a0b0d;
    color: #fff;
  }

  .mobile-section--soft {
    background: #f6f8fb;
  }

  .mobile-hero-copy {
    display: grid;
    min-height: 520px;
    align-content: center;
    background:
      radial-gradient(circle at 18% 20%, rgba(0, 82, 255, 0.06), transparent 34%),
      linear-gradient(135deg, #f8fbff 0%, #fff 56%, #fff8f4 100%);
  }

  .mobile-eyebrow {
    margin: 0 0 18px;
    color: #6f7784;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .mobile-section--dark .mobile-eyebrow {
    color: #a8acb3;
  }

  .mobile-section h1,
  .mobile-section h2,
  .mobile-scroll-list h2 {
    margin: 0;
    color: inherit;
    font-weight: 700;
    letter-spacing: 0;
  }

  .mobile-section h1 {
    font-size: 34px;
    line-height: 1.18;
  }

  .mobile-section h2,
  .mobile-scroll-list h2 {
    font-size: 26px;
    line-height: 1.25;
  }

  .mobile-section p,
  .mobile-scroll-list p {
    margin: 18px 0 0;
    color: #5d6573;
    font-size: 15px;
    line-height: 1.75;
  }

  .mobile-section--dark p {
    color: #b7beca;
  }

  .mobile-pill-link,
  .mobile-contact button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #0052ff;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-pill-link {
    width: fit-content;
    margin-top: 28px;
    padding: 0 22px;
  }

  .mobile-scroll-list {
    display: grid;
    grid-auto-columns: minmax(282px, 82vw);
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    background: #141519;
    padding: 24px 20px 28px;
    scroll-snap-type: x mandatory;
  }

  .mobile-scroll-list article {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #0a0b0d;
    color: #fff;
    scroll-snap-align: start;
  }

  .mobile-scroll-list img {
    width: 100%;
    height: 178px;
    object-fit: cover;
  }

  .mobile-scroll-list h2,
  .mobile-scroll-list p {
    padding-right: 18px;
    padding-left: 18px;
  }

  .mobile-scroll-list h2 {
    margin-top: 20px;
    font-size: 22px;
  }

  .mobile-scroll-list p {
    margin-bottom: 22px;
    color: #c7ceda;
  }

  .mobile-feature {
    display: grid;
    gap: 18px;
  }

  .mobile-feature + .mobile-feature {
    margin-top: 56px;
  }

  .mobile-feature img,
  .mobile-wide-image {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
  }

  .mobile-feature img {
    aspect-ratio: 16 / 10;
  }

  .mobile-wide-image {
    margin-bottom: 32px;
  }

  .mobile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .mobile-card-grid article,
  .mobile-case-list article,
  .mobile-support-grid article,
  .mobile-contact-cards article {
    border: 1px solid #edf0f5;
    border-radius: 8px;
    background: #fff;
    padding: 18px;
  }

  .mobile-card-grid img {
    width: 100%;
    border-radius: 6px;
  }

  .mobile-card-grid h3,
  .mobile-case-list h3,
  .mobile-support-grid h2 {
    margin: 14px 0 0;
    color: #111318;
    font-size: 18px;
  }

  .mobile-case-list {
    display: grid;
    gap: 18px;
    margin-top: 28px;
  }

  .mobile-case-list img {
    width: 100%;
    border-radius: 8px;
  }

  .mobile-steps {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
  }

  .mobile-steps li {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #edf0f5;
    color: #111318;
    font-size: 17px;
    font-weight: 700;
  }

  .mobile-steps span {
    color: #0052ff;
    font-size: 13px;
  }

  .mobile-stat-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #0f1116;
    color: #fff;
  }

  .mobile-stat-band div {
    padding: 24px 16px;
    background: #14161b;
    text-align: center;
  }

  .mobile-stat-band strong {
    display: block;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-stat-band span {
    display: block;
    margin-top: 8px;
    color: #9da5b2;
    font-size: 12px;
  }

  .mobile-logo-grid,
  .mobile-client-cloud {
    display: grid;
    gap: 1px;
    margin-top: 28px;
    background: #dfe3ea;
  }

  .mobile-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-client-cloud {
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-logo-grid img,
  .mobile-client-cloud img {
    width: 100%;
    height: 96px;
    background: #fff;
    padding: 18px;
    object-fit: contain;
  }

  .mobile-logo-grid img[src*="logo_das_w"] {
    background: #111318;
  }

  .mobile-contact {
    background: #f6f8fb;
  }

  .mobile-contact button {
    width: 100%;
    margin-top: 28px;
  }

  .mobile-support-grid {
    display: grid;
    gap: 14px;
  }

  .mobile-support-grid article > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 999px;
    background: #eef2f7;
    color: #5d6573;
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-support-grid a {
    display: inline-flex;
    margin-top: 20px;
    color: #0052ff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }

  .mobile-faq {
    border-top: 1px solid #dfe3ea;
  }

  .mobile-faq:last-child {
    border-bottom: 1px solid #dfe3ea;
  }

  .mobile-faq summary {
    min-height: 58px;
    color: #111318;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 58px;
  }

  .mobile-faq p {
    margin: 0 0 20px;
  }

  .mobile-contact-cards {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }

  .mobile-contact-cards strong,
  .mobile-contact-cards span {
    display: block;
  }

  .mobile-contact-cards strong {
    font-size: 16px;
  }

  .mobile-contact-cards span {
    margin-top: 8px;
    color: #5d6573;
    font-size: 14px;
  }

  .visual-toast {
    right: 18px;
    bottom: 18px;
    left: 18px;
    transform: translateY(18px);
    text-align: center;
  }

  .visual-toast.is-visible {
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  body.visual-lock {
    min-width: 1440px;
  }
}

@media (max-width: 767px) {
  body.visual-lock {
    min-width: 0;
  }
}