@charset "UTF-8";

:root {
  --bg: #07111f;
  --bg-deep: #040b14;
  --surface: #0b1828;
  --surface-2: #102238;
  --line: rgba(151, 188, 219, 0.15);
  --line-strong: rgba(151, 188, 219, 0.28);
  --text: #f2f7fb;
  --muted: #91a6b9;
  --muted-2: #637b91;
  --accent: #38bdf8;
  --accent-2: #55e6c1;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --radius: 20px;
  --container: 1240px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #25435b var(--bg-deep); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.has-grid {
  background-image:
    linear-gradient(rgba(110, 168, 205, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 168, 205, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}
::selection { color: #03101b; background: var(--accent); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.narrow { max-width: 860px; }
.section { position: relative; padding: 132px 0; }
.kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-no { color: var(--muted-2); font: 500 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; margin-right: 16px; }
.mini-title { margin-bottom: 28px; }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 82px;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.is-scrolled {
  height: 68px;
  background: rgba(4, 11, 20, .82);
  border-color: var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.brand-mark { position: relative; display: inline-grid; width: 29px; height: 29px; transform: rotate(-2deg); }
.brand-mark::before, .brand-mark::after, .brand-mark i {
  position: absolute;
  content: "";
  border: 1.5px solid var(--accent);
  transform: skewY(-23deg);
}
.brand-mark::before { inset: 3px 10px 3px 2px; background: rgba(56,189,248,.13); }
.brand-mark::after { inset: 7px 2px 7px 15px; border-left: 0; }
.brand-mark i:nth-child(1) { width: 5px; height: 5px; border-radius: 50%; border: 0; background: var(--accent-2); right: 0; top: 1px; box-shadow: 0 0 12px var(--accent-2); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { display: none; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav > a { position: relative; color: #b6c5d1; font-size: 14px; transition: color .25s ease; }
.main-nav > a:not(.nav-cta)::after { position: absolute; content: ""; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--accent); transition: right .3s var(--ease); }
.main-nav > a:hover { color: #fff; }
.main-nav > a:hover::after { right: 0; }
.main-nav .nav-cta { padding: 9px 15px 9px 17px; border: 1px solid var(--line-strong); border-radius: 999px; color: #fff; }
.main-nav .nav-cta span { color: var(--accent); margin-left: 7px; }
.nav-toggle { display: none; padding: 9px; border: 0; background: transparent; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px; background: #fff; transition: transform .25s ease; }

.hero {
  position: relative;
  min-height: 900px;
  padding: 184px 0 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 42%, rgba(37, 150, 210, .13), transparent 35%),
    linear-gradient(180deg, rgba(8,21,36,.35), rgba(4,11,20,.6));
}
.hero::before {
  position: absolute; content: ""; inset: 0;
  background: linear-gradient(90deg, transparent 49.95%, rgba(113,173,211,.06) 50%, transparent 50.05%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: 68px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #9dc0d7; font: 600 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .2em; }
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.eyebrow-line { width: 54px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.hero h1 { max-width: 660px; margin: 30px 0 28px; font-size: clamp(54px, 5.35vw, 78px); line-height: 1.07; letter-spacing: -.045em; font-weight: 640; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: transparent; font-style: normal; background: linear-gradient(95deg, #fff 5%, #76d8ff 48%, #54e6c1 92%); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 600px; margin: 0 0 38px; color: #a8bac8; font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 52px; padding: 0 20px 0 24px; border-radius: 4px; font-size: 14px; font-weight: 600; transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-3px); }
.btn i { font-style: normal; font-size: 17px; }
.btn-primary { color: #04111d; background: linear-gradient(135deg, var(--accent), #72e0ff); box-shadow: 0 12px 34px rgba(56,189,248,.17); }
.btn-primary:hover { box-shadow: 0 16px 46px rgba(56,189,248,.28); }
.btn-ghost { border: 1px solid var(--line-strong); color: #d9e5ed; }
.btn-ghost:hover { border-color: rgba(56,189,248,.6); }
.hero-proof { display: flex; align-items: center; gap: 21px; margin-top: 48px; color: var(--muted-2); font-size: 11px; letter-spacing: .05em; }
.hero-proof span { display: inline-flex; align-items: baseline; gap: 5px; }
.hero-proof b { color: #d8e8f3; font: 600 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.hero-proof > i { width: 1px; height: 20px; background: var(--line-strong); }
.hero-visual { position: relative; min-width: 0; }
.visual-frame {
  position: relative;
  aspect-ratio: 1.12 / 1;
  padding: 14px;
  border: 1px solid rgba(112,176,215,.24);
  background: linear-gradient(145deg, rgba(17,40,62,.7), rgba(4,15,27,.74));
  box-shadow: var(--shadow), inset 0 0 80px rgba(31,131,184,.05);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}
.visual-frame::before {
  position: absolute; content: ""; inset: 14px;
  background:
    linear-gradient(rgba(83,153,198,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,153,198,.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.frame-corner { position: absolute; width: 24px; height: 24px; z-index: 3; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.visual-toolbar, .visual-footer { position: relative; z-index: 4; display: flex; align-items: center; height: 36px; color: #58758b; font: 500 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.visual-toolbar { justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 7px; }
.visual-toolbar b { color: var(--accent-2); font-size: 8px; }
.toolbar-dots { display: flex; gap: 4px; }
.toolbar-dots i { width: 4px; height: 4px; border-radius: 50%; background: #496477; }
.blueprint { position: relative; z-index: 2; height: calc(100% - 72px); overflow: hidden; perspective: 700px; }
.blueprint::before {
  position: absolute; content: ""; width: 76%; height: 70%; left: 13%; bottom: 3%;
  border: 1px solid rgba(69,190,241,.18);
  transform: rotateX(59deg) rotateZ(-30deg);
  background:
    linear-gradient(rgba(71,179,227,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71,179,227,.16) 1px, transparent 1px);
  background-size: 26px 26px;
}
.building { position: absolute; bottom: 19%; display: flex; align-items: flex-end; gap: 2px; filter: drop-shadow(0 0 12px rgba(39,176,232,.16)); }
.building i { display: block; border: 1px solid rgba(81,201,247,.4); background: linear-gradient(180deg, rgba(50,185,237,.16), rgba(19,80,113,.08)); }
.building-a { left: 28%; transform: skewY(-8deg); }
.building-a i:nth-child(1) { width: 36px; height: 100px; }.building-a i:nth-child(2) { width: 24px; height: 136px; }.building-a i:nth-child(3) { width: 29px; height: 116px; }.building-a i:nth-child(4) { width: 18px; height: 74px; }
.building-b { left: 50%; bottom: 22%; transform: skewY(6deg); }
.building-b i:nth-child(1) { width: 35px; height: 165px; }.building-b i:nth-child(2) { width: 23px; height: 126px; }.building-b i:nth-child(3) { width: 38px; height: 90px; }
.building-c { left: 42%; bottom: 14%; opacity: .65; }
.building-c i:nth-child(1) { width: 20px; height: 43px; }.building-c i:nth-child(2) { width: 29px; height: 68px; }.building-c i:nth-child(3) { width: 23px; height: 51px; }.building-c i:nth-child(4) { width: 16px; height: 34px; }.building-c i:nth-child(5) { width: 28px; height: 49px; }
.scan-line { position: absolute; z-index: 5; left: 10%; right: 10%; top: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 16px var(--accent); animation: scan 4.8s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateY(0); opacity: 0; } 15% { opacity: .75; } 85% { opacity: .4; } 50% { transform: translateY(280px); } }
.node { position: absolute; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(84,193,238,.22); background: rgba(4,14,25,.72); color: #8db3c9; font-size: 8px; letter-spacing: .08em; backdrop-filter: blur(6px); }
.node > i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.node-a { top: 18%; left: 10%; }.node-b { top: 35%; right: 7%; }.node-c { bottom: 12%; left: 8%; }
.visual-footer { justify-content: space-between; border-top: 1px solid var(--line); padding: 0 7px; }
.visual-footer span:first-child { color: #79b8d7; }
.visual-footer i { display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: var(--accent-2); }
.floating-chip { position: absolute; z-index: 10; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 155px; padding: 11px 13px; border: 1px solid rgba(116,185,219,.25); background: rgba(8,25,41,.88); box-shadow: 0 16px 40px rgba(0,0,0,.26); backdrop-filter: blur(14px); font-size: 10px; animation: float 5s ease-in-out infinite; }
.floating-chip span { grid-row: 1/3; align-self: center; color: var(--accent); font: 500 18px/1 ui-monospace, monospace; }
.floating-chip b { color: #dcebf3; font-size: 10px; }
.floating-chip i { color: var(--accent-2); font-style: normal; font: 500 7px/1 ui-monospace, monospace; letter-spacing: .15em; }
.chip-one { top: 17%; right: -25px; }.chip-two { left: -28px; bottom: 18%; animation-delay: -2.4s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-orbit { position: absolute; border: 1px solid rgba(67,168,217,.08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 820px; height: 820px; right: -360px; top: -390px; }
.orbit-two { width: 480px; height: 480px; left: -300px; bottom: -270px; }
.hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; color: #526b7d; font: 500 8px/1 ui-monospace, monospace; letter-spacing: .18em; }
.hero-scroll i { width: 72px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.trust-strip { border-block: 1px solid var(--line); background: rgba(4,12,21,.48); overflow: hidden; }
.trust-track { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #647d91; font-size: 12px; letter-spacing: .08em; }
.trust-track i { color: rgba(56,189,248,.3); font-size: 7px; }

.section-head { display: grid; grid-template-columns: .9fr 1.4fr .9fr; align-items: end; gap: 52px; margin-bottom: 62px; }
.section-head h2, .capability-copy h2, .impact-intro h2 { margin: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.23; letter-spacing: -.035em; font-weight: 570; }
.balanced-title span { display: block; white-space: nowrap; }
.section-head p, .capability-copy > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.products { background: linear-gradient(180deg, var(--bg-deep), #071423 80%); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card {
  position: relative;
  min-height: 520px;
  padding: 30px 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(16,37,58,.86), rgba(7,20,34,.82));
  overflow: hidden;
  transition: transform .42s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.product-card::before { position: absolute; content: ""; width: 230px; height: 230px; right: -100px; top: -120px; border-radius: 50%; background: var(--accent); opacity: .04; filter: blur(10px); transition: opacity .3s ease, transform .5s ease; }
.product-card:hover { transform: translateY(-9px); border-color: rgba(56,189,248,.35); box-shadow: 0 24px 56px rgba(0,0,0,.25); }
.product-card:hover::before { opacity: .1; transform: scale(1.25); }
.product-card.featured { border-color: rgba(56,189,248,.3); background: linear-gradient(145deg, rgba(14,54,80,.88), rgba(7,22,37,.88)); }
.product-top { display: flex; justify-content: space-between; color: #57758a; font: 500 8px/1 ui-monospace, monospace; letter-spacing: .13em; }
.product-top i { padding: 5px 8px; color: var(--accent-2); border: 1px solid rgba(85,230,193,.16); border-radius: 999px; font-style: normal; }
.product-icon { position: relative; width: 88px; height: 88px; margin: 46px 0 25px; border: 1px solid rgba(65,179,226,.16); border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,.13), transparent 66%); }
.product-icon::before, .product-icon::after, .product-icon i { position: absolute; content: ""; display: block; border: 1px solid rgba(101,205,247,.56); }
.icon-draw::before { width: 32px; height: 42px; left: 26px; top: 22px; transform: skewY(-10deg); }
.icon-draw::after { width: 22px; height: 30px; left: 37px; top: 30px; border-color: rgba(85,230,193,.45); }
.icon-draw i:first-child { width: 5px; height: 5px; border-radius: 50%; top: 18px; right: 19px; background: var(--accent-2); border: 0; box-shadow: 0 0 10px var(--accent-2); }
.icon-knowledge::before { inset: 23px; border-radius: 50%; }
.icon-knowledge::after { width: 35px; height: 1px; left: 26px; top: 43px; background: rgba(101,205,247,.56); transform: rotate(45deg); }
.icon-knowledge i:nth-child(1), .icon-knowledge i:nth-child(2), .icon-knowledge i:nth-child(3) { width: 7px; height: 7px; border-radius: 50%; background: #0d263a; box-shadow: 0 0 9px rgba(56,189,248,.4); }
.icon-knowledge i:nth-child(1) { left: 21px; top: 38px; }.icon-knowledge i:nth-child(2) { right: 20px; top: 22px; }.icon-knowledge i:nth-child(3) { right: 22px; bottom: 22px; }
.icon-home::before { width: 37px; height: 30px; left: 25px; top: 35px; transform: skewY(-7deg); }
.icon-home::after { width: 28px; height: 28px; left: 29px; top: 22px; transform: rotate(45deg); border-right: 0; border-bottom: 0; }
.icon-home i:first-child { width: 9px; height: 17px; left: 39px; bottom: 23px; border-color: rgba(85,230,193,.55); }
.product-card h3 { margin: 0 0 1px; font-size: 28px; letter-spacing: -.02em; }
.product-card > strong { color: #7da2b8; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.product-card > p { min-height: 90px; margin: 22px 0; color: #8fa6b7; font-size: 13px; line-height: 1.9; }
.product-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 28px; padding: 0; list-style: none; }
.product-card li { padding: 5px 9px; border: 1px solid var(--line); border-radius: 3px; color: #7691a4; font-size: 9px; letter-spacing: .06em; }
.product-card > a { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--line); color: #bfd1dd; font-size: 12px; }
.product-card > a span { color: var(--accent); transition: transform .25s ease; }.product-card > a:hover span { transform: translate(3px,-3px); }

.capability-section { background: #07131f; overflow: hidden; }
.capability-section::after { position: absolute; content: ""; width: 560px; height: 560px; right: -230px; bottom: -320px; border: 1px solid rgba(56,189,248,.07); border-radius: 50%; box-shadow: 0 0 0 90px rgba(56,189,248,.018), 0 0 0 180px rgba(56,189,248,.012); }
.capability-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 94px; align-items: center; }
.capability-copy > p { max-width: 470px; margin: 24px 0 36px; }
.capability-list { border-top: 1px solid var(--line); }
.capability-item { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 17px 4px; color: var(--muted-2); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: color .25s ease, padding .3s var(--ease); }
.capability-item > span { font: 500 9px/1 ui-monospace, monospace; }
.capability-item b { display: block; color: #93a9b9; font-size: 14px; font-weight: 500; transition: color .25s ease; }
.capability-item small { display: block; margin-top: 2px; font-size: 10px; }
.capability-item > i { opacity: 0; color: var(--accent); font-style: normal; transition: opacity .25s ease; }
.capability-item:hover, .capability-item.active { color: var(--accent); padding-left: 12px; }
.capability-item.active b { color: #fff; }.capability-item.active > i { opacity: 1; }
.capability-panel { position: relative; min-height: 590px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(14,36,56,.76), rgba(5,16,28,.88)); box-shadow: var(--shadow); overflow: hidden; }
.panel-head, .panel-metrics { position: absolute; z-index: 5; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 24px; font: 500 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.panel-head { top: 0; height: 50px; align-items: center; border-bottom: 1px solid var(--line); color: #5f7c90; }
.panel-head i { color: var(--accent-2); font-style: normal; }
.network-map { position: absolute; inset: 50px 0 64px; overflow: hidden; background: linear-gradient(rgba(83,153,198,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(83,153,198,.05) 1px, transparent 1px); background-size: 42px 42px; transition: filter .3s ease; }
.network-map::before, .network-map::after { position: absolute; content: ""; background: linear-gradient(90deg, transparent, rgba(56,189,248,.22), transparent); }
.network-map::before { width: 58%; height: 1px; left: 21%; top: 50%; transform: rotate(31deg); }
.network-map::after { width: 52%; height: 1px; left: 25%; top: 50%; transform: rotate(-35deg); }
.network-map.is-switching { animation: graphSwitch .55s ease; }
@keyframes graphSwitch { 40% { filter: brightness(1.65) saturate(1.4); } }
.net-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(56,189,248,.11); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-a { width: 315px; height: 315px; animation: rotateRing 24s linear infinite; border-style: dashed; }
.ring-b { width: 430px; height: 430px; animation: rotateRing 34s linear infinite reverse; }
@keyframes rotateRing { to { transform: translate(-50%,-50%) rotate(360deg); } }
.net-core { position: absolute; z-index: 4; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(56,189,248,.45); border-radius: 50%; background: radial-gradient(circle, rgba(31,134,181,.35), rgba(5,19,32,.95) 68%); box-shadow: 0 0 60px rgba(37,167,222,.18), inset 0 0 30px rgba(56,189,248,.09); }
.net-core::before { position: absolute; content: ""; inset: -9px; border: 1px dashed rgba(56,189,248,.22); border-radius: 50%; animation: rotateRing 12s linear infinite; }
.net-core span { color: #9dc7db; font-size: 12px; }.net-core b { color: #fff; font-size: 24px; line-height: 1; }
.net-core i { position: absolute; right: 3px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); }
.satellite { position: absolute; z-index: 3; min-width: 112px; padding: 11px 12px 10px 28px; border: 1px solid rgba(115,181,215,.2); background: rgba(7,24,39,.85); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.satellite > i { position: absolute; left: 12px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.satellite b { display: block; color: #bbd0dd; font-size: 10px; font-weight: 500; }.satellite small { display: block; color: #4c6b81; font: 500 7px/1.4 ui-monospace, monospace; }
.sat-a { left: 9%; top: 15%; }.sat-b { right: 7%; top: 20%; }.sat-c { right: 11%; bottom: 12%; }.sat-d { left: 7%; bottom: 18%; }
.data-pulse { position: absolute; z-index: 5; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulseMove 4s linear infinite; }
.pulse-a { left: 18%; top: 28%; }.pulse-b { right: 22%; bottom: 28%; animation-delay: -2s; }
@keyframes pulseMove { 0%,100% { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } 55% { opacity: 1; transform: translate(160px,100px); } 80% { opacity: 0; transform: translate(245px,140px); } }
.panel-metrics { bottom: 0; height: 64px; align-items: center; border-top: 1px solid var(--line); }
.panel-metrics span { display: flex; flex-direction: column; gap: 5px; }.panel-metrics small { color: #4d687b; font-size: 7px; }.panel-metrics b { color: #94bdcf; font-size: 9px; font-weight: 500; }
.panel-metrics span:first-child b { color: var(--accent-2); }

.impact { padding-block: 114px; background: #050e18; border-block: 1px solid var(--line); }
.impact-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 68px; }
.impact-intro .mini-title { align-self: flex-start; min-width: 240px; }
.impact-intro h2 { flex: 1; max-width: 690px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.metric { position: relative; min-height: 190px; padding: 42px 30px 28px; border-right: 1px solid var(--line); background: rgba(10,28,44,.5); }
.metric:last-child { border-right: 0; }
.metric::after { position: absolute; content: ""; left: 0; bottom: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s var(--ease); }
.metric.is-visible::after { width: 100%; }
.metric span { color: #dff6ff; font: 520 clamp(48px, 5vw, 66px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.07em; }
.metric > i { color: var(--accent); font: 500 20px/1 ui-monospace, monospace; font-style: normal; margin-left: 6px; }
.metric p { margin: 24px 0 0; color: #7390a3; font-size: 11px; letter-spacing: .08em; }
.data-note { margin: 18px 0 0; color: #456175; font-size: 9px; text-align: right; }

.cases { background: linear-gradient(180deg, #071523, var(--bg-deep)); }
.section-head.compact { grid-template-columns: .8fr 1.35fr .85fr; }
.case-grid { display: grid; grid-template-columns: 1.16fr .84fr .84fr; grid-template-rows: repeat(2, 290px); gap: 16px; }
.case-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(14,35,54,.74), rgba(6,18,31,.78)); overflow: hidden; transition: border-color .3s ease, transform .35s var(--ease); }
.case-card:hover { transform: translateY(-5px); border-color: rgba(56,189,248,.32); }
.case-large { grid-row: 1/3; }.case-wide { grid-column: 2/4; flex-direction: row; align-items: flex-end; }
.case-index { position: absolute; top: 18px; right: 20px; color: #38566b; font: 500 9px/1 ui-monospace, monospace; }
.case-card small { color: var(--accent); font: 500 8px/1 ui-monospace, monospace; letter-spacing: .16em; }
.case-card h3 { margin: 7px 0 6px; font-size: 24px; font-weight: 540; }.case-card p { max-width: 350px; margin: 0; color: #708b9e; font-size: 11px; line-height: 1.8; }
.case-graphic { position: relative; width: 100%; height: 120px; opacity: .75; }
.case-large .case-graphic { height: 330px; }
.case-wide .case-graphic { order: 2; width: 52%; height: 190px; }
.case-graphic::before { position: absolute; content: ""; left: 10%; right: 10%; bottom: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), transparent); }
.case-graphic i { position: absolute; display: block; border: 1px solid rgba(74,190,237,.38); background: rgba(56,189,248,.035); }
.graphic-design i:nth-child(1) { width: 50%; height: 68%; left: 23%; bottom: 12%; transform: skewY(-7deg); }.graphic-design i:nth-child(2) { width: 34%; height: 48%; left: 12%; bottom: 12%; }.graphic-design i:nth-child(3) { width: 26%; height: 83%; right: 9%; bottom: 12%; }.graphic-design i:nth-child(4) { width: 7px; height: 7px; border-radius: 50%; right: 6%; top: 9%; background: var(--accent-2); border: 0; box-shadow: 0 0 12px var(--accent-2); }
.graphic-review i:nth-child(1) { inset: 20% 20% 20%; transform: rotate(-5deg); }.graphic-review i:nth-child(2) { width: 24%; height: 1px; left: 37%; top: 43%; background: var(--accent); }.graphic-review i:nth-child(3) { width: 14px; height: 14px; border-radius: 50%; right: 21%; bottom: 20%; background: rgba(85,230,193,.18); border-color: var(--accent-2); }
.graphic-city i { bottom: 10%; }.graphic-city i:nth-child(1) { width: 17%; height: 44%; left: 15%; }.graphic-city i:nth-child(2) { width: 22%; height: 68%; left: 34%; }.graphic-city i:nth-child(3) { width: 16%; height: 52%; left: 58%; }.graphic-city i:nth-child(4) { width: 10%; height: 35%; left: 76%; }
.graphic-asset i:nth-child(1) { width: 42%; height: 55%; left: 18%; top: 25%; }.graphic-asset i:nth-child(2) { width: 42%; height: 55%; left: 29%; top: 15%; }.graphic-asset i:nth-child(3) { width: 42%; height: 55%; left: 40%; top: 5%; }
.graphic-operation i { bottom: 10%; border-radius: 50% 50% 0 0; }.graphic-operation i:nth-child(1) { width: 56%; height: 76%; left: 20%; }.graphic-operation i:nth-child(2) { width: 40%; height: 58%; left: 28%; }.graphic-operation i:nth-child(3) { width: 25%; height: 38%; left: 36%; }.graphic-operation i:nth-child(4) { width: 7px; height: 7px; left: 48%; top: 39%; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); border: 0; }.graphic-operation i:nth-child(5) { width: 60%; height: 1px; left: 17%; top: 55%; background: rgba(56,189,248,.32); border: 0; }

.insights { background: #06101b; }
.section-head.inline { grid-template-columns: .8fr 1.6fr auto; align-items: center; }
.section-head.inline a { color: #9cb3c3; font-size: 12px; }.section-head.inline a span { color: var(--accent); margin-left: 8px; }
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.post-card { min-width: 0; }
.post-cover { position: relative; display: block; aspect-ratio: 1.6/1; margin-bottom: 20px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: #0b1c2b; overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }.post-card:hover .post-cover img { transform: scale(1.045); }
.cover-placeholder { position: absolute; inset: 0; background: linear-gradient(145deg, #102f48, #071525); overflow: hidden; }
.cover-placeholder::before, .cover-placeholder::after { position: absolute; content: ""; width: 62%; height: 120%; top: -12%; border: 1px solid rgba(78,187,234,.17); transform: skewX(-24deg); }
.cover-placeholder::before { left: 11%; }.cover-placeholder::after { left: 35%; }
.cover-placeholder i { position: absolute; width: 7px; height: 7px; right: 13%; top: 19%; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); }
.cover-placeholder b { position: absolute; right: 20px; bottom: 12px; color: rgba(153,214,238,.18); font: 500 52px/1 ui-monospace, monospace; }
.post-meta { display: flex; align-items: center; gap: 10px; color: #557286; font: 500 8px/1 ui-monospace, monospace; letter-spacing: .1em; }.post-meta i { width: 18px; height: 1px; background: #35536a; }
.post-card h3 { margin: 13px 0 10px; font-size: 19px; line-height: 1.45; font-weight: 530; }.post-card h3 a { transition: color .25s ease; }.post-card h3 a:hover { color: var(--accent); }
.post-card p { min-height: 48px; margin: 0 0 17px; color: #718b9d; font-size: 11px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-link { color: #91a9b9; font-size: 10px; }.post-link span { color: var(--accent); margin-left: 7px; }

.contact { padding-top: 60px; background: var(--bg-deep); }
.contact-shell { position: relative; min-height: 330px; display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 66px 74px; border: 1px solid rgba(65,186,232,.28); border-radius: var(--radius); background: linear-gradient(125deg, rgba(15,65,90,.84), rgba(7,28,46,.9) 55%, rgba(9,47,62,.86)); overflow: hidden; }
.contact-shell::before { position: absolute; content: ""; inset: 0; background: linear-gradient(rgba(83,153,198,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(83,153,198,.05) 1px, transparent 1px); background-size: 34px 34px; }
.contact-glow { position: absolute; width: 420px; height: 420px; right: -70px; top: -120px; border: 1px solid rgba(85,230,193,.12); border-radius: 50%; box-shadow: 0 0 0 50px rgba(56,189,248,.025), 0 0 0 100px rgba(56,189,248,.016); }
.contact-copy, .contact-action { position: relative; z-index: 2; }
.contact-copy h2 { margin: 15px 0 15px; font-size: clamp(36px,4vw,52px); line-height: 1.2; letter-spacing: -.035em; font-weight: 570; }
.contact-copy p { margin: 0; color: #8bb1c4; font-size: 13px; }
.contact-action { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.btn-light { min-width: 170px; color: #06121c; background: #eaf8fd; }.contact-action > span { color: #668b9d; font-size: 9px; letter-spacing: .06em; }

.site-footer { padding: 86px 0 28px; background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: 1.65fr .65fr .8fr; gap: 80px; padding-bottom: 60px; }
.footer-brand { margin-bottom: 19px; }
.footer-intro { max-width: 360px; margin: 0; color: #617b8e; font-size: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; color: #6f8798; font-size: 11px; }
.footer-links strong { margin-bottom: 8px; color: #afc2cf; font-size: 11px; font-weight: 550; }.footer-links a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; border-top: 1px solid var(--line); color: #415c70; font: 500 8px/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.footer-bottom i { font-style: normal; }.footer-bottom b { font-weight: 500; }
.footer-status { color: #57778a; }.footer-status i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 9px var(--accent-2); }

.inner-page { background-color: var(--bg-deep); }
.listing-hero, .article-hero { position: relative; padding: 190px 0 90px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 76% 28%, rgba(56,189,248,.1), transparent 30%); }
.listing-hero::after, .article-hero::after { position: absolute; content: ""; width: 280px; height: 280px; right: 8%; top: 100px; border: 1px solid rgba(56,189,248,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(56,189,248,.018); }
.listing-hero h1, .article-hero h1 { position: relative; z-index: 2; max-width: 900px; margin: 15px 0 13px; font-size: clamp(46px,6vw,72px); line-height: 1.18; letter-spacing: -.045em; }
.listing-hero p, .article-hero p { position: relative; z-index: 2; max-width: 680px; margin: 0; color: var(--muted); }
.listing { min-height: 500px; padding-top: 80px; }
.archive-list { border-top: 1px solid var(--line); }
.archive-item { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 35px; min-height: 210px; padding: 36px 8px; border-bottom: 1px solid var(--line); }
.archive-item time { align-self: flex-start; padding-top: 8px; color: #527084; font: 500 9px/1 ui-monospace, monospace; }
.archive-item h2 { margin: 6px 0 8px; font-size: 24px; font-weight: 530; }.archive-item h2 a:hover { color: var(--accent); }
.archive-item p { max-width: 690px; margin: 0; color: #6f899b; font-size: 12px; }
.archive-cats { display: flex; gap: 8px; color: var(--accent); font-size: 9px; }
.circle-link { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); transition: color .25s ease, background .25s ease, transform .25s ease; }
.circle-link:hover { color: #04111d; background: var(--accent); transform: translate(3px,-3px); }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 46px; color: #7891a2; font-size: 11px; }.pagination span { color: #456275; font: 500 9px/1 ui-monospace, monospace; }
.empty-state {
  padding: 100px 24px;
  text-align: center;
}
.empty-state > span {
  color: var(--accent);
  font: 600 9px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}
.empty-state h2 {
  margin: 18px 0 8px;
  color: #17364e;
  font-size: 28px;
  font-weight: 540;
}
.empty-state p {
  margin: 0 0 25px;
  color: #718898;
  font-size: 12px;
}
.empty-state a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: #315f79;
  font-size: 11px;
}
.empty-state a i { color: var(--accent); font-style: normal; }
.back-link { display: inline-block; margin-bottom: 38px; color: #69889a; font-size: 11px; }
.article-meta { display: flex; align-items: center; gap: 10px; color: var(--accent); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .1em; }.article-meta i { width: 20px; height: 1px; background: #345c74; }
.article-cover { width: 100%; max-height: 520px; margin: 60px 0; border-radius: var(--radius); object-fit: cover; }
.content { padding: 70px 0 100px; color: #b7c6d0; font-size: 16px; line-height: 2; }
.content > *:first-child { margin-top: 0; }
.content h2, .content h3, .content h4 { color: #f0f7fb; line-height: 1.4; letter-spacing: -.02em; }
.content h2 { margin: 2.2em 0 .8em; font-size: 30px; }.content h3 { margin: 2em 0 .7em; font-size: 23px; }
.content a { color: var(--accent); border-bottom: 1px solid rgba(56,189,248,.35); }
.content img { margin: 35px auto; border-radius: calc(var(--radius) * .65); }
.content blockquote { margin: 32px 0; padding: 22px 28px; border-left: 2px solid var(--accent); background: rgba(56,189,248,.06); color: #94adbd; }
.content code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: #8ee5ff; background: #091725; }
.content pre { overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #050d16; }.content pre code { padding: 0; border: 0; }
.content table { width: 100%; border-collapse: collapse; }.content th, .content td { padding: 12px 15px; border: 1px solid var(--line); }.content th { color: #fff; background: rgba(56,189,248,.07); }
.article-footer { display: flex; justify-content: space-between; gap: 30px; padding: 30px 0 70px; border-top: 1px solid var(--line); color: #819baa; font-size: 11px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }.tag-list a { padding: 5px 9px; border: 1px solid var(--line); border-radius: 3px; }
.taxonomy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.taxonomy-card { position: relative; min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(12,29,45,.7); transition: transform .3s var(--ease), border-color .3s ease; }
.taxonomy-card:hover { transform: translateY(-5px); border-color: rgba(56,189,248,.35); }
.taxonomy-card > span { color: var(--accent); font: 500 10px/1 ui-monospace, monospace; }.taxonomy-card h2 { margin: 35px 0 10px; font-size: 24px; }.taxonomy-card p { color: #6d8798; font-size: 11px; }.taxonomy-card > i { position: absolute; right: 24px; bottom: 20px; color: var(--accent); font-style: normal; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; }.tag-cloud a { display: flex; align-items: center; gap: 16px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 5px; color: #a7bbc7; font-size: 12px; }.tag-cloud a:hover { border-color: var(--accent); color: var(--accent); }.tag-cloud i { color: #4c687b; font: 500 9px/1 ui-monospace, monospace; font-style: normal; }
.error-page { min-height: 720px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 150px 24px 80px; text-align: center; }
.error-code { position: relative; color: transparent; font: 600 clamp(120px,20vw,260px)/.8 ui-monospace, monospace; -webkit-text-stroke: 1px rgba(56,189,248,.26); }.error-code i { position: absolute; width: 9px; height: 9px; right: 18%; top: 6%; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 16px var(--accent-2); }
.error-page h1 { margin: 24px 0 7px; font-size: 36px; }.error-page p { margin: 0 0 30px; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }.reveal-delay-2 { transition-delay: .2s; }.reveal-delay-3 { transition-delay: .3s; }

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 74px; }
  .hero-copy { max-width: 720px; }
  .hero-visual { width: min(720px, 100%); margin: auto; }
  .section-head, .section-head.compact { grid-template-columns: 1fr 1.4fr; }.section-head > p { grid-column: 2; }
  .product-grid { grid-template-columns: 1fr 1fr; }.product-card:last-child { grid-column: 1/3; min-height: 430px; }
  .capability-grid { grid-template-columns: 1fr; }.capability-copy { max-width: 720px; }
  .case-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 410px repeat(2,290px); }.case-large { grid-row: auto; grid-column: 1/3; }.case-wide { grid-column: 1/3; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section { padding: 88px 0; }
  .site-header { height: 70px; }
  .nav-toggle { display: block; z-index: 2; }
  .main-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 27px; padding: 90px 32px; background: rgba(4,11,20,.98); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; }
  .main-nav > a { font-size: 22px; }
  .nav-open { overflow: hidden; }.nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open .nav-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.nav-open .nav-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { padding: 136px 0 76px; }
  .hero-grid { gap: 58px; }
  .hero h1 { font-size: clamp(45px, 13vw, 64px); }
  .hero-lead { font-size: 15px; }
  .hero-proof { flex-wrap: wrap; gap: 13px; }.hero-proof > i { display: none; }
  .visual-frame { min-height: 420px; }.chip-one { right: -5px; }.chip-two { left: -5px; }
  .hero-scroll { display: none; }
  .trust-track { justify-content: flex-start; overflow: auto; }.trust-track span { white-space: nowrap; }.trust-track::-webkit-scrollbar { display: none; }
  .section-head, .section-head.compact, .section-head.inline { display: block; }.section-head > div { margin-bottom: 23px; }.section-head h2 { margin-bottom: 18px; }.section-head.inline a { display: inline-block; margin-top: 20px; }
  .product-grid { grid-template-columns: 1fr; }.product-card:last-child { grid-column: auto; }.product-card { min-height: 480px; }
  .capability-panel { min-height: 500px; }.satellite { min-width: 95px; }.sat-a { left: 3%; }.sat-b { right: 3%; }.sat-c { right: 4%; }.sat-d { left: 3%; }
  .impact-intro { display: block; }.impact-intro h2 { margin-top: 24px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.metric:nth-child(2) { border-right: 0; }.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .case-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }.case-large,.case-wide { grid-column: auto; min-height: 390px; }.case-card { min-height: 280px; }.case-wide { flex-direction: column; align-items: stretch; }.case-wide .case-graphic { order: initial; width: 100%; }
  .post-grid { grid-template-columns: 1fr; gap: 46px; }
  .contact-shell { display: block; padding: 46px 26px; }.contact-action { align-items: flex-start; margin-top: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 46px; }.footer-grid > div:first-child { grid-column: 1/3; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }
  .listing-hero, .article-hero { padding: 140px 0 65px; }.listing-hero::after, .article-hero::after { opacity: .4; }
  .archive-item { grid-template-columns: 1fr 42px; gap: 20px; }.archive-item time { grid-column: 1/3; }.archive-item h2 { font-size: 21px; }
  .taxonomy-grid { grid-template-columns: 1fr; }
  .content { padding-top: 50px; font-size: 15px; }.article-footer { flex-direction: column; }
}

@media (max-width: 460px) {
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .visual-frame { min-height: 360px; }.floating-chip { display: none; }
  .building-b { left: 45%; }.building-a { left: 15%; }
  .metric { min-height: 155px; padding: 31px 18px 20px; }.metric span { font-size: 42px; }.metric p { margin-top: 17px; font-size: 9px; }
  .network-map { transform: scale(.88); transform-origin: center; inset-inline: -7%; }
  .footer-grid { grid-template-columns: 1fr; }.footer-grid > div:first-child { grid-column: auto; }
}

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

/* Light enterprise palette */
:root {
  --bg: #f4f8fb;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf5fa;
  --line: rgba(27, 67, 98, 0.11);
  --line-strong: rgba(27, 67, 98, 0.2);
  --text: #132b40;
  --muted: #60778a;
  --muted-2: #8194a3;
  --accent: #137cbd;
  --accent-2: #12a789;
  --accent-soft: rgba(19, 124, 189, 0.09);
  --shadow: 0 24px 70px rgba(31, 73, 104, 0.1);
}

body {
  color: var(--text);
  background-color: var(--bg);
}
body.has-grid {
  background-image:
    linear-gradient(rgba(39, 103, 146, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 103, 146, 0.04) 1px, transparent 1px);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(32, 75, 106, 0.05);
}
.brand { gap: 10px; }
.brand-logo { width: 188px; height: auto; object-fit: contain; }
.brand-divider { width: 1px; height: 22px; margin-left: 2px; background: #c9d4dc; }
.brand-name { color: #143650; font-size: 15px; font-weight: 650; white-space: nowrap; }
.main-nav > a { color: #536a7c; }
.main-nav > a:hover { color: #132b40; }
.main-nav .official-link {
  padding: 8px 14px;
  color: #1b577c;
  border: 1px solid rgba(19, 124, 189, .2);
  border-radius: 999px;
  background: rgba(19, 124, 189, .04);
}
.main-nav .official-link span { margin-left: 6px; color: var(--accent); }

.hero {
  background:
    radial-gradient(circle at 75% 38%, rgba(42, 164, 220, .12), transparent 32%),
    radial-gradient(circle at 8% 74%, rgba(18, 167, 137, .06), transparent 24%),
    linear-gradient(180deg, #fbfdff, #eef6fb 82%, #f7fafc);
}
.hero::before { background: linear-gradient(90deg, transparent 49.95%, rgba(42, 112, 157, .06) 50%, transparent 50.05%); }
.hero h1 { color: #102d44; }
.hero h1 em {
  background-image: linear-gradient(95deg, #137cbd 5%, #29a7d9 50%, #12a789 95%);
}
.hero-lead { color: #587185; }
.eyebrow { color: #47728c; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #137cbd, #2faad5); box-shadow: 0 12px 34px rgba(19,124,189,.18); }
.btn-ghost { color: #2d536c; background: rgba(255,255,255,.7); }
.hero-proof { color: #7d91a1; }
.hero-proof b { color: #294b63; }
.hero-scroll { color: #7890a1; }
.hero-orbit { border-color: rgba(24, 127, 184, .09); }

.trust-strip { background: rgba(255,255,255,.78); }
.trust-track { color: #6f8596; }

.products { background: linear-gradient(180deg, #f7fafc, #edf5fa 85%); }
.product-card {
  border-color: rgba(27,67,98,.1);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(41,78,104,.055);
}
.product-card.featured {
  border-color: rgba(19,124,189,.2);
  background: linear-gradient(145deg, #fff, #f2f9fd);
}
.product-card:hover { box-shadow: 0 24px 56px rgba(39,87,119,.12); }
.product-card h3 { color: #17364e; }
.product-card > strong { color: #658095; }
.product-card > p { color: #657d8f; }
.product-card li { color: #638094; background: #f8fbfd; }
.product-card > a { color: #315d79; }
.product-icon { background: radial-gradient(circle, rgba(19,124,189,.11), transparent 66%); }

.capability-section { background: #f7fafc; }
.capability-copy h2, .impact-intro h2, .section-head h2 { color: #16344b; }
.capability-item b { color: #5b7283; }
.capability-item.active b { color: #13364f; }
.capability-panel {
  border-color: rgba(16, 75, 113, .2);
  background: linear-gradient(145deg, #103550, #071d30);
  box-shadow: 0 28px 74px rgba(21,62,90,.18);
}

.impact { background: #fff; }
.metric-grid { background: #fff; box-shadow: 0 15px 45px rgba(39,78,105,.05); }
.metric { background: #fff; }
.metric span { color: #194c6d; }
.metric p { color: #6c8292; }
.data-note { color: #8a9ba8; }

.cases { background: linear-gradient(180deg, #f3f8fb, #fff); }
.case-card {
  border-color: rgba(27,67,98,.1);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 32px rgba(39,78,105,.045);
}
.case-card:hover { box-shadow: 0 22px 48px rgba(39,78,105,.1); }
.case-card h3 { color: #17364e; }
.case-card p { color: #6b8292; }
.case-index { color: #a1b0bc; }

.insights { background: #fff; }
.post-cover { background: #edf5fa; }
.post-card h3 { color: #18384f; }
.post-card p { color: #6b8191; }
.post-link { color: #486a80; }

.site-footer {
  padding-top: 72px;
  color: #536e80;
  background: #eef4f7;
  border-top: 1px solid var(--line);
}
.footer-intro, .footer-links { color: #6b8292; }
.footer-links strong { color: #2f5269; }
.footer-bottom { color: #6f8594; }
.beian-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.beian-links a { transition: color .25s ease; }
.beian-links a:hover { color: var(--accent); }
.police-beian::before {
  display: inline-block;
  content: "";
  width: 9px;
  height: 11px;
  margin-right: 5px;
  border: 1px solid #638096;
  border-radius: 5px 5px 7px 7px;
  vertical-align: -2px;
}

.inner-page { background-color: #f7fafc; }
.listing-hero, .article-hero {
  background:
    radial-gradient(circle at 76% 28%, rgba(19,124,189,.09), transparent 30%),
    linear-gradient(180deg, #fff, #f1f7fa);
}
.listing-hero h1, .article-hero h1 { color: #15354d; }
.archive-item h2, .taxonomy-card h2 { color: #17364e; }
.archive-item p { color: #6a8293; }
.taxonomy-card { background: #fff; box-shadow: 0 12px 34px rgba(39,78,105,.045); }
.content { color: #405e72; }
.content h2, .content h3, .content h4 { color: #17364e; }
.content blockquote { background: rgba(19,124,189,.055); color: #526e80; }
.content code { color: #126b9e; background: #edf6fb; }
.content pre { background: #10283b; color: #d8e7f0; }
.content pre code { color: inherit; background: transparent; }
.article-footer { color: #60798b; }

@media (max-width: 900px) {
  .brand-logo { width: 158px; }
  .main-nav { gap: 23px; }
}

@media (max-width: 760px) {
  .brand-logo { width: 146px; }
  .brand-name { font-size: 13px; }
  .nav-toggle span { background: #183a52; }
  .main-nav { background: rgba(249, 252, 254, .98); }
  .main-nav > a { color: #1d4058; }
}

/* Refined motion language: quiet, spatial and interaction-led */
.scan-line,
.data-pulse {
  display: none;
}

.ring-a,
.ring-b,
.net-core::before,
.floating-chip {
  animation: none;
}

.visual-frame {
  --pointer-x: 68%;
  --pointer-y: 32%;
  --shift-x: 0px;
  --shift-y: 0px;
  transition: border-color .5s ease, box-shadow .7s var(--ease);
}
.visual-frame::after {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 220px at var(--pointer-x) var(--pointer-y),
    rgba(92, 210, 242, .12),
    transparent 72%
  );
  opacity: .8;
  transition: opacity .5s ease;
}
.visual-frame:hover {
  border-color: rgba(85, 190, 224, .42);
  box-shadow: 0 32px 90px rgba(20, 67, 97, .2);
}
.blueprint {
  transform: translate3d(var(--shift-x), var(--shift-y), 0);
  transition: transform .45s var(--ease);
}

.product-card,
.case-card {
  --pointer-x: 78%;
  --pointer-y: 18%;
}
.product-card::before,
.case-card::before {
  position: absolute;
  z-index: 0;
  content: "";
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 250px at var(--pointer-x) var(--pointer-y),
    rgba(19, 124, 189, .075),
    transparent 70%
  );
  opacity: 0;
  filter: none;
  transform: none;
  transition: opacity .55s ease;
}
.product-card:hover::before,
.case-card:hover::before {
  opacity: 1;
  transform: none;
}
.product-card > *,
.case-card > * {
  position: relative;
  z-index: 1;
}
.product-card:hover,
.case-card:hover,
.taxonomy-card:hover {
  transform: translateY(-3px);
}

.network-map.is-switching {
  animation: networkFocus .48s var(--ease);
}
@keyframes networkFocus {
  0% { opacity: .72; transform: scale(.992); }
  100% { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(18px) scale(.995);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

.metric::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .blueprint { transform: none; }
  .visual-frame::after,
  .product-card::before,
  .case-card::before { display: none; }
}

/* Translucent 3D robot scenes */
.robot-workbench {
  color: #234d68;
  background:
    radial-gradient(circle at 68% 34%, rgba(72, 192, 225, .16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(224,242,249,.9));
  box-shadow: 0 28px 80px rgba(55, 112, 145, .13);
}
.robot-workbench::before {
  position: absolute;
  content: "";
  inset: 14px;
  background:
    linear-gradient(rgba(45, 124, 167, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 124, 167, .055) 1px, transparent 1px);
  background-size: 32px 32px;
}
.robot-workbench .visual-toolbar,
.robot-workbench .visual-footer {
  color: #68899d;
  border-color: rgba(35, 92, 126, .12);
}
.robot-workbench .visual-toolbar b { color: #148b7a; }
.robot-workbench .toolbar-dots i { background: #9db9c8; }
.robot-workbench .visual-footer span:first-child { color: #39728f; }

.sketch-scene {
  position: relative;
  z-index: 2;
  height: calc(100% - 72px);
  min-height: 390px;
  overflow: hidden;
  perspective: 900px;
  transform: translate3d(var(--shift-x), var(--shift-y), 0);
  transition: transform .5s var(--ease);
}
.scene-glow,
.studio-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(74, 195, 222, .2);
  filter: blur(70px);
  opacity: .55;
}
.scene-glow { right: 8%; top: 16%; }

.draft-robot,
.studio-robot {
  position: absolute;
  z-index: 7;
  width: 170px;
  height: 270px;
  transform-style: preserve-3d;
}
.draft-robot { left: 7%; bottom: 5%; }
.robot-head {
  position: absolute;
  z-index: 4;
  width: 76px;
  height: 64px;
  left: 47px;
  top: 8px;
  border: 1px solid rgba(32, 116, 156, .28);
  border-radius: 28px 28px 22px 22px;
  background:
    linear-gradient(140deg, rgba(255,255,255,.88), rgba(169,219,235,.4));
  box-shadow:
    inset 8px 8px 16px rgba(255,255,255,.7),
    inset -8px -10px 20px rgba(45,133,171,.09),
    0 16px 30px rgba(48,103,134,.12);
  backdrop-filter: blur(8px);
  transform: perspective(280px) rotateY(-9deg);
  animation: robotObserve 7s var(--ease) infinite;
}
.robot-head::before,
.robot-head::after {
  position: absolute;
  content: "";
  width: 9px;
  height: 27px;
  top: 19px;
  border: 1px solid rgba(32, 116, 156, .25);
  background: rgba(184, 226, 239, .55);
}
.robot-head::before { left: -8px; border-radius: 7px 2px 2px 7px; }
.robot-head::after { right: -8px; border-radius: 2px 7px 7px 2px; }
.robot-face {
  position: absolute;
  inset: 14px 10px 11px;
  border: 1px solid rgba(32, 112, 151, .18);
  border-radius: 17px;
  background: linear-gradient(160deg, rgba(99,183,212,.18), rgba(255,255,255,.42));
  box-shadow: inset 0 0 18px rgba(54,166,200,.1);
}
.robot-face i {
  position: absolute;
  width: 8px;
  height: 5px;
  top: 14px;
  border-radius: 50%;
  background: #1c92b8;
  box-shadow: 0 0 10px rgba(28,146,184,.7);
  animation: robotBlink 5.4s ease-in-out infinite;
}
.robot-face i:first-child { left: 12px; }
.robot-face i:nth-child(2) { right: 12px; }
.robot-face span {
  position: absolute;
  width: 15px;
  height: 4px;
  left: 50%;
  bottom: 7px;
  border-bottom: 1px solid rgba(34,111,145,.5);
  border-radius: 50%;
  transform: translateX(-50%);
}
.robot-neck {
  position: absolute;
  z-index: 3;
  width: 29px;
  height: 22px;
  left: 70px;
  top: 65px;
  border: 1px solid rgba(32,116,156,.24);
  background: rgba(186,225,237,.5);
  transform: perspective(120px) rotateX(-12deg);
}
.robot-torso {
  position: absolute;
  z-index: 2;
  width: 108px;
  height: 117px;
  left: 31px;
  top: 83px;
  border: 1px solid rgba(32,116,156,.26);
  border-radius: 32px 32px 22px 22px;
  clip-path: polygon(12% 0,88% 0,100% 20%,91% 100%,9% 100%,0 20%);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(134,201,222,.28));
  box-shadow: inset 10px 9px 25px rgba(255,255,255,.65), 0 20px 36px rgba(51,108,137,.1);
  backdrop-filter: blur(9px);
}
.robot-torso::after {
  position: absolute;
  content: "";
  inset: 14px 20px 24px;
  border: 1px solid rgba(30,126,165,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.24);
}
.robot-torso > i {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 2px;
  bottom: 14px;
  background: rgba(30,126,165,.24);
}
.robot-torso > i:nth-of-type(1) { left: 20px; }
.robot-torso > i:nth-of-type(2) { right: 20px; }
.robot-core {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 35px;
  border: 1px solid rgba(17,145,178,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,216,230,.8), rgba(45,147,184,.18) 50%, transparent 55%);
  box-shadow: 0 0 20px rgba(62,190,218,.34);
  transform: translateX(-50%);
}
.robot-arm {
  position: absolute;
  z-index: 5;
  transform-origin: 12px 12px;
}
.robot-arm i,
.robot-arm b,
.robot-arm span {
  position: absolute;
  display: block;
  height: 20px;
  border: 1px solid rgba(31,112,151,.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(139,205,225,.35));
  box-shadow: inset 3px 4px 8px rgba(255,255,255,.7);
}
.robot-arm i { width: 60px; left: 0; top: 0; transform-origin: 9px 10px; }
.robot-arm b { width: 58px; left: 49px; top: 22px; transform: rotate(42deg); transform-origin: 9px 10px; }
.robot-arm span {
  width: 25px;
  height: 25px;
  left: 94px;
  top: 54px;
  border-radius: 50%;
}
.robot-arm-draw {
  width: 138px;
  height: 100px;
  left: 121px;
  top: 104px;
  transform: rotate(13deg);
  animation: draftGesture 6.4s var(--ease) infinite;
}
.robot-arm-draw::before {
  position: absolute;
  z-index: 4;
  content: "";
  width: 18px;
  height: 18px;
  left: -9px;
  top: 1px;
  border: 1px solid rgba(31,112,151,.3);
  border-radius: 50%;
  background: rgba(210,238,246,.8);
}
.robot-arm-draw em {
  position: absolute;
  z-index: 5;
  width: 59px;
  height: 2px;
  left: 108px;
  top: 74px;
  background: linear-gradient(90deg, #2a91b9, #47d6df);
  box-shadow: 0 0 8px rgba(64,199,218,.5);
  transform: rotate(37deg);
  transform-origin: left center;
}
.robot-arm-rest { left: 3px; top: 108px; transform: rotate(145deg) scale(.86); opacity: .86; }
.robot-arm-rest b { transform: rotate(25deg); }

.holo-drafting-table {
  position: absolute;
  z-index: 3;
  width: 62%;
  height: 46%;
  right: 2%;
  bottom: 6%;
  border: 1px solid rgba(28,139,178,.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(220,245,250,.54), rgba(255,255,255,.18));
  box-shadow: inset 0 0 30px rgba(61,185,214,.08), 0 22px 45px rgba(40,99,129,.08);
  transform: rotateX(57deg) rotateZ(-7deg);
  transform-style: preserve-3d;
  backdrop-filter: blur(6px);
}
.holo-drafting-table::before {
  position: absolute;
  content: "";
  inset: 5px;
  border: 1px solid rgba(37,142,180,.15);
  border-radius: 8px;
}
.draft-grid,
.desk-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(37,134,174,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,134,174,.11) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 35%, #000 80%, transparent);
}
.sketch-building {
  position: absolute;
  left: 39%;
  bottom: 40%;
  width: 165px;
  height: 190px;
  transform: rotateZ(7deg) rotateX(-57deg) translateZ(55px);
  transform-style: preserve-3d;
}
.sketch-tower { position: absolute; transform-style: preserve-3d; }
.sketch-tower i,
.sketch-tower b,
.sketch-tower span {
  position: absolute;
  display: block;
  border: 1px solid rgba(23,143,183,.48);
  background: rgba(93,201,223,.08);
  box-shadow: inset 0 0 16px rgba(82,198,220,.06);
}
.sketch-tower i { inset: 0; }
.sketch-tower b {
  width: 21px;
  height: 100%;
  right: -21px;
  top: -7px;
  transform: skewY(-34deg);
  transform-origin: left bottom;
  background: rgba(59,174,205,.1);
}
.sketch-tower span {
  width: 100%;
  height: 14px;
  left: 10px;
  top: -14px;
  transform: skewX(-56deg);
  transform-origin: left bottom;
  background: rgba(182,235,242,.22);
}
.tower-main { width: 60px; height: 150px; left: 45px; bottom: 0; }
.tower-side { width: 41px; height: 107px; left: 111px; bottom: 0; }
.tower-low { width: 45px; height: 67px; left: -7px; bottom: 0; }
.floor-trace {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(33,161,195,.8), transparent);
  box-shadow: 0 0 8px rgba(55,189,210,.25);
  transform-origin: left;
  animation: traceLine 5.4s var(--ease) infinite;
}
.trace-a { width: 87px; left: 23px; top: 53px; }
.trace-b { width: 115px; left: 10px; top: 99px; animation-delay: -.8s; }
.trace-c { width: 140px; left: 0; top: 145px; animation-delay: -1.6s; }
.sketch-cursor {
  position: absolute;
  right: 7%;
  top: 13%;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3180a1;
  font: 600 7px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  transform: rotateX(-57deg) rotateZ(7deg);
}
.sketch-cursor i {
  width: 7px;
  height: 7px;
  border: 1px solid #31a8be;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(49,168,190,.08);
  animation: quietPulse 2.6s ease-in-out infinite;
}
.holo-note {
  position: absolute;
  z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 7px;
  padding: 8px 10px;
  border: 1px solid rgba(32,124,161,.18);
  border-radius: 7px;
  color: #396f8a;
  background: rgba(255,255,255,.52);
  box-shadow: 0 12px 30px rgba(45,104,134,.08);
  backdrop-filter: blur(10px);
}
.holo-note span { grid-row: 1/3; color: #178bb1; font: 600 15px/1 ui-monospace, monospace; }
.holo-note i { width: 32px; height: 1px; background: linear-gradient(90deg, #42b8ce, transparent); }
.holo-note b { font-size: 8px; font-weight: 500; letter-spacing: .06em; }
.note-a { right: 4%; top: 14%; }
.note-b { right: 15%; bottom: 4%; }

.studio-panel {
  --pointer-x: 72%;
  --pointer-y: 34%;
  border-color: rgba(33,104,139,.14);
  background:
    radial-gradient(circle at 76% 38%, rgba(54,188,214,.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(225,243,249,.93));
  box-shadow: 0 28px 76px rgba(46,101,132,.12);
}
.studio-panel::after {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 240px at var(--pointer-x) var(--pointer-y),
    rgba(75, 199, 221, .1),
    transparent 72%
  );
}
.studio-panel .panel-head,
.studio-panel .panel-metrics {
  color: #67879a;
  border-color: rgba(34,95,129,.12);
}
.studio-panel .panel-head i { color: #118b79; }
.studio-panel .panel-metrics small { color: #7790a0; }
.studio-panel .panel-metrics b { color: #2d6886; }
.studio-panel .panel-metrics span:first-child b { color: #168aa8; }
.design-studio-scene {
  z-index: 2;
  color: #234d68;
  background:
    linear-gradient(rgba(43,124,165,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,124,165,.05) 1px, transparent 1px);
  background-size: 38px 38px;
}
.design-studio-scene::before,
.design-studio-scene::after { display: none; }
.studio-glow { right: 8%; top: 8%; }
.studio-robot {
  left: 0;
  bottom: 3%;
  transform: scale(.82);
  transform-origin: left bottom;
}
.studio-robot .robot-head { animation-delay: -2.8s; }
.studio-robot .select-arm {
  left: 119px;
  top: 105px;
  transform: rotate(23deg);
  animation: selectGesture 5.8s var(--ease) infinite;
}
.studio-robot .select-arm::before,
.studio-robot .support-arm::before {
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  left: -9px;
  top: 1px;
  border: 1px solid rgba(31,112,151,.3);
  border-radius: 50%;
  background: rgba(210,238,246,.8);
}
.studio-robot .select-arm em {
  position: absolute;
  width: 9px;
  height: 9px;
  left: 105px;
  top: 62px;
  border: 1px solid #259db8;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 7px rgba(49,174,196,.08);
}
.studio-robot .support-arm { left: 4px; top: 111px; transform: rotate(142deg) scale(.83); opacity: .82; }
.design-desk {
  position: absolute;
  width: 69%;
  height: 67%;
  right: 1%;
  bottom: 6%;
  perspective: 800px;
}
.design-desk::before {
  position: absolute;
  content: "";
  width: 94%;
  height: 62%;
  right: 0;
  bottom: -2%;
  border: 1px solid rgba(31,133,170,.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(190,232,242,.34), rgba(255,255,255,.35));
  box-shadow: inset 0 0 32px rgba(48,166,194,.06), 0 18px 38px rgba(43,98,127,.08);
  transform: rotateX(59deg) rotateZ(-3deg);
  transform-origin: center bottom;
  backdrop-filter: blur(8px);
}
.design-desk .desk-grid {
  width: 94%;
  height: 62%;
  right: 0;
  bottom: -2%;
  left: auto;
  top: auto;
  border-radius: 16px;
  transform: rotateX(59deg) rotateZ(-3deg);
  transform-origin: center bottom;
}
.proposal-card {
  position: absolute;
  z-index: 3;
  width: 30%;
  min-width: 96px;
  height: 58%;
  padding: 12px;
  border: 1px solid rgba(31,128,165,.2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(168,220,234,.26));
  box-shadow: 0 18px 38px rgba(42,98,126,.1), inset 0 0 20px rgba(255,255,255,.52);
  backdrop-filter: blur(10px);
  transform: perspective(480px) rotateY(-9deg) translateY(5px);
  transition: transform .65s var(--ease), border-color .5s ease, opacity .5s ease, box-shadow .5s ease;
}
.proposal-a { left: 2%; top: 15%; }
.proposal-b { left: 35%; top: 7%; }
.proposal-c { right: 1%; top: 14%; }
.proposal-card small { color: #6c8da0; font: 600 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.proposal-card strong { position: absolute; left: 12px; bottom: 10px; color: #315f79; font-size: 9px; font-weight: 600; }
.proposal-model { position: absolute; left: 16%; right: 16%; top: 28%; height: 40%; }
.proposal-model i,
.proposal-model b,
.proposal-model span {
  position: absolute;
  display: block;
  border: 1px solid rgba(22,141,178,.42);
  background: rgba(69,190,213,.08);
}
.model-a i { width: 31%; height: 72%; left: 3%; bottom: 0; }.model-a b { width: 36%; height: 95%; left: 35%; bottom: 0; }.model-a span { width: 26%; height: 55%; right: 0; bottom: 0; }
.model-b i { width: 44%; height: 87%; left: 5%; bottom: 0; border-radius: 24px 4px 4px; }.model-b b { width: 43%; height: 66%; right: 5%; bottom: 0; border-radius: 4px 25px 4px 4px; }.model-b span { width: 48%; height: 9px; left: 25%; top: 34%; background: rgba(33,164,188,.14); }
.model-c i { width: 36%; height: 83%; left: 0; bottom: 0; }.model-c b { width: 36%; height: 83%; right: 0; bottom: 0; }.model-c span { width: 26%; height: 55%; left: 37%; bottom: 0; border-style: dashed; }
.design-studio-scene[data-network="design"] .proposal-a,
.design-studio-scene[data-network="knowledge"] .proposal-b,
.design-studio-scene[data-network="security"] .proposal-c {
  border-color: rgba(23,151,184,.52);
  box-shadow: 0 24px 50px rgba(36,128,157,.16), inset 0 0 25px rgba(105,218,230,.16);
  transform: perspective(480px) rotateY(-3deg) translateY(-9px);
}
.design-studio-scene[data-network="evolve"] .proposal-card {
  border-color: rgba(23,151,184,.38);
  transform: perspective(480px) rotateY(-3deg) translateY(-5px);
}
.selection-ring {
  position: absolute;
  z-index: 5;
  width: 42px;
  height: 20px;
  left: 11%;
  top: 8%;
  border: 1px solid rgba(25,153,181,.5);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(43,177,198,.06);
  transition: left .7s var(--ease), top .7s var(--ease);
  animation: quietPulse 2.8s ease-in-out infinite;
}
.selection-ring i {
  position: absolute;
  width: 1px;
  height: 60px;
  left: 50%;
  top: 20px;
  background: linear-gradient(rgba(28,154,184,.5), transparent);
}
.design-studio-scene[data-network="knowledge"] .selection-ring { left: 44%; top: 0; }
.design-studio-scene[data-network="security"] .selection-ring { left: 77%; top: 8%; }
.design-studio-scene[data-network="evolve"] .selection-ring { left: 45%; top: 34%; }
.decision-label {
  position: absolute;
  z-index: 8;
  right: 5%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(31,124,158,.15);
  border-radius: 999px;
  color: #4d7488;
  background: rgba(255,255,255,.5);
  font-size: 8px;
  backdrop-filter: blur(8px);
}
.decision-label i { width: 5px; height: 5px; border-radius: 50%; background: #1ca58d; box-shadow: 0 0 8px rgba(28,165,141,.45); }

@keyframes robotBlink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.12); }
}
@keyframes robotObserve {
  0%, 22%, 100% { transform: perspective(280px) rotateY(-9deg) rotateZ(0); }
  48%, 68% { transform: perspective(280px) rotateY(-3deg) rotateZ(1.5deg); }
}
@keyframes draftGesture {
  0%, 100% { transform: rotate(13deg) translate3d(0,0,0); }
  28% { transform: rotate(9deg) translate3d(5px,-3px,0); }
  58% { transform: rotate(16deg) translate3d(10px,4px,0); }
  78% { transform: rotate(11deg) translate3d(3px,7px,0); }
}
@keyframes selectGesture {
  0%, 18%, 100% { transform: rotate(23deg) translate3d(0,0,0); }
  45%, 68% { transform: rotate(17deg) translate3d(12px,4px,0); }
}
@keyframes traceLine {
  0%, 12% { transform: scaleX(0); opacity: 0; }
  38%, 78% { transform: scaleX(1); opacity: .8; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes quietPulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* Human-proportioned robots with target-led poses */
.humanoid-robot {
  width: 178px;
  height: 302px;
}

.humanoid-robot .robot-head {
  width: 66px;
  height: 72px;
  left: 52px;
  top: 0;
  border-radius: 31px 31px 25px 25px;
  transform-origin: 78% 82%;
}

.humanoid-robot .robot-face {
  inset: 13px 8px 10px;
  border-radius: 21px 21px 18px 18px;
}

.humanoid-robot .robot-face i {
  width: 10px;
  height: 7px;
  top: 16px;
}

.humanoid-robot .robot-face i:first-child { left: 13px; }
.humanoid-robot .robot-face i:nth-child(2) { right: 9px; }

.humanoid-robot .robot-face i::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 3px;
  right: 1px;
  bottom: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
}

.humanoid-robot .robot-neck {
  width: 24px;
  height: 22px;
  left: 72px;
  top: 66px;
  border-radius: 7px;
}

.humanoid-robot .robot-torso {
  width: 94px;
  height: 120px;
  left: 37px;
  top: 83px;
  border-radius: 38px 38px 24px 24px;
  clip-path: polygon(13% 0,87% 0,100% 17%,90% 100%,10% 100%,0 17%);
}

.humanoid-robot .robot-torso::before {
  position: absolute;
  content: "";
  z-index: 1;
  width: 76px;
  height: 20px;
  left: 8px;
  top: 3px;
  border-top: 1px solid rgba(33,121,158,.2);
  border-radius: 50%;
}

.humanoid-robot .robot-core {
  top: 39px;
}

.robot-hips {
  position: absolute;
  z-index: 3;
  width: 70px;
  height: 31px;
  left: 49px;
  top: 190px;
  border: 1px solid rgba(31,112,151,.25);
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(131,199,220,.33));
  box-shadow: inset 4px 5px 10px rgba(255,255,255,.62);
}

.robot-leg {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 97px;
  top: 211px;
  transform-origin: 20px 7px;
}

.robot-leg i,
.robot-leg b,
.robot-leg span {
  position: absolute;
  display: block;
  border: 1px solid rgba(31,112,151,.26);
  background: linear-gradient(165deg, rgba(255,255,255,.8), rgba(133,201,222,.34));
  box-shadow: inset 3px 4px 8px rgba(255,255,255,.65);
}

.robot-leg i {
  width: 25px;
  height: 45px;
  left: 8px;
  top: 0;
  border-radius: 13px 13px 10px 10px;
}

.robot-leg b {
  width: 22px;
  height: 47px;
  left: 12px;
  top: 38px;
  border-radius: 10px;
  transform-origin: 11px 4px;
}

.robot-leg span {
  width: 38px;
  height: 14px;
  left: 9px;
  top: 80px;
  border-radius: 10px 16px 7px 7px;
}

.robot-leg-back {
  left: 50px;
  opacity: .72;
  transform: rotate(6deg);
}

.robot-leg-front {
  left: 82px;
  transform: rotate(-5deg);
}

.is-drafting {
  transform: perspective(700px) rotateY(-7deg) rotateZ(1deg);
  transform-origin: center bottom;
}

.is-drafting .robot-head {
  animation: draftFocus 6.8s var(--ease) infinite;
}

.is-drafting .robot-torso {
  transform: rotate(-2deg);
  transform-origin: center bottom;
}

.is-drafting .robot-arm-draw {
  left: 118px;
  top: 103px;
}

.is-drafting .robot-leg-front {
  transform: rotate(-9deg) translateX(2px);
}

.is-selecting .robot-head {
  animation: selectFocus 6.2s var(--ease) infinite;
}

.is-selecting .robot-torso {
  transform: rotate(-3deg);
  transform-origin: center bottom;
}

.is-selecting .robot-leg-back {
  transform: rotate(10deg);
}

.is-selecting .robot-leg-front {
  transform: rotate(-11deg) translateX(3px);
}

@keyframes draftFocus {
  0%, 24%, 100% { transform: perspective(300px) rotateY(-24deg) rotateZ(3deg); }
  48%, 70% { transform: perspective(300px) rotateY(-19deg) rotateZ(5deg); }
}

@keyframes selectFocus {
  0%, 22%, 100% { transform: perspective(300px) rotateY(-27deg) rotateZ(5deg); }
  50%, 72% { transform: perspective(300px) rotateY(-22deg) rotateZ(8deg); }
}

@media (max-width: 760px) {
  .sketch-scene { min-height: 350px; }
  .draft-robot { left: -4%; bottom: 1%; transform: scale(.76) rotateY(-7deg) rotateZ(1deg); transform-origin: left bottom; }
  .holo-drafting-table { width: 70%; right: -5%; }
  .sketch-building { transform: rotateZ(7deg) rotateX(-57deg) translateZ(55px) scale(.8); }
  .holo-note { transform: scale(.82); }
  .note-a { right: -2%; }
  .studio-robot { left: -7%; transform: scale(.68) rotateY(-5deg); }
  .design-desk { width: 75%; right: -2%; }
  .proposal-card { padding: 8px; min-width: 74px; }
  .proposal-card strong { left: 8px; font-size: 7px; }
  .decision-label { display: none; }
}

/* Mobile layout safeguards */
.visual-frame {
  overflow: hidden;
}

@media (max-width: 760px) {
  .balanced-title {
    font-size: clamp(28px, 8vw, 31px) !important;
    line-height: 1.28;
    letter-spacing: -.04em;
  }

  .balanced-title span {
    white-space: nowrap;
  }

  .visual-frame {
    width: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 460px) {
  .brand-logo { width: 128px; }
  .brand-divider { height: 18px; }
  .brand-name { font-size: 12px; }
  .nav-toggle { padding: 5px; }

  .robot-workbench .visual-toolbar > span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .robot-workbench .visual-toolbar > b {
    font-size: 7px;
  }
}

@media (max-width: 350px) {
  .brand-divider,
  .brand-name {
    display: none;
  }

  .brand-logo { width: 142px; }
  .balanced-title { font-size: 25px !important; }
  .balanced-title span { white-space: nowrap; }
}

/* Generated cinematic robot scenes */
.generated-robot-scene {
  isolation: isolate;
  background: #eef7fb;
}

.generated-robot-scene > :not(.robot-scene-image):not(.scene-glow):not(.studio-glow) {
  display: none;
}

.robot-scene-image {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(.98) brightness(1.025);
  transform-origin: 58% 48%;
  animation: robotSceneDrift 12s var(--ease) infinite alternate;
}

.generated-robot-scene .scene-glow,
.generated-robot-scene .studio-glow {
  z-index: 2;
  right: 26%;
  top: 22%;
  width: 190px;
  height: 190px;
  opacity: .3;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sceneTargetGlow 4.8s ease-in-out infinite;
}

.generated-robot-scene::after {
  position: absolute;
  z-index: 3;
  display: block;
  content: "";
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--focus-x, 68%) var(--focus-y, 52%), rgba(118,226,245,.22), transparent 18%),
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%);
  background-size: auto, 220% 100%;
  animation: sceneLightSweep 7.5s ease-in-out infinite;
}

.design-studio-scene[data-network="design"] { --focus-x: 63%; --focus-y: 61%; }
.design-studio-scene[data-network="knowledge"] { --focus-x: 44%; --focus-y: 62%; }
.design-studio-scene[data-network="security"] { --focus-x: 82%; --focus-y: 64%; }
.design-studio-scene[data-network="evolve"] { --focus-x: 63%; --focus-y: 61%; }

@keyframes robotSceneDrift {
  0% { transform: scale(1.012) translate3d(0, 0, 0); }
  100% { transform: scale(1.035) translate3d(-.45%, -.3%, 0); }
}

@keyframes sceneTargetGlow {
  0%, 100% { opacity: .2; transform: scale(.9); }
  50% { opacity: .4; transform: scale(1.08); }
}

@keyframes sceneLightSweep {
  0%, 22% { background-position: center, 120% 0; opacity: .55; }
  58%, 100% { background-position: center, -90% 0; opacity: .88; }
}

@media (max-width: 760px) {
  .robot-scene-image {
    object-position: 54% center;
  }

  .design-studio-scene .robot-scene-image {
    object-position: 52% center;
  }
}

/* Palette aligned with the Xinzhu AI platform */
:root {
  --bg: #f7f8ff;
  --bg-deep: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f2ff;
  --line: rgba(128, 128, 255, .14);
  --line-strong: rgba(128, 128, 255, .26);
  --text: #202536;
  --muted: #667085;
  --muted-2: #8a91a5;
  --accent: #8080ff;
  --accent-2: #9780f7;
  --accent-soft: rgba(128, 128, 255, .1);
  --shadow: 0 24px 70px rgba(91, 91, 164, .1);
}

body {
  color: var(--text);
  background-color: var(--bg);
}

body.has-grid {
  background-image:
    linear-gradient(rgba(128,128,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,255,.035) 1px, transparent 1px);
}

.site-header.is-scrolled {
  background: rgba(255,255,255,.91);
  box-shadow: 0 8px 32px rgba(85,85,145,.06);
}

.brand-name { color: #282d41; }
.main-nav > a { color: #646b7e; }
.main-nav > a:hover { color: #363b52; }
.main-nav .official-link {
  color: #6464d8;
  border-color: rgba(128,128,255,.24);
  background: rgba(128,128,255,.055);
}

.hero {
  background:
    radial-gradient(circle at 76% 31%, rgba(128,128,255,.2), transparent 34%),
    radial-gradient(circle at 8% 72%, rgba(151,128,247,.13), transparent 28%),
    linear-gradient(145deg, #fbfcff, #eef3ff 54%, #f6f1ff);
}

.hero::before {
  background: linear-gradient(90deg, transparent 49.95%, rgba(128,128,255,.07) 50%, transparent 50.05%);
}

.hero h1 { color: #22283a; }
.hero h1 em {
  background-image: linear-gradient(95deg, #656eea 4%, #8080ff 50%, #9780f7 96%);
}
.hero-lead { color: #687187; }
.eyebrow { color: #7474df; }
.eyebrow::before { background: linear-gradient(90deg, #8080ff, #9780f7); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #8080ff, #9780f7);
  box-shadow: 0 12px 34px rgba(128,128,255,.25);
}
.btn-primary:hover { box-shadow: 0 18px 44px rgba(128,128,255,.34); }
.btn-ghost {
  color: #555c73;
  border-color: rgba(128,128,255,.18);
  background: rgba(255,255,255,.76);
}
.hero-proof { color: #858ca0; }
.hero-proof b { color: #454c63; }
.hero-orbit { border-color: rgba(128,128,255,.1); }
.hero-scroll { color: #848ba0; }

.trust-strip {
  border-color: rgba(128,128,255,.1);
  background: rgba(255,255,255,.76);
}
.trust-track { color: #7b8295; }
.trust-track i { color: rgba(128,128,255,.36); }

.products {
  background: linear-gradient(180deg, #fafaff, #f0f2ff 86%);
}
.product-card {
  border-color: rgba(128,128,255,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 42px rgba(83,83,148,.06);
}
.product-card.featured {
  border-color: rgba(128,128,255,.24);
  background: linear-gradient(145deg, #fff, #f4f2ff);
}
.product-card:hover {
  border-color: rgba(128,128,255,.32);
  box-shadow: 0 24px 56px rgba(83,83,148,.13);
}
.product-card h3 { color: #292e43; }
.product-card > strong,
.product-card > p { color: #747c91; }
.product-card li {
  color: #70778c;
  border-color: rgba(128,128,255,.13);
  background: #f8f8ff;
}
.product-card > a { color: #555c75; }
.product-icon { background: radial-gradient(circle, rgba(128,128,255,.13), transparent 68%); }

.capability-section { background: #f8f8ff; }
.capability-copy h2,
.impact-intro h2,
.section-head h2 { color: #292e43; }
.capability-item b { color: #697186; }
.capability-item.active b { color: #34394f; }

.impact {
  border-color: rgba(128,128,255,.1);
  background: #fff;
}
.metric-grid {
  border-color: rgba(128,128,255,.12);
  background: #fff;
  box-shadow: 0 15px 45px rgba(83,83,148,.055);
}
.metric {
  border-color: rgba(128,128,255,.12);
  background: #fff;
}
.metric span { color: #484e6a; }
.metric p { color: #7c8498; }

.cases { background: linear-gradient(180deg, #f3f4ff, #fff); }
.case-card {
  border-color: rgba(128,128,255,.11);
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 34px rgba(83,83,148,.055);
}
.case-card:hover { box-shadow: 0 22px 50px rgba(83,83,148,.12); }
.case-card h3 { color: #30354c; }
.case-card p { color: #7a8193; }

.insights { background: #fff; }
.post-cover { background: #f0f2ff; }
.post-card h3 { color: #30354b; }
.post-card p { color: #788094; }
.post-link { color: #6868d9; }

.contact { background: #fff; }
.contact-shell {
  color: #292e43;
  border-color: rgba(128,128,255,.18);
  background:
    radial-gradient(circle at 85% 25%, rgba(151,128,247,.2), transparent 30%),
    linear-gradient(125deg, #f8f9ff, #eef2ff 54%, #f6f0ff);
  box-shadow: 0 24px 64px rgba(83,83,148,.09);
}
.contact-shell::before {
  background:
    linear-gradient(rgba(128,128,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.contact-copy p { color: #747c91; }
.contact-glow {
  border-color: rgba(128,128,255,.14);
  box-shadow: 0 0 0 50px rgba(128,128,255,.035), 0 0 0 100px rgba(151,128,247,.022);
}

.site-footer {
  color: #667085;
  border-color: rgba(128,128,255,.11);
  background: #f0f2fb;
}
.footer-intro,
.footer-links { color: #788094; }
.footer-links strong { color: #454b62; }
.footer-bottom { color: #858c9e; }

/* Images sit directly in the layout instead of inside UI-style frames */
.robot-workbench {
  padding: 0;
  border: 0;
  clip-path: none;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.robot-workbench::before,
.robot-workbench .visual-toolbar,
.robot-workbench .visual-footer,
.robot-workbench .frame-corner {
  display: none;
}
.robot-workbench:hover {
  border-color: transparent;
  box-shadow: none;
}
.robot-workbench .sketch-scene {
  height: 100%;
  min-height: inherit;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(75,76,143,.13);
}

.studio-panel {
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.studio-panel .panel-head,
.studio-panel .panel-metrics {
  display: none;
}
.studio-panel .network-map {
  inset: 0;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(75,76,143,.13);
}

.design-studio-scene .robot-scene-image {
  transform-origin: 50% 50%;
  animation-name: robotSceneDriftMirrored;
}

@keyframes robotSceneDriftMirrored {
  0% { transform: scaleX(-1) scale(1.012) translate3d(0, 0, 0); }
  100% { transform: scaleX(-1) scale(1.035) translate3d(-.45%, -.3%, 0); }
}

@media (max-width: 760px) {
  .robot-workbench .sketch-scene,
  .studio-panel .network-map {
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robot-scene-image,
  .generated-robot-scene::after,
  .generated-robot-scene .scene-glow,
  .generated-robot-scene .studio-glow,
  .robot-head,
  .robot-face i,
  .robot-arm-draw,
  .studio-robot .select-arm,
  .floor-trace,
  .sketch-cursor i,
  .selection-ring {
    animation: none;
  }
}