:root {
  --bg: #ffffff;
  --bg-soft: #f8fbff;
  --bg-cyan: #f7fbff;
  --bg-violet: #faf7ff;
  --ink: #082b86;
  --ink-2: #445671;
  --ink-3: #68778f;
  --line: #dbe5f3;
  --line-2: #c9d6e9;
  --cyan: #2dc8f4;
  --cyan-deep: #2b75ff;
  --cyan-soft: #edf9ff;
  --violet: #8149ff;
  --violet-soft: #f2ecff;
  --orange: #ff9e3d;
  --orange-soft: #fff4e8;
  --green: #149b72;
  --green-soft: #e4f7f0;
  --red: #d64d5a;
  --red-deep: #a93443;
  --red-soft: #fff0f2;
  --red-line: #f0c5cb;
  --shadow-xs: 0 8px 24px rgba(16, 35, 84, 0.055);
  --shadow-sm: 0 16px 42px rgba(16, 35, 84, 0.085);
  --shadow-md: 0 30px 90px rgba(16, 35, 84, 0.12);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --container: 1220px;
  --header-height: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --transition: 260ms var(--ease);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 22px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cyan-soft); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.035em; }

h1 {
  max-width: 940px;
  margin-bottom: 22px;
  font-size: clamp(3rem, 5.5vw, 5.65rem);
  font-weight: 790;
}

h1 span {
  background: linear-gradient(112deg, var(--cyan-deep) 0%, var(--cyan) 34%, var(--violet) 70%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(2.15rem, 3.8vw, 3.85rem);
  font-weight: 770;
}

h3 { margin-bottom: 0; font-size: 1.05rem; font-weight: 740; }

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: clamp(78px, 8vw, 118px) 0;
  overflow: clip;
}

.section-heading {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin-bottom: clamp(42px, 5.5vw, 66px);
}

.section-heading-centered { margin-inline: auto; text-align: center; }
.section-heading-centered h2,
.section-heading-centered .section-lead { margin-inline: auto; }

.section-lead {
  max-width: 800px;
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: clamp(1.04rem, 1.45vw, 1.22rem);
  line-height: 1.72;
}

.eyebrow, .strip-label, .journey-label {
  margin-bottom: 17px;
  color: var(--cyan-deep);
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow-danger { color: var(--red-deep); }
.small-line { margin-bottom: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.62; }
.section-small-line { max-width: 760px; margin: 34px auto 0; text-align: center; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 1px solid rgba(43, 117, 255, .18);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-deep) 0%, var(--violet) 58%, var(--orange) 100%);
  box-shadow: 0 14px 28px rgba(43, 117, 255, .16);
  color: #fff;
  font-size: .96rem;
  font-weight: 760;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.button:hover { transform: translateY(-2px); background: linear-gradient(90deg, #225df4 0%, #7143ff 58%, #fb8d31 100%); box-shadow: 0 18px 34px rgba(43, 117, 255, .2); }
.button-small { min-height: 42px; padding: 0 19px; font-size: .88rem; }
.button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(129, 73, 255, .26); outline-offset: 3px; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.76);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled { border-color: rgba(203,216,230,.8); background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(15,35,67,.045); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; }
.wordmark-logo { width: 214px; height: auto; max-height: 45px; object-fit: contain; object-position: left center; }
.wordmark-company { margin-top: -3px; color: var(--ink-3); font-size: .57rem; font-weight: 740; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero */
.hero-section {
  min-height: 100vh;
  padding-top: calc(var(--header-height) + clamp(64px, 7vw, 98px));
  padding-bottom: clamp(66px, 7vw, 94px);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 44%, #f7f9ff 74%, #faf7ff 100%);
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(10,23,48,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,23,48,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
  pointer-events: none;
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.hero-glow-one { width: 430px; height: 430px; top: 120px; left: -180px; background: radial-gradient(circle, rgba(45, 200, 244, .18), transparent 68%); }
.hero-glow-two { width: 500px; height: 500px; top: 80px; right: -210px; background: radial-gradient(circle, rgba(129, 73, 255, .14), transparent 70%); }
.hero-layout { position: relative; z-index: 2; }
.hero-copy { text-align: center; }
.hero-copy h1 { margin-inline: auto; }
.hero-lead { margin-inline: auto; }

.hero-operations {
  position: relative;
  width: min(100%, 1120px);
  height: 500px;
  margin: 42px auto 0;
  border: 1px solid rgba(203,216,230,.95);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.hero-operations::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(45,200,244,.06), transparent 34%, rgba(129,73,255,.05) 70%, rgba(255,158,61,.045));
  pointer-events: none;
}
.hero-grid { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(10,23,48,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,23,48,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 78%); }
.hero-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-base { fill: none; stroke: rgba(118, 135, 170, .32); stroke-width: 2; stroke-dasharray: 5 8; }
.route-active { fill: none; stroke: url(#routeGradient); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 46 420; animation: routeFlow 4s linear infinite; }
.route-active-delay { animation-delay: -1.5s; }
.route-active-delay-two { animation-delay: -.8s; }
.route-dot { fill: var(--cyan); }
.route-dot-violet { fill: var(--violet); }
@keyframes routeFlow { to { stroke-dashoffset: -466; } }

.hero-module {
  position: absolute;
  z-index: 3;
  width: 250px;
  min-height: 152px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}
.hero-module h3 { margin-top: 12px; font-size: 1.02rem; }
.hero-module-form { top: 48px; left: 74px; }
.hero-module-logic { top: 48px; right: 74px; }
.hero-module-control { bottom: 36px; left: 50%; width: 286px; transform: translateX(-50%); }
.module-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: var(--cyan-soft); color: var(--cyan-deep); }
.logic-icon { background: var(--violet-soft); color: var(--violet); }
.control-icon { background: var(--green-soft); color: var(--green); }

.form-icon { position: relative; flex-direction: column; gap: 4px; }
.form-icon i { width: 22px; height: 3px; border-radius: 4px; background: currentColor; opacity: .72; }
.form-icon i:first-child { width: 14px; margin-right: 8px; }
.logic-icon { position: relative; }
.logic-icon i { position: absolute; width: 6px; height: 6px; border: 2px solid currentColor; border-radius: 50%; }
.logic-icon i:nth-child(1) { left: 10px; top: 11px; }
.logic-icon i:nth-child(2) { right: 10px; top: 11px; }
.logic-icon i:nth-child(3) { left: 18px; bottom: 9px; }
.logic-icon::before, .logic-icon::after { content: ""; position: absolute; width: 15px; height: 2px; background: currentColor; transform-origin: left center; opacity: .7; }
.logic-icon::before { left: 15px; top: 16px; transform: rotate(26deg); }
.logic-icon::after { left: 27px; top: 16px; transform: rotate(154deg); }
.control-icon { position: relative; }
.control-icon i:first-child { width: 18px; height: 20px; border: 2px solid currentColor; border-radius: 9px 9px 6px 6px; }
.control-icon i:nth-child(2), .control-icon i:nth-child(3) { position: absolute; bottom: 8px; width: 7px; height: 3px; border-radius: 4px; background: currentColor; }
.control-icon i:nth-child(2) { left: 10px; }
.control-icon i:nth-child(3) { right: 10px; }

.module-ui { position: absolute; right: 17px; bottom: 17px; width: 96px; height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.form-ui span { position: absolute; left: 9px; right: 9px; height: 4px; border-radius: 4px; background: #c8d5e4; }
.form-ui span:nth-child(1) { top: 10px; right: 26px; }
.form-ui span:nth-child(2) { top: 22px; }
.form-ui span:nth-child(3) { top: 34px; right: 38px; }
.form-ui b { position: absolute; right: 9px; top: 8px; width: 11px; height: 11px; border-radius: 4px; background: var(--cyan); }
.logic-ui { display: flex; align-items: end; justify-content: center; gap: 7px; padding: 9px 14px; }
.logic-ui span { display: block; width: 15px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--orange), var(--violet)); }
.logic-ui span:nth-child(1) { height: 18px; opacity: .55; }
.logic-ui span:nth-child(2) { height: 31px; opacity: .75; }
.logic-ui span:nth-child(3) { height: 23px; }
.control-ui { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; }
.control-ui span { width: 21px; height: 21px; border-radius: 7px; border: 1px solid #b8dccc; background: #fff; }
.control-ui span:nth-child(2) { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 6px #fff; }

.hero-ai-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 138px;
  height: 138px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(15,186,212,.2), 0 8px 24px rgba(15,35,67,.12);
}
.core-ring { position: absolute; border: 1px solid rgba(15,186,212,.32); border-radius: 50%; animation: coreSpin 12s linear infinite; }
.core-ring-one { inset: -20px; border-style: dashed; }
.core-ring-two { inset: -40px; border-color: rgba(0,101,253,.22); animation-direction: reverse; animation-duration: 16s; }
.core-ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px rgba(15,186,212,.75); }
.core-ring-two::after { background: var(--violet); }
@keyframes coreSpin { to { transform: rotate(360deg); } }
.core-inner { position: absolute; inset: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #0a2c85, #081633); color: #fff; }
.core-inner small { font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.core-inner strong { font-size: 2.08rem; line-height: 1; letter-spacing: -.08em; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.hero-actions .small-line { max-width: 470px; }

/* Trust */
.trust-section { background: #f5f8fc; }
.strip-label, .journey-label { margin-bottom: 20px; text-align: center; color: var(--ink-3); }
.recognition-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.recognition-card { height: 82px; display: flex; align-items: center; justify-content: center; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.recognition-card img { width: 100%; max-width: 145px; max-height: 52px; object-fit: contain; }
.trust-divider { position: relative; height: 1px; margin: 34px auto 26px; background: linear-gradient(90deg, transparent, rgba(129,73,255,.28), rgba(45,200,244,.55), rgba(255,158,61,.28), transparent); }
.trust-divider span { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(15,186,212,.8); }
.proof-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 14px; }
.proof-card { min-height: 178px; padding: 25px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.92); }
.proof-card-primary { background: linear-gradient(145deg, #fff, #f8fbff 55%, #f7f1ff); border-color: #d7e6fa; }
.proof-card h3 { margin-top: 18px; font-size: 1rem; line-height: 1.3; letter-spacing: -.02em; }
.proof-card h3 strong { display: block; margin-bottom: 4px; color: var(--cyan-deep); font-size: 1.55rem; }
.proof-icon { position: relative; width: 42px; height: 42px; border-radius: 12px; background: #0d2038; box-shadow: 0 9px 20px rgba(13,32,56,.13); color: #4de5f6; }
.proof-icon-businesses span { position: absolute; left: 12px; top: 12px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.proof-icon-businesses i { position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.proof-icon-businesses i:nth-child(2) { right: 10px; top: 13px; }
.proof-icon-businesses i:nth-child(3) { left: 17px; bottom: 9px; }
.proof-icon-businesses::after { content: ""; position: absolute; left: 9px; bottom: 9px; width: 24px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 10px 10px; opacity: .75; }
.proof-icon-award span { position: absolute; inset: 9px 13px 14px; border: 2px solid currentColor; border-radius: 8px 8px 50% 50%; }
.proof-icon-award::before, .proof-icon-award::after { content: ""; position: absolute; bottom: 8px; width: 8px; height: 2px; background: currentColor; }
.proof-icon-award::before { left: 12px; transform: rotate(28deg); }
.proof-icon-award::after { right: 12px; transform: rotate(-28deg); }
.proof-icon-stack span, .proof-icon-stack::before, .proof-icon-stack::after { content: ""; position: absolute; left: 10px; width: 22px; height: 7px; border: 2px solid currentColor; transform: rotate(30deg) skewX(-18deg); }
.proof-icon-stack span { top: 10px; }
.proof-icon-stack::before { top: 17px; opacity: .75; }
.proof-icon-stack::after { top: 24px; opacity: .5; }
.proof-icon-build span { position: absolute; inset: 10px; border: 2px solid currentColor; border-radius: 4px; }
.proof-icon-build::before { content: ""; position: absolute; left: 14px; top: 8px; width: 2px; height: 26px; background: currentColor; }
.proof-icon-build::after { content: ""; position: absolute; left: 8px; top: 17px; width: 26px; height: 2px; background: currentColor; }

/* Problem */
.problem-section { background: linear-gradient(180deg, #fff 0%, #fff7f8 100%); }
.problem-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(214,77,90,.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent); }
.problem-haze { position: absolute; width: 700px; height: 360px; right: -240px; top: 70px; background: radial-gradient(ellipse, rgba(214,77,90,.12), transparent 68%); filter: blur(10px); }
.problem-workflow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-top: 36px; }
.problem-line { position: absolute; z-index: 0; top: 82px; left: 7%; right: 7%; height: 2px; }
.problem-line-segment { position: absolute; top: 0; height: 2px; background: linear-gradient(90deg, rgba(214,77,90,.25), rgba(214,77,90,.8)); }
.segment-one { left: 0; width: 28%; }
.segment-two { left: 35%; width: 27%; }
.segment-three { left: 69%; width: 31%; }
.problem-line-break { position: absolute; top: -8px; width: 20px; height: 18px; }
.break-one { left: 30.5%; }
.break-two { left: 64.5%; }
.problem-line-break i { position: absolute; top: 7px; width: 12px; height: 2px; background: var(--red); }
.problem-line-break i:first-child { left: 0; transform: rotate(38deg); }
.problem-line-break i:last-child { right: 0; transform: rotate(-38deg); }
.problem-node { position: relative; z-index: 2; min-height: 176px; padding: 22px 18px; border: 1px solid var(--red-line); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(130,40,50,.06); }
.problem-node:nth-of-type(odd) { transform: translateY(10px); }
.problem-node h3 { margin-top: 18px; color: #7f2b35; font-size: .98rem; line-height: 1.28; letter-spacing: -.02em; }
.problem-symbol { position: relative; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.problem-symbol::after { content: ""; position: absolute; right: -8px; top: -8px; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--red); }
.problem-symbol-copy i { position: absolute; width: 18px; height: 22px; border: 2px solid currentColor; border-radius: 4px; background: #fff; }
.problem-symbol-copy i:first-child { transform: translate(-4px,-3px); opacity: .55; }
.problem-symbol-copy i:last-child { transform: translate(4px,3px); }
.problem-symbol-loop i { width: 24px; height: 24px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; }
.problem-symbol-loop i::after { content: ""; position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(25deg); }
.problem-symbol-hidden i { width: 25px; height: 16px; border: 2px solid currentColor; border-radius: 50% 50% 45% 45%; }
.problem-symbol-hidden i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border: 2px solid currentColor; border-radius: 50%; }
.problem-symbol-hidden::before { content: ""; position: absolute; width: 30px; height: 2px; background: currentColor; transform: rotate(-42deg); }
.problem-symbol-owner i { position: absolute; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; }
.problem-symbol-owner i:nth-child(1) { left: 9px; top: 10px; }
.problem-symbol-owner i:nth-child(2) { right: 9px; top: 10px; }
.problem-symbol-owner i:nth-child(3) { left: 18px; bottom: 8px; }
.problem-symbol-owner::before, .problem-symbol-owner::after { content: ""; position: absolute; top: 20px; width: 16px; height: 2px; background: currentColor; }
.problem-symbol-owner::before { left: 10px; transform: rotate(36deg); }
.problem-symbol-owner::after { right: 10px; transform: rotate(-36deg); }
.problem-symbol-status i { position: absolute; left: 9px; right: 9px; height: 3px; border-radius: 3px; background: currentColor; opacity: .75; }
.problem-symbol-status i:nth-child(1) { top: 11px; }
.problem-symbol-status i:nth-child(2) { top: 20px; right: 16px; }
.problem-symbol-status i:nth-child(3) { top: 29px; right: 24px; opacity: .45; }

/* Solution */
.solution-section { background: #fff; }
.solution-workspace {
  position: relative;
  width: min(100%, 1080px);
  height: 620px;
  margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background: linear-gradient(145deg, #fff, #f9fbff 54%, #f9f4ff);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.workspace-topbar { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(246,249,252,.9); }
.workspace-topbar span { width: 8px; height: 8px; border-radius: 50%; background: #c5d1df; }
.workspace-topbar span:first-child { background: var(--cyan); }
.workspace-topbar i { width: 145px; height: 8px; margin-left: 12px; border-radius: 5px; background: #dbe4ee; }
.workspace-grid { position: absolute; inset: 46px 0 0; background-image: linear-gradient(rgba(10,23,48,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,23,48,.035) 1px, transparent 1px); background-size: 32px 32px; }
.solution-route { position: absolute; z-index: 1; inset: 46px 0 0; width: 100%; height: calc(100% - 46px); }
.solution-route path { fill: none; stroke: rgba(15,186,212,.25); stroke-width: 2; stroke-dasharray: 6 8; }
.solution-pulse { position: absolute; z-index: 2; left: 14.6%; top: 28.7%; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px rgba(15,186,212,.8); animation: solutionPulse 8s var(--ease) infinite; }
@keyframes solutionPulse {
  0%, 8% { left: 14.6%; top: 28.7%; }
  17%, 25% { left: 44.7%; top: 28.7%; }
  34%, 42% { left: 76%; top: 28.7%; }
  51%, 59% { left: 76%; top: 68%; }
  68%, 76% { left: 44.7%; top: 68%; }
  85%, 94% { left: 14.6%; top: 68%; }
  100% { left: 14.6%; top: 28.7%; }
}
.solution-action { position: absolute; z-index: 3; width: 278px; min-height: 132px; display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.96); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.solution-action.is-active { border-color: rgba(15,186,212,.58); box-shadow: 0 12px 34px rgba(15,186,212,.12); transform: translateY(-3px); }
.solution-action h3 { margin-bottom: 7px; font-size: .98rem; line-height: 1.22; }
.solution-action p { margin-bottom: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.52; }
.action-one { left: 36px; top: 94px; }
.action-two { left: 50%; top: 94px; transform: translateX(-50%); }
.action-two.is-active { transform: translateX(-50%) translateY(-3px); }
.action-three { right: 36px; top: 94px; }
.action-four { right: 36px; bottom: 42px; }
.action-five { left: 50%; bottom: 42px; transform: translateX(-50%); }
.action-five.is-active { transform: translateX(-50%) translateY(-3px); }
.action-six { left: 36px; bottom: 42px; }
.action-icon { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: var(--cyan-soft); color: var(--cyan-deep); }
.action-three .action-icon { background: var(--violet-soft); color: var(--violet); }
.action-five .action-icon { background: var(--green-soft); color: var(--green); }
.action-icon-process i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.action-icon-process i:nth-child(1) { left: 8px; top: 17px; }
.action-icon-process i:nth-child(2) { left: 17px; top: 9px; }
.action-icon-process i:nth-child(3) { right: 8px; bottom: 9px; }
.action-icon-process::before, .action-icon-process::after { content: ""; position: absolute; height: 2px; background: currentColor; transform-origin: left center; }
.action-icon-process::before { left: 12px; top: 17px; width: 13px; transform: rotate(-38deg); }
.action-icon-process::after { left: 21px; top: 14px; width: 13px; transform: rotate(46deg); }
.action-icon-form i { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: currentColor; }
.action-icon-form i:nth-child(1) { top: 11px; right: 17px; }
.action-icon-form i:nth-child(2) { top: 19px; }
.action-icon-form i:nth-child(3) { top: 27px; right: 14px; }
.action-icon-rule i { position: absolute; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; }
.action-icon-rule i:nth-child(1) { left: 8px; top: 9px; }
.action-icon-rule i:nth-child(2) { right: 8px; top: 9px; }
.action-icon-rule i:nth-child(3) { left: 17px; bottom: 8px; }
.action-icon-missing i:first-child { position: absolute; inset: 8px 11px; border: 2px solid currentColor; border-radius: 4px; }
.action-icon-missing i:last-child { position: absolute; right: 6px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 4px #fff; }
.action-icon-person i:first-child { position: absolute; left: 14px; top: 7px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; }
.action-icon-person i:nth-child(2) { position: absolute; left: 9px; bottom: 7px; width: 22px; height: 12px; border: 2px solid currentColor; border-radius: 12px 12px 5px 5px; }
.action-icon-person i:nth-child(3) { position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 3px #fff; }
.action-icon-track i { position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 3px; background: currentColor; }
.action-icon-track i:nth-child(1) { top: 10px; }
.action-icon-track i:nth-child(2) { top: 19px; right: 14px; }
.action-icon-track i:nth-child(3) { top: 28px; right: 20px; opacity: .5; }
.solution-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 28px; background: linear-gradient(145deg, #0a2c85, #081633); color: #fff; box-shadow: 0 20px 60px rgba(15,35,67,.22), 0 0 0 11px rgba(15,186,212,.08); }
.solution-core small { font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.solution-core strong { font-size: 1.95rem; line-height: 1; letter-spacing: -.08em; }

/* Process */
.process-section { background: var(--bg-cyan); }
.process-map { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(145px, auto)); gap: 74px 26px; padding: 16px 18px 6px; }
.process-track { position: absolute; z-index: 0; inset: 0 10%; pointer-events: none; }
.track-top, .track-bottom { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(45,200,244,.24), rgba(129,73,255,.72), rgba(255,158,61,.24)); }
.track-top { top: 80px; }
.track-bottom { bottom: 78px; }
.track-turn { position: absolute; right: -1px; top: 80px; bottom: 78px; width: 56px; border: 2px solid rgba(15,186,212,.45); border-left: 0; border-radius: 0 30px 30px 0; }
.track-pulse { position: absolute; top: 75px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px rgba(15,186,212,.75); animation: trackRun 9s linear infinite; }
@keyframes trackRun {
  0% { left: 0; top: 75px; }
  48% { left: calc(100% - 8px); top: 75px; }
  52% { left: calc(100% + 46px); top: calc(50% - 6px); }
  56% { left: calc(100% - 8px); top: calc(100% - 85px); }
  100% { left: 0; top: calc(100% - 85px); }
}
.process-step { position: relative; z-index: 2; min-height: 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; border: 1px solid rgba(193,226,232,.95); border-radius: 18px; background: rgba(255,255,255,.9); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.process-step.is-active { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,186,212,.12); }
.step-five { grid-column: 4; grid-row: 2; }
.step-six { grid-column: 3; grid-row: 2; }
.step-seven { grid-column: 2; grid-row: 2; }
.step-eight { grid-column: 1; grid-row: 2; }
.process-step h3 { max-width: 170px; margin-top: 14px; font-size: .94rem; line-height: 1.25; }
.process-icon { position: relative; width: 44px; height: 44px; border-radius: 13px; background: var(--cyan-soft); color: var(--cyan-deep); }
.process-icon-message i:first-child { position: absolute; inset: 9px 8px 12px; border: 2px solid currentColor; border-radius: 8px; }
.process-icon-message i:first-child::after { content: ""; position: absolute; left: 5px; bottom: -6px; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skewY(-35deg); background: var(--cyan-soft); }
.process-icon-message i:last-child { position: absolute; left: 14px; right: 14px; top: 18px; height: 2px; background: currentColor; }
.process-icon-data i { position: absolute; left: 10px; right: 10px; height: 6px; border: 2px solid currentColor; border-radius: 50%; }
.process-icon-data i:nth-child(1) { top: 8px; }
.process-icon-data i:nth-child(2) { top: 18px; }
.process-icon-data i:nth-child(3) { top: 28px; }
.process-icon-form i { position: absolute; left: 10px; right: 10px; height: 3px; border-radius: 3px; background: currentColor; }
.process-icon-form i:nth-child(1) { top: 11px; right: 17px; }
.process-icon-form i:nth-child(2) { top: 20px; }
.process-icon-form i:nth-child(3) { top: 29px; right: 15px; }
.process-icon-calc i { position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 3px; }
.process-icon-calc i:nth-child(1) { left: 9px; top: 9px; }
.process-icon-calc i:nth-child(2) { right: 9px; top: 9px; }
.process-icon-calc i:nth-child(3) { left: 18px; bottom: 9px; }
.process-icon-workflow i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.process-icon-workflow i:nth-child(1) { left: 8px; top: 18px; }
.process-icon-workflow i:nth-child(2) { left: 19px; top: 8px; }
.process-icon-workflow i:nth-child(3) { right: 8px; bottom: 9px; }
.process-icon-workflow::before, .process-icon-workflow::after { content: ""; position: absolute; height: 2px; background: currentColor; }
.process-icon-workflow::before { left: 13px; top: 18px; width: 16px; transform: rotate(-35deg); }
.process-icon-workflow::after { left: 25px; top: 17px; width: 14px; transform: rotate(42deg); }
.process-icon-file i:first-child { position: absolute; inset: 8px 11px; border: 2px solid currentColor; border-radius: 4px; }
.process-icon-file i:last-child { position: absolute; right: 9px; top: 8px; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.process-icon-follow i:first-child { position: absolute; inset: 9px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; }
.process-icon-follow i:last-child { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(24deg); }
.process-icon-track i { position: absolute; left: 9px; right: 9px; height: 3px; border-radius: 3px; background: currentColor; }
.process-icon-track i:nth-child(1) { top: 11px; }
.process-icon-track i:nth-child(2) { top: 20px; right: 15px; }
.process-icon-track i:nth-child(3) { top: 29px; right: 22px; opacity: .5; }

/* Private */
.private-section { background: #fff; }
.private-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(560px,1.14fr); align-items: center; gap: 64px; }
.private-layout .section-heading { margin-bottom: 0; }
.private-small-line { max-width: 650px; margin-top: 24px; }
.private-workspace {
  position: relative;
  height: 580px;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 48%, rgba(45,200,244,.08), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(129,73,255,.05), transparent 46%),
    linear-gradient(145deg, #fbfdff, #f5fbfc);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.private-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,23,48,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,23,48,.035) 1px, transparent 1px);
  background-size: 30px 30px;
}
.private-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 390px;
  height: 390px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,200,244,.14), rgba(129,73,255,.06) 52%, transparent 72%);
  filter: blur(2px);
}
.private-boundary {
  position: absolute;
  inset: 32px;
  border: 1.5px solid rgba(15,186,212,.42);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 42px rgba(15,186,212,.06);
}
.private-boundary::before,
.private-boundary::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 58px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(213,73,100,.05), rgba(213,73,100,.45), rgba(213,73,100,.05));
}
.private-boundary::before { left: -24px; }
.private-boundary::after { right: -24px; }
.private-vault {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 244px;
  height: 244px;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  border: 1px solid rgba(15,186,212,.25);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.96), rgba(247,251,255,.86) 52%, rgba(237,247,251,.8) 100%);
  box-shadow:
    0 16px 40px rgba(15,35,67,.08),
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 0 44px rgba(15,186,212,.06);
}
.private-vault::before,
.private-vault::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 25px;
  border: 1px dashed rgba(15,186,212,.34);
}
.private-vault::after {
  inset: 38px;
  border-style: solid;
  border-color: rgba(0,101,253,.15);
}
.boundary-corner { position: absolute; width: 34px; height: 34px; border-color: var(--cyan); opacity: .82; z-index: 3; }
.corner-one { left: 28px; top: 28px; border-style: solid; border-width: 2px 0 0 2px; border-radius: 8px 0 0; }
.corner-two { right: 28px; top: 28px; border-style: solid; border-width: 2px 2px 0 0; border-radius: 0 8px 0 0; }
.corner-three { right: 28px; bottom: 28px; border-style: solid; border-width: 0 2px 2px 0; border-radius: 0 0 8px; }
.corner-four { left: 28px; bottom: 28px; border-style: solid; border-width: 0 0 2px 2px; border-radius: 0 0 0 8px; }
.boundary-lock {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #f0f7ff 55%, #f8f1ff 100%);
  border: 1px solid rgba(15,186,212,.35);
  box-shadow: 0 8px 18px rgba(15,35,67,.1);
}
.boundary-lock::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -8px;
  width: 8px;
  height: 10px;
  border: 2px solid rgba(0,101,253,.7);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.boundary-lock::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,101,253,.75);
}
.lock-top { top: 20px; }
.lock-bottom { bottom: 20px; }
.private-core {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background: linear-gradient(145deg,#0e203c,#071326);
  color: #fff;
  box-shadow: 0 20px 60px rgba(15,35,67,.22), 0 0 0 14px rgba(15,186,212,.09), 0 0 0 30px rgba(255,255,255,.76);
}
.private-core small { font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.private-core strong { font-size: 1.9rem; line-height: 1; letter-spacing: -.08em; }
.private-item {
  position: absolute;
  z-index: 4;
  min-width: 178px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(15,186,212,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 28px rgba(15,35,67,.08);
  font-size: .84rem;
  font-weight: 690;
  line-height: 1.25;
}
.private-item span {
  position: relative;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border: 2px solid var(--cyan-deep);
  border-radius: 7px;
  box-shadow: inset 0 0 0 5px var(--cyan-soft);
}
.private-item span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 7px;
  height: 11px;
  border: 2px solid rgba(0,101,253,.8);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.item-one { top: 82px; left: 54px; }
.item-two { top: 82px; right: 54px; }
.item-three { top: 236px; left: 40px; }
.item-four { top: 236px; right: 40px; }
.item-five { bottom: 82px; left: 54px; }
.item-six { bottom: 82px; right: 54px; }
.private-item::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, rgba(45,200,244,.55), rgba(129,73,255,.18), rgba(255,158,61,.12));
}
.item-one::after, .item-three::after, .item-five::after { right: -70px; }
.item-two::after, .item-four::after, .item-six::after { left: -70px; transform: rotate(180deg); }
.private-access {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,186,212,.18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 22px rgba(15,35,67,.07);
}
.private-access i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: #fff;
}
.access-one { left: 92px; bottom: 146px; }
.access-two { right: 92px; top: 144px; }
.access-three { left: 50%; top: 66px; transform: translateX(-50%); }
.private-gate {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 32px;
  height: 98px;
  transform: translateY(-50%);
  border-radius: 16px;
  border: 1px solid rgba(213,73,100,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,246,248,.98));
  box-shadow: 0 10px 26px rgba(15,35,67,.06);
}
.private-gate i,
.private-gate i::before,
.private-gate i::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(213,73,100,.42);
}
.private-gate i { top: 18px; height: 62px; }
.private-gate i::before { top: 10px; height: 12px; }
.private-gate i::after { bottom: 10px; height: 12px; }
.gate-left { left: 20px; }
.gate-right { right: 20px; }
.private-outsider {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 112px;
  height: 88px;
  transform: translateY(-50%) rotate(-4deg);
  border-radius: 18px;
  border: 1px solid rgba(10,23,48,.09);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(3px);
  opacity: .78;
}
.outsider-right { right: 56px; transform: translateY(-50%) rotate(4deg); }
.outsider-left { left: 56px; }
.private-outsider span {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 9px;
  border-radius: 999px;
  background: rgba(10,23,48,.12);
}
.private-outsider span:first-child { top: 22px; width: 52px; }
.private-outsider span:nth-child(2) { top: 42px; width: 72px; }
.private-outsider i {
  position: absolute;
  right: -14px;
  top: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #fff7f3);
  border: 1px solid rgba(213,73,100,.22);
  box-shadow: 0 10px 26px rgba(15,35,67,.08);
}
.private-outsider i::before,
.private-outsider i::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 17px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(213,73,100,.9);
}
.private-outsider i::before { transform: rotate(45deg); }
.private-outsider i::after { transform: rotate(-45deg); }

/* Control */
.control-section { background: var(--bg-violet); }
.control-console { position: relative; width: min(100%, 1080px); height: 610px; margin-inline: auto; border: 1px solid var(--line-2); border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-md); overflow: hidden; }
.console-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(10,23,48,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,23,48,.035) 1px, transparent 1px); background-size: 32px 32px; }
.console-connection { position: absolute; z-index: 1; left: 112px; right: 112px; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(45,200,244,.24), rgba(43,117,255,.5), rgba(129,73,255,.34)); }
.console-connection span { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px rgba(15,186,212,.75); animation: consoleFlow 5.5s var(--ease) infinite; }
.console-connection i { position: absolute; left: 50%; top: -74px; width: 2px; height: 148px; background: linear-gradient(rgba(43,117,255,.18), rgba(129,73,255,.55), rgba(255,158,61,.18)); }
@keyframes consoleFlow { 0%,8% { left: 0; } 92%,100% { left: calc(100% - 10px); } }
.control-panel { position: absolute; z-index: 3; display: flex; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.97); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.control-panel.is-active { border-color: rgba(15,186,212,.58); transform: translateY(-3px); box-shadow: 0 12px 34px rgba(15,186,212,.12); }
.control-panel h3 { margin-bottom: 6px; font-size: .98rem; line-height: 1.2; }
.control-panel p { margin-bottom: 0; color: var(--ink-2); font-size: .82rem; line-height: 1.48; }
.panel-ai { left: 36px; top: 42px; width: 310px; }
.panel-review { right: 36px; top: 42px; width: 310px; }
.panel-rules { left: 36px; bottom: 42px; width: 310px; }
.panel-final { right: 36px; bottom: 42px; width: 310px; }
.panel-private { left: 50%; bottom: 22px; width: 320px; transform: translateX(-50%); }
.panel-private.is-active { transform: translateX(-50%) translateY(-3px); }
.control-panel-icon { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; background: var(--cyan-soft); color: var(--cyan-deep); }
.panel-review .control-panel-icon, .panel-final .control-panel-icon { background: var(--violet-soft); color: var(--violet); }
.panel-private .control-panel-icon { background: var(--green-soft); color: var(--green); }
.icon-ai i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.icon-ai i:nth-child(1) { left: 8px; top: 17px; }
.icon-ai i:nth-child(2) { left: 17px; top: 8px; }
.icon-ai i:nth-child(3) { right: 8px; bottom: 8px; }
.icon-ai::before, .icon-ai::after { content: ""; position: absolute; height: 2px; background: currentColor; }
.icon-ai::before { left: 13px; top: 17px; width: 16px; transform: rotate(-35deg); }
.icon-ai::after { left: 25px; top: 16px; width: 13px; transform: rotate(43deg); }
.icon-review i:first-child { position: absolute; left: 14px; top: 6px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; }
.icon-review i:nth-child(2) { position: absolute; left: 9px; bottom: 6px; width: 22px; height: 13px; border: 2px solid currentColor; border-radius: 12px 12px 5px 5px; }
.icon-review i:nth-child(3) { position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 3px #fff; }
.icon-rules i { position: absolute; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; }
.icon-rules i:nth-child(1) { left: 8px; top: 9px; }
.icon-rules i:nth-child(2) { right: 8px; top: 9px; }
.icon-rules i:nth-child(3) { left: 17px; bottom: 8px; }
.icon-final i { position: absolute; left: 9px; right: 9px; height: 4px; border-radius: 4px; background: currentColor; }
.icon-final i:nth-child(1) { top: 10px; }
.icon-final i:nth-child(2) { top: 19px; right: 15px; }
.icon-final i:nth-child(3) { top: 28px; right: 21px; }
.icon-private i:first-child { position: absolute; left: 11px; top: 16px; width: 18px; height: 16px; border: 2px solid currentColor; border-radius: 4px; }
.icon-private i:last-child { position: absolute; left: 15px; top: 7px; width: 10px; height: 14px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.control-preview { position: absolute; z-index: 4; left: 50%; top: 50%; width: 300px; height: 236px; transform: translate(-50%,-58%); border: 1px solid rgba(0,101,253,.34); border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(0,69,177,.16), 0 0 0 10px rgba(0,101,253,.05); overflow: hidden; }
.preview-header { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid var(--line); background: #f8f7ff; }
.preview-header span { width: 110px; height: 8px; border-radius: 5px; background: #cbc7f2; }
.preview-header i { width: 9px; height: 9px; border-radius: 50%; background: #d5dcec; }
.preview-body { padding: 20px; }
.preview-body span { display: block; height: 10px; margin-bottom: 16px; border-radius: 6px; background: #e6ecf3; }
.preview-body span:nth-child(1) { width: 72%; }
.preview-body span:nth-child(2) { width: 100%; }
.preview-body span:nth-child(3) { width: 84%; }
.preview-body b { display: block; width: 48%; height: 34px; margin-top: 19px; border-radius: 10px; background: linear-gradient(90deg, var(--cyan-deep), var(--violet) 62%, var(--orange)); }
.preview-footer { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px; border-top: 1px solid var(--line); background: #fbfcfe; }
.preview-footer i { width: 36px; height: 22px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; }
.preview-footer i:last-child { background: linear-gradient(90deg, var(--cyan-deep) 0%, var(--violet) 58%, var(--orange) 100%); border-color: var(--ink); }

/* Demo */
.demo-section { background: linear-gradient(145deg, #f4fbff, #fbf7ff); }
.demo-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,186,212,.10) 1px, transparent 1px); background-size: 29px 29px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.demo-glow { position: absolute; width: 560px; height: 560px; right: -170px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(129,73,255,.15), transparent 66%); }
.demo-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); align-items: center; gap: 64px; }
.demo-copy h2 { max-width: 650px; }
.demo-small-line { max-width: 580px; margin-top: 24px; padding: 15px 17px; border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.65); }
.demo-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; padding: 28px; border: 1px solid var(--line-2); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { color: var(--ink); font-size: .83rem; font-weight: 730; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); transition: border-color var(--transition), box-shadow var(--transition); }
.form-field input { height: 47px; padding: 0 13px; }
.form-field textarea { min-height: 100px; padding: 12px 13px; resize: vertical; }
.form-field input:hover, .form-field textarea:hover { border-color: #b4c6d8; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(15,186,212,.1); outline: none; }
.form-button { grid-column: 1 / -1; width: 100%; margin-top: 3px; }

/* Tablet */
@media (max-width: 1080px) {
  .hero-operations { height: 480px; }
  .hero-module-form { left: 42px; }
  .hero-module-logic { right: 42px; }
  .private-layout, .demo-layout { grid-template-columns: 1fr; gap: 42px; }
  .private-layout .section-heading, .demo-copy { max-width: 820px; }
  .private-workspace { width: min(100%, 760px); margin-inline: auto; }
  .demo-form { width: min(100%, 760px); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-card-primary { grid-column: 1 / -1; min-height: 150px; }
  .solution-workspace { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 68px 20px 24px; }
  .workspace-topbar { position: absolute; inset: 0 0 auto; }
  .workspace-grid, .solution-route, .solution-pulse, .solution-core { display: none; }
  .solution-action { position: relative; inset: auto; width: auto; min-height: 130px; transform: none !important; }
  .control-console { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 24px; }
  .console-grid, .console-connection, .control-preview { display: none; }
  .control-panel { position: relative; inset: auto; width: auto; transform: none !important; }
  .panel-private { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .recognition-strip { grid-template-columns: repeat(3, 1fr); }
  .problem-workflow { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 0; }
  .problem-line { display: none; }
  .problem-node:nth-of-type(odd) { transform: none; }
  .problem-node:last-child { grid-column: 1 / -1; min-height: 142px; }
  .process-map { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 14px; padding: 0; }
  .process-track { display: none; }
  .process-step { grid-column: auto !important; grid-row: auto !important; min-height: 132px; }
  .step-five { order: 5; }
  .step-six { order: 6; }
  .step-seven { order: 7; }
  .step-eight { order: 8; }
}

/* Mobile */
@media (max-width: 700px) {
  :root { --header-height: 66px; }
  body { font-size: 15px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 68px 0; }
  h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  h2 { font-size: clamp(2rem, 9.4vw, 3rem); }
  .section-heading { margin-bottom: 38px; }
  .section-lead { line-height: 1.64; }
  .header-inner { gap: 12px; }
  .wordmark-logo { width: 168px; max-height: 42px; }
  .wordmark-company { display: none; }
  .button-small { min-height: 39px; padding: 0 16px; }

  .hero-section { min-height: auto; padding-top: calc(var(--header-height) + 54px); padding-bottom: 64px; }
  .hero-operations { height: 560px; margin-top: 34px; border-radius: 24px; }
  .hero-routes { display: none; }
  .hero-operations::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 108px; bottom: 82px; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--cyan-deep), rgba(129,73,255,.45), var(--orange)); opacity: .45; }
  .hero-module { left: 50% !important; right: auto !important; width: calc(100% - 44px); min-height: 116px; transform: translateX(-50%) !important; padding: 16px 17px; }
  .hero-module-form { top: 28px; }
  .hero-module-logic { top: 207px; }
  .hero-module-control { bottom: 28px; }
  .hero-module h3 { margin-top: 10px; }
  .module-ui { bottom: 14px; right: 14px; }
  .hero-ai-core { width: 92px; height: 92px; top: 50%; }
  .core-ring-one { inset: -13px; }
  .core-ring-two { inset: -26px; }
  .core-inner { inset: 10px; }
  .core-inner strong { font-size: 1.55rem; }
  .hero-actions { flex-direction: column; gap: 15px; margin-top: 24px; text-align: center; }
  .hero-actions .button { width: min(100%, 260px); }
  .hero-actions .small-line { max-width: 440px; }

  .recognition-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .recognition-card { height: 74px; padding: 13px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card-primary { grid-column: auto; }
  .proof-card { min-height: 132px; padding: 20px; }
  .proof-card h3 { margin-top: 14px; }
  .section-small-line { margin-top: 28px; }

  .problem-workflow { grid-template-columns: 1fr; }
  .problem-node, .problem-node:last-child { grid-column: auto; min-height: 128px; display: flex; align-items: center; gap: 16px; padding: 18px; }
  .problem-node h3 { margin-top: 0; }

  .solution-workspace { grid-template-columns: 1fr; padding: 64px 14px 18px; border-radius: 22px; }
  .solution-action { min-height: 118px; padding: 16px; }

  .process-map { grid-template-columns: 1fr; }
  .process-step { min-height: 112px; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 18px; text-align: left; }
  .process-step h3 { margin-top: 0; }

  .private-layout { gap: 34px; }
  .private-workspace { height: auto; display: grid; grid-template-columns: 1fr; gap: 11px; padding: 82px 18px 18px; border-radius: 22px; }
  .private-grid, .private-boundary, .boundary-corner, .private-access { display: none; }
  .private-core { top: 16px; width: 58px; height: 58px; transform: translateX(-50%); border-radius: 16px; box-shadow: 0 10px 30px rgba(15,35,67,.18); }
  .private-core small { display: none; }
  .private-core strong { font-size: 1.35rem; }
  .private-item { position: relative; inset: auto; min-width: 0; width: 100%; padding: 13px 14px; }
  .private-item::after { display: none; }

  .control-console { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
  .panel-private { grid-column: auto; }
  .control-panel { min-height: 116px; padding: 16px; }

  .demo-layout { gap: 34px; }
  .demo-form { grid-template-columns: 1fr; padding: 20px; border-radius: 20px; }
  .form-field-wide, .form-button { grid-column: auto; }
  .demo-small-line { margin-top: 20px; }
}

@media (max-width: 430px) {
  .recognition-strip { grid-template-columns: 1fr 1fr; }
  .recognition-card { height: 68px; }
  .hero-module { width: calc(100% - 28px); }
  .module-ui { width: 82px; }
}


@media (max-width: 380px) {
  .wordmark-logo { width: 152px; }
  .button-small { padding-inline: 13px; font-size: .82rem; }
}

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

/* Keep hero labels clear of the miniature interface previews. */
.hero-module h3 { max-width: 122px; }
.hero-module-control h3 { max-width: 156px; }

@media (max-width: 700px) {
  .hero-module h3,
  .hero-module-control h3 { max-width: 190px; }
}

@media (max-width: 700px) {
  .hero-ai-core { top: 184px; }
  .hero-module-logic { top: 246px; }
}


/* === Visual rework overrides: section clarity, alignment, stronger card titles === */
.hero-operations { height: 528px; }
.hero-module {
  min-height: 138px;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 18px 40px rgba(15,35,67,.08);
}
.hero-module h3 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.14;
  letter-spacing: -.03em;
  max-width: none !important;
  flex: 1;
}
.hero-module-form,
.hero-module-logic { width: 332px; top: 52px; }
.hero-module-form { left: 78px; }
.hero-module-logic { right: 78px; }
.hero-module-control { width: 348px; bottom: 44px; }
.module-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.12);
}
.module-ui { display: none; }
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hero-actions .small-line { order: 1; max-width: 620px; }
.hero-actions .button { order: 2; }

.problem-workflow { gap: 18px; padding-top: 26px; }
.problem-node {
  min-height: 194px;
  padding: 24px 20px;
  border-radius: 20px;
}
.problem-symbol {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(227,92,104,.12);
}
.problem-symbol::after { width: 14px; height: 14px; right: -7px; top: -7px; }
.problem-node h3 {
  margin-top: 20px;
  font-size: 1.26rem;
  line-height: 1.14;
  letter-spacing: -.03em;
}

.solution-workspace { height: 640px; }
.solution-action {
  width: 292px;
  min-height: 148px;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15,35,67,.07);
}
.solution-action h3 {
  margin-bottom: 8px;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.solution-action p { font-size: .92rem; line-height: 1.5; }
.action-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.12);
}
.solution-core {
  width: 142px;
  height: 142px;
  border-radius: 50%;
  box-shadow: 0 24px 60px rgba(15,35,67,.16), 0 0 0 14px rgba(15,186,212,.08), 0 0 0 32px rgba(255,255,255,.76);
}
.solution-core::before,
.solution-core::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,101,253,.18);
}
.solution-core::after {
  inset: -34px;
  border-style: dashed;
  border-color: rgba(15,186,212,.18);
}

.process-step {
  min-height: 156px;
  padding: 22px 18px;
  border-radius: 20px;
}
.process-step h3 {
  max-width: 200px;
  margin-top: 16px;
  font-size: 1.12rem;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.process-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.12);
}

.private-vault {
  width: 340px;
  height: 374px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(214,240,255,.92), rgba(240,248,255,.98));
  clip-path: polygon(50% 100%, 14% 79%, 14% 22%, 50% 0, 86% 22%, 86% 79%);
  box-shadow: 0 18px 44px rgba(15,35,67,.08), inset 0 0 40px rgba(255,255,255,.55);
}
.private-vault::before,
.private-vault::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 100%, 14% 79%, 14% 22%, 50% 0, 86% 22%, 86% 79%);
}
.private-vault::before {
  inset: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(229,243,255,.96));
  border: 1px solid rgba(15,186,212,.24);
}
.private-vault::after {
  inset: 34px;
  background: rgba(255,255,255,.82);
  border: 1px dashed rgba(15,186,212,.38);
}
.private-core {
  width: 126px;
  height: 126px;
  z-index: 6;
  border-radius: 30px;
  box-shadow: 0 22px 55px rgba(15,35,67,.18), 0 0 0 14px rgba(255,255,255,.84);
}
.private-item {
  min-width: 194px;
  padding: 15px 16px;
  border-radius: 16px;
  font-size: .96rem;
  font-weight: 760;
}
.private-item span { width: 24px; height: 24px; }

.control-console { height: 640px; }
.control-panel {
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  min-height: 132px;
}
.control-panel h3 {
  margin-bottom: 7px;
  font-size: 1.16rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.control-panel p { font-size: .92rem; line-height: 1.5; }
.control-panel-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.12);
}
.control-preview {
  width: 320px;
  height: 250px;
  transform: translate(-50%,-56%);
}
.preview-body span { height: 11px; }
.preview-body b { height: 38px; }

@media (max-width: 1080px) {
  .hero-operations { height: 510px; }
  .hero-module-form { left: 34px; width: 300px; }
  .hero-module-logic { right: 34px; width: 300px; }
  .hero-module-control { width: 320px; }
  .solution-action h3,
  .control-panel h3,
  .process-step h3,
  .problem-node h3 { font-size: 1.08rem; }
  .solution-action p,
  .control-panel p { font-size: .88rem; }
}

@media (max-width: 900px) {
  .problem-node h3 { font-size: 1.14rem; }
  .process-step h3 { font-size: 1.06rem; max-width: none; }
}

@media (max-width: 700px) {
  .hero-operations { height: 630px; }
  .hero-module { min-height: 124px; padding: 18px 17px; gap: 14px; }
  .hero-module h3 { font-size: 1.12rem; }
  .module-icon { width: 52px; height: 52px; flex-basis: 52px; }
  .hero-module-form { top: 24px; }
  .hero-module-logic { top: 222px; }
  .hero-module-control { bottom: 24px; width: calc(100% - 44px); }
  .hero-ai-core { top: 195px; }

  .problem-node, .problem-node:last-child {
    min-height: 142px;
    align-items: center;
    padding: 18px;
  }
  .problem-node h3 { margin-top: 0; font-size: 1.08rem; }
  .problem-symbol { width: 54px; height: 54px; flex: 0 0 54px; }

  .solution-action { min-height: 128px; padding: 18px; }
  .solution-action h3 { font-size: 1.08rem; }
  .solution-action p { font-size: .88rem; }
  .action-icon { width: 48px; height: 48px; flex-basis: 48px; }

  .process-step { min-height: 126px; }
  .process-icon { width: 48px; height: 48px; }
  .process-step h3 { font-size: 1.02rem; }

  .private-item { font-size: .9rem; }

  .control-panel { min-height: 126px; padding: 17px; }
  .control-panel h3 { font-size: 1.06rem; }
  .control-panel p { font-size: .86rem; }
  .control-panel-icon { width: 48px; height: 48px; flex-basis: 48px; }
}

@media (max-width: 430px) {
  .hero-operations { height: 650px; }
  .hero-module-logic { top: 242px; }
}


/* === Option B icon system replacement: replace glyph-like icons with richer micro-visuals === */
.hero-module { align-items: center; }
.module-icon,
.problem-symbol,
.action-icon,
.process-icon,
.control-panel-icon {
  overflow: hidden;
}

/* Hero micro visuals */
.module-icon {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f4fbff, #e9f5ff);
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.16), 0 10px 22px rgba(15,35,67,.06);
}
.module-icon::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.1);
}
.form-icon i,
.logic-icon i,
.control-icon i { position: absolute; z-index: 2; }
.form-icon i:nth-child(1), .form-icon i:nth-child(2), .form-icon i:nth-child(3) {
  left: 22px; right: 18px; height: 4px; border-radius: 4px; background: #5b86d9;
}
.form-icon i:nth-child(1) { top: 25px; right: 24px; }
.form-icon i:nth-child(2) { top: 34px; }
.form-icon i:nth-child(3) { top: 43px; right: 20px; }
.form-icon i:nth-child(4) {
  left: 18px; top: 22px; width: 10px; height: 10px; border: 2px solid #0fbad4; border-radius: 4px; background: #fff;
}
.logic-icon i:nth-child(1), .logic-icon i:nth-child(2), .logic-icon i:nth-child(3) {
  bottom: 18px; width: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#8cc1ff,#3678ff);
}
.logic-icon i:nth-child(1) { left: 18px; height: 16px; }
.logic-icon i:nth-child(2) { left: 31px; height: 24px; }
.logic-icon i:nth-child(3) { left: 44px; height: 32px; }
.logic-icon::after {
  content: ""; position: absolute; z-index:2; left: 18px; top: 20px; width: 34px; height: 14px; border-top: 2px solid #0fbad4; border-right: 2px solid #0fbad4; border-radius: 0 10px 0 0;
}
.control-icon i:nth-child(1) {
  left: 18px; top: 20px; width: 18px; height: 22px; border: 2px solid #16a36f; border-radius: 10px 10px 7px 7px; border-top-width: 6px; background: rgba(22,163,111,.08);
}
.control-icon i:nth-child(2), .control-icon i:nth-child(3) {
  bottom: 21px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #16a36f; background:#fff;
}
.control-icon i:nth-child(2) { right: 24px; }
.control-icon i:nth-child(3) { right: 10px; }
.control-icon::after {
  content:""; position:absolute; z-index:2; right: 16px; top: 22px; width: 18px; height: 12px; border-radius: 7px; background: linear-gradient(90deg,#dff5ee,#f6fffb); box-shadow: inset 0 0 0 1px rgba(22,163,111,.18);
}

/* Problem micro scenes */
.problem-symbol {
  width: 82px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff8f8, #ffeef0);
  box-shadow: inset 0 0 0 1px rgba(227,92,104,.16);
}
.problem-symbol::after { display:none; }
.problem-symbol::before { content:""; position:absolute; z-index:1; inset: 12px; border-radius: 12px; background: rgba(255,255,255,.94); }
.problem-symbol-copy i { z-index:2; width: 18px; height: 24px; border: 2px solid #e35c68; border-radius: 5px; background:#fff; }
.problem-symbol-copy i:first-child { left: 23px; top: 17px; opacity:.45; }
.problem-symbol-copy i:last-child { left: 35px; top: 23px; }
.problem-symbol-loop i { z-index:2; width: 28px; height: 28px; border: 2px solid #e35c68; border-left-color: transparent; border-radius: 50%; left: 26px; top: 18px; }
.problem-symbol-loop i::after { content:""; position:absolute; right: 4px; top: 2px; width: 7px; height: 7px; border-top:2px solid #e35c68; border-right:2px solid #e35c68; transform: rotate(24deg); }
.problem-symbol-loop::after { content:""; position:absolute; z-index:2; left: 18px; bottom: 12px; width: 46px; height: 4px; background: linear-gradient(90deg, rgba(227,92,104,.0), rgba(227,92,104,.35), rgba(227,92,104,.0)); border-radius:4px; }
.problem-symbol-hidden i { z-index:2; width: 30px; height: 18px; border: 2px solid #e35c68; border-radius: 50% 50% 45% 45%; left: 26px; top: 22px; background: transparent; }
.problem-symbol-hidden i::before { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border:2px solid #e35c68; border-radius:50%; }
.problem-symbol-hidden::before { content:""; position:absolute; z-index:2; left: 22px; top: 30px; width: 38px; height: 2px; background:#e35c68; transform: rotate(-26deg); }
.problem-symbol-owner i { z-index:2; width: 9px; height: 9px; border: 2px solid #e35c68; border-radius:50%; background:#fff; }
.problem-symbol-owner i:nth-child(1) { left: 20px; top: 20px; }
.problem-symbol-owner i:nth-child(2) { right: 20px; top: 20px; }
.problem-symbol-owner i:nth-child(3) { left: 35px; bottom: 17px; opacity:.5; }
.problem-symbol-owner::before, .problem-symbol-owner::after { content:""; position:absolute; z-index:2; top: 31px; width: 18px; height:2px; background:#e35c68; }
.problem-symbol-owner::before { left: 27px; transform: rotate(30deg); }
.problem-symbol-owner::after { right: 27px; transform: rotate(-30deg); }
.problem-symbol-status i { z-index:2; left: 18px; right: 18px; height: 4px; border-radius:4px; background:#e35c68; }
.problem-symbol-status i:nth-child(1) { top: 21px; right: 26px; opacity: .85; }
.problem-symbol-status i:nth-child(2) { top: 32px; right: 18px; opacity: .55; }
.problem-symbol-status i:nth-child(3) { top: 43px; right: 34px; opacity: .28; }

/* Solution micro visuals */
.action-icon {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 16px;
  background: linear-gradient(145deg, #f3fbff, #ebf7ff);
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.15), 0 10px 22px rgba(15,35,67,.05);
}
.action-three .action-icon { background: linear-gradient(145deg, #f8f7ff, #f1efff); }
.action-five .action-icon { background: linear-gradient(145deg, #effcf6, #e7f7ef); }
.action-icon::before { content:""; position:absolute; inset: 10px; border-radius: 12px; background:#fff; }
.action-icon-process i { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#1779eb; }
.action-icon-process i:nth-child(1){ left: 17px; top: 30px; }
.action-icon-process i:nth-child(2){ left: 27px; top: 19px; }
.action-icon-process i:nth-child(3){ right: 16px; bottom: 16px; }
.action-icon-process::before, .action-icon-process::after { content:""; position:absolute; z-index:2; height:2px; background:#1779eb; }
.action-icon-process::before { left: 21px; top: 30px; width: 16px; transform: rotate(-36deg); }
.action-icon-process::after { left: 31px; top: 27px; width: 15px; transform: rotate(42deg); }
.action-icon-form i { position:absolute; z-index:2; left: 18px; right: 18px; height: 4px; border-radius:4px; background:#1779eb; }
.action-icon-form i:nth-child(1){ top:18px; right:26px; }
.action-icon-form i:nth-child(2){ top:28px; }
.action-icon-form i:nth-child(3){ top:38px; right:22px; }
.action-icon-rule i { position:absolute; z-index:2; width: 8px; height: 8px; border: 2px solid #4a62df; border-radius: 50%; background:#fff; }
.action-icon-rule i:nth-child(1){ left:16px; top:18px; }
.action-icon-rule i:nth-child(2){ right:16px; top:18px; }
.action-icon-rule i:nth-child(3){ left:26px; bottom:16px; }
.action-icon-rule::before, .action-icon-rule::after { content:""; position:absolute; z-index:2; height:2px; background:#4a62df; }
.action-icon-rule::before { left: 22px; top: 24px; width: 18px; }
.action-icon-rule::after { left: 26px; top: 33px; width: 12px; transform: rotate(55deg); }
.action-icon-missing i:first-child { position:absolute; z-index:2; left: 18px; top: 15px; width: 20px; height: 30px; border: 2px solid #2b86ff; border-radius: 5px; background:#fff; }
.action-icon-missing i:last-child { position:absolute; z-index:2; right: 12px; top: 12px; width: 14px; height: 14px; border-radius:50%; background:#eb5d68; box-shadow: inset 0 0 0 4px #fff; }
.action-icon-person i:first-child { position:absolute; z-index:2; left: 24px; top: 15px; width: 12px; height: 12px; border: 2px solid #16a36f; border-radius:50%; background:#fff; }
.action-icon-person i:nth-child(2) { position:absolute; z-index:2; left: 18px; bottom: 13px; width: 24px; height: 14px; border: 2px solid #16a36f; border-radius: 14px 14px 7px 7px; }
.action-icon-person i:nth-child(3) { position:absolute; z-index:2; right: 11px; bottom: 11px; width: 12px; height: 12px; border-radius:50%; background:#16a36f; box-shadow: inset 0 0 0 4px #fff; }
.action-icon-track i { position:absolute; z-index:2; left: 18px; right: 18px; height: 4px; border-radius: 4px; background:#1779eb; }
.action-icon-track i:nth-child(1){ top:18px; }
.action-icon-track i:nth-child(2){ top:28px; right:24px; }
.action-icon-track i:nth-child(3){ top:38px; right:30px; opacity:.45; }

/* Process micro visuals */
.process-icon {
  width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(145deg, #f3fbff, #ebf7ff); box-shadow: inset 0 0 0 1px rgba(15,186,212,.15), 0 10px 22px rgba(15,35,67,.05);
}
.process-icon::before { content:""; position:absolute; inset: 10px; border-radius: 12px; background:#fff; }
.process-icon-message i:first-child { position:absolute; z-index:2; left: 15px; right: 15px; top: 16px; bottom: 17px; border: 2px solid #1779eb; border-radius: 10px; }
.process-icon-message i:first-child::after { content:""; position:absolute; left: 8px; bottom: -7px; width: 8px; height: 8px; border-left:2px solid #1779eb; border-bottom:2px solid #1779eb; transform: skewY(-35deg); background:#fff; }
.process-icon-message i:last-child { position:absolute; z-index:2; left: 21px; right: 21px; top: 27px; height: 3px; background:#1779eb; }
.process-icon-data i { position:absolute; z-index:2; left: 17px; right: 17px; height: 7px; border:2px solid #1779eb; border-radius:50%; background:#fff; }
.process-icon-data i:nth-child(1){ top:14px; }
.process-icon-data i:nth-child(2){ top:25px; }
.process-icon-data i:nth-child(3){ top:36px; }
.process-icon-form i { position:absolute; z-index:2; left: 18px; right: 18px; height: 4px; border-radius:4px; background:#1779eb; }
.process-icon-form i:nth-child(1){ top:18px; right:25px; }
.process-icon-form i:nth-child(2){ top:28px; }
.process-icon-form i:nth-child(3){ top:38px; right:22px; }
.process-icon-calc i { position:absolute; z-index:2; width: 8px; height: 8px; border: 2px solid #4a62df; border-radius:50%; background:#fff; }
.process-icon-calc i:nth-child(1){ left:16px; top:16px; }
.process-icon-calc i:nth-child(2){ right:16px; top:16px; }
.process-icon-calc i:nth-child(3){ left:25px; bottom:15px; }
.process-icon-workflow i { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#1779eb; }
.process-icon-workflow i:nth-child(1){ left:16px; top:28px; }
.process-icon-workflow i:nth-child(2){ left:26px; top:17px; }
.process-icon-workflow i:nth-child(3){ right:16px; bottom:16px; }
.process-icon-workflow::before, .process-icon-workflow::after { content:""; position:absolute; z-index:2; height:2px; background:#1779eb; }
.process-icon-workflow::before { left:20px; top:28px; width:16px; transform: rotate(-35deg); }
.process-icon-workflow::after { left:30px; top:25px; width:14px; transform: rotate(42deg); }
.process-icon-file i:first-child { position:absolute; z-index:2; left: 19px; top: 15px; width: 20px; height: 28px; border:2px solid #1779eb; border-radius:4px; background:#fff; }
.process-icon-file i:last-child { position:absolute; z-index:2; left: 33px; top: 15px; width: 8px; height: 8px; border-left:2px solid #1779eb; border-bottom:2px solid #1779eb; }
.process-icon-follow i:first-child { position:absolute; z-index:2; inset: 15px; border: 2px solid #1779eb; border-left-color: transparent; border-radius:50%; }
.process-icon-follow i:last-child { position:absolute; z-index:2; right: 14px; top: 15px; width: 8px; height: 8px; border-top:2px solid #1779eb; border-right:2px solid #1779eb; transform: rotate(24deg); }
.process-icon-track i { position:absolute; z-index:2; left:18px; right:18px; height:4px; border-radius:4px; background:#1779eb; }
.process-icon-track i:nth-child(1){ top:18px; }
.process-icon-track i:nth-child(2){ top:28px; right:24px; }
.process-icon-track i:nth-child(3){ top:38px; right:30px; opacity:.45; }

/* Control micro visuals */
.control-panel-icon {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 16px; background: linear-gradient(145deg, #f3fbff, #ebf7ff); box-shadow: inset 0 0 0 1px rgba(15,186,212,.15), 0 10px 22px rgba(15,35,67,.05);
}
.panel-review .control-panel-icon, .panel-final .control-panel-icon { background: linear-gradient(145deg, #f8f7ff, #f1efff); }
.panel-private .control-panel-icon { background: linear-gradient(145deg, #effcf6, #e7f7ef); }
.control-panel-icon::before { content:""; position:absolute; inset: 10px; border-radius: 12px; background:#fff; }
.icon-ai i { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#1779eb; }
.icon-ai i:nth-child(1){ left:17px; top:30px; }
.icon-ai i:nth-child(2){ left:27px; top:18px; }
.icon-ai i:nth-child(3){ right:16px; bottom:16px; }
.icon-ai::before, .icon-ai::after { content:""; position:absolute; z-index:2; height:2px; background:#1779eb; }
.icon-ai::before { left: 21px; top: 30px; width: 16px; transform: rotate(-35deg); }
.icon-ai::after { left: 31px; top: 27px; width: 14px; transform: rotate(43deg); }
.icon-review i:first-child { position:absolute; z-index:2; left: 24px; top: 15px; width: 12px; height: 12px; border:2px solid #3678ff; border-radius:50%; background:#fff; }
.icon-review i:nth-child(2) { position:absolute; z-index:2; left: 18px; bottom: 14px; width: 24px; height: 14px; border:2px solid #3678ff; border-radius:14px 14px 7px 7px; }
.icon-review i:nth-child(3) { position:absolute; z-index:2; right: 12px; top: 12px; width: 14px; height: 14px; border-radius:50%; background:#3678ff; box-shadow: inset 0 0 0 4px #fff; }
.icon-rules i { position:absolute; z-index:2; width:8px; height:8px; border:2px solid #4a62df; border-radius:50%; background:#fff; }
.icon-rules i:nth-child(1){ left:16px; top:18px; }
.icon-rules i:nth-child(2){ right:16px; top:18px; }
.icon-rules i:nth-child(3){ left:26px; bottom:16px; }
.icon-rules::before, .icon-rules::after { content:""; position:absolute; z-index:2; height:2px; background:#4a62df; }
.icon-rules::before { left: 22px; top: 24px; width: 18px; }
.icon-rules::after { left: 26px; top: 33px; width: 12px; transform: rotate(55deg); }
.icon-final i { position:absolute; z-index:2; left:18px; right:18px; height:4px; border-radius:4px; background:#4a62df; }
.icon-final i:nth-child(1){ top:18px; }
.icon-final i:nth-child(2){ top:28px; right:24px; }
.icon-final i:nth-child(3){ top:38px; right:28px; opacity:.45; }
.icon-private i:first-child { position:absolute; z-index:2; left: 21px; top: 25px; width: 18px; height: 16px; border:2px solid #16a36f; border-radius:4px; background:#fff; }
.icon-private i:last-child { position:absolute; z-index:2; left: 24px; top: 15px; width: 12px; height: 14px; border:2px solid #16a36f; border-bottom:0; border-radius:9px 9px 0 0; }

@media (max-width: 700px) {
  .module-icon, .problem-symbol, .action-icon, .process-icon, .control-panel-icon {
    width: 56px; height: 56px; flex-basis: 56px;
  }
  .problem-symbol { width: 72px; height: 56px; }
}


/* Hero card graphics supplied by the client */
.hero-module {
  overflow: hidden;
}
.module-graphic {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 18px rgba(0,101,253,.10));
}
.hero-module h3 {
  max-width: none !important;
}
@media (max-width: 1080px) {
  .module-graphic { width: 68px; height: 68px; flex-basis: 68px; }
}
@media (max-width: 700px) {
  .module-graphic { width: 62px; height: 62px; flex-basis: 62px; }
}


/* === Problem section: image-led business pain visuals === */
.problem-graphics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  padding-top: 10px;
}
.problem-graphics-grid .problem-graphic-card {
  grid-column: span 2;
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: none;
  border: 1px solid rgba(227,92,104,.28);
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 44px rgba(130,40,50,.075);
}
.problem-graphics-grid .problem-graphic-card:nth-child(4) { grid-column: 2 / span 2; }
.problem-graphics-grid .problem-graphic-card:nth-child(5) { grid-column: 4 / span 2; }
.problem-card-visual {
  position: relative;
  min-height: 265px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(227,92,104,.09), transparent 58%),
    linear-gradient(180deg, rgba(255,247,248,.92), rgba(255,255,255,.98));
  border-bottom: 1px solid rgba(227,92,104,.15);
}
.problem-card-visual::after {
  content: "";
  position: absolute;
  inset: auto 12% 10px;
  height: 24px;
  border-radius: 50%;
  background: rgba(111,34,45,.08);
  filter: blur(14px);
}
.problem-card-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 245px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 24px rgba(58,49,75,.10));
  transition: transform .45s var(--ease);
}
.problem-graphic-card:hover .problem-card-visual img { transform: translateY(-4px) scale(1.025); }
.problem-graphics-grid .problem-graphic-card h3 {
  min-height: 94px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 20px 22px 22px;
  color: #7f2b35;
  font-size: 1.34rem;
  line-height: 1.14;
  letter-spacing: -.035em;
}

@media (max-width: 1080px) {
  .problem-graphics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-graphics-grid .problem-graphic-card,
  .problem-graphics-grid .problem-graphic-card:nth-child(4),
  .problem-graphics-grid .problem-graphic-card:nth-child(5) { grid-column: auto; }
  .problem-graphics-grid .problem-graphic-card:last-child { grid-column: 1 / -1; width: min(100%, 520px); justify-self: center; }
}

@media (max-width: 700px) {
  .problem-graphics-grid { grid-template-columns: 1fr; gap: 16px; }
  .problem-graphics-grid .problem-graphic-card,
  .problem-graphics-grid .problem-graphic-card:last-child {
    grid-column: auto;
    width: 100%;
    min-height: 310px;
  }
  .problem-card-visual { min-height: 220px; }
  .problem-card-visual img { height: 205px; }
  .problem-graphics-grid .problem-graphic-card h3 {
    min-height: 78px;
    padding: 17px 18px 19px;
    font-size: 1.16rem;
  }
}


/* === Corrected Problem visuals: exact file-to-card mapping, compact five-card desktop row === */
.problem-graphics-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding-top: 8px;
}
.problem-graphics-grid .problem-graphic-card,
.problem-graphics-grid .problem-graphic-card:nth-child(4),
.problem-graphics-grid .problem-graphic-card:nth-child(5),
.problem-graphics-grid .problem-graphic-card:last-child {
  grid-column: auto;
  width: auto;
  min-width: 0;
  min-height: 280px;
  justify-self: stretch;
}
.problem-card-visual {
  min-height: 188px;
  padding: 8px 8px 0;
}
.problem-card-visual::after {
  inset: auto 16% 8px;
  height: 18px;
}
.problem-card-visual img {
  width: 100%;
  height: 176px;
  object-fit: contain;
  object-position: center bottom;
}
.problem-graphics-grid .problem-graphic-card h3 {
  min-height: 84px;
  padding: 16px 15px 18px;
  font-size: 1.16rem;
  line-height: 1.15;
}

@media (max-width: 1100px) {
  .problem-graphics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problem-graphics-grid .problem-graphic-card:last-child { grid-column: auto; }
}

@media (max-width: 820px) {
  .problem-graphics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-graphics-grid .problem-graphic-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 360px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .problem-graphics-grid { grid-template-columns: 1fr; gap: 14px; }
  .problem-graphics-grid .problem-graphic-card,
  .problem-graphics-grid .problem-graphic-card:last-child {
    grid-column: auto;
    width: 100%;
    min-height: 272px;
  }
  .problem-card-visual { min-height: 184px; }
  .problem-card-visual img { height: 172px; }
  .problem-graphics-grid .problem-graphic-card h3 {
    min-height: 76px;
    padding: 15px 16px 17px;
    font-size: 1.12rem;
  }
}


/* Private Business Method — generated security visual with JS-driven scan */
.private-security-visual {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(174, 205, 231, .72);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 26px 72px rgba(18, 55, 94, .12);
  isolation: isolate;
}
.private-security-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), inset 0 0 46px rgba(15,186,212,.045);
}
.private-security-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.security-scan-emitter {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 10px;
  width: 34px;
  height: 20px;
  transform: translateX(-50%);
  border: 1px solid rgba(0,101,253,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(0,101,253,.13), 0 0 22px rgba(15,186,212,.18);
  pointer-events: none;
}
.security-scan-emitter::before,
.security-scan-emitter::after,
.security-scan-emitter i {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0fbad4;
  box-shadow: 0 0 8px rgba(15,186,212,.7);
}
.security-scan-emitter::before { left: 7px; }
.security-scan-emitter i { left: 50%; transform: translate(-50%,-50%); }
.security-scan-emitter::after { right: 7px; }
.security-scan-beam {
  position: absolute;
  z-index: 5;
  left: 4%;
  right: 4%;
  top: -18px;
  height: 2px;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(45,200,244,.42) 12%, var(--cyan) 40%, var(--violet) 72%, rgba(255,158,61,.52) 88%, transparent 100%);
  box-shadow: 0 0 8px rgba(15,186,212,.9), 0 0 24px rgba(15,186,212,.5);
  will-change: transform, opacity;
  pointer-events: none;
}
.security-scan-beam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  height: 84px;
  background: linear-gradient(180deg, transparent, rgba(45,200,244,.05) 48%, rgba(129,73,255,.11) 50%, rgba(255,158,61,.05) 53%, transparent);
  pointer-events: none;
}
.security-scan-glow {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 0;
  width: 52%;
  height: 80px;
  transform: translateX(-50%);
  opacity: .38;
  background: radial-gradient(ellipse at 50% 0%, rgba(129,73,255,.18), transparent 72%);
  pointer-events: none;
}
.private-security-visual.is-scanning .security-scan-emitter {
  border-color: rgba(15,186,212,.48);
  box-shadow: 0 8px 22px rgba(0,101,253,.13), 0 0 30px rgba(15,186,212,.28);
}

@media (max-width: 1080px) {
  .private-security-visual { max-width: 820px; }
}

@media (max-width: 700px) {
  .private-security-visual { border-radius: 22px; }
  .security-scan-emitter { top: 7px; transform: translateX(-50%) scale(.88); }
  .security-scan-beam { left: 3%; right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .security-scan-beam { display: none; }
  .security-scan-emitter { box-shadow: 0 8px 22px rgba(0,101,253,.11); }
}


/* === Hero split layout: cards on left, AI on right === */
.hero-operations-split {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  padding: 34px 42px;
  height: 500px !important;
}
.hero-routes-split { z-index: 1; }
.hero-left-stack {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 320px;
}
.hero-operations-split .hero-module {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(15,35,67,.08);
}
.hero-operations-split .hero-module h3 {
  margin: 0 !important;
  font-size: 1.25rem;
  line-height: 1.14;
  letter-spacing: -.03em;
}
.hero-operations-split .module-graphic {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
.hero-ai-core-right {
  position: absolute !important;
  right: 150px;
  left: auto !important;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 168px;
  height: 168px;
}
.hero-ai-core-right .core-inner strong { font-size: 2.38rem; }
.hero-ai-core-right .core-inner small { font-size: .72rem; }
.route-anchor {
  fill: #e9f8fc;
  stroke: rgba(15,186,212,.72);
  stroke-width: 2;
}
.route-anchor-ai {
  fill: #fff;
  stroke: rgba(0,101,253,.82);
  box-shadow: 0 0 0 8px rgba(15,186,212,.12);
}
.hero-operations-split .hero-grid {
  mask-image: radial-gradient(circle at 68% 50%, #000 0, #000 42%, transparent 88%);
}

@media (max-width: 1100px) {
  .hero-operations-split { grid-template-columns: minmax(0, 380px) 1fr; padding: 32px 26px; }
  .hero-left-stack { width: 300px; }
  .hero-ai-core-right { right: 92px; width: 156px; height: 156px; }
}

@media (max-width: 900px) {
  .hero-operations-split {
    grid-template-columns: minmax(0, 340px) 1fr;
    height: 480px !important;
    padding: 28px 18px;
  }
  .hero-left-stack { width: 280px; gap: 14px; }
  .hero-operations-split .hero-module { min-height: 114px; padding: 16px 18px; }
  .hero-operations-split .hero-module h3 { font-size: 1.1rem; }
  .hero-operations-split .module-graphic { width: 62px; height: 62px; flex-basis: 62px; }
  .hero-ai-core-right { right: 58px; width: 138px; height: 138px; }
}

@media (max-width: 700px) {
  .hero-operations-split {
    display: block;
    height: auto !important;
    padding: 22px 16px 26px;
  }
  .hero-routes-split { display: none; }
  .hero-operations-split .hero-grid { mask-image: none; }
  .hero-left-stack {
    width: 100%;
    gap: 12px;
    margin-bottom: 22px;
  }
  .hero-operations-split .hero-module {
    min-height: 112px;
    padding: 16px;
  }
  .hero-operations-split .hero-module h3 { font-size: 1.05rem; }
  .hero-operations-split .module-graphic { width: 56px; height: 56px; flex-basis: 56px; }
  .hero-ai-core-right {
    position: relative !important;
    right: auto;
    top: auto;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 116px;
    height: 116px;
    margin-top: 8px;
  }
}


/* Hero heading alignment and spacing */
.hero-copy {
  width: min(100%, 980px);
  margin: 46px auto 82px;
  text-align: center;
}
.hero-copy h1,
.hero-copy .hero-lead {
  margin-left: auto;
  margin-right: auto;
}
.hero-copy h1 { max-width: 940px; }
.hero-copy .hero-lead { max-width: 850px; }
.hero-operations-split { margin-top: 0; }

@media (max-width: 900px) {
  .hero-copy { margin-top: 34px; margin-bottom: 64px; }
}

@media (max-width: 700px) {
  .hero-copy { margin-top: 26px; margin-bottom: 50px; }
}


/* === What CarryFlow AI Does visual refinement === */
.solution-section .section-lead { max-width: 840px; }
.solution-workspace {
  height: 660px !important;
  background: linear-gradient(145deg, #ffffff, #f8fbff 48%, #f7f1ff 100%);
  border-color: rgba(191,217,231,.95);
}
.workspace-topbar {
  height: 50px;
  background: linear-gradient(180deg, rgba(248,251,254,.98), rgba(243,248,252,.96));
}
.workspace-topbar i { width: 180px; height: 9px; border-radius: 999px; }
.workspace-grid { inset: 50px 0 0; opacity: .92; }
.solution-route { inset: 50px 0 0; height: calc(100% - 50px); }
.solution-route path {
  stroke: rgba(15,186,212,.18);
  stroke-width: 2.2;
  stroke-dasharray: 5 8;
}
.solution-workspace::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 360px;
  height: 360px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,200,244,.08), rgba(129,73,255,.05) 38%, rgba(255,158,61,.03) 62%, transparent 72%);
  pointer-events: none;
}
.solution-core-glow {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  width: 250px;
  height: 250px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px dashed rgba(15,186,212,.16);
  animation: solutionOrbit 16s linear infinite;
  pointer-events: none;
}
.solution-core-glow::before,
.solution-core-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(15,186,212,.1);
}
.solution-core-glow::before { width: 10px; height: 10px; left: 18px; top: 36px; }
.solution-core-glow::after { width: 8px; height: 8px; right: 26px; bottom: 48px; box-shadow: 0 0 0 5px rgba(74,98,223,.08); }
@keyframes solutionOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
.solution-pulse {
  z-index: 3;
  width: 11px; height: 11px;
  box-shadow: 0 0 0 7px rgba(15,186,212,.12), 0 0 18px rgba(15,186,212,.82);
}
.solution-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(15,186,212,.3);
  animation: pulseRing 1.8s ease-out infinite;
}
.solution-pulse-two {
  position: absolute;
  z-index: 2;
  left: 14.6%; top: 28.7%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6a7dff;
  box-shadow: 0 0 14px rgba(106,125,255,.75);
  animation: solutionPulseTwo 8s var(--ease) infinite;
}
@keyframes solutionPulseTwo {
  0%, 8% { left: 76%; top: 68%; }
  17%, 25% { left: 44.7%; top: 68%; }
  34%, 42% { left: 14.6%; top: 68%; }
  51%, 59% { left: 14.6%; top: 28.7%; }
  68%, 76% { left: 44.7%; top: 28.7%; }
  85%, 94% { left: 76%; top: 28.7%; }
  100% { left: 76%; top: 68%; }
}
@keyframes pulseRing { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }

.solution-action {
  width: 292px;
  min-height: 142px;
  gap: 16px;
  padding: 19px 18px;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15,35,67,.06);
}
.solution-action h3 {
  margin-bottom: 7px;
  font-size: 1.14rem !important;
  line-height: 1.14;
  letter-spacing: -.03em;
}
.solution-action p {
  font-size: .78rem !important;
  line-height: 1.45;
  color: #62748a;
}
.action-one { left: 28px; top: 96px; }
.action-two { left: 50%; top: 96px; transform: translateX(-50%); }
.action-three { right: 28px; top: 96px; }
.action-four { right: 28px; bottom: 38px; }
.action-five { left: 50%; bottom: 38px; transform: translateX(-50%); }
.action-six { left: 28px; bottom: 38px; }
.action-two.is-active, .action-five.is-active { transform: translateX(-50%) translateY(-3px); }

.action-icon {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 16px;
  background: linear-gradient(145deg, #f5fbff, #edf8ff) !important;
  box-shadow: inset 0 0 0 1px rgba(15,186,212,.16), 0 8px 20px rgba(15,35,67,.05);
  color: #1779eb;
}
.action-three .action-icon { background: linear-gradient(145deg, #f8f7ff, #f2f0ff) !important; color: #5363e4; }
.action-five .action-icon { background: linear-gradient(145deg, #effcf6, #e9faf1) !important; color: #16a36f; }
.action-icon::before {
  content:"";
  position:absolute;
  inset: 11px;
  border-radius: 12px;
  background:#fff;
}
/* cleaner, more standard icons */
.action-icon-process i,
.action-icon-form i,
.action-icon-rule i,
.action-icon-missing i,
.action-icon-person i,
.action-icon-track i { position: absolute; z-index: 2; }
.action-icon-process i { width: 7px; height: 7px; border-radius:50%; background: currentColor; }
.action-icon-process i:nth-child(1){ left: 15px; top: 28px; }
.action-icon-process i:nth-child(2){ left: 26px; top: 17px; }
.action-icon-process i:nth-child(3){ right: 14px; bottom: 14px; }
.action-icon-process::before, .action-icon-process::after { content:""; position:absolute; z-index:2; height:2px; background: currentColor; }
.action-icon-process::before { left: 19px; top: 28px; width: 16px; transform: rotate(-36deg); }
.action-icon-process::after { left: 30px; top: 25px; width: 15px; transform: rotate(43deg); }

.action-icon-form i:nth-child(1){ left: 18px; top: 15px; width: 22px; height: 26px; border: 2px solid currentColor; border-radius: 5px; background: #fff; }
.action-icon-form i:nth-child(2){ left: 23px; top: 23px; width: 12px; height: 2px; border-radius:2px; background: currentColor; }
.action-icon-form i:nth-child(3){ left: 23px; top: 29px; width: 16px; height: 2px; border-radius:2px; background: currentColor; }
.action-icon-form::after { content:""; position:absolute; z-index:2; right: 16px; top: 14px; width: 11px; height: 11px; border-radius:50%; background: #16a36f; box-shadow: inset 0 0 0 4px #fff; }

.action-icon-rule i:nth-child(1){ left: 16px; top: 17px; width: 8px; height: 8px; border:2px solid currentColor; border-radius:50%; background:#fff; }
.action-icon-rule i:nth-child(2){ right: 16px; top: 17px; width: 8px; height: 8px; border:2px solid currentColor; border-radius:50%; background:#fff; }
.action-icon-rule i:nth-child(3){ left: 25px; bottom: 15px; width: 8px; height: 8px; border:2px solid currentColor; border-radius:50%; background:#fff; }
.action-icon-rule::before, .action-icon-rule::after { content:""; position:absolute; z-index:2; height:2px; background: currentColor; }
.action-icon-rule::before { left: 22px; top: 22px; width: 18px; }
.action-icon-rule::after { left: 27px; top: 32px; width: 12px; transform: rotate(55deg); }

.action-icon-missing i:first-child{ left: 18px; top: 15px; width: 20px; height: 28px; border:2px solid currentColor; border-radius:5px; background:#fff; }
.action-icon-missing i:last-child{ right: 13px; top: 12px; width: 14px; height: 14px; border-radius:50%; background:#eb5d68; box-shadow: inset 0 0 0 4px #fff; }
.action-icon-missing::before { content:""; position:absolute; z-index:2; left: 24px; top: 22px; width: 8px; height: 2px; background: currentColor; }
.action-icon-missing::after { content:""; position:absolute; z-index:2; left: 27px; top: 19px; width: 2px; height: 8px; background: currentColor; }

.action-icon-person i:first-child{ left: 25px; top: 14px; width: 12px; height: 12px; border:2px solid currentColor; border-radius:50%; background:#fff; }
.action-icon-person i:nth-child(2){ left: 18px; bottom: 13px; width: 26px; height: 14px; border:2px solid currentColor; border-radius: 14px 14px 7px 7px; background:#fff; }
.action-icon-person i:nth-child(3){ right: 11px; bottom: 15px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.action-icon-person::before { content:""; position:absolute; z-index:2; right: 14px; top: 19px; width: 10px; height: 2px; background: currentColor; }
.action-icon-person::after { content:""; position:absolute; z-index:2; right: 13px; top: 16px; width: 6px; height: 6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform: rotate(45deg); }

.action-icon-track i:nth-child(1){ left: 19px; top: 17px; width: 20px; height: 4px; border-radius:4px; background: currentColor; }
.action-icon-track i:nth-child(2){ left: 19px; top: 27px; width: 14px; height: 4px; border-radius:4px; background: currentColor; opacity:.72; }
.action-icon-track i:nth-child(3){ display:none; }
.action-icon-track::before { content:""; position:absolute; z-index:2; right: 15px; top: 17px; width: 11px; height: 11px; border:2px solid currentColor; border-radius:50%; background:#fff; }
.action-icon-track::after { content:""; position:absolute; z-index:2; right: 13px; top: 28px; width: 8px; height: 2px; background: currentColor; transform: rotate(42deg); transform-origin: left center; }

.solution-core {
  top: 54% !important;
  width: 132px;
  height: 132px;
  border-radius: 50% !important;
  box-shadow: 0 22px 56px rgba(15,35,67,.18), 0 0 0 12px rgba(15,186,212,.08), 0 0 0 26px rgba(255,255,255,.76);
}
.solution-core::before,
.solution-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(15,186,212,.18);
}
.solution-core::before { inset: -18px; }
.solution-core::after { inset: -36px; border-style: dashed; }
.solution-core small { font-size: .68rem; }
.solution-core strong { font-size: 2.18rem; }

@media (max-width: 1100px) {
  .solution-workspace { height: 690px !important; }
  .solution-action { width: 275px; }
}

@media (max-width: 860px) {
  .solution-workspace { height: auto !important; }
  .solution-core-glow { display: none; }
}

@media (max-width: 700px) {
  .solution-workspace { padding-top: 70px !important; }
  .solution-action h3 { font-size: 1.04rem !important; }
  .solution-action p { font-size: .76rem !important; }
}


/* === Demo section rework based on reference === */
.demo-section {
  background: #f5f7fb !important;
}
.demo-section::before { display: none; }
.demo-section .container { max-width: 1180px; }
.demo-layout {
  position: relative;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 56px 54px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 455px);
  gap: 56px;
  align-items: center;
  border-radius: 32px;
  background: linear-gradient(90deg, #143f9d 0%, #0c1f63 32%, #23124f 70%, #3f2656 100%);
  box-shadow: 0 24px 60px rgba(4, 19, 52, .16);
  overflow: hidden;
}
.demo-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .55;
  pointer-events: none;
}
.demo-layout::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 420px;
  height: 260px;
  background: radial-gradient(circle, rgba(129,73,255,.24), rgba(45,200,244,.12) 32%, rgba(18,193,255,0) 68%);
  pointer-events: none;
}
.demo-glow { display: none; }
.demo-copy, .demo-form { position: relative; z-index: 2; }
.demo-copy {
  color: #fff;
  padding-right: 10px;
}
.demo-copy .eyebrow {
  color: #18c8ff;
  letter-spacing: .28em;
  margin-bottom: 18px;
}
.demo-copy h2 {
  max-width: 540px;
  color: #fff;
  font-size: clamp(2.7rem, 4.7vw, 4.45rem);
  line-height: .98;
  letter-spacing: -.06em;
  margin-bottom: 24px;
}
.demo-copy .section-lead {
  max-width: 520px;
  color: rgba(255,255,255,.78);
  font-size: 1.07rem;
  line-height: 1.72;
}
.demo-small-line {
  max-width: 500px;
  margin-top: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 1rem;
}
.demo-form {
  grid-template-columns: 1fr !important;
  gap: 18px;
  padding: 30px 30px 28px;
  border: 1px solid rgba(230,236,243,.95);
  border-radius: 26px;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 40px rgba(5, 19, 45, .2);
}
.form-field,
.form-field-wide,
.form-button { grid-column: auto !important; }
.form-field { gap: 10px; }
.form-field label {
  font-size: .96rem;
  font-weight: 760;
  color: #1a2d4a;
}
.form-field input,
.form-field textarea {
  border: 1px solid #dde6f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.form-field input {
  height: 50px;
  padding: 0 14px;
}
.form-field textarea {
  min-height: 96px;
  padding: 13px 14px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: #23b5f2;
  box-shadow: 0 0 0 4px rgba(35,181,242,.10);
}
.form-button {
  margin-top: 4px;
  min-height: 54px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-deep), var(--violet) 62%, var(--orange)) !important;
  box-shadow: 0 12px 28px rgba(21,103,242,.24);
}
.form-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(21,103,242,.28);
}

@media (max-width: 1080px) {
  .demo-layout {
    width: min(100%, 900px);
    padding: 42px 34px;
    gap: 34px;
    grid-template-columns: 1fr;
  }
  .demo-copy h2 { max-width: 680px; }
  .demo-form {
    width: min(100%, 520px) !important;
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .demo-layout {
    padding: 28px 18px;
    gap: 26px !important;
    border-radius: 24px;
  }
  .demo-copy h2 {
    font-size: clamp(2.1rem, 10.4vw, 3.1rem);
    line-height: 1.02;
    margin-bottom: 18px;
  }
  .demo-copy .section-lead {
    font-size: .98rem;
    line-height: 1.62;
  }
  .demo-small-line {
    margin-top: 28px !important;
    font-size: .95rem;
  }
  .demo-form {
    width: 100% !important;
    padding: 20px 16px 18px !important;
    border-radius: 20px !important;
    gap: 14px;
  }
  .form-field label { font-size: .9rem; }
  .form-field input { height: 46px; }
  .form-button { min-height: 50px; }
}


/* Demo heading readability fix */
.demo-copy h2 {
  font-size: clamp(2.35rem, 4.1vw, 3.9rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em;
  max-width: 500px;
}
@media (max-width: 700px) {
  .demo-copy h2 {
    font-size: clamp(2rem, 9vw, 2.9rem) !important;
    line-height: 1.1 !important;
  }
}


/* Hero flow redesign */
.hero-routes-split { inset: 0; }
.hero-routes-split .route-base {
  fill: none;
  stroke: url(#routeGradientSoft);
  stroke-width: 2.35;
  stroke-linecap: round;
}
.hero-routes-split .route-base-final {
  stroke-width: 3.4;
  stroke: rgba(0,101,253,.16);
}
.hero-routes-split .route-active {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-dasharray: 92 540;
  animation: routeFlowSoft 5.2s linear infinite;
}
.hero-routes-split .route-active-final {
  stroke-width: 3.9;
  stroke-dasharray: 48 200;
  animation-duration: 2.2s;
}
.hero-routes-split .route-active-delay { animation-delay: -1.6s; }
.hero-routes-split .route-active-delay-two { animation-delay: -.85s; }
.hero-routes-split .route-dot {
  opacity: .98;
}
.hero-routes-split .route-dot-cyan { fill: #24c5ec; }
.hero-routes-split .route-dot-blue { fill: #1a73ff; }
.hero-routes-split .route-dot-final { filter: url(#routeGlow); }
.hero-routes-split .route-anchor {
  fill: #f9feff;
  stroke: rgba(15,186,212,.8);
  stroke-width: 2;
}
.hero-routes-split .route-anchor-ai {
  fill: #fff;
  stroke: rgba(0,101,253,.95);
}
.hero-routes-split .route-merge-glow {
  fill: rgba(15,186,212,.12);
  animation: heroMergePulse 2.8s ease-in-out infinite;
}
.hero-routes-split .route-merge-node {
  fill: #ffffff;
  stroke: rgba(15,186,212,.96);
  stroke-width: 3;
  filter: url(#routeGlow);
}
@keyframes routeFlowSoft { to { stroke-dashoffset: -632; } }
@keyframes heroMergePulse {
  0%, 100% { opacity: .55; transform-box: fill-box; transform-origin: center; transform: scale(.88); }
  50% { opacity: 1; transform-box: fill-box; transform-origin: center; transform: scale(1.08); }
}
.hero-ai-core-right {
  animation: heroAIFloat 5.8s ease-in-out infinite;
}
.hero-ai-core-right::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129,73,255,.15), rgba(45,200,244,0) 68%);
  animation: heroAIGlow 3.2s ease-in-out infinite;
}
.hero-ai-core-right::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px dashed rgba(15,186,212,.18);
  animation: coreSpin 18s linear infinite;
}
.hero-ai-core-right .core-inner {
  animation: heroAIBreathe 3.2s ease-in-out infinite;
  box-shadow: 0 18px 42px rgba(10,26,56,.18);
}
.hero-ai-core-right .core-ring-one { animation-duration: 11s; }
.hero-ai-core-right .core-ring-two { animation-duration: 15s; }
@keyframes heroAIFloat {
  0%,100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-7px); }
}
@keyframes heroAIGlow {
  0%,100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes heroAIBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@media (max-width: 900px) {
  .hero-routes-split .route-active { stroke-width: 2.8; }
  .hero-routes-split .route-base { stroke-width: 2; }
}


/* Performance containment for below-the-fold sections */
.problem-section,
.solution-section,
.process-section,
.private-section,
.control-section,
.demo-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 860px;
}

/* Stable responsive picture rendering */
.problem-card-visual picture,
.private-security-visual picture {
  display: block;
  width: 100%;
}


/* =========================================================
   Mobile responsiveness audit fixes
   Compact scrolling, protected hero spacing, no clipped UI
   ========================================================= */
section[id] { scroll-margin-top: calc(var(--header-height) + 14px); }

@media (max-width: 700px) {
  /* General mobile rhythm */
  .section { padding: 58px 0 !important; }
  h2 { font-size: clamp(1.95rem, 8.7vw, 2.72rem) !important; line-height: 1.07; }
  .section-heading { margin-bottom: 30px !important; }
  .section-lead { line-height: 1.58 !important; }
  .section-small-line { margin-top: 22px !important; }

  /* Hero: visible breathing room without wasting vertical space */
  .hero-section {
    padding-top: calc(var(--header-height) + 68px) !important;
    padding-bottom: 66px !important;
  }
  .hero-copy {
    margin-top: 0 !important;
    margin-bottom: 64px !important;
  }
  .hero-copy h1 {
    margin-bottom: 26px !important;
    line-height: 1.04;
  }
  .hero-copy .hero-lead {
    line-height: 1.62 !important;
  }
  .hero-operations-split {
    padding: 16px 14px 48px !important;
    border-radius: 22px !important;
    overflow: visible;
  }
  .hero-left-stack {
    gap: 10px !important;
    margin-bottom: 34px !important;
  }
  .hero-operations-split .hero-module {
    min-height: 92px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 16px !important;
  }
  .hero-operations-split .module-graphic {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  .hero-operations-split .hero-module h3 {
    font-size: .98rem !important;
    line-height: 1.18 !important;
  }
  .hero-ai-core-right {
    width: 106px !important;
    height: 106px !important;
    margin: 8px auto 18px !important;
  }
  .hero-ai-core-right .core-ring-one { inset: -12px !important; }
  .hero-ai-core-right .core-ring-two { inset: -24px !important; }
  .hero-ai-core-right::after { inset: -28px !important; }
  .hero-ai-core-right .core-inner { inset: 11px !important; }
  .hero-ai-core-right .core-inner strong { font-size: 1.72rem !important; }
  .hero-ai-core-right .core-inner small { font-size: .58rem !important; }
  .hero-actions { margin-top: 28px !important; }

  /* Trust: fewer tall rows */
  .recognition-strip { gap: 9px !important; }
  .recognition-card { height: 66px !important; padding: 10px !important; }
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .proof-card {
    min-height: 146px !important;
    padding: 16px !important;
  }
  .proof-card-primary {
    grid-column: 1 / -1 !important;
    min-height: 132px !important;
  }
  .proof-card:last-child { grid-column: 1 / -1 !important; min-height: 122px !important; }
  .proof-card h3 { margin-top: 12px !important; font-size: .88rem !important; line-height: 1.3 !important; }
  .proof-card h3 strong { font-size: 1.38rem !important; }
  .proof-icon { width: 38px !important; height: 38px !important; }

  /* Problem: image left, title right; major mobile height reduction */
  .problem-graphics-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    padding-top: 0 !important;
  }
  .problem-graphics-grid .problem-graphic-card,
  .problem-graphics-grid .problem-graphic-card:last-child {
    display: grid !important;
    grid-template-columns: 108px minmax(0,1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 116px !important;
    padding: 10px 14px 10px 10px !important;
    gap: 14px !important;
    border-radius: 17px !important;
  }
  .problem-card-visual {
    width: 108px !important;
    height: 92px !important;
    min-height: 92px !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(255,246,248,.95), rgba(255,255,255,.98)) !important;
  }
  .problem-card-visual::after { display: none !important; }
  .problem-card-visual img {
    width: 100% !important;
    height: 88px !important;
    object-position: center !important;
    filter: none !important;
  }
  .problem-graphics-grid .problem-graphic-card h3 {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  /* What CarryFlow AI Does: compact 2-column visual, AI remains centered */
  .solution-workspace {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    height: auto !important;
    gap: 10px !important;
    padding: 58px 11px 14px !important;
    overflow: hidden !important;
  }
  .workspace-topbar { height: 42px !important; }
  .workspace-grid { inset: 42px 0 0 !important; }
  .solution-route,
  .solution-pulse,
  .solution-pulse-two,
  .solution-core-glow { display: none !important; }
  .solution-core {
    display: flex !important;
    position: relative !important;
    grid-column: 1 / -1 !important;
    order: -1 !important;
    left: auto !important;
    top: auto !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 6px !important;
    transform: none !important;
    border-radius: 50% !important;
  }
  .solution-core::before { inset: -10px !important; }
  .solution-core::after { inset: -20px !important; }
  .solution-core small { font-size: .52rem !important; }
  .solution-core strong { font-size: 1.5rem !important; }
  .solution-action,
  .solution-action.is-active,
  .action-two,
  .action-two.is-active,
  .action-five,
  .action-five.is-active {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-height: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px !important;
    transform: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .solution-action h3 { font-size: .92rem !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
  .solution-action p { font-size: .72rem !important; line-height: 1.38 !important; }
  .action-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    transform: scale(.78);
    transform-origin: left top;
    margin-bottom: -8px;
  }

  /* Full process: 2 columns instead of eight tall rows */
  .process-map {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .process-step {
    min-height: 122px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    text-align: center !important;
    border-radius: 16px !important;
  }
  .process-step h3 {
    max-width: none !important;
    margin: 0 !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }
  .process-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    transform: scale(.82);
  }

  /* Private method: keep image readable but tighten unused spacing */
  .private-layout { gap: 26px !important; }
  .private-small-line { margin-top: 20px !important; }
  .private-security-visual { margin-top: 0 !important; }

  /* Business control: 2-column independent points, final privacy card full width */
  .control-console {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    height: auto !important;
    padding: 10px !important;
    overflow: visible !important;
  }
  .console-grid,
  .console-connection,
  .control-preview { display: none !important; }
  .control-panel,
  .control-panel.is-active {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-height: 165px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 13px !important;
    transform: none !important;
    border-radius: 16px !important;
  }
  .panel-private,
  .panel-private.is-active {
    grid-column: 1 / -1 !important;
    min-height: 118px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .control-panel h3 { font-size: .94rem !important; line-height: 1.16 !important; }
  .control-panel p { font-size: .73rem !important; line-height: 1.4 !important; }
  .control-panel-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    transform: scale(.82);
    transform-origin: left top;
    margin-bottom: -7px;
  }
  .panel-private .control-panel-icon { margin-bottom: 0; }

  /* Demo: retain readability while trimming empty area */
  .demo-layout { padding: 24px 16px !important; }
  .demo-small-line { margin-top: 22px !important; }
  .demo-form { gap: 12px !important; padding: 18px 15px 16px !important; }
  .form-field { gap: 7px !important; }
  .form-field input { height: 44px !important; }
  .form-field textarea { min-height: 86px !important; }
}

@media (max-width: 370px) {
  .hero-copy h1 { font-size: clamp(2.32rem, 11.4vw, 3.2rem) !important; }
  .problem-graphics-grid .problem-graphic-card,
  .problem-graphics-grid .problem-graphic-card:last-child {
    grid-template-columns: 96px minmax(0,1fr) !important;
  }
  .problem-card-visual { width: 96px !important; }
  .solution-action { min-height: 156px !important; }
  .solution-action h3 { font-size: .87rem !important; }
  .solution-action p { font-size: .69rem !important; }
  .process-step h3 { font-size: .84rem !important; }
}


html { scroll-padding-top: calc(var(--header-height) + 14px); }

@media (max-width: 700px) {
  .hero-ai-core-right {
    animation: heroAIFloatMobile 5.8s ease-in-out infinite !important;
  }
  @keyframes heroAIFloatMobile {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
  }
}


@media (max-width: 700px) {
  .hero-ai-core-right {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: heroAIFloatMobileCentered 5.8s ease-in-out infinite !important;
  }
  @keyframes heroAIFloatMobileCentered {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
}


/* Hero flow reference-style redesign */
.hero-routes-split { inset: 0; z-index: 1; }
.hero-routes-split .route-base {
  fill: none;
  stroke: rgba(116, 171, 232, 0.34);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.hero-routes-split .route-base-final {
  stroke-width: 2.9;
  stroke: rgba(116, 171, 232, 0.46);
}
.hero-routes-split .route-glow {
  fill: none;
  stroke: rgba(48, 199, 239, 0.22);
  stroke-width: 7;
  stroke-linecap: round;
  filter: url(#routeGlow);
}
.hero-routes-split .route-glow-final {
  stroke-width: 8.5;
  stroke: rgba(28, 116, 255, 0.28);
}
.hero-routes-split .route-active {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 2.8;
  stroke-linecap: round;
}
.hero-routes-split .route-active-final { stroke-width: 3.5; }
.hero-routes-split .route-dot { opacity: 1; }
.hero-routes-split .route-dot-cyan { fill: #28c8ee; }
.hero-routes-split .route-dot-blue { fill: #1b72ff; }
.hero-routes-split .route-anchor {
  fill: #ffffff;
  stroke: rgba(69, 184, 234, 0.78);
  stroke-width: 2;
}
.hero-routes-split .route-merge-glow {
  fill: rgba(40, 200, 238, 0.12);
  filter: url(#routeGlow);
  animation: heroMergePulse 2.6s ease-in-out infinite;
}
.hero-routes-split .route-merge-node {
  fill: #ffffff;
  stroke: #2bc7ef;
  stroke-width: 3;
  filter: url(#routeGlow);
}
.hero-routes-split .route-anchor-ai {
  fill: #ffffff;
  stroke: #1b72ff;
  stroke-width: 2.5;
}
.hero-ai-core-right {
  animation: heroAIFloat 5.5s ease-in-out infinite;
}
.hero-ai-core-right::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 200, 238, 0.18), rgba(41, 200, 238, 0) 70%);
  animation: heroAIGlow 3s ease-in-out infinite;
}
.hero-ai-core-right::after {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  border: 1px solid rgba(45, 193, 239, 0.24);
  box-shadow: 0 0 28px rgba(45,193,239,.08);
  animation: heroOrbitSpin 18s linear infinite;
}
.hero-ai-core-right .core-ring-one,
.hero-ai-core-right .core-ring-two {
  border-color: rgba(45, 193, 239, 0.22) !important;
  box-shadow: 0 0 22px rgba(45,193,239,.06);
}
.hero-ai-core-right .core-inner {
  animation: heroAIBreathe 3.2s ease-in-out infinite;
  box-shadow: 0 18px 46px rgba(10, 26, 56, 0.16), 0 0 0 10px rgba(255,255,255,.82);
}
@keyframes heroOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes heroAIFloat {
  0%,100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-6px); }
}
@keyframes heroAIGlow {
  0%,100% { opacity: .58; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.03); }
}
@keyframes heroAIBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.028); }
}
@keyframes heroMergePulse {
  0%,100% { opacity: .5; transform-box: fill-box; transform-origin: center; transform: scale(.9); }
  50% { opacity: .95; transform-box: fill-box; transform-origin: center; transform: scale(1.1); }
}
@media (max-width: 900px) {
  .hero-routes-split .route-base { stroke-width: 2.1; }
  .hero-routes-split .route-glow { stroke-width: 6; }
  .hero-routes-split .route-active { stroke-width: 2.5; }
}


/* Header navigation tabs */
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.header-nav { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.header-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(168, 190, 214, .55);
  background: rgba(255,255,255,.72);
  color: var(--ink-2); font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.header-tab:hover { transform: translateY(-1px); border-color: rgba(51, 122, 230, .34); background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 10px 24px rgba(15,35,67,.05); }
.header-tab.is-active { background: rgba(13, 98, 235, .08); border-color: rgba(34, 132, 235, .24); color: #0e4aac; }

/* Solar page */
.page-solar .hero-section { background: linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #f8f5ff 100%); }
.page-solar .hero-glow-one { background: radial-gradient(circle, rgba(255, 158, 61, .14), rgba(255, 158, 61, 0) 72%); }
.page-solar .hero-glow-two { background: radial-gradient(circle, rgba(129, 73, 255, .13), rgba(129, 73, 255, 0) 72%); }
.page-solar .hero-copy .eyebrow { margin-bottom: 14px; }
.page-solar .hero-copy span { background: linear-gradient(90deg, #143f9d 0%, #2b75ff 35%, #7d48ff 68%, #ff9e3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.solar-module { display: flex; align-items: center; gap: 18px; }
.solar-module h3 { max-width: 190px; line-height: 1.14; }
.solar-mini-icon {
  position: relative; width: 72px; height: 72px; border-radius: 20px; flex: 0 0 72px;
  border: 1px solid rgba(163, 197, 228, .62); background: linear-gradient(180deg, #fbfdff, #f3f6ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 18px 34px rgba(10, 23, 48, .06);
}
.solar-mini-icon i { position: absolute; display: block; }
.solar-icon-forms i:nth-child(1) { inset: 14px 18px auto; height: 6px; border-radius: 999px; background: #2ac7ef; }
.solar-icon-forms i:nth-child(2) { left: 18px; right: 18px; top: 28px; height: 4px; border-radius: 999px; background: #9cc8f5; box-shadow: 0 10px 0 #9cc8f5, 0 20px 0 #9cc8f5; }
.solar-icon-forms i:nth-child(3) { width: 20px; height: 20px; right: 10px; bottom: 10px; border-radius: 8px; background: linear-gradient(180deg, #53da96, #16aa70); box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }
.solar-icon-bill i:nth-child(1) { left: 17px; top: 12px; width: 38px; height: 48px; border-radius: 12px; border: 2px solid #7fb2f3; background: linear-gradient(180deg, #ffffff, #f1f7fe); }
.solar-icon-bill i:nth-child(2) { left: 25px; top: 24px; width: 22px; height: 4px; border-radius: 999px; background: #2ac7ef; box-shadow: 0 10px 0 #b7d5f7, 0 20px 0 #b7d5f7; }
.solar-icon-bill i:nth-child(3) { right: 10px; bottom: 10px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #ffd46a, #ffb823); box-shadow: 0 0 0 4px rgba(255, 214, 106, .22); }
.solar-icon-workflow i:nth-child(1), .solar-icon-workflow i:nth-child(2), .solar-icon-workflow i:nth-child(3) { width: 12px; height: 12px; border-radius: 50%; background: #21c4ee; top: 17px; left: 16px; box-shadow: 0 0 0 5px rgba(33,196,238,.12); }
.solar-icon-workflow i:nth-child(2) { top: auto; bottom: 17px; left: 30px; background: #1c74ff; box-shadow: 0 0 0 5px rgba(28,116,255,.12); }
.solar-icon-workflow i:nth-child(3) { top: 30px; right: 14px; left: auto; background: #53da96; box-shadow: 0 0 0 5px rgba(83,218,150,.14); }
.solar-icon-workflow::after { content: ""; position: absolute; left: 25px; top: 23px; width: 28px; height: 18px; border-left: 2px solid #a9c8f0; border-bottom: 2px solid #a9c8f0; transform: rotate(-22deg); }
.solar-ai-core::before { background: radial-gradient(circle, rgba(83, 218, 150, 0.18), rgba(41, 200, 238, 0) 70%) !important; }
.solar-fit-section .proof-card { min-height: 170px; display: flex; align-items: center; }
.solar-fit-section .proof-card h3 { font-size: 1.18rem; line-height: 1.38; }
.solar-problem-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.solar-problem-card {
  padding: 22px 18px 18px; border-radius: 24px; border: 1px solid rgba(235, 184, 188, .78);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,245,255,.98));
  box-shadow: 0 16px 36px rgba(145, 29, 46, .05);
}
.solar-problem-card h3 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.26; color: #8d2431; }
.solar-problem-card p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.56; }
.solar-problem-icon {
  position: relative; display: inline-block; width: 58px; height: 58px; margin-bottom: 16px;
  border-radius: 18px; background: linear-gradient(180deg, #fff2f3, #ffe9eb); border: 1px solid rgba(237, 195, 198, .85);
}
.solar-problem-icon i { position: absolute; display: block; background: #ef5666; }
.spi-bill i:nth-child(1) { left: 17px; top: 12px; width: 24px; height: 31px; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #fff6f6); border: 2px solid #ef8895; }
.spi-bill i:nth-child(2) { left: 24px; top: 24px; width: 14px; height: 3px; border-radius: 999px; background: #ef5666; box-shadow: 0 8px 0 #ef5666; }
.spi-docs i:nth-child(1) { left: 15px; top: 13px; width: 28px; height: 32px; border-radius: 8px; background: #fff; border: 2px solid #ef8895; }
.spi-docs i:nth-child(2) { right: 9px; bottom: 10px; width: 19px; height: 19px; border-radius: 50%; background: #ff7a3d; box-shadow: inset 0 0 0 5px rgba(255,255,255,.86); }
.spi-logic i:nth-child(1) { left: 14px; top: 16px; width: 30px; height: 6px; border-radius: 999px; background: #ef5666; box-shadow: 0 10px 0 #f3959e, 0 20px 0 #f3959e; }
.spi-logic i:nth-child(2) { right: 12px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: #ffd56f; box-shadow: 0 0 0 4px rgba(255,213,111,.22); }
.spi-flow i:nth-child(1), .spi-flow i:nth-child(2) { width: 11px; height: 11px; border-radius: 50%; background: #ef5666; left: 14px; top: 16px; }
.spi-flow i:nth-child(2) { left: auto; right: 14px; top: 32px; background: #f89c43; }
.spi-flow::after { content: ""; position: absolute; left: 23px; top: 20px; width: 16px; height: 14px; border-bottom: 2px dashed #ef9aa3; border-right: 2px dashed #ef9aa3; }
.spi-track i:nth-child(1) { left: 18px; top: 14px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #ef5666; background: transparent; }
.spi-track i:nth-child(2) { left: 29px; top: 22px; width: 10px; height: 3px; border-radius: 999px; transform: rotate(45deg); background: #ef5666; box-shadow: -8px 8px 0 #ef5666; }
.page-solar .solution-core-glow { background: radial-gradient(circle, rgba(71, 216, 128, .18), rgba(45,193,239,0) 72%); }
.solar-state-section .private-layout { align-items: center; }
.solar-private-diagram {
  position: relative; min-height: 620px; border-radius: 34px; border: 1px solid rgba(198, 219, 237, .85);
  background: linear-gradient(180deg, rgba(253,255,255,.98), rgba(247,247,255,.98));
  box-shadow: 0 26px 54px rgba(15, 35, 67, .06);
  overflow: hidden;
}
.solar-private-diagram::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(10,23,48,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,23,48,.04) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .65;
}
.solar-diagram-core { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 310px; height: 310px; }
.solar-diagram-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(88, 165, 236, .24); }
.solar-diagram-ring.ring-two { inset: 18px; border-style: dashed; border-color: rgba(53, 197, 239, .3); }
.solar-diagram-shield {
  position: absolute; inset: 58px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  clip-path: polygon(50% 0%, 90% 18%, 90% 54%, 50% 100%, 10% 54%, 10% 18%);
  background: linear-gradient(180deg, rgba(238,246,255,.96), rgba(241,236,255,.96));
  border: 2px solid rgba(53, 197, 239, .42); box-shadow: inset 0 0 0 10px rgba(255,255,255,.75), 0 18px 46px rgba(15,35,67,.08);
}
.solar-diagram-shield b { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(180deg, var(--cyan), var(--violet)); box-shadow: 0 14px 28px rgba(28, 116, 255, .18); position: relative; }
.solar-diagram-shield b::before { content: ""; position: absolute; left: 18px; top: 12px; width: 20px; height: 15px; border: 4px solid rgba(255,255,255,.96); border-bottom: 0; border-radius: 14px 14px 0 0; }
.solar-diagram-shield b::after { content: ""; position: absolute; left: 16px; top: 25px; width: 24px; height: 18px; border-radius: 8px; background: rgba(255,255,255,.96); }
.solar-diagram-shield strong { font-size: 1.7rem; color: var(--ink); letter-spacing: -.03em; }
.solar-diagram-shield small { font-size: .88rem; color: var(--ink-2); font-weight: 700; }
.solar-diagram-card {
  position: absolute; width: 210px; padding: 18px 18px 16px; border-radius: 22px;
  border: 1px solid rgba(200, 219, 236, .9); background: rgba(255,255,255,.96);
  box-shadow: 0 18px 38px rgba(15,35,67,.06);
}
.solar-diagram-card h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.28; }
.solar-diagram-card p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.solar-diagram-card::after { content: ""; position: absolute; width: 68px; height: 2px; background: linear-gradient(90deg, rgba(45,200,244,.28), rgba(129,73,255,.68)); top: 50%; }
.sdc-one { left: 24px; top: 58px; }
.sdc-one::after { right: -68px; }
.sdc-two { left: 24px; top: 214px; }
.sdc-two::after { right: -68px; }
.sdc-three { left: 24px; bottom: 58px; }
.sdc-three::after { right: -68px; }
.sdc-four { right: 24px; top: 58px; }
.sdc-four::after { left: -68px; }
.sdc-five { right: 24px; top: 214px; }
.sdc-five::after { left: -68px; }
.sdc-six { right: 24px; bottom: 58px; }
.sdc-six::after { left: -68px; }

@media (max-width: 1120px) {
  .header-inner { grid-template-columns: auto 1fr; row-gap: 10px; height: auto; padding-top: 10px; padding-bottom: 10px; align-items: center; }
  .header-nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .site-header { height: auto; }
  :root { --header-height: 108px; }
  .solar-problem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solar-private-diagram { min-height: 700px; }
  .solar-diagram-core { width: 250px; height: 250px; }
  .solar-diagram-shield { inset: 46px; }
  .solar-diagram-card { width: 180px; }
  .solar-diagram-card::after { width: 40px; }
  .sdc-one::after, .sdc-two::after, .sdc-three::after { right: -40px; }
  .sdc-four::after, .sdc-five::after, .sdc-six::after { left: -40px; }
}
@media (max-width: 900px) {
  :root { --header-height: 118px; }
  .header-inner { grid-template-columns: 1fr auto; align-items: center; }
  .header-nav { gap: 8px; }
  .header-tab { min-height: 36px; padding-inline: 14px; font-size: .84rem; }
  .page-solar .hero-copy .section-lead { max-width: 100%; }
  .solar-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solar-private-diagram { min-height: auto; padding: 26px; display: grid; grid-template-columns: 1fr; gap: 14px; }
  .solar-diagram-core, .solar-diagram-card { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 100%; }
  .solar-diagram-core { width: 240px; height: 240px; margin: 8px auto 18px; }
  .solar-diagram-card::after { display: none; }
}
@media (max-width: 640px) {
  :root { --header-height: 124px; }
  .header-inner { grid-template-columns: 1fr auto; column-gap: 10px; }
  .header-nav { margin-top: 2px; }
  .header-tab { min-height: 34px; padding-inline: 12px; font-size: .8rem; }
  .button-small { min-height: 38px; }
  .solar-module { gap: 14px; padding: 18px 16px; }
  .solar-mini-icon { width: 62px; height: 62px; flex-basis: 62px; }
  .solar-module h3 { font-size: 1.1rem; max-width: 100%; }
  .solar-fit-section .proof-card h3 { font-size: 1.05rem; }
  .solar-problem-grid { grid-template-columns: 1fr; }
  .solar-problem-card { padding: 18px 16px; display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; }
  .solar-problem-icon { margin: 0; }
  .solar-problem-card h3 { font-size: 1rem; }
  .solar-problem-card p { font-size: .92rem; }
}


/* Solar page refinement */
.page-solar .section-heading .section-lead { max-width: 820px; }
.page-solar .section-heading h2 { max-width: 900px; }
.page-solar .hero-copy h1 { max-width: 660px; }
.page-solar .hero-copy h1 span { display: inline-block; }
.page-solar .hero-copy .hero-lead { max-width: 820px; }
.page-solar .hero-actions { margin-top: 34px; }
.page-solar .hero-operations { min-height: 540px; }
.page-solar .hero-module { min-height: 118px; border-radius: 24px; }
.page-solar .hero-module h3 { font-size: 1.52rem; line-height: 1.14; }
.page-solar .proof-card { padding: 26px 24px; }
.page-solar .proof-card h3 { margin: 0; }
.page-solar .solution-action,
.page-solar .control-panel { gap: 14px; }
.page-solar .solution-action h3,
.page-solar .control-panel h3,
.page-solar .process-step h3 { letter-spacing: -.01em; }
.page-solar .solution-action p,
.page-solar .control-panel p { font-size: .92rem; line-height: 1.52; }
.page-solar .solution-action .action-icon,
.page-solar .control-panel .control-panel-icon,
.page-solar .process-step .process-icon {
  box-shadow: 0 12px 26px rgba(15, 35, 67, .06);
}
.page-solar .solution-core .core-center strong { font-size: 1.55rem; line-height: 1.1; }
.page-solar .solution-core .core-center small { font-size: .76rem; letter-spacing: .08em; }
.page-solar .process-step { padding: 18px 16px; }
.page-solar .process-step h3 { font-size: 1rem; line-height: 1.3; }
.page-solar .process-map { gap: 14px; }
.page-solar .private-small-line,
.page-solar .section-small-line,
.page-solar .demo-small-line { max-width: 820px; }
.page-solar .solar-diagram-card h3 { font-size: 1.03rem; }
.page-solar .solar-diagram-card p { font-size: .88rem; }
.page-solar .control-preview { box-shadow: 0 20px 44px rgba(15,35,67,.08); }
.page-solar .demo-copy h2 { max-width: 520px; line-height: 1.08; }

@media (max-width: 1120px) {
  .page-solar .hero-module h3 { font-size: 1.38rem; }
  .page-solar .solution-action p,
  .page-solar .control-panel p { font-size: .9rem; }
}
@media (max-width: 900px) {
  .page-solar .hero-copy h1 { max-width: 100%; }
  .page-solar .hero-operations { min-height: 500px; }
  .page-solar .hero-module h3 { font-size: 1.22rem; }
  .page-solar .solution-action h3,
  .page-solar .control-panel h3 { font-size: 1rem; }
}
@media (max-width: 640px) {
  .page-solar .hero-copy h1 br { display: none; }
  .page-solar .hero-copy h1 span { display: inline; }
  .page-solar .hero-actions { margin-top: 28px; }
  .page-solar .hero-operations { min-height: 420px; }
  .page-solar .hero-module { min-height: 94px; }
  .page-solar .hero-module h3 { font-size: 1.02rem; }
  .page-solar .proof-card { padding: 20px 18px; }
  .page-solar .proof-card h3 { font-size: 1rem; line-height: 1.4; }
  .page-solar .solution-action,
  .page-solar .control-panel { gap: 12px; }
  .page-solar .solution-action p,
  .page-solar .control-panel p,
  .page-solar .solar-problem-card p { font-size: .88rem; }
  .page-solar .process-step { padding: 16px 14px; }
  .page-solar .process-step h3 { font-size: .96rem; }
}


/* Solar solution core two-line center layout */
.solar-core-center-two-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.solar-core-center-two-line .core-line-one {
  display: block;
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #ffffff;
}
.solar-core-center-two-line .core-line-two {
  display: block;
  font-size: 2.35rem;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #ffffff;
}
.page-solar .solar-solution-core .core-center {
  gap: 6px;
}
@media (max-width: 900px) {
  .solar-core-center-two-line .core-line-one { font-size: 1.72rem; }
  .solar-core-center-two-line .core-line-two { font-size: 1.95rem; }
}
@media (max-width: 640px) {
  .solar-core-center-two-line .core-line-one { font-size: 1.4rem; }
  .solar-core-center-two-line .core-line-two { font-size: 1.6rem; }
}


/* Solar center should match home page */
.page-solar .solar-solution-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-solar .solar-solution-core .core-shell,
.page-solar .solar-solution-core .core-center,
.page-solar .solar-solution-core .core-line-one,
.page-solar .solar-solution-core .core-line-two {
  display: none !important;
}
.page-solar .solar-solution-core small {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ffffff;
}
.page-solar .solar-solution-core strong {
  display: block;
  font-size: 2.18rem;
  line-height: 1;
  letter-spacing: -.08em;
  color: #ffffff;
}
@media (max-width: 640px) {
  .page-solar .solar-solution-core small { font-size: .52rem; }
  .page-solar .solar-solution-core strong { font-size: 1.5rem; }
}


/* Solar private workflow generated image */
.solar-private-image {
  position: relative;
  width: 100%;
  border: 1px solid rgba(198, 219, 237, .85);
  border-radius: 34px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 26px 54px rgba(15, 35, 67, .07);
}
.solar-private-image picture,
.solar-private-image img {
  display: block;
  width: 100%;
}
.solar-private-image img {
  height: auto;
  object-fit: contain;
}
@media (max-width: 1080px) {
  .solar-private-image {
    width: min(100%, 760px);
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .solar-private-image {
    border-radius: 22px;
  }
}


/* Brand refresh: updated logo + subtle facet pattern accents */
.page-home .hero-section,
.page-solar .hero-section,
.page-home .demo-section,
.page-solar .demo-section {
  overflow: hidden;
}
.page-home .hero-section::after,
.page-solar .hero-section::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -10%;
  width: min(46vw, 700px);
  aspect-ratio: 1182 / 1330;
  background: url('../assets/patterns/brand-facet-pattern.webp') no-repeat right bottom / cover;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.02);
}
.page-home .hero-section > .container,
.page-solar .hero-section > .container,
.page-home .demo-section > .container,
.page-solar .demo-section > .container {
  position: relative;
  z-index: 1;
}
.page-home .demo-section::after,
.page-solar .demo-section::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -16%;
  width: min(32vw, 460px);
  aspect-ratio: 1182 / 1330;
  background: url('../assets/patterns/brand-facet-pattern-sm.webp') no-repeat left bottom / contain;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-6deg);
}
@media (max-width: 900px) {
  .page-home .hero-section::after,
  .page-solar .hero-section::after {
    width: min(72vw, 420px);
    right: -20%;
    bottom: -6%;
    opacity: .16;
  }
  .page-home .demo-section::after,
  .page-solar .demo-section::after {
    width: min(58vw, 260px);
    left: -18%;
    bottom: -12%;
    opacity: .10;
  }
}


/* Final navigation refinement */
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  height: 100%;
  padding-block: 0;
}
.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}
.header-tab {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: .88rem;
  font-weight: 720;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.header-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(129,73,255,.16);
  background: linear-gradient(115deg, rgba(45,200,244,.08), rgba(129,73,255,.08), rgba(255,158,61,.06));
  color: var(--ink);
  box-shadow: 0 9px 22px rgba(30,55,110,.05);
}
.header-tab.is-active {
  border-color: rgba(43,117,255,.17);
  background: linear-gradient(115deg, rgba(45,200,244,.10), rgba(129,73,255,.09), rgba(255,158,61,.06));
  color: #173fa4;
}
.header-demo-button { flex: 0 0 auto; }
.mobile-demo-link,
.mobile-nav-toggle { display: none; }

@media (max-width: 1040px) {
  :root { --header-height: 72px; }
  .site-header { height: var(--header-height); }
  .header-inner {
    grid-template-columns: auto 1fr auto;
    height: 100%;
    padding-block: 0;
    row-gap: 0;
  }
  .mobile-nav-toggle {
    position: relative;
    z-index: 3;
    display: inline-flex;
    grid-column: 2;
    justify-self: end;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(43,117,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 24px rgba(16,35,84,.06);
    cursor: pointer;
  }
  .mobile-nav-toggle span {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan-deep), var(--violet));
    transition: transform var(--transition), opacity var(--transition), top var(--transition);
  }
  .mobile-nav-toggle span:nth-child(1) { top: 14px; }
  .mobile-nav-toggle span:nth-child(2) { top: 21px; }
  .mobile-nav-toggle span:nth-child(3) { top: 28px; }
  .site-header.is-menu-open .mobile-nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .site-header.is-menu-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-menu-open .mobile-nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .header-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: max(18px, calc((100vw - var(--container)) / 2));
    left: max(18px, calc((100vw - var(--container)) / 2));
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(199,213,233,.92);
    border-radius: 22px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 70px rgba(16,35,84,.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  }
  .site-header.is-menu-open .header-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .header-tab {
    min-height: 48px;
    justify-content: flex-start;
    padding-inline: 16px;
    border-color: rgba(214,225,239,.75);
    background: #fff;
  }
  .mobile-demo-link {
    display: inline-flex;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }
}

@media (max-width: 620px) {
  :root { --header-height: 68px; }
  .wordmark-logo { width: 158px; max-height: 45px; }
  .header-demo-button { display: none; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .mobile-nav-toggle { grid-column: 2; }
  .header-nav {
    grid-template-columns: 1fr;
    right: 14px;
    left: 14px;
  }
  .mobile-demo-link { grid-column: 1; }
}


/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(43, 117, 255, .15), transparent 30%),
    radial-gradient(circle at 76% 108%, rgba(129, 73, 255, .14), transparent 34%),
    radial-gradient(circle at 96% 12%, rgba(255, 158, 61, .08), transparent 24%),
    #050a18;
  color: #f8fbff;
  padding: 70px 0 26px;
  border-top: 1px solid rgba(45, 200, 244, .18);
}
.footer-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #2b75ff 0%, #2dc8f4 30%, #8149ff 68%, #ff9e3d 100%);
  box-shadow: 0 0 24px rgba(129, 73, 255, .28);
}
.footer-pattern {
  position: absolute;
  right: -110px;
  bottom: -170px;
  width: 470px;
  height: 520px;
  background: url('../assets/patterns/brand-facet-pattern-sm.webp') no-repeat right bottom / contain;
  opacity: .07;
  filter: saturate(1.1);
  pointer-events: none;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(290px, 1.45fr) minmax(220px, .8fr) minmax(240px, .95fr) minmax(150px, .55fr);
  gap: 46px;
  align-items: start;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.footer-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.footer-brand-name {
  color: #ffffff;
  font-size: 1.72rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.045em;
}
.footer-brand-name span {
  font-style: italic;
  font-weight: 650;
}
.footer-description {
  max-width: 390px;
  margin-bottom: 18px;
  color: #9aa8c3;
  font-size: .98rem;
  line-height: 1.65;
}
.footer-global-pill {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(45, 200, 244, .28);
  border-radius: 999px;
  background: rgba(45, 200, 244, .055);
  color: #a8b6cf;
  font-size: .85rem;
}
.footer-global-pill span {
  color: #2dc8f4;
  font-size: 1rem;
}
.footer-email-block { margin-top: 28px; }
.footer-label {
  margin-bottom: 14px;
  color: #68e8ff;
  font-size: .73rem;
  font-weight: 820;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f5f8ff;
  font-weight: 650;
  transition: color var(--transition), transform var(--transition);
}
.footer-email:hover { color: #68e8ff; transform: translateX(2px); }
.footer-icon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #2dc8f4;
}
.footer-icon-mail::before {
  content: "";
  position: absolute;
  inset: 3px 1px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
}
.footer-icon-mail::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  height: 7px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) skew(8deg, 8deg);
}
.footer-office-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.footer-office-title h3 {
  color: #f8fbff;
  font-size: .98rem;
  letter-spacing: -.015em;
}
.footer-icon-pin::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 9px;
  height: 11px;
  border: 1.7px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.footer-icon-pin::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.footer-office address {
  color: #929fb8;
  font-size: .9rem;
  font-style: normal;
  line-height: 1.7;
}
.footer-office address strong {
  color: #aebbd1;
  font-weight: 580;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links .footer-label { margin-bottom: 2px; }
.footer-links a {
  width: fit-content;
  color: #98a6bf;
  font-size: .93rem;
  transition: color var(--transition), transform var(--transition);
}
.footer-links a:hover { color: #ffffff; transform: translateX(3px); }
.footer-links .footer-demo-link {
  margin-top: 4px;
  color: #68e8ff;
  font-weight: 700;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(151, 169, 201, .18);
}
.footer-bottom p {
  margin: 0;
  color: #66738c;
  font-size: .8rem;
}
.footer-company-line { text-align: right; }

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: minmax(280px, 1.3fr) repeat(2, minmax(210px, .8fr));
  }
  .footer-links { grid-column: 2 / 4; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
  .footer-links .footer-label { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .site-footer { padding-top: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-links { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-company-line { text-align: left; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand-block,
  .footer-links { grid-column: auto; }
  .footer-links { flex-direction: column; gap: 11px; }
  .footer-pattern { width: 300px; height: 350px; right: -120px; bottom: -90px; }
  .footer-brand-name { font-size: 1.55rem; }
}


/* Removed decorative overlays requested in final cleanup */
.page-home .hero-section::after,
.page-solar .hero-section::after {
  display: none !important;
  content: none !important;
}
.footer-pattern {
  display: none !important;
}


/* Solar EPC owner-message rework */
.page-solar .solar-hero-outcome {
  max-width: 850px;
  margin: 0 auto 14px;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.1vw, 1.82rem);
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.page-solar .hero-lead { max-width: 860px; }
.page-solar .solar-owner-section {
  background: linear-gradient(180deg, #ffffff, #f8faff);
}
.solar-owner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: min(100%, 1040px);
  margin: 0 auto;
}
.solar-owner-panel {
  position: relative;
  padding: 30px 32px;
  border-radius: 26px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.solar-owner-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
}
.solar-owner-before::before { background: linear-gradient(180deg, #ef6170, #ff9e3d); }
.solar-owner-after::before { background: linear-gradient(180deg, var(--cyan), var(--violet)); }
.solar-owner-before { background: linear-gradient(145deg, #fff, #fff9f8); }
.solar-owner-after { background: linear-gradient(145deg, #fff, #f7f6ff); }
.solar-owner-label {
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 800;
}
.solar-owner-panel ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.solar-owner-panel li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.52;
}
.solar-owner-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .27em;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 2px solid currentColor;
  opacity: .75;
}
.solar-owner-before li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(.27em + 9px);
  width: 10px;
  height: 2px;
  background: #d64d5a;
  transform: rotate(-45deg);
}
.solar-owner-after li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(.27em + 6px);
  width: 9px;
  height: 5px;
  border-left: 2px solid #2b75ff;
  border-bottom: 2px solid #2b75ff;
  transform: rotate(-45deg);
}
.page-solar .solar-workflow-section .process-step h3 { max-width: 190px; }
.page-solar .solar-portal-note {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 3px solid var(--violet);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(129,73,255,.08), rgba(45,200,244,.04));
}
.page-solar .solar-portal-note strong { color: var(--ink); }
.page-solar .solar-state-section .section-heading h2 { max-width: 650px; }
.page-solar .solar-state-section .section-lead { max-width: 690px; }
.page-solar .solar-control-section .section-small-line { display: none; }
.page-solar .demo-copy h2 { max-width: 560px; }

@media (max-width: 900px) {
  .solar-owner-grid { grid-template-columns: 1fr; }
  .solar-owner-panel { padding: 26px 24px; }
}
@media (max-width: 640px) {
  .page-solar .solar-hero-outcome { font-size: 1.18rem; margin-bottom: 12px; }
  .solar-owner-grid { gap: 16px; }
  .solar-owner-panel { padding: 22px 18px; border-radius: 20px; }
  .solar-owner-label { font-size: 1.04rem; margin-bottom: 16px; }
  .solar-owner-panel ul { gap: 13px; }
  .solar-owner-panel li { padding-left: 28px; font-size: .94rem; }
  .page-solar .solar-portal-note { padding: 14px 15px; font-size: .9rem; }
}