/* ===== RESET ===== */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f7fbff;
  color: #071d3b;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
::selection { background: #0879ff; color: white; }

/* ===== SITE CONTAINER — Light (Platform default) ===== */
.site {
  --navy: #061a38;
  --blue: #0879ff;
  --cyan: #63c9ff;
  --muted: #5b7088;
  --line: #dce9f5;
  --sectionBackground: transparent;
  overflow: hidden;
  color: #102b4d;
  background:
    linear-gradient(rgba(36, 116, 196, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 116, 196, .055) 1px, transparent 1px),
    radial-gradient(circle at 88% 5%, rgba(65, 166, 255, .2), transparent 25%),
    radial-gradient(circle at 7% 43%, rgba(71, 145, 225, .12), transparent 29%),
    linear-gradient(145deg, #f8fbff 0%, #edf6ff 48%, #f7fbff 100%);
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
}

/* ===== CONTAINER ===== */
.container {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 100px;
  border-bottom: 1px solid transparent;
  transition: .35s ease;
}
.headerScrolled {
  height: 88px;
  background: rgba(4, 18, 39, .88);
  border-color: rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.nav {
  width: min(1320px, calc(100% - 48px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; position: relative; z-index: 2; }
.logo {
  width: 220px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logoBlue { width: 220px; height: 74px; padding: 0; }
.navLinks { display: flex; align-items: center; gap: 2px; }
.navLinks > button, .solutionWrap > button {
  border: 0;
  background: transparent;
  color: #18364d;
  cursor: pointer;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}
.demoNav {
  border: 1px solid rgba(24, 54, 77, .28) !important;
  border-radius: 10px;
  margin-left: 10px;
  padding-inline: 18px !important;
  background: rgba(255,255,255,.72) !important;
  color: #18364d !important;
  transition: .25s ease;
}
.demoNav:hover { background: #18364d !important; color: #fff !important; }
.headerLight {
  background: rgba(249, 251, 252, .93);
  border-color: rgba(40, 67, 86, .11);
  box-shadow: 0 10px 35px rgba(40, 60, 75, .08);
}
.headerLight.headerScrolled { background: rgba(249, 251, 252, .97); }
.solutionWrap { position: relative; }
.menuChevron { transition: transform .2s ease; display: inline-block; }
.menuChevronOpen { transform: rotate(180deg); }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(520px, calc(100vw - 32px));
  padding: 10px;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 145, 255, .2), transparent 38%),
    linear-gradient(145deg, rgba(10, 40, 78, .98), rgba(4, 20, 45, .98));
  border: 1px solid rgba(151, 207, 255, .2);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 7, 25, .46);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .2s ease;
}
.dropdownOpen { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown button {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 15px 14px;
  border-radius: 12px;
  text-align: left;
  color: #f3f8ff;
  cursor: pointer;
}
.dropdown button:hover { background: rgba(96, 181, 255, .1); }
.dropdown button > div { min-width: 0; overflow: hidden; }
.dropdown strong, .dropdown small { display: block; }
.dropdown strong { font-size: 18px; margin-bottom: 6px; }
.dropdown small { max-width: 100%; color: #aebdca; font-size: 15px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aboutDropdown { width: min(390px, calc(100vw - 32px)); }
.dropdown svg { width: 15px; height: 15px; flex-shrink: 0; color: #aebdca; }
.menuButton { display: none; color: #18364d; background: transparent; border: 0; cursor: pointer; }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 760px;
  overflow: hidden;
  color: white;
  background: transparent;
}
.heroVideo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  filter: contrast(1.08) saturate(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.88) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.88) 72%, transparent 100%);
}
.heroOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 85% 20%, rgba(40, 128, 169, .28), transparent 36%),
    linear-gradient(135deg, rgba(5, 22, 44, .66), rgba(19, 63, 84, .42));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.88) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.88) 72%, transparent 100%);
}
.heroInner { position: relative; z-index: 4; min-height: 100vh; min-height: 760px; display: flex; align-items: flex-end; padding-bottom: 108px; }
.heroContent { max-width: 760px; animation: rise .9s cubic-bezier(.2,.75,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 { margin: 21px 0 20px; font-size: clamp(48px, 6.3vw, 86px); line-height: .98; letter-spacing: -.055em; font-weight: 750; color: #fff; }
.hero h1 span { color: #a9dcff; }
.heroActions { display: flex; gap: 12px; margin-top: 34px; }
.primaryButton, .secondaryButton {
  min-height: 52px;
  border-radius: 11px;
  padding: 0 21px;
  border: 1px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: .25s ease;
}
.primaryButton { background: white; color: var(--navy); }
.primaryButton:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(127,205,255,.28); }
.secondaryButton { color: white; background: rgba(0,0,0,.08); backdrop-filter: blur(8px); }
.secondaryButton:hover { background: white; color: var(--navy); transform: translateY(-3px); }

/* ===== SECTIONS COMMON ===== */
.dataSection, .aboutSection { padding: 110px 0; background: transparent; scroll-margin-top: 88px; }
.standaloneTop { padding-top: 170px; }
.modulesSection { padding: 116px 0 120px; background: var(--sectionBackground); }
.modulesSection.standaloneTop { padding-top: 170px; }
.whySection { position: relative; padding: 120px 0; background: var(--sectionBackground); }
.howSection { padding: 100px 0; color: var(--navy); background: var(--sectionBackground); scroll-margin-top: 70px; }
.faqSection { padding: 120px 0; background: var(--sectionBackground); scroll-margin-top: 70px; }
.ctaSection { padding: 0 0 90px; background: var(--sectionBackground); }
.detailSection { padding: 42px 0; background: var(--sectionBackground); scroll-margin-top: 88px; }
.detailAlt { background: var(--sectionBackground); }

/* ===== SECTION HEADINGS ===== */
.sectionHeading { max-width: 680px; margin-bottom: 48px; }
.sectionHeading.centered { text-align: center; margin-inline: auto; }
.sectionHeading h2, .faqIntro h2 { margin: 13px 0 15px; color: var(--navy); font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.04em; }
.sectionHeading p, .faqIntro > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.eyebrow { display: inline-block; color: #0871e3; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }

/* ===== MODULE CARDS ===== */
.moduleGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.moduleCard {
  position: relative;
  min-height: 260px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 35px rgba(28, 72, 113, .08);
  text-align: left;
  color: var(--navy);
  cursor: pointer;
  transition: .3s ease;
  overflow: hidden;
}
.moduleCard::after { content: ""; position: absolute; inset: auto -30% -50% 15%; height: 180px; border-radius: 50%; background: var(--cardGlow); filter: blur(45px); opacity: .12; }
.moduleCard:hover { transform: translateY(-8px); box-shadow: 0 22px 55px rgba(28, 72, 113, .14); }
.moduleTop { display: flex; align-items: center; justify-content: space-between; color: #91a0b2; font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 14px; }
.moduleTop div { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: var(--cardColor); background: var(--cardBg); }
.moduleTop div svg { width: 22px; height: 22px; }
.moduleCard h3 { font-size: 26px; margin: 0 0 10px; letter-spacing: -.02em; }
.moduleCard p { margin: 0 0 auto; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cardLink { position: absolute; bottom: 20px; left: 24px; color: var(--cardColor); font-size: 14px; font-weight: 800; }
.toneblue  { --cardColor: #3f7185; --cardBg: #eaf1f3; --cardGlow: #6b9caf; }
.tonepurple{ --cardColor: #6b6688; --cardBg: #f0eff4; --cardGlow: #8d88a8; }
.tonecyan  { --cardColor: #477f99; --cardBg: #eaf2f5; --cardGlow: #75a6b9; }
.tonegreen { --cardColor: #3e7f73; --cardBg: #ebf3f1; --cardGlow: #70a398; }

/* ===== DETAIL SECTIONS ===== */
.detailPanel {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 4.5vw, 58px);
  border: 1px solid rgba(111, 158, 202, .27);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(89, 177, 255, .12), transparent 34%),
    rgba(255, 255, 255, .86);
  box-shadow: 0 20px 55px rgba(37, 79, 119, .1);
  backdrop-filter: blur(18px);
  color: #102b4d;
}
.detailIntro h2 { margin: 0 0 20px; font-size: clamp(38px, 4.2vw, 58px); letter-spacing: -.045em; line-height: 1.02; color: #09294f; }
.detailIntro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.capabilityPanel h3 { font-size: 29px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.025em; color: #09294f; }
.capabilityPanel > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.capabilityList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.capabilityList article {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #d8e6f2;
  border-radius: 14px;
  color: #193d62;
  background: rgba(247, 251, 255, .94);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  transition: .25s ease;
}
.capabilityList article:hover { transform: translateY(-3px); border-color: #a9cceb; background: #fff; box-shadow: 0 10px 24px rgba(38, 91, 139, .09); }

/* ===== DASHBOARD VISUALS ===== */
.dashboard {
  min-width: 0;
  height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #d7e6f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(26, 70, 111, .09);
  overflow: hidden;
}
.dashboardTop { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #e7eef5; color: #415a76; font-size: 13px; font-weight: 700; }
.live { display: flex; align-items: center; gap: 6px; color: #16875e; font-size: 12px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #27c98b; box-shadow: 0 0 0 4px rgba(39,201,139,.12); display: inline-block; }
/* Supply chain dashboard */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.flowItem { position: relative; display: grid; justify-items: center; gap: 7px; color: #3f5b78; font-size: 11px; font-weight: 650; }
.flowIcon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #e8f4ff; color: #0879ff; }
.flowIcon svg { width: 20px; height: 20px; }
.flowArrow { position: absolute; right: -14px; top: 15px; color: #9fb6ca; width: 15px; height: 15px; }
.miniGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.miniCard { padding: 13px; border: 1px solid #e2eaf2; border-radius: 10px; }
.miniCard small, .miniCard strong, .miniCard span { display: block; }
.miniCard small { color: #61758e; font-size: 10px; }
.miniCard strong { margin: 6px 0 4px; font-size: 21px; color: #0f2a45; letter-spacing: -.02em; }
.miniCard span { color: #16875e; font-size: 10px; }
.forecast { padding: 13px 14px 0; background: #f6faff; border-radius: 10px; }
.forecast > div { display: flex; justify-content: space-between; font-size: 11px; color: #50677f; }
.forecast strong { color: #0879ff; }
.forecast svg { width: 100%; height: 90px; display: block; margin-top: 6px; }
/* Executive dashboard */
.execTop { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; }
.heroMetric, .riskCard { padding: 13px; border: 1px solid #e3ebf3; border-radius: 11px; }
.heroMetric small, .riskCard small { display: block; color: #5f748c; font-size: 10px; }
.heroMetric strong { display: block; margin: 7px 0 4px; font-size: 24px; color: #0f2a45; }
.heroMetric span { display: block; color: #16875e; font-size: 10px; }
.ring { display: grid; place-items: center; }
.ring > div { width: 82px; height: 82px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, white 54%, transparent 55%), conic-gradient(#0879ff 0 35%, #dfeaf4 35% 100%); }
.ring strong { display: block; font-size: 16px; color: #0f2a45; }
.ring small { display: block; color: #657a92; font-size: 9px; }
.riskCard svg { color: #7457e8; width: 20px; height: 20px; }
.riskCard strong { display: block; font-size: 18px; margin: 4px 0; color: #0f2a45; }
.riskCard span { display: block; color: #62778f; font-size: 9px; }
.chartPanel { padding: 13px; background: #f7faff; border-radius: 11px; }
.chartHeader { display: flex; justify-content: space-between; font-size: 10px; color: #5d738b; }
.chartHeader strong { color: #173451; }
.barChart { height: 100px; margin: 10px 0 4px; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid #dce7f0; }
.barChart i { flex: 1; max-height: 95px; border-radius: 3px 3px 0 0; background: linear-gradient(#4e9dff, #0879ff); opacity: .82; display: block; }
.chartLabels { display: flex; justify-content: space-between; color: #71849a; font-size: 9px; margin-top: 3px; }
.segmentRows, .downtime, .pareto { display: grid; gap: 7px; }
.segmentRows > div, .downtime > div, .pareto > div { display: grid; grid-template-columns: 110px 1fr 34px; gap: 8px; align-items: center; font-size: 10px; color: #516a82; }
.segmentRows i, .downtime i, .pareto i { height: 5px; background: #e7eef5; border-radius: 99px; overflow: hidden; display: block; }
.segmentRows b, .downtime b, .pareto b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0879ff, #6ab9ff); }
.downtime b { background: linear-gradient(90deg, #735be3, #a99af2); }
.pareto b { background: linear-gradient(90deg, #16875e, #54c99f); }
/* Factory dashboard */
.lineMap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lineMap::before { content: ""; position: absolute; top: 30px; left: 7%; right: 7%; height: 2px; background: #b7d5ef; z-index: 0; }
.machine { position: relative; z-index: 1; padding: 10px 6px; display: grid; justify-items: center; gap: 3px; border: 1px solid #dfe9f2; border-radius: 11px; background: #fff; text-align: center; }
.machine > span { position: absolute; top: 5px; left: 6px; color: #8295a8; font-size: 9px; }
.machine svg { margin: 4px 0; color: #0879ff; width: 19px; height: 19px; }
.machine strong { font-size: 10px; color: #1b3652; }
.machine small { color: #16875e; font-size: 9px; }
.machineAlert { border-color: #f1c87c; background: #fffaf0; }
.machineAlert svg { color: #e39420; }
.machineAlert small { color: #d2810b; }
.factoryGrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.oeeCard { padding: 12px; border-radius: 11px; background: #f7faff; }
.oeeCard > small { color: #596f87; font-size: 10px; display: block; }
.bigGauge { width: 100px; height: 100px; margin: 8px auto; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, #f7faff 60%, transparent 61%), conic-gradient(#0879ff 0 82%, #dce9f4 82%); }
.bigGauge strong { display: block; font-size: 22px; color: #0f2a45; }
.bigGauge span { display: block; color: #61768f; font-size: 9px; }
.gaugeLegend { display: flex; justify-content: space-between; color: #58728b; font-size: 9px; }
.downtime { padding: 12px; border-radius: 11px; background: #f7faff; }
.downtime > small { display: block; color: #596f87; font-size: 10px; margin-bottom: 8px; }
.downtime > div { grid-template-columns: 58px 1fr 26px; }
/* Quality dashboard */
.qualityTop { display: grid; grid-template-columns: 1.45fr .75fr; gap: 10px; }
.heatmap, .qualityScore { padding: 13px; border: 1px solid #e2eaf2; border-radius: 11px; }
.heatmap > small { display: block; color: #596f87; font-size: 10px; margin-bottom: 8px; }
.heatmap > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.heatmap i { aspect-ratio: 1; border-radius: 3px; background: #e9f2f8; display: block; }
.heatmap i[data-level="1"] { background: #c8e6f8; }
.heatmap i[data-level="2"] { background: #7fc7ee; }
.heatmap i[data-level="3"] { background: #39a1dc; }
.heatmap i[data-level="4"] { background: #0c70b9; }
.qualityScore { display: grid; align-content: center; justify-items: center; color: #16875e; }
.qualityScore svg { width: 22px; height: 22px; }
.qualityScore strong { font-size: 30px; color: var(--navy); margin: 3px 0; display: block; }
.qualityScore small { color: #627990; font-size: 10px; display: block; }
.qualityScore span { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 5px 7px; border-radius: 6px; background: #e9f8f2; font-size: 9px; }
.qualityScore span svg { width: 10px; height: 10px; }
.pareto { padding: 12px; border-radius: 11px; background: #f7faff; }
.pareto > small { display: block; color: #596f87; font-size: 10px; margin-bottom: 8px; }
.pareto > div { grid-template-columns: 58px 1fr 26px; }
.rootCause { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border: 1px solid #e2eaf2; border-radius: 9px; color: #58728b; font-size: 10px; font-weight: 700; }
.rootCause span { padding: 5px 7px; border-radius: 6px; background: #f3f7fa; }
.rootCause svg { width: 13px; height: 13px; }
.activeCause { color: #0879ff !important; background: #e8f4ff !important; }

/* ===== WHY TAKSA ===== */
.networkPattern { position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(#9ecbee 1px, transparent 1px); background-size: 25px 25px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.whySection .container { position: relative; }
.whyGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.whyCard { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(28,72,113,.06); overflow: hidden; transition: .3s ease; }
.whyCard:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(28,72,113,.12); }
.whyCard > div { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 12px; color: #0879ff; background: #e8f4ff; margin-bottom: 14px; }
.whyCard > div svg { width: 22px; height: 22px; }
.whyCard h3 { margin: 0 0 10px; font-size: 22px; color: #09294f; }
.whyCard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ===== DATA CARE CARDS ===== */
.dataPrinciples, .aboutGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.dataPrinciples article, .aboutGrid article {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(28,72,113,.06);
}
.dataPrinciples article > div, .aboutGrid article > div { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 12px; color: #0879ff; background: #e8f4ff; margin-bottom: 14px; }
.dataPrinciples article > div svg, .aboutGrid article > div svg { width: 22px; height: 22px; }
.dataPrinciples h3, .aboutGrid strong { display: block; color: #09294f; font-size: 21px; margin: 0 0 12px; }
.dataPrinciples p, .aboutGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ===== HOW IT WORKS ===== */
.processPanel, .agentsSection, .platformPanel {
  border: 1px solid #cfe2f4;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 22px 60px rgba(29,78,124,.09);
}
.processPanel { padding: 38px 38px 30px; }
.processFlow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 20px; align-items: center; }
.processStep { text-align: center; }
.processIcon {
  width: 78px; height: 78px; margin: 0 auto 16px; display: grid; place-items: center;
  border: 1px solid #cbdff5; border-radius: 50%; color: #176fe5;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: 0 11px 28px rgba(23,111,229,.1);
}
.processIcon svg { width: 28px; height: 28px; }
.processStep > span { display: block; color: #155ec8; font-size: 17px; font-weight: 800; }
.processStep p { max-width: 200px; margin: 9px auto 0; color: #536b85; font-size: 14px; line-height: 1.6; }
.processArrow { color: #4088d4; font-size: 28px; font-style: normal; line-height: 1; }
.businessImpact {
  margin-top: 28px; padding: 20px 24px;
  display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 14px; align-items: center;
  border: 1px solid #d5e5f4; border-radius: 15px;
  background: linear-gradient(105deg, #edf5ff, #f8fbff);
}
.impactTitle { display: flex; align-items: center; gap: 10px; color: #176fe5; }
.impactTitle strong { font-size: 17px; }
.impactMetric { text-align: center; }
.impactMetric strong { display: block; color: #176fe5; font-size: 20px; }
.impactMetric span { display: block; margin-top: 4px; color: #526982; font-size: 12px; }
.agentsSection, .platformPanel { margin-top: 22px; padding: 44px 36px 36px; }
.subsectionHeading { text-align: center; margin-bottom: 32px; }
.subsectionHeading h3 { margin: 7px 0 7px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.035em; color: #09294f; }
.subsectionHeading p { margin: 0; color: #52677f; font-size: 15px; }
.agentActionLayout { display: grid; grid-template-columns: 150px 34px 1fr; gap: 14px; align-items: center; }
.sourceSystems { padding: 0; display: grid; gap: 0; overflow: hidden; border: 1px solid #cadbec; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(31,82,129,.06); }
.sourceSystems span { min-height: 54px; padding: 10px 13px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #dce7f2; color: #2f4863; background: #fff; font-size: 13px; font-weight: 700; }
.sourceSystems span:last-child { border-bottom: 0; }
.sourceSystems svg { color: #176fe5; width: 16px; height: 16px; }
.sourceArrow { display: grid; place-items: center; color: #477f99; font-size: 28px; font-style: normal; font-weight: 500; }
.agentActionArrow { display: grid; place-items: center; color: #477f99; font-size: 24px; font-style: normal; font-weight: 500; }
.agentActionGrid { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.actionAgent { overflow: hidden; min-width: 0; min-height: 380px; border: 1px solid #c7d8e9; border-radius: 17px; background: #fff; box-shadow: 0 14px 34px rgba(29,76,120,.08); }
.actionAgentHead { min-height: 88px; padding: 16px 15px; display: flex; align-items: center; gap: 10px; color: white; background: var(--agentGradient); }
.actionAgentHead strong { font-size: 16px; line-height: 1.35; }
.actionAgentList { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.actionAgentList p { margin: 0; color: #2f465f; font-size: 13px; line-height: 1.5; }
.agentBlue   { --agentGradient: linear-gradient(135deg, #2f718e, #285d79); }
.agentPurple { --agentGradient: linear-gradient(135deg, #6b6688, #514c70); }
.agentGreen  { --agentGradient: linear-gradient(135deg, #3e7f73, #2d655c); }
.knowledgeLinks { width: calc(100% - 198px); height: 44px; margin: 0 0 0 auto; display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; justify-items: center; color: #477f99; font-size: 24px; }
.knowledgeCore {
  width: calc(100% - 168px); margin: 0 0 0 auto; min-height: 78px; padding: 14px 20px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  border: 1px solid #d3e2f1; border-radius: 13px; color: #176fe5; background: #f7fbff; text-align: left;
}
.knowledgeCore strong { color: #173c69; font-size: 16px; display: block; }
.knowledgeCore span { margin-top: 3px; color: #657b92; font-size: 12px; display: block; }
.platformFeatures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 30px; }
.platformFeatures article { padding: 16px 13px; text-align: center; border: 1px solid #dce8f3; border-radius: 13px; background: #fbfdff; }
.platformFeatures article > div { width: 42px; height: 42px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; color: #176fe5; background: #eaf4ff; }
.platformFeatures article > div svg { width: 18px; height: 18px; }
.platformFeatures strong { display: block; color: #1b385b; font-size: 13px; line-height: 1.4; }
.platformFeatures p { margin: 6px 0 0; color: #65798f; font-size: 12px; line-height: 1.5; }
.prebuiltConnectors { margin-top: 20px; padding: 16px; border: 1px solid #d5e4f2; border-radius: 13px; background: linear-gradient(90deg, #f3f8ff, #fbfdff); text-align: center; }
.prebuiltConnectors > strong { color: #234366; font-size: 12px; display: block; }
.prebuiltConnectors > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-top: 11px; }
.prebuiltConnectors span { min-height: 42px; padding: 6px; display: grid; place-items: center; border: 1px solid #dae6f1; border-radius: 7px; color: #34516d; background: white; font-size: 9px; font-weight: 800; }
.outcomeStrip { margin-top: 20px; padding: 18px 22px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 13px; color: #176fe5; background: linear-gradient(100deg, #eaf3ff, #f4f8ff); }
.outcomeStrip strong { color: #193d69; font-size: 15px; display: block; }
.outcomeStrip span { margin-top: 3px; color: #516d8b; font-size: 11px; display: block; }

/* ===== CTA SECTION ===== */
.ctaCard {
  position: relative; overflow: hidden; padding: 46px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 46px;
  border: 1px solid rgba(76, 114, 132, .2); border-radius: 26px;
  color: #17364b;
  background:
    radial-gradient(circle at 92% 12%, rgba(94, 162, 164, .18), transparent 30%),
    linear-gradient(130deg, rgba(255,255,255,.98), rgba(236, 244, 244, .96));
  box-shadow: 0 24px 65px rgba(42, 73, 87, .12);
}
.ctaCard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(#477f99, #68a398); }
.ctaCard > div { max-width: 740px; }
.ctaCopy span { display: block; margin-bottom: 8px; color: #477f99; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.ctaCard p { margin: 0; max-width: 700px; color: #28495d; font-size: clamp(18px, 2vw, 25px); font-weight: 650; line-height: 1.45; letter-spacing: -.02em; }
.ctaCard .primaryButton { flex: 0 0 auto; color: #fff; border-color: #244c61; background: #244c61; box-shadow: 0 12px 28px rgba(36, 76, 97, .2); }
.ctaCard .primaryButton:hover { background: #17384a; box-shadow: 0 15px 32px rgba(36, 76, 97, .25); }

/* ===== FAQ ===== */
.faqLayout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.faqIntro { position: sticky; top: 120px; }
.faqIntro h2 { margin-top: 12px; font-size: clamp(32px, 4.2vw, 50px); letter-spacing: -.04em; line-height: 1.05; color: var(--navy); }
.faqIntro > p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0; }
.faqSignal { margin-top: 28px; padding: 15px; display: flex; gap: 11px; border: 1px solid #dce9f5; border-radius: 12px; background: #f4f9fe; color: #0879ff; }
.faqSignal strong { color: var(--navy); font-size: 12px; display: block; }
.faqSignal small { color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 3px; display: block; }
.faqList { display: grid; gap: 8px; }
.faqItem { border: 1px solid #dce7f1; border-radius: 12px; background: #fff; transition: .25s ease; overflow: hidden; }
.faqItem button { width: 100%; padding: 17px 18px; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--navy); text-align: left; font-size: 14px; font-weight: 700; cursor: pointer; }
.faqItem button i { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #eef6fd; color: #0879ff; font-style: normal; font-size: 17px; line-height: 1; }
.faqItem > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faqItem > div p { min-height: 0; overflow: hidden; margin: 0; padding: 0 18px; color: var(--muted); font-size: 14px; line-height: 1.7; transition: padding .3s ease; }
.faqActive { border-color: #9dcbf5; box-shadow: 0 10px 30px rgba(25,89,145,.08); }
.faqActive > div { grid-template-rows: 1fr; }
.faqActive > div p { padding-bottom: 18px; }

/* ===== FOOTER ===== */
.footer { padding: 68px 0 22px; background: var(--sectionBackground); border-top: 1px solid #c8dded; }
.footerMain { display: flex; justify-content: space-between; gap: 55px; padding-bottom: 46px; }
.footerBrand { max-width: 340px; }
.footerBrand .logo { width: 220px; height: 78px; padding: 0; }
.footerBrand p { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.footerLinks { display: flex; gap: 80px; }
.footerLinks > div { display: grid; align-content: start; gap: 10px; min-width: 110px; }
.footerLinks strong { margin-bottom: 4px; font-size: 12px; color: #17395b; }
.footerLinks button, .footerLinks a { padding: 0; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 11px; cursor: pointer; }
.footerLinks button:hover, .footerLinks a:hover { color: #0879ff; }
.footerBottom { padding-top: 19px; border-top: 1px solid #dce7f0; display: flex; justify-content: space-between; color: #8190a2; font-size: 9px; }
.footerBottom span:last-child { display: flex; align-items: center; gap: 6px; color: #16875e; }
.footerBottom i { width: 6px; height: 6px; border-radius: 50%; background: #21bf83; display: inline-block; }

/* ===== MODAL ===== */
.modalBackdrop { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(1,8,22,.76); backdrop-filter: blur(18px); animation: fadeBg .2s ease; }
.modalBackdrop.open { display: grid; }
@keyframes fadeBg { from { opacity: 0; } }
.modal {
  position: relative; width: min(590px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 42px; color: #102b4d;
  border: 1px solid #d5e4f2; border-radius: 25px;
  background: radial-gradient(circle at 92% 4%, rgba(65, 166, 255, .12), transparent 30%), linear-gradient(145deg, #ffffff 0%, #f3f9ff 55%, #f8fbff 100%);
  box-shadow: 0 24px 70px rgba(10,40,90,.14), 0 2px 12px rgba(0,0,0,.06);
  animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(15px) scale(.98); } }
.modalClose { position: absolute; top: 17px; right: 17px; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #d0dff0; border-radius: 50%; background: #f0f6ff; color: #4a6582; cursor: pointer; transition: .2s ease; }
.modalClose:hover { background: #e1edf9; color: #102b4d; }
.modalClose svg { width: 16px; height: 16px; }
.modalIcon { width: 190px; margin: -10px 0 12px; }
.modalIcon img { width: 190px; height: auto; display: block; }
.modal h2 { margin: 8px 0 8px; font-size: 34px; letter-spacing: -.04em; color: #0a2240; }
.modal > p { margin: 0 0 22px; color: #5d7a96; font-size: 13px; line-height: 1.65; }
.modal form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.modal label { display: grid; gap: 6px; color: #3b5572; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.modal label:nth-child(4), .formSubmit { grid-column: 1 / -1; }
.modal input, .modal textarea { width: 100%; border: 1px solid #cdddf0; border-radius: 10px; padding: 12px; color: #102b4d; background: #ffffff; outline: none; resize: vertical; font-size: 13px; }
.modal input::placeholder, .modal textarea::placeholder { color: #8aaabf; }
.modal input:focus, .modal textarea:focus { border-color: #0879ff; box-shadow: 0 0 0 3px rgba(8,121,255,.1); }
.formSubmit { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; border: 1px solid #0a2240; border-radius: 10px; background: #0a2240; color: #fff; font-weight: 800; cursor: pointer; transition: .25s ease; }
.formSubmit:hover { background: #061a38; transform: translateY(-2px); }
.formSubmit svg { width: 16px; height: 16px; }
.successState { min-height: 320px; display: grid; place-content: center; justify-items: center; text-align: center; }
.successState > div { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; color: #16875e; background: #e3f8ef; }
.successState > div svg { width: 28px; height: 28px; }
.successState h2 { margin-top: 20px; color: #0a2240; font-size: 30px; }
.successState p { max-width: 310px; color: #5d7a96; line-height: 1.6; }
.successState button { margin-top: 10px; padding: 10px 22px; border: 1px solid #0a2240; border-radius: 9px; color: #fff; background: #0a2240; cursor: pointer; font-weight: 700; transition: .25s ease; }
.successState button:hover { background: #061a38; }

/* ===== HOME DARK THEME ===== */
body.home .site {
  --navy: #061a38;
  --blue: #0879ff;
  --cyan: #63c9ff;
  --muted: #a9bdd4;
  --line: rgba(151,205,255,.16);
  color: #f4f8ff;
  background:
    linear-gradient(rgba(125, 193, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 193, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 85% 4%, rgba(39, 152, 255, .38), transparent 23%),
    radial-gradient(circle at 8% 40%, rgba(21, 111, 225, .26), transparent 28%),
    radial-gradient(circle at 92% 72%, rgba(42, 126, 236, .22), transparent 24%),
    linear-gradient(145deg, #061a38 0%, #082d5c 44%, #071f43 72%, #061a38 100%);
  background-size: 64px 64px, 64px 64px, auto, auto, auto, auto;
}
body.home .sectionHeading h2 { color: #f7faff; }
body.home .sectionHeading p { color: #a9bdd4; }
body.home .eyebrow { color: #75c8ff; }
body.home .whyCard, body.home .dataPrinciples article {
  border-color: rgba(151, 205, 255, .16);
  background: radial-gradient(circle at 100% 0, rgba(47, 145, 255, .13), transparent 34%), linear-gradient(145deg, rgba(16, 48, 88, .82), rgba(6, 25, 55, .9));
  box-shadow: 0 22px 58px rgba(0, 8, 26, .2);
  backdrop-filter: blur(18px);
}
body.home .whyCard h3, body.home .dataPrinciples h3 { color: #f7faff; }
body.home .whyCard p, body.home .dataPrinciples p { color: #a9bdd4; }
body.home .whyCard > div, body.home .dataPrinciples article > div { color: #6fc5ff; background: rgba(63, 153, 245, .13); }
body.home .faqItem { border-color: rgba(151, 205, 255, .16); background: radial-gradient(circle at 100% 0, rgba(47, 145, 255, .13), transparent 34%), linear-gradient(145deg, rgba(16, 48, 88, .82), rgba(6, 25, 55, .9)); }
body.home .faqItem button { color: #eef6ff; }
body.home .faqItem button i { color: #6fc5ff; background: rgba(63, 153, 245, .13); }
body.home .faqItem > div p { color: #9db3ca; }
body.home .faqActive { border-color: rgba(117, 200, 255, .48); }
body.home .faqSignal { border-color: rgba(151, 205, 255, .16); background: radial-gradient(circle at 100% 0, rgba(47, 145, 255, .13), transparent 34%), linear-gradient(145deg, rgba(16, 48, 88, .82), rgba(6, 25, 55, .9)); }
body.home .faqSignal strong { color: #f5f9ff; }
body.home .faqSignal small { color: #9db3ca; }
body.home .faqIntro h2 { color: #f7faff; }
body.home .faqIntro > p { color: #a9bdd4; }
body.home .processPanel, body.home .agentsSection, body.home .platformPanel {
  border-color: rgba(151, 205, 255, .16);
  background: radial-gradient(circle at 100% 0, rgba(47, 145, 255, .13), transparent 34%), linear-gradient(145deg, rgba(16, 48, 88, .82), rgba(6, 25, 55, .9));
  box-shadow: 0 22px 58px rgba(0, 8, 26, .2);
  backdrop-filter: blur(18px);
}
body.home .subsectionHeading h3 { color: #f7faff; }
body.home .subsectionHeading p { color: #a9bdd4; }
body.home .processStep > span { color: #73c5ff; }
body.home .processStep p { color: #a5bad0; }
body.home .impactTitle, body.home .impactMetric strong { color: #73c5ff; }
body.home .impactMetric span { color: #a5bad0; }
body.home .agentStatus, body.home .forecast, body.home .chartPanel, body.home .oeeCard, body.home .downtime, body.home .pareto, body.home .businessImpact, body.home .knowledgeCore, body.home .platformFeatures article, body.home .prebuiltConnectors, body.home .outcomeStrip { border-color: rgba(148, 204, 255, .12); background: rgba(4, 20, 46, .48); }
body.home .knowledgeCore strong { color: #f5f9ff; }
body.home .knowledgeCore span, body.home .platformFeatures p, body.home .outcomeStrip span { color: #9db3ca; }
body.home .platformFeatures strong, body.home .prebuiltConnectors > strong, body.home .outcomeStrip strong { color: #f5f9ff; }
body.home .knowledgeLinks, body.home .knowledgeCore, body.home .outcomeStrip { color: #73c5ff; }
body.home .sourceSystems, body.home .actionAgent { border-color: rgba(150, 205, 255, .15); background: rgba(4, 20, 46, .52); }
body.home .sourceSystems span, body.home .actionAgentList p { color: #c2d2e3; border-color: rgba(151, 204, 255, .1); }
body.home .prebuiltConnectors span { color: #bed0e2; border-color: rgba(145, 201, 255, .13); background: rgba(255,255,255,.05); }
body.home .networkPattern { opacity: .2; background-image: radial-gradient(rgba(119, 194, 255, .6) 1px, transparent 1px); }
body.home .ctaCard { border-color: rgba(146, 207, 255, .2); background: radial-gradient(circle at 85% 20%, rgba(39, 152, 255, .45), transparent 35%), linear-gradient(135deg, rgba(6, 26, 56, .92), rgba(10, 59, 116, .88)); }
body.home .ctaCopy span { color: #75c8ff; }
body.home .ctaCard p { color: #c2d4e6; }
body.home .footer { border-color: rgba(145, 200, 255, .14); }
body.home .footerLinks strong { color: #f1f7ff; }
body.home .footerBottom { color: #809bb6; border-color: rgba(153, 205, 255, .12); }
body.home .dashboardTop { border-color: rgba(154, 205, 255, .12); color: #9bb2ca; }
body.home .miniCard strong, body.home .heroMetric strong, body.home .riskCard strong, body.home .machine strong, body.home .bigGauge strong { color: #f5f9ff; }
body.home .miniCard, body.home .heroMetric, body.home .riskCard, body.home .machine, body.home .heatmap, body.home .qualityScore, body.home .rootCause { border-color: rgba(149, 205, 255, .14); background: rgba(255,255,255,.045); }
body.home .qualityScore strong { color: #f5f9ff; }
body.home .ring > div { background: radial-gradient(circle, #0b2b55 54%, transparent 55%), conic-gradient(#42a1ff 0 35%, rgba(175, 210, 241, .18) 35% 100%); }
body.home .bigGauge { background: radial-gradient(circle, #0a284f 60%, transparent 61%), conic-gradient(#258cff 0 82%, rgba(176, 211, 241, .18) 82%); }
body.home .segmentRows i, body.home .downtime i, body.home .pareto i { background: rgba(203, 225, 245, .14); }
body.home .lineMap::before { background: rgba(132, 193, 244, .32); }
body.home .rootCause span { background: rgba(255,255,255,.06); }
body.home .activeCause { color: #7ecbff !important; background: rgba(47, 145, 255, .16) !important; }
body.home .moduleCard { border-color: rgba(151, 205, 255, .16); background: radial-gradient(circle at 100% 0, rgba(47, 145, 255, .13), transparent 34%), linear-gradient(145deg, rgba(16, 48, 88, .82), rgba(6, 25, 55, .9)); color: #f4f8ff; }
body.home .moduleCard p { color: #a9bdd4; }
body.home .moduleTop { color: #91abc6; }
body.home .moduleTop div { color: #6fc5ff; background: rgba(63, 153, 245, .13); border-color: rgba(127, 199, 255, .18); }
body.home .navLinks > button, body.home .solutionWrap > button { color: #fff; }
body.home .demoNav { border-color: rgba(255,255,255,.35) !important; background: transparent !important; color: #fff !important; }
body.home .demoNav:hover { background: #fff !important; color: var(--navy) !important; }
body.home .menuButton { color: #fff; }
body.home .headerLight.headerScrolled { background: rgba(4, 18, 39, .96); border-color: rgba(255,255,255,.1); }
body.home .flowItem, body.home .forecast > div, body.home .chartLabels, body.home .machine > span, body.home .gaugeLegend { color: #9bb2ca; }

/* ===== ABOUT NEUTRAL THEME ===== */
body.about .site {
  --blue: #477f99;
  --cyan: #68a398;
  --muted: #627382;
  --line: #d9e1e4;
  color: #18364b;
  background:
    linear-gradient(rgba(76, 108, 121, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 108, 121, .045) 1px, transparent 1px),
    radial-gradient(circle at 88% 6%, rgba(117, 164, 168, .15), transparent 27%),
    radial-gradient(circle at 6% 45%, rgba(113, 146, 161, .1), transparent 29%),
    linear-gradient(145deg, #fbfcfb 0%, #f1f5f3 50%, #f8faf9 100%);
}
body.about .sectionHeading h2, body.about .faqIntro h2 { color: #17364b; }
body.about .eyebrow { color: #477f99; }
body.about .whyCard, body.about .faqItem { border-color: rgba(75, 105, 118, .2); background: radial-gradient(circle at 100% 0, rgba(104, 163, 152, .08), transparent 34%), rgba(255,255,255,.9); }
body.about .faqItem button { color: #17364b; }
body.about .faqSignal { border-color: rgba(75, 105, 118, .2); background: rgba(255,255,255,.9); }
body.about .ctaCard { border-color: rgba(76, 114, 132, .2); background: radial-gradient(circle at 92% 12%, rgba(104, 163, 152, .18), transparent 30%), linear-gradient(130deg, rgba(255,255,255,.98), rgba(236, 244, 242, .97)); }
body.about .footerLinks strong { color: #17395b; }
body.about .footerLinks button:hover, body.about .footerLinks a:hover { color: #477f99; }
body.about .aboutGrid article { border-color: rgba(75, 105, 118, .2); background: rgba(255,255,255,.9); }
body.about .aboutGrid strong { color: #17364b; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1120px) {
  .container, .nav { width: min(100% - 32px, 1180px); }
  .header { height: 78px; }
  .headerScrolled { height: 72px; }
  .logo { width: 170px; height: 68px; }
  .menuButton { display: grid; place-items: center; position: relative; z-index: 2; }
  .navLinks {
    position: fixed; inset: 0; padding: 96px 22px 28px;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(4,18,39,.98); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(-15px); transition: .25s ease;
  }
  .navOpen { opacity: 1; visibility: visible; transform: translateY(0); }
  .headerLight .navLinks { background: rgba(250, 252, 251, .99); }
  .headerLight .navLinks > button, .headerLight .solutionWrap > button { color: #18364b; border-color: rgba(45, 70, 82, .1); }
  .navLinks > button, .solutionWrap > button { width: 100%; justify-content: space-between; padding: 13px 8px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 15px; }
  .demoNav { margin: 12px 0 0; justify-content: center !important; }
  .dropdown { position: static; width: 100%; max-height: 0; overflow: hidden; padding: 0; border: 0; border-radius: 10px; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.04); transition: max-height .3s ease, padding .3s ease; }
  .dropdownOpen { max-height: 400px; padding: 5px; }
  .dropdown button { color: white; }
  .dropdown small { color: rgba(255,255,255,.48); }
}
@media (max-width: 980px) {
  .moduleGrid { grid-template-columns: repeat(2, 1fr); }
  .detailPanel { grid-template-columns: 1fr; }
  .capabilityList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .processFlow { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .processArrow { display: none; }
  .businessImpact { grid-template-columns: repeat(2, 1fr); }
  .impactTitle { grid-column: 1 / -1; justify-content: center; }
  .agentActionLayout { grid-template-columns: 120px 28px 1fr; }
  .agentActionGrid { grid-template-columns: 1fr; gap: 10px; }
  .agentActionArrow { transform: rotate(90deg); }
  .knowledgeLinks { display: none; }
  .knowledgeCore { width: calc(100% - 160px); }
  .platformFeatures { grid-template-columns: repeat(3, 1fr); }
  .prebuiltConnectors > div { grid-template-columns: repeat(4, 1fr); }
  .whyGrid { grid-template-columns: repeat(2, 1fr); }
  .dataPrinciples, .aboutGrid { grid-template-columns: 1fr; }
  .faqLayout { grid-template-columns: 1fr; gap: 40px; }
  .faqIntro { position: static; max-width: 620px; }
}
@media (max-width: 760px) {
  .hero, .heroInner { min-height: 700px; }
  .heroInner { padding-bottom: 72px; }
  .hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .heroActions { flex-direction: column; align-items: stretch; max-width: 380px; }
  .modulesSection, .whySection, .faqSection, .dataSection, .aboutSection { padding: 80px 0; }
  .modulesSection.standaloneTop, .aboutSection.standaloneTop { padding-top: 118px; }
  .detailSection { padding: 28px 0; }
  .detailPanel { padding: 26px 20px; border-radius: 18px; }
  .capabilityList { grid-template-columns: 1fr; }
  .processPanel, .agentsSection, .platformPanel { padding: 26px 20px; }
  .processFlow { grid-template-columns: 1fr; }
  .agentActionLayout { grid-template-columns: 1fr; }
  .sourceArrow { transform: rotate(90deg); }
  .sourceSystems { grid-template-columns: repeat(3, 1fr); }
  .platformFeatures { grid-template-columns: repeat(2, 1fr); }
  .prebuiltConnectors > div { grid-template-columns: repeat(4, 1fr); }
  .ctaCard { padding: 34px 26px; flex-direction: column; align-items: flex-start; }
  .footerMain { flex-direction: column; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .knowledgeCore { width: 100%; }
}
@media (max-width: 540px) {
  .moduleGrid, .whyGrid { grid-template-columns: 1fr; }
  .execTop { grid-template-columns: 1fr 1fr; }
  .riskCard { display: none; }
  .lineMap { grid-template-columns: repeat(2, 1fr); }
  .lineMap::before { display: none; }
  .factoryGrid { grid-template-columns: 1fr 1fr; }
  .platformFeatures { grid-template-columns: 1fr; }
  .prebuiltConnectors > div { grid-template-columns: repeat(2, 1fr); }
  .faqItem button { padding: 15px; }
  .footerLinks { gap: 40px; }
  .modal { padding: 28px 20px; }
  .modal form { grid-template-columns: 1fr; }
  .modal label:nth-child(4), .formSubmit { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site, .site *, .site *::before, .site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}