:root {
  --navy-950: #041026;
  --navy-900: #06152f;
  --navy-850: #081b39;
  --navy-800: #0a2144;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --cyan-400: #38bdf8;
  --cyan-300: #7dd3fc;
  --ink-900: #10213d;
  --ink-700: #34445e;
  --ink-600: #52627a;
  --ink-500: #718096;
  --line: #d9e2f0;
  --line-soft: #e8eef7;
  --surface: #ffffff;
  --surface-soft: #f4f7fc;
  --surface-blue: #edf4ff;
  --success: #0b8f65;
  --error: #d14343;
  --warning: #bf6f00;
  --header-height: 76px;
  --shell: 1240px;
  --shadow-sm: 0 8px 28px rgba(19, 40, 78, 0.08);
  --shadow-lg: 0 28px 90px rgba(2, 14, 36, 0.22);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-900);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

a,
button {
  -webkit-user-drag: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
}

::selection {
  color: #fff;
  background: var(--blue-600);
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: #fff;
  background: var(--blue-600);
  border-radius: 8px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.section-shell,
.header-shell {
  width: min(calc(100% - 64px), var(--shell));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 120px 0;
}

.section-light {
  background: var(--surface);
}

.section-soft {
  background: var(--surface-soft);
}

.section-dark {
  color: #fff;
  background: var(--navy-900);
}

.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 56px;
}

.section-heading h2,
.subsection-heading h2,
.about-copy h2,
.contact-copy h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.section-heading > p {
  margin-bottom: 4px;
  color: var(--ink-600);
  font-size: 17px;
  line-height: 1.8;
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 0.2s ease;
}

.button:hover svg {
  transform: translateX(3px);
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #2f6ff0, #1f55d5);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3), inset 0 1px rgba(255, 255, 255, 0.18);
}

.button-primary:hover {
  background: linear-gradient(135deg, #3d7bf5, #255edb);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.4), inset 0 1px rgba(255, 255, 255, 0.2);
}

.button-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(125, 211, 252, 0.45);
}

.button-outline {
  color: var(--blue-600);
  background: transparent;
  border-color: rgba(37, 99, 235, 0.28);
}

.button-large {
  min-height: 54px;
  padding: 14px 24px;
}

.button-small {
  min-height: 42px;
  padding: 9px 17px;
  font-size: 14px;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled,
.site-header.menu-active {
  background: rgba(4, 16, 38, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.header-shell {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  overflow: visible;
  fill: rgba(37, 99, 235, 0.1);
  stroke: var(--cyan-400);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.brand-mark path:nth-child(2) {
  fill: rgba(56, 189, 248, 0.2);
  stroke: #9ce5ff;
}

.brand-copy {
  display: grid;
  line-height: 1.1;
}

.brand-copy strong {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.brand-copy small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

html[lang="en"] .brand-copy small {
  display: none;
}

.desktop-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: right;
  gap: clamp(18px, 2.2vw, 34px);
}

.desktop-nav a,
.footer-nav a {
  position: relative;
  color: #fff
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.desktop-nav a::after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--cyan-400);
  content: "";
  transform: translateX(-50%);
  transition: width 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
  color: #fff;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
  width: 18px;
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
}

.language-switch {
  display: inline-flex;
  min-width: 70px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.38);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.language-option {
  transition: color 0.2s ease;
}

.language-option.is-active {
  color: #fff;
  font-weight: 800;
   font-size: 16px;
  font-weight: bold;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 5px auto;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 16, 38, 0.98);
}

.mobile-menu nav {
  display: grid;
  width: min(calc(100% - 48px), var(--shell));
  margin: auto;
  padding: 18px 0 28px;
}

.mobile-menu nav > a:not(.button) {
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-menu .button {
  margin-top: 18px;
  display: none;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  min-height: max(780px, 100svh);
  align-items: center;
  overflow: hidden;
  padding: calc(var(--header-height) + 72px) 0 94px;
}

.hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 35%, rgba(37, 99, 235, 0.22), transparent 37%), radial-gradient(circle at 8% 90%, rgba(56, 189, 248, 0.07), transparent 30%), linear-gradient(115deg, #06152f 5%, #071a38 55%, #041127 100%);
  content: "";
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(rgba(75, 130, 210, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 130, 210, 0.12) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 38%, #000 100%);
}

.hero-backdrop::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 21, 47, 0.55), transparent 50%), radial-gradient(ellipse at center, transparent 20%, rgba(4, 16, 38, 0.44) 100%);
  content: "";
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, 0.98fr);
  gap: 48px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 690px;
}

.eyebrow-dark {
  color: var(--cyan-300);
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  background: var(--cyan-400);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.1), 0 0 18px rgba(56, 189, 248, 0.8);
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(2.65rem, 5vw, 5rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.hero-subtitle {
  margin-bottom: 18px;
  color: #a8dcff;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hero-description {
  max-width: 660px;
  margin-bottom: 30px;
  color: rgba(226, 239, 255, 0.69);
  font-size: 17px;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 36px;
  color: rgba(219, 235, 255, 0.62);
  font-size: 13px;
}

.hero-tags li {
  position: relative;
  padding-left: 14px;
}

.hero-tags li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--cyan-400);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan-400);
  content: "";
}

.ai-visual {
  position: relative;
  width: 100%;
  min-height: 590px;
  isolation: isolate;
}

#ai-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ai-visual::before,
.ai-visual::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(68, 158, 255, 0.08);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.ai-visual::after {
  width: 56%;
  border-color: rgba(56, 189, 248, 0.1);
}

.visual-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1.55;
  border: 1px solid rgba(89, 174, 255, 0.1);
  border-radius: 50%;
}

.orbit-one { transform: translate(-50%, -50%) rotate(-18deg); }
.orbit-two { transform: translate(-50%, -50%) rotate(44deg); }

.core-shell {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.core-glow {
  position: absolute;
  inset: 18%;
  background: radial-gradient(circle at 38% 34%, #c3f1ff 0, #5bc9ff 10%, #2479ec 35%, rgba(19, 73, 178, 0.55) 58%, transparent 72%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.42), 0 0 90px rgba(37, 99, 235, 0.34);
  animation: core-breathe 5s ease-in-out infinite;
}

.core-ring {
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(107, 196, 255, 0.22);
  border-top-color: rgba(139, 220, 255, 0.82);
  border-radius: 50%;
  animation: ring-spin 14s linear infinite;
}

.core-ring-two {
  inset: -10%;
  border-color: rgba(70, 133, 244, 0.13);
  border-left-color: rgba(56, 189, 248, 0.48);
  animation-duration: 22s;
  animation-direction: reverse;
}

.core-label {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 15px rgba(0, 23, 80, 0.65);
}

.core-label span {
  color: #d9f5ff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}

.core-label strong {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.visual-node {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 105px;
  padding: 11px 14px 10px 35px;
  color: rgba(238, 248, 255, 0.9);
  background: linear-gradient(135deg, rgba(14, 46, 92, 0.83), rgba(7, 26, 57, 0.78));
  border: 1px solid rgba(102, 190, 255, 0.27);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 6, 22, 0.22), inset 0 1px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.visual-node strong {
  font-size: 13px;
  line-height: 1.25;
}

.visual-node small {
  margin-top: 3px;
  color: rgba(141, 198, 244, 0.5);
  font-size: 7px;
  line-height: 1;
  letter-spacing: 0.15em;
}

.node-pulse {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 9px;
  height: 9px;
  background: var(--cyan-400);
  border: 2px solid #bdecff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.08), 0 0 15px rgba(56, 189, 248, 0.7);
  transform: translateY(-50%);
  animation: node-breathe 3.4s ease-in-out infinite;
}

.node-model { top: 11%; left: 4%; }
.node-api { top: 14%; right: 0; }
.node-knowledge { bottom: 18%; left: 0; }
.node-agent { right: 0; bottom: 20%; }
.node-app { bottom: 1%; left: 50%; transform: translateX(-50%); }
.node-api .node-pulse { animation-delay: -0.8s; }
.node-knowledge .node-pulse { animation-delay: -1.5s; }
.node-agent .node-pulse { animation-delay: -2.2s; }
.node-app .node-pulse { animation-delay: -2.8s; }

.visual-caption {
  position: absolute;
  z-index: 2;
  top: 49%;
  right: 2%;
  left: 2%;
  display: flex;
  justify-content: space-between;
  color: rgba(133, 195, 246, 0.38);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: translateY(-50%);
}

.hero-scroll {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  letter-spacing: 0.12em;
  transform: translateX(-50%);
}

.hero-scroll i {
  display: block;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
}

.hero-scroll i::after {
  display: block;
  width: 100%;
  height: 10px;
  background: var(--cyan-400);
  content: "";
  animation: scroll-drop 2.3s ease-in-out infinite;
}

@keyframes core-breathe { 0%,100% { transform: scale(.94); opacity:.86; } 50% { transform:scale(1.05); opacity:1; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes node-breathe { 0%,100% { box-shadow: 0 0 0 4px rgba(56,189,248,.06), 0 0 9px rgba(56,189,248,.5); } 50% { box-shadow:0 0 0 8px rgba(56,189,248,.02),0 0 18px rgba(56,189,248,.8); } }
@keyframes scroll-drop { 0% { transform:translateY(-12px); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(30px); opacity:0; } }

/* Services */
.services {
  overflow: hidden;
}

.services::before {
  position: absolute;
  top: 120px;
  right: -180px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.08), transparent 68%);
  content: "";
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 26px 26px 24px;
  overflow: hidden;
  background: linear-gradient(155deg, #fff, #fbfdff);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(12, 37, 74, 0.02);
  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.service-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400), transparent 76%);
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.service-card:hover {
  z-index: 2;
  border-color: rgba(37, 99, 235, 0.27);
  box-shadow: 0 22px 55px rgba(20, 55, 110, 0.12);
  transform: translateY(-5px);
}

.service-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.card-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.card-topline i {
  width: 32px;
  height: 1px;
  background: rgba(37, 99, 235, 0.3);
}

.service-icon {
  display: grid;
  height: 108px;
  margin: 12px 0 14px;
  place-items: center;
  color: var(--blue-600);
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.1), transparent 67%);
}

.service-icon svg {
  width: 96px;
  height: 72px;
  overflow: visible;
  fill: rgba(37, 99, 235, 0.035);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.service-icon circle {
  fill: #fff;
}

.service-card:hover .service-icon svg {
  color: #168de0;
}

.service-card h3 {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.service-card > p {
  flex: 1 1 auto;
  margin-bottom: 20px;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.75;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-list li {
  padding: 5px 9px;
  color: #3a5a85;
  background: #f3f7fd;
  border: 1px solid #e7edf6;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.35;
}

.extended-services {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 2.3fr);
  gap: 50px;
  margin-top: 38px;
  padding: 36px 38px;
  background: linear-gradient(135deg, #f0f6ff, #f8fbff);
  border: 1px solid #dfeafb;
  border-radius: var(--radius-md);
}

.extended-heading h3 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.35;
}

.extended-list {
  display: grid;
  gap: 0;
}

.extended-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid #dae6f5;
}

.extended-list article:first-child { padding-top: 0; }
.extended-list article:last-child { padding-bottom: 0; border-bottom: 0; }
.extended-list h4 { margin-bottom: 5px; font-size: 16px; }
.extended-list p { margin-bottom: 0; color: var(--ink-600); font-size: 13px; line-height: 1.7; }

.extended-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--blue-600);
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.sound-icon { gap: 3px; }
.sound-icon i { width: 2px; height: 8px; background: currentColor; border-radius: 2px; }
.sound-icon i:nth-child(2) { height: 18px; }
.sound-icon i:nth-child(3) { height: 13px; }
.sound-icon i:nth-child(4) { height: 22px; }
.nodes-icon { position: relative; }
.nodes-icon i { position: absolute; width: 8px; height: 8px; background: currentColor; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px currentColor; }
.nodes-icon i:nth-child(1) { top: 10px; left: 18px; }
.nodes-icon i:nth-child(2) { bottom: 9px; left: 9px; }
.nodes-icon i:nth-child(3) { right: 9px; bottom: 9px; }

/* Architecture */
.section-tech {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #06152f 0%, #082049 56%, #06142d 100%);
}

.section-tech::before {
  position: absolute;
  top: -260px;
  left: 50%;
  width: 700px;
  height: 620px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.24), transparent 66%);
  content: "";
  transform: translateX(-50%);
}

.tech-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(rgba(105, 170, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 170, 255, 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse, #000, transparent 82%);
  mask-image: radial-gradient(ellipse, #000, transparent 82%);
}

.section-tech .section-shell {
  position: relative;
  z-index: 1;
}

.section-heading-dark h2 { color: #fff; }
.section-heading-dark > p { color: rgba(220, 236, 255, 0.63); }
.section-tech .section-kicker { color: var(--cyan-300); }

.architecture {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 90px;
  min-height: 550px;
  padding: 34px 30px 118px;
  background: rgba(4, 18, 42, 0.5);
  border: 1px solid rgba(119, 183, 255, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 34px 90px rgba(0, 3, 14, 0.19);
}

.architecture-lines {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: 100%;
  height: calc(100% - 90px);
  overflow: visible;
  fill: none;
  stroke: url(#lineGradient);
  stroke-width: 1.2;
}

.architecture-lines .line-pulse {
  stroke: #7dd3fc;
  stroke-dasharray: 3 22;
  stroke-linecap: round;
  stroke-width: 3;
  animation: dash-flow 5s linear infinite;
}

.architecture-lines .p2 { animation-delay: -1.6s; }
.architecture-lines .p3 { animation-delay: -3.2s; }
@keyframes dash-flow { to { stroke-dashoffset: -100; } }

.arch-column {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 16px;
}

.arch-label {
  display: inline-flex;
  width: fit-content;
  min-height: 27px;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 10px;
  color: #9edfff;
  background: rgba(56, 189, 248, 0.07);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.arch-node {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(15, 48, 91, 0.82), rgba(8, 29, 63, 0.83));
  border: 1px solid rgba(119, 183, 255, 0.15);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.arch-node > div { min-width: 0; }
.arch-node strong { display: block; font-size: 14px; line-height: 1.4; }
.arch-node small { display: block; margin-top: 4px; overflow: hidden; color: rgba(163, 199, 237, 0.43); font-size: 8px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }

.arch-dot {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 8px;
}

.arch-dot::before,
.arch-dot::after {
  position: absolute;
  content: "";
}

.arch-dot::before { inset: 7px; background: rgba(56, 189, 248, .15); border: 1px solid #64ceff; border-radius: 3px; }
.arch-dot::after { top: 13px; right: -8px; width: 8px; height: 1px; background: rgba(56,189,248,.5); }
.arch-output .arch-dot::after { right: auto; left: -8px; }

.arch-core { gap: 16px; }
.core-panel { display: grid; gap: 12px; padding: 18px; background: linear-gradient(145deg, rgba(21, 73, 139, .47), rgba(8, 28, 63, .85)); border: 1px solid rgba(93,183,255,.3); border-radius: 17px; box-shadow: 0 0 50px rgba(37,99,235,.13), inset 0 0 40px rgba(37,99,235,.07); }
.core-panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; color: rgba(171,218,255,.6); font-size: 8px; letter-spacing: .14em; }
.core-panel-head span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(56,189,248,.3)); }
.core-panel-head span:last-child { background: linear-gradient(90deg, rgba(56,189,248,.3), transparent); }
.core-module { display: flex; min-height: 74px; align-items: center; gap: 13px; padding: 14px; background: rgba(4,19,45,.58); border: 1px solid rgba(125,211,252,.14); border-radius: 10px; }
.core-module i { display:grid; width:30px; height:30px; place-items:center; color:#c4eeff; background:rgba(37,99,235,.22); border:1px solid rgba(105,193,255,.25); border-radius:50%; font-size:9px; font-style:normal; }
.core-module strong { font-size: 13px; line-height: 1.4; }

.arch-support {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 28px;
  left: 30px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 15px 18px;
  background: rgba(5, 24, 54, 0.86);
  border: 1px solid rgba(119, 183, 255, 0.15);
  border-radius: 12px;
}

.arch-support .arch-label { margin: 0; }
.arch-support ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.arch-support li { position: relative; padding: 2px 24px; color: rgba(226,240,255,.72); border-left: 1px solid rgba(119,183,255,.12); font-size: 12px; text-align: center; }
.arch-support li::before { display:inline-block; width:5px; height:5px; margin-right:8px; background:var(--cyan-400); border-radius:50%; box-shadow:0 0 8px rgba(56,189,248,.7); content:""; vertical-align:2px; }

/* Scenarios */
.scenario-workbench {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  min-height: 610px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.scenario-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: stretch;
  background: #f7f9fd;
  border-right: 1px solid var(--line);
}

.scenario-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  color: var(--ink-600);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e4eaf3;
  cursor: pointer;
  text-align: left;
  transition: color .2s ease, background .2s ease;
}

.scenario-tabs button:last-child { border-bottom: 0; }
.scenario-tabs button::before { position:absolute; top:18%; bottom:18%; left:0; width:3px; background:var(--blue-600); border-radius:0 3px 3px 0; content:""; opacity:0; transform:scaleY(.4); transition:opacity .2s ease,transform .25s ease; }
.scenario-tabs button span { color:#9aa9bd; font-size:10px; font-weight:800; letter-spacing:.08em; }
.scenario-tabs button strong { min-width:0; font-size:14px; line-height:1.35; }
.scenario-tabs button:hover { color:var(--ink-900); background:#f0f5fc; }
.scenario-tabs button[aria-selected="true"] { color:var(--blue-600); background:#fff; }
.scenario-tabs button[aria-selected="true"]::before { opacity:1; transform:scaleY(1); }
.scenario-tabs button[aria-selected="true"] span { color:var(--blue-500); }

.scenario-stage { position:relative; min-width:0; }
.scenario-panel { min-width:0; height:100%; animation:panel-in .35s ease both; }
.scenario-panel[hidden] { display:none !important; }
@keyframes panel-in { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }

.scenario-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 22px;
  padding: 35px 38px 24px;
}

.scenario-number { align-self:start; color:var(--blue-600); font-size:10px; font-weight:800; letter-spacing:.13em; }
.scenario-copy h3 { grid-column:1; margin-bottom:5px; font-size:26px; line-height:1.25; letter-spacing:-.02em; }
.scenario-copy > p { grid-column:1; margin-bottom:0; color:var(--ink-600); font-size:14px; line-height:1.75; }
.focus-label { grid-column:2; grid-row:1; justify-self:end; color:var(--ink-500); font-size:10px; font-weight:800; letter-spacing:.1em; }
.focus-tags { grid-column:2; grid-row:2 / span 2; display:flex; max-width:250px; flex-wrap:wrap; justify-content:flex-end; align-content:start; gap:7px; }
.focus-tags li { padding:5px 9px; color:#3d5e87; background:#f0f5fc; border:1px solid #e0e9f4; border-radius:999px; font-size:10px; line-height:1.3; }

.ui-mock {
  position: relative;
  height: 390px;
  margin: 0 28px 28px;
  overflow: hidden;
  background: linear-gradient(145deg, #eef4fc, #f9fbfe);
  border: 1px solid #dce6f2;
  border-radius: 15px;
  box-shadow: inset 0 1px #fff;
}

.mock-window-bar { display:flex; height:38px; align-items:center; gap:6px; padding:0 14px; color:#76879e; background:rgba(255,255,255,.75); border-bottom:1px solid #dfe7f2; font-size:10px; font-weight:700; letter-spacing:.06em; }
.mock-window-bar i { width:7px; height:7px; background:#d4deeb; border-radius:50%; }
.mock-window-bar span { margin-left:7px; }
.ai-badge { display:inline-grid; flex:0 0 auto; width:28px; height:28px; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); border-radius:8px; font-size:9px; font-weight:800; box-shadow:0 5px 14px rgba(37,99,235,.22); }

/* scenario: service */
.chat-layout { display:grid; grid-template-columns:58px minmax(0,1fr) 165px; height:calc(100% - 38px); }
.chat-sidebar { display:grid; align-content:start; justify-items:center; gap:18px; padding:16px 8px; background:#0b2143; }
.chat-sidebar .mini-avatar { width:28px; height:28px; background:linear-gradient(135deg,#3e7ef4,#47c8f7); border:3px solid rgba(255,255,255,.2); border-radius:8px; }
.chat-sidebar span { width:18px; height:3px; background:rgba(172,215,255,.18); border-radius:3px; }
.chat-main { display:flex; min-width:0; flex-direction:column; padding:24px; }
.message { max-width:82%; padding:11px 14px; border-radius:12px; font-size:11px; line-height:1.6; }
.message-user { align-self:flex-end; color:#37577f; background:#e4edf9; border-bottom-right-radius:3px; }
.message-ai { display:grid; grid-template-columns:28px 1fr; gap:10px; align-self:flex-start; margin-top:18px; color:#2d4567; background:#fff; border:1px solid #e0e8f2; border-bottom-left-radius:3px; box-shadow:0 10px 25px rgba(44,75,120,.07); }
.message-ai p { margin:0; }
.message-ai small { grid-column:2; display:flex; align-items:center; gap:6px; color:#7890ae; }
.message-ai small i { width:5px; height:5px; background:var(--success); border-radius:50%; }
.handoff { display:flex; align-items:center; gap:8px; margin-top:auto; padding:10px 12px; color:#526b8b; background:#edf3fa; border:1px dashed #cbd9e9; border-radius:9px; font-size:9px; }
.handoff i { width:7px; height:7px; background:var(--cyan-400); border-radius:50%; }
.handoff button { margin-left:auto; padding:5px 8px; color:#fff; background:var(--blue-600); border:0; border-radius:5px; font-size:8px; }
.ticket-card { align-self:start; margin:24px 18px 0 0; padding:15px; background:#fff; border:1px solid #dee7f1; border-radius:11px; box-shadow:0 10px 25px rgba(44,75,120,.07); }
.ticket-card small { color:#516b8e; font-size:9px; font-weight:700; }
.ticket-card > span { display:block; width:100%; height:5px; margin-top:12px; background:#e8eef6; border-radius:5px; }
.ticket-card > span:nth-of-type(2) { width:75%; }
.ticket-card > span:nth-of-type(3) { width:88%; }
.ticket-card div { display:flex; align-items:center; gap:6px; margin-top:16px; padding-top:10px; border-top:1px solid #edf1f6; }
.ticket-card div i { width:6px; height:6px; background:#f2ac46; border-radius:50%; }
.ticket-card b { color:#8e642b; font-size:8px; }

/* scenario: knowledge */
.knowledge-search { display:flex; height:48px; align-items:center; gap:10px; margin:20px 24px 0; padding:0 14px; color:#66809f; background:#fff; border:1px solid #dce6f1; border-radius:10px; box-shadow:0 7px 20px rgba(44,75,120,.05); }
.knowledge-search > span { color:var(--blue-600); font-size:20px; }
.knowledge-search b { flex:1; font-size:10px; font-weight:600; }
.knowledge-search kbd { padding:3px 6px; color:#8495aa; background:#f2f5f9; border:1px solid #dbe2ec; border-radius:4px; font-size:9px; }
.knowledge-body { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; padding:18px 24px 24px; }
.source-list { display:grid; align-content:start; gap:9px; }
.source-list > small { margin-bottom:3px; color:#71859e; font-size:9px; font-weight:700; }
.source-item { display:grid; grid-template-columns:30px 1fr; gap:5px 9px; padding:10px; background:rgba(255,255,255,.62); border:1px solid transparent; border-radius:8px; }
.source-item.is-selected { background:#fff; border-color:#bcd5f5; box-shadow:0 7px 18px rgba(37,99,235,.06); }
.source-item i { grid-row:1 / span 2; display:grid; width:29px; height:34px; place-items:center; color:#fff; background:#7ca8e9; border-radius:5px; font-size:7px; font-style:normal; font-weight:800; }
.source-item span { align-self:center; height:4px; background:#d9e3ee; border-radius:4px; }
.source-item span:last-child { width:68%; }
.answer-sheet { position:relative; min-height:230px; padding:20px 20px 16px 58px; background:#fff; border:1px solid #dfe8f2; border-radius:11px; box-shadow:0 12px 28px rgba(44,75,120,.06); }
.answer-sheet .ai-badge { position:absolute; top:18px; left:18px; }
.answer-sheet h4 { margin-bottom:18px; color:#38577d; font-size:11px; }
.answer-sheet > p { height:5px; margin:0 0 11px; background:#dce5ef; border-radius:4px; }
.answer-sheet > p:nth-of-type(2) { width:92%; }
.answer-sheet > p.short { width:63%; }
.citation { display:flex; align-items:center; gap:9px; margin-top:25px; padding:10px; color:#53769f; background:#edf5ff; border-left:2px solid var(--blue-500); border-radius:5px; font-size:8px; }
.citation i { display:grid; width:18px; height:18px; place-items:center; color:#fff; background:var(--blue-500); border-radius:50%; font-size:8px; font-style:normal; }

/* scenario: docs */
.workflow-canvas { display:flex; height:calc(100% - 38px); align-items:center; justify-content:center; gap:10px; padding:26px; background-image:radial-gradient(#ccdaea 1px,transparent 1px); background-size:18px 18px; }
.flow-card { display:grid; width:125px; min-height:148px; align-content:center; justify-items:center; padding:15px; text-align:center; background:#fff; border:1px solid #dbe5f0; border-radius:13px; box-shadow:0 14px 25px rgba(44,75,120,.08); }
.flow-card small { color:#8192a7; font-size:8px; font-weight:700; letter-spacing:.08em; }
.flow-card i { display:grid; width:45px; height:45px; margin:14px 0; place-items:center; color:#fff; background:linear-gradient(135deg,#5f95e9,#2e67cf); border-radius:11px; font-size:11px; font-style:normal; font-weight:800; }
.flow-card strong { color:#3d5778; font-size:10px; line-height:1.4; }
.process-card { border-color:#98c0f6; box-shadow:0 16px 34px rgba(37,99,235,.14); }
.review-card i { color:#4b6688; background:#e9eff7; }
.output-card i { background:linear-gradient(135deg,#17a3d3,#377be6); }
.flow-arrow { color:#78a7e2; font-size:18px; }

/* scenario: data */
.query-box { display:flex; height:54px; align-items:center; gap:12px; margin:20px 24px 0; padding:0 14px; color:#55708f; background:#fff; border:1px solid #dce6f1; border-radius:10px; }
.query-box b { flex:1; font-size:10px; font-weight:600; }
.query-box > i { color:var(--blue-600); font-style:normal; }
.data-body { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; padding:18px 24px 24px; }
.chart-card,.sql-card { min-width:0; height:240px; padding:16px; background:#fff; border:1px solid #dfe7f1; border-radius:11px; box-shadow:0 10px 25px rgba(44,75,120,.05); }
.chart-card small,.sql-card small { color:#627a98; font-size:9px; font-weight:700; }
.bar-chart { display:flex; height:145px; align-items:flex-end; justify-content:space-around; gap:10px; padding:20px 12px 10px; border-bottom:1px solid #dce5ef; background:linear-gradient(#f3f7fb 1px,transparent 1px); background-size:100% 36px; }
.bar-chart i { width:18px; height:var(--h); background:linear-gradient(to top,#2563eb,#55c6f5); border-radius:4px 4px 0 0; opacity:.85; }
.chart-labels { display:grid; grid-template-columns:repeat(3,1fr); margin-top:11px; color:#8292a6; font-size:8px; text-align:center; }
.sql-card code { display:block; margin-top:14px; padding:12px; overflow:hidden; color:#7dbbe1; background:#0a2144; border-radius:8px; font-size:8px; line-height:1.7; white-space:normal; }
.sql-card > span { display:block; margin-top:12px; padding:7px 8px; color:#167953; background:#e8f8f1; border-radius:6px; font-size:8px; }

/* scenario: sales */
.sales-body { display:grid; grid-template-columns:.7fr 1.3fr; gap:17px; height:calc(100% - 38px); padding:22px 24px 24px; }
.profile-card,.draft-card { min-width:0; padding:17px; background:#fff; border:1px solid #dfe7f1; border-radius:11px; box-shadow:0 10px 25px rgba(44,75,120,.05); }
.profile-head { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.profile-head > i { width:38px; height:38px; background:linear-gradient(135deg,#d2e2f7,#a6c4eb); border-radius:50%; }
.profile-head div { flex:1; }
.profile-head span { display:block; width:90%; height:5px; margin:6px 0; background:#dce5ef; border-radius:4px; }
.profile-head span:last-child { width:60%; }
.profile-card > small { color:#7187a2; font-size:8px; font-weight:700; }
.profile-card ul { display:grid; gap:9px; margin-top:12px; }
.profile-card li { display:flex; align-items:center; gap:8px; padding:8px; color:#58708e; background:#f4f7fb; border-radius:6px; font-size:8px; }
.profile-card li i { width:5px; height:5px; background:var(--blue-500); border-radius:50%; }
.draft-head { display:flex; align-items:center; gap:9px; }
.draft-head strong { color:#3c5879; font-size:10px; }
.draft-head button { margin-left:auto; padding:5px 7px; color:#4f77aa; background:#edf4fd; border:0; border-radius:5px; font-size:7px; }
.draft-card > h4 { width:55%; height:7px; margin:28px 0 18px; background:#cbd8e7; border-radius:5px; }
.draft-card > p { width:100%; height:5px; margin:0 0 12px; background:#e0e7ef; border-radius:5px; }
.draft-card > p:nth-of-type(2) { width:92%; }
.draft-card > p.short { width:66%; }
.draft-actions { display:flex; align-items:center; justify-content:space-between; margin-top:27px; padding:10px 12px; color:#3367a9; background:#eef5ff; border-radius:7px; font-size:8px; }

/* scenario: product */
.product-body { display:flex; height:calc(100% - 38px); align-items:center; justify-content:center; gap:14px; padding:24px; background:radial-gradient(circle at center,rgba(37,99,235,.13),transparent 52%); }
.device { position:relative; flex:0 0 auto; background:#0b2143; box-shadow:0 16px 30px rgba(11,33,67,.18); }
.desktop-device { width:150px; height:110px; padding:7px; border-radius:9px; }
.desktop-device::after { position:absolute; right:50px; bottom:-19px; left:50px; height:19px; background:linear-gradient(90deg,transparent,#506b8e 25%,#506b8e 75%,transparent); content:""; }
.device-screen { display:grid; height:100%; align-content:center; justify-items:center; background:linear-gradient(145deg,#102f5c,#0a2143); border:1px solid rgba(125,211,252,.15); border-radius:5px; }
.wave { display:flex; height:30px; align-items:center; gap:3px; margin:8px 0 3px; }
.wave i { width:2px; height:8px; background:#5bcaf7; border-radius:2px; animation:wave 1.6s ease-in-out infinite; }
.wave i:nth-child(2),.wave i:nth-child(6){height:17px;animation-delay:-.3s}.wave i:nth-child(3),.wave i:nth-child(5){height:24px;animation-delay:-.7s}.wave i:nth-child(4){height:30px;animation-delay:-1s}
.device-screen small { color:#b4d9ef; font-size:7px; }
@keyframes wave { 50% { transform:scaleY(.45); opacity:.6; } }
.connection-beam { display:flex; width:42px; align-items:center; gap:5px; }
.connection-beam i { width:6px; height:2px; background:#73cdf4; box-shadow:0 0 7px rgba(56,189,248,.7); animation:beam 1.8s linear infinite; }
.connection-beam i:nth-child(2){animation-delay:-.6s}.connection-beam i:nth-child(3){animation-delay:-1.2s}.connection-beam.right{transform:rotate(180deg)}
@keyframes beam { 0%,100%{opacity:.2}50%{opacity:1} }
.capability-ring { position:relative; display:grid; width:120px; height:120px; place-items:center; border:1px solid rgba(37,99,235,.22); border-radius:50%; }
.capability-ring::before { position:absolute; inset:18px; border:1px dashed rgba(37,99,235,.28); border-radius:50%; content:""; animation:ring-spin 18s linear infinite; }
.capability-ring > span { display:grid; width:45px; height:45px; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); border-radius:50%; font-size:11px; font-weight:800; box-shadow:0 0 25px rgba(37,99,235,.3); }
.capability-ring i { position:absolute; padding:3px 6px; color:#53749d; background:#fff; border:1px solid #dbe7f4; border-radius:5px; font-size:7px; font-style:normal; }
.capability-ring i:nth-of-type(1){top:3px}.capability-ring i:nth-of-type(2){right:-2px;bottom:18px}.capability-ring i:nth-of-type(3){bottom:18px;left:-2px}
.hardware-device { display:grid; width:105px; height:125px; align-content:center; justify-items:center; border:4px solid #35577e; border-radius:40px 40px 26px 26px; }
.hardware-eye { width:46px; height:19px; background:radial-gradient(circle at 33% 50%,#6bd4ff 0 3px,transparent 4px),radial-gradient(circle at 67% 50%,#6bd4ff 0 3px,transparent 4px),#071932; border:1px solid rgba(125,211,252,.28); border-radius:10px; }
.hardware-mouth { width:20px; height:5px; margin-top:9px; border-bottom:1px solid #70c9ef; border-radius:50%; }
.hardware-device small { position:absolute; bottom:10px; color:#a7cae1; font-size:7px; }

.scenario-disclaimer { margin:17px 6px 0; color:var(--ink-500); font-size:12px; text-align:right; }

/* Delivery */
.principles {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: center;
  padding: 46px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.principle-visual { position:relative; display:grid; min-height:370px; place-items:center; overflow:hidden; background:linear-gradient(145deg,#071a39,#0a2855); border-radius:20px; }
.principle-visual::before { position:absolute; inset:0; opacity:.3; background-image:linear-gradient(rgba(125,211,252,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.08) 1px,transparent 1px); background-size:32px 32px; content:""; }
.target-rings { position:relative; display:grid; width:210px; height:210px; place-items:center; border:1px solid rgba(125,211,252,.18); border-radius:50%; }
.target-rings::before,.target-rings::after,.target-rings i { position:absolute; border:1px solid rgba(91,190,248,.18); border-radius:50%; content:""; }
.target-rings::before { inset:30px; }
.target-rings::after { inset:60px; background:rgba(37,99,235,.08); }
.target-rings i:nth-child(1){inset:-12px;border-style:dashed;animation:ring-spin 25s linear infinite}.target-rings i:nth-child(2){top:16px;right:16px;width:8px;height:8px;background:var(--cyan-400);border:2px solid #c5f0ff;box-shadow:0 0 16px #38bdf8}.target-rings i:nth-child(3){bottom:38px;left:22px;width:5px;height:5px;background:var(--blue-500);box-shadow:0 0 12px #3b82f6}
.target-rings span { position:relative; z-index:2; color:#d8f4ff; font-size:42px; font-weight:750; letter-spacing:.04em; text-shadow:0 0 28px rgba(56,189,248,.5); }
.target-caption { position:absolute; right:24px; bottom:23px; left:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:15px; color:#fff; }
.target-caption small { color:rgba(157,213,249,.48); font-size:8px; letter-spacing:.14em; }
.target-caption strong { color:rgba(229,244,255,.72); font-size:10px; }

.principle-list { display:grid; }
.principle-list article { display:grid; grid-template-columns:42px minmax(0,1fr); gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.principle-list article:last-child { border-bottom:0; }
.principle-list article > span { display:grid; width:38px; height:38px; place-items:center; color:var(--blue-600); background:var(--surface-blue); border-radius:10px; font-size:10px; font-weight:800; }
.principle-list h3 { margin-bottom:7px; font-size:18px; line-height:1.35; }
.principle-list p { margin-bottom:0; color:var(--ink-600); font-size:13px; line-height:1.75; }

.cooperation-block { margin-top:115px; }
.subsection-heading { max-width:720px; margin-bottom:42px; }
.cooperation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.cooperation-card { display:flex; min-width:0; min-height:380px; flex-direction:column; padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(20,55,110,.04); }
.cooperation-card.is-featured { color:#fff; background:linear-gradient(145deg,#0b2c61,#0a2149); border-color:#245caa; box-shadow:0 25px 65px rgba(10,33,73,.2); }
.cooperation-card .phase { color:var(--blue-600); font-size:10px; font-weight:800; letter-spacing:.13em; }
.cooperation-card.is-featured .phase { color:var(--cyan-300); }
.cooperation-card h3 { margin:22px 0 14px; font-size:24px; line-height:1.3; }
.cooperation-card > p { color:var(--ink-600); font-size:14px; line-height:1.75; }
.cooperation-card.is-featured > p { color:rgba(222,238,255,.67); }
.cooperation-card > div { margin-top:auto; padding-top:21px; border-top:1px solid var(--line-soft); }
.cooperation-card.is-featured > div { border-top-color:rgba(255,255,255,.12); }
.cooperation-card small { color:var(--ink-500); font-size:10px; font-weight:800; letter-spacing:.08em; }
.cooperation-card.is-featured small { color:var(--cyan-300); }
.cooperation-card > div p { margin:8px 0 0; color:var(--ink-700); font-size:12px; line-height:1.7; }
.cooperation-card.is-featured > div p { color:rgba(229,242,255,.7); }
.scope-note { margin:18px 4px 0; color:var(--ink-500); font-size:12px; text-align:right; }

.process-block { margin-top:56px; padding:35px 40px 38px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-md); }
.process-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:30px; }
.process-heading .section-kicker { margin-bottom:4px; }
.process-heading h3 { margin-bottom:0; font-size:23px; }
.process-line { position:relative; display:grid; grid-template-columns:repeat(5,1fr); }
.process-line::before { position:absolute; top:20px; right:9%; left:9%; height:1px; background:linear-gradient(90deg,#b9d3f4,#73aaf0,#b9d3f4); content:""; }
.process-line li { position:relative; z-index:1; display:grid; justify-items:center; gap:12px; text-align:center; }
.process-line span { display:grid; width:41px; height:41px; place-items:center; color:var(--blue-600); background:#fff; border:1px solid #9ec1ef; border-radius:50%; box-shadow:0 0 0 6px #fff; font-size:9px; font-weight:800; }
.process-line strong { color:var(--ink-700); font-size:13px; }

/* About */
.about-grid { display:grid; grid-template-columns:minmax(0, .93fr) minmax(440px, 1.07fr); gap:85px; align-items:center; }
.about-copy h2 { margin-bottom:28px; }
.about-copy > p { color:var(--ink-600); font-size:16px; line-height:1.9; }
.about-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.about-tags li { padding:7px 12px; color:#355f96; background:#f0f6ff; border:1px solid #dbe8f8; border-radius:999px; font-size:12px; }
.about-visual { position:relative; min-height:480px; overflow:hidden; background:linear-gradient(145deg,#071a39,#0b2b5e); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.about-visual::before { position:absolute; inset:0; opacity:.34; background-image:radial-gradient(circle at center,rgba(50,127,235,.25),transparent 43%),linear-gradient(rgba(125,211,252,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.07) 1px,transparent 1px); background-size:auto,38px 38px,38px 38px; content:""; }
.collab-grid { position:absolute; inset:0; }
.collab-grid > svg { position:absolute; z-index:1; inset:0; width:100%; height:100%; fill:none; stroke:rgba(91,196,246,.25); stroke-dasharray:4 8; stroke-width:1.2; }
.collab-grid > svg circle { fill:#6bd4ff; stroke:#b8ecff; stroke-width:2; }
.collab-node,.collab-center { position:absolute; z-index:2; display:grid; place-items:center; text-align:center; }
.collab-node { width:135px; min-height:86px; padding:13px; color:#d9edff; background:rgba(11,48,91,.84); border:1px solid rgba(104,190,255,.22); border-radius:13px; box-shadow:0 13px 35px rgba(0,7,25,.2); }
.collab-node span { display:grid; width:31px; height:31px; place-items:center; margin-bottom:6px; color:#aee7ff; background:rgba(56,189,248,.09); border:1px solid rgba(56,189,248,.25); border-radius:8px; font-size:9px; font-weight:800; }
.collab-node strong { font-size:11px; line-height:1.3; }
.node-engineering { top:45px; left:40px; }.node-data { top:45px; right:40px; }.node-systems { right:40px; bottom:45px; }.node-operations { bottom:45px; left:40px; }
.collab-center { top:50%; left:50%; width:130px; height:130px; color:#fff; background:radial-gradient(circle,#287bea,#113b82 58%,#092452 62%); border:1px solid rgba(135,221,255,.5); border-radius:50%; box-shadow:0 0 50px rgba(37,99,235,.36),inset 0 0 25px rgba(125,211,252,.2); transform:translate(-50%,-50%); }
.collab-center::before,.collab-center::after { position:absolute; border:1px solid rgba(125,211,252,.18); border-radius:50%; content:""; }.collab-center::before{inset:-18px}.collab-center::after{inset:-36px;border-style:dashed;animation:ring-spin 28s linear infinite}
.collab-center i { position:absolute; inset:12px; border:1px solid rgba(190,239,255,.18); border-radius:50%; }
.collab-center span { font-size:30px; font-weight:800; line-height:1; }
.collab-center strong { margin-top:-27px; font-size:9px; letter-spacing:.08em; }

/* Contact */
.contact { position:relative; overflow:hidden; background:linear-gradient(145deg,#041127,#071d40 58%,#051630); }
.contact::before { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(105,170,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(105,170,255,.09) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:linear-gradient(to right,#000,transparent 75%); mask-image:linear-gradient(to right,#000,transparent 75%); content:""; }
.contact-glow { position:absolute; top:-200px; left:-180px; width:650px; height:650px; background:radial-gradient(circle,rgba(37,99,235,.23),transparent 66%); }
.contact-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr); gap:80px; align-items:start; }
.contact-copy { padding-top:28px; }
.contact-copy .section-kicker { color:var(--cyan-300); }
.contact-copy h2 { margin-bottom:25px; }
.contact-copy > p { max-width:560px; color:rgba(222,237,255,.64); font-size:16px; line-height:1.85; }
.contact-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.contact-actions .button { min-width:165px; }
.contact-channels { display:grid; gap:10px; margin-top:30px; }
.contact-channel { display:flex; align-items:center; gap:12px; width:fit-content; max-width:100%; color:rgba(231,243,255,.75); font-size:13px; }
.contact-channel i { width:6px; height:6px; background:var(--cyan-400); border-radius:50%; box-shadow:0 0 10px var(--cyan-400); }
.contact-channel span { overflow-wrap:anywhere; }
.contact-qr { display:grid; width:148px; justify-items:center; padding:8px; background:rgba(255,255,255,.06); border:1px solid rgba(125,211,252,.15); border-radius:12px; }
.contact-qr img { width:132px; height:132px; object-fit:contain; background:#fff; border-radius:7px; }
.contact-qr figcaption { padding:7px 4px 1px; color:rgba(226,239,255,.66); font-size:10px; }
.contact-route { display:flex; align-items:center; gap:14px; margin-top:70px; color:rgba(163,203,239,.4); font-size:16px; font-weight:700; letter-spacing:.08em; }
.contact-route i { width:44px; height:1px; background:linear-gradient(90deg,rgba(56,189,248,.2),rgba(56,189,248,.7)); }

.inquiry-card { padding:34px; color:var(--ink-900); background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.42); border-radius:22px; box-shadow:0 30px 90px rgba(0,5,20,.32); }
.form-heading > span { color:var(--blue-600); font-size:9px; font-weight:800; letter-spacing:.14em; }
.form-heading h3 { margin:7px 0 8px; font-size:25px; line-height:1.35; }
.form-heading p { margin-bottom:24px; color:var(--ink-500); font-size:11px; line-height:1.65; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { min-width:0; margin-bottom:15px; }
.field label,.interest-fieldset legend,.summary-output label { display:block; margin-bottom:7px; color:var(--ink-700); font-size:12px; font-weight:700; }
.field label em { margin-left:4px; color:var(--error); font-style:normal; }
.field input,.field textarea,.summary-output textarea { display:block; width:100%; color:var(--ink-900); background:#f8fafc; border:1px solid #dce4ee; border-radius:9px; outline:0; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.field input { height:45px; padding:0 13px; }
.field textarea,.summary-output textarea { min-height:116px; padding:11px 13px; resize:vertical; }
.field input:focus,.field textarea:focus,.summary-output textarea:focus { background:#fff; border-color:#6ea5ee; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:rgba(209,67,67,.7); box-shadow:0 0 0 3px rgba(209,67,67,.08); }
.field-hint { display:block; margin-top:5px; color:var(--ink-500); font-size:9px; }
.field-error { display:block; min-height:0; margin-top:5px; color:var(--error); font-size:10px; line-height:1.4; }
.field-error:empty { display:none; }
.textarea-meta { display:flex; justify-content:space-between; gap:15px; color:var(--ink-500); font-size:9px; }
.interest-fieldset { min-width:0; margin:1px 0 16px; padding:0; border:0; }
.interest-options { display:flex; flex-wrap:wrap; gap:7px; }
.interest-options label { cursor:pointer; }
.interest-options input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.interest-options span { display:inline-flex; min-height:32px; align-items:center; padding:6px 10px; color:#4d6380; background:#f5f8fc; border:1px solid #dfe6ef; border-radius:8px; font-size:10px; transition:color .2s ease,border-color .2s ease,background .2s ease; }
.interest-options input:checked + span { color:var(--blue-600); background:#edf4ff; border-color:#8db5eb; }
.interest-options input:focus-visible + span { outline:2px solid var(--cyan-400); outline-offset:2px; }
.privacy-check { display:flex; align-items:flex-start; gap:9px; margin:3px 0 0; color:var(--ink-600); cursor:pointer; font-size:11px; line-height:1.5; }
.privacy-check input { flex:0 0 auto; width:16px; height:16px; margin-top:1px; accent-color:var(--blue-600); }
.text-link { padding:0; color:var(--blue-600); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.privacy-error { margin-left:25px; }
.form-submit { position:relative; width:100%; min-height:49px; margin-top:19px; }
.form-submit.is-loading .submit-label { opacity:0; }
.button-loader { position:absolute; width:19px; height:19px; border:2px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; opacity:0; animation:ring-spin .8s linear infinite; }
.form-submit.is-loading .button-loader { opacity:1; }
.form-submit:disabled { cursor:wait; opacity:.75; transform:none; }
.form-status { display:none; margin-top:13px; padding:10px 12px; border-radius:8px; font-size:11px; line-height:1.55; }
.form-status:not(:empty) { display:block; }
.form-status.is-info { color:#315b92; background:#edf5ff; border:1px solid #d2e4fa; }
.form-status.is-success { color:#176c50; background:#edf9f5; border:1px solid #cceee2; }
.form-status.is-error { color:#a43a3a; background:#fff0f0; border:1px solid #f3d1d1; }
.summary-output { margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }
.summary-output textarea { min-height:160px; color:#40536d; background:#f4f7fb; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; line-height:1.65; }
.summary-output .button { width:100%; margin-top:9px; min-height:42px; }

/* Footer and dialog */
.site-footer { color:rgba(226,239,255,.63); background:#030d1e; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-top:40px; padding-bottom:32px; }
.footer-brand > p { margin:11px 0 0 50px; color:rgba(178,206,236,.42); font-size:11px; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 26px; }
.footer-nav a:hover { color:#fff; }
.footer-bottom { display:flex; min-height:65px; align-items:center; justify-content:center; gap:20px; color:rgba(170,198,229,.38); border-top:1px solid rgba(255,255,255,.07); font-size:10px; }
.footer-bottom p { width:100%; margin:0; font-size:12px; text-align:center; }
.filing-links { display:inline-flex; gap:12px; margin-left:.65em; }
.filing-links:not(:empty)::before { color:rgba(226,239,255,.34); content:"|"; }
.filing-links a {  transition:color .2s ease; }
.filing-links a:hover { color:rgba(229,242,255,.8); }

.privacy-dialog { width:min(620px,calc(100% - 32px)); max-height:calc(100svh - 40px); padding:0; color:var(--ink-900); background:#fff; border:0; border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.32); }
.privacy-dialog::backdrop { background:rgba(1,8,21,.7); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; padding:22px 25px; border-bottom:1px solid var(--line-soft); }
.dialog-head h2 { margin:0; font-size:21px; }
.dialog-close { display:grid; width:38px; height:38px; place-items:center; color:var(--ink-600); background:#f3f6fa; border:0; border-radius:50%; cursor:pointer; font-size:24px; line-height:1; }
.dialog-body { max-height:55svh; padding:23px 25px 5px; overflow-y:auto; }
.dialog-body h3 { margin:20px 0 7px; font-size:14px; }
.dialog-body h3:first-of-type { margin-top:24px; }
.dialog-body p { margin-bottom:0; color:var(--ink-600); font-size:13px; line-height:1.8; }
.dialog-actions { padding:18px 25px 24px; }
.dialog-actions .button { width:100%; }
.back-to-top { position:fixed; z-index:90; right:22px; bottom:22px; display:grid; width:44px; height:44px; place-items:center; color:#fff; background:rgba(7,29,64,.84); border:1px solid rgba(125,211,252,.2); border-radius:12px; box-shadow:0 10px 30px rgba(2,14,36,.22); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }
.back-to-top svg { width:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }

/* Responsive */
@media (max-width: 1120px) {
  .desktop-nav { gap:16px; }
  .header-cta { display:none; }
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(400px,.9fr); gap:26px; }
  .ai-visual { min-height:520px; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .architecture { gap:55px; }
  .contact-grid { gap:48px; }
}

@media (max-width: 960px) {
  :root { --header-height:70px; }
  .section { padding:92px 0; }
  .section-shell,.header-shell { width:min(calc(100% - 48px),var(--shell)); }
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .header-actions { margin-left:auto; }
  .hero { min-height:auto; padding-top:calc(var(--header-height) + 68px); }
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-copy { max-width:760px; }
  .ai-visual { min-height:480px; max-width:700px; margin:0 auto; }
  .hero-scroll { display:none; }
  .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:42px; }
  .section-heading > p { max-width:700px; }
  .extended-services { grid-template-columns:1fr; gap:28px; }
  .architecture { grid-template-columns:1fr; gap:22px; min-height:0; padding:30px 30px 125px; }
  .architecture-lines { display:none; }
  .arch-column { position:relative; }
  .arch-column:not(:last-of-type)::after { display:block; width:1px; height:17px; margin:2px auto -14px; background:linear-gradient(var(--cyan-400),rgba(56,189,248,.1)); content:""; }
  .arch-label { justify-self:center; }
  .arch-node { min-height:70px; }
  .arch-core .core-panel { width:100%; max-width:520px; justify-self:center; }
  .arch-support { right:30px; bottom:25px; left:30px; }
  .scenario-workbench { grid-template-columns:1fr; min-height:0; }
  .scenario-tabs { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); scroll-snap-type:x proximity; scrollbar-width:thin; }
  .scenario-tabs button { flex:0 0 auto; min-width:190px; min-height:65px; scroll-snap-align:center; border-right:1px solid #e4eaf3; border-bottom:0; }
  .scenario-tabs button::before { top:auto; right:18%; bottom:0; left:18%; width:auto; height:3px; transform:scaleX(.4); }
  .scenario-tabs button[aria-selected="true"]::before { transform:scaleX(1); }
  .principles { grid-template-columns:1fr; gap:36px; }
  .principle-visual { min-height:320px; }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-visual { min-height:470px; }
  .contact-grid { grid-template-columns:1fr; gap:55px; }
  .contact-copy { padding-top:0; }
  .contact-route { margin-top:42px; }
}

@media (max-width: 760px) {
  .section { padding:76px 0; }
  .section-shell,.header-shell { width:min(calc(100% - 32px),var(--shell)); }
  .header-shell { gap:12px; }
  .brand-copy strong { font-size:14px; }
  .brand-copy small { font-size:7px; }
  .brand-mark { width:34px; height:34px; }
  .language-switch { min-width:62px; padding:0 3px; }
  .mobile-menu nav { width:calc(100% - 32px); }
  .hero { padding-top:calc(var(--header-height) + 52px); padding-bottom:60px; }
  .hero h1 { font-size:clamp(2.35rem,11vw,3.5rem); }
  .hero-description { font-size:15px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions .button { width:100%; }
  .hero-tags { margin-top:26px; gap:8px 16px; }
  .ai-visual { min-height:390px; }
  .node-model { left:0; }.node-api{right:0}.node-knowledge{left:0}.node-agent{right:0}
  .visual-node { min-width:92px; padding:9px 10px 8px 31px; }
  .visual-node strong { font-size:11px; }.visual-node small{font-size:6px}.node-pulse{left:12px}
  .core-shell { width:135px; height:135px; }
  .section-heading h2,.subsection-heading h2,.about-copy h2,.contact-copy h2 { font-size:clamp(1.9rem,8vw,2.6rem); }
  .service-grid { grid-template-columns:1fr; }
  .service-card { padding:24px; }
  .extended-services { padding:28px 24px; }
  .extended-list article { grid-template-columns:44px minmax(0,1fr); }
  .architecture { padding:25px 20px 150px; border-radius:20px; }
  .arch-support { right:20px; bottom:20px; left:20px; grid-template-columns:1fr; gap:10px; }
  .arch-support .arch-label { justify-self:start; }
  .arch-support ul { grid-template-columns:repeat(2,1fr); gap:8px 0; }
  .arch-support li { padding:2px 8px; }
  .scenario-copy { grid-template-columns:1fr; padding:27px 22px 20px; }
  .scenario-copy h3,.scenario-copy>p,.focus-label,.focus-tags { grid-column:1; grid-row:auto; }
  .focus-label { justify-self:start; margin-top:10px; }
  .focus-tags { max-width:none; justify-content:flex-start; }
  .ui-mock { height:360px; margin:0 14px 14px; }
  .chat-layout { grid-template-columns:44px minmax(0,1fr); }
  .ticket-card { display:none; }
  .chat-main { padding:17px; }
  .knowledge-search { margin:14px 14px 0; }
  .knowledge-body { grid-template-columns:120px minmax(0,1fr); gap:10px; padding:12px 14px 14px; }
  .source-item { grid-template-columns:24px 1fr; padding:7px; }.source-item i{width:24px;height:29px}.answer-sheet{padding:16px 14px 14px 48px}.answer-sheet .ai-badge{top:14px;left:12px}
  .workflow-canvas { flex-wrap:wrap; gap:7px; padding:16px; align-content:center; }
  .flow-card { width:42%; min-height:125px; }.flow-arrow{width:7%;text-align:center}.workflow-canvas .flow-arrow:nth-of-type(2){display:none}
  .data-body { grid-template-columns:1fr; gap:9px; padding:12px 14px 14px; }
  .chart-card { height:170px; }.sql-card{height:116px}.bar-chart{height:100px;padding-top:8px}.sql-card code{margin-top:7px;padding:7px;line-height:1.35}.sql-card>span{margin-top:6px}
  .sales-body { grid-template-columns:.76fr 1.24fr; gap:9px; padding:14px; }.profile-card,.draft-card{padding:12px}.profile-card li{padding:6px}.draft-card>h4{margin-top:20px}
  .product-body { gap:6px; padding:15px; }.desktop-device{width:105px;height:84px}.connection-beam{width:22px;gap:2px}.connection-beam i{width:5px}.capability-ring{width:90px;height:90px}.hardware-device{width:76px;height:100px}.hardware-eye{width:38px}.capability-ring i{font-size:6px;padding:2px 4px}
  .principles { padding:20px; }
  .principle-visual { min-height:285px; }
  .principle-list article { grid-template-columns:36px minmax(0,1fr); gap:13px; }
  .principle-list article>span{width:34px;height:34px}
  .cooperation-block { margin-top:82px; }
  .cooperation-grid { grid-template-columns:1fr; }
  .cooperation-card { min-height:0; }
  .process-block { padding:27px 22px; }
  .process-heading { display:block; }
  .process-line { grid-template-columns:1fr; gap:0; }
  .process-line::before { top:16px; bottom:16px; left:18px; width:1px; height:auto; }
  .process-line li { grid-template-columns:40px 1fr; justify-items:start; align-items:center; gap:13px; padding:8px 0; text-align:left; }
  .process-line span { width:36px; height:36px; box-shadow:0 0 0 4px #fff; }
  .about-visual { min-height:390px; }
  .collab-node { width:105px; min-height:72px; padding:9px; }.collab-node span{width:27px;height:27px}.collab-node strong{font-size:9px}.node-engineering{top:28px;left:20px}.node-data{top:28px;right:20px}.node-systems{right:20px;bottom:28px}.node-operations{bottom:28px;left:20px}.collab-center{width:104px;height:104px}.collab-center::after{inset:-25px}.collab-center::before{inset:-13px}.collab-center span{font-size:25px}.collab-center strong{font-size:7px;margin-top:-22px}
  .contact-actions { display:grid; grid-template-columns:1fr; }
  .contact-actions .button { width:100%; }
  .contact-route { flex-wrap:wrap; }
  .contact-route i { width:20px; }
  .inquiry-card { padding:25px 19px; border-radius:18px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .footer-main { align-items:flex-start; flex-direction:column; }
  .footer-nav { justify-content:flex-start; }
  .footer-bottom { align-items:center; flex-direction:column; padding-top:20px; padding-bottom:20px; }
  .back-to-top { right:14px; bottom:14px; }
}

@media (max-width: 420px) {
  .brand-copy small { display:none; }
  .language-switch { min-width:58px; }
  .hero h1 { letter-spacing:-.045em; }
  .ai-visual { min-height:340px; }
  .core-shell { width:112px; height:112px; }
  .core-label span { font-size:23px; }
  .core-label strong { font-size:8px; }
  .visual-node { min-width:82px; padding-left:28px; }
  .visual-node strong { font-size:10px; }.visual-node small{display:none}.node-pulse{left:10px;width:8px;height:8px}
  .node-model{top:8%}.node-api{top:12%}.node-knowledge{bottom:17%}.node-agent{bottom:19%}.node-app{bottom:0}
  .workflow-canvas { padding:10px; }.flow-card{width:43%;min-height:118px;padding:9px}.flow-card i{width:36px;height:36px;margin:9px 0}.flow-arrow{font-size:13px}
  .sales-body { grid-template-columns:1fr; overflow:auto; }.profile-card{display:none}
  .product-body { transform:scale(.92); transform-origin:center; }
  .footer-nav { display:grid; grid-template-columns:repeat(2,1fr); width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal { opacity:1; transform:none; }
}

@media (forced-colors: active) {
  .button,.service-card,.architecture,.scenario-workbench,.inquiry-card { border:1px solid CanvasText; }
  .eyebrow-dot,.node-pulse,.arch-dot::before { forced-color-adjust:none; }
}