@font-face {
  font-family: "Geist Pixel Circle";
  src: url("fonts/GeistPixel-Circle.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #030303;
  --black-soft: #080808;
  --panel: #0c0c0d;
  --white: #f7f7f5;
  --silver: #a9a9aa;
  --muted: #727274;
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .28);
  --glass: rgba(8, 8, 9, .58);
  --sans: "Inter", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --display: "BubbledotICG-FinePos", "Geist Pixel Circle", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --page: min(1360px, calc(100vw - 64px));
  --mx: 50%;
  --my: 35%;
}

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

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000 url("assets/hero-poster.webp") center / cover no-repeat;
  pointer-events: none;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(var(--video-scale, 1.001));
  filter: brightness(var(--video-brightness, .94)) contrast(1.1) saturate(.42);
  transition: filter .3s linear;
}

.ambient-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(230,235,240,.09), transparent 26%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 43%, rgba(0,0,0,.16) 68%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,.14), transparent 31%, rgba(0,0,0,.34) 75%, #030303 100%);
}

.ambient::after {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse at 72% 42%, rgba(205,215,225,.1), transparent 30%),
    radial-gradient(ellipse at 46% 78%, rgba(132,142,152,.06), transparent 24%);
  content: "";
  filter: blur(42px);
  mix-blend-mode: screen;
  opacity: .7;
  pointer-events: none;
  animation: ambient-drift 16s var(--ease) infinite alternate;
}

@keyframes ambient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

.ambient-grain {
  position: absolute;
  inset: -30%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: grain 9s steps(8) infinite;
  pointer-events: none;
}

@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(2%,-3%); }
  40% { transform: translate(-3%,2%); }
  60% { transform: translate(3%,3%); }
  80% { transform: translate(-2%,-2%); }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 28px;
  pointer-events: none;
  transition: padding .5s var(--ease);
}

.site-header.scrolled { padding-top: 12px; }

.nav-shell {
  display: flex;
  align-items: center;
  width: min(1240px, 100%);
  min-height: 64px;
  margin: 0 auto;
  padding: 7px 7px 7px 17px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(12,12,14,.88), rgba(4,4,5,.78));
  box-shadow: 0 18px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(24px) saturate(.82);
  -webkit-backdrop-filter: blur(24px) saturate(.82);
  pointer-events: auto;
  transition: min-height .5s var(--ease), background .5s ease, border-color .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
}

.site-header.scrolled .nav-shell {
  min-height: 58px;
  border-color: rgba(255,255,255,.17);
  background: linear-gradient(180deg, rgba(10,10,12,.94), rgba(3,3,4,.88));
  box-shadow: 0 16px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(26px) saturate(.9);
  -webkit-backdrop-filter: blur(26px) saturate(.9);
}

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

.brand-mark {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  color: #fff;
  transition: transform .4s var(--ease);
}

.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }

.brand-mark i { position: absolute; display: block; background: currentColor; border-radius: 2px; }
.jx-j { left: 3px; top: 4px; width: 4px; height: 22px; transform: skewX(-11deg); }
.jx-j::after { position: absolute; left: 0; bottom: -1px; width: 14px; height: 4px; border-radius: 2px; background: currentColor; content: ""; }
.jx-x { right: 6px; top: 4px; width: 4px; height: 27px; transform-origin: center; }
.jx-x-a { transform: rotate(38deg); }
.jx-x-b { transform: rotate(-38deg); }

.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { color: #fff; font-size: 15px; font-weight: 650; letter-spacing: .12em; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.brand-copy small { color: #b8b8bc; font-size: 8px; font-weight: 650; letter-spacing: .34em; }

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 3vw, 48px);
  flex: 1 1 auto;
  margin: 0 clamp(28px, 4vw, 58px);
}

.desktop-nav a {
  position: relative;
  padding: 15px 2px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .035em;
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
  transition: color .25s ease, transform .3s var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a.active { color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.2), 0 2px 10px rgba(0,0,0,.95); }
.desktop-nav a:hover { transform: translateY(-1px); }

.desktop-nav a::after {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff 25%, #fff 75%, transparent);
  content: "";
  opacity: 0;
  transform: translate(-50%, 5px) scaleX(.45);
  transition: opacity .3s ease, transform .3s var(--ease);
}

.desktop-nav a.active::after { opacity: 1; transform: translate(-50%, 0) scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 42px;
  padding: 4px 7px 4px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  transition: background .25s ease, color .25s ease;
}

.lang-toggle:hover { background: rgba(255,255,255,.045); color: #bdbdbf; }
.lang-toggle i { width: 3px; height: 3px; border-radius: 50%; background: #4a4a4d; }
.lang-toggle .lang-current {
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 136px;
  height: 42px;
  padding: 0 7px 0 18px;
  border-radius: 12px;
  background: #fff;
  color: #050505;
  font-size: 13px;
  font-weight: 600;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .25s ease;
}

.nav-cta i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #080808;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  transition: transform .35s var(--ease);
}
.nav-cta:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,255,255,.16); }
.nav-cta:hover i { transform: rotate(45deg); }
.menu-toggle, .mobile-menu { display: none; }

main { position: relative; z-index: 1; }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 140px max(32px, calc((100vw - 1360px) / 2)) 120px;
  overflow: hidden;
}

.hero-content { width: min(900px, 72vw); }

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 3vh, 34px);
  color: #aaa;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
}

.live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.65);
}

.live-dot::after { position: absolute; inset: -5px; border: 1px solid rgba(255,255,255,.2); border-radius: inherit; content: ""; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

.hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(55px, 7.2vw, 116px);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .98;
}

.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: heroLine 1.1s .08s var(--ease) forwards;
}

.hero-line + .hero-line { animation-delay: .18s; }
.accent-line { color: #bdbdbf; }

@keyframes heroLine { to { opacity: 1; transform: none; } }

.hero-display {
  margin: 23px 0 0;
  color: #e9e9e9;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 28px);
  letter-spacing: -.035em;
}

.hero-copy {
  width: min(620px, 90%);
  margin: 22px 0 0;
  color: #adadaf;
  font-size: clamp(14px, 1.22vw, 17px);
  line-height: 1.75;
}

.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
}

.button-light { background: #fff; color: #050505; box-shadow: 0 0 28px rgba(255,255,255,.15); }
.button i { font-style: normal; }
.text-link { display: flex; align-items: center; gap: 18px; color: #d5d5d5; font-size: 13px; }
.text-link i { color: #777; font-style: normal; transition: transform .3s var(--ease), color .3s ease; }
.text-link:hover i { color: #fff; transform: translateX(5px); }

.hero-metrics {
  position: absolute;
  right: max(32px, calc((100vw - 1360px) / 2));
  bottom: 58px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(24px, 4vw, 58px);
}

.hero-metrics div { display: flex; flex-direction: column; gap: 5px; }
.hero-metrics strong { font-family: var(--display); font-size: clamp(23px, 2.5vw, 38px); font-weight: 400; letter-spacing: -.04em; }
.hero-metrics span { color: #79797b; font-size: 10px; letter-spacing: .08em; }

.scroll-cue {
  position: absolute;
  left: max(32px, calc((100vw - 1360px) / 2));
  bottom: 58px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #777;
  font-size: 10px;
  letter-spacing: .14em;
}

.scroll-cue i { position: relative; width: 1px; height: 32px; overflow: hidden; background: rgba(255,255,255,.15); }
.scroll-cue i::after { position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: #fff; content: ""; animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { to { transform: translateY(200%); } }

.story {
  position: relative;
  height: 360vh;
  background: var(--black);
}

.story-sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 105px max(32px, calc((100vw - 1360px) / 2)) 54px;
  overflow: hidden;
}

.story-heading { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.section-index { color: #666669; font-family: var(--display); font-size: 12px; letter-spacing: .08em; }
.story-heading p { max-width: 430px; margin: 0; color: #919193; font-size: 14px; line-height: 1.6; text-align: right; }

.story-stage {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(480px, 1.15fr);
  align-items: center;
  gap: 9vw;
  flex: 1;
}

.story-orbit { position: relative; width: min(38vw, 470px); aspect-ratio: 1; justify-self: center; }
.orbit-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.ring-one { inset: 12%; animation: orbitPulse 5s ease-in-out infinite; }
.ring-two { inset: 27%; border-style: dashed; animation: rotate 18s linear infinite; }
.orbit-ring::after { position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px #fff; content: ""; }
.orbit-core { position: absolute; inset: 39%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.02)); box-shadow: 0 0 60px rgba(255,255,255,.08); }
.orbit-core b { font-family: var(--display); font-size: clamp(24px, 3vw, 42px); font-weight: 400; }
.orbit-node { position: absolute; width: 9px; height: 9px; border: 2px solid #9b9b9d; border-radius: 50%; background: #050505; }
.node-a { left: 8%; top: 48%; }.node-b { right: 16%; top: 20%; }.node-c { right: 7%; bottom: 27%; }.node-d { left: 30%; bottom: 7%; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes orbitPulse { 50% { transform: scale(1.03); border-color: rgba(255,255,255,.25); } }

.story-steps { display: grid; gap: 0; }
.story-step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 23px 0; border-top: 1px solid var(--line); opacity: .28; transition: opacity .45s ease, transform .55s var(--ease); }
.story-step:last-child { border-bottom: 1px solid var(--line); }
.story-step.active { opacity: 1; transform: translateX(12px); }
.story-step > span { padding-top: 6px; color: #666; font-family: var(--display); font-size: 12px; }
.story-step h2 { margin: 0; font-family: var(--display); font-size: clamp(29px, 4vw, 58px); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.story-step p { margin: 8px 0 0; color: #999; font-size: 13px; }
.story-progress { height: 1px; background: var(--line); }
.story-progress i { display: block; width: var(--story-progress, 0%); height: 1px; background: #fff; transition: width .08s linear; }

.products,
.capabilities,
.process,
.scenarios,
.public-work,
.principles,
.contact,
.site-footer { position: relative; z-index: 2; background: var(--black); }

.products { padding-top: 140px; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 70px;
  width: var(--page);
  margin: 0 auto 80px;
}

.section-head h2,
.process-intro h2,
.contact-copy h2 {
  margin: 15px 0 0;
  font-size: clamp(42px, 6.2vw, 92px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
}

.section-head > p { max-width: 430px; margin: 0; color: #8f8f91; font-size: 14px; line-height: 1.75; }

.product-scroll { position: relative; height: calc((var(--product-count, 4) + .3) * 100vh); }
.product-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black-soft); }
.product-track { display: flex; width: calc(var(--product-count, 4) * 100vw); height: 100%; will-change: transform; transform: translate3d(var(--product-x, 0),0,0); }

.product-counter {
  position: absolute;
  right: 42px;
  top: 96px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #656568;
  font-family: var(--display);
  font-size: 11px;
}
.product-counter span:first-child { color: #fff; }
.product-counter i { width: 42px; height: 1px; background: var(--line-strong); }

.product-panel {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: 6vw;
  flex: 0 0 100vw;
  height: 100%;
  padding: 120px max(42px, calc((100vw - 1360px) / 2)) 70px;
}

.product-copy { max-width: 470px; }
.product-no { color: #69696b; font-family: var(--display); font-size: 11px; letter-spacing: .1em; }
.product-copy h3 { display: -webkit-box; max-width: 11ch; margin: 24px 0 18px; overflow: hidden; font-size: clamp(42px, 5.7vw, 84px); font-weight: 400; letter-spacing: -.065em; line-height: 1; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.product-copy > p { display: -webkit-box; margin: 0; overflow: hidden; color: #99999b; font-size: 15px; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-copy ul { display: grid; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.product-copy li { display: -webkit-box; position: relative; min-height: 17px; padding-left: 16px; overflow: hidden; color: #ccc; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-copy li::before { position: absolute; left: 0; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: #fff; content: ""; }

.product-visual {
  position: relative;
  width: min(720px, 52vw);
  aspect-ratio: 1.38;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #09090a;
  box-shadow: 0 40px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
}

.product-visual::before { position: absolute; inset: 0; background: radial-gradient(circle at 70% 18%, rgba(255,255,255,.08), transparent 30%); content: ""; pointer-events: none; }
.product-media-carousel { isolation: isolate; }
.product-media-carousel::before { z-index: 2; }
.product-media-stage { position: absolute; inset: 0; margin: 0; }
.product-media-stage img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.018); transition: opacity .55s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.product-media-stage img.is-active { opacity: 1; transform: scale(1); }
.product-media-stage figcaption { position: absolute; z-index: 3; left: 18px; bottom: 17px; max-width: calc(100% - 150px); overflow: hidden; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.product-media-overlay { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04) 45%, rgba(0,0,0,.7)); pointer-events: none; }
.product-media-controls { position: absolute; z-index: 4; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 7px; }
.product-media-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(3,3,3,.68); color: #fff; cursor: pointer; backdrop-filter: blur(10px); }
.product-media-controls button:hover, .product-media-controls button:focus-visible { border-color: rgba(255,255,255,.72); background: #fff; color: #080808; outline: 0; }
.product-media-count { min-width: 42px; color: rgba(255,255,255,.72); font: 10px/1 var(--display); letter-spacing: .08em; text-align: center; }
.product-empty-visual { background: linear-gradient(145deg, #0b0b0c, #050506); }
.product-empty-visual::after { position: absolute; inset: 16%; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent); content: ""; }
.ui-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); color: #77777a; font-size: 9px; letter-spacing: .12em; }
.ui-top b { color: #c9c9c9; font-size: 8px; font-weight: 500; }
.ui-top b::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; content: ""; }

.ai-grid { display: grid; grid-template-columns: .75fr 1.25fr; height: calc(100% - 91px); }
.agent-column, .flow-column { padding: 22px; }
.agent-column { border-right: 1px solid var(--line); }
.product-visual small { color: #66666a; font-size: 8px; letter-spacing: .12em; }
.agent { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; margin-top: 15px; padding: 13px 12px; border: 1px solid transparent; border-radius: 9px; color: #8e8e90; font-size: 10px; }
.agent.active { border-color: var(--line); background: rgba(255,255,255,.04); color: #fff; }
.agent i { width: 6px; height: 6px; border-radius: 50%; background: #555; }.agent.active i { background: #fff; box-shadow: 0 0 9px #fff; }
.agent em { color: #5b5b5e; font-size: 7px; font-style: normal; }
.flow-map { position: relative; height: calc(100% - 20px); }
.flow-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 64px; height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0d0d0e; color: #bbb; font-size: 7px; letter-spacing: .08em; }
.n1 { left: 3%; top: 44%; }.n2 { left: 36%; top: 19%; }.n3 { left: 36%; bottom: 16%; }.n4 { right: 2%; top: 44%; }
.flow-line { position: absolute; z-index: 1; height: 1px; background: linear-gradient(90deg, #444, #fff, #444); transform-origin: left; animation: flowPulse 2.4s ease-in-out infinite; }
.l1 { left: 18%; top: 48%; width: 25%; transform: rotate(-26deg); }.l2 { left: 18%; top: 50%; width: 25%; transform: rotate(26deg); }.l3 { left: 52%; top: 50%; width: 29%; }
@keyframes flowPulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.ui-foot { display: flex; align-items: center; gap: 24px; height: 39px; padding: 0 20px; border-top: 1px solid var(--line); color: #555558; font-size: 7px; letter-spacing: .09em; }

.business-grid { display: grid; grid-template-columns: 52px 1fr; height: calc(100% - 52px); }
.business-grid aside { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 26px; border-right: 1px solid var(--line); }
.business-grid aside i { width: 15px; height: 3px; border-radius: 3px; background: #3c3c3e; }.business-grid aside i.active { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.4); }
.business-main { padding: 24px; }
.kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kpi-row span { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.kpi-row small, .kpi-row strong { display: block; }.kpi-row strong { margin-top: 10px; font-family: var(--display); font-size: 24px; font-weight: 400; }
.activity-chart { display: flex; align-items: end; gap: 7%; height: 34%; margin-top: 20px; padding: 15px 18px 0; border: 1px solid var(--line); border-radius: 10px; }
.activity-chart i { flex: 1; height: var(--h, 40%); border-radius: 3px 3px 0 0; background: linear-gradient(#d8d8d8,#323234); animation: bars 3s ease-in-out infinite alternate; }
.activity-chart i:nth-child(1){--h:38%}.activity-chart i:nth-child(2){--h:64%}.activity-chart i:nth-child(3){--h:48%}.activity-chart i:nth-child(4){--h:83%}.activity-chart i:nth-child(5){--h:71%}.activity-chart i:nth-child(6){--h:92%}.activity-chart i:nth-child(7){--h:68%}.activity-chart i:nth-child(8){--h:87%}
@keyframes bars { to { filter: brightness(1.3); transform: scaleY(.94); transform-origin: bottom; } }
.activity-list { display: grid; margin-top: 15px; }
.activity-list span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.08); color: #aaa; font-size: 8px; }.activity-list b { width: 5px; height: 5px; border-radius: 50%; background: #777; }.activity-list em { color: #515154; font-style: normal; }

.data-kpi { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 22px 22px 0; }
.data-kpi > div { position: relative; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }.data-kpi small,.data-kpi strong { display: block; }.data-kpi strong { margin-top: 7px; font-family: var(--display); font-size: 25px; font-weight: 400; }.data-kpi em { position: absolute; right: 14px; bottom: 17px; color: #828285; font-size: 7px; font-style: normal; }
.line-chart { position: relative; height: 42%; margin: 16px 22px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.line-chart svg { width: 100%; height: 100%; }.grid-lines { fill: none; stroke: rgba(255,255,255,.08); }.chart-line { fill: none; stroke: #dedede; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 700; animation: chartDraw 4s ease-in-out infinite; }.chart-point { position: absolute; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #080808; box-shadow: 0 0 10px #fff; }.p1 { left: 41%; top: 44%; }.p2 { left: 81%; top: 29%; }
@keyframes chartDraw { 0% { stroke-dashoffset: 700; } 55%,100% { stroke-dashoffset: 0; } }
.data-stream { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 22px 0; color: #656568; font-size: 7px; }.data-stream i { flex: 1; height: 1px; background: linear-gradient(90deg,#333,#aaa,#333); }

.deploy-center { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; height: 54%; padding: 18px 42px; }
.deploy-ring { position: relative; display: grid; align-content: center; justify-items: center; width: 150px; height: 150px; border: 1px solid var(--line-strong); border-radius: 50%; }.deploy-ring::before,.deploy-ring::after { position: absolute; inset: 10px; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; content: ""; animation: rotate 16s linear infinite; }.deploy-ring::after { inset: 26px; animation-direction: reverse; }.deploy-ring i { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }.deploy-ring b { z-index: 1; font-family: var(--display); font-size: 34px; font-weight: 400; }.deploy-ring small { z-index: 1; margin-top: 4px; }
.deploy-meta { display: grid; gap: 12px; }.deploy-meta span { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }.deploy-meta b { font-family: var(--display); font-size: 16px; font-weight: 400; }
.deploy-log { display: grid; margin: 0 24px; }.deploy-log span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #999; font-size: 8px; }.deploy-log i { width: 5px; height: 5px; border-radius: 50%; background: #d7d7d7; }.deploy-log em { color: #555; font-style: normal; }

.capabilities { padding: 170px 0 160px; }
.capability-list { width: var(--page); margin: 0 auto; border-top: 1px solid var(--line); }
.capability-item { display: grid; grid-template-columns: 70px 1.05fr 1fr 44px; align-items: center; gap: 28px; min-height: 132px; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease), background .4s ease; }
.capability-item:hover { padding: 0 22px; background: rgba(255,255,255,.025); }
.capability-item > span { color: #57575a; font-family: var(--display); font-size: 11px; }
.capability-item h3 { margin: 0; font-size: clamp(26px, 3vw, 44px); font-weight: 400; letter-spacing: -.045em; }
.capability-item p { margin: 0; color: #818184; font-size: 13px; line-height: 1.65; }
.capability-item > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: #777; font-style: normal; transition: color .3s ease, border-color .3s ease, transform .3s var(--ease); }
.capability-item:hover > i { color: #fff; border-color: #888; transform: rotate(45deg); }

.process { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; padding: 150px max(32px, calc((100vw - 1360px) / 2)); background: #f1f1ef; color: #080808; }
.process-intro { position: sticky; top: 140px; align-self: start; }
.process-intro .section-index { color: #777; }
.process-intro h2 { font-size: clamp(42px, 5.3vw, 76px); }
.process-line { display: none; }
.process-steps { border-top: 1px solid rgba(0,0,0,.17); }
.process-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 34px 0 40px; border-bottom: 1px solid rgba(0,0,0,.17); }
.process-step > span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; font-family: var(--display); font-size: 10px; }
.process-step small { color: #898989; font-family: var(--display); font-size: 9px; letter-spacing: .1em; }
.process-step h3 { margin: 12px 0 8px; font-size: clamp(25px, 2.7vw, 40px); font-weight: 500; letter-spacing: -.05em; }
.process-step p { margin: 0; color: #666; font-size: 13px; line-height: 1.65; }

.scenarios { padding: 170px 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 26px; width: var(--page); margin: 0 auto; }
.scenario-card { grid-column: span 6; }.scenario-card:last-child { grid-column: 4 / span 6; margin-top: 36px; }
.scenario-window { overflow: hidden; aspect-ratio: 1.38; border: 1px solid var(--line); border-radius: 19px; background: #0a0a0b; box-shadow: 0 30px 70px rgba(0,0,0,.35); transition: transform .6s var(--ease), border-color .5s ease; }
.scenario-card:hover .scenario-window { transform: translateY(-7px); border-color: var(--line-strong); }
.window-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #68686a; font-size: 7px; letter-spacing: .12em; }.window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #464648; }.window-bar span { margin-left: auto; }
.scenario-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; margin-top: 20px; }.scenario-copy > span { grid-row: 1 / 3; color: #5c5c5f; font-family: var(--display); font-size: 9px; }.scenario-copy h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.04em; }.scenario-copy p { margin: 8px 0 0; color: #77777a; font-size: 12px; line-height: 1.6; }
.workbench-body { display: grid; grid-template-columns: 48px 1fr; height: calc(100% - 38px); }.workbench-body aside { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; border-right: 1px solid var(--line); }.workbench-body aside b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #fff; color: #000; }.workbench-body aside i { width: 13px; height: 2px; background: #4a4a4c; }.workbench-main { display: flex; flex-direction: column; justify-content: center; padding: 9%; }.workbench-body small { color: #666; font-size: 7px; letter-spacing: .14em; }.workbench-body p { max-width: 80%; color: #ddd; font-family: var(--display); font-size: clamp(13px,1.4vw,20px); line-height: 1.45; }.prompt-line { display: flex; align-items: center; justify-content: space-between; margin-top: 9%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }.prompt-line span { width: 45%; height: 3px; border-radius: 2px; background: #4a4a4c; }.prompt-line b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #000; }
.command-body { position: relative; height: calc(100% - 38px); padding: 7%; }.mini-kpis { display: flex; gap: 40px; }.mini-kpis b { font-family: var(--display); font-size: clamp(20px,2.3vw,32px); font-weight: 400; }.mini-kpis small { display: block; margin-top: 5px; color: #666; font-family: var(--sans); font-size: 7px; letter-spacing: .1em; }.radar { position: absolute; right: 8%; bottom: 4%; width: 58%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; }.radar::before,.radar::after { position: absolute; inset: 20%; border: 1px solid var(--line); border-radius: 50%; content: ""; }.radar::after { inset: 40%; }.radar i { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--line); }.radar i:nth-child(2) { transform: rotate(90deg); }.radar b { position: absolute; inset: 5%; border-radius: 50%; background: conic-gradient(from 15deg,rgba(255,255,255,.28),transparent 24%); animation: rotate 4s linear infinite; }
.enterprise-body { padding: 7%; }.table-head,.table-row { display: grid; grid-template-columns: 1fr .55fr 40px; align-items: center; gap: 12px; }.table-head { padding: 0 12px 12px; color: #5f5f62; font-size: 7px; }.table-row { padding: 15px 12px; border-top: 1px solid var(--line); color: #bbb; font-size: 9px; }.table-row b { width: fit-content; padding: 4px 7px; border: 1px solid var(--line); border-radius: 99px; color: #888; font-size: 6px; font-weight: 500; }.table-row i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #eee; color: #111; font-size: 7px; font-style: normal; }

.public-work { padding: 150px 0 170px; border-top: 1px solid var(--line); background: #0a0a0b; }
.public-work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; width: var(--page); margin: 0 auto; background: var(--line); border: 1px solid var(--line); }
.public-work-card { position: relative; display: flex; min-height: 310px; flex-direction: column; padding: 30px; overflow: hidden; background: #080809; color: #fff; transition: background .35s ease, transform .45s var(--ease); }
.public-work-card::before { position: absolute; inset: auto -15% -55% 35%; height: 70%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.11),transparent 68%); content: ""; opacity: 0; transition: opacity .4s ease, transform .6s var(--ease); }
.public-work-card:hover { z-index: 1; background: #101011; transform: translateY(-5px); }.public-work-card:hover::before { opacity: 1; transform: translateY(-12px); }
.public-work-meta { position: relative; display: flex; align-items: center; justify-content: space-between; color: #656568; font-size: 9px; letter-spacing: .12em; }
.public-work-meta b { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #a9a9ac; font-size: 8px; font-weight: 500; }
.public-work-card h3 { position: relative; max-width: 92%; margin: auto 0 15px; font-size: clamp(25px,2.4vw,38px); font-weight: 400; letter-spacing: -.05em; line-height: 1.08; }
.public-work-card p { position: relative; display: -webkit-box; margin: 0; overflow: hidden; color: #747477; font-size: 12px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.public-work-arrow { position: relative; align-self: flex-end; margin-top: 26px; color: #727275; font-size: 17px; transition: color .3s ease, transform .3s var(--ease); }.public-work-card:hover .public-work-arrow { color: #fff; transform: translate(3px,-3px); }
.public-work-empty { grid-column: 1 / -1; display: grid; min-height: 230px; place-items: center; background: #080809; color: #66666a; font-size: 12px; }
.public-work-footer { display: flex; justify-content: center; width: var(--page); margin: 44px auto 0; }

.principles { overflow: hidden; padding: 100px 0 150px; border-top: 1px solid var(--line); }
.principle-marquee { width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); padding-bottom: 70px; }
.principle-marquee div { width: max-content; color: transparent; font-family: var(--display); font-size: clamp(64px,10vw,150px); letter-spacing: -.05em; -webkit-text-stroke: 1px rgba(255,255,255,.18); animation: marquee 24s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.principle-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; width: var(--page); margin: 80px auto 0; background: var(--line); border: 1px solid var(--line); }
.principle-grid article { min-height: 220px; padding: 28px; background: var(--black); }.principle-grid article > span { color: #555558; font-family: var(--display); font-size: 10px; }.principle-grid h3 { margin: 70px 0 12px; font-size: 19px; font-weight: 500; }.principle-grid p { margin: 0; color: #77777a; font-size: 12px; line-height: 1.65; }

.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; padding: 160px max(32px, calc((100vw - 1360px) / 2)); border-top: 1px solid var(--line); }
.contact-copy { align-self: start; }.contact-copy h2 { font-size: clamp(48px,6.3vw,90px); }.contact-copy > p { max-width: 430px; margin: 28px 0 0; color: #858588; font-size: 13px; line-height: 1.7; }.contact-note { display: flex; align-items: center; gap: 10px; margin-top: 36px; color: #606063; font-size: 8px; letter-spacing: .12em; }.contact-note i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.project-form { min-height: 610px; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.025); }
.form-progress { display: flex; align-items: center; gap: 18px; margin-bottom: 52px; color: #626265; font-family: var(--display); font-size: 10px; }.form-progress > span b { color: #fff; font-weight: 400; }.form-progress > i { position: relative; flex: 1; height: 1px; background: var(--line); }.form-progress > i b { position: absolute; left: 0; top: 0; width: 33.33%; height: 1px; background: #fff; transition: width .45s var(--ease); }
.form-step { display: none; margin: 0; padding: 0; border: 0; animation: formIn .45s var(--ease); }.form-step.active { display: block; }
@keyframes formIn { from { opacity: 0; transform: translateY(12px); } }
.form-step legend { padding: 0; font-size: clamp(28px,3vw,42px); font-weight: 400; letter-spacing: -.045em; }.form-step > p { margin: 10px 0 28px; color: #77777a; font-size: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.choice-grid label { position: relative; }.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }.choice-grid label span { display: flex; align-items: center; justify-content: space-between; min-height: 51px; padding: 0 16px; border: 1px solid var(--line); border-radius: 11px; color: #8d8d90; font-size: 12px; transition: border-color .25s ease, background .25s ease, color .25s ease; }.choice-grid label span::after { width: 8px; height: 8px; border: 1px solid #59595c; border-radius: 50%; content: ""; }.choice-grid input:checked + span { border-color: #fff; background: #fff; color: #050505; }.choice-grid input:checked + span::after { border-color: #050505; background: #050505; box-shadow: inset 0 0 0 2px #fff; }
.text-field,.select-field { display: grid; gap: 9px; margin-top: 22px; color: #77777a; font-size: 9px; letter-spacing: .08em; }.text-field textarea,.text-field input,.select-field select { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: #fff; font-size: 13px; letter-spacing: 0; resize: none; }.text-field textarea { padding: 10px 0 13px; line-height: 1.6; }.text-field input,.select-field select { height: 48px; }.text-field textarea:focus,.text-field input:focus,.select-field select:focus { border-color: #fff; }.text-field input::placeholder,.text-field textarea::placeholder { color: #4e4e51; }.select-field select option { background: #111; }
.split-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.form-error { min-height: 19px; margin-top: 14px; color: #ddd; font-size: 10px; }
.form-field-note { margin: 10px 0 0; color: #5f5f62; font-size: 10px; line-height: 1.65; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-next:disabled { cursor: wait; opacity: .58; transform: none !important; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }.form-actions button { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 11px; font-weight: 600; }.form-back { border: 1px solid var(--line); background: transparent; color: #888; }.form-next { display: flex; align-items: center; gap: 26px; border: 0; background: #fff; color: #050505; }.form-next i { font-style: normal; }
.form-success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; text-align: center; animation: formIn .6s var(--ease); }.form-success[hidden] { display: none; }.success-mark { position: relative; display: grid; place-items: center; width: 82px; height: 82px; margin-bottom: 24px; border: 1px solid var(--line-strong); border-radius: 50%; }.success-mark::before { position: absolute; inset: 9px; border: 1px dashed var(--line-strong); border-radius: 50%; content: ""; animation: rotate 9s linear infinite; }.success-mark i { width: 17px; height: 9px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(2px,-2px); }.form-success > span { color: #666; font-family: var(--display); font-size: 9px; letter-spacing: .12em; }.form-success h3 { margin: 15px 0 10px; font-size: 30px; font-weight: 400; }.form-success p { margin: 0; color: #777; font-size: 12px; }.form-success button { margin-top: 26px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: #aaa; font-size: 11px; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; padding: 55px max(32px, calc((100vw - 1360px) / 2)) 34px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 15px; }.footer-mark { width: 35px; height: 35px; }.footer-brand div { display: flex; flex-direction: column; gap: 4px; }.footer-brand strong { font-size: 13px; font-weight: 600; letter-spacing: .08em; }.footer-brand small { color: #535356; font-size: 7px; letter-spacing: .19em; }
.footer-links { display: flex; gap: 28px; color: #888; font-size: 10px; }.footer-links a:hover { color: #fff; }
.footer-meta { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 30px; border-top: 1px solid var(--line); color: #5d5d60; font-size: 9px; letter-spacing: .08em; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; line-height: 1.7; }
.footer-meta a { transition: color .25s ease; }
.footer-meta a:hover { color: #fff; }

.reveal { opacity: 0; filter: blur(7px); transform: translateY(28px); transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delay,0s); }
.reveal.is-visible { opacity: 1; filter: none; transform: none; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1050px) {
  :root { --page: calc(100vw - 48px); }
  .site-header { padding-inline: 24px; }
  .desktop-nav { gap: 20px; margin-inline: 20px; }
  .hero-content { width: 80vw; }
  .story-stage { gap: 5vw; }
  .product-panel { grid-template-columns: .8fr 1.2fr; gap: 4vw; }
  .product-visual { width: 55vw; }
  .process,.contact { gap: 6vw; }
}

@media (max-width: 820px) {
  :root { --page: calc(100vw - 36px); }
  .site-header { padding: 14px 18px; }
  .nav-shell { min-height: 54px; padding: 6px 7px 6px 11px; border-color: var(--line); background: rgba(7,7,8,.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .brand-copy strong { font-size: 13px; }.brand-copy small { font-size: 7px; }
  .desktop-nav,.header-actions { display: none; }
  .menu-toggle { position: relative; display: block; width: 42px; height: 42px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); }
  .menu-toggle span { position: absolute; left: 12px; top: 17px; width: 17px; height: 1px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }.menu-toggle span:last-child { top: 23px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }
  .mobile-menu { position: fixed; inset: 0; z-index: -1; display: block; pointer-events: auto; }.mobile-menu[hidden] { display: none; }
  .menu-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadeIn .25s ease; }
  .menu-panel { position: absolute; left: 18px; right: 18px; top: 80px; padding: 25px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(12,12,13,.95); box-shadow: 0 30px 70px rgba(0,0,0,.55); animation: menuIn .4s var(--ease); }
  @keyframes fadeIn { from { opacity: 0; } } @keyframes menuIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
  .menu-label { margin: 0 0 16px; color: #545457; font-family: var(--display); font-size: 9px; letter-spacing: .12em; }.menu-panel nav { display: grid; }.menu-panel nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 18px; }.menu-panel nav a > i { color: #555; font-size: 12px; font-style: normal; }.menu-bottom { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 18px; }.menu-bottom button,.menu-bottom a { display: grid; place-items: center; min-height: 45px; border-radius: 10px; font-size: 11px; }.mobile-lang { border: 1px solid var(--line); background: transparent; color: #888; }.mobile-cta { background: #fff; color: #050505; font-weight: 600; }

  .hero { align-items: flex-start; padding: 120px 18px 160px; }.hero-content { width: 100%; margin-top: auto; margin-bottom: auto; }.hero-title { font-size: clamp(48px,13vw,86px); }.hero-copy { width: 100%; max-width: 560px; }.hero-kicker { max-width: 90%; line-height: 1.5; }.hero-metrics { left: 18px; right: 18px; bottom: 28px; grid-template-columns: repeat(4,1fr); gap: 12px; }.hero-metrics span { font-size: 8px; }.scroll-cue { display: none; }
  .story { height: auto; }.story-sticky { position: relative; height: auto; padding: 110px 18px 90px; }.story-heading { align-items: flex-start; flex-direction: column; }.story-heading p { max-width: 520px; text-align: left; }.story-stage { grid-template-columns: 1fr; gap: 60px; margin-top: 60px; }.story-orbit { width: min(80vw,410px); }.story-step { opacity: 1; transform: none; }.story-progress { display: none; }
  .products { padding-top: 110px; }.section-head { align-items: flex-start; flex-direction: column; gap: 25px; margin-bottom: 55px; }.section-head > p { max-width: 600px; }.product-scroll { height: auto; }.product-sticky { position: relative; height: auto; overflow: visible; }.product-counter { display: none; }.product-track { display: grid; width: auto; transform: none !important; }.product-panel { grid-template-columns: 1fr; gap: 42px; width: 100%; height: auto; padding: 90px 18px; border-top: 1px solid var(--line); }.product-panel:first-child { border-top: 0; }.product-copy { max-width: 620px; }.product-visual { width: 100%; max-width: 700px; justify-self: center; }
  .capabilities { padding: 120px 0; }.capability-item { grid-template-columns: 42px 1fr 35px; gap: 15px; padding: 25px 0; }.capability-item p { grid-column: 2 / 3; }.capability-item > i { grid-column: 3; grid-row: 1; }
  .process { grid-template-columns: 1fr; gap: 65px; padding: 110px 18px; }.process-intro { position: relative; top: auto; }.process-intro h2 br { display: none; }
  .scenarios { padding: 120px 0; }.scenario-grid { grid-template-columns: 1fr; gap: 65px; }.scenario-card,.scenario-card:last-child { grid-column: auto; margin-top: 0; }
  .public-work { padding: 110px 0 120px; }.public-work-grid { grid-template-columns: 1fr 1fr; }.public-work-card { min-height: 270px; }
  .principles { padding: 90px 0 110px; }.principle-grid { grid-template-columns: repeat(2,1fr); }.principle-grid article { min-height: 190px; }.principle-grid h3 { margin-top: 52px; }
  .contact { grid-template-columns: 1fr; gap: 60px; padding: 110px 18px; }.contact-copy h2 br { display: none; }.contact-copy > p { max-width: 560px; }
  .site-footer { grid-template-columns: 1fr; padding-inline: 18px; }.footer-links { flex-wrap: wrap; }.footer-meta { grid-column: auto; align-items: flex-start; flex-direction: column; }.footer-legal { flex-direction: column; gap: 5px; }
}

@media (max-width: 520px) {
  .hero { padding-top: 108px; }.hero-kicker { font-size: 8px; }.hero-title { font-size: clamp(44px,14.4vw,72px); letter-spacing: -.075em; }.hero-display { font-size: 14px; line-height: 1.35; }.hero-copy { font-size: 13px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 28px; }.button { min-height: 47px; }.hero-metrics strong { font-size: 22px; }.hero-metrics span { max-width: 52px; line-height: 1.4; }
  .section-head h2,.process-intro h2,.contact-copy h2 { font-size: 40px; }.story-step { grid-template-columns: 32px 1fr; gap: 12px; padding: 18px 0; }.story-step h2 { font-size: 34px; }.story-step p { line-height: 1.55; }
  .public-work-grid { grid-template-columns: 1fr; }.public-work-card { min-height: 245px; padding: 24px; }
  .product-panel { padding-block: 75px; }.product-copy h3 { font-size: 48px; }.product-visual { aspect-ratio: .92; }.ai-grid { grid-template-columns: 1fr; }.agent-column { display: none; }.flow-map { height: 82%; }.business-grid { grid-template-columns: 42px 1fr; }.business-main { padding: 14px; }.kpi-row { grid-template-columns: 1fr 1fr; }.kpi-row span:last-child { display: none; }.activity-chart { height: 40%; }.data-kpi { grid-template-columns: 1fr; }.data-kpi > div:last-child { display: none; }.line-chart { height: 46%; }.deploy-center { grid-template-columns: 1fr; justify-items: center; height: 68%; padding: 12px; }.deploy-meta { display: none; }.deploy-ring { width: 140px; height: 140px; }.ui-foot { flex-wrap: wrap; gap: 7px 14px; }
  .capability-item { grid-template-columns: 30px 1fr 30px; }.capability-item h3 { font-size: 24px; }.capability-item p { font-size: 11px; }
  .scenario-window { aspect-ratio: 1.05; }.scenario-copy { grid-template-columns: 1fr; }.scenario-copy > span { grid-row: auto; margin-bottom: 8px; }.workbench-main { padding: 7%; }.workbench-body p { max-width: 100%; font-size: 14px; }
  .principle-grid { grid-template-columns: 1fr; }.principle-grid article { min-height: 160px; }.principle-grid h3 { margin-top: 35px; }
  .project-form { min-height: 620px; padding: 24px 18px; }.choice-grid { grid-template-columns: 1fr; }.stage-choice { grid-template-columns: repeat(2,1fr); }.split-fields { grid-template-columns: 1fr; gap: 0; }.form-step legend { font-size: 28px; }.form-actions { justify-content: space-between; }.form-next { margin-left: auto; }
  .site-footer { gap: 35px; }.footer-links { gap: 20px; }
}

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